Init commit

src/components/invoices/InvoiceControls.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="row" v-if="invoice">
+        <div class="col-12 mb-4 d-flex justify-content-between align-items-start">
+            <router-link class="btn btn-sm btn-light btn--icon-left"
+                            :to="{name: 'invoices'}">
+                <i class="material-icons">arrow_back</i>
+                <span class="d-inline-block">Back</span>
+                <!--        Back-->
+            </router-link>
+            <div class="d-flex align-items-center">
+                <!--        <button class="btn btn-sm btn-outline-danger mr-2" @click="deleteInvoice">Delete</button>-->
+                <!--        <a :href="invoice.pdf_url" target="_blank" class="btn btn-sm btn-outline-primary mr-2">PDF</a>-->
+
+                <AppSelect :value="invoice.status"
+                           class="mb-0 mr-2 text-capitalize multiselect--capitalize"
+                           :options="['draft', 'booked', 'sent', 'paid', 'cancelled']"
+                           @input="updateProp({status: $event})"/>
+                <button class="btn btn-sm btn-outline-dark"
+                        v-if="invoice.status === 'draft'"
+                        @click="bookInvoice">Book
+                </button>
+                <b-dropdown variant="link" size="sm" no-caret right>
+                    <template slot="button-content">
+                        <i class="material-icons">more_vert</i>
+                    </template>
+                    <b-dropdown-item :href="invoice.pdf_url" target="_blank">Download PDF</b-dropdown-item>
+                    <b-dropdown-item-button @click="deleteInvoice">Delete</b-dropdown-item-button>
+                </b-dropdown>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import NotificationService from '@/services/notification.service';
+import { BDropdown, BDropdownItem, BDropdownItemButton } from 'bootstrap-vue';
+import AppSelect from '@/components/form/AppSelect';
+
+export default {
+  components: {
+    BDropdown,
+    BDropdownItem,
+    BDropdownItemButton,
+    AppSelect,
+  },
+  computed: {
+    ...mapGetters({
+      invoice: 'invoices/invoice',
+    }),
+  },
+  methods: {
+    async deleteInvoice() {
+      const confirmed = await this.$bvModal.msgBoxConfirm(`Delete invoice ${this.invoice.number}?`, {
+        okTitle: 'Delete',
+        okVariant: 'danger',
+        cancelTitle: 'Dismiss',
+        cancelVariant: 'btn-link',
+        contentClass: 'bg-base dp--24',
+      });
+      if (confirmed) {
+        const res = await this.$store.dispatch('invoices/deleteInvoice', this.invoice);
+        NotificationService.success(res.message);
+        this.$router.push({
+          name: 'invoices',
+        });
+      }
+    },
+    bookInvoice() {
+      this.$store.dispatch('invoices/bookInvoice');
+    },
+    updateProp(props) {
+      this.$store.dispatch('invoices/updateInvoice', props);
+    },
+  },
+};
+</script>