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

<script setup lang="ts">
import Draggable from 'vuedraggable'
import tinycolor from 'tinycolor2'
import { type SelectOptionsType, UITypes } from 'nocodb-sdk'
import InfiniteLoading from 'v3-infinite-loading'

interface Option {
  color: string
  title: string
  id?: string
  fk_colum_id?: string
  order?: number
  status?: 'remove' | 'new'
  index?: number
}

const props = defineProps<{
  value: any
  fromTableExplorer?: boolean
  isKanbanStack?: boolean
  optionId?: string
  isNewStack?: boolean
}>()

const emit = defineEmits(['update:value', 'saveChanges'])

const vModel = useVModel(props, 'value', emit)

const { isKanbanStack, optionId, isNewStack } = toRefs(props)

const { setAdditionalValidations, validateInfos, column } = useColumnCreateStoreOrThrow()

// const { base } = storeToRefs(useBase())

const { optionsMagic: _optionsMagic } = useNocoEe()

const optionsWrapperDomRef = ref<HTMLElement>()

const options = ref<Option[]>([])

const isAddingOption = ref(false)

// TODO: Implement proper top and bottom virtual scrolling
const OPTIONS_PAGE_COUNT = 20
const loadedOptionAnchor = ref(OPTIONS_PAGE_COUNT)
const isReverseLazyLoad = ref(false)

const renderedOptions = ref<Option[]>([])
const savedDefaultOption = ref<Option[]>([])

const colorMenus = ref<any>({})

const colors = ref(enumColor.light)

const defaultOption = ref<Option[]>([])

const isKanban = inject(IsKanbanInj, ref(false))

const { t } = useI18n()

const validators = {
  colOptions: [
    {
      type: 'object',
      fields: {
        options: {
          validator: (_: any, _opt: any) => {
            return new Promise<void>((resolve, reject) => {
              for (const opt of options.value) {
                if ((opt as any).status === 'remove' || (opt as any).status === 'new') continue

                if (!opt.title.length) {
                  return reject(new Error(t('msg.selectOption.cantBeNull')))
                }
                if (vModel.value.uidt === UITypes.MultiSelect && opt.title.includes(',')) {
                  return reject(new Error(t('msg.selectOption.multiSelectCantHaveCommas')))
                }
                if (options.value.filter((el) => el.title === opt.title && (el as any).status !== 'remove').length > 1) {
                  return reject(new Error(t('msg.selectOption.cantHaveDuplicates')))
                }
              }
              resolve()
            })
          },
        },
      },
    },
  ],
}

// we use a correct syntax from async-validator but causes a type mismatch on antdv so we cast any
setAdditionalValidations({
  ...validators,
} as any)

const kanbanStackOption = computed(() => {
  if (isNewStack.value) {
    return renderedOptions.value[renderedOptions.value.length - 1]
  } else if (optionId.value) {
    return renderedOptions.value.find((o) => o.id === optionId.value)
  }
  return null
})

const getNextColor = () => {
  let tempColor = colors.value[0]
  if (options.value.length && options.value[options.value.length - 1].color) {
    const lastColor = colors.value.indexOf(options.value[options.value.length - 1].color)
    tempColor = colors.value[(lastColor + 1) % colors.value.length]
  }
  return tempColor
}

const addNewOption = () => {
  isAddingOption.value = true

  const tempOption = {
    title: '',
    color: getNextColor(),
    index: options.value.length,
    ...(isKanbanStack.value ? { status: 'new' } : {}),
  }
  options.value.push(tempOption as Option)

  if (isKanbanStack.value) {
    renderedOptions.value = options.value
  } else {
    isReverseLazyLoad.value = true

    loadedOptionAnchor.value = options.value.length - OPTIONS_PAGE_COUNT
    loadedOptionAnchor.value = Math.max(loadedOptionAnchor.value, 0)

    renderedOptions.value = options.value.slice(loadedOptionAnchor.value, options.value.length)
  }

  optionsWrapperDomRef.value!.scrollTop = optionsWrapperDomRef.value!.scrollHeight

  nextTick(() => {
    // Last child doesnt work for query selector
    setTimeout(() => {
      const doms = document.querySelectorAll(`.nc-col-option-select-option .nc-select-col-option-select-option`)
      const dom = doms[doms.length - 1] as HTMLInputElement

      if (dom) {
        dom.focus()
      }
    }, 150)

    optionsWrapperDomRef.value!.scrollTop = optionsWrapperDomRef.value!.scrollHeight
    isAddingOption.value = false
  })
}

// const optionsMagic = async () => {
//   await _optionsMagic(base, formState, getNextColor, options.value, renderedOptions.value)
// }

const syncOptions = (saveChanges: boolean = false, submit: boolean = false, payload?: Option) => {
  // set initial colOptions if not set
  vModel.value.colOptions = vModel.value.colOptions || {}
  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) => {
      const { status: _s, ...rest } = op
      return rest
    })

  if (saveChanges) {
    emit('saveChanges', submit, true, payload)
  }
}

const removeRenderedOption = (index: number) => {
  const renderedOption = renderedOptions.value[index]

  if (renderedOption.index === undefined || isNaN(renderedOption.index)) return

  const option = options.value[renderedOption.index]

  renderedOption.status = 'remove'
  option.status = 'remove'

  syncOptions()

  const optionId = renderedOptions.value[index]?.id

  const removedDefaultOption = defaultOption.value.find((o) => o.id === optionId)

  if (removedDefaultOption) {
    if (vModel.value.uidt === UITypes.SingleSelect) {
      savedDefaultOption.value = [removedDefaultOption]
      defaultOption.value = []
      vModel.value.cdf = null
    } else {
      savedDefaultOption.value = [...savedDefaultOption.value, removedDefaultOption]
      defaultOption.value = defaultOption.value.filter((o) => o.id !== optionId)
      vModel.value.cdf = defaultOption.value.map((o) => o.title).join(',')
    }
  }
}

const optionChanged = (changedElement: Option, saveChanges: boolean = false) => {
  const changedDefaultOptionIndex = defaultOption.value.findIndex((o) => {
    if (o.id !== undefined && changedElement.id !== undefined) {
      return o.id === changedElement.id
    } else {
      return o.index === changedElement.index
    }
  })

  if (changedDefaultOptionIndex !== -1) {
    if (vModel.value.uidt === UITypes.SingleSelect) {
      defaultOption.value[changedDefaultOptionIndex].title = changedElement.title
      vModel.value.cdf = changedElement.title
    } else {
      defaultOption.value[changedDefaultOptionIndex].title = changedElement.title
      vModel.value.cdf = defaultOption.value.map((o) => o.title).join(',')
    }
  }
  syncOptions(saveChanges)
}

const undoRemoveRenderedOption = (index: number) => {
  const renderedOption = renderedOptions.value[index]

  if (renderedOption.index === undefined || isNaN(renderedOption.index)) return

  const option = options.value[renderedOption.index]

  renderedOption.status = undefined
  option.status = undefined

  syncOptions()

  const optionId = renderedOptions.value[index]?.id

  const addedDefaultOption = savedDefaultOption.value.find((o) => o.id === optionId)

  if (addedDefaultOption) {
    if (vModel.value.uidt === UITypes.SingleSelect) {
      defaultOption.value = [addedDefaultOption]
      vModel.value.cdf = addedDefaultOption.title
      savedDefaultOption.value = []
    } else {
      defaultOption.value = [...defaultOption.value, addedDefaultOption]
      vModel.value.cdf = defaultOption.value.map((o) => o.title).join(',')
      savedDefaultOption.value = savedDefaultOption.value.filter((o) => o.id !== optionId)
    }
  }
}

// focus last created input
// watch(inputs, () => {
//   if (inputs.value?.$el) {
//     inputs.value.$el.focus()
//   }
// })

// Removes the Select Option from cdf if the option is removed
watch(vModel, (next) => {
  const cdfs = (next.cdf ?? '').toString().split(',')

  const valuesMap = (next.colOptions?.options ?? []).reduce((acc, c) => {
    acc[c.title.replace(/^'|'$/g, '')] = c
    return acc
  }, {})

  defaultOption.value = []

  const newCdf = cdfs
    .filter((c: string) => {
      if (valuesMap[c]) {
        defaultOption.value.push(valuesMap[c])
        return true
      }
      return false
    })
    .join(',')

  next.cdf = newCdf.length === 0 ? null : newCdf
})

const loadListDataReverse = async ($state: any) => {
  if (isAddingOption.value) return

  if (loadedOptionAnchor.value === 0) {
    $state.complete()
    return
  }
  $state.loading()

  loadedOptionAnchor.value -= OPTIONS_PAGE_COUNT
  loadedOptionAnchor.value = Math.max(loadedOptionAnchor.value, 0)

  renderedOptions.value = options.value.slice(loadedOptionAnchor.value, options.value.length)

  optionsWrapperDomRef.value!.scrollTop = optionsWrapperDomRef.value!.scrollTop + 100

  if (loadedOptionAnchor.value === 0) {
    $state.complete()
    return
  }
  $state.loaded()
}

const loadListData = async ($state: any) => {
  if (isAddingOption.value) return

  if (loadedOptionAnchor.value === options.value.length) {
    return $state.complete()
  }

  $state.loading()

  loadedOptionAnchor.value += OPTIONS_PAGE_COUNT
  loadedOptionAnchor.value = Math.min(loadedOptionAnchor.value, options.value.length)

  renderedOptions.value = options.value.slice(0, loadedOptionAnchor.value)

  if (loadedOptionAnchor.value === options.value.length) {
    return $state.complete()
  }

  $state.loaded()
}

onMounted(() => {
  if (!vModel.value.colOptions?.options) {
    vModel.value.colOptions = {
      options: [],
    }
  }

  isReverseLazyLoad.value = false

  options.value = vModel.value.colOptions.options

  let indexCounter = 0
  options.value = options.value.map((el) => {
    el.index = indexCounter++
    return el
  })

  if (isKanbanStack.value) {
    renderedOptions.value = options.value
  } else {
    loadedOptionAnchor.value = Math.min(loadedOptionAnchor.value, options.value.length)

    renderedOptions.value = [...options.value].slice(0, loadedOptionAnchor.value)
  }

  // Support for older options
  for (const op of options.value.filter((el) => el.order === null)) {
    op.title = op.title.replace(/^'/, '').replace(/'$/, '')
  }

  if (vModel.value.cdf && typeof vModel.value.cdf === 'string') {
    const fndDefaultOption = options.value.filter((el) => el.title === vModel.value.cdf)
    if (!fndDefaultOption.length) {
      vModel.value.cdf = vModel.value.cdf.replace(/^'/, '').replace(/'$/, '')
    }
  }

  const fndDefaultOption = options.value.filter((el) => el.title === vModel.value.cdf)
  if (fndDefaultOption.length) {
    defaultOption.value = vModel.value.uidt === UITypes.SingleSelect ? [fndDefaultOption[0]] : fndDefaultOption
  }
  if (isKanbanStack.value && isNewStack.value) {
    addNewOption()
  } else if (isKanbanStack.value) {
    nextTick(() => {
      setTimeout(() => {
        const doms = document.querySelectorAll(`.nc-col-option-select-option .nc-select-col-option-select-option`)
        const dom = doms[doms.length - 1] as HTMLInputElement

        if (dom) {
          dom.focus()
        }
      }, 150)
    })
  }
})

if (isKanbanStack.value) {
  onClickOutside(optionsWrapperDomRef, (e) => {
    if (!kanbanStackOption.value || (e.target as HTMLElement)?.closest(`.nc-select-option-color-picker`)) return

    const option = (column.value?.colOptions as SelectOptionsType)?.options?.find(
      (o) => o?.id && o.id === kanbanStackOption.value?.id,
    )

    if (option?.title !== kanbanStackOption.value?.title || option?.color !== kanbanStackOption.value?.color) {
      syncOptions(true, true, kanbanStackOption.value)
    } else {
      emit('saveChanges', true, false)
    }
  })
}
</script>

<template>
  <div class="w-full">
    <div
      ref="optionsWrapperDomRef"
      class="nc-col-option-select-option"
      :class="{
        'overflow-x-auto scrollbar-thin-dull rounded-lg': !isKanbanStack,
        'border-1 border-gray-200': renderedOptions.length && !isKanbanStack,
      }"
      :style="{
        maxHeight: props.fromTableExplorer ? 'calc(100vh - (var(--topbar-height) * 3.6) - 320px)' : 'calc(min(30vh, 250px))',
      }"
    >
      <template v-if="isKanbanStack">
        <div v-if="kanbanStackOption" class="flex items-center nc-select-option">
          <div class="flex items-center w-full">
            <NcDropdown
              v-model:visible="colorMenus[kanbanStackOption.index!]"
              :auto-close="false"
              overlay-class-name="nc-select-option-color-picker"
            >
              <div class="flex-none h-6 w-6 flex cursor-pointer mx-1">
                <div
                  class="h-6 w-6 rounded flex items-center"
                  :style="{
                    backgroundColor: kanbanStackOption.color,
                    color: tinycolor.isReadable(kanbanStackOption.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
                      ? '#fff'
                      : tinycolor.mostReadable(kanbanStackOption.color || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
                  }"
                >
                  <GeneralIcon icon="arrowDown" class="flex-none h-4 w-4 m-auto !text-current" />
                </div>
              </div>

              <template #overlay>
                <div>
                  <LazyGeneralAdvanceColorPicker
                    v-model="kanbanStackOption.color"
                    :is-open="colorMenus[kanbanStackOption.index!]"
                    @input="(el:string) => {
                      kanbanStackOption!.color = el
                      optionChanged(kanbanStackOption!)
                    }"
                  ></LazyGeneralAdvanceColorPicker>
                </div>
              </template>
            </NcDropdown>

            <a-input
              v-model:value="kanbanStackOption.title"
              placeholder="Enter option name..."
              class="caption !rounded-lg nc-select-col-option-select-option nc-kanban-stack-input !bg-transparent"
              data-testid="nc-kanban-stack-title-input"
              @keydown.enter.prevent.stop="syncOptions(true, true, kanbanStackOption!)"
              @change="() => {
                  kanbanStackOption!.status = undefined
                  optionChanged(kanbanStackOption!)
              }"
            />
          </div>

          <div
            v-if="isNewStack"
            class="ml-1 hover:!text-black-500 text-gray-500 cursor-pointer hover:bg-gray-200 py-1 px-1.5 rounded-md h-7 flex items-center"
            @click="emit('saveChanges', true, false)"
          >
            <component :is="iconMap.close" class="-mt-0.25 w-4 h-4" />
          </div>
        </div>
      </template>
      <template v-else>
        <InfiniteLoading v-if="isReverseLazyLoad" v-bind="$attrs" @infinite="loadListDataReverse">
          <template #spinner>
            <div class="flex flex-row w-full justify-center mt-2">
              <GeneralLoader />
            </div>
          </template>
          <template #complete>
            <span></span>
          </template>
        </InfiniteLoading>
        <Draggable :list="renderedOptions" item-key="id" handle=".nc-child-draggable-icon" @change="syncOptions">
          <template #item="{ element, index }">
            <div class="flex py-1 items-center nc-select-option hover:bg-gray-100 group">
              <div
                class="flex items-center w-full"
                :data-testid="`select-column-option-${index}`"
                :class="{ removed: element.status === 'remove' }"
              >
                <div
                  v-if="!isKanban"
                  class="nc-child-draggable-icon p-2 flex cursor-pointer"
                  :data-testid="`select-option-column-handle-icon-${element.title}`"
                >
                  <component :is="iconMap.dragVertical" small class="handle" />
                </div>

                <NcDropdown v-model:visible="colorMenus[index]" :auto-close="false">
                  <div class="flex-none h-6 w-6 flex cursor-pointer mx-1">
                    <div
                      class="h-6 w-6 rounded flex items-center"
                      :style="{
                        backgroundColor: element.color,
                        color: tinycolor.isReadable(element.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
                          ? '#fff'
                          : tinycolor.mostReadable(element.color || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
                      }"
                    >
                      <GeneralIcon icon="arrowDown" class="flex-none h-4 w-4 m-auto !text-current" />
                    </div>
                  </div>

                  <template #overlay>
                    <div>
                      <LazyGeneralAdvanceColorPicker
                        v-model="element.color"
                        :is-open="colorMenus[index]"
                        @input="(el:string) => {
                          element.color = el
                          optionChanged(element)
                        }"
                      ></LazyGeneralAdvanceColorPicker>
                    </div>
                  </template>
                </NcDropdown>

                <a-input
                  v-model:value="element.title"
                  class="caption !rounded-lg nc-select-col-option-select-option !bg-transparent"
                  :data-testid="`select-column-option-input-${index}`"
                  :disabled="element.status === 'remove'"
                  @keydown.enter.prevent="element.title?.trim() && addNewOption()"
                  @change="optionChanged(element)"
                />
              </div>

              <div
                v-if="element.status !== 'remove'"
                :data-testid="`select-column-option-remove-${index}`"
                class="mx-1 hover:!text-black-500 text-gray-500 cursor-pointer hover:bg-gray-200 py-1 px-1.5 rounded-md h-7 flex items-center invisible group-hover:visible"
                @click="removeRenderedOption(index)"
              >
                <component :is="iconMap.close" class="-mt-0.25 w-4 h-4" />
              </div>
              <div
                v-else
                :data-testid="`select-column-option-remove-undo-${index}`"
                class="mx-1 hover:!text-black-500 text-gray-500 cursor-pointer hover:bg-gray-200 py-1 px-1.5 rounded-md h-7 flex items-center invisible group-hover:visible"
                @click="undoRemoveRenderedOption(index)"
              >
                <MdiArrowULeftBottom
                  class="hover:!text-black-500 text-gray-500 cursor-pointer w-4 h-4"
                  @click="undoRemoveRenderedOption(index)"
                />
              </div>
            </div>
          </template>
        </Draggable>
        <InfiniteLoading v-if="!isReverseLazyLoad" v-bind="$attrs" @infinite="loadListData">
          <template #spinner>
            <div class="flex flex-row w-full justify-center mt-2">
              <GeneralLoader />
            </div>
          </template>
          <template #complete>
            <span></span>
          </template>
        </InfiniteLoading>
      </template>
    </div>

    <div
      v-if="validateInfos?.colOptions?.help?.[0]?.[0]"
      class="text-error text-[10px] mb-1 mt-2"
      :class="{
        'pl-1': isKanbanStack,
      }"
    >
      {{ validateInfos.colOptions.help[0][0] }}
    </div>
    <NcButton
      v-if="!isKanbanStack"
      type="secondary"
      class="w-full caption"
      :class="{
        'mt-2': renderedOptions.length,
      }"
      size="small"
      data-testid="nc-add-select-option-btn"
      @click="addNewOption()"
    >
      <div class="flex items-center">
        <component :is="iconMap.plus" />
        <span class="flex-auto">Add option</span>
      </div>
    </NcButton>
    <!-- <div v-if="isEeUI" class="w-full cursor-pointer" @click="optionsMagic()">
      <GeneralIcon icon="magic" :class="{ 'nc-animation-pulse': loadMagic }" class="w-full flex mt-2 text-orange-400" />
    </div> -->
  </div>
</template>

<style scoped>
.removed {
  position: relative;
}
.removed:after {
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  background: #ccc;
  content: '';
  width: calc(100% + 5px);
  display: block;
}

:deep(.nc-select-col-option-select-option) {
  @apply !truncate;

  &:not(.nc-kanban-stack-input):not(:focus):hover {
    @apply !border-transparent;
  }

  &:not(.nc-kanban-stack-input):not(:focus) {
    @apply !border-transparent;
  }

  &:focus,
  &:focus-visible {
    @apply !border-[var(--ant-primary-color-hover)];
  }
}
</style>