Cabinet
1 year ago
Events
1 year ago
common
1 year ago
parts
1 year ago
BringingAnyone.vue
3 years ago
CartStep.vue
2 years ago
CategoriesList.vue
2 years ago
CategoryItemsList.vue
1 year ago
CategoryPackage.vue
2 years ago
CategoryService.vue
2 years ago
Congratulations.vue
3 years ago
DateTimeStep.vue
2 years ago
Extras.vue
2 years ago
InfoStep.vue
3 years ago
InitStep.vue
1 year ago
PackageAppointmentsListStep.vue
3 years ago
PackageAppointmentsStep.vue
3 years ago
PackageInfoStep.vue
3 years ago
PackageStep.vue
3 years ago
PaymentStep.vue
2 years ago
RecurringStep.vue
2 years ago
RecurringSummary.vue
2 years ago
CartStep.vue
329 lines
| 1 | <template> |
| 2 | <div |
| 3 | class="am-fs__main-content am-fs__cart" |
| 4 | ref="cartRef" |
| 5 | > |
| 6 | <div |
| 7 | class="am-fs__cart-title" |
| 8 | v-html="labelsDisplay('cart_title', 'cartStep')" |
| 9 | ></div> |
| 10 | |
| 11 | <div class="am-fs__cart-includes"> |
| 12 | <AmCollapse> |
| 13 | <AmCollapseItem |
| 14 | v-for="(item, index) in cart" |
| 15 | :ref="el => setCollapseItem(el, index)" |
| 16 | :key="index" |
| 17 | :side="true" |
| 18 | > |
| 19 | <template #heading> |
| 20 | <CartItemHead :data="item"></CartItemHead> |
| 21 | </template> |
| 22 | <template #default> |
| 23 | <CartItemBody |
| 24 | :data="item" |
| 25 | :index="index" |
| 26 | :size="cart.length" |
| 27 | > |
| 28 | </CartItemBody> |
| 29 | </template> |
| 30 | </AmCollapseItem> |
| 31 | </AmCollapse> |
| 32 | </div> |
| 33 | </div> |
| 34 | </template> |
| 35 | |
| 36 | <script setup> |
| 37 | // * Import libraries |
| 38 | import moment from "moment"; |
| 39 | |
| 40 | // * _components |
| 41 | import AmCollapseItem from "../../../_components/collapse/AmCollapseItem"; |
| 42 | import AmCollapse from "../../../_components/collapse/AmCollapse"; |
| 43 | |
| 44 | // * Dedicated components |
| 45 | import CartItemHead from "./parts/CartItemHead.vue"; |
| 46 | import CartItemBody from "./parts/CartItemBody.vue"; |
| 47 | |
| 48 | // * Import from Vue |
| 49 | import { |
| 50 | computed, |
| 51 | inject, |
| 52 | ref, |
| 53 | provide, |
| 54 | onMounted, |
| 55 | nextTick, |
| 56 | watch |
| 57 | } from "vue"; |
| 58 | |
| 59 | // * Multi lingual |
| 60 | let langKey = inject('langKey') |
| 61 | |
| 62 | // * Component labels |
| 63 | let amLabels = inject('labels') |
| 64 | |
| 65 | let pageRenderKey = inject('pageRenderKey') |
| 66 | let amCustomize = inject('customize') |
| 67 | |
| 68 | // * Label computed function |
| 69 | function labelsDisplay (label, stepKey) { |
| 70 | let computedLabel = computed(() => { |
| 71 | return amCustomize.value[pageRenderKey.value][stepKey].translations |
| 72 | && amCustomize.value[pageRenderKey.value][stepKey].translations[label] |
| 73 | && amCustomize.value[pageRenderKey.value][stepKey].translations[label][langKey.value] |
| 74 | ? amCustomize.value[pageRenderKey.value][stepKey].translations[label][langKey.value] |
| 75 | : amLabels[label] |
| 76 | }) |
| 77 | |
| 78 | return computedLabel.value |
| 79 | } |
| 80 | |
| 81 | // * Component reference |
| 82 | let cartRef = ref(null) |
| 83 | |
| 84 | // * Plugin wrapper width |
| 85 | let wrapperWidth = ref() |
| 86 | provide('wrapperWidth', wrapperWidth) |
| 87 | |
| 88 | // * window resize listener |
| 89 | window.addEventListener('resize', resize); |
| 90 | // * resize function |
| 91 | function resize() { |
| 92 | if (cartRef.value) { |
| 93 | wrapperWidth.value = cartRef.value.offsetWidth |
| 94 | } |
| 95 | } |
| 96 | |
| 97 | onMounted (() => { |
| 98 | nextTick(() => { |
| 99 | wrapperWidth.value = cartRef.value.offsetWidth |
| 100 | }) |
| 101 | }) |
| 102 | |
| 103 | let sidebarCollapsed = inject('sidebarCollapsed', ref(false)) |
| 104 | |
| 105 | watch(sidebarCollapsed, (current) => { |
| 106 | if (current) { |
| 107 | setTimeout(() => { |
| 108 | wrapperWidth.value = cartRef.value.offsetWidth |
| 109 | }, 1200) |
| 110 | } else { |
| 111 | setTimeout(() => { |
| 112 | wrapperWidth.value = cartRef.value.offsetWidth |
| 113 | }, 400) |
| 114 | } |
| 115 | }) |
| 116 | |
| 117 | /************** |
| 118 | * Navigation * |
| 119 | *************/ |
| 120 | |
| 121 | let cart = ref([ |
| 122 | { |
| 123 | service: { |
| 124 | name: 'Service 1', |
| 125 | persons: 3, |
| 126 | price: 100, |
| 127 | duration: 5400, |
| 128 | date: moment().format('YYYY-MM-DD'), |
| 129 | time: moment('09:00', 'hh:mm').format('hh:mm'), |
| 130 | maxCapacity: 10, |
| 131 | employee: { |
| 132 | firstName: 'John', |
| 133 | lastName: 'Doe' |
| 134 | }, |
| 135 | location: { |
| 136 | name: 'Location 1' |
| 137 | }, |
| 138 | color: '#1788FB' |
| 139 | }, |
| 140 | extras: [ |
| 141 | { |
| 142 | name: 'Extra 1', |
| 143 | duration: 1800, |
| 144 | quantity: 2, |
| 145 | price: 10 |
| 146 | }, |
| 147 | { |
| 148 | name: 'Extra 2', |
| 149 | duration: null, |
| 150 | quantity: 1, |
| 151 | price: 15 |
| 152 | }, |
| 153 | { |
| 154 | name: 'Extra 3', |
| 155 | duration: 2400, |
| 156 | quantity: 3, |
| 157 | price: 20 |
| 158 | } |
| 159 | ] |
| 160 | }, |
| 161 | { |
| 162 | service: { |
| 163 | name: 'Service 2', |
| 164 | persons: 1, |
| 165 | price: 100, |
| 166 | duration: 5400, |
| 167 | date: moment().format('YYYY-MM-DD'), |
| 168 | time: moment('09:00', 'hh:mm').format('hh:mm'), |
| 169 | maxCapacity: 10, |
| 170 | employee: { |
| 171 | firstName: 'Jane', |
| 172 | lastName: 'Doe' |
| 173 | }, |
| 174 | location: { |
| 175 | name: 'Location 2' |
| 176 | }, |
| 177 | color: '#FD7E35' |
| 178 | }, |
| 179 | extras: [ |
| 180 | { |
| 181 | name: 'Extra 1', |
| 182 | duration: 1800, |
| 183 | quantity: 2, |
| 184 | price: 10 |
| 185 | }, |
| 186 | { |
| 187 | name: 'Extra 2', |
| 188 | duration: null, |
| 189 | quantity: 1, |
| 190 | price: 15 |
| 191 | }, |
| 192 | { |
| 193 | name: 'Extra 3', |
| 194 | duration: 2400, |
| 195 | quantity: 3, |
| 196 | price: 20 |
| 197 | } |
| 198 | ] |
| 199 | }, |
| 200 | { |
| 201 | service: { |
| 202 | name: 'Service 3', |
| 203 | persons: 2, |
| 204 | price: 100, |
| 205 | duration: 5400, |
| 206 | date: moment().format('YYYY-MM-DD'), |
| 207 | time: moment('09:00', 'hh:mm').format('hh:mm'), |
| 208 | maxCapacity: 10, |
| 209 | employee: { |
| 210 | firstName: 'John', |
| 211 | lastName: 'Doe' |
| 212 | }, |
| 213 | location: { |
| 214 | name: 'Location 3' |
| 215 | }, |
| 216 | color: '#774DFB' |
| 217 | }, |
| 218 | extras: [ |
| 219 | { |
| 220 | name: 'Extra 1', |
| 221 | duration: 1800, |
| 222 | quantity: 2, |
| 223 | price: 10 |
| 224 | }, |
| 225 | { |
| 226 | name: 'Extra 2', |
| 227 | duration: null, |
| 228 | quantity: 1, |
| 229 | price: 15 |
| 230 | }, |
| 231 | { |
| 232 | name: 'Extra 3', |
| 233 | duration: 2400, |
| 234 | quantity: 3, |
| 235 | price: 20 |
| 236 | } |
| 237 | ] |
| 238 | } |
| 239 | ]) |
| 240 | |
| 241 | let appointmentsList = ref([]) |
| 242 | |
| 243 | let initCollapseLoadCompleted = ref(false) |
| 244 | |
| 245 | function setCollapseItem (el, index) { |
| 246 | appointmentsList.value[index] = el |
| 247 | |
| 248 | if (index === 0 && !initCollapseLoadCompleted.value) { |
| 249 | initCollapseLoadCompleted.value = true |
| 250 | } |
| 251 | } |
| 252 | </script> |
| 253 | |
| 254 | <script> |
| 255 | export default { |
| 256 | name: 'CartStep', |
| 257 | key: 'cartStep', |
| 258 | inheritAttrs: false, |
| 259 | sidebarData: { |
| 260 | label: 'cart_step', |
| 261 | icon: 'cart', |
| 262 | stepSelectedData: [], |
| 263 | finished: false, |
| 264 | selected: false, |
| 265 | } |
| 266 | } |
| 267 | </script> |
| 268 | |
| 269 | <style lang="scss"> |
| 270 | #amelia-app-backend-new { |
| 271 | #amelia-container { |
| 272 | .am-fs__cart { |
| 273 | // am - amelia |
| 274 | // c - color |
| 275 | // cart - cart |
| 276 | --am-c-cart-text: var(--am-c-main-text); |
| 277 | --am-c-cart-bgr: var(--am-c-main-bgr); |
| 278 | |
| 279 | & > * { |
| 280 | $count: 2; |
| 281 | @for $i from 0 through $count { |
| 282 | &:nth-child(#{$i + 1}) { |
| 283 | animation: 600ms cubic-bezier(.45,1,.4,1.2) #{$i*100}ms am-animation-slide-up; |
| 284 | animation-fill-mode: both; |
| 285 | } |
| 286 | } |
| 287 | } |
| 288 | |
| 289 | &-title { |
| 290 | font-size: 14px; |
| 291 | font-weight: 400; |
| 292 | line-height: 1.42857; |
| 293 | color: var(--am-c-cart-text); |
| 294 | margin: 0; |
| 295 | } |
| 296 | |
| 297 | &-includes { |
| 298 | margin: 16px 0 0; |
| 299 | |
| 300 | .am-collapse-item { |
| 301 | $count: 100; |
| 302 | @for $i from 0 through $count { |
| 303 | &:nth-child(#{$i + 1}) { |
| 304 | animation: 600ms cubic-bezier(.45,1,.4,1.2) #{$i*100}ms am-animation-slide-up; |
| 305 | animation-fill-mode: both; |
| 306 | } |
| 307 | } |
| 308 | |
| 309 | &__heading { |
| 310 | padding: 12px; |
| 311 | transition-delay: .5s; |
| 312 | |
| 313 | &-side { |
| 314 | transition-delay: 0s; |
| 315 | } |
| 316 | } |
| 317 | |
| 318 | &__trigger { |
| 319 | &-side { |
| 320 | padding: 0 4px 0 10px; |
| 321 | } |
| 322 | } |
| 323 | } |
| 324 | } |
| 325 | } |
| 326 | } |
| 327 | } |
| 328 | </style> |
| 329 |