From 20a1689dac7ee2361ebac45931a400f57501477b Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 8 Jul 2022 19:39:14 +0530
Subject: [PATCH] feat(gui-v2): add view icons

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet/Sidebar.vue         |  1 +
 packages/nc-gui-v2/utils/viewIcons.ts         | 11 ----------
 packages/nc-gui-v2/utils/viewUtils.ts         | 20 +++++++++++++------
 3 files changed, 15 insertions(+), 17 deletions(-)
 delete mode 100644 packages/nc-gui-v2/utils/viewIcons.ts

diff --git a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue
index 93503179c9..305d3fa941 100644
--- a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue
@@ -76,6 +76,7 @@ const toggleDrawer = ref(false)
                 </v-icon>
                 <v-icon v-else color="primary" small> mdi-table </v-icon>
               </v-list-item-icon> -->
+            <component :is="viewIcons[view.type].icon" :class="`text-${viewIcons[view.type].color} mr-1`" />
             <span>{{ view.alias || view.title }}</span>
 
             <!--              <v-list-item-title>
diff --git a/packages/nc-gui-v2/utils/viewIcons.ts b/packages/nc-gui-v2/utils/viewIcons.ts
deleted file mode 100644
index cad188c406..0000000000
--- a/packages/nc-gui-v2/utils/viewIcons.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ViewTypes } from 'nocodb-sdk'
-
-export const viewIcons = {
-  [ViewTypes.GRID]: { icon: 'mdi-grid-large', color: 'blue' },
-  // [ViewTypes.GRID]: { icon: "mdi-grid-large", color: "blue" },
-  [ViewTypes.FORM]: { icon: 'mdi-form-select', color: 'pink' },
-  calendar: { icon: 'mdi-calendar', color: 'purple' },
-  [ViewTypes.GALLERY]: { icon: 'mdi-camera-image', color: 'orange' },
-  [ViewTypes.KANBAN]: { icon: 'mdi-tablet-dashboard', color: 'green' },
-  view: { icon: 'mdi-eye-circle-outline', color: 'blue' },
-}
diff --git a/packages/nc-gui-v2/utils/viewUtils.ts b/packages/nc-gui-v2/utils/viewUtils.ts
index cad188c406..3f9b3769ea 100644
--- a/packages/nc-gui-v2/utils/viewUtils.ts
+++ b/packages/nc-gui-v2/utils/viewUtils.ts
@@ -1,11 +1,19 @@
 import { ViewTypes } from 'nocodb-sdk'
 
+import MdiGridIcon from '~icons/mdi/grid-large'
+import MdiFormIcon from '~icons/mdi/form-select'
+import MdiCalendarIcon from '~icons/mdi/calendar'
+import MdiGalleryIcon from '~icons/mdi/camera-image'
+import MdiKanbanIcon from '~icons/mdi/tablet-dashboard'
+import MdiEyeIcon from '~icons/mdi/eye-circle-outline'
+
+
 export const viewIcons = {
-  [ViewTypes.GRID]: { icon: 'mdi-grid-large', color: 'blue' },
+  [ViewTypes.GRID]: { icon: MdiGridIcon, color: 'blue' },
   // [ViewTypes.GRID]: { icon: "mdi-grid-large", color: "blue" },
-  [ViewTypes.FORM]: { icon: 'mdi-form-select', color: 'pink' },
-  calendar: { icon: 'mdi-calendar', color: 'purple' },
-  [ViewTypes.GALLERY]: { icon: 'mdi-camera-image', color: 'orange' },
-  [ViewTypes.KANBAN]: { icon: 'mdi-tablet-dashboard', color: 'green' },
-  view: { icon: 'mdi-eye-circle-outline', color: 'blue' },
+  [ViewTypes.FORM]: { icon: MdiFormIcon, color: 'pink' },
+  calendar: { icon: MdiCalendarIcon, color: 'purple' },
+  [ViewTypes.GALLERY]: { icon: MdiGalleryIcon, color: 'orange' },
+  [ViewTypes.KANBAN]: { icon: MdiKanbanIcon, color: 'green' },
+  view: { icon: MdiEyeIcon, color: 'blue' },
 }