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

<script setup lang="ts">
import type { ColumnType, UITypes } from 'nocodb-sdk'
import { AllowedColumnTypesForQrAndBarcodes, isVirtualCol } from 'nocodb-sdk'

const props = defineProps<{
  modelValue: any
}>()

const emit = defineEmits(['update:modelValue'])

const { t } = useI18n()

const { fields, metaColumnById } = useViewColumnsOrThrow()

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

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

const columnsAllowedAsQrValue = computed<ColumnType[]>(() => {
  return (
    fields.value
      ?.filter(
        (el) =>
          el.fk_column_id && AllowedColumnTypesForQrAndBarcodes.includes(metaColumnById.value[el.fk_column_id].uidt as UITypes),
      )
      .map((field) => {
        return metaColumnById.value[field.fk_column_id!]
      }) || []
  )
})

onMounted(() => {
  // set default value
  vModel.value.fk_qr_value_column_id =
    (column?.value?.colOptions as Record<string, any>)?.fk_qr_value_column_id ||
    (!isEdit.value ? columnsAllowedAsQrValue.value?.[0]?.id : null)
})

setAdditionalValidations({
  fk_qr_value_column_id: [{ required: true, message: t('general.required') }],
})

const cellIcon = (column: ColumnType) =>
  h(isVirtualCol(column) ? resolveComponent('SmartsheetHeaderVirtualCellIcon') : resolveComponent('SmartsheetHeaderCellIcon'), {
    columnMeta: column,
  })
</script>

<template>
  <div class="flex flex-col gap-2">
    <a-form-item
      class="flex nc-qr-code-value-column-select"
      :label="`${$t('placeholder.value')} ${t('objects.field').toLowerCase()}`"
      v-bind="validateInfos.fk_qr_value_column_id"
    >
      <a-select
        v-model:value="vModel.fk_qr_value_column_id"
        :placeholder="$t('placeholder.selectAColumnForTheQRCodeValue')"
        @click.stop
      >
        <template #suffixIcon>
          <GeneralIcon icon="arrowDown" class="text-gray-700" />
        </template>

        <a-select-option v-for="(option, index) of columnsAllowedAsQrValue" :key="index" :value="option.id">
          <div class="flex gap-2 w-full truncate items-center" :data-testid="`nc-qr-${option.title}`">
            <div class="inline-flex items-center gap-2 flex-1 truncate">
              <component :is="cellIcon(option)" :column-meta="option" class="!mx-0 flex-none w-4 h-4" />
              <NcTooltip show-on-truncate-only class="flex-1 truncate">
                <template #title>{{ option.title }}</template>
                {{ option.title }}
              </NcTooltip>
            </div>

            <component
              :is="iconMap.check"
              v-if="vModel.fk_qr_value_column_id === option.id"
              id="nc-selected-item-icon"
              class="text-primary w-4 h-4"
            />
          </div>
        </a-select-option>
      </a-select>
    </a-form-item>
  </div>
</template>