- Added VueIdb plugins: $db.mytable.add({myelem:'value'}) to insert a record, and $db.mytable.toArray() to receive the array.

quasar.conf.js

@@ -59,7 +59,7 @@ module.exports = function (ctx) {
       store: 'src/store/index.ts'
     },
     // app plugins (/src/plugins)
-    plugins: ['i18n', 'axios', 'vee-validate', 'myconfig', 'local-storage', 'error-handler', 'indexdb'],
+    plugins: ['i18n', 'axios', 'vee-validate', 'myconfig', 'local-storage', 'error-handler', 'indexdb', 'vue-idb'],
     css: [
       'app.styl'
     ],

src/App.vue

@@ -49,7 +49,7 @@
       UserStore.actions.autologin()
         .then((loginEseguito) => {
           if (loginEseguito) {
-            this.$router.replace('/')
+            // this.$router.replace('/')
           }
         })
     }

src/components/categories/category/category.ts

@@ -1,62 +1,67 @@
 import Vue from 'vue'
 import { Component } from 'vue-property-decorator'
-import { GlobalStore } from '@store'
-
-import VueIdb from 'vue-idb'
-
-Vue.use(VueIdb)
 
 require('./category.scss')
 
+
 @Component({})
 export default class Category extends Vue {
-  idb = null
+  filter: boolean = false
   category: string = ''
-  $t: any
+  categories_arr: any[] = null
 
   created() {
-    this.createdb()
-
-    this.caricaCat()
+    this.loadCat()
   }
 
-  createdb() {
-    // Inserisci la Categoria nel DB
-    this.idb = new VueIdb({
-      version: 1,
-      database: 'test',
-      schemas: [
-        { categories: '++id, sub_categ_id, descr_it' }
-      ]
+  async loadCat() {
+    await this.$db.categories.toArray().then(ris => this.categories_arr = ris)
+
+    this.updatetable()
+  }
+
+  async insertCategory() {
+
+    let myid = 0
+    const mycat = this.category
+    // Add to Indexdb
+    await this.$db.categories.add(
+      { descr_it: mycat }
+    ).then(ris => {
+      myid = ris
     })
 
+    // created_at: new Date(),
+
+    // Add into the memory
+    this.categories_arr.push({ descr_it: mycat, id: myid })
+
+    this.updatetable()
   }
 
+  updatetable() {
 
-  caricaCat() {
-    let mythis = this
-    this.idb.open().then(function () {
+    this.filterCategories()
 
-      return mythis.idb.categories
+  }
+
+  async filterCategories() {
+
+    if (this.filter) {
+      // #Todo If need to filter the output database ...
+      this.$db.categories
+        .where('descr_it').notEqual('nonlovedi')
         .toArray()
-
-    }).then(function () {
-
-      console.log('FINE LOAD')
+        .then((response) => {
+          Promise.all(response.map(key => key))
+            .then((myarr) => {
+              this.categories_arr = [...myarr]
+              return this.categories_arr
             })
+        })
+    } else {
+      return this.categories_arr
     }
-
-  insertCategory(): any {
-    let mythis = this
-
-    this.idb.open().then(function () {
-      console.log('Inserisci Cat: ', mythis.category)
-      return mythis.idb.categories.add({ descr_it: mythis.category })
-
-    }).then(function () {
-
-      console.log('FINE')
-    })
   }
 
 }

src/components/categories/category/category.vue

@@ -7,6 +7,10 @@
                      :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
                      v-on:keyup.enter="insertCategory"/>
 
+            <ul>
+                Lista:
+                <li v-for="item in categories_arr" :key="item.id"> {{ item.descr_it }} </li>
+            </ul>
         </div>
     </q-page>
 

src/layouts/drawer/menuOne.vue

@@ -8,7 +8,7 @@
                     {{replaceUnderlineToSpace(index)}} <div class="menu_freccina"><i aria-hidden="true" class="v-icon material-icons theme--light">keyboard_arrow_down</i></div>
                 </div>
                 <template v-for="child in parent.routes">
-                    <q-slide-transition duration="200">
+                    <q-slide-transition :duration=200>
                         <div v-show="parent.show">
                             <q-item link :to="child.route" exact
                                     class="item item-link drawer-closer cursor-pointer">

src/plugins/vue-idb.js

@@ -0,0 +1,28 @@
+import Vue from 'vue'
+import VueIdb from 'vue-idb'
+
+export default ({ Vue }) => {
+  Vue.use(VueIdb)
+
+  // Insert here the database for IndexDB
+  new VueIdb({
+    version: 1,
+    database: 'test',
+    schemas: [
+      { categories: '++id, sub_categ_id, descr_it' }
+    ]
+  })
+}
+
+
+/*
+
+
+export default new VueIdb({
+  version: 1,
+  database: 'test',
+  schemas: [
+    { categories: '++id, sub_categ_id, descr_it' }
+  ]
+})
+*/

src/typings/libs/vue-idb.d.ts

@@ -0,0 +1,7 @@
+import { VueIdb } from 'vue-idb'
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $db: VueIdb
+  }
+}