Merge pull request #2163 from nocodb/enhancement/column-icons

enhancement: column icons

packages/nc-gui/components/project/spreadsheet/RowsXcDataTable.vue

@@ -29,6 +29,9 @@
               :key="col.column_name"
               @click="searchField = col.title"
             >
+              <v-icon color="grey darken-4" small class="mr-1">
+                {{ col.icon }}
+              </v-icon>
               <span class="caption">{{ col.title }}</span>
             </v-list-item>
           </v-list>

packages/nc-gui/components/project/spreadsheet/components/ColumnFilter.vue

@@ -109,9 +109,10 @@
               @change="saveOrUpdate(filter, i)"
             >
               <template #item="{ item }">
-                <span
-                  :class="`caption font-weight-regular nc-filter-fld-${item.title}`"
-                >
+                <span :class="`caption font-weight-regular nc-filter-fld-${item.title}`">
+                  <v-icon color="grey darken-4" small class="mr-1">
+                    {{ item.icon }}
+                  </v-icon>
                   {{ item.title }}
                 </span>
               </template>
@@ -182,7 +183,7 @@
 </template>
 
 <script>
-import { UITypes } from '~/components/project/spreadsheet/helpers/uiTypes'
+import { getUIDTIcon, UITypes } from '~/components/project/spreadsheet/helpers/uiTypes'
 
 export default {
   name: 'ColumnFilter',
@@ -276,7 +277,10 @@ export default {
     columns() {
       return (
         this.meta &&
-        this.meta.columns.filter(c => c && (!c.colOptions || !c.system))
+        this.meta.columns.filter(c => c && (!c.colOptions || !c.system)).map(c => ({
+          ...c,
+          icon: getUIDTIcon(c.uidt)
+        }))
       )
     },
     types() {

packages/nc-gui/components/project/spreadsheet/components/FieldsMenu.vue

@@ -123,6 +123,9 @@
               @change="saveOrUpdate(field, i)"
             >
               <template #label>
+                <v-icon color="grey darken-4" small class="mr-1">
+                  {{ field.icon }}
+                </v-icon>
                 <span class="caption">{{ field.title }}</span>
               </template>
             </v-checkbox>
@@ -172,6 +175,7 @@
 <script>
 import draggable from 'vuedraggable'
 import { getSystemColumnsIds } from 'nocodb-sdk'
+import { getUIDTIcon } from '~/components/project/spreadsheet/helpers/uiTypes'
 
 export default {
   name: 'FieldsMenu',
@@ -346,7 +350,8 @@ export default {
             title: c.title,
             fk_column_id: c.id,
             ...(fieldById[c.id] ? fieldById[c.id] : {}),
-            order: (fieldById[c.id] && fieldById[c.id].order) || order++
+            order: (fieldById[c.id] && fieldById[c.id].order) || order++,
+            icon: getUIDTIcon(c.uidt)
           }))
           .sort((a, b) => a.order - b.order)
       } else if (this.isPublic) {

packages/nc-gui/components/project/spreadsheet/components/SortListMenu.vue

@@ -53,6 +53,9 @@
               <span
                 :class="`caption font-weight-regular nc-sort-fld-${item.title}`"
               >
+                <v-icon color="grey darken-4" small class="mr-1">
+                  {{ item.icon }}
+                </v-icon>
                 {{ item.title }}
               </span>
             </template>
@@ -90,6 +93,7 @@
 
 <script>
 import { RelationTypes, UITypes } from "nocodb-sdk";
+import { getUIDTIcon } from '~/components/project/spreadsheet/helpers/uiTypes'
 
 export default {
   name: "SortListMenu",
@@ -115,7 +119,10 @@ export default {
             c.uidt === UITypes.LinkToAnotherRecord &&
             c.colOptions.type !== RelationTypes.BELONGS_TO
           )
-      );
+      ).map(c => ({
+        ...c,
+        icon: getUIDTIcon(c.uidt)
+      }));
     },
   },
   watch: {

packages/nc-gui/components/project/spreadsheet/mixins/spreadsheet.js

@@ -1,4 +1,5 @@
 import { isVirtualCol, filterOutSystemColumns } from 'nocodb-sdk'
+import { getUIDTIcon } from '~/components/project/spreadsheet/helpers/uiTypes'
 
 export default {
   data: () => ({
@@ -91,7 +92,10 @@ export default {
       }, [])
     },
     availableRealColumns() {
-      return this.availableColumns && this.availableColumns.filter(c => !isVirtualCol(c))
+      return this.availableColumns && this.availableColumns.filter(c => !isVirtualCol(c)).map(c => ({
+        ...c,
+        icon: getUIDTIcon(c.uidt)
+      }))
     },
 
     allColumns() {