Manager

Back Back Up Advanced Editor

<template>
  <BaseModal :show="modalActive" @open="setData">
    <template #header>
      <div class="flex justify-between w-full">
        {{ modalStore.title }}

<div
        class="
          z-0
          flex
          justify-end
          p-4
          border-t border-solid border-gray-light border-modal-bg
        "
      >
        <BaseButton
          class="mr-3"
          type="button"
          variant="primary-outline"
          @click="closeCustomFieldModal"
        >
          {{ $t('general.cancel') }}
        </BaseButton>

<BaseButton
          variant="primary"
          :loading="isSaving"
          :disabled="isSaving"
          type="submit"
        >
          <template #left="slotProps">
            <BaseIcon
              v-if="!isSaving"
              :class="slotProps.class"
              name="SaveIcon"
            />
          </template>
          {{
            !customFieldStore.isEdit ? $t('general.save') : $t('general.update')
          }}
        </BaseButton>
      </div>
    </form>
  </BaseModal>
</template>

const modalStore = useModalStore()
const customFieldStore = useCustomFieldStore()
const { t } = useI18n()

let isSaving = ref(false)

const modelTypes = reactive([
  {label: t('settings.custom_fields.model_type.customer'), value: 'Customer'},
  {label: t('settings.custom_fields.model_type.invoice'), value: 'Invoice'},
  {label: t('settings.custom_fields.model_type.estimate'), value: 'Estimate'},
  {label: t('settings.custom_fields.model_type.expense'), value: 'Expense'},
  {label: t('settings.custom_fields.model_type.payment'), value: 'Payment'}
])

const dataTypes = reactive([
  { label: 'Text', value: 'Input' },
  { label: 'Textarea', value: 'TextArea' },
  { label: 'Phone', value: 'Phone' },
  { label: 'URL', value: 'Url' },
  { label: 'Number', value: 'Number' },
  { label: 'Select Field', value: 'Dropdown' },
  { label: 'Switch Toggle', value: 'Switch' },
  { label: 'Date', value: 'Date' },
  { label: 'Time', value: 'Time' },
  { label: 'Date & Time', value: 'DateTime' },
])

let selectedType = ref(dataTypes[0])

const modalActive = computed(() => {
  return modalStore.active && modalStore.componentName === 'CustomFieldModal'
})

const isSwitchTypeSelected = computed(
  () => selectedType.value && selectedType.value.label === 'Switch Toggle'
)

const isDropdownSelected = computed(
  () => selectedType.value && selectedType.value.label === 'Select Field'
)

const defaultValueComponent = computed(() => {
  if (customFieldStore.currentCustomField.type) {
    return defineAsyncComponent(() =>
      import(
        `../../custom-fields/types/${customFieldStore.currentCustomField.type}Type.vue`
      )
    )
  }

return false
})

const isRequiredField = computed({
  get: () => customFieldStore.currentCustomField.is_required === 1,
  set: (value) => {
    const intVal = value ? 1 : 0
    customFieldStore.currentCustomField.is_required = intVal
  },
})

const rules = computed(() => {
  return {
    currentCustomField: {
      name: {
        required: helpers.withMessage(t('validation.required'), required),
      },
      label: {
        required: helpers.withMessage(t('validation.required'), required),
      },
      model_type: {
        required: helpers.withMessage(t('validation.required'), required),
      },
      order: {
        required: helpers.withMessage(t('validation.required'), required),
        numeric: helpers.withMessage(t('validation.numbers_only'), numeric),
      },
      type: {
        required: helpers.withMessage(t('validation.required'), required),
      },
    },
  }
})

const v$ = useVuelidate(
  rules,
  computed(() => customFieldStore)
)

function setData() {
  if (customFieldStore.isEdit) {
    selectedType.value = dataTypes.find(
      (type) => type.value == customFieldStore.currentCustomField.type
    )
  } else {
    customFieldStore.currentCustomField.model_type = modelTypes[0]

customFieldStore.currentCustomField.type = dataTypes[0].value
    selectedType.value = dataTypes[0]
  }
}

async function submitCustomFieldData() {
  v$.value.currentCustomField.$touch()

if (v$.value.currentCustomField.$invalid) {
    return true
  }

isSaving.value = true

let data = {
    ...customFieldStore.currentCustomField,
  }

if (customFieldStore.currentCustomField.options) {
    data.options = customFieldStore.currentCustomField.options.map(
      (option) => option.name
    )
  }

if (data.type == 'Time' && typeof data.default_answer == 'object') {
    let HH =
      data && data.default_answer && data.default_answer.HH
        ? data.default_answer.HH
        : null
    let mm =
      data && data.default_answer && data.default_answer.mm
        ? data.default_answer.mm
        : null
    let ss =
      data && data.default_answer && data.default_answer.ss
        ? data.default_answer.ss
        : null

data.default_answer = `${HH}:${mm}`
  }

const action = customFieldStore.isEdit
    ? customFieldStore.updateCustomField
    : customFieldStore.addCustomField

await action(data)

isSaving.value = false

modalStore.refreshData ? modalStore.refreshData() : ''

closeCustomFieldModal()
}

function addNewOption(option) {
  customFieldStore.currentCustomField.options = [
    { name: option },
    ...customFieldStore.currentCustomField.options,
  ]
}

function removeOption(index) {
  if (customFieldStore.isEdit && customFieldStore.currentCustomField.in_use) {
    return
  }

const option = customFieldStore.currentCustomField.options[index]

if (option.name === customFieldStore.currentCustomField.default_answer) {
    customFieldStore.currentCustomField.default_answer = null
  }

customFieldStore.currentCustomField.options.splice(index, 1)
}

function onChangeReset() {
  customFieldStore.$patch((state) => {
    state.currentCustomField.default_answer = null
    state.currentCustomField.is_required = false
    state.currentCustomField.placeholder = null
    state.currentCustomField.options = []
  })

v$.value.$reset()
}

function onSelectedTypeChange(data) {
  customFieldStore.currentCustomField.type = data.value
}

function closeCustomFieldModal() {
  modalStore.closeModal()

setTimeout(() => {
    customFieldStore.resetCurrentCustomField()
    v$.value.$reset()
  }, 300)
}
</script>