From 401859265598a1bc0d7e7492bce958baa4adedde Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 13 Sep 2022 17:43:06 +0200
Subject: [PATCH] chore(nc-gui): more type fixes

---
 .../components/smartsheet/sidebar/MenuTop.vue | 28 +++++++++++--------
 .../smartsheet/sidebar/RenameableMenuItem.vue | 22 +++++++--------
 2 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
index e3307587e5..cec93e16d2 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
@@ -5,9 +5,7 @@ import type { Menu as AntMenu } from 'ant-design-vue'
 import { message } from 'ant-design-vue'
 import type { Ref } from 'vue'
 import Sortable from 'sortablejs'
-import { useI18n } from 'vue-i18n'
 import RenameableMenuItem from './RenameableMenuItem.vue'
-import { useNuxtApp } from '#app'
 import {
   ActiveViewInj,
   ViewListInj,
@@ -17,6 +15,8 @@ import {
   ref,
   useApi,
   useDialog,
+  useI18n,
+  useNuxtApp,
   useRoute,
   useRouter,
   viewTypeAlias,
@@ -40,7 +40,7 @@ const { $e } = useNuxtApp()
 
 const activeView = inject(ActiveViewInj, ref())
 
-const views = inject<Ref<any[]>>(ViewListInj, ref([]))
+const views = inject<Ref<ViewType[]>>(ViewListInj, ref([]))
 
 const { api } = useApi()
 
@@ -76,7 +76,7 @@ function markItem(id: string) {
 }
 
 /** validate view title */
-function validate(view: Record<string, any>) {
+function validate(view: ViewType) {
   if (!view.title || view.title.trim().length < 0) {
     return 'View name is required'
   }
@@ -110,28 +110,32 @@ async function onSortEnd(evt: SortableEvent) {
   const previousEl = children[newIndex - 1]
   const nextEl = children[newIndex + 1]
 
-  const currentItem: Record<string, any> = views.value.find((v) => v.id === evt.item.id)
-  const previousItem: Record<string, any> = previousEl ? views.value.find((v) => v.id === previousEl.id) : {}
-  const nextItem: Record<string, any> = nextEl ? views.value.find((v) => v.id === nextEl.id) : {}
+  const currentItem = views.value.find((v) => v.id === evt.item.id)
+
+  if (!currentItem || !currentItem.id) return
+
+  const previousItem = (previousEl ? views.value.find((v) => v.id === previousEl.id) : {}) as ViewType
+  const nextItem = (nextEl ? views.value.find((v) => v.id === nextEl.id) : {}) as ViewType
 
   let nextOrder: number
 
   // set new order value based on the new order of the items
   if (views.value.length - 1 === newIndex) {
-    nextOrder = parseFloat(previousItem.order) + 1
+    nextOrder = parseFloat(String(previousItem.order)) + 1
   } else if (newIndex === 0) {
-    nextOrder = parseFloat(nextItem.order) / 2
+    nextOrder = parseFloat(String(nextItem.order)) / 2
   } else {
-    nextOrder = (parseFloat(previousItem.order) + parseFloat(nextItem.order)) / 2
+    nextOrder = (parseFloat(String(previousItem.order)) + parseFloat(String(nextItem.order))) / 2
   }
 
-  const _nextOrder = !isNaN(Number(nextOrder)) ? nextOrder.toString() : oldIndex.toString()
+  const _nextOrder = !isNaN(Number(nextOrder)) ? nextOrder : oldIndex
 
   currentItem.order = _nextOrder
 
   await api.dbView.update(currentItem.id, { order: _nextOrder })
 
   markItem(currentItem.id)
+
   $e('a:view:reorder')
 }
 
@@ -168,7 +172,7 @@ async function onRename(view: ViewType) {
   try {
     await api.dbView.update(view.id!, {
       title: view.title,
-      order: String(view.order),
+      order: view.order,
     })
 
     await router.replace({
diff --git a/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue b/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
index 49e43bf69c..2602e742a7 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
@@ -1,19 +1,19 @@
 <script lang="ts" setup>
-import type { ViewTypes } from 'nocodb-sdk'
+import type { ViewType, ViewTypes } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
-import { viewIcons } from '~/utils'
-import { IsLockedInj, onKeyStroke, useDebounceFn, useNuxtApp, useUIPermission, useVModel } from '#imports'
+import type { WritableComputedRef } from '@vue/reactivity'
+import { IsLockedInj, onKeyStroke, useDebounceFn, useNuxtApp, useUIPermission, useVModel, viewIcons } from '#imports'
 
 interface Props {
-  view: Record<string, any>
-  onValidate: (view: Record<string, any>) => boolean | string
+  view: ViewType
+  onValidate: (view: ViewType) => boolean | string
 }
 
 interface Emits {
   (event: 'update:view', data: Record<string, any>): void
   (event: 'changeView', view: Record<string, any>): void
-  (event: 'rename', view: Record<string, any>): void
-  (event: 'delete', view: Record<string, any>): void
+  (event: 'rename', view: ViewType): void
+  (event: 'delete', view: ViewType): void
   (event: 'openModal', data: { type: ViewTypes; title?: string; copyViewId?: string }): void
 }
 
@@ -21,7 +21,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const vModel = useVModel(props, 'view', emits)
+const vModel = useVModel(props, 'view', emits) as WritableComputedRef<any>
 
 const { $e } = useNuxtApp()
 
@@ -92,7 +92,7 @@ function focusInput(el: HTMLInputElement) {
 /** Duplicate a view */
 // todo: This is not really a duplication, maybe we need to implement a true duplication?
 function onDuplicate() {
-  emits('openModal', { type: vModel.value.type, title: vModel.value.title, copyViewId: vModel.value.id })
+  emits('openModal', { type: vModel.value.type!, title: vModel.value.title, copyViewId: vModel.value.id })
 
   $e('c:view:copy', { view: vModel.value.type })
 }
@@ -129,7 +129,7 @@ async function onRename() {
 function onCancel() {
   if (!isEditing) return
 
-  vModel.value.title = originalTitle
+  vModel.value.title = originalTitle || ''
   onStopEdit()
 }
 
@@ -161,7 +161,7 @@ function onStopEdit() {
         <component
           :is="viewIcons[vModel.type].icon"
           class="nc-view-icon group-hover:hidden"
-          :style="{ color: viewIcons[vModel?.type]?.color }"
+          :style="{ color: viewIcons[vModel.type].color }"
         />
       </div>