bramw_baserow/web-frontend/modules/database/components/field/ChooseSingleSelectField.vue

<template>
  <div>
    <slot
      v-if="canCreateSingleSelectField || singleSelectFields.length > 0"
    ></slot>
    <div v-else class="warning">
      {{ $t('chooseSingleSelectField.warningWhenNothingToChooseOrCreate') }}
    </div>

    <RadioGroup
      :model-value="value"
      vertical-layout
      :options="singleSelectFieldsOptions"
      :disabled="loading || readOnly"
      @input="$emit('input', $event)"
    >
    </RadioGroup>

    <div v-if="canCreateSingleSelectField" class="margin-top-2">
      <span ref="createFieldContextLink">
        <ButtonText
          icon="iconoir-plus"
          class="choose-select-field__link margin-right-auto"
          @click="$refs.createFieldContext.toggle($refs.createFieldContextLink)"
        >
          {{ $t('chooseSingleSelectField.addSelectField') }}
        </ButtonText></span
      >

      <CreateFieldContext
        ref="createFieldContext"
        :table="table"
        :view="view"
        :forced-type="singleSelectFieldType"
        :all-fields-in-table="fields"
        :database="database"
        @field-created="$event.callback()"
      ></CreateFieldContext>
    </div>
  </div>
</template>

<script>
import { SingleSelectFieldType } from '@baserow/modules/database/fieldTypes'
import CreateFieldContext from '@baserow/modules/database/components/field/CreateFieldContext'

export default {
  name: 'ChooseSingleSelectField',
  components: { CreateFieldContext },
  props: {
    table: {
      type: Object,
      required: true,
    },
    database: {
      type: Object,
      required: true,
    },
    view: {
      type: Object,
      required: true,
    },
    fields: {
      type: Array,
      required: true,
    },
    readOnly: {
      type: Boolean,
      required: false,
      default: false,
    },
    value: {
      required: true,
      validator() {
        return true
      },
    },
    loading: {
      type: Boolean,
      required: false,
      default: false,
    },
  },

  computed: {
    canCreateSingleSelectField() {
      return (
        !this.readOnly &&
        this.$hasPermission(
          'database.table.create_field',
          this.table,
          this.database.workspace.id
        )
      )
    },
    singleSelectFieldType() {
      return SingleSelectFieldType.getType()
    },
    singleSelectFields() {
      return this.fields.filter(
        (field) => field.type === this.singleSelectFieldType
      )
    },
    singleSelectFieldsOptions() {
      return this.singleSelectFields.map((singleSelectField) => {
        return {
          label: singleSelectField.name,
          value: singleSelectField.id,
        }
      })
    },
  },
  watch: {
    loading(isLoading) {
      if (isLoading)
        this.singleSelectFieldsOptions.find(
          (option) => option.value === this.value
        ).loading = true
    },
  },
}
</script>