ShowEasyFrontEnd/FrontEnd/components/service/content/quantitySelectGroup.vue

<template>
  <div class="group tw-mb-[20px]">
    <div class="tw-flex tw-justify-between tw-items-center tw-mb-[20px]">
      <h3 class="t14 tw-font-bold tw-mb-0 md:t16">
        {{ $t(label) }}<span class="required tw-font-normal  t12 md:t14">*</span>
        <span v-if="validation.length==false" class="required md:tw-ml-[20px] tw-font-normal  t12 md:t14">{{ $t("Required.") }}</span>
      </h3>
      <button class="'seeMore tw-transition tw-btn-md tw-body-4 tw-text-secondary-default tw-px-[16px] tw-py-[9px]"
        @click="clearAll()">
        {{ $t("Clear all") }}
      </button>
    </div>
    <div>
      <div class="optionGroup tw-border tw-border-solid tw-border-slate-200 tw-rounded-[12px] tw-bg-white tw-p-[20px]">
        <div v-for="(item, index) in quantitySelectList" :key="index">
          <quantitySelectOption :index="index" :item="item" :hasValue="hasValue"
            :seeMore="seeMore" @disabled="disabled($event)" @selected="selected($event)" @change="change($event)">
          </quantitySelectOption>
        </div>
      </div>
      <button v-show="length !== undefined && length > 3" :class="[
        'seeMore tw-transition tw-btn-md tw-text-primary-1 tw-border tw-border-solid tw-border-primary-1 tw-px-[30px] tw-py-[8.5px] tw-mt-[20px] tw-w-full tw-rounded-xl hover:tw-bg-primary-3 xl:hover:tw-bg-transparent xl:tw-border-none',
        seeMore ? 'open' : '',
      ]" @click="seeMore = !seeMore">
        {{ $t(seeMoreText) }}
      </button>
    </div>
  </div>
</template>
<script>
import quantitySelectOption from "@/components/service/content/quantitySelectOption";
export default {
  components: {
    quantitySelectOption,
  },
  props: {
    label: {
      type: String,
    },
    quantitySelectList: {
      type: Array,
    },
    pickupServiceShow:{
      type: Boolean,
    }
  },
  data() {
    return {
      hasValue: null,
      seeMore: false,
      formData: {
        selectList: [],
        truckList: []
      },
      validation:{
        length: true
      },
      errors: null,
    };
  },
  computed: {
    seeMoreText() {
      if (this.seeMore == false) {
        return "See more";
      } else {
        return "See less";
      }
    },
    length() {
      if (this.quantitySelectList) {
        return this.quantitySelectList.length;
      } else {
        return 0;
      }
    },
    // clear() {
    //   return this.pickupServiceShow;
    // },
  },
  watch: {
    // clear: {
    //   handler: function (value) {
    //     // if(value==false){
    //     //   this.hasValue = null;
    //     //   this.formData.selectList = [];
    //     //   this.formData.truckList = [];
    //     //   this.$emit("ChangeCosts",{type: 'truck',value: this.formData});
    //     // }
    //   }
    // }
  },
  methods: { 
    disabled(i) {
      this.hasValue = i;
    },
    selected(data){
      if(this.formData.selectList.length>0){
        for(let i=0;i<this.formData.selectList.length;i++){
          if(this.formData.selectList[i].id == data.id){
            this.formData.selectList.splice(i, 1);
            break;
          }
        }
      }
      if(data.number>0){
        this.formData.selectList.push(data);
      }
      if(this.formData.selectList.length>0){
        this.validation.length = true;
      }else{
        this.validation.length = false;
      }
      this.$emit("ChangeCosts",{type: 'truck',value: this.formData});
    },
    change(data){
      if(this.formData.truckList.length>0){
        for(let i=0;i<this.formData.truckList.length;i++){
          if(this.formData.truckList[i].id == data.id){
            this.formData.truckList.splice(i, 1);
            break;
          }
        }
      }
      if(data.number!="" && data.number!=0){
        this.formData.truckList.push(data);
      }
      this.$emit("ChangeCosts",{type: 'truck',value: this.formData});
    },
    clearAll() {
      this.hasValue = 0;
      this.$nextTick(() => {
        this.hasValue = null;
      });
      this.formData.selectList = [];
      this.formData.truckList = [];
      this.$emit("ChangeCosts",{type: 'truck',value: this.formData});
    },
    validators() {
        if (this.formData.selectList.length <= 0) {
          this.validation.length = false;
        } else {
          this.validation.length = true;
        }
        this.errors = Object.entries(this.validation).filter(
          (e) => e[1] == false
        );
        if (this.errors.length > 0) {
          return false;
        } else {
          return true;
        }
    },
  },
};
</script>
<style lang="scss" scoped>
.custom-button {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
}

.button {
  &-reduce {
    background-image: url("~/assets/svg/reduce.svg");
    background-color: #e5e5e5;
  }

  &-add {
    background-image: url("~/assets/svg/add.svg");
    background-color: #f48800;
  }
}

:deep() {
  .optionGroup {
    .optionItem:last-child {
      border: none !important;
      margin: 0 !important;
      padding: 0 !important;
    }
  }

}

.seeMore {
  &-hide {
    position: relative;
    max-height: 295px;
    overflow: hidden;

    &::after {
      content: "";
      display: block;
      position: absolute;
      background: url("~/assets/img/gradient_white.png") repeat-x left bottom;
      width: 100%;
      height: 130px;
      left: 0;
      bottom: 0;
      z-index: 1;
      transition: bottom 0.5s;
    }
  }

  &-show {
    position: relative;
    max-height: 100%;
    overflow: initial;

    &::after {
      display: none;
    }
  }

  @media screen and (min-width: 1366px) {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    &::after {
      content: "";
      display: inline-block;
      position: relative;
      background-image: url("~/assets/svg/arrow-down-primary.svg");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 100%;
      width: 9px;
      height: 6px;
      margin-left: 16px;
      transition: all 0.2s linear;
    }

    &.open {
      &::after {
        transform: rotate(180deg);
      }
    }
  }
}
</style>