feat(gui-v2): add column add option in smartsheet grid view

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

packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue

@@ -1,160 +1,57 @@
 <script setup lang="ts">
+import { UITypes } from 'nocodb-sdk'
+import useProject from '~/composables/useProject'
 
-import useProject from "~/composables/useProject";
+const { sqlUi } = useProject()
 
-const {sqlUi} = useProject()
+const newColumn = reactive({ uidt: UITypes.SingleLineText })
+const idType = null
 
-// const dataTypes = computed(() => sqlUi?.value?.getDataTypeListForUiType(this.newColumn, this.idType)
+const dataTypes = computed(() => sqlUi?.value?.getDataTypeListForUiType(newColumn))
 </script>
 
 <template>
   <div class="p-4 border-[2px] radius-1 border-grey w-full">
     <div class="flex justify-space-between">
       <a-form-item label="NN" :label-col="2">
-        <a-checkbox size="small" class="nc-column-name-input"/>
+        <a-checkbox size="small" class="nc-column-name-input" />
       </a-form-item>
       <a-form-item label="PK">
-        <a-checkbox size="small" class="nc-column-name-input"/>
+        <a-checkbox size="small" class="nc-column-name-input" />
       </a-form-item>
       <a-form-item label="AI">
-        <a-checkbox size="small" class="nc-column-name-input"/>
+        <a-checkbox size="small" class="nc-column-name-input" />
       </a-form-item>
       <a-form-item label="UN">
-        <a-checkbox size="small" class="nc-column-name-input"/>
+        <a-checkbox size="small" class="nc-column-name-input" />
       </a-form-item>
       <a-form-item label="AU">
-        <a-checkbox size="small" class="nc-column-name-input"/>
+        <a-checkbox size="small" class="nc-column-name-input" />
       </a-form-item>
     </div>
-
-<!--    <a-form-item :label="$t('labels.databaseType')">
-      <a-select size="small" class="nc-column-name-input">
-        <a-select-option v-for="opt in dataTypes" :key="opt.name" :value="opt.name">
-          <div class="flex gap-1 align-center text-xs">
-            <component :is="opt.icon" class="text-grey" />
-            {{ opt.name }}
-          </div>
+    <a-form-item :label="$t('labels.databaseType')">
+      <a-select size="small">
+        <a-select-option v-for="type in dataTypes" :key="type" :value="type">
+          {{ type }}
         </a-select-option>
       </a-select>
-    </a-form-item>-->
-
-    <!--      <div class="d-flex justify-space-between caption">
-            <v-checkbox
-              v-model="newColumn.rqd"
-              :disabled="newColumn.pk || !sqlUi.columnEditable(newColumn)"
-              class="mr-2 mt-0"
-              dense
-              hide-details
-              label="NN"
-              @change="newColumn.altered = newColumn.altered || 2"
-            >
-              <template #label>
-                <span class="caption font-weight-bold">NN</span>
-              </template>
-            </v-checkbox>
-            <v-checkbox
-              v-model="newColumn.pk"
-              :disabled="!sqlUi.columnEditable(newColumn)"
-              class="mr-2 mt-0"
-              dense
-              hide-details
-              label="PK"
-              @change="newColumn.altered = newColumn.altered || 2"
-            >
-              <template #label>
-                <span class="caption font-weight-bold">PK</span>
-              </template>
-            </v-checkbox>
-            <v-checkbox
-              v-model="newColumn.ai"
-              :disabled="sqlUi.colPropUNDisabled(newColumn) || !sqlUi.columnEditable(newColumn)"
-              class="mr-2 mt-0"
-              dense
-              hide-details
-              label="AI"
-              @change="newColumn.altered = newColumn.altered || 2"
-            >
-              <template #label>
-                <span class="caption font-weight-bold">AI</span>
-              </template>
-            </v-checkbox>
-            <v-checkbox
-              v-model="newColumn.un"
-              class="mr-2 mt-0"
-              dense
-              hide-details
-              label="UN"
-              :disabled="sqlUi.colPropUNDisabled(newColumn) || !sqlUi.columnEditable(newColumn)"
-              @change="newColumn.altered = newColumn.altered || 2"
-            >
-              <template #label>
-                <span class="caption font-weight-bold">UN</span>
-              </template>
-            </v-checkbox>
-
-            <v-checkbox
-              v-model="newColumn.au"
-              class="mr-2 mt-0"
-              dense
-              hide-details
-              label="UN"
-              :disabled="sqlUi.colPropAuDisabled(newColumn) || !sqlUi.columnEditable(newColumn)"
-              @change="newColumn.altered = newColumn.altered || 2"
-            >
-              <template #label>
-                <span class="caption font-weight-bold">AU</span>
-              </template>
-            </v-checkbox>
-
-            &lt;!&ndash; label="Type in Database" &ndash;&gt;
-            <v-autocomplete
-              v-model="newColumn.dt"
-              hide-details
-              class="caption data-type"
-              :label="$t('labels.databaseType')"
-              dense
-              outlined
-              :items="dataTypes"
-              @change="onDataTypeChange"
-            />
-            &lt;!&ndash; label="Length / Values" &ndash;&gt;
-            <v-text-field
-              v-if="!isSelect"
-              v-model="newColumn.dtxp"
-              dense
-              :disabled="sqlUi.getDefaultLengthIsDisabled(newColumn.dt) || !sqlUi.columnEditable(newColumn)"
-              class="caption"
-              :label="$t('labels.lengthValue')"
-              outlined
-              hide-details
-              @input="newColumn.altered = newColumn.altered || 2"
-            />
-
-            <v-text-field
-              v-model="newColumn.dtxs"
-              dense
-              :disabled="!sqlUi.columnEditable(newColumn)"
-              class="caption"
-              label="Scale"
-              outlined
-              hide-details
-              @input="newColumn.altered = newColumn.altered || 2"
-            />
-            <v-textarea
-              v-model="newColumn.cdf"
-              :label="$t('placeholder.defaultValue')"
-              :hint="sqlUi.getDefaultValueForDatatype(newColumn.dt)"
-              persistent-hint
-              rows="3"
-              outlined
-              dense
-              class="caption"
-              @input="
-                newColumn.altered = newColumn.altered || 2
-                newColumn.cdf = newColumn.cdf || null
-              "
-            />
-          </div>-->
+    </a-form-item>
+    <a-form-item
+      :disabled="sqlUi.getDefaultLengthIsDisabled(newColumn.dt) || !sqlUi.columnEditable(newColumn)"
+      :label="$t('labels.lengthValue')"
+    >
+      <a-input size="small" />
+    </a-form-item>
+    <a-form-item v-if="sqlUi.showScale(newColumn)" label="Scale">
+      <a-input size="small" />
+    </a-form-item>
+    <a-form-item
+      v-if="sqlUi.showScale(newColumn)"
+      :help="sqlUi.getDefaultValueForDatatype(newColumn.dt)"
+      :label="$t('placeholder.defaultValue')"
+    >
+      <a-textarea size="small" auto-size />
+    </a-form-item>
   </div>
 </template>
 

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

@@ -74,93 +74,8 @@ export default {
     <SmartsheetHeaderCellIcon v-if="column" />
     <span v-if="column" class="name" style="white-space: nowrap" :title="column.title">{{ column.title }}</span>
 
-    <!--    <span v-if="(column.rqd && !column.cdf) || required" class="error&#45;&#45;text text&#45;&#45;lighten-1">&nbsp;*</span> -->
-
     <div class="flex-1" />
     <SmartsheetHeaderMenu />
-    <!--  todo: implement delete or edit column
-    <v-menu
-      v-if="!isLocked && !isPublicView && _isUIAllowed('edit-column') && !isForm"
-      open-on-hover
-      left
-      z-index="999"
-      transition="slide-y-transition"
-    >
-      <template #activator="{ on }">
-        <v-icon v-if="!isLocked && !isVirtual" small v-on="on"> mdi-menu-down</v-icon>
-      </template>
-      <v-list dense>
-        <v-list-item class="nc-column-edit" dense @click="showColumnEdit">
-          <x-icon small class="mr-1" color="primary"> mdi-pencil</x-icon>
-          <span class="caption">
-            &lt;!&ndash; Edit &ndash;&gt;
-            {{ $t('general.edit') }}
-          </span>
-        </v-list-item>
-        <v-list-item v-t="['a:column:set-primary']" dense @click="setAsPrimaryValue">
-          <x-icon small class="mr-1" color="primary"> mdi-key-star</x-icon>
-          <v-tooltip bottom>
-            <template #activator="{ on }">
-              <span class="caption" v-on="on">
-                &lt;!&ndash; Set as Primary value &ndash;&gt;
-                {{ $t('activity.setPrimary') }}
-              </span>
-            </template>
-            <span class="caption font-weight-bold">Primary value will be shown in place of primary key</span>
-          </v-tooltip>
-        </v-list-item>
-        <v-list-item class="nc-column-delete" @click="columnDeleteDialog = true">
-          <x-icon small class="mr-1" color="error"> mdi-delete-outline</x-icon>
-          <span class="caption">
-            &lt;!&ndash; Delete &ndash;&gt;
-            {{ $t('general.delete') }}
-          </span>
-        </v-list-item>
-      </v-list>
-    </v-menu>
-
-    <v-menu v-model="editColumnMenu" z-index="999" offset-y content-class="" left transition="slide-y-transition">
-      <template #activator="{ on }">
-        <span v-on="on" />
-      </template>
-      <EditColumn
-        v-if="editColumnMenu"
-        :meta="meta"
-        :sql-ui="sqlUi"
-        :nodes="nodes"
-        :edit-column="true"
-        :column="column"
-        :column-index="columnIndex"
-        @onRelationDelete="$emit('onRelationDelete')"
-        @saved="(_cn, _cno) => $emit('saved', _cn, _cno)"
-        @close="editColumnMenu = false"
-      />
-    </v-menu>
-
-    <v-dialog
-      v-model="columnDeleteDialog"
-      max-width="500"
-      persistent
-      @keydown.esc="columnDeleteDialog = false"
-      @keydown.enter="deleteColumn"
-    >
-      <v-card class="nc-delete-dialog-card">
-        <v-card-title class="grey darken-2 subheading white&#45;&#45;text"> Confirm</v-card-title>
-        <v-divider />
-        <v-card-text class="mt-4 title">
-          Do you want to delete <span class="font-weight-bold">'{{ column.title }}'</span> column ?
-        </v-card-text>
-        <v-divider />
-        <v-card-actions class="d-flex pa-4">
-          <v-spacer />
-          <v-btn small @click="columnDeleteDialog = false">
-            &lt;!&ndash; Cancel &ndash;&gt;
-            {{ $t('general.cancel') }}
-          </v-btn>
-          <v-btn v-t="['a:column:delete']" small color="error" @click="deleteColumn"> Confirm</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog> -->
   </div>
 </template>
 

packages/nc-gui-v2/components/smartsheet-header/Menu.vue

@@ -4,11 +4,11 @@ import MdiStarIcon from '~icons/mdi/star'
 import MdiDeleteIcon from '~icons/mdi/delete-outline'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
 
-const editCellDropdown = $ref(false)
+const editColumnDropdown = $ref(false)
 </script>
 
 <template>
-  <a-dropdown v-model:visible="editCellDropdown" :trigger="['click']">
+  <a-dropdown v-model:visible="editColumnDropdown" :trigger="['click']">
     <span />
     <template #overlay>
       <SmartsheetColumnEdit @click.stop />
@@ -18,7 +18,7 @@ const editCellDropdown = $ref(false)
     <MdiMenuDownIcon class="text-grey" />
     <template #overlay>
       <div class="shadow bg-white">
-        <div class="nc-column-edit nc-menu-item" @click="editCellDropdown = true">
+        <div class="nc-column-edit nc-menu-item" @click="editColumnDropdown = true">
           <MdiEditIcon class="text-primary" />
           <!-- Edit -->
           {{ $t('general.edit') }}

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { isVirtualCol } from 'nocodb-sdk'
-import { getCurrentInstance, inject, onKeyStroke, onMounted, provide } from '#imports'
+import { inject, onKeyStroke, onMounted, provide } from '#imports'
 import useGridViewColumnWidth from '~/composables/useGridViewColumnWidth'
 import {
   ActiveViewInj,
@@ -13,6 +13,7 @@ import {
   ReloadViewDataHookInj,
 } from '~/context'
 import useViewData from '~/composables/useViewData'
+import MdiPlusIcon from '~icons/mdi/plus'
 
 const meta = inject(MetaInj)
 const view = inject(ActiveViewInj)
@@ -93,6 +94,17 @@ defineExpose({
               <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
               <SmartsheetHeaderCell v-else :column="col" />
             </th>
+            <!-- v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')" -->
+            <th v-t="['c:column:add']" @click="addColumnDropdown = true">
+              <a-dropdown v-model:visible="addColumnDropdown" :trigger="['click']">
+                <div class="h-full w-full flex align-center justify-center">
+                  <MdiPlusIcon class="text-sm" />
+                </div>
+                <template #overlay>
+                  <SmartsheetColumnEdit @click.stop />
+                </template>
+              </a-dropdown>
+            </th>
           </tr>
         </thead>
         <tbody>
@@ -237,7 +249,6 @@ defineExpose({
   }
 
   td {
-    overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

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

@@ -45,8 +45,8 @@ export default (projectId?: MaybeRef<string>) => {
 
   const isMysql = computed(() => ['mysql', 'mysql2'].includes(projectBaseType))
   const isPg = computed(() => projectBaseType === 'pg')
-  const sqlUi = computed<ReturnType<typeof SqlUiFactory['create']>>(() =>
-    SqlUiFactory.create({ client: projectBaseType }),
+  const sqlUi = computed(
+    () => SqlUiFactory.create({ client: projectBaseType }) as Exclude<ReturnType<typeof SqlUiFactory['create']>, typeof OracleUi>,
   )
 
   return { project, tables, loadProjectRoles, loadProject, loadTables, isMysql, isPg, sqlUi }