Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/vreg/components/Forms/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <div class="form-plate-wrapper"
       @click.prevent="selectUnselectPlate"
       :class="{'plate-hover':hover,'plate-selected':plateSelected}"
       @mouseleave="hover=false"
       @mouseenter="hover=true">
    <div class="form-plate-header">

      <component :is="vehicleInfoHeaderComponent" :plate="plate" v-if="!$store.state.emptyEstimates"/>

      <div class="form-group ">
        <label class="checkbox-input-wrapper">
          <input type="checkbox" class="c-input" :checked="plateSelected">
          <div class="checkbox-inner">
            <div class="outer">
              <div class="inner">
                <svg width="12" height="8" viewBox="0 0 13 9" fill="none"
                     xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M11.2252 1.90835L5.60358 7.53001C5.21306 7.92053 4.57989 7.92053 4.18937 7.53001L1.32944 4.67008"
                    stroke="white" stroke-width="2" stroke-linecap="round"></path>
                </svg>
              </div>
            </div>
            <p class="font-weight-bold" style="font-size: 14px">Renew this vehicle</p></div>
        </label>

      </div>
    </div>


  </div>
</template>

<script>

export default {
  props: ['plate'],
  name: "PlateBox",
  data() {
    return {
      hover: false
    }
  },
  methods: {
    selectUnselectPlate() {
      if (this.plateSelected) {
        this.unselectPlate();
      } else {
        this.selectPlate();
      }

    },
    selectPlate() {
      this.$store.commit('SET_OFFLINE_FORM_PLATE', this.plate);
    },
    unselectPlate() {
      this.$store.commit('REMOVE_OFFLINE_FORM_PLATE', this.plate);
    }
  },
  computed: {
    vehicleInfoHeaderComponent() {
      return () => import(`@/components/States/${this.currentStateCode.toUpperCase()}/VehicleInfoHeader`);
    },
    plateSelected() {
      return !!this.offlineFormPlates
        .find(plateObject => {
          return plateObject.license_plate === this.plate.license_plate
        });
    }
  }
}
</script>

<style scoped>
.form-plate-wrapper {
  margin-bottom: 10px !important;
  cursor: pointer;
  border-radius: 2px;
}

.plate-hover {
  /*  */
}

.plate-selected {
  background-color: rgba(47, 171, 255, 0.1);
  border: 1px solid #2FABFF;
  transition: all .2s ease-in;
}

@media only screen and (max-width: 767px) {
  .plate-selected {
    border: unset;
  }
}


.checkbox-input-wrapper .checkbox-inner {
  background-color: unset !important;

}

</style>