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/Pages/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <div>
    <h1>Select offline plates</h1>
    <p class="description">Select plates</p>

    <plate-box v-for="(apiPlate,plateIndex) in apiPlates" :plate="apiPlate"
               :key="`${apiPlate.license_plate}_${plateIndex}`"/>

    <span v-html="submitBtnPopoverMsg" v-if="!offlineFormPlates.length"
          class="text-danger"
          style="float: right;font-weight: bold"></span>

    <div class="form-button-wrapper" style="clear: right;margin-top:40px">
      <nuxt-link :to="`/${currentStateCode}/step-3`" class="btn-return">
        <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5 9L1 5L5 1" stroke="#182D40" stroke-width="1.2" stroke-linecap="round"
                stroke-linejoin="round"></path>
        </svg>
        Return to State selection
      </nuxt-link>


      <button type="submit" class="btn btn-form-green" :disabled="!offlineFormPlates.length"
              @click.prevent="goToOfflineStep">
        Continue
        <svg width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1 1.5L6 6.5L1 11.5" stroke="white" stroke-width="1.2" stroke-linecap="round"
                stroke-linejoin="round"></path>
        </svg>
      </button>

    </div>


  </div>
</template>

<script>
import PlateBox from "@/components/Forms/PlateBox";
import forms from "@/mixins/forms";

export default {
  name: "SelectOfflinePlatesPage",
  middleware({store: {state}, redirect, route: {path}}) {

    if (state.apiPlates.length === 0 || state.emptyEstimates == true) {
      return redirect(`/${state.currentStateCode}/step-1`);
    }

  },
  mixins: [forms],
  components: {PlateBox},
  data() {
    return {
      hoverIndex: null,
      submitBtnPopoverMsg: "You can't continue, at least one plate should be selected!  "
    }
  },
  methods: {
    goToOfflineStep() {
      this.storeSavedSession('select-offline-plates', `/${this.currentStateCode}/step-4`, this.offlineFormPlates)
    }
  },
  computed: {
    apiPlates() {
      return this.$store.getters.getAPIPlates;
    },
    offlineFormPlates() {
      return this.$store.getters.getOfflineFormPlates;
    }
  }
}
</script>

<style scoped>

</style>