Merge pull request #3318 from nocodb/fix/gui-v2-formview-corrections

vue3: Form view ui updates

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

@@ -140,7 +140,7 @@ const syncAndNavigate = (dir: NavigateDir) => {
 <template>
   <div
     class="nc-cell w-full h-full"
-    :class="{ 'text-blue-600': isPrimary && !virtual }"
+    :class="{ 'text-blue-600': isPrimary && !virtual && !isForm }"
     @keydown.stop.left
     @keydown.stop.right
     @keydown.stop.up

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

@@ -476,7 +476,7 @@ onMounted(async () => {
         <!-- for future implementation of cover image -->
       </div>
       <a-card
-        class="h-full m-0 rounded-b-0 p-4 border-none"
+        class="m-0 rounded-b-0 p-4 border-none"
         :body-style="{
           maxWidth: '700px',
           margin: '0 auto',
@@ -489,7 +489,7 @@ onMounted(async () => {
             <a-form-item v-if="isEditable" class="m-0 gap-0 p-0">
               <a-input
                 v-model:value="formViewData.heading"
-                class="w-full text-bold text-h3"
+                class="w-full !font-bold !text-4xl"
                 size="large"
                 hide-details
                 placeholder="Form Title"
@@ -532,36 +532,94 @@ onMounted(async () => {
             >
               <template #item="{ element, index }">
                 <div
-                  class="nc-editable item cursor-pointer hover:(bg-primary bg-opacity-10) p-3"
+                  class="nc-editable item cursor-pointer hover:(bg-primary bg-opacity-10) p-3 my-2 relative"
-                  :class="`nc-form-drag-${element.title.replaceAll(' ', '')}`"
+                  :class="[
+                    `nc-form-drag-${element.title.replaceAll(' ', '')}`,
+                    {
+                      'border-1': activeRow === element.title,
+                    },
+                  ]"
                   @click="activeRow = element.title"
                 >
-                  <div class="flex">
+                  <div
-                    <div class="flex flex-1">
+                    v-if="isUIAllowed('editFormView') && !isRequired(element, element.required)"
-                      <div class="flex flex-row">
+                    class="absolute flex top-2 right-2"
-                        <mdi-drag-vertical class="flex flex-1" />
+                  >
+                    <mdi-eye-off-outline class="opacity-0 nc-field-remove-icon" @click.stop="hideColumn(index)" />
+                  </div>
+                  <template v-if="activeRow === element.title">
+                    <div class="flex">
+                      <div
+                        class="flex flex-1 opacity-0 align-center gap-2"
+                        :class="{ 'opacity-100': activeRow === element.title }"
+                      >
+                        <div class="flex flex-row">
+                          <mdi-drag-vertical class="flex flex-1" />
+                        </div>
+                        <div class="items-center flex">
+                          <span
+                            class="text-xs text-gray-500 mr-2 nc-form-input-required"
+                            @click="
+                              () => {
+                                element.required = !element.required
+                                updateColMeta(element)
+                              }
+                            "
+                          >
+                            {{ $t('general.required') }}
+                          </span>
+
+                          <a-switch
+                            v-model:checked="element.required"
+                            size="small"
+                            class="ml-2"
+                            @change="updateColMeta(element)"
+                          />
+                        </div>
                       </div>
-                      <SmartsheetHeaderVirtualCell
-                        v-if="isVirtualCol(element)"
-                        :column="{ ...element, title: element.label || element.title }"
-                        :required="isRequired(element, element.required)"
-                        :hide-menu="true"
-                      />
-                      <SmartsheetHeaderCell
-                        v-else
-                        :column="{ ...element, title: element.label || element.title }"
-                        :required="isRequired(element, element.required)"
-                        :hide-menu="true"
-                      />
                     </div>
-                    <div v-if="isUIAllowed('editFormView') && !isRequired(element, element.required)" class="flex">
+
-                      <mdi-eye-off-outline class="opacity-0 nc-field-remove-icon" @click.stop="hideColumn(index)" />
+                    <div class="my-3">
+                      <a-form-item class="my-0 w-1/2 !mb-1">
+                        <a-input
+                          v-model:value="element.label"
+                          size="small"
+                          class="form-meta-input !bg-[#dbdbdb] nc-form-input-label"
+                          :placeholder="$t('msg.info.formInput')"
+                          @change="updateColMeta(element)"
+                        >
+                        </a-input>
+                      </a-form-item>
+
+                      <a-form-item class="mt-2 mb-0 w-1/2 !mb-1">
+                        <a-input
+                          v-model:value="element.description"
+                          size="small"
+                          class="form-meta-input !bg-[#dbdbdb] text-sm nc-form-input-help-text"
+                          :placeholder="$t('msg.info.formHelpText')"
+                          @change="updateColMeta(element)"
+                        />
+                      </a-form-item>
                     </div>
+                  </template>
+                  <div>
+                    <SmartsheetHeaderVirtualCell
+                      v-if="isVirtualCol(element)"
+                      :column="{ ...element, title: element.label || element.title }"
+                      :required="isRequired(element, element.required)"
+                      :hide-menu="true"
+                    />
+                    <SmartsheetHeaderCell
+                      v-else
+                      :column="{ ...element, title: element.label || element.title }"
+                      :required="isRequired(element, element.required)"
+                      :hide-menu="true"
+                    />
                   </div>
 
                   <a-form-item
                     v-if="isVirtualCol(element)"
-                    class="m-0 gap-0 p-0"
+                    class="!m-0 gap-0 p-0"
                     :name="element.title"
                     :rules="[{ required: element.required, message: `${element.title} is required` }]"
                   >
@@ -576,7 +634,7 @@ onMounted(async () => {
 
                   <a-form-item
                     v-else
-                    class="m-0 gap-0 p-0"
+                    class="!m-0 gap-0 p-0"
                     :name="element.title"
                     :rules="[{ required: element.required, message: `${element.title} is required` }]"
                   >
@@ -590,36 +648,7 @@ onMounted(async () => {
                     />
                   </a-form-item>
 
-                  <div v-if="activeRow === element.title">
+                  <span class="text-gray-500 text-xs -mt-1 block">{{ element.description }}</span>
-                    <a-form-item class="my-0 w-1/2">
-                      <a-input
-                        v-model:value="element.label"
-                        size="small"
-                        class="form-meta-input !bg-[#dbdbdb] nc-form-input-label"
-                        :placeholder="$t('msg.info.formInput')"
-                        @change="updateColMeta(element)"
-                      >
-                      </a-input>
-                    </a-form-item>
-
-                    <a-form-item class="mt-2 mb-0 w-1/2">
-                      <a-input
-                        v-model:value="element.description"
-                        size="small"
-                        class="form-meta-input !bg-[#dbdbdb] text-sm nc-form-input-help-text"
-                        :placeholder="$t('msg.info.formHelpText')"
-                        @change="updateColMeta(element)"
-                      />
-                    </a-form-item>
-
-                    <div class="items-center flex">
-                      <span class="text-sm text-gray-500 mr-2 nc-form-input-required">{{ $t('general.required') }}</span>
-
-                      <a-switch v-model:checked="element.required" size="small" class="my-2" @change="updateColMeta(element)" />
-                    </div>
-                  </div>
-
-                  <span class="text-gray-500">{{ element.description }}</span>
                 </div>
               </template>
 
@@ -634,11 +663,7 @@ onMounted(async () => {
             </Draggable>
 
             <div class="justify-center flex mt-10">
-              <a-button
+              <a-button type="primary" class="flex items-center gap-2 nc-form-submit" size="large" @click="submitForm">
-                class="flex items-center gap-2 !bg-primary text-white rounded nc-form-submit"
-                size="large"
-                @click="submitForm"
-              >
                 <!-- Submit -->
                 {{ $t('general.submit') }}
               </a-button>
@@ -722,4 +747,11 @@ onMounted(async () => {
 .form-meta-input::placeholder {
   @apply text-[#3d3d3d] italic;
 }
+
+.nc-form-input-label,
+.nc-form-input-help-text {
+  &::placeholder {
+    @apply !text-gray-500 !text-xs;
+  }
+}
 </style>

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

@@ -33,8 +33,8 @@ const { isOpen } = useSidebar()
     <SmartsheetToolbarExport v-if="!isUIAllowed('dataInsert')" />
     <div class="flex-1" />
 
-    <SmartsheetToolbarReload v-if="!isPublic" class="mx-1" />
+    <SmartsheetToolbarReload v-if="!isPublic && !isForm" class="mx-1" />
-    <SmartsheetToolbarAddRow v-if="isUIAllowed('dataInsert') && !isPublic" class="mx-1" />
+    <SmartsheetToolbarAddRow v-if="isUIAllowed('dataInsert') && !isPublic && !isForm" class="mx-1" />
 
     <SmartsheetToolbarSearchData v-if="(isGrid || isGallery) && !isPublic" class="shrink mr-2 ml-2" />
 

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

@@ -5,7 +5,6 @@ import MenuBottom from './MenuBottom.vue'
 import Toolbar from './toolbar/index.vue'
 import {
   ActiveViewInj,
-  IsFormInj,
   MetaInj,
   ViewListInj,
   computed,
@@ -22,8 +21,6 @@ const meta = inject(MetaInj, ref())
 
 const activeView = inject(ActiveViewInj, ref())
 
-const isForm = inject(IsFormInj)
-
 const { views, loadViews } = useViews(meta)
 
 const { isUIAllowed } = useUIPermission()
@@ -101,8 +98,7 @@ function onCreate(view: ViewType) {
   >
     <Toolbar
       v-if="isOpen"
-      class="min-h-[var(--toolbar-height)] max-h-[var(--toolbar-height)]"
+      class="min-h-[var(--toolbar-height)] max-h-[var(--toolbar-height)] flex items-center py-3 px-3 justify-between border-b-1"
-      :class="{ 'flex items-center py-3 px-3 justify-between border-b-1': !isForm }"
     />
     <div v-if="isOpen" class="flex-1 flex flex-col min-h-0">
       <MenuTop @open-modal="openModal" @deleted="loadViews" @sorted="loadViews" />

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

@@ -3,9 +3,6 @@ import ExportCache from './ExportCache.vue'
 import DeleteCache from './DeleteCache.vue'
 import DebugMeta from './DebugMeta.vue'
 import ToggleDrawer from './ToggleDrawer.vue'
-import { IsFormInj } from '#imports'
-
-const isForm = inject(IsFormInj)
 
 const debug = $ref(false)
 
@@ -14,7 +11,6 @@ const clickCount = $ref(0)
 
 <template>
   <div
-    v-if="!isForm"
     class="flex gap-2 justify-start"
     @click="
       () => {
@@ -42,9 +38,6 @@ const clickCount = $ref(0)
 
     <slot name="end" />
   </div>
-  <div v-else>
-    <slot name="start" />
-  </div>
 </template>
 
 <style scoped>