Browse Source

Merge pull request #2979 from nocodb/feat/gui-v2-rating-options

feat(gui-v2): rating column
pull/2986/head
աɨռɢӄաօռɢ 2 years ago committed by GitHub
parent
commit
fed76ddabc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 50
      packages/nc-gui-v2/components/cell/Checkbox.vue
  2. 1
      packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
  3. 93
      packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
  4. 37
      packages/nc-gui-v2/package-lock.json
  5. 1
      packages/nc-gui-v2/package.json
  6. 47
      packages/nc-gui-v2/utils/iconUtils.ts
  7. 1
      packages/nc-gui-v2/utils/index.ts

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

@ -1,20 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { inject } from '#imports' import { inject } from '#imports'
import { ColumnInj, IsFormInj } from '~/context' import { ColumnInj, IsFormInj } from '~/context'
import MdiCheckBold from '~icons/mdi/check-bold' import { getMdiIcon } from '@/utils'
import MdiCropSquare from '~icons/mdi/crop-square'
import MdiCheckCircleOutline from '~icons/mdi/check-circle-outline'
import MdiCheckboxBlankCircleOutline from '~icons/mdi/checkbox-blank-circle-outline'
import MdiStar from '~icons/mdi/star'
import MdiStarOutline from '~icons/mdi/star-outline'
import MdiHeart from '~icons/mdi/heart'
import MdiHeartOutline from '~icons/mdi/heart-outline'
import MdiMoonFull from '~icons/mdi/moon-full'
import MdiMoonNew from '~icons/mdi/moon-new'
import MdiThumbUp from '~icons/mdi/thumb-up'
import MdiThumbUpOutline from '~icons/mdi/thumb-up-outline'
import MdiFlag from '~icons/mdi/flag'
import MdiFlagOutline from '~icons/mdi/flag-outline'
interface Props { interface Props {
modelValue?: boolean | undefined | number modelValue?: boolean | undefined | number
@ -42,46 +29,13 @@ const checkboxMeta = $computed(() => {
...(column?.meta || {}), ...(column?.meta || {}),
} }
}) })
const icon = (type: string) => {
switch (type) {
case 'mdi-check-bold':
return MdiCheckBold
case 'mdi-crop-square':
return MdiCropSquare
case 'mdi-check-circle-outline':
return MdiCheckCircleOutline
case 'mdi-checkbox-blank-circle-outline':
return MdiCheckboxBlankCircleOutline
case 'mdi-star':
return MdiStar
case 'mdi-star-outline':
return MdiStarOutline
case 'mdi-heart':
return MdiHeart
case 'mdi-heart-outline':
return MdiHeartOutline
case 'mdi-moon-full':
return MdiMoonFull
case 'mdi-moon-new':
return MdiMoonNew
case 'mdi-thumb-up':
return MdiThumbUp
case 'mdi-thumb-up-outline':
return MdiThumbUpOutline
case 'mdi-flag':
return MdiFlag
case 'mdi-flag-outline':
return MdiFlagOutline
}
}
</script> </script>
<template> <template>
<div class="flex" :class="{ 'justify-center': !isForm, 'nc-cell-hover-show': !vModel }"> <div class="flex" :class="{ 'justify-center': !isForm, 'nc-cell-hover-show': !vModel }">
<div class="px-1 pt-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel }" @click="vModel = !vModel"> <div class="px-1 pt-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel }" @click="vModel = !vModel">
<component <component
:is="icon(vModel ? checkboxMeta.icon.checked : checkboxMeta.icon.unchecked)" :is="getMdiIcon(vModel ? checkboxMeta.icon.checked : checkboxMeta.icon.unchecked)"
:style="{ :style="{
color: checkboxMeta.color, color: checkboxMeta.color,
}" }"

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

@ -89,6 +89,7 @@ watchEffect(() => {
<SmartsheetColumnCurrencyOptions v-if="formState.uidt === UITypes.Currency" /> <SmartsheetColumnCurrencyOptions v-if="formState.uidt === UITypes.Currency" />
<SmartsheetColumnDurationOptions v-if="formState.uidt === UITypes.Duration" /> <SmartsheetColumnDurationOptions v-if="formState.uidt === UITypes.Duration" />
<SmartsheetColumnRatingOptions v-if="formState.uidt === UITypes.Rating" />
<div> <div>
<div <div

93
packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue

@ -0,0 +1,93 @@
<script setup lang="ts">
import { Sketch } from '@ckpack/vue-color'
import { useColumnCreateStoreOrThrow } from '#imports'
import { enumColor, getMdiIcon } from '@/utils'
const { formState, validateInfos, setAdditionalValidations, sqlUi, onDataTypeChange, onAlter } = useColumnCreateStoreOrThrow()
// cater existing v1 cases
const iconList = [
{
full: 'mdi-star',
empty: 'mdi-star-outline',
},
{
full: 'mdi-heart',
empty: 'mdi-heart-outline',
},
{
full: 'mdi-moon-full',
empty: 'mdi-moon-new',
},
{
full: 'mdi-thumb-up',
empty: 'mdi-thumb-up-outline',
},
{
full: 'mdi-flag',
empty: 'mdi-flag-outline',
},
]
const advanced = ref(true)
const picked = ref(formState.value.meta.color || enumColor.light[0])
</script>
<template>
<a-row>
<a-col :span="12">
<a-form-item label="Icon">
<a-select v-model:value="formState.meta.icon" size="small" class="w-52">
<!-- FIXME: antdv doesn't support object as value -->
<a-select-option v-for="(icon, i) of iconList" :key="i" :value="icon">
<component
:is="getMdiIcon(icon.full)"
:style="{
color: formState.meta.color,
}"
/>
{{ ' ' }}
<component
:is="getMdiIcon(icon.empty)"
:style="{
color: formState.meta.color,
}"
/>
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="Max">
<a-select v-model:value="formState.meta.max" class="w-52" size="small">
<a-select-option v-for="(v, i) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" :key="i" :value="v">
{{ v }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-card class="w-full shadow-lg mt-2" body-style="padding: 0px">
<a-collapse v-model:activeKey="advanced" accordion ghost expand-icon-position="right">
<a-collapse-panel key="1" header="Advanced" class="">
<a-button class="!bg-primary text-white w-full" @click="formState.meta.color = picked.hex"> Pick Color </a-button>
<div class="px-7 py-3">
<Sketch v-model="picked" />
</div>
</a-collapse-panel>
</a-collapse>
</a-card>
</a-row>
</template>
<style scoped lang="scss">
.color-selector:hover {
@apply brightness-90;
}
.color-selector.selected {
@apply py-[5px] px-[10px] brightness-90;
}
</style>

37
packages/nc-gui-v2/package-lock.json generated

@ -5,6 +5,7 @@
"packages": { "packages": {
"": { "": {
"dependencies": { "dependencies": {
"@ckpack/vue-color": "^1.2.0",
"@vueuse/core": "^9.0.2", "@vueuse/core": "^9.0.2",
"@vueuse/integrations": "^9.0.2", "@vueuse/integrations": "^9.0.2",
"ant-design-vue": "^3.2.10", "ant-design-vue": "^3.2.10",
@ -859,6 +860,22 @@
"node": ">=6.9.0" "node": ">=6.9.0"
} }
}, },
"node_modules/@ckpack/vue-color": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@ckpack/vue-color/-/vue-color-1.2.0.tgz",
"integrity": "sha512-c9X82nppYjSxjlITO6jdLLdt9HoyZzqEWpqDL2V6NJd859d6GCh/2AHeRXk+37uRJ1UdTkCuty93WOEqja8quw==",
"dependencies": {
"@ctrl/tinycolor": "^3.4.0",
"lodash-es": "^4.17.21",
"material-colors": "^1.2.6"
},
"engines": {
"node": ">=12"
},
"peerDependencies": {
"vue": "^3.2.0"
}
},
"node_modules/@cloudflare/kv-asset-handler": { "node_modules/@cloudflare/kv-asset-handler": {
"version": "0.2.0", "version": "0.2.0",
"resolved": "https://registry.npmjs.org/@cloudflare/kv-asset-handler/-/kv-asset-handler-0.2.0.tgz", "resolved": "https://registry.npmjs.org/@cloudflare/kv-asset-handler/-/kv-asset-handler-0.2.0.tgz",
@ -9325,6 +9342,11 @@
"semver": "bin/semver.js" "semver": "bin/semver.js"
} }
}, },
"node_modules/material-colors": {
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
"integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
},
"node_modules/mdast-util-from-markdown": { "node_modules/mdast-util-from-markdown": {
"version": "0.8.5", "version": "0.8.5",
"resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz", "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz",
@ -15371,6 +15393,16 @@
"to-fast-properties": "^2.0.0" "to-fast-properties": "^2.0.0"
} }
}, },
"@ckpack/vue-color": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@ckpack/vue-color/-/vue-color-1.2.0.tgz",
"integrity": "sha512-c9X82nppYjSxjlITO6jdLLdt9HoyZzqEWpqDL2V6NJd859d6GCh/2AHeRXk+37uRJ1UdTkCuty93WOEqja8quw==",
"requires": {
"@ctrl/tinycolor": "^3.4.0",
"lodash-es": "^4.17.21",
"material-colors": "^1.2.6"
}
},
"@cloudflare/kv-asset-handler": { "@cloudflare/kv-asset-handler": {
"version": "0.2.0", "version": "0.2.0",
"resolved": "https://registry.npmjs.org/@cloudflare/kv-asset-handler/-/kv-asset-handler-0.2.0.tgz", "resolved": "https://registry.npmjs.org/@cloudflare/kv-asset-handler/-/kv-asset-handler-0.2.0.tgz",
@ -21702,6 +21734,11 @@
} }
} }
}, },
"material-colors": {
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
"integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
},
"mdast-util-from-markdown": { "mdast-util-from-markdown": {
"version": "0.8.5", "version": "0.8.5",
"resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz", "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz",

1
packages/nc-gui-v2/package.json

@ -11,6 +11,7 @@
"coverage": "vitest -c test/vite.config.ts run --coverage" "coverage": "vitest -c test/vite.config.ts run --coverage"
}, },
"dependencies": { "dependencies": {
"@ckpack/vue-color": "^1.2.0",
"@vueuse/core": "^9.0.2", "@vueuse/core": "^9.0.2",
"@vueuse/integrations": "^9.0.2", "@vueuse/integrations": "^9.0.2",
"ant-design-vue": "^3.2.10", "ant-design-vue": "^3.2.10",

47
packages/nc-gui-v2/utils/iconUtils.ts

@ -0,0 +1,47 @@
import MdiCheckBold from '~icons/mdi/check-bold'
import MdiCropSquare from '~icons/mdi/crop-square'
import MdiCheckCircleOutline from '~icons/mdi/check-circle-outline'
import MdiCheckboxBlankCircleOutline from '~icons/mdi/checkbox-blank-circle-outline'
import MdiStar from '~icons/mdi/star'
import MdiStarOutline from '~icons/mdi/star-outline'
import MdiHeart from '~icons/mdi/heart'
import MdiHeartOutline from '~icons/mdi/heart-outline'
import MdiMoonFull from '~icons/mdi/moon-full'
import MdiMoonNew from '~icons/mdi/moon-new'
import MdiThumbUp from '~icons/mdi/thumb-up'
import MdiThumbUpOutline from '~icons/mdi/thumb-up-outline'
import MdiFlag from '~icons/mdi/flag'
import MdiFlagOutline from '~icons/mdi/flag-outline'
export const getMdiIcon = (type: string) => {
switch (type) {
case 'mdi-check-bold':
return MdiCheckBold
case 'mdi-crop-square':
return MdiCropSquare
case 'mdi-check-circle-outline':
return MdiCheckCircleOutline
case 'mdi-checkbox-blank-circle-outline':
return MdiCheckboxBlankCircleOutline
case 'mdi-star':
return MdiStar
case 'mdi-star-outline':
return MdiStarOutline
case 'mdi-heart':
return MdiHeart
case 'mdi-heart-outline':
return MdiHeartOutline
case 'mdi-moon-full':
return MdiMoonFull
case 'mdi-moon-new':
return MdiMoonNew
case 'mdi-thumb-up':
return MdiThumbUp
case 'mdi-thumb-up-outline':
return MdiThumbUpOutline
case 'mdi-flag':
return MdiFlag
case 'mdi-flag-outline':
return MdiFlagOutline
}
}

1
packages/nc-gui-v2/utils/index.ts

@ -4,6 +4,7 @@ export * from './deepCompare'
export * from './durationUtils' export * from './durationUtils'
export * from './errorUtils' export * from './errorUtils'
export * from './fileUtils' export * from './fileUtils'
export * from './iconUtils'
export * from './filterUtils' export * from './filterUtils'
export * from './generateName' export * from './generateName'
export * from './projectCreateUtils' export * from './projectCreateUtils'

Loading…
Cancel
Save