ameliabooking
/
v3
/
src
/
views
/
admin
/
customize
/
settings
/
segments
/
CustomizationOptions.vue
CustomizationLabels.vue
2 years ago
CustomizationOptions.vue
1 year ago
CustomizationOrder.vue
2 years ago
CustomizationOptions.vue
278 lines
| 1 | <template> |
| 2 | <div class="am-cs-options"> |
| 3 | <template |
| 4 | v-for="(option, index) in amCustomize[pageRenderKey][stepKey].options" |
| 5 | :key="option.name" |
| 6 | > |
| 7 | <div |
| 8 | v-if="optionsVisibility(index)" |
| 9 | class="am-cs-options__item" |
| 10 | > |
| 11 | <div class="am-cs-options__item-header"> |
| 12 | {{ option.name }} |
| 13 | </div> |
| 14 | |
| 15 | <!-- Required --> |
| 16 | <div |
| 17 | v-if="Object.keys(option).filter(item => item === 'required').length" |
| 18 | class="am-cs-options__item-content" |
| 19 | > |
| 20 | <span class="am-cs-options__item-content__heading"> |
| 21 | {{amLabels.mandatory_field}} |
| 22 | </span> |
| 23 | <AmSwitch |
| 24 | v-model="option.required" |
| 25 | @change="requiredChange(option.name)" |
| 26 | /> |
| 27 | </div> |
| 28 | |
| 29 | <!-- Visibility --> |
| 30 | <div |
| 31 | v-if="Object.keys(option).filter(item => item === 'visibility').length" |
| 32 | class="am-cs-options__item-content" |
| 33 | > |
| 34 | <span class="am-cs-options__item-content__heading"> |
| 35 | {{ amLabels.display_field }} |
| 36 | </span> |
| 37 | <AmSwitch |
| 38 | v-model="option.visibility" |
| 39 | :disabled="option.required" |
| 40 | /> |
| 41 | </div> |
| 42 | |
| 43 | <!-- Filterable --> |
| 44 | <div |
| 45 | v-if="Object.keys(option).filter(item => item === 'filterable').length" |
| 46 | class="am-cs-options__item-content" |
| 47 | > |
| 48 | <span class="am-cs-options__item-content__heading"> |
| 49 | {{ amLabels.filterable_field }} |
| 50 | </span> |
| 51 | <AmSwitch |
| 52 | v-model="option.filterable" |
| 53 | /> |
| 54 | </div> |
| 55 | |
| 56 | <!-- Button Type --> |
| 57 | <div |
| 58 | v-if="Object.keys(option).filter(item => item === 'buttonType').length" |
| 59 | class="am-cs-options__item-content" |
| 60 | > |
| 61 | <AmRadioGroup |
| 62 | v-model="option.buttonType" |
| 63 | class="am-cs-options__radio" |
| 64 | > |
| 65 | <AmRadio |
| 66 | v-for="type in option.typeOptions" |
| 67 | :key="type" |
| 68 | :label="type" |
| 69 | :value="type" |
| 70 | class="am-cs-options__radio-item" |
| 71 | :class="{'is-active': option.buttonType === type}" |
| 72 | @click="option.buttonType = type" |
| 73 | > |
| 74 | <div class="am-cs-options__radio-item__inner"> |
| 75 | <AmButton :type="type" size="small"> |
| 76 | {{ btnTypeStrings[type] }} |
| 77 | </AmButton> |
| 78 | </div> |
| 79 | </AmRadio> |
| 80 | </AmRadioGroup> |
| 81 | </div> |
| 82 | </div> |
| 83 | </template> |
| 84 | </div> |
| 85 | </template> |
| 86 | |
| 87 | <script setup> |
| 88 | import AmSwitch from '../../../../_components/switch/AmSwitch.vue' |
| 89 | import AmRadioGroup from '../../../../_components/radio/AmRadioGroup.vue' |
| 90 | import AmRadio from '../../../../_components/radio/AmRadio.vue' |
| 91 | import AmButton from '../../../../_components/button/AmButton.vue' |
| 92 | import { |
| 93 | basicOptionsTreatment, |
| 94 | starterOptionsTreatment, |
| 95 | liteOptionsTreatment |
| 96 | } from '../../../../../assets/js/admin/labelsAndOptionsTreatment.js' |
| 97 | |
| 98 | // * Import from Vue |
| 99 | import { |
| 100 | computed, |
| 101 | inject, |
| 102 | ref |
| 103 | } from 'vue' |
| 104 | import {settings} from "../../../../../plugins/settings"; |
| 105 | |
| 106 | // * Plugin Licence |
| 107 | let licence = inject('licence') |
| 108 | |
| 109 | // * Labels |
| 110 | let amLabels = inject('labels') |
| 111 | |
| 112 | let { goBackPath, parentPath } = inject('sidebarFunctionality', { |
| 113 | goBackPath: ref('menu') |
| 114 | }) |
| 115 | |
| 116 | goBackPath.value = parentPath.value |
| 117 | |
| 118 | let stepName = inject('stepName') |
| 119 | let subStepName = inject('subStepName') |
| 120 | let pageRenderKey = inject('pageRenderKey') |
| 121 | let amCustomize = inject('customize') |
| 122 | |
| 123 | let stepKey = ref('') |
| 124 | if (subStepName.value) { |
| 125 | stepKey.value = subStepName.value |
| 126 | } else if (parentPath.value === 'sidebar') { |
| 127 | stepKey.value = 'sidebar' |
| 128 | } else { |
| 129 | stepKey.value = stepName.value |
| 130 | } |
| 131 | |
| 132 | let btnTypeStrings = ref({ |
| 133 | filled: amLabels.sb_radio_filled, |
| 134 | plain: amLabels.sb_radio_plain, |
| 135 | text: amLabels.sb_radio_text, |
| 136 | }) |
| 137 | |
| 138 | let obj = amCustomize.value[pageRenderKey.value][stepKey.value].options |
| 139 | let objKeys = Object.keys(obj) |
| 140 | |
| 141 | function requiredChange (val) { |
| 142 | objKeys.forEach((item) => { |
| 143 | if(obj[item].name === val && obj[item].required && 'visibility' in obj[item]) { |
| 144 | obj[item].visibility = true |
| 145 | } |
| 146 | }) |
| 147 | } |
| 148 | |
| 149 | // * License affection |
| 150 | let optionsTreatment = computed(() => { |
| 151 | let obj = {} |
| 152 | |
| 153 | if (licence.isLite) { |
| 154 | obj = liteOptionsTreatment |
| 155 | } else if (licence.isStarter) { |
| 156 | obj = starterOptionsTreatment |
| 157 | } else if (licence.isBasic) { |
| 158 | obj = basicOptionsTreatment |
| 159 | } |
| 160 | |
| 161 | return obj |
| 162 | }) |
| 163 | |
| 164 | function optionsVisibility (blockKey) { |
| 165 | return !(!!(blockKey |
| 166 | && pageRenderKey.value in optionsTreatment.value |
| 167 | && stepKey.value in optionsTreatment.value[pageRenderKey.value]) |
| 168 | && optionsTreatment.value[pageRenderKey.value][stepKey.value].indexOf(blockKey) !== -1) |
| 169 | && (obj[blockKey].name !== 'Coupon Input Field' || settings.payments.coupons) |
| 170 | } |
| 171 | </script> |
| 172 | |
| 173 | <script> |
| 174 | export default { |
| 175 | name: "CustomizationOptions" |
| 176 | } |
| 177 | </script> |
| 178 | |
| 179 | <style lang="scss"> |
| 180 | #amelia-app-backend-new { |
| 181 | .am-cs-options { |
| 182 | &__item { |
| 183 | padding: 16px; |
| 184 | |
| 185 | &-header { |
| 186 | font-size: 14px; |
| 187 | font-weight: 500; |
| 188 | line-height: 1.42857; |
| 189 | color: $shade-900; |
| 190 | margin-bottom: 12px; |
| 191 | } |
| 192 | |
| 193 | &-content { |
| 194 | display: flex; |
| 195 | align-items: center; |
| 196 | justify-content: space-between; |
| 197 | margin-bottom: 12px; |
| 198 | |
| 199 | &:last-child { |
| 200 | margin-bottom: 0; |
| 201 | } |
| 202 | |
| 203 | &__heading { |
| 204 | font-size: 15px; |
| 205 | font-weight: 400; |
| 206 | line-height: 1.6; |
| 207 | color: $shade-900; |
| 208 | } |
| 209 | } |
| 210 | } |
| 211 | |
| 212 | &__radio { |
| 213 | --am-c-csr-border: #{$shade-300}; |
| 214 | --am-c-csr-bgr: #{$am-white}; |
| 215 | width: 100%; |
| 216 | |
| 217 | &-item { |
| 218 | position: relative; |
| 219 | height: 90px; |
| 220 | display: inline-flex; |
| 221 | flex: 0 1 32%; |
| 222 | align-items: center; |
| 223 | justify-content: center; |
| 224 | background-color: var(--am-c-csr-bgr); |
| 225 | border: 1px solid var(--am-c-csr-border); |
| 226 | border-radius: 9px; |
| 227 | padding: 9px; |
| 228 | cursor: pointer; |
| 229 | |
| 230 | &:last-child { |
| 231 | margin-right: 0; |
| 232 | } |
| 233 | |
| 234 | &:hover { |
| 235 | --am-c-csr-bgr: #{$blue-300}; |
| 236 | --am-c-csr-border: #{$blue-900}; |
| 237 | } |
| 238 | |
| 239 | &.is-active { |
| 240 | --am-c-csr-bgr: #{$blue-300}; |
| 241 | --am-c-csr-border: #{$blue-900}; |
| 242 | } |
| 243 | } |
| 244 | |
| 245 | .am-radio-group { |
| 246 | width: 100%; |
| 247 | flex-direction: row; |
| 248 | justify-content: space-between; |
| 249 | |
| 250 | .el-radio { |
| 251 | position: static; |
| 252 | |
| 253 | &__label { |
| 254 | padding: 0; |
| 255 | margin: 0; |
| 256 | |
| 257 | .am-button { |
| 258 | text-transform: capitalize; |
| 259 | } |
| 260 | } |
| 261 | |
| 262 | &__input { |
| 263 | position: absolute; |
| 264 | bottom: 4px; |
| 265 | right: 4px; |
| 266 | padding: 0; |
| 267 | |
| 268 | &.is-checked:not(.is-disabled) + .el-radio__label { |
| 269 | margin: 0; |
| 270 | } |
| 271 | } |
| 272 | } |
| 273 | } |
| 274 | } |
| 275 | } |
| 276 | } |
| 277 | </style> |
| 278 |