From 90372f280ab7f2c5357c48aca17194fbffff6b97 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 18 Sep 2022 13:28:41 +0200
Subject: [PATCH] chore(nc-gui): cleanup

---
 .../nc-gui/components/general/PoweredBy.vue   |  8 +--
 .../nc-gui/components/smartsheet/Form.vue     | 22 ++++----
 .../[projectType]/form/[viewId]/index.vue     |  4 +-
 .../form/[viewId]/index/index.vue             |  8 +--
 .../form/[viewId]/index/survey.vue            | 55 ++++++++++++-------
 packages/nc-gui/pages/index/index.vue         |  2 +-
 6 files changed, 58 insertions(+), 41 deletions(-)

diff --git a/packages/nc-gui/components/general/PoweredBy.vue b/packages/nc-gui/components/general/PoweredBy.vue
index 295301a7e6..1e46e1b345 100644
--- a/packages/nc-gui/components/general/PoweredBy.vue
+++ b/packages/nc-gui/components/general/PoweredBy.vue
@@ -5,13 +5,13 @@ import { openLink } from '#imports'
 <template>
   <button
     type="button"
-    class="cursor-pointer group text-xs text-slate-500 hover:text-primary dark:hover:text-white dark:text-slate-300 mx-auto my-4 flex justify-center gap-2 items-center"
+    class="cursor-pointer group text-xs text-slate-500 hover:text-primary dark:hover:text-white dark:text-slate-300 mx-auto my-4 flex justify-center gap-1 items-center"
     @click="openLink('https://github.com/nocodb/nocodb')"
   >
-    <span class="bg-primary bg-opacity-100 rounded">
-      <img width="32" height="32" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
+    <span class="rounded">
+      <GeneralNocoIcon class="!relative !top-0" width="32" height="32" />
     </span>
 
-    <span class="color-transition transform group-hover:(scale-103)">Powered by NocoDB</span>
+    <span>Powered by NocoDB</span>
   </button>
 </template>
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 8dbe62d58b..8a69da9853 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -392,9 +392,11 @@ watch(view, (nextView) => {
             <div class="text-center">{{ formViewData.success_msg || 'Successfully submitted form data' }}</div>
           </template>
         </a-alert>
+
         <div v-if="formViewData.show_blank_form" class="text-gray-400 mt-4">
           New form will be loaded after {{ secondsRemain }} seconds
         </div>
+
         <div v-if="formViewData.submit_another_form" class="text-center mt-4">
           <a-button type="primary" size="large" @click="submitted = false"> Submit Another Form</a-button>
         </div>
@@ -403,7 +405,7 @@ watch(view, (nextView) => {
   </a-row>
 
   <a-row v-else class="h-full flex">
-    <a-col v-if="isEditable" :span="8" class="shadow p-2 md:p-4 h-full overflow-auto scrollbar-thin-primary nc-form-left-drawer">
+    <a-col v-if="isEditable" :span="8" class="shadow p-2 md:p-4 h-full overflow-auto scrollbar-thin-dull nc-form-left-drawer">
       <div class="flex flex-wrap gap-2">
         <div class="flex-1 text-lg">
           {{ $t('objects.fields') }}
@@ -444,7 +446,7 @@ watch(view, (nextView) => {
         <template #item="{ element, index }">
           <a-card
             size="small"
-            class="cursor-pointer item hover:(bg-primary ring-1 ring-accent ring-opacity-100) bg-opacity-10 !rounded !shadow-lg"
+            class="!border-0 color-transition cursor-pointer item hover:(bg-primary ring-1 ring-accent ring-opacity-100) bg-opacity-10 !rounded !shadow-lg"
             @mousedown="moved = false"
             @mousemove="moved = false"
             @mouseup="handleMouseUp(element, index)"
@@ -489,7 +491,7 @@ watch(view, (nextView) => {
             </button>
 
             <template #overlay>
-              <LazySmartsheetColumnEditOrAddProvider
+              <SmartsheetColumnEditOrAddProvider
                 v-if="showColumnDropdown"
                 @submit="submitCallback"
                 @cancel="showColumnDropdown = false"
@@ -502,7 +504,7 @@ watch(view, (nextView) => {
       </Draggable>
     </a-col>
 
-    <a-col v-if="formViewData" :span="isEditable ? 16 : 24" class="h-full overflow-auto scrollbar-thin-primary">
+    <a-col v-if="formViewData" :span="isEditable ? 16 : 24" class="h-full overflow-auto scrollbar-thin-dull">
       <div class="h-[200px] bg-primary bg-opacity-75">
         <!-- for future implementation of cover image -->
       </div>
@@ -517,13 +519,13 @@ watch(view, (nextView) => {
         }"
       >
         <a-form ref="formRef" :model="formState" class="nc-form" no-style>
-          <a-card class="!rounded !shadow !m-2 md:!m-4 xl:!m-8" :body-style="{ paddingLeft: '0px', paddingRight: '0px' }">
+          <a-card class="!rounded !shadow !m-2 md:(!m-4) xl:(!m-8)" :body-style="{ paddingLeft: '0px', paddingRight: '0px' }">
             <!-- Header -->
-            <div v-if="isEditable" class="px-4">
+            <div v-if="isEditable" class="px-4 lg:px-12">
               <a-form-item v-if="isEditable">
                 <a-input
                   v-model:value="formViewData.heading"
-                  class="w-full !font-bold !text-4xl !border-0 !border-b-1 !border-dashed"
+                  class="w-full !font-bold !text-4xl !border-0 !border-b-1 !border-dashed !rounded-none !border-gray-400"
                   :style="{ borderRightWidth: '0px !important' }"
                   size="large"
                   hide-details
@@ -537,11 +539,11 @@ watch(view, (nextView) => {
             <div v-else class="px-4 ml-3 w-full text-bold text-4xl">{{ formViewData.heading }}</div>
 
             <!-- Sub Header -->
-            <div v-if="isEditable" class="px-4">
+            <div v-if="isEditable" class="px-4 lg:px-12">
               <a-form-item>
                 <a-input
                   v-model:value="formViewData.subheading"
-                  class="w-full !border-0 !border-b-1 !border-dashed"
+                  class="w-full !border-0 !border-b-1 !border-dashed !rounded-none !border-gray-400"
                   :style="{ borderRightWidth: '0px !important' }"
                   size="large"
                   hide-details
@@ -569,7 +571,7 @@ watch(view, (nextView) => {
             >
               <template #item="{ element, index }">
                 <div
-                  class="nc-editable item cursor-pointer hover:(bg-primary bg-opacity-10 ring-1 ring-accent ring-opacity-100) px-4 lg:px-12 py-4 relative"
+                  class="color-transition nc-editable item cursor-pointer hover:(bg-primary bg-opacity-10 ring-1 ring-accent ring-opacity-100) px-4 lg:px-12 py-4 relative"
                   :class="[
                     `nc-form-drag-${element.title.replaceAll(' ', '')}`,
                     {
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index 7dbc818b37..6845c72d97 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -31,7 +31,7 @@ const onClick = () => {
 
 <template>
   <div
-    class="overflow-y-auto overflow-x-hidden flex flex-wrap color-transition nc-form-view relative md:bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px]"
+    class="overflow-y-auto overflow-x-hidden flex flex-wrap color-transition nc-form-view relative md:bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px] nc-form-signin"
   >
     <NuxtPage />
 
@@ -40,7 +40,7 @@ const onClick = () => {
     </div>
 
     <div
-      class="flex items-center justify-center cursor-pointer absolute top-15 right-15 rounded-full p-2 bg-white dark:(bg-slate-600) shadow hover:(ring-1 ring-accent ring-opacity-100)"
+      class="color-transition flex items-center justify-center cursor-pointer absolute top-15 right-15 rounded-full p-2 bg-white dark:(bg-slate-600) shadow hover:(ring-1 ring-accent ring-opacity-100)"
       @click="onClick"
     >
       <Transition name="slide-left" duration="250" mode="out-in">
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
index 75aecb79dd..4ec20f3ded 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
@@ -65,14 +65,14 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
             <div class="flex flex-col gap-6">
               <div v-for="(field, index) in formColumns" :key="index" class="flex flex-col gap-2">
                 <div class="flex nc-form-column-label">
-                  <SmartsheetHeaderVirtualCell
+                  <LazySmartsheetHeaderVirtualCell
                     v-if="isVirtualCol(field)"
                     :column="{ ...field, title: field.label || field.title }"
                     :required="isRequired(field, field.required)"
                     :hide-menu="true"
                   />
 
-                  <SmartsheetHeaderCell
+                  <LazySmartsheetHeaderCell
                     v-else
                     :column="{ ...field, title: field.label || field.title }"
                     :required="isRequired(field, field.required)"
@@ -81,14 +81,14 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
                 </div>
 
                 <div>
-                  <SmartsheetVirtualCell
+                  <LazySmartsheetVirtualCell
                     v-if="isVirtualCol(field)"
                     class="mt-0 nc-input"
                     :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
                     :column="field"
                   />
 
-                  <SmartsheetCell
+                  <LazySmartsheetCell
                     v-else
                     v-model="formState[field.title]"
                     class="nc-input"
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index 4259eb5dbc..a8f5aa9974 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import { SwipeDirection } from '@vueuse/core'
 import {
@@ -7,16 +8,22 @@ import {
   onKeyStroke,
   provide,
   ref,
+  useEventListener,
   usePointerSwipe,
   useSharedFormStoreOrThrow,
   useStepper,
 } from '#imports'
 
+enum TransitionDirection {
+  Left = 'left',
+  Right = 'right',
+}
+
 const { v$, formState, formColumns, submitForm, submitted, secondsRemain, sharedFormView } = useSharedFormStoreOrThrow()
 
 const isTransitioning = ref(false)
 
-const transitionName = ref<'left' | 'right'>('left')
+const transitionName = ref<TransitionDirection>(TransitionDirection.Left)
 
 const el = ref<HTMLDivElement>()
 
@@ -36,36 +43,44 @@ provide(DropZoneRef, el)
 
 const steps = computed(() => {
   if (!formColumns.value) return []
-  return formColumns.value.reduce((acc, column) => {
-    acc.push((column as any).label || column.title)
+
+  return formColumns.value.reduce<string[]>((acc, column) => {
+    const title = column.label || column.title
+
+    if (!title) return acc
+
+    acc.push(title)
 
     return acc
-  }, [] as string[])
+  }, [])
 })
 
 const { index, goToPrevious, goToNext, isFirst, isLast } = useStepper(steps)
 
 const field = computed(() => formColumns.value?.[index.value])
 
-function isRequired(_columnObj: Record<string, any>, required = false) {
-  let columnObj = _columnObj
+function isRequired(column: ColumnType, required = false) {
+  let columnObj = column
   if (
     columnObj.uidt === UITypes.LinkToAnotherRecord &&
     columnObj.colOptions &&
-    columnObj.colOptions.type === RelationTypes.BELONGS_TO
+    (columnObj.colOptions as { type: RelationTypes }).type === RelationTypes.BELONGS_TO
   ) {
-    columnObj = formColumns.value?.find((c) => c.id === columnObj.colOptions.fk_child_column_id) as Record<string, any>
+    columnObj = formColumns.value?.find(
+      (c) => c.id === (columnObj.colOptions as LinkToAnotherRecordType).fk_child_column_id,
+    ) as ColumnType
   }
 
-  return !!(required || (columnObj && columnObj.rqd && !columnObj.cdf))
+  return required || (columnObj && columnObj.rqd && !columnObj.cdf)
 }
 
-function transition(direction: 'left' | 'right') {
+function transition(direction: TransitionDirection) {
   isTransitioning.value = true
   transitionName.value = direction
 
   setTimeout(() => {
-    transitionName.value = transitionName.value === 'left' ? 'right' : 'left'
+    transitionName.value =
+      transitionName.value === TransitionDirection.Left ? TransitionDirection.Right : TransitionDirection.Left
   }, 500)
 
   setTimeout(() => {
@@ -85,7 +100,7 @@ async function goNext() {
     if (!isValid) return
   }
 
-  transition('left')
+  transition(TransitionDirection.Left)
 
   goToNext()
 }
@@ -93,7 +108,7 @@ async function goNext() {
 async function goPrevious() {
   if (isFirst.value) return
 
-  transition('right')
+  transition(TransitionDirection.Right)
 
   goToPrevious()
 }
@@ -138,14 +153,14 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
         >
           <div v-if="field && !submitted" class="flex flex-col gap-2">
             <div class="flex nc-form-column-label">
-              <SmartsheetHeaderVirtualCell
+              <LazySmartsheetHeaderVirtualCell
                 v-if="isVirtualCol(field)"
                 :column="{ ...field, title: field.label || field.title }"
                 :required="isRequired(field, field.required)"
                 :hide-menu="true"
               />
 
-              <SmartsheetHeaderCell
+              <LazySmartsheetHeaderCell
                 v-else
                 :column="{ ...field, title: field.label || field.title }"
                 :required="isRequired(field, field.required)"
@@ -154,14 +169,14 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
             </div>
 
             <div>
-              <SmartsheetVirtualCell
+              <LazySmartsheetVirtualCell
                 v-if="isVirtualCol(field)"
                 class="mt-0 nc-input"
                 :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
                 :column="field"
               />
 
-              <SmartsheetCell
+              <LazySmartsheetCell
                 v-else
                 v-model="formState[field.title]"
                 class="nc-input"
@@ -200,13 +215,13 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
 
             <a-tooltip
               v-if="!isLast"
-              placement="left"
+              placement="bottom"
               :title="v$.localState[field.title]?.$error ? v$.localState[field.title].$errors[0].$message : 'Go to next'"
-              :mouse-enter-delay="v$.localState[field.title]?.$error ? 0 : 1"
+              :mouse-enter-delay="0.2"
               :mouse-leave-delay="0"
             >
               <button class="group color-transition transform absolute right-1 top-1/2 md:static hover:scale-110" @click="goNext">
-                <TransitionGroup name="layout">
+                <TransitionGroup name="slide-left" mode="out-in">
                   <MdiCloseCircleOutline v-if="v$.localState[field.title]?.$error" class="text-red-500 text-2xl md:text-md" />
                   <MdiChevronRight v-else class="group-hover:text-accent text-2xl md:text-md" />
                 </TransitionGroup>
diff --git a/packages/nc-gui/pages/index/index.vue b/packages/nc-gui/pages/index/index.vue
index 66301d32f5..bbd4f3a5b4 100644
--- a/packages/nc-gui/pages/index/index.vue
+++ b/packages/nc-gui/pages/index/index.vue
@@ -24,7 +24,7 @@ useSidebar('nc-left-sidebar', { hasSidebar: false })
       <div class="flex-1 flex gap-6 flex-col justify-center items-center md:(flex-row justify-between items-start)">
         <template v-if="route.name === 'index-index'">
           <TransitionGroup name="page" mode="out-in">
-            <div>
+            <div key="social-card">
               <LazyGeneralSocialCard />
             </div>