feat: display as progress

Signed-off-by: mertmit <mertmit99@gmail.com>

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,6 +34,13 @@ const vModel = computed({
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
 const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLInputElement)?.focus()
+
+const percentMeta = computed(() => {
+  return {
+    is_progress: false,
+    ...parseProp(column.value?.meta),
+  }
+})
 </script>
 
 <template>
@@ -53,5 +62,8 @@ const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value
     @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" class="px-3">
+    <a-progress :percent="Number(vModel)" size="small" />
+  </div>
   <span v-else>{{ vModel }}</span>
 </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>