FileMaster

Edit File: AssignedServices.vue

<div>
    <div
        class="am-dialog-table am-assigned-services"
        v-for="category in categorizedServiceList"
        v-if="category.serviceList.length > 0"
        :key="category.id"
    >

<el-row :gutter="24" class="am-dialog-table-head">

<el-col class="am-three-dots" :span="12">
          <el-checkbox
            v-model="category.state"
            @change="changeCategory(category.id)"
          >
          </el-checkbox>
          <span>
            {{ category.name }}
          </span>
        </el-col>

<el-col :span="6">
          {{ $root.labels.capacity }}
        </el-col>

<el-col :span="6">
          {{ $root.labels.price }}
        </el-col>

</el-row>

<div v-for="item in category.serviceList" :key="item.value">
        <el-row class="am-assigned-services__service-row" :gutter="10" type="flex" align="middle">

<el-col :span="12" class="am-assigned-services__service-row__name">
          <el-checkbox
              v-model="item.state"
              @change="changeService(category, item)"
          >
          </el-checkbox>
          <span :title="item.name">{{ item.name }}</span>
        </el-col>

<el-col :span="3">
          <p style="display: none;">
            {{ $root.labels.minimum_capacity }}
          </p>
          <el-input-number
            v-model="item.minCapacity"
            :disabled="!item.state"
            :value="item.minCapacity"
            :min="1"
            @input="checkCapacityLimits(item)"
            :controls=false
          >
          </el-input-number>
        </el-col>

<el-col :span="3">
          <p style="display: none;">
            {{ $root.labels.maximum_capacity }}
          </p>
          <el-input-number
            v-model="item.maxCapacity"
            :disabled="!item.state"
            :value="item.maxCapacity"
            :min="item.minCapacity"
            @input="checkCapacityLimits(item)"
            :controls=false
          >
          </el-input-number>
        </el-col>

<el-col :span="4">
          <p style="display: none;">
            {{ $root.labels.price }}
          </p>
          <money
            v-model="item.price"
            v-bind="moneyComponentData"
            @input="priceChanged(item)"
            class="el-input__inner"
            :disabled="!item.state"
          >
          </money>
        </el-col>

<el-col :span="2" v-if="isDurationPricingEnabled(item.customPricing)">
          <span @click="toggleDurations(item)">
            <img class="svg-amelia edit" width="16px" :src="$root.getUrl+'public/img/edit.svg'" style="cursor: pointer;">
          </span>
        </el-col>

<el-col :span="2" v-if="isPersonPricingEnabled(item.customPricing)">
          <span @click="togglePersons(item)">
            <img class="svg-amelia edit" width="16px" :src="$root.getUrl+'public/img/edit.svg'" style="cursor: pointer;">
          </span>
        </el-col>

<el-col :span="2" v-if="isPeriodPricingEnabled(item.customPricing)">
          <span @click="togglePeriods(item)">
            <img class="svg-amelia edit" width="16px" :src="$root.getUrl+'public/img/edit.svg'" style="cursor: pointer;">
          </span>
        </el-col>

</el-row>

<el-row v-if="isDurationPricingEnabled(item.customPricing)" style="margin-bottom: 0;">
          <div class="am-extra-item">

<el-collapse-transition>
              <div v-if="showDurations && editedDurationsService.id === item.id">
                <custom-duration
                  :service="item"
                  :enabledDelete="false"
                  :enabledAdd="false"
                  :enabledDuration="false"
                >
                </custom-duration>
              </div>
            </el-collapse-transition>

</div>
        </el-row>

<el-row v-if="isPersonPricingEnabled(item.customPricing)" style="margin-bottom: 0;">
          <div class="am-extra-item">

<el-collapse-transition>
              <div v-if="showPersons && editedPersonsService.id === item.id">
                <person-price
                  :service="item"
                  :enabledDelete="false"
                  :enabledRange="false"
                >
                </person-price>
              </div>
            </el-collapse-transition>

</div>
        </el-row>

<el-row v-if="isPeriodPricingEnabled(item.customPricing)" style="margin-bottom: 0;">
          <div class="am-extra-item">

<el-collapse-transition>
              <div v-if="showPeriods && editedPeriodsService.id === item.id">
                <period-price
                  :service="item"
                  :enabledAdd="false"
                  :enabledEdit="false"
                  :enabledDelete="false"
                >
                </period-price>
              </div>
            </el-collapse-transition>

</div>
        </el-row>

</div>

</div>
  </div>

</template>

export default {
    name: 'AssignedServices',

components: {
      CustomDuration,
      PersonPrice,
      PeriodPrice,
      Money
    },

mixins: [
      notifyMixin,
      servicePriceMixin,
      priceMixin
    ],

props: {
      categorizedServiceList: {
        type: Array,
        default: () => ([])
      },
      weekSchedule: {
        type: Array,
        default: () => ([])
      },
      specialDays: {
        type: Array,
        default: () => ([])
      },
      futureAppointments: {
        type: Object,
        default: () => ({})
      },
      employeeId: {
        type: Number,
        default: 0
      },
      mandatoryServicesIds: {
        type: Array,
        default: () => ([])
      }
    },

data () {
      return {
        editedDurationsService: null,
        editedPersonsService: null,
        editedPeriodsService: null,
        showDurations: false,
        showPersons: false,
        showPeriods: false
      }
    },

created () {
      this.categorizedServiceList.forEach((catItem) => {
        this.handleCheckSingleInCategory(catItem)
      })
    },

methods: {
      toggleDurations (item) {
        let selectedItem = (this.editedDurationsService && this.editedDurationsService.id !== item.id) ||
            (!this.editedDurationsService) ? item : null

this.editedDurationsService = selectedItem

this.showDurations = !!selectedItem
      },

togglePersons (item) {
        let selectedItem = (this.editedPersonsService && this.editedPersonsService.id !== item.id) ||
        (!this.editedPersonsService) ? item : null

this.editedPersonsService = selectedItem

this.showPersons = !!selectedItem
      },

togglePeriods (item) {
        let selectedItem = (this.editedPeriodsService && this.editedPeriodsService.id !== item.id) ||
        (!this.editedPeriodsService) ? item : null

this.editedPeriodsService = selectedItem

this.showPeriods = !!selectedItem
      },

priceChanged (item) {
        if (item.customPricing.persons.length) {
          item.customPricing.persons[0].price = item.price
        }
      },

changeCategory (categoryId) {
        let category = this.categorizedServiceList.find(category => category.id === categoryId)

category.serviceList.forEach((service) => {
          if (Object.keys(this.futureAppointments).length !== 0 && this.futureAppointments[this.employeeId] !== undefined && this.futureAppointments[this.employeeId].indexOf(service.id) !== -1 && category.state === false) {
            this.notify(
              this.$root.labels.error,
              this.$root.labels.service_provider_remove_fail_all + ' ' + service.name + ' ' + this.$root.labels.service,
              'error'
            )
          } else if (this.mandatoryServicesIds.length && this.mandatoryServicesIds.includes(service.id) && category.state === false) {
            this.notify(
              this.$root.labels.error,
              this.$root.labels.mandatory_service_remove_fail_all + ' ' + service.name + ' ' + this.$root.labels.service,
              'error'
            )
          } else {
            service.state = category.state
            this.changeSelectedPeriodServices(service)
          }
        })
        this.handleCheckSingleInCategory(category)
      },

changeService (category, service) {
        if (Object.keys(this.futureAppointments).length !== 0 && this.futureAppointments[this.employeeId] !== undefined && this.futureAppointments[this.employeeId].indexOf(service.id) !== -1) {
          service.state = true
          this.notify(this.$root.labels.error, this.$root.labels.service_provider_remove_fail, 'error')
        } else if (this.mandatoryServicesIds.length && this.mandatoryServicesIds.includes(service.id)) {
          service.state = true
          this.notify(this.$root.labels.error, this.$root.labels.mandatory_service_remove_fail, 'error')
        }

this.changeSelectedPeriodServices(service)
        this.handleCheckSingleInCategory(category)
      },

handleCheckSingleInCategory (category) {
        category.state = category.serviceList.filter(service => service.state === true).length === category.serviceList.length
      },

checkCapacityLimits (item) {
        if (item.minCapacity > item.maxCapacity) {
          item.maxCapacity = item.minCapacity
        }
      },

changeSelectedPeriodServices (service) {
        if (service.state) {
          // set to old state if period is already saved
          this.weekSchedule.forEach((weekDay) => {
            weekDay.periods.forEach((period) => {
              if ('savedPeriodServiceList' in period) {
                period.savedPeriodServiceList.forEach((savedPeriodService) => {
                  if (savedPeriodService.serviceId === service.id) {
                    period.periodServiceList.push(savedPeriodService)
                    period.serviceIds.push(service.id)
                  }
                })
              }
            })
          })
        } else {
          this.weekSchedule.forEach(weekDay => {
            weekDay.periods.forEach(period => {
              period.periodServiceList.forEach((periodService, index) => {
                if (periodService.serviceId === service.id) {
                  period.periodServiceList.splice(index, 1)
                }
              })

period.serviceIds.forEach((serviceId, index) => {
                if (serviceId === service.id) {
                  period.serviceIds.splice(index, 1)
                }
              })
            })
          })

this.specialDays.forEach(weekDay => {
            weekDay.periodList.forEach(period => {
              period.periodServiceList.forEach((periodService, index) => {
                if (periodService.serviceId === service.id) {
                  period.periodServiceList.splice(index, 1)
                }
              })
            })
          })
        }
      }
    }
  }
</script>

Back