Merge pull request #2907 from nocodb/feat/gui-v2-rating-cell

feat(gui-v2): Rating Cell

packages/nc-gui-v2/components.d.ts

@@ -39,6 +39,7 @@ declare module '@vue/runtime-core' {
     AModal: typeof import('ant-design-vue/es')['Modal']
     APagination: typeof import('ant-design-vue/es')['Pagination']
     APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
+    ARate: typeof import('ant-design-vue/es')['Rate']
     ARow: typeof import('ant-design-vue/es')['Row']
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']

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

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { computed, inject } from '#imports'
-import { ColumnInj, IsFormInj } from '~/context'
+import { ColumnInj } from '~/context'
 import MdiStarIcon from '~icons/mdi/star'
-import MdiStarOutlineIcon from '~icons/mdi/star-outline'
+import MdiHeartIcon from '~icons/mdi/heart'
+import MdiMoonFullIcon from '~icons/mdi/moon-full'
+import MdiThumbUpIcon from '~icons/mdi/thumb-up'
+import MdiFlagIcon from '~icons/mdi/flag'
 
 interface Props {
   modelValue?: number
@@ -11,21 +14,33 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const emit = defineEmits(['update:modelValue'])
+const emits = defineEmits(['update:modelValue'])
-
-const vModel = useVModel(props, 'modelValue', emit)
 
 const column = inject(ColumnInj)
-const isForm = inject(IsFormInj)
+
+const ratingMeta = computed(() => {
+  return {
+    icon: {
+      full: 'mdi-star',
+      empty: 'mdi-star-outline',
+    },
+    color: '#fcb401',
+    max: 5,
+    ...(column?.meta || {}),
+  }
+})
+
+const vModel = useVModel(props, 'modelValue', emits)
 </script>
 
 <template>
-  <div class="d-100 h-100" :class="{ 'nc-cell-hover-show': vModel === 0 || !vModel }">
+  <a-rate v-model:value="vModel" :count="ratingMeta.max" :style="`color: ${ratingMeta.color}`" :disabled="props.readOnly">
-    <v-rating v-model="vModel" :length="5" dense x-small :readonly="readOnly" clearable>
+    <template #character>
-      <template #item="{ isFilled, click }">
+      <MdiStarIcon v-if="ratingMeta.icon.full === 'mdi-star'" class="text-sm" />
-        <MdiStarIcon v-if="isFilled" class="text-[#fcb40]" @click="click" />
+      <MdiHeartIcon v-if="ratingMeta.icon.full === 'mdi-heart'" class="text-sm" />
-        <MdiStarOutlineIcon v-else class="text-[#fcb40]" @click="click" />
+      <MdiMoonFullIcon v-if="ratingMeta.icon.full === 'mdi-moon-full'" class="text-sm" />
-      </template>
+      <MdiThumbUpIcon v-if="ratingMeta.icon.full === 'mdi-thumb-up'" class="text-sm" />
-    </v-rating>
+      <MdiFlagIcon v-if="ratingMeta.icon.full === 'mdi-flag'" class="text-sm" />
-  </div>
+    </template>
+  </a-rate>
 </template>