feat(migration): integrate expanded form cancel button

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components.d.ts

@@ -74,12 +74,19 @@ declare module '@vue/runtime-core' {
     MaterialSymbolsChevronLeftRounded: typeof import('~icons/material-symbols/chevron-left-rounded')['default']
     MaterialSymbolsChevronRightRounded: typeof import('~icons/material-symbols/chevron-right-rounded')['default']
     MaterialSymbolsFileCopyOutline: typeof import('~icons/material-symbols/file-copy-outline')['default']
+    CilFullscreen: typeof import('~icons/cil/fullscreen')['default']
+    CilFullscreenExit: typeof import('~icons/cil/fullscreen-exit')['default']
+    IcOutlineInsertDriveFile: typeof import('~icons/ic/outline-insert-drive-file')['default']
+    IcRoundKeyboardArrowDown: typeof import('~icons/ic/round-keyboard-arrow-down')['default']
+    MaterialSymbolsAttachFile: typeof import('~icons/material-symbols/attach-file')['default']
+    MaterialSymbolsFileCopyOutline: typeof import('~icons/material-symbols/file-copy-outline')['default']
     MaterialSymbolsMenu: typeof import('~icons/material-symbols/menu')['default']
     MaterialSymbolsTranslate: typeof import('~icons/material-symbols/translate')['default']
     MdiAccountGroup: typeof import('~icons/mdi/account-group')['default']
     MdiApi: typeof import('~icons/mdi/api')['default']
     MdiArrowExpand: typeof import('~icons/mdi/arrow-expand')['default']
     MdiArrowLeftBold: typeof import('~icons/mdi/arrow-left-bold')['default']
+    MaterialSymbolsTranslate: typeof import('~icons/material-symbols/translate')['default']
     MdiArrowExpand: typeof import('~icons/mdi/arrow-expand')['default']
     MdiArrowExpandIcon: typeof import('~icons/mdi/arrow-expand-icon')['default']
     MdiAt: typeof import('~icons/mdi/at')['default']
@@ -96,6 +103,10 @@ declare module '@vue/runtime-core' {
     MdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
     MdiDiscord: typeof import('~icons/mdi/discord')['default']
     MdiDotsHorizontal: typeof import('~icons/mdi/dots-horizontal')['default']
+    MdiCloseCircle: typeof import('~icons/mdi/close-circle')['default']
+    MdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
+    MdiContentSave: typeof import('~icons/mdi/content-save')['default']
+    MdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
     MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
     MdiDownload: typeof import('~icons/mdi/download')['default']
     MdiDrag: typeof import('~icons/mdi/drag')['default']
@@ -110,6 +121,13 @@ declare module '@vue/runtime-core' {
     MdiInformation: typeof import('~icons/mdi/information')['default']
     MdiLink: typeof import('~icons/mdi/link')['default']
     MdiLinkVariantRemove: typeof import('~icons/mdi/link-variant-remove')['default']
+    MdiDownload: typeof import('~icons/mdi/download')['default']
+    MdiDrag: typeof import('~icons/mdi/drag')['default']
+    MdiEyeOffOutline: typeof import('~icons/mdi/eye-off-outline')['default']
+    MdiFlag: typeof import('~icons/mdi/flag')['default']
+    MdiHeart: typeof import('~icons/mdi/heart')['default']
+    MdiHook: typeof import('~icons/mdi/hook')['default']
+    MdiLinkVariantRemove: typeof import('~icons/mdi/link-variant-remove')['default']
     MdiLogout: typeof import('~icons/mdi/logout')['default']
     MdiMagnify: typeof import('~icons/mdi/magnify')['default']
     MdiMenuDown: typeof import('~icons/mdi/menu-down')['default']
@@ -120,6 +138,11 @@ declare module '@vue/runtime-core' {
     MdiOperator: typeof import('~icons/mdi/operator')['default']
     MdiPlus: typeof import('~icons/mdi/plus')['default']
     MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
+    MdiMagnify: typeof import('~icons/mdi/magnify')['default']
+    MdiMenuDown: typeof import('~icons/mdi/menu-down')['default']
+    MdiMoonFull: typeof import('~icons/mdi/moon-full')['default']
+    MdiOpenInNew: typeof import('~icons/mdi/open-in-new')['default']
+    MdiPlus: typeof import('~icons/mdi/plus')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
     MdiSearch: typeof import('~icons/mdi/search')['default']
     MdiShieldLockOutline: typeof import('~icons/mdi/shield-lock-outline')['default']
@@ -131,6 +154,10 @@ declare module '@vue/runtime-core' {
     MdiTrashCan: typeof import('~icons/mdi/trash-can')['default']
     MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default']
     MdiXml: typeof import('~icons/mdi/xml')['default']
+    MdiStar: typeof import('~icons/mdi/star')['default']
+    MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
+    MdiThumbUp: typeof import('~icons/mdi/thumb-up')['default']
+    MdiXml: typeof import('~icons/mdi/xml')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue

@@ -10,6 +10,8 @@ const { commentsDrawer, row, primaryValue, save: _save } = useExpandedFormStoreO
 const { isNew, syncLTARRefs } = useSmartsheetRowStoreOrThrow()
 const { isUIAllowed } = useUIPermission()
 
+const emit = defineEmits(['cancel'])
+
 const save = async () => {
   if (isNew.value) {
     const data = await _save()
@@ -41,7 +43,7 @@ const iconColor = '#1890ff'
     <div class="flex-grow" />
     <mdi-reload />
     <component :is="drawerToggleIcon" class="" @click="commentsDrawer = !commentsDrawer" />
-    <a-button size="small" class="!text">
+    <a-button size="small" class="!text" @click="emit('cancel')">
       <!-- Cancel -->
       {{ $t('general.cancel') }}
     </a-button>

packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue

@@ -47,7 +47,7 @@ const isExpanded = useVModel(props, 'modelValue', emits)
 
 <template>
   <a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" :body-style="{ padding: 0 }" :closable="false">
-    <Header />
+    <Header  @cancel="isExpanded = false" />
     <a-card class="!bg-gray-100">
       <div class="flex">
         <div class="flex-grow">