|
Description
Martin Renvoize (ashimema)
2025-10-31 07:43:20 UTC
Created attachment 188814 [details] [review] Bug 41151: Modernize clear button UX in additional fields This patch improves the UX of the clear functionality for additional fields by: - Replacing the separate "Clear" button with an inline clear icon (×) that appears inside the input field when there is content - Adding proper spacing between the input field and "New" button using flexbox layout - Styling the "New" button with Bootstrap button classes for consistency - Making the clear button only visible when the field has content This provides a more modern, intuitive interface pattern similar to standard search inputs and maintains better visual consistency with other form elements in Koha. Created attachment 188815 [details] [review] Bug 41151: Improve additional fields display alignment and formatting This patch improves the display of additional fields by: - Removing the nested fieldset wrapper that caused alignment issues - Converting the legend to a header list item for consistency - Aligning additional field labels with main form field labels - Displaying multi-value fields (comma-separated) on separate lines without bullets or extra indentation, aligned with single values - Using the same visual separator pattern as the entry form This creates perfect alignment between additional fields and regular fields in the display view, with multi-value fields showing cleanly stacked values in the same column as single values. Created attachment 188816 [details] [review] Bug 41151: Display multi-value additional fields as lists in datatables This patch improves the display of searchable repeatable additional fields in datatable columns by: - Detecting comma-separated values in the value_str field - Rendering multiple values as an HTML unordered list instead of comma-separated text - Adding appropriate CSS styling for list display within table cells - Maintaining single-value display for non-repeatable fields This makes multi-value additional fields much more readable in list views, with each value appearing on its own line within the table cell. For example, "Bang, History" now displays as: • Bang • History This completes the UX improvements for additional fields across all three contexts: entry forms, detail views, and list datatables. Created attachment 188817 [details]
Updated table display
Created attachment 188818 [details]
Updated input view
Created attachment 188819 [details]
Updated display view
Created attachment 188820 [details] [review] Bug 41151: Modernize clear button UX in additional fields This patch improves the UX of the clear functionality for additional fields by: - Replacing the separate "Clear" button with an inline clear icon (×) that appears inside the input field when there is content - Adding proper spacing between the input field and "New" button using flexbox layout - Styling the "New" button with Bootstrap button classes for consistency - Making the clear button only visible when the field has content This provides a more modern, intuitive interface pattern similar to standard search inputs and maintains better visual consistency with other form elements in Koha. Signed-off-by: David Nind <david@davidnind.com> Created attachment 188821 [details] [review] Bug 41151: Improve additional fields display alignment and formatting This patch improves the display of additional fields by: - Removing the nested fieldset wrapper that caused alignment issues - Converting the legend to a header list item for consistency - Aligning additional field labels with main form field labels - Displaying multi-value fields (comma-separated) on separate lines without bullets or extra indentation, aligned with single values - Using the same visual separator pattern as the entry form This creates perfect alignment between additional fields and regular fields in the display view, with multi-value fields showing cleanly stacked values in the same column as single values. Signed-off-by: David Nind <david@davidnind.com> Created attachment 188822 [details] [review] Bug 41151: Display multi-value additional fields as lists in datatables This patch improves the display of searchable repeatable additional fields in datatable columns by: - Detecting comma-separated values in the value_str field - Rendering multiple values as an HTML unordered list instead of comma-separated text - Adding appropriate CSS styling for list display within table cells - Maintaining single-value display for non-repeatable fields This makes multi-value additional fields much more readable in list views, with each value appearing on its own line within the table cell. For example, "Bang, History" now displays as: • Bang • History This completes the UX improvements for additional fields across all three contexts: entry forms, detail views, and list datatables. Signed-off-by: David Nind <david@davidnind.com> Fantastic work Martin! These changes make adding, editing, and viewing the additional fields for Vue enabled modules much more consistent and usable. Testing notes (using KTD): 1. Apply patches (and dependencies) 2. Rebuild the JavaScript (yarn js:build or yarn build(?)) 3. Restart everything: restart_all 4. Define some additional fields for vendors (Administration > Additional parameters > Additional fields > Acquisitions > E-resource management > Vendors (aqbooksellers:vendor)). Create a combination of additional fields: . Single field . Repeatable field . Field using authorized values (YES_NO) . Repeatable field using authorized values (YES_NO) . Searchable . Repeatable and searchable 5. Define some additional fields for ERM agreements (Administration > Additional parameters > Additional fields > Acquisitions > Vendors > Agreements (erm_agreements)) . Single field . Repeatable field . Field using authorized values (YES_NO) . Repeatable field using authorized values (YES_NO) . Searchable . Repeatable and searchable 6. Test additional fields for the ERM module: . Enable the ERM module (ERMModule system preference) . Create an agreement and add some additional fields . View the agreement with the additional fields . View the list of agreements 7. Test additional fields for vendors: . Create a new vendor and add some additional fields (Acquisitions > + New vendor) . View the vendor information with additional fields . View the list of vendors I like it ! There is only one thing I noticed when exporting a result list: if you have an additional field that is repeatable it is displayed now as a list with bullets. But if you do an export (excel or csv) the values are all in one cell without separators. In the past the values were separated with a comma+space Created attachment 188874 [details] [review] Bug 41151: Modernize clear button UX in additional fields This patch improves the UX of the clear functionality for additional fields by: - Replacing the separate "Clear" button with an inline clear icon (×) that appears inside the input field when there is content - Adding proper spacing between the input field and "New" button using flexbox layout - Styling the "New" button with Bootstrap button classes for consistency - Making the clear button only visible when the field has content This provides a more modern, intuitive interface pattern similar to standard search inputs and maintains better visual consistency with other form elements in Koha. Signed-off-by: David Nind <david@davidnind.com> Created attachment 188875 [details] [review] Bug 41151: Improve additional fields display alignment and formatting This patch improves the display of additional fields by: - Removing the nested fieldset wrapper that caused alignment issues - Converting the legend to a header list item for consistency - Aligning additional field labels with main form field labels - Displaying multi-value fields (comma-separated) on separate lines without bullets or extra indentation, aligned with single values - Using the same visual separator pattern as the entry form This creates perfect alignment between additional fields and regular fields in the display view, with multi-value fields showing cleanly stacked values in the same column as single values. Signed-off-by: David Nind <david@davidnind.com> Created attachment 188876 [details] [review] Bug 41151: Display multi-value additional fields as lists in datatables This patch improves the display of searchable repeatable additional fields in datatable columns by: - Detecting comma-separated values in the value_str field - Rendering multiple values as an HTML unordered list instead of comma-separated text - Adding appropriate CSS styling for list display within table cells - Maintaining single-value display for non-repeatable fields This makes multi-value additional fields much more readable in list views, with each value appearing on its own line within the table cell. For example, "Bang, History" now displays as: • Bang • History This completes the UX improvements for additional fields across all three contexts: entry forms, detail views, and list datatables. Signed-off-by: David Nind <david@davidnind.com> Created attachment 188877 [details] [review] Bug 41151: Preserve multi-value formatting in datatable exports This patch fixes the export functionality for repeatable additional fields in datatables. Previously, when exporting to CSV or Excel, multi-value fields displayed as HTML markup instead of properly formatted values. The fix detects when DataTables is requesting data for export (type === "export") and returns newline-separated values instead of HTML list markup. This ensures that: - CSV exports properly quote cells containing newlines - Excel exports display each value on a separate line within the cell - The visual list structure is maintained in exported data - Each field's values remain in the correct cell/row For example, a field with values "Bang, History" now exports as: Bang History (with each value on its own line within the same cell) This complements the display improvements made in the previous commits while ensuring exports remain clean and properly formatted. Thankyou so much for the thorough testing and great spot finding the export issue Michaela, hopefully my additional patch resolves that too now :) Created attachment 188878 [details] [review] Bug 41151: Add optional clear button to standard input components This patch enhances the core input components (InputText, InputNumber, and TextArea) with optional clear button functionality, providing a consistent UX across both standard fields and additional fields. Changes: - Added optional 'clearable' prop (default: true) to all three components - Implemented clear button with identical styling to additional fields - Clear button only appears when field has content - Can be disabled per-field with clearable: false if needed The clear button: - Appears as a small 'x' icon on the right side of the input - Only shows when the field contains a value - Uses consistent styling and behavior across all input types - Includes proper ARIA labels for accessibility - Has hover and focus states for better UX Usage (enabled by default): <InputText v-model="myValue" /> <InputNumber v-model="myNumber" /> <TextArea v-model="myText" /> To disable for specific fields: <InputText :clearable="false" v-model="myValue" /> This provides developers with a simple, modern clear button UX by default across all form inputs, ensuring consistency throughout the entire application. Created attachment 188879 [details] [review] Bug 41151: Wire clearable prop through FormElement to input components This patch enables the clearable functionality in forms that use the BaseResource/FormElement pattern by passing the clearable attribute from field definitions through to the underlying input components. Changes: - Updated FormElement to pass clearable prop to InputText - Updated FormElement to pass clearable prop to InputNumber - Updated FormElement to pass clearable prop to TextArea The logic only passes clearable when explicitly defined in the field configuration, allowing the component's default (true) to apply when not specified. This means: - Fields without clearable attribute: clear button enabled (default) - Fields with clearable: false: clear button disabled - Fields with clearable: true: clear button explicitly enabled All text, number, and textarea fields in BaseResource forms (like agreements, packages, titles, etc.) now automatically get the clear button UX unless explicitly disabled. Example to disable for a specific field: { name: "my_field", type: "text", label: $__("My Field"), clearable: false, // Disable clear button for this field } This completes the clear button UX implementation across all form input patterns in the application. Created attachment 188880 [details] [review] Bug 41151: Replace FontAwesome icons with SVG and improve input styling This patch updates all clear buttons with two improvements: 1. Replaced FontAwesome icons with cleaner SVG X icon from vue-select 2. Updated input padding to match Select2/vue-select styling Changes: - Replaced <i class="fa fa-times"></i> with SVG in InputText - Replaced <i class="fa fa-times"></i> with SVG in InputNumber - Replaced <i class="fa fa-times"></i> with SVG in TextArea - Replaced <i class="fa fa-times"></i> with SVG in AdditionalFieldsEntry - Updated CSS from .clear-button i to .clear-button svg - Added title attribute for better tooltip support - Updated input padding from just "padding-right: 2rem" to full padding specification: "padding: 0.375rem 2rem 0.375rem 0.75rem" - Added line-height: 1.5 to match Select2 styling The SVG icon: - Is the same 10x10 SVG used in vue-select components - Uses currentColor via fill for proper color inheritance - Maintains the same hover/focus color transitions (#999 → #333) - Provides a cleaner, more professional appearance The improved padding: - Matches the vertical and horizontal spacing of Select2 dropdowns - Makes text inputs less "squashed" and more spacious - Creates visual consistency across all form controls - Uses Bootstrap's standard input padding (0.375rem vertical, 0.75rem horizontal) This creates visual consistency between clear buttons and padding across all input types and the existing Select2/vue-select components. I've added a few more follow-ups to add the clear functionality on to the standard inputs now too.. more consistency accross the board, |