Export data.

src/store/store.js

@@ -12,6 +12,8 @@ import clients from '@/store/clients';
 import invoices from '@/store/invoices';
 import teams from '@/store/teams';
 import themes from '@/store/themes';
+import localForage from 'localforage';
+import { download } from '../utils/helpers';
 
 Vue.use(Vuex);
 
@@ -35,5 +37,24 @@ export default new Vuex.Store({
   },
   state: {},
   mutations: {},
-  actions: {},
+  actions: {
+    async exportJson() {
+      let results = [];
+      const keys = await localForage.keys();
+      keys.forEach((key) => {
+        results.push(localForage.getItem(key));
+      });
+      results = await Promise.all(results);
+
+      const data = {};
+      keys.forEach((key, index) => {
+        data[key] = results[index];
+      });
+
+      download(JSON.stringify(data), 'serverless-invoices.json', 'application/json');
+    },
+    importJson() {
+
+    },
+  },
 });

src/utils/helpers.js

@@ -29,3 +29,21 @@ export function pick(obj, map) {
   });
   return objSubset;
 }
+
+export function download(data, filename, type) {
+  var file = new Blob([data], {type: type});
+  if (window.navigator.msSaveOrOpenBlob) // IE10+
+    window.navigator.msSaveOrOpenBlob(file, filename);
+  else { // Others
+    var a = document.createElement("a"),
+      url = URL.createObjectURL(file);
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    setTimeout(function() {
+      document.body.removeChild(a);
+      window.URL.revokeObjectURL(url);
+    }, 0);
+  }
+}

src/views/dashboard/Invoices.vue

@@ -3,7 +3,16 @@
         <div class="row">
             <div class="col-12 mb-4 d-flex justify-content-between">
                 <h4 class="mb-0">Invoices</h4>
-                <button class="btn btn-sm btn-outline-dark" @click="createNewInvoice">New invoice</button>
+                <div>
+                    <b-dropdown variant="link" size="sm" no-caret right>
+                        <template slot="button-content">
+                            <i class="material-icons">more_vert</i>
+                        </template>
+                        <b-dropdown-item @click="exportJson">Export</b-dropdown-item>
+                        <b-dropdown-item @click="importJson">Import</b-dropdown-item>
+                    </b-dropdown>
+                    <button class="btn btn-sm btn-outline-dark" @click="createNewInvoice">New invoice</button>
+                </div>
             </div>
         </div>
         <div class="row">
@@ -15,6 +24,7 @@
 </template>
 
 <script>
+import { BDropdown, BDropdownItem } from 'bootstrap-vue';
 import { mapGetters } from 'vuex';
 import InvoicesList from '@/components/invoices/InvoicesList';
 
@@ -22,6 +32,8 @@ export default {
   name: 'invoices',
   components: {
     InvoicesList,
+    BDropdown,
+    BDropdownItem,
   },
   computed: {
     ...mapGetters({
@@ -33,6 +45,12 @@ export default {
       this.$store.dispatch('invoices/createNewInvoice')
         .then(id => this.$router.push({ name: 'invoice', params: { id } }));
     },
+    exportJson() {
+      this.$store.dispatch('exportJson');
+    },
+    importJson() {
+      this.$store.dispatch('importJson');
+    },
   },
 };
 </script>