From ac2e4e9e846adfc8ba53fdae4b6acc56aab0e71a Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 26 Jul 2022 10:19:39 +0200
Subject: [PATCH] chore(gui-v2): fix active view type

---
 .../components/smartsheet/Sidebar.vue         | 140 +-----------------
 packages/nc-gui-v2/context/index.ts           |   4 +-
 2 files changed, 10 insertions(+), 134 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue
index b97bf86063..aef8234608 100644
--- a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue
@@ -32,12 +32,12 @@ let viewCreateType = $ref<ViewTypes>()
 
 let viewCreateDlg = $ref(false)
 
-const openCreateViewDlg = (type: ViewTypes) => {
+function openCreateViewDlg(type: ViewTypes) {
   viewCreateDlg = true
   viewCreateType = type
 }
 
-const onViewCreate = (view: GridType | FormType | KanbanType | GalleryType) => {
+function onViewCreate(view: GridType | FormType | KanbanType | GalleryType) {
   views.value?.push(view)
   activeView.value = view
   viewCreateDlg = false
@@ -45,35 +45,14 @@ const onViewCreate = (view: GridType | FormType | KanbanType | GalleryType) => {
 </script>
 
 <template>
-  <div
-    class="views-navigation-drawer flex-item-stretch pa-4 elevation-1"
-    :style="{
-      maxWidth: toggleDrawer ? '0' : '220px',
-      minWidth: toggleDrawer ? '0' : '220px',
-    }"
-  >
-    <div class="d-flex flex-column h-100">
-      <div class="flex-grow-1">
+  <a-layout-sider class="views-navigation-drawer bg-white shadow" :width="toggleDrawer ? 0 : 250">
+    <div class="flex flex-col h-full">
+      <div class="flex-1">
         <v-list v-if="views && views.length" dense>
           <v-list-item dense>
             <!-- Views -->
             <span class="body-2 font-weight-medium">{{ $t('objects.views') }}</span>
           </v-list-item>
-
-          <!--          <v-list-group v-model="selectedViewIdLocal" mandatory color="primary"> -->
-          <!--
-               todo: add sortable
-               <draggable
-                          :is="_isUIAllowed('viewlist-drag-n-drop') ? 'draggable' : 'div'"
-                          v-model="viewsList"
-                          draggable="div"
-                          v-bind="dragOptions"
-                          @change="onMove($event)"
-                        > -->
-          <!--            <transition-group
-                          type="transition"
-                          :name="!drag ? 'flip-list' : null"
-                        > -->
           <v-list-item
             v-for="view in views"
             :key="view.id"
@@ -83,91 +62,10 @@ const onViewCreate = (view: GridType | FormType | KanbanType | GalleryType) => {
             active-class="x-active--text"
             @click="activeView = view"
           >
-            <!--                :class="`body-2  view nc-view-item nc-draggable-child nc-${
-                      viewTypeAlias[view.type]
-                    }-view-item`"
-                @click="$emit('rerender')" -->
-            <!--              <v-icon
-                v-if="_isUIAllowed('viewlist-drag-n-drop')"
-                small
-                :class="`nc-child-draggable-icon nc-child-draggable-icon-${view.title}`"
-                @click.stop
-              >
-                mdi-drag-vertical
-              </v-icon> -->
-            <!--              <v-list-item-icon class="mr-n1">
-                <v-icon v-if="viewIcons[view.type]" x-small :color="viewIcons[view.type].color">
-                  {{ viewIcons[view.type].icon }}
-                </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>
-                <v-tooltip bottom>
-                  <template #activator="{ on }">
-                    <div class="font-weight-regular" style="overflow: hidden; text-overflow: ellipsis">
-                      <input v-if="view.edit" :ref="`input${i}`" v-model="view.title_temp" />
-
-                      &lt;!&ndash;                        @click.stop
-                                              @keydown.enter.stop="updateViewName(view, i)"
-                                              @blur="updateViewName(view, i)" &ndash;&gt;
-                      <template v-else>
-                        <span v-on="on">{{ view.alias || view.title }}</span>
-                      </template>
-                    </div>
-                  </template>
-                  {{ view.alias || view.title }}
-                </v-tooltip>
-              </v-list-item-title> -->
             <v-spacer />
-            <!--              <template v-if="_isUIAllowed('virtualViewsCreateOrEdit')">
-                &lt;!&ndash; Copy view &ndash;&gt;
-                <x-icon
-                  v-if="!view.edit"
-                  :tooltip="$t('activity.copyView')"
-                  x-small
-                  color="primary"
-                  icon-class="view-icon nc-view-copy-icon"
-                  @click.stop="copyView(view, i)"
-                >
-                  mdi-content-copy
-                </x-icon>
-                &lt;!&ndash; Rename view &ndash;&gt;
-                <x-icon
-                  v-if="!view.edit"
-                  :tooltip="$t('activity.renameView')"
-                  x-small
-                  color="primary"
-                  icon-class="view-icon nc-view-edit-icon"
-                  @click.stop="showRenameTextBox(view, i)"
-                >
-                  mdi-pencil
-                </x-icon>
-                &lt;!&ndash; Delete view" &ndash;&gt;
-                <x-icon
-                  v-if="!view.is_default"
-                  :tooltip="$t('activity.deleteView')"
-                  small
-                  color="error"
-                  icon-class="view-icon nc-view-delete-icon"
-                  @click.stop="deleteView(view)"
-                >
-                  mdi-delete-outline
-                </x-icon>
-              </template>
-              <v-icon
-                v-if="view.id === selectedViewId"
-                small
-                class="check-icon"
-              >
-                mdi-check-bold
-              </v-icon> -->
           </v-list-item>
-          <!--            </transition-group> -->
-          <!--            </draggable> -->
-          <!--          </v-list-group> -->
         </v-list>
 
         <v-divider class="advance-menu-divider" />
@@ -178,24 +76,6 @@ const onViewCreate = (view: GridType | FormType | KanbanType | GalleryType) => {
             <span class="body-2 font-weight-medium" @dblclick="enableDummyFeat = true">
               {{ $t('activity.createView') }}
             </span>
-            <!--            <v-tooltip top>
-              <template #activator="{ props }">
-                &lt;!&ndash;                <x-icon &ndash;&gt;
-                &lt;!&ndash;                  color="pink textColor" &ndash;&gt;
-                &lt;!&ndash;                  icon-class="ml-2" &ndash;&gt;
-                &lt;!&ndash;                  small &ndash;&gt;
-                &lt;!&ndash;                  v-on="on" &ndash;&gt;
-                &lt;!&ndash;                  @mouseenter="overShieldIcon = true" &ndash;&gt;
-                &lt;!&ndash;                  @mouseleave="overShieldIcon = false" &ndash;&gt;
-                &lt;!&ndash;                > &ndash;&gt;
-                &lt;!&ndash;                  mdi-shield-lock-outline &ndash;&gt;
-                &lt;!&ndash;                </x-icon> &ndash;&gt;
-              </template>
-              &lt;!&ndash; Only visible to Creator &ndash;&gt;
-              <span class="caption">
-                {{ $t('msg.info.onlyCreator') }}
-              </span>
-            </v-tooltip> -->
           </v-list-item>
           <v-tooltip bottom>
             <template #activator="{ props }">
@@ -225,9 +105,8 @@ const onViewCreate = (view: GridType | FormType | KanbanType | GalleryType) => {
                 v-bind="props"
                 @click="openCreateViewDlg(ViewTypes.GALLERY)"
               >
-                <!--                <v-list-item-icon class="mr-n1"> -->
                 <component :is="viewIcons[ViewTypes.GALLERY].icon" :class="`text-${viewIcons[ViewTypes.GALLERY].color} mr-1`" />
-                <!--                </v-list-item-icon> -->
+
                 <v-list-item-title>
                   <span class="font-weight-regular">
                     <!-- Gallery -->
@@ -238,7 +117,6 @@ const onViewCreate = (view: GridType | FormType | KanbanType | GalleryType) => {
                 <v-spacer />
 
                 <MdiPlusIcon class="mr-1" />
-                <!--                <v-icon class="mr-1" small> mdi-plus</v-icon> -->
               </v-list-item>
             </template>
             <!-- Add Gallery View -->
@@ -254,9 +132,8 @@ const onViewCreate = (view: GridType | FormType | KanbanType | GalleryType) => {
                 v-bind="props"
                 @click="openCreateViewDlg(ViewTypes.FORM)"
               >
-                <!--                <v-list-item-icon class="mr-n1"> -->
                 <component :is="viewIcons[ViewTypes.FORM].icon" :class="`text-${viewIcons[ViewTypes.FORM].color} mr-1`" />
-                <!--                </v-list-item-icon> -->
+
                 <v-list-item-title>
                   <span class="font-weight-regular">
                     <!-- Form -->
@@ -268,7 +145,6 @@ const onViewCreate = (view: GridType | FormType | KanbanType | GalleryType) => {
                 <v-spacer />
 
                 <MdiPlusIcon class="mr-1" />
-                <!--                <v-icon class="mr-1" small> mdi-plus</v-icon> -->
               </v-list-item>
             </template>
             <!-- Add Form View -->
@@ -279,5 +155,5 @@ const onViewCreate = (view: GridType | FormType | KanbanType | GalleryType) => {
     </div>
 
     <DlgViewCreate v-if="views" v-model="viewCreateDlg" :type="viewCreateType" @created="onViewCreate" />
-  </div>
+  </a-layout-sider>
 </template>
diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts
index 9c7c0da7d0..7bd74a78f6 100644
--- a/packages/nc-gui-v2/context/index.ts
+++ b/packages/nc-gui-v2/context/index.ts
@@ -1,4 +1,4 @@
-import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
+import type { ColumnType, FormType, GalleryType, GridType, KanbanType, TableType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, InjectionKey, Ref } from 'vue'
 import type { EventHook } from '@vueuse/core'
 import type { useViewData } from '#imports'
@@ -14,7 +14,7 @@ export const IsFormInj: InjectionKey<boolean> = Symbol('is-form-injection')
 export const IsGridInj: InjectionKey<boolean> = Symbol('is-grid-injection')
 export const IsLockedInj: InjectionKey<boolean> = Symbol('is-locked-injection')
 export const ValueInj: InjectionKey<any> = Symbol('value-injection')
-export const ActiveViewInj: InjectionKey<Ref<ViewType>> = Symbol('active-view-injection')
+export const ActiveViewInj: InjectionKey<Ref<GridType | FormType | KanbanType | GalleryType>> = Symbol('active-view-injection')
 export const ReadonlyInj: InjectionKey<any> = Symbol('readonly-injection')
 export const ReloadViewDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-view-data-injection')
 export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')