From 8846d52faf284194c041da0d60fdb21d9dffe458 Mon Sep 17 00:00:00 2001
From: Marek Fraczyk <mareksmakosz@gmail.com>
Date: Mon, 17 May 2021 14:02:44 +0300
Subject: [PATCH] invoice - add density selector, refactor invoice css

---
 public/locales/en/invoice-controls.json       |  3 ++
 src/assets/scss/components/_invoice.scss      | 49 ++++++++++++-------
 src/components/invoices/InvoiceControls.vue   | 16 +++++-
 src/components/invoices/InvoiceForm.vue       |  2 +-
 src/components/invoices/InvoiceRow.vue        |  3 +-
 src/components/invoices/InvoiceRowsHeader.vue | 20 ++++----
 src/store/models/invoice.js                   |  1 +
 7 files changed, 63 insertions(+), 31 deletions(-)

diff --git a/public/locales/en/invoice-controls.json b/public/locales/en/invoice-controls.json
index 956ab56..7f9ca8b 100644
--- a/public/locales/en/invoice-controls.json
+++ b/public/locales/en/invoice-controls.json
@@ -1,6 +1,9 @@
 {
   "back": "Back",
   "book": "Book",
+  "density": "Density",
+  "compact": "Compact",
+  "comfortable": "Comfortable",
   "download_pdf": "Download PDF",
   "delete": "Delete",
   "delete_modal": {
diff --git a/src/assets/scss/components/_invoice.scss b/src/assets/scss/components/_invoice.scss
index 9834ab2..80e1a5f 100644
--- a/src/assets/scss/components/_invoice.scss
+++ b/src/assets/scss/components/_invoice.scss
@@ -1,15 +1,36 @@
-.invoice-container {
-  overflow-x: auto;
-}
+.invoice {
+  &-container {
+    overflow-x: auto;
+  }
 
-.invoice-box {
-  margin: auto;
-  padding: 30px;
-  min-width: var(--breakpoint-md);
-  box-shadow: $box-shadow-light-1;
-  font-size: 16px;
-  line-height: 24px;
-  font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
+  &-box {
+    margin: auto;
+    padding: 30px;
+    min-width: var(--breakpoint-md);
+    box-shadow: $box-shadow-light-1;
+    font-size: 16px;
+    line-height: 24px;
+    font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
+  }
+
+  &__row {
+    &-control {
+      position: absolute;
+      top: 12px;
+      right: -30px;
+    }
+  }
+
+  &__rows {
+    &--compact {
+      th, td {
+        padding: 4px 16px;
+      }
+      .invoice__row-control {
+        top: 0;
+      }
+    }
+  }
 }
 
 @page {
@@ -30,9 +51,3 @@
     box-shadow: none;
   }
 }
-
-.remove-invoice-row {
-  position: absolute;
-  right: -30px;
-  top: 10px;
-}
diff --git a/src/components/invoices/InvoiceControls.vue b/src/components/invoices/InvoiceControls.vue
index b4fc634..b6138d4 100644
--- a/src/components/invoices/InvoiceControls.vue
+++ b/src/components/invoices/InvoiceControls.vue
@@ -20,7 +20,13 @@
                     <template slot="button-content">
                         <i class="material-icons">more_vert</i>
                     </template>
-                    <b-dropdown-item-button @click="print">{{ $t('download_pdf') }} </b-dropdown-item-button>
+                    <b-dropdown-group :header="$t('density')">
+                        <b-dropdown-item-button @click="toggleCompact">
+                            {{ invoice.is_compact ? $t('comfortable') : $t('compact') }}
+                        </b-dropdown-item-button>
+                    </b-dropdown-group>
+                    <b-dropdown-divider/>
+                    <b-dropdown-item-button @click="print">{{ $t('download_pdf') }}</b-dropdown-item-button>
                     <b-dropdown-item-button @click="deleteInvoice">{{ $t('delete') }}</b-dropdown-item-button>
                 </b-dropdown>
             </div>
@@ -31,14 +37,17 @@
 <script>
 import { mapGetters } from 'vuex';
 import NotificationService from '@/services/notification.service';
-import { BDropdown, BDropdownItemButton } from 'bootstrap-vue';
+import { BDropdown, BDropdownDivider, BDropdownGroup, BDropdownItemButton } from 'bootstrap-vue';
 import AppSelect from '@/components/form/AppSelect';
 
 export default {
   i18nOptions: { namespaces: ['invoice-controls', 'statuses'] },
   components: {
     BDropdown,
+    BDropdownDivider,
     BDropdownItemButton,
+    BDropdownGroup,
+
     AppSelect,
   },
   computed: {
@@ -94,6 +103,9 @@ export default {
         invoiceId: this.invoice.id,
       });
     },
+    toggleCompact() {
+      this.updateProp({ is_compact: !this.invoice.is_compact });
+    },
     print() {
       window.print();
     },
diff --git a/src/components/invoices/InvoiceForm.vue b/src/components/invoices/InvoiceForm.vue
index 3fb02eb..a82a2eb 100644
--- a/src/components/invoices/InvoiceForm.vue
+++ b/src/components/invoices/InvoiceForm.vue
@@ -21,7 +21,7 @@
                                      @change="updateProp({ notes: $event })"/>
                     </div>
                     <div class="row">
-                        <table class="table">
+                        <table class="table" :class="{'invoice__rows--compact': invoice.is_compact}">
                             <InvoiceRowsHeader :invoice="invoice"/>
                             <tbody>
                             <InvoiceRow v-for="(row, index) in invoice.rows" :errors="errors"
diff --git a/src/components/invoices/InvoiceRow.vue b/src/components/invoices/InvoiceRow.vue
index 3897914..739cd8c 100644
--- a/src/components/invoices/InvoiceRow.vue
+++ b/src/components/invoices/InvoiceRow.vue
@@ -38,7 +38,8 @@
         </td>
         <td class="text-right position-relative">
             {{ (row.quantity * row.price) | currency }}
-            <button class="btn btn-sm remove-invoice-row d-print-none" @click="removeRow(row)">
+            <button class="btn btn-sm d-print-none invoice__row-control"
+                    @click="removeRow(row)">
                 <i class="material-icons md-18 pointer">remove</i>
             </button>
         </td>
diff --git a/src/components/invoices/InvoiceRowsHeader.vue b/src/components/invoices/InvoiceRowsHeader.vue
index b2b9882..d061613 100644
--- a/src/components/invoices/InvoiceRowsHeader.vue
+++ b/src/components/invoices/InvoiceRowsHeader.vue
@@ -1,15 +1,15 @@
 <template>
     <thead>
-    <tr>
-        <th>{{ $t('item') }}</th>
-        <th>{{ $t('quantity') }}</th>
-        <th>{{ $t('unit') }}</th>
-        <th>{{ $t('price') }}</th>
-        <th v-for="tax in taxes" :key="tax.id">
-            {{ tax.label }} %
-        </th>
-        <th class="text-right">{{ $t('sum') }}</th>
-    </tr>
+        <tr>
+            <th>{{ $t('item') }}</th>
+            <th>{{ $t('quantity') }}</th>
+            <th>{{ $t('unit') }}</th>
+            <th>{{ $t('price') }}</th>
+            <th v-for="tax in taxes" :key="tax.id">
+                {{ tax.label }} %
+            </th>
+            <th class="text-right">{{ $t('sum') }}</th>
+        </tr>
     </thead>
 </template>
 
diff --git a/src/store/models/invoice.js b/src/store/models/invoice.js
index ce6a391..6d2e7c5 100644
--- a/src/store/models/invoice.js
+++ b/src/store/models/invoice.js
@@ -15,6 +15,7 @@ export default class Invoice extends Model {
       number: this.attr(''),
       status: this.attr('draft'),
       issued_at: this.attr(''),
+      is_compact: this.attr(false),
       due_at: this.attr(''),
       late_fee: this.attr(''),
       currency: this.attr(''),