feat(gui-v2): filter layout

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue

@@ -7,7 +7,7 @@ import { comparisonOpList } from '~/utils/filterUtils'
 import { ActiveViewInj, MetaInj, ReloadViewDataHookInj } from '~/context'
 import useViewFilters from '~/composables/useViewFilters'
 import MdiDeleteIcon from '~icons/mdi/close-box'
-
+import MdiAddIcon from '~icons/mdi/plus'
 const { nested = false, parentId } = defineProps<{ nested?: boolean; parentId?: string }>()
 
 const meta = inject(MetaInj)
@@ -72,13 +72,13 @@ watch(
 </script>
 
 <template>
-  <div class="backgroundColor pa-2 menu-filter-dropdown bg-background" :style="{ width: nested ? '100%' : '630px' }">
+  <div class="bg-white shadow pa-2 menu-filter-dropdown" :style="{ width: nested ? '100%' : '630px' }">
     <div v-if="filters && filters.length" class="grid" @click.stop>
       <template v-for="(filter, i) in filters" :key="filter.id || i">
         <template v-if="filter.status !== 'delete'">
           <div v-if="filter.is_group" :key="i" style="grid-column: span 4; padding: 6px" class="elevation-4">
             <div class="d-flex" style="gap: 6px; padding: 0 6px">
-              <v-icon
+              <!--              <v-icon
                 v-if="!filter.readOnly"
                 :key="`${i}_3`"
                 small
@@ -86,10 +86,18 @@ watch(
                 @click.stop="deleteFilter(filter, i)"
               >
                 mdi-close-box
-              </v-icon>
+              </v-icon> -->
+              <MdiDeleteIcon
+                v-if="!filter.readOnly"
+                small
+                class="nc-filter-item-remove-btn"
+                @click.stop="deleteFilter(filter, i)"
+              />
+
               <span v-else :key="`${i}_1`" />
-              <v-select
+
-                v-model="filter.logical_op"
+              <a-select
+                v-model:value="filter.logical_op"
                 class="flex-shrink-1 flex-grow-0 elevation-0 caption"
                 :items="['and', 'or']"
                 density="compact"
@@ -102,7 +110,7 @@ watch(
                 <!--                <template #item="{ item }"> -->
                 <!--                  <span class="caption font-weight-regular">{{ item }}</span> -->
                 <!--                </template> -->
-              </v-select>
+              </a-select>
             </div>
             <!--            <column-filter
               v-if="filter.id || shared"
@@ -134,28 +142,24 @@ watch(
               v-if="!filter.readOnly"
               class="nc-filter-item-remove-btn text-grey align-self-center"
               @click.stop="deleteFilter(filter, i)"
-            ></MdiDeleteIcon>
+            />
             <span v-else />
 
-            <span v-if="!i" :key="`${i}_2`" class="text-xs d-flex align-center">{{ $t('labels.where') }}</span>
+            <span v-if="!i" class="text-xs d-flex align-center">{{ $t('labels.where') }}</span>
 
-            <v-select
+            <a-select
               v-else
-              :key="`${i}_4`"
+              v-model:value="filter.logical_op"
-              v-model="filter.logical_op"
+              class="h-full"
-              class="w-full elevation-0 caption"
+              :options="[
-              :items="['and', 'or']"
+                { value: 'and', text: 'AND' },
-              density="compact"
+                { value: 'or', text: 'OR' },
-              variant="solo"
+              ]"
               hide-details
               :disabled="filter.readOnly"
               @click.stop
               @change="filterUpdateCondition(filter, i)"
             />
-            <!--              <template #item="{ item }">
-                <span class="caption font-weight-regular">{{ item }}</span>
-              </template>
-            </v-select> -->
 
             <FieldListAutoCompleteDropdown
               :key="`${i}_6`"
@@ -167,10 +171,10 @@ watch(
               @change="saveOrUpdate(filter, i)"
             />
 
-            <v-select
+            <a-select
-              v-model="filter.comparison_op"
+              v-model:value="filter.comparison_op"
               class="caption nc-filter-operation-select text-sm"
-              :items="comparisonOpList.map((it) => it.value)"
+              :options="comparisonOpList"
               :placeholder="$t('labels.operation')"
               density="compact"
               variant="solo"
@@ -189,21 +193,17 @@ watch(
             <!--              </template> -->
             <!--            </v-select> -->
             <span v-if="['null', 'notnull', 'empty', 'notempty'].includes(filter.comparison_op)" :key="`span${i}`" />
-            <v-checkbox
+            <a-checkbox
               v-else-if="types[filter.field] === 'boolean'"
-              :key="`${i}_7`"
+              v-model:value="filter.value"
-              v-model="filter.value"
               dense
               :disabled="filter.readOnly"
               @change="saveOrUpdate(filter, i)"
             />
-            <v-text-field
+            <a-input
               v-else
               :key="`${i}_7`"
               v-model="filter.value"
-              density="compact"
-              variant="solo"
-              hide-details
               class="caption text-sm nc-filter-value-select"
               :disabled="filter.readOnly"
               @click.stop
@@ -214,11 +214,14 @@ watch(
       </template>
     </div>
 
-    <v-btn small class="elevation-0 text-sm text-capitalize text-grey my-3" @click.stop="addFilter">
+    <a-button small class="elevation-0 text-sm text-capitalize text-grey my-3" @click.stop="addFilter">
-      <!--      <v-icon small color="grey"> mdi-plus </v-icon> -->
+      <div class="flex align-center gap-1">
-      <!-- Add Filter -->
+        <!--      <v-icon small color="grey"> mdi-plus </v-icon> -->
-      {{ $t('activity.addFilter') }}
+        <MdiAddIcon />
-    </v-btn>
+        <!-- Add Filter -->
+        {{ $t('activity.addFilter') }}
+      </div>
+    </a-button>
     <slot />
   </div>
 </template>

packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue

@@ -16,51 +16,29 @@ const applyChanges = () => {}
 </script>
 
 <template>
-  <v-menu offset-y eager transition="slide-y-transition">
+  <a-dropdown :trigger="['click']">
-    <template #activator="{ props }">
+    <v-badge :value="filters.length" color="primary" dot overlap>
-      <v-badge :value="filters.length" color="primary" dot overlap>
+      <a-button
-        <a-button
+        v-t="['c:filter']"
-          v-t="['c:filter']"
+        class="nc-filter-menu-btn px-2 nc-remove-border border-0"
-          class="nc-filter-menu-btn px-2 nc-remove-border border-0"
+        :disabled="isLocked"
-          :disabled="isLocked"
+        outlined
-          outlined
+        size="small"
-          size="small"
+        text
-          text
+        :class="{
-          :class="{
+          'primary lighten-5 grey--text text--darken-3': filters.length,
-            'primary lighten-5 grey--text text--darken-3': filters.length,
+        }"
-          }"
+      >
-          v-bind="props"
+        <div class="flex align-center gap-1 text-sm">
-          ><div class="flex align-center gap-1 text-sm">
+          <MdiFilterIcon class="text-grey" />
-            <MdiFilterIcon class="text-grey" />
+          <!-- Filter -->
-            <!-- Filter -->
+          <span class="text-capitalize">{{ $t('activity.filter') }}</span>
-            <span class="text-capitalize">{{ $t('activity.filter') }}</span>
+          <MdiMenuDownIcon class="text-grey" />
-            <MdiMenuDownIcon class="text-grey" />
+        </div>
-          </div>
+      </a-button>
-        </a-button>
+    </v-badge>
-      </v-badge>
+    <template #overlay>
+      <SmartsheetToolbarColumnFilter />
     </template>
-    <SmartsheetToolbarColumnFilter>
+  </a-dropdown>
-      <!--      <div class="d-flex align-center mx-2" @click.stop>
-        <v-checkbox
-          id="col-filter-checkbox"
-          v-model="autoApplyFilter"
-          class="col-filter-checkbox"
-          hide-details
-          dense
-          type="checkbox"
-          color="grey"
-        >
-          <template #label>
-            <span class="grey&#45;&#45;text caption">
-              {{ $t('msg.info.filterAutoApply') }}
-              &lt;!&ndash; Auto apply &ndash;&gt;
-            </span>
-          </template>
-        </v-checkbox>
-
-        <v-spacer />
-        <v-btn v-show="!autoApplyFilter" color="primary" small class="caption ml-2" @click="applyChanges"> Apply changes </v-btn>
-      </div> -->
-    </SmartsheetToolbarColumnFilter>
-  </v-menu>
 </template>

packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { SelectProps } from 'ant-design-vue'
+import { computed } from 'vue'
 import { MetaInj } from '~/context'
 
 interface Props {
@@ -42,37 +44,55 @@ const localValue = computed({
     },
   },
 } */
+const options = computed<SelectProps['options']>(() =>
+  meta?.value?.columns?.map((c) => ({
+    value: c.id,
+    label: c.title,
+  })),
+)
+
+const filterOption = (input: string, option: any) => {
+  return option.value.toLowerCase()?.includes(input.toLowerCase())
+}
 </script>
 
 <template>
-  <v-autocomplete
+  <a-select
-    ref="field"
+    v-model:value="localValue"
-    v-model="localValue"
+    show-search
-    class="caption"
+    placeholder="Select a field"
-    :items="meta.columns"
+    :options="options"
-    item-value="id"
+    :filter-option="filterOption"
-    item-text="title"
+  ></a-select>
-    :label="$t('objects.field')"
+
-    variant="solo"
+  <!--  <v-autocomplete
-    hide-details
+      ref="field"
-    @click.stop
+      v-model="localValue"
-  >
+      class="caption"
-    <!--    &lt;!&ndash; @change="$emit('change')" &ndash;&gt; -->
+      :items="meta.columns"
-    <!--    <template #selection="{ item }"> -->
+      item-value="id"
-    <!--      <v-icon small class="mr-1"> -->
+      item-text="title"
-    <!--        {{ item.icon }} -->
+      :label="$t('objects.field')"
-    <!--      </v-icon> -->
+      variant="solo"
-    <!--      {{ item.title }} -->
+      hide-details
-    <!--    </template> -->
+      @click.stop
-    <!--    <template #item="{ item }"> -->
+    >
-    <!--      <span :class="`caption font-weight-regular nc-fld-${item.title}`"> -->
+      &lt;!&ndash;    &lt;!&ndash; @change="$emit('change')" &ndash;&gt; &ndash;&gt;
-    <!--        <v-icon color="grey" small class="mr-1"> -->
+      &lt;!&ndash;    <template #selection="{ item }"> &ndash;&gt;
-    <!--          {{ item.icon }} -->
+      &lt;!&ndash;      <v-icon small class="mr-1"> &ndash;&gt;
-    <!--        </v-icon> -->
+      &lt;!&ndash;        {{ item.icon }} &ndash;&gt;
-    <!--        {{ item.title }} -->
+      &lt;!&ndash;      </v-icon> &ndash;&gt;
-    <!--      </span> -->
+      &lt;!&ndash;      {{ item.title }} &ndash;&gt;
-    <!--    </template> -->
+      &lt;!&ndash;    </template> &ndash;&gt;
-  </v-autocomplete>
+      &lt;!&ndash;    <template #item="{ item }"> &ndash;&gt;
+      &lt;!&ndash;      <span :class="`caption font-weight-regular nc-fld-${item.title}`"> &ndash;&gt;
+      &lt;!&ndash;        <v-icon color="grey" small class="mr-1"> &ndash;&gt;
+      &lt;!&ndash;          {{ item.icon }} &ndash;&gt;
+      &lt;!&ndash;        </v-icon> &ndash;&gt;
+      &lt;!&ndash;        {{ item.title }} &ndash;&gt;
+      &lt;!&ndash;      </span> &ndash;&gt;
+      &lt;!&ndash;    </template> &ndash;&gt;
+    </v-autocomplete> -->
 </template>
 
 <style scoped></style>

packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue

@@ -72,7 +72,6 @@ const onMove = (event) => {
   // saveOrUpdate(sortedFields[event.moved.newIndex], event.moved.newIndex);
   $e('a:fields:reorder')
 }
-
 </script>
 
 <template>
@@ -116,9 +115,7 @@ const onMove = (event) => {
         </div>
         <v-divider class="my-2" />
 
-
         <div class="p-2 py-1 flex" @click.stop>
-
           <a-checkbox v-model:checked="showSystemFields">
             <span class="text-xs"> {{ $t('activity.showSystemFields') }}</span>
           </a-checkbox>
@@ -135,9 +132,7 @@ const onMove = (event) => {
         </div>
       </div>
     </template>
-
   </a-dropdown>
-
 </template>
 
 <style scoped lang="scss">