init crater

resources/assets/js/components/base/modal/InvoiceTemplate.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="template-modal">
+    <div class="card-body">
+      <div class="template-container">
+        <div
+          v-for="(template,index) in modalData"
+          :key="index"
+          :class="{'selected-template': selectedTemplate === template.id}"
+          class="template-img"
+        >
+          <img
+            :src="template.path"
+            alt="template-image"
+            height="200" width="140"
+            @click="selectedTemplate = template.id"
+          >
+          <img
+            v-if="selectedTemplate === template.id"
+            class="check-icon"
+            src="/assets/img/tick.png"
+          >
+        </div>
+      </div>
+    </div>
+    <div class="card-footer">
+      <base-button outline class="mr-3" color="theme" @click="closeInvoiceModal">
+        {{ $t('general.cancel') }}
+      </base-button>
+      <base-button
+        :loading="isLoading"
+        color="theme"
+        @click="chooseTemplate()"
+      >
+        {{ $t('general.choose_template') }}
+      </base-button>
+    </div>
+  </div>
+</template>
+<script>
+import { mapActions, mapGetters } from 'vuex'
+export default {
+  data () {
+    return {
+      selectedTemplate: 1,
+      isLoading: false
+    }
+  },
+  computed: {
+    ...mapGetters('modal', [
+      'modalData'
+    ]),
+    ...mapGetters('invoice', [
+      'getTemplateId'
+    ])
+  },
+  mounted () {
+    this.selectedTemplate = this.getTemplateId
+  },
+  methods: {
+    ...mapActions('invoice', [
+      'setTemplate'
+    ]),
+    ...mapActions('modal', [
+      'closeModal',
+      'resetModalData'
+    ]),
+    async chooseTemplate () {
+      this.isLoading = true;
+      let resp = await this.setTemplate(this.selectedTemplate)
+      if (resp) {
+        this.isLoading = false
+        this.resetModalData()
+        this.closeModal()
+      }
+    },
+    closeInvoiceModal () {
+      this.selectedTemplate = this.getTemplateId
+      this.closeModal()
+      this.resetModalData()
+    }
+  }
+}
+</script>