EmailFormField.vue
1 month ago
EmployeeFormField.vue
1 month ago
FirstNameFormField.vue
1 month ago
LastNameFormField.vue
1 month ago
LocationFormField.vue
1 month ago
PhoneFormField.vue
1 month ago
ServiceFormField.vue
1 day ago
ServiceFormField.vue
224 lines
| 1 | <template> |
| 2 | <el-form-item class="am-fs__init-form__item" prop="service" label-position="top"> |
| 3 | <template #label> |
| 4 | <span class="am-fs__init-form__label"> |
| 5 | {{ `${labelsDisplay('service_colon')}:` }} |
| 6 | </span> |
| 7 | </template> |
| 8 | <AmAdvancedSelect |
| 9 | v-model="formData.service" |
| 10 | :options="categoryOptions" |
| 11 | :props-data="advSelectProps" |
| 12 | :filterable="amCustomize[pageRenderKey].initStep.options.service.filterable" |
| 13 | :placeholder="labelsDisplay('select_service')" |
| 14 | :category-name="labelsDisplay('dropdown_category_heading')" |
| 15 | :sub-category-name="labelsDisplay('dropdown_items_heading')" |
| 16 | :empty-state-string="labelsDisplay('dropdown_empty')" |
| 17 | :multiple-prices=" |
| 18 | (amCustomize?.[pageRenderKey]?.initStep?.options?.multiplePrices?.visibility ?? false) |
| 19 | ? multipleServicePricesOptions |
| 20 | : {} |
| 21 | " |
| 22 | :multiple-prices-label="labelsDisplay('from')" |
| 23 | @change="changeService" |
| 24 | ></AmAdvancedSelect> |
| 25 | </el-form-item> |
| 26 | </template> |
| 27 | |
| 28 | <script setup> |
| 29 | import AmAdvancedSelect from '../../../_components/advanced-select/AmAdvancedSelect.vue' |
| 30 | import { computed, inject, reactive, ref } from 'vue' |
| 31 | import { useReactiveCustomize } from '../../../../assets/js/admin/useReactiveCustomize.js' |
| 32 | |
| 33 | let langKey = inject('langKey') |
| 34 | let amLabels = inject('labels') |
| 35 | |
| 36 | let pageRenderKey = inject('pageRenderKey') |
| 37 | const { amCustomize } = useReactiveCustomize() |
| 38 | |
| 39 | // * Label computed function |
| 40 | function labelsDisplay(label) { |
| 41 | let computedLabel = computed(() => { |
| 42 | return amCustomize.value[pageRenderKey.value].initStep.translations && |
| 43 | amCustomize.value[pageRenderKey.value].initStep.translations[label] && |
| 44 | amCustomize.value[pageRenderKey.value].initStep.translations[label][langKey.value] |
| 45 | ? amCustomize.value[pageRenderKey.value].initStep.translations[label][langKey.value] |
| 46 | : amLabels[label] |
| 47 | }) |
| 48 | |
| 49 | return computedLabel.value |
| 50 | } |
| 51 | |
| 52 | // * Sidebar steps |
| 53 | let { sidebarDataCollector } = inject('sidebarStepsFunctions', { |
| 54 | sidebarDataCollector: () => {}, |
| 55 | }) |
| 56 | |
| 57 | // * Form field data |
| 58 | let formData = inject('formData') |
| 59 | |
| 60 | /** |
| 61 | * * Category - Service Block |
| 62 | */ |
| 63 | // * Service select props |
| 64 | let advSelectProps = reactive({ |
| 65 | expandTrigger: 'hover', |
| 66 | multiple: false, |
| 67 | checkStrictly: false, |
| 68 | emitPath: true, |
| 69 | lazy: false, |
| 70 | value: 'id', |
| 71 | label: 'name', |
| 72 | children: 'serviceList', |
| 73 | disabled: 'disabled', |
| 74 | leaf: 'leaf', |
| 75 | }) |
| 76 | |
| 77 | // * Set Category Options from entities |
| 78 | let categoryOptions = ref([ |
| 79 | { |
| 80 | id: 1, |
| 81 | name: 'Category 1', |
| 82 | serviceList: [ |
| 83 | { |
| 84 | id: 10, |
| 85 | name: 'Service 11', |
| 86 | price: 125, |
| 87 | }, |
| 88 | { |
| 89 | id: 11, |
| 90 | name: 'Service 12', |
| 91 | price: 125, |
| 92 | }, |
| 93 | { |
| 94 | id: 12, |
| 95 | name: 'Service 13', |
| 96 | price: 125, |
| 97 | }, |
| 98 | ], |
| 99 | }, |
| 100 | { |
| 101 | id: 2, |
| 102 | name: 'Category 2', |
| 103 | serviceList: [ |
| 104 | { |
| 105 | id: 10, |
| 106 | name: 'Service 21', |
| 107 | price: 125, |
| 108 | }, |
| 109 | { |
| 110 | id: 11, |
| 111 | name: 'Service 22', |
| 112 | price: 125, |
| 113 | }, |
| 114 | { |
| 115 | id: 12, |
| 116 | name: 'Service 23', |
| 117 | price: 125, |
| 118 | }, |
| 119 | ], |
| 120 | }, |
| 121 | { |
| 122 | id: 3, |
| 123 | name: 'Category 3', |
| 124 | serviceList: [ |
| 125 | { |
| 126 | id: 10, |
| 127 | name: 'Service 31', |
| 128 | price: 125, |
| 129 | }, |
| 130 | { |
| 131 | id: 11, |
| 132 | name: 'Service 32', |
| 133 | price: 125, |
| 134 | }, |
| 135 | { |
| 136 | id: 12, |
| 137 | name: 'Service 33', |
| 138 | price: 125, |
| 139 | }, |
| 140 | ], |
| 141 | }, |
| 142 | { |
| 143 | id: 4, |
| 144 | name: 'Category 4', |
| 145 | serviceList: [ |
| 146 | { |
| 147 | id: 10, |
| 148 | name: 'Service 41', |
| 149 | price: 125, |
| 150 | }, |
| 151 | { |
| 152 | id: 11, |
| 153 | name: 'Service 42', |
| 154 | price: 125, |
| 155 | }, |
| 156 | { |
| 157 | id: 12, |
| 158 | name: 'Service 43', |
| 159 | price: 125, |
| 160 | }, |
| 161 | ], |
| 162 | }, |
| 163 | { |
| 164 | id: 5, |
| 165 | name: 'Category 5', |
| 166 | serviceList: [ |
| 167 | { |
| 168 | id: 10, |
| 169 | name: 'Service 51', |
| 170 | price: 125, |
| 171 | }, |
| 172 | { |
| 173 | id: 11, |
| 174 | name: 'Service 52', |
| 175 | price: 125, |
| 176 | }, |
| 177 | { |
| 178 | id: 12, |
| 179 | name: 'Service 53', |
| 180 | price: 125, |
| 181 | }, |
| 182 | ], |
| 183 | }, |
| 184 | ]) |
| 185 | |
| 186 | let multipleServicePricesOptions = computed(() => { |
| 187 | let obj = {} |
| 188 | categoryOptions.value.forEach((category) => { |
| 189 | category.serviceList.forEach((service) => { |
| 190 | obj[service.id] = true |
| 191 | }) |
| 192 | }) |
| 193 | |
| 194 | return obj |
| 195 | }) |
| 196 | |
| 197 | /** |
| 198 | * Change Service function |
| 199 | * @param val |
| 200 | */ |
| 201 | let changeService = (val) => { |
| 202 | let serviceData = reactive({ |
| 203 | reference: 'service', |
| 204 | // position will depends on fields order |
| 205 | position: 0, |
| 206 | value: '', |
| 207 | }) |
| 208 | |
| 209 | if (Array.isArray(val)) { |
| 210 | serviceData.value = categoryOptions.value |
| 211 | .find((item) => item.id === val[0]) |
| 212 | .serviceList.find((item) => item.id === val[1]).name |
| 213 | } |
| 214 | |
| 215 | sidebarDataCollector(serviceData) |
| 216 | } |
| 217 | </script> |
| 218 | |
| 219 | <script> |
| 220 | export default { |
| 221 | name: 'ServiceFormField', |
| 222 | } |
| 223 | </script> |
| 224 |