Browse Source

fix: select options delete and reorder

Signed-off-by: mertmit <mertmit99@gmail.com>
pull/7005/head
mertmit 1 year ago
parent
commit
173856558c
  1. 37
      packages/nc-gui/components/smartsheet/column/SelectOptions.vue

37
packages/nc-gui/components/smartsheet/column/SelectOptions.vue

@ -29,7 +29,7 @@ const { optionsMagic: _optionsMagic } = useNocoEe()
const optionsWrapperDomRef = ref<HTMLElement>() const optionsWrapperDomRef = ref<HTMLElement>()
const options = ref<(Option & { status?: 'remove' })[]>([]) const options = ref<(Option & { status?: 'remove'; index?: number })[]>([])
const isAddingOption = ref(false) const isAddingOption = ref(false)
@ -38,7 +38,7 @@ const OPTIONS_PAGE_COUNT = 20
const loadedOptionAnchor = ref(OPTIONS_PAGE_COUNT) const loadedOptionAnchor = ref(OPTIONS_PAGE_COUNT)
const isReverseLazyLoad = ref(false) const isReverseLazyLoad = ref(false)
const renderedOptions = ref<(Option & { status?: 'remove' })[]>([]) const renderedOptions = ref<(Option & { status?: 'remove'; index?: number })[]>([])
const savedDefaultOption = ref<Option | null>(null) const savedDefaultOption = ref<Option | null>(null)
const savedCdf = ref<string | null>(null) const savedCdf = ref<string | null>(null)
@ -98,6 +98,12 @@ onMounted(() => {
options.value = vModel.value.colOptions.options options.value = vModel.value.colOptions.options
let indexCounter = 0
options.value.map((el) => {
el.index = indexCounter++
return el
})
loadedOptionAnchor.value = Math.min(loadedOptionAnchor.value, options.value.length) loadedOptionAnchor.value = Math.min(loadedOptionAnchor.value, options.value.length)
renderedOptions.value = [...options.value].slice(0, loadedOptionAnchor.value) renderedOptions.value = [...options.value].slice(0, loadedOptionAnchor.value)
@ -135,6 +141,7 @@ const addNewOption = () => {
const tempOption = { const tempOption = {
title: '', title: '',
color: getNextColor(), color: getNextColor(),
index: options.value.length,
} }
options.value.push(tempOption) options.value.push(tempOption)
@ -168,20 +175,29 @@ const addNewOption = () => {
// } // }
const syncOptions = () => { const syncOptions = () => {
vModel.value.colOptions.options = options.value.filter((op) => op.status !== 'remove') vModel.value.colOptions.options = options.value
.filter((op) => op.status !== 'remove')
.sort((a, b) => {
const renderA = renderedOptions.value.findIndex((el) => a.index !== undefined && el.index === a.index)
const renderB = renderedOptions.value.findIndex((el) => a.index !== undefined && el.index === b.index)
if (renderA === -1 || renderB === -1) return 0
return renderA - renderB
})
.map((op) => {
delete op.index
return op
})
} }
const removeRenderedOption = (index: number) => { const removeRenderedOption = (index: number) => {
const renderedOption = renderedOptions.value[index] const renderedOption = renderedOptions.value[index]
const option = options.value[loadedOptionAnchor.value + index]
renderedOption.status = 'remove' if (renderedOption.index === undefined || isNaN(renderedOption.index)) return
option.status = 'remove'
const option = options.value[renderedOption.index]
renderedOption.status = 'remove' renderedOption.status = 'remove'
if (option) {
option.status = 'remove' option.status = 'remove'
}
syncOptions() syncOptions()
@ -204,7 +220,10 @@ const optionChanged = (changedId: string) => {
const undoRemoveRenderedOption = (index: number) => { const undoRemoveRenderedOption = (index: number) => {
const renderedOption = renderedOptions.value[index] const renderedOption = renderedOptions.value[index]
const option = options.value[loadedOptionAnchor.value + index]
if (renderedOption.index === undefined || isNaN(renderedOption.index)) return
const option = options.value[renderedOption.index]
renderedOption.status = undefined renderedOption.status = undefined
option.status = undefined option.status = undefined

Loading…
Cancel
Save