Browse Source

chore(gui-v2): revert casting to any instead of select options type

pull/3158/head
braks 2 years ago
parent
commit
4373c38311
  1. 56
      packages/nc-gui-v2/components/cell/MultiSelect.vue
  2. 16
      packages/nc-gui-v2/components/cell/SingleSelect.vue

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

@ -1,11 +1,23 @@
<script lang="ts" setup>
import type { Select as AntSelect } from 'ant-design-vue'
import { ActiveCellInj, ColumnInj, computed, h, inject, onMounted, ref, useEventListener, useProject, watch } from '#imports'
import { EditModeInj } from '~/context'
import type { SelectOptionsType } from 'nocodb-sdk'
import {
ActiveCellInj,
ColumnInj,
EditModeInj,
computed,
h,
inject,
onMounted,
ref,
useEventListener,
useProject,
watch,
} from '#imports'
import MdiCloseCircle from '~icons/mdi/close-circle'
interface Props {
modelValue?: string | string[] | undefined
modelValue?: string | string[]
}
const { modelValue } = defineProps<Props>()
@ -14,11 +26,9 @@ const emit = defineEmits(['update:modelValue'])
const { isMysql } = useProject()
const column = inject(ColumnInj)
const column = inject(ColumnInj)!
// const isForm = inject<boolean>('isForm', false)
const editEnabled = inject(EditModeInj)
const editEnabled = inject(EditModeInj)!
const active = inject(ActiveCellInj, ref(false))
@ -28,7 +38,7 @@ const aselect = ref<typeof AntSelect>()
const isOpen = ref(false)
const options = computed(() => {
const options = computed<SelectOptionsType[]>(() => {
if (column?.value.colOptions) {
const opts = column.value.colOptions
? (column.value.colOptions as any).options.filter((el: any) => el.title !== '') || []
@ -42,7 +52,7 @@ const options = computed(() => {
})
const vModel = computed({
get: () => selectedIds.value.map((el) => options.value.find((op: any) => op.id === el)?.title),
get: () => selectedIds.value.map((el) => options.value.find((op) => op.id === el)?.title),
set: (val) => emit('update:modelValue', val.length === 0 ? null : val.join(',')),
})
@ -51,10 +61,10 @@ const selectedTitles = computed(() =>
? typeof modelValue === 'string'
? isMysql
? modelValue.split(',').sort((a, b) => {
const opa = options.value.find((el: any) => el.title === a)
const opb = options.value.find((el: any) => el.title === 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 opa.order! - opb.order!
}
return 0
})
@ -82,7 +92,14 @@ const handleClose = (e: MouseEvent) => {
}
onMounted(() => {
selectedIds.value = selectedTitles.value.map((el) => options.value.find((op: any) => op.title === el).id)
selectedIds.value = selectedTitles.value.flatMap((el) => {
const item = options.value.find((op) => op.title === el)?.id
if (item) {
return [item]
}
return []
})
})
useEventListener(document, 'click', handleClose)
@ -90,14 +107,19 @@ useEventListener(document, 'click', handleClose)
watch(
() => modelValue,
() => {
selectedIds.value = selectedTitles.value.map((el) => options.value.find((op: any) => op.title === el).id)
selectedIds.value = selectedIds.value = selectedTitles.value.flatMap((el) => {
const item = options.value.find((op) => op.title === el)?.id
if (item) {
return [item]
}
return []
})
},
)
watch(isOpen, (n, _o) => {
if (!n) {
aselect.value?.blur()
}
if (!n) aselect.value?.$el.blur()
})
</script>

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

@ -1,7 +1,7 @@
<script lang="ts" setup>
import type { Select as AntSelect } from 'ant-design-vue'
import { ActiveCellInj, ColumnInj, computed, inject, ref, useEventListener, watch } from '#imports'
import { EditModeInj } from '~/context'
import type { SelectOptionsType } from 'nocodb-sdk'
import { ActiveCellInj, ColumnInj, EditModeInj, computed, inject, ref, useEventListener, watch } from '#imports'
interface Props {
modelValue?: string | undefined
@ -11,9 +11,9 @@ const { modelValue } = defineProps<Props>()
const emit = defineEmits(['update:modelValue'])
const column = inject(ColumnInj)
const column = inject(ColumnInj)!
const editEnabled = inject(EditModeInj)
const editEnabled = inject(EditModeInj)!
const active = inject(ActiveCellInj, ref(false))
@ -26,11 +26,11 @@ const vModel = computed({
set: (val) => emit('update:modelValue', val || null),
})
const options = computed(() => {
const options = computed<SelectOptionsType[]>(() => {
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: any) => el.title !== '') || []
(column.value.colOptions as any).options.filter((el: SelectOptionsType) => el.title !== '') || []
: []
for (const op of opts.filter((el: any) => el.order === null)) {
op.title = op.title.replace(/^'/, '').replace(/'$/, '')
@ -59,9 +59,7 @@ const handleClose = (e: MouseEvent) => {
useEventListener(document, 'click', handleClose)
watch(isOpen, (n, _o) => {
if (!n) {
aselect.value?.blur()
}
if (!n) aselect.value?.$el.blur()
})
</script>

Loading…
Cancel
Save