wip(gui-v2): expanded form view modal

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

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

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { isVirtualCol } from 'nocodb-sdk'
+import { useVModel } from '@vueuse/core'
+import { computed, provide } from 'vue'
+import type { Row } from '~/composables'
+import { FieldsInj, IsFormInj, MetaInj } from '~/context'
+import MdiDoorOpen from '~icons/mdi/door-open'
+import MdiDoorClosed from '~icons/mdi/door-closed'
+
+interface Props {
+  modelValue: string | null
+}
+
+const props = defineProps<Props>()
+const emits = defineEmits(['update:modelValue'])
+const fields = inject(FieldsInj, ref([]))
+const meta = inject(MetaInj)
+
+provide(IsFormInj, true)
+
+// accept as a prop
+const row: Row = { row: {}, rowMeta: {}, oldRow: {} }
+
+const commentsDrawer = ref(false)
+
+const isExpanded = useVModel(props, 'modelValue', emits)
+
+const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : MdiDoorClosed))
+</script>
+
+<template>
+  <a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" body-style="padding:0" :closable="false">
+    <div class="flex p-2">
+      <div class="flex-grow" />
+      <component :is="drawerToggleIcon" class="" @click="commentsDrawer = !commentsDrawer" />
+    </div>
+    <a-card class="!bg-gray-100">
+      <div class="flex">
+        <div class="flex-grow">
+          <div class="h-550px overflow-auto w-[500px] mx-auto">
+            <div v-for="col in fields" :key="col.title" class="mt-2">
+              <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
+              <SmartsheetHeaderCell v-else :column="col" />
+
+              <div class="!bg-white rounded px-1 min-h-[35px] flex align-center">
+                <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :column="col" />
+                <SmartsheetCell
+                  v-else
+                  v-model="row.row[col.title]"
+                  :column="col"
+                  :edit-enabled="true"
+                  @update:edit-enabled="editEnabled = false"
+                  @cancel="editEnabled = false"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="nc-comments-drawer min-w-0 h-full" :class="{ active: commentsDrawer }">
+          <div class="w-[250px]">
+            dsdsssdsdsdd
+          </div>
+        </div>
+      </div>
+    </a-card>
+  </a-modal>
+</template>
+
+<style scoped lang="scss">
+:deep(input, select, textarea) {
+  @apply !bg-white;
+}
+
+:deep(.ant-modal-body) {
+  @apply !bg-gray-100
+}
+
+.nc-comments-drawer {
+  @apply w-0 transition-width ease-in-out duration-200;
+  overflow: hidden;
+
+  &.active {
+    @apply w-[250px] border-left-1;
+  }
+}
+</style>

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

@@ -58,6 +58,7 @@ const addColumnDropdown = ref(false)
 const contextMenu = ref(false)
 
 const contextMenuTarget = ref(false)
+const expandedFormDlg = ref(false)
 
 const visibleColLength = $computed(() => fields.value?.length)
 
@@ -333,7 +334,10 @@ const onNavigate = (dir: NavigateDir) => {
                     <a-checkbox v-model:checked="row.rowMeta.selected" />
                     <span class="flex-1" />
                     <div class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10">
-                      <MdiArrowExpand class="select-none transform hover:(text-pink-500 scale-120)" />
+                      <MdiArrowExpand
+                        class="select-none transform hover:(text-pink-500 scale-120)"
+                        @click="expandedFormDlg = true"
+                      />
                     </div>
                   </div>
                 </div>
@@ -415,6 +419,7 @@ const onNavigate = (dir: NavigateDir) => {
     </div>
 
     <SmartsheetPagination />
+    <SmartsheetExpandedForm v-model="expandedFormDlg" />
   </div>
 </template>