v6 update

resources/scripts/admin/components/custom-fields/CreateCustomFields.vue

@@ -0,0 +1,118 @@
+<template>
+  <div
+    v-if="
+      store[storeProp] && store[storeProp].customFields.length > 0 && !isLoading
+    "
+  >
+    <BaseInputGrid :layout="gridLayout">
+      <SingleField
+        v-for="(field, index) in store[storeProp].customFields"
+        :key="field.id"
+        :custom-field-scope="customFieldScope"
+        :store="store"
+        :store-prop="storeProp"
+        :index="index"
+        :field="field"
+      />
+    </BaseInputGrid>
+  </div>
+</template>
+
+<script setup>
+import moment from 'moment'
+import lodash from 'lodash'
+import { useCustomFieldStore } from '@/scripts/admin/stores/custom-field'
+import { watch } from 'vue'
+import SingleField from './CreateCustomFieldsSingle.vue'
+
+const customFieldStore = useCustomFieldStore()
+
+const props = defineProps({
+  store: {
+    type: Object,
+    required: true,
+  },
+  storeProp: {
+    type: String,
+    required: true,
+  },
+  isEdit: {
+    type: Boolean,
+    default: false,
+  },
+  type: {
+    type: String,
+    default: null,
+  },
+  gridLayout: {
+    type: String,
+    default: 'two-column',
+  },
+  isLoading: {
+    type: Boolean,
+    default: null,
+  },
+  customFieldScope: {
+    type: String,
+    required: true,
+  },
+})
+
+getInitialCustomFields()
+
+function mergeExistingValues() {
+  if (props.isEdit) {
+    props.store[props.storeProp].fields.forEach((field) => {
+      const existingIndex = props.store[props.storeProp].customFields.findIndex(
+        (f) => f.id === field.custom_field_id
+      )
+
+      if (existingIndex > -1) {
+        let value = field.default_answer
+
+        if (value && field.custom_field.type === 'DateTime') {
+          value = moment(field.default_answer, 'YYYY-MM-DD HH:mm:ss').format(
+            'YYYY-MM-DD HH:mm'
+          )
+        }
+
+        props.store[props.storeProp].customFields[existingIndex] = {
+          ...field,
+          id: field.custom_field_id,
+          value: value,
+          label: field.custom_field.label,
+          options: field.custom_field.options,
+          is_required: field.custom_field.is_required,
+          placeholder: field.custom_field.placeholder,
+          order: field.custom_field.order,
+        }
+      }
+    })
+  }
+}
+
+async function getInitialCustomFields() {
+  const res = await customFieldStore.fetchCustomFields({
+    type: props.type,
+    limit: 'all',
+  })
+
+  let data = res.data.data
+
+  data.map((d) => (d.value = d.default_answer))
+
+  props.store[props.storeProp].customFields = lodash.sortBy(
+    data,
+    (_cf) => _cf.order
+  )
+
+  mergeExistingValues()
+}
+
+watch(
+  () => props.store[props.storeProp].fields,
+  (val) => {
+    mergeExistingValues()
+  }
+)
+</script>

resources/scripts/admin/components/custom-fields/CreateCustomFieldsSingle.vue

@@ -0,0 +1,72 @@
+<template>
+  <BaseInputGroup
+    :label="field.label"
+    :required="field.is_required ? true : false"
+    :error="v$.value.$error && v$.value.$errors[0].$message"
+  >
+    <component
+      :is="getTypeComponent"
+      v-model="field.value"
+      :options="field.options"
+      :invalid="v$.value.$error"
+      :placeholder="field.placeholder"
+    />
+  </BaseInputGroup>
+</template>
+
+<script setup>
+import { defineAsyncComponent, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { helpers, requiredIf } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+
+const props = defineProps({
+  field: {
+    type: Object,
+    required: true,
+  },
+  customFieldScope: {
+    type: String,
+    required: true,
+  },
+  index: {
+    type: Number,
+    required: true,
+  },
+  store: {
+    type: Object,
+    required: true,
+  },
+  storeProp: {
+    type: String,
+    required: true,
+  },
+})
+
+const { t } = useI18n()
+
+const rules = {
+  value: {
+    required: helpers.withMessage(
+      t('validation.required'),
+      requiredIf(props.field.is_required)
+    ),
+  },
+}
+
+const v$ = useVuelidate(
+  rules,
+  computed(() => props.field),
+  { $scope: props.customFieldScope }
+)
+
+const getTypeComponent = computed(() => {
+  if (props.field.type) {
+    return defineAsyncComponent(() =>
+      import(`./types/${props.field.type}Type.vue`)
+    )
+  }
+
+  return false
+})
+</script>

resources/scripts/admin/components/custom-fields/types/DateTimeType.vue

@@ -0,0 +1,24 @@
+<template>
+  <BaseDatePicker v-model="date" enable-time />
+</template>
+
+<script setup>
+import moment from 'moment'
+import { computed } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: moment().format('YYYY-MM-DD hh:MM'),
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const date = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value)
+  },
+})
+</script>

resources/scripts/admin/components/custom-fields/types/DateType.vue

@@ -0,0 +1,24 @@
+<template>
+  <BaseDatePicker v-model="date" />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import moment from 'moment'
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Date],
+    default: moment().format('YYYY-MM-DD'),
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const date = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value)
+  },
+})
+</script>

resources/scripts/admin/components/custom-fields/types/DropdownType.vue

@@ -0,0 +1,45 @@
+<template>
+  <BaseMultiselect
+    v-model="inputValue"
+    :options="options"
+    :label="label"
+    :value-prop="valueProp"
+    :object="object"
+  />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Object, Number],
+    default: null,
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  valueProp: {
+    type: String,
+    default: 'name',
+  },
+  label: {
+    type: String,
+    default: 'name',
+  },
+  object: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const inputValue = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value)
+  },
+})
+</script>

resources/scripts/admin/components/custom-fields/types/InputType.vue

@@ -0,0 +1,23 @@
+<template>
+  <BaseInput v-model="inputValue" type="text" />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: null,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const inputValue = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value)
+  },
+})
+</script>

resources/scripts/admin/components/custom-fields/types/NumberType.vue

@@ -0,0 +1,23 @@
+<template>
+  <BaseInput v-model="inputValue" type="number" />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: null,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const inputValue = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value)
+  },
+})
+</script>

resources/scripts/admin/components/custom-fields/types/PhoneType.vue

@@ -0,0 +1,23 @@
+<template>
+  <BaseInput v-model="inputValue" type="tel" />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: null,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const inputValue = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value)
+  },
+})
+</script>

resources/scripts/admin/components/custom-fields/types/SwitchType.vue

@@ -0,0 +1,25 @@
+<template>
+  <BaseSwitch v-model="inputValue" />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number, Boolean],
+    default: null,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const inputValue = computed({
+  get: () => props.modelValue === 1,
+  set: (value) => {
+    const intVal = value ? 1 : 0
+
+    emit('update:modelValue', intVal)
+  },
+})
+</script>

resources/scripts/admin/components/custom-fields/types/TextAreaType.vue

@@ -0,0 +1,31 @@
+<template>
+  <BaseTextarea v-model="inputValue" :rows="rows" :name="inputName" />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: null,
+  },
+  rows: {
+    type: String,
+    default: '2',
+  },
+  inputName: {
+    type: String,
+    default: 'description',
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const inputValue = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value)
+  },
+})
+</script>

resources/scripts/admin/components/custom-fields/types/TimeType.vue

@@ -0,0 +1,24 @@
+<template>
+  <BaseTimePicker v-model="date" />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import moment from 'moment'
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Date, Object],
+    default: moment().format('YYYY-MM-DD'),
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const date = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value)
+  },
+})
+</script>

resources/scripts/admin/components/custom-fields/types/UrlType.vue

@@ -0,0 +1,23 @@
+<template>
+  <BaseInput v-model="inputValue" type="url" />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: null,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const inputValue = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value)
+  },
+})
+</script>