From 490392db8204d6478618a10dd5e2e69b94ed55bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ra=C3=BAl=20Aguilar?= Date: Thu, 14 Dec 2023 10:14:03 +0100 Subject: [PATCH] [ONL-8097] Fix search filter width (#1765) * wip * [ONL-8097] place search filter below other filters * [ONL-8097] remove non used template ref * [ONL-8097] avoid using tw class on template * [ONL-8097] remove non used template ref * [ONL-8097] fix unit test and update snapshots * [ONL-8097] add min width * [ONL-8097] increase media query threshold * [ONL-8097] add story and update snapshots * [ONL-8097] add margins * [ONL-8097] set layout class using a prop * [ONL-8097] use grid layout by default * 2.5.2 * [ONL-8097] remove console log * [ONL-8097] use flag in filter to set new layout * [ONL-8097] update story and snapshots * [ONL-8097] remove layout class prop from smart table * [ONL-8097] add smart table story with stretched filters * [ONL-8097] add margin bottom to table header instead of filters * [ONL-8097] remove unnecessary ternary condition * [ONL-8097] add missing prop in story * [ONL-8097] remove comment --- package-lock.json | 4 +- package.json | 2 +- .../ec-smart-table-heading.vue | 12 ++- .../__snapshots__/ec-smart-table.spec.js.snap | 20 ++-- .../ec-smart-table/ec-smart-table.story.js | 87 ++++++++++++++++++ .../ec-smart-table/ec-smart-table.vue | 12 ++- .../ec-table-filter.spec.js.snap | 48 +++++----- .../ec-table-filter/ec-table-filter.spec.js | 6 +- .../ec-table-filter/ec-table-filter.story.js | 43 +++++++++ .../ec-table-filter/ec-table-filter.vue | 62 +++++++++++-- ...filters-table-filter--all__chrome.snap.png | Bin 72729 -> 91757 bytes ...ilters-table-filter--all__firefox.snap.png | Bin 73506 -> 92439 bytes .../smart-table--all__chrome.snap.png | Bin 205271 -> 253161 bytes .../smart-table--all__firefox.snap.png | Bin 212362 -> 261579 bytes 14 files changed, 246 insertions(+), 50 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7beae8a3b..f2fd81823 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ebury/chameleon-components", - "version": "2.5.1", + "version": "2.5.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ebury/chameleon-components", - "version": "2.5.1", + "version": "2.5.2", "hasInstallScript": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index f75410e3c..00f937d9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ebury/chameleon-components", - "version": "2.5.1", + "version": "2.5.2", "main": "src/main.js", "sideEffects": false, "author": "Ebury Team (http://labs.ebury.rocks/)", diff --git a/src/components/ec-smart-table-heading/ec-smart-table-heading.vue b/src/components/ec-smart-table-heading/ec-smart-table-heading.vue index 4b24e8339..60f985f62 100644 --- a/src/components/ec-smart-table-heading/ec-smart-table-heading.vue +++ b/src/components/ec-smart-table-heading/ec-smart-table-heading.vue @@ -6,7 +6,10 @@
filtering > should change filters when filter prop is ch >
Test 1 (test-value-1)
Test 2 (N/A) @@ -599,13 +599,13 @@ exports[`EcSmartTable > filtering > should change filters when filter prop is ch >
Test 1 (N/A)
Test 2 (N/A) @@ -622,13 +622,13 @@ exports[`EcSmartTable > filtering > should handle changes in filters and reload >
Test 1 (N/A)
Test 2 (N/A) @@ -645,13 +645,13 @@ exports[`EcSmartTable > filtering > should pass given prefilter to table filter >
Test 1 (test-value-1)
Test 2 (N/A) @@ -674,13 +674,13 @@ exports[`EcSmartTable > filtering > should render the given filters 1`] = ` >
Test 1 (N/A)
Test 2 (N/A) diff --git a/src/components/ec-smart-table/ec-smart-table.story.js b/src/components/ec-smart-table/ec-smart-table.story.js index 0474f68b3..b15046690 100644 --- a/src/components/ec-smart-table/ec-smart-table.story.js +++ b/src/components/ec-smart-table/ec-smart-table.story.js @@ -45,6 +45,40 @@ const defaultFilters = [{ }, }]; +const defaultStretchedFilters = [{ + label: 'Payment status', + name: 'paymentStatus', + component: markRaw(EcSyncMultipleValuesFilter), + items: [{ text: 'Paid', value: 'paid' }, { text: 'Cancelled', value: 'canceled' }, { text: 'Overdue', value: 'overdue' }], + isSearchable: false, + isSelectAll: false, + selectAllFiltersText: '', +}, { + label: 'Fee type', + name: 'feeType', + component: markRaw(EcSyncMultipleValuesFilter), + items: [{ text: 'Invoiced', value: 'invoiced' }, { text: 'Payment', value: 'payment' }], + isSearchable: false, + isSelectAll: false, + selectAllFiltersText: '', +}, { + label: 'Due date', + name: 'dueDate', + component: markRaw(EcDateRangeFilter), + fromLabelText: 'From', + toLabelText: 'To', + clearText: 'Clear dates', + errorMessage: '', +}, { + name: 'text', + component: EcTextFilter, + isFullWidth: true, + stretch: true, + inputProps: { + placeholder: 'Type here the text to search by', + }, +}]; + const columns = [ { name: 'request-details', @@ -153,6 +187,7 @@ function useSmartTableSetup(args) { // filters const filters = computed(() => (args.isFilteringEnabled ? defaultFilters : null)); + const stretchedFilters = computed(() => (args.isFilteringEnabled ? defaultStretchedFilters : null)); const selectedFilter = computed(() => prefilters[args.prefilter]); // fake fetch API @@ -253,6 +288,7 @@ function useSmartTableSetup(args) { execute, sortCycle, filters, + stretchedFilters, selectedFilter, infiniteScrollMappedData, getInfiniteScrollMappedData, @@ -558,6 +594,57 @@ export const all = args => ({
+

With stretched filters

+
+
+ + + + + + + +
+

With infinite scrolling

diff --git a/src/components/ec-smart-table/ec-smart-table.vue b/src/components/ec-smart-table/ec-smart-table.vue index 9f3b93d54..c390d1dd1 100644 --- a/src/components/ec-smart-table/ec-smart-table.vue +++ b/src/components/ec-smart-table/ec-smart-table.vue @@ -7,6 +7,7 @@ v-bind="{ title, isResponsive, + hasStretchFilter, }" >