Merge pull request #3180 from nocodb/fix/reverted-percent-to-v1

Reverted percent to how percent is handled in v1

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

@@ -1,69 +1,76 @@
 <script setup lang="ts">
-import { ColumnInj, computed, getPercentStep, inject, isValidPercent, renderPercent } from '#imports'
-import { EditModeInj } from '~/context'
+import { EditModeInj, inject } from '#imports'
 
 interface Props {
   modelValue: number | string | null | undefined
 }
 
-const { modelValue } = defineProps<Props>()
-
-const emit = defineEmits(['update:modelValue'])
+const props = defineProps<Props>()
+const emits = defineEmits(['update:modelValue'])
 
 const editEnabled = inject(EditModeInj)
 
-const column = inject(ColumnInj)
-
-const percent = ref()
-
-const isEdited = ref(false)
-
-const percentType = computed(() => column?.value?.meta?.precision || 0)
-
-const percentStep = computed(() => getPercentStep(percentType.value))
-
-const localState = computed({
-  get: () => {
-    return renderPercent(modelValue, percentType.value, !isEdited.value)
-  },
-  set: (val) => {
-    if (val === null) val = 0
-    if (isValidPercent(val, column?.value?.meta?.negative)) {
-      percent.value = val / 100
-    }
-  },
-})
-
-function onKeyDown(evt: KeyboardEvent) {
-  isEdited.value = true
-  return ['e', 'E', '+', '-'].includes(evt.key) && evt.preventDefault()
-}
-
-function onBlur() {
-  if (isEdited.value) {
-    emit('update:modelValue', percent.value)
-    isEdited.value = false
-  }
-}
-
-function onKeyDownEnter() {
-  if (isEdited.value) {
-    emit('update:modelValue', percent.value)
-    isEdited.value = false
-  }
-}
+const vModel = useVModel(props, 'modelValue', emits)
 </script>
 
 <template>
-  <input
-    v-if="isEdited"
-    v-model="localState"
-    type="number"
-    :step="percentStep"
-    @keydown="onKeyDown"
-    @blur="onBlur"
-    @keydown.enter="onKeyDownEnter"
-  />
-  <input v-if="editEnabled" v-model="localState" type="text" @focus="isEdited = true" />
-  <span v-else>{{ localState }}</span>
+  <input v-if="editEnabled" v-model="vModel" type="number" />
+  <span v-else>{{ vModel }}</span>
 </template>
+
+<!-- <script setup lang="ts">
+ import { ColumnInj, computed, getPercentStep, inject, isValidPercent, renderPercent } from '#imports'
+ import { EditModeInj } from '~/context'
+ interface Props {
+   modelValue: number | string | null | undefined
+ }
+ const { modelValue } = defineProps<Props>()
+ const emit = defineEmits(['update:modelValue'])
+ const editEnabled = inject(EditModeInj)
+ const column = inject(ColumnInj)
+ const percent = ref()
+ const isEdited = ref(false)
+ const percentType = computed(() => column?.value?.meta?.precision || 0)
+ const percentStep = computed(() => getPercentStep(percentType.value))
+ const localState = computed({
+   get: () => {
+     return renderPercent(modelValue, percentType.value, !isEdited.value)
+   },
+   set: (val) => {
+     if (val === null) val = 0
+     if (isValidPercent(val, column?.value?.meta?.negative)) {
+       percent.value = val / 100
+     }
+   },
+ })
+ function onKeyDown(evt: KeyboardEvent) {
+   isEdited.value = true
+   return ['e', 'E', '+', '-'].includes(evt.key) && evt.preventDefault()
+ }
+ function onBlur() {
+   if (isEdited.value) {
+     emit('update:modelValue', percent.value)
+     isEdited.value = false
+   }
+ }
+ function onKeyDownEnter() {
+   if (isEdited.value) {
+     emit('update:modelValue', percent.value)
+     isEdited.value = false
+   }
+ }
+ </script>
+
+ <template>
+   <input
+     v-if="isEdited"
+     v-model="localState"
+     type="number"
+     :step="percentStep"
+     @keydown="onKeyDown"
+     @blur="onBlur"
+     @keydown.enter="onKeyDownEnter"
+   />
+   <input v-if="editEnabled" v-model="localState" type="text" @focus="isEdited = true" />
+   <span v-else>{{ localState }}</span>
+ </template> -->

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

@@ -132,7 +132,6 @@ useEventListener(document, 'click', handleClose)
           v-model:value="formState"
         />
         <SmartsheetColumnSpecificDBTypeOptions v-if="formState.uidt === UITypes.SpecificDBType" />
-        <SmartsheetColumnPercentOptions v-if="formState.uidt === UITypes.Percent" v-model:value="formState" />
         <SmartsheetColumnSelectOptions
           v-if="formState.uidt === UITypes.SingleSelect || formState.uidt === UITypes.MultiSelect"
           v-model:value="formState"

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

@@ -1,3 +1,5 @@
+<!-- File not in use for now -->
+
 <script setup lang="ts">
 import { precisions } from '@/utils/percentUtils'
 

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

@@ -134,12 +134,12 @@ const syncAndNavigate = (dir: NavigateDir) => {
     <CellEmail v-else-if="isEmail" v-model="vModel" />
     <CellUrl v-else-if="isURL" v-model="vModel" />
     <CellPhoneNumber v-else-if="isPhoneNumber" v-model="vModel" />
+    <CellPercent v-else-if="isPercent" v-model="vModel" />
     <CellCurrency v-else-if="isCurrency" v-model="vModel" />
     <CellDecimal v-else-if="isDecimal" v-model="vModel" />
     <CellInteger v-else-if="isInt" v-model="vModel" />
     <CellFloat v-else-if="isFloat" v-model="vModel" />
     <CellText v-else-if="isString" v-model="vModel" />
-    <CellPercent v-else-if="isPercent" v-model="vModel" />
     <CellJson v-else-if="isJSON" v-model="vModel" />
     <CellText v-else v-model="vModel" />
   </div>