Merge pull request #7138 from nocodb/feat/progress

feat: display as progress

packages/nc-gui/components.d.ts

@@ -49,6 +49,7 @@ declare module '@vue/runtime-core' {
     AModal: typeof import('ant-design-vue/es')['Modal']
     APagination: typeof import('ant-design-vue/es')['Pagination']
     APopover: typeof import('ant-design-vue/es')['Popover']
+    AProgress: typeof import('ant-design-vue/es')['Progress']
     ARadio: typeof import('ant-design-vue/es')['Radio']
     ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     ARate: typeof import('ant-design-vue/es')['Rate']

packages/nc-gui/components/cell/Percent.vue

@@ -12,6 +12,8 @@ const emits = defineEmits(['update:modelValue'])
 
 const { showNull } = useGlobal()
 
+const column = inject(ColumnInj)!
+
 const editEnabled = inject(EditModeInj)
 
 const isEditColumn = inject(EditColumnInj, ref(false))
@@ -32,26 +34,73 @@ const vModel = computed({
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
 const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLInputElement)?.focus()
+
+const cellFocused = ref(false)
+
+const expandedEditEnabled = ref(false)
+
+const percentMeta = computed(() => {
+  return {
+    is_progress: false,
+    ...parseProp(column.value?.meta),
+  }
+})
+
+const onBlur = () => {
+  if (editEnabled) {
+    editEnabled.value = false
+  }
+  cellFocused.value = false
+  expandedEditEnabled.value = false
+}
+
+const onFocus = () => {
+  cellFocused.value = true
+}
+
+const onMouseover = () => {
+  expandedEditEnabled.value = true
+}
+
+const onMouseleave = () => {
+  if (!cellFocused.value) {
+    expandedEditEnabled.value = false
+  }
+}
 </script>
 
 <template>
-  <input
-    v-if="editEnabled"
-    :ref="focus"
-    v-model="vModel"
-    class="w-full !text-sm !border-none !outline-none focus:ring-0 text-base p-1"
-    :class="{ '!px-2': editEnabled }"
-    type="number"
-    :placeholder="isEditColumn ? $t('labels.optional') : ''"
-    @blur="editEnabled = false"
-    @keydown.down.stop
-    @keydown.left.stop
-    @keydown.right.stop
-    @keydown.up.stop
-    @keydown.delete.stop
-    @selectstart.capture.stop
-    @mousedown.stop
-  />
-  <span v-else-if="vModel === null && showNull" class="nc-null capitalize">{{ $t('general.null') }}</span>
-  <span v-else>{{ vModel }}</span>
+  <div class="nc-filter-value-select w-full" @mouseover="onMouseover" @mouseleave="onMouseleave">
+    <input
+      v-if="(!isExpandedFormOpen && editEnabled) || (isExpandedFormOpen && expandedEditEnabled)"
+      :ref="focus"
+      v-model="vModel"
+      class="w-full !text-sm !border-none !outline-none focus:ring-0 text-base p-1"
+      :class="{ '!px-2': editEnabled }"
+      type="number"
+      :placeholder="isEditColumn ? $t('labels.optional') : ''"
+      @blur="onBlur"
+      @focus="onFocus"
+      @keydown.down.stop
+      @keydown.left.stop
+      @keydown.right.stop
+      @keydown.up.stop
+      @keydown.delete.stop
+      @selectstart.capture.stop
+      @mousedown.stop
+    />
+    <span v-else-if="vModel === null && showNull" class="nc-null capitalize">{{ $t('general.null') }}</span>
+    <div v-else-if="percentMeta.is_progress === true && vModel !== null && vModel !== undefined" class="px-2">
+      <a-progress
+        :percent="Number(parseFloat(vModel.toString()).toFixed(2))"
+        size="small"
+        status="normal"
+        stroke-color="#3366FF"
+        trail-color="#E5E5E5"
+        :show-info="false"
+      />
+    </div>
+    <!-- nbsp to keep height even if vModel is zero length -->
+    <span v-else>{{ vModel }}&nbsp;</span>
+  </div>
 </template>

packages/nc-gui/components/smartsheet/column/EditOrAdd.vue

@@ -312,6 +312,7 @@ if (props.fromTableExplorer) {
             v-model:value="formState"
           />
           <LazySmartsheetColumnLinkOptions v-if="isEdit && formState.uidt === UITypes.Links" v-model:value="formState" />
+          <LazySmartsheetColumnPercentOptions v-if="formState.uidt === UITypes.Percent" v-model:value="formState" />
           <LazySmartsheetColumnSpecificDBTypeOptions v-if="formState.uidt === UITypes.SpecificDBType" />
           <SmartsheetColumnSelectOptions
             v-if="formState.uidt === UITypes.SingleSelect || formState.uidt === UITypes.MultiSelect"

packages/nc-gui/components/smartsheet/column/PercentOptions.vue

@@ -1,47 +1,36 @@
-<!-- File not in use for now -->
-
 <script setup lang="ts">
-import { precisions, useVModel } from '#imports'
+import { useVModel } from '#imports'
 
 const props = defineProps<{
   value: any
+  isEdit: boolean
 }>()
 
 const emit = defineEmits(['update:value'])
 
 const vModel = useVModel(props, 'value', emit)
 
-if (!vModel.value.meta) vModel.value.meta = {}
-if (!vModel.value.meta?.negative) vModel.value.meta.negative = false
-if (!vModel.value.meta?.default) vModel.value.meta.default = null
-if (!vModel.value.meta?.precision) vModel.value.meta.precision = precisions[0].id
+const validators = {}
+
+const { setAdditionalValidations } = useColumnCreateStoreOrThrow()
+
+setAdditionalValidations({
+  ...validators,
+})
+
+// set default value
+vModel.value.meta = {
+  is_progress: false,
+  ...vModel.value.meta,
+}
 </script>
 
 <template>
-  <div class="flex flex-col mt-2 gap-2">
-    <div class="flex flex-row space-x-2">
-      <a-form-item class="flex w-1/2" :label="$t('placeholder.precision')">
-        <a-select v-model:value="vModel.meta.precision" dropdown-class-name="nc-dropdown-precision">
-          <a-select-option v-for="(precision, i) of precisions" :key="i" :value="precision.id">
-            <div class="flex flex-row items-center">
-              <div class="text-xs">
-                {{ precision.title }}
-              </div>
-            </div>
-          </a-select-option>
-        </a-select>
-      </a-form-item>
-      <a-form-item :label="$t('labels.defaultNumberPercent')">
-        <a-input v-model:value="vModel.meta.default" :name="$t('labels.default')" type="number" />
-      </a-form-item>
-    </div>
-    <div class="flex flex-row mt-2">
-      <a-form-item>
-        <div class="flex flex-row space-x-2 items-center">
-          <a-switch v-model:checked="vModel.meta.negative" :name="$t('labels.negative')" />
-          <div class="text-xs">{{ $t('placeholder.allowNegativeNumbers') }}</div>
-        </div>
-      </a-form-item>
+  <div class="flex flex-col">
+    <div>
+      <a-checkbox v-if="vModel.meta" v-model:checked="vModel.meta.is_progress" class="ml-1 mb-1">
+        <span class="text-[10px] text-gray-600">Display as progress</span>
+      </a-checkbox>
     </div>
   </div>
 </template>

packages/nc-gui/components/smartsheet/column/PercentOptionsLegacy.vue

@@ -0,0 +1,47 @@
+<!-- File not in use for now -->
+
+<script setup lang="ts">
+import { precisions, useVModel } from '#imports'
+
+const props = defineProps<{
+  value: any
+}>()
+
+const emit = defineEmits(['update:value'])
+
+const vModel = useVModel(props, 'value', emit)
+
+if (!vModel.value.meta) vModel.value.meta = {}
+if (!vModel.value.meta?.negative) vModel.value.meta.negative = false
+if (!vModel.value.meta?.default) vModel.value.meta.default = null
+if (!vModel.value.meta?.precision) vModel.value.meta.precision = precisions[0].id
+</script>
+
+<template>
+  <div class="flex flex-col mt-2 gap-2">
+    <div class="flex flex-row space-x-2">
+      <a-form-item class="flex w-1/2" :label="$t('placeholder.precision')">
+        <a-select v-model:value="vModel.meta.precision" dropdown-class-name="nc-dropdown-precision">
+          <a-select-option v-for="(precision, i) of precisions" :key="i" :value="precision.id">
+            <div class="flex flex-row items-center">
+              <div class="text-xs">
+                {{ precision.title }}
+              </div>
+            </div>
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item :label="$t('labels.defaultNumberPercent')">
+        <a-input v-model:value="vModel.meta.default" :name="$t('labels.default')" type="number" />
+      </a-form-item>
+    </div>
+    <div class="flex flex-row mt-2">
+      <a-form-item>
+        <div class="flex flex-row space-x-2 items-center">
+          <a-switch v-model:checked="vModel.meta.negative" :name="$t('labels.negative')" />
+          <div class="text-xs">{{ $t('placeholder.allowNegativeNumbers') }}</div>
+        </div>
+      </a-form-item>
+    </div>
+  </div>
+</template>