From afe99e26c456b5c2f69efb81a516997533ab2b43 Mon Sep 17 00:00:00 2001 From: Raju Udava <86527202+dstala@users.noreply.github.com> Date: Mon, 20 May 2024 20:12:01 +0530 Subject: [PATCH] Nc feat/filter UI (#8429) * feat: hide arrow if it's in readonly mode * fix: apply locking logic with filter group * fix: remove border and padding between filter options * fix: spacing and font-size corrections * fix: missing separator line * feat: use different background in each level * feat: remove border for `where` label * feat: keep border for `where` label * feat: filter ui * refactor: update spacing * feat: suggested ui changes * fix: disabled text color correction * feat: focus add button by default and on reopening * test: fix filter group tests * fix: typo correction * refactor: spacing and height correction * refactor: set darker border color to make visible in inner most group * refactor: font color and column order * fix: filter sql error * Update packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update tests/playwright/pages/Dashboard/common/Toolbar/Filter.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * refactor: improved version for focusing button Signed-off-by: Pranav C * refactor: replace button with menuitem Signed-off-by: Pranav C --------- Signed-off-by: Pranav C Co-authored-by: Pranav C Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --- .../smartsheet/toolbar/ColumnFilter.vue | 382 +++++++++++++----- .../smartsheet/toolbar/ColumnFilterMenu.vue | 1 + .../toolbar/FieldListAutoCompleteDropdown.vue | 23 +- packages/nc-gui/composables/useViewFilters.ts | 2 +- .../pages/Dashboard/common/Toolbar/Filter.ts | 9 +- 5 files changed, 308 insertions(+), 109 deletions(-) diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue index 8d13d78556..2b908e6578 100644 --- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue +++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue @@ -11,6 +11,7 @@ interface Props { modelValue?: undefined | Filter[] webHook?: boolean draftFilter?: Partial + isOpen?: boolean } const props = withDefaults(defineProps(), { @@ -27,6 +28,7 @@ const emit = defineEmits(['update:filtersLength', 'update:draftFilter', 'update: const excludedFilterColUidt = [UITypes.QrCode, UITypes.Barcode] const draftFilter = useVModel(props, 'draftFilter', emit) + const modelValue = useVModel(props, 'modelValue', emit) const { nestedLevel, parentId, autoSave, hookId, showLoading, webHook } = toRefs(props) @@ -386,6 +388,15 @@ watch( immediate: true, }, ) + +const addFilterBtnRef = ref() +watchEffect(() => { + if (props.isOpen && !nested.value && addFilterBtnRef.value) { + setTimeout(() => { + addFilterBtnRef.value?.$el?.focus() + }, 10) + } +}) diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue index 55b4462566..fab37ab99e 100644 --- a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue +++ b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue @@ -63,17 +63,18 @@ const options = computed(() => return !isVirtualSystemField } }) - )?.map((c: ColumnType) => ({ - value: c.id, - label: c.title, - icon: h( - isVirtualCol(c) ? resolveComponent('SmartsheetHeaderVirtualCellIcon') : resolveComponent('SmartsheetHeaderCellIcon'), - { - columnMeta: c, - }, - ), - c, - })), + ) + // sort and keep system columns at the end + ?.sort((field1, field2) => +isSystemColumn(field2) - +isSystemColumn(field1)) + ?.map((c: ColumnType) => ({ + value: c.id, + label: c.title, + icon: h( + isVirtualCol(c) ? resolveComponent('SmartsheetHeaderVirtualCellIcon') : resolveComponent('SmartsheetHeaderCellIcon'), + { columnMeta: c }, + ), + c, + })), ) const filterOption = (input: string, option: any) => option.label.toLowerCase()?.includes(input.toLowerCase()) diff --git a/packages/nc-gui/composables/useViewFilters.ts b/packages/nc-gui/composables/useViewFilters.ts index 59c6a50ce6..4d5f09eaa8 100644 --- a/packages/nc-gui/composables/useViewFilters.ts +++ b/packages/nc-gui/composables/useViewFilters.ts @@ -188,7 +188,7 @@ export function useViewFilters( comparison_op: comparisonOpList(options.value?.[0].uidt as UITypes).filter((compOp) => isComparisonOpAllowed({ fk_column_id: options.value?.[0].id }, compOp), )?.[0].value as FilterType['comparison_op'], - value: '', + value: null, status: 'create', logical_op: logicalOps.size === 1 ? logicalOps.values().next().value : 'and', } diff --git a/tests/playwright/pages/Dashboard/common/Toolbar/Filter.ts b/tests/playwright/pages/Dashboard/common/Toolbar/Filter.ts index a0986c4d05..2b86421ae6 100644 --- a/tests/playwright/pages/Dashboard/common/Toolbar/Filter.ts +++ b/tests/playwright/pages/Dashboard/common/Toolbar/Filter.ts @@ -65,7 +65,14 @@ export class ToolbarFilterPage extends BasePage { await this.get().locator(`button:has-text("Add Filter Group")`).last().click(); const filterDropdown = this.get().locator('.menu-filter-dropdown').nth(filterGroupIndex); await filterDropdown.waitFor({ state: 'visible' }); - await filterDropdown.locator(`button:has-text("Add Filter")`).first().click(); + const ADD_BUTTON_SELECTOR = `span:has-text("add")`; + const FILTER_GROUP_SUB_MENU_SELECTOR = `.nc-dropdown-filter-group-sub-menu`; + const ADD_FILTER_SELECTOR = `.nc-menu-item:has-text("Add Filter")`; + + await filterDropdown.locator(ADD_BUTTON_SELECTOR).first().click(); + const filterGroupSubMenu = this.rootPage.locator(FILTER_GROUP_SUB_MENU_SELECTOR).last(); + await filterGroupSubMenu.waitFor({ state: 'visible' }); + await filterGroupSubMenu.locator(ADD_FILTER_SELECTOR).first().click(); const selectField = filterDropdown.locator('.nc-filter-field-select').last(); const selectOperation = filterDropdown.locator('.nc-filter-operation-select').last(); const selectValue = filterDropdown.locator('.nc-filter-value-select > input').last();