feat(gui): toggle rating based on number key press

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

packages/nc-gui/components.d.ts

@@ -106,6 +106,8 @@ declare module '@vue/runtime-core' {
     MdiAccountCircle: typeof import('~icons/mdi/account-circle')['default']
     MdiAccountOutline: typeof import('~icons/mdi/account-outline')['default']
     MdiAccountPlusOutline: typeof import('~icons/mdi/account-plus-outline')['default']
+    MdiAccountSupervisorOutline: typeof import('~icons/mdi/account-supervisor-outline')['default']
+    MdiAdd: typeof import('~icons/mdi/add')['default']
     MdiAlpha: typeof import('~icons/mdi/alpha')['default']
     MdiAlphaA: typeof import('~icons/mdi/alpha-a')['default']
     MdiApi: typeof import('~icons/mdi/api')['default']
@@ -200,6 +202,7 @@ declare module '@vue/runtime-core' {
     MdiRocketLaunchOutline: typeof import('~icons/mdi/rocket-launch-outline')['default']
     MdiScriptTextKeyOutline: typeof import('~icons/mdi/script-text-key-outline')['default']
     MdiScriptTextOutline: typeof import('~icons/mdi/script-text-outline')['default']
+    MdiShieldKeyOutline: typeof import('~icons/mdi/shield-key-outline')['default']
     MdiSlack: typeof import('~icons/mdi/slack')['default']
     MdiSort: typeof import('~icons/mdi/sort')['default']
     MdiStar: typeof import('~icons/mdi/star')['default']

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

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { ColumnInj, IsFormInj, ReadonlyInj, getMdiIcon, inject } from '#imports'
-import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
-import { ActiveCellInj } from '~/context'
+import { ActiveCellInj, ColumnInj, IsFormInj, ReadonlyInj, getMdiIcon, inject, useSelectedCellKeyupListener } from '#imports'
 
 interface Props {
   // If the previous cell value was a text, the initial checkbox value is a string type
@@ -46,7 +44,6 @@ function onClick() {
 }
 
 useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
-  console.log(e.key)
   switch (e.key) {
     case 'Enter':
       onClick()

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

@@ -24,11 +24,17 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none text-sm px-2" @blur="editEnabled = false"
-         @keydown.down.stop
-         @keydown.left.stop
-         @keydown.right.stop
-         @keydown.up.stop/>
+  <input
+    v-if="editEnabled"
+    :ref="focus"
+    v-model="vModel"
+    class="outline-none text-sm px-2"
+    @blur="editEnabled = false"
+    @keydown.down.stop
+    @keydown.left.stop
+    @keydown.right.stop
+    @keydown.up.stop
+  />
 
   <a v-else-if="validEmail" class="text-sm underline hover:opacity-75" :href="`mailto:${vModel}`" target="_blank">
     {{ vModel }}

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

@@ -16,7 +16,6 @@ import {
   useProject,
   watch,
 } from '#imports'
-import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
 interface Props {
@@ -74,13 +73,13 @@ const selectedTitles = computed(() =>
     ? typeof modelValue === 'string'
       ? isMysql
         ? modelValue.split(',').sort((a, b) => {
-          const opa = options.value.find((el) => el.title === a)
-          const opb = options.value.find((el) => el.title === b)
-          if (opa && opb) {
-            return opa.order! - opb.order!
-          }
-          return 0
-        })
+            const opa = options.value.find((el) => el.title === a)
+            const opb = options.value.find((el) => el.title === b)
+            if (opa && opb) {
+              return opa.order! - opb.order!
+            }
+            return 0
+          })
         : modelValue.split(',')
       : modelValue
     : [],
@@ -100,7 +99,6 @@ const handleKeys = (e: KeyboardEvent) => {
       isOpen.value = true
       e.stopPropagation()
       break
-
   }
 }
 

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

@@ -17,6 +17,5 @@ const vModel = useVModel(props, 'modelValue', emits)
 </script>
 
 <template>
-  <LazyCellText
-    v-model="vModel" />
+  <LazyCellText v-model="vModel" />
 </template>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ColumnInj, EditModeInj, computed, inject } from '#imports'
+import { ActiveCellInj, ColumnInj, EditModeInj, computed, inject, useSelectedCellKeyupListener } from '#imports'
 
 interface Props {
   modelValue?: number | null | undefined
@@ -29,6 +29,12 @@ const vModel = computed({
   get: () => modelValue ?? NaN,
   set: (val) => emits('update:modelValue', val),
 })
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
+  if (/^\d$/.test(e.key)) {
+    vModel.value = +e.key === +vModel.value ? 0 : +e.key
+  }
+})
 </script>
 
 <template>

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

@@ -2,17 +2,7 @@
 import tinycolor from 'tinycolor2'
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType } from 'nocodb-sdk'
-import {
-  ActiveCellInj,
-  ColumnInj,
-  IsKanbanInj,
-  ReadonlyInj,
-  computed,
-  inject,
-  ref,
-  useEventListener,
-  watch,
-} from '#imports'
+import { ActiveCellInj, ColumnInj, IsKanbanInj, ReadonlyInj, computed, inject, ref, useEventListener, watch } from '#imports'
 
 interface Props {
   modelValue?: string | undefined
@@ -44,7 +34,7 @@ const options = computed<SelectOptionType[]>(() => {
   if (column?.value.colOptions) {
     const opts = column.value.colOptions
       ? // todo: fix colOptions type, options does not exist as a property
-      (column.value.colOptions as any).options.filter((el: SelectOptionType) => el.title !== '') || []
+        (column.value.colOptions as any).options.filter((el: SelectOptionType) => el.title !== '') || []
       : []
     for (const op of opts.filter((el: any) => el.order === null)) {
       op.title = op.title.replace(/^'/, '').replace(/'$/, '')