Merge pull request #3078 from nocodb/fix/gui-v2-form-follow-ups

fix(gui-v2): form view follow-up issues

packages/nc-gui-v2/components/dlg/ViewCreate.vue

@@ -14,6 +14,7 @@ interface Props {
   modelValue: boolean
   type: ViewTypes
   title?: string
+  selectedViewId?: string
 }
 
 interface Emits {
@@ -86,6 +87,10 @@ watch(
 function init() {
   form.title = generateUniqueTitle(capitalize(ViewTypes[props.type].toLowerCase()), viewList?.value || [], 'title')
 
+  if (props.selectedViewId) {
+    form.copy_from_id = props.selectedViewId
+  }
+
   nextTick(() => {
     const el = inputEl?.$el as HTMLInputElement
 

packages/nc-gui-v2/components/smartsheet/Form.vue

@@ -467,6 +467,9 @@ onMounted(async () => {
                   <div class="nc-editable item cursor-pointer hover:bg-primary/10 pa-3" @click="activeRow = element.title">
                     <div class="flex">
                       <div class="flex flex-1">
+                        <div class="flex flex-row">
+                          <mdi-drag-vertical class="flex flex-1" />
+                        </div>
                         <SmartsheetHeaderVirtualCell
                           v-if="isVirtualCol(element)"
                           :column="{ ...element, title: element.label || element.title }"
@@ -523,14 +526,9 @@ onMounted(async () => {
                           @change="updateColMeta(element)"
                         />
                       </a-form-item>
-                      <div>
+                      <div class="items-center flex">
-                        <a-switch
+                        <span class="text-sm text-gray-500 mr-2">{{ $t('general.required') }}</span>
-                          v-model:checked="element.required"
+                        <a-switch v-model:checked="element.required" class="my-2" @change="updateColMeta(element)" />
-                          class="my-2"
-                          :checked-children="$t('general.required')"
-                          un-checked-children="Not Required"
-                          @change="updateColMeta(element)"
-                        />
                       </div>
                     </div>
                     <span class="text-gray-500">{{ element.description }}</span>

packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue

@@ -11,7 +11,7 @@ import { extractSdkResponseErrorMsg } from '~/utils'
 import { ActiveViewInj, ViewListInj } from '~/context'
 
 interface Emits {
-  (event: 'openModal', data: { type: ViewTypes; title?: string }): void
+  (event: 'openModal', data: { type: ViewTypes; title?: string; copyViewId?: string }): void
   (event: 'deleted'): void
   (event: 'sorted'): void
 }
@@ -179,6 +179,8 @@ function onDeleted() {
   emits('deleted')
   toDelete = undefined
   deleteModalVisible = false
+  // return to the default view
+  activeView.value = views.value[0]
 }
 </script>
 

packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue

@@ -85,7 +85,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 })
+  emits('openModal', { type: vModel.value.type, title: vModel.value.title, copyViewId: vModel.value.id })
 
   $e('c:view:copy', { view: vModel.value.type })
 }

packages/nc-gui-v2/components/smartsheet/sidebar/index.vue

@@ -3,7 +3,7 @@ import type { FormType, GalleryType, GridType, KanbanType, ViewTypes } from 'noc
 import MenuTop from './MenuTop.vue'
 import MenuBottom from './MenuBottom.vue'
 import Toolbar from './toolbar/index.vue'
-import { computed, inject, provide, ref, useRoute, useViews, watch } from '#imports'
+import { computed, inject, provide, ref, useRoute, useRouter, useViews, watch } from '#imports'
 import { ActiveViewInj, MetaInj, RightSidebarInj, ViewListInj } from '~/context'
 
 const meta = inject(MetaInj, ref())
@@ -12,6 +12,8 @@ const activeView = inject(ActiveViewInj, ref())
 
 const { views, loadViews } = useViews(meta)
 
+const router = useRouter()
+
 const route = useRoute()
 
 provide(ViewListInj, views)
@@ -27,6 +29,9 @@ let viewCreateType = $ref<ViewTypes>()
 /** View title to create from modal (when duplicating) */
 let viewCreateTitle = $ref('')
 
+/** selected view id for copying view meta */
+let selectedViewId = $ref('')
+
 /** is view creation modal open */
 let modalOpen = $ref(false)
 
@@ -49,16 +54,18 @@ watch(
 )
 
 /** Open view creation modal */
-function openModal({ type, title = '' }: { type: ViewTypes; title: string }) {
+function openModal({ type, title = '', copyViewId }: { type: ViewTypes; title: string; copyViewId: string }) {
   modalOpen = true
   viewCreateType = type
   viewCreateTitle = title
+  selectedViewId = copyViewId
 }
 
 /** Handle view creation */
 function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
   views.value.push(view)
   activeView.value = view
+  router.push({ params: { viewTitle: view.title || '' } })
   modalOpen = false
 }
 </script>
@@ -126,7 +133,14 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
       <MenuBottom @open-modal="openModal" />
     </div>
 
-    <dlg-view-create v-if="views" v-model="modalOpen" :title="viewCreateTitle" :type="viewCreateType" @created="onCreate" />
+    <dlg-view-create
+      v-if="views"
+      v-model="modalOpen"
+      :title="viewCreateTitle"
+      :type="viewCreateType"
+      :selected-view-id="selectedViewId"
+      @created="onCreate"
+    />
   </a-layout-sider>
 </template>
 

packages/nc-gui-v2/composables/useViewData.ts

@@ -209,7 +209,7 @@ export function useViewData(
 
   const deleteRowById = async (id: string) => {
     if (!id) {
-      throw new Error('Delete not allowed for table which doesn\'t have primary Key')
+      throw new Error("Delete not allowed for table which doesn't have primary Key")
     }
 
     const res: any = await $api.dbViewRow.delete(