feat(gui-v2): add field type icon

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

packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue

@@ -19,7 +19,9 @@ import URLIcon from '~icons/mdi/link'
 import EmailIcon from '~icons/mdi/email'
 import CurrencyIcon from '~icons/mdi/currency-usd-circle-outline'
 
-const column = inject(ColumnInj)
+const { columnMeta } = defineProps<{ columnMeta?: ColumnType }>()
+
+const column = inject(ColumnInj, columnMeta)
 
 const additionalColMeta = useColumn(column as ColumnType)
 

packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { LinkToAnotherRecordType } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
 import { ColumnInj } from '~/context'
 import GenericIcon from '~icons/mdi/square-rounded'
@@ -9,7 +9,9 @@ import MMIcon from '~icons/mdi/table-network'
 import FormulaIcon from '~icons/mdi/math-integral'
 import RollupIcon from '~icons/mdi/movie-roll'
 
-const column = inject(ColumnInj)
+const { columnMeta } = defineProps<{ columnMeta?: ColumnType }>()
+
+const column = inject(ColumnInj, columnMeta)
 
 const icon = computed(() => {
   switch (column?.uidt) {

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

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import type { SelectProps } from 'ant-design-vue'
+import { isVirtualCol } from 'nocodb-sdk'
 import { computed } from 'vue'
 import { MetaInj } from '~/context'
+import VirtualCellIcon from '~/components/smartsheet-header/VirtualCellIcon.vue'
+import CellIcon from '~/components/smartsheet-header/CellIcon.vue'
 
 interface Props {
   modelValue?: string
@@ -48,6 +51,10 @@ const options = computed<SelectProps['options']>(() =>
   meta?.value?.columns?.map((c) => ({
     value: c.id,
     label: c.title,
+    icon: h(isVirtualCol(c) ? VirtualCellIcon : CellIcon, {
+      columnMeta: c,
+    }),
+    c,
   })),
 )
 
@@ -57,42 +64,9 @@ const filterOption = (input: string, option: any) => {
 </script>
 
 <template>
-  <a-select
-    v-model:value="localValue"
-    size="small"
-    show-search
-    placeholder="Select a field"
-    :options="options"
-    :filter-option="filterOption"
-  ></a-select>
-
-  <!--  <v-autocomplete
-      ref="field"
-      v-model="localValue"
-      class="caption"
-      :items="meta.columns"
-      item-value="id"
-      item-text="title"
-      :label="$t('objects.field')"
-      variant="solo"
-      hide-details
-      @click.stop
-    >
-      &lt;!&ndash;    &lt;!&ndash; @change="$emit('change')" &ndash;&gt; &ndash;&gt;
-      &lt;!&ndash;    <template #selection="{ item }"> &ndash;&gt;
-      &lt;!&ndash;      <v-icon 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;    </template> &ndash;&gt;
-      &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> -->
+  <a-select v-model:value="localValue" size="small" show-search placeholder="Select a field" :filter-option="filterOption">
+    <a-select-option v-for="option in options" :key="option.value" :value="option.value">
+      <div class="flex gap-2 align-center"><component :is="option.icon" class="!text-xs !mx-0" /> {{ option.label }}</div>
+    </a-select-option>
+  </a-select>
 </template>
-

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

@@ -72,7 +72,7 @@ watch(
             <!--          </v-select> -->
           </template>
         </div>
-        <a-button size="small" class="text-xs text-grey text-capitalize " @click.stop="addSort">
+        <a-button size="small" class="text-xs text-grey text-capitalize" @click.stop="addSort">
           <div class="flex gap-1 align-center">
             <MdiAddIcon />
             <!-- Add Sort Option -->