- q-table component,

- delete item in indexdb

docs/docs.txt

@@ -0,0 +1,6 @@
+xs	576px	Extra small sized window
+sm	768px	Small sized window
+md	992px	Medium-sized window
+lg	1200px	Large sized window
+xl	Infinite	Extra large sized window
+

quasar.conf.js

@@ -146,6 +146,7 @@ module.exports = function (ctx) {
         'QSpinnerGears',
         'QDatetime',
         'QSlideTransition',
+        'QTable',
       ],
       directives: [
         'Ripple',

src/components/categories/SingleCat/SingleCat.scss

@@ -1,3 +1,17 @@
-.mycard {
+#appsinglecat {
-  visibility: hidden;
+  color: white;
+  font-size: 1.2rem;
+  display: flex;
+  margin: 2px;
+  padding: 3px;
+  border: 2px;
+  background-color: #3b5998;
+}
+
+.mycols{
+  padding: 1px;
+  margin: 2px;
+  border-color: #d50000;
+  border-style: outset;
+  background-color: green;
 }

src/components/categories/SingleCat/SingleCat.ts

@@ -11,8 +11,13 @@ import { ICategory } from '../../../model/index'
 export default class SingleCat extends Vue {
   @Prop({required: true}) itemcat: ICategory
 
+
   created() {
 
   }
 
+  remove() {
+
+  }
+
 }

src/components/categories/SingleCat/SingleCat.vue

@@ -1,6 +1,17 @@
 <template>
-    <div id="appsinglecat">
+    <div id="appsinglecat" class="flex-row-docs">
-        Descr: {{ itemcat.descr_it }}
+        <!--
+        <div class="doc-container">
+            <div class="row gutter-sm">
+                <div class="col-xs-12 col-sm-6 mycols">IT: {{ itemcat.descr_it }}</div>
+                <div class="col-xs-12 col-sm-6 mycols">EN: {{ itemcat.descr_en }}</div>
+                <div class="col-12 mycols">
+                    <q-btn round color="primary" icon="remove" @click="remove()"></q-btn>
+                </div>
+
+            </div>
+        </div>
+        -->
     </div>
 </template>
 

src/components/categories/category/category.ts

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { Component } from 'vue-property-decorator'
+import { Component, Watch } from 'vue-property-decorator'
 
 import { SingleCat } from '@components'
 import { ICategory } from '@src/model'
@@ -11,16 +11,68 @@ require('./category.scss')
   components: { SingleCat }
 })
 export default class Category extends Vue {
+  $q: any
+
   filter: boolean = false
+  title: string = ''
   category: string = ''
-  categories_arr: any[] = null
+  categories_loc: any[] = [{}]
+  categories_arr: any[] = [{}]
+  selected: any [] = []
+  selectedSecond: any [] = []
+
+  data: any [] = [{
+    id: 0,
+    descr_it: 'Frozen Yogurt',
+    descr_en: '',
+    descr_es: ''
+  },
+    {
+      id: 1,
+      descr_it: 'Secondo',
+      descr_en: '',
+      descr_es: ''
+    }]
+
+  columns: any [] = [
+    {
+      name: 'descr_it',
+      required: true,
+      label: 'IT',
+      align: 'left',
+      field: 'descr_it',
+      sortable: true,
+      classes: 'my-class',
+    },
+    {
+      name: 'descr_en',
+      label: 'EN',
+      align: 'left',
+      field: 'descr_en',
+      sortable: true,
+      classes: 'my-class',
+    },
+    {
+      name: 'descr_es',
+      label: 'ES',
+      align: 'left',
+      field: 'descr_es',
+      sortable: true,
+      classes: 'my-class',
+    }
+  ]
+
+  @Watch('categories_loc') valueChanged() {
+    this.updatetable()
+  }
+
 
   created() {
     this.loadCat()
   }
 
   async loadCat() {
-    await this.$db.categories.toArray().then(ris => this.categories_arr = ris)
+    await this.$db.categories.toArray().then(ris => this.categories_loc = ris)
 
     this.updatetable()
   }
@@ -28,7 +80,6 @@ export default class Category extends Vue {
   initcat() {
 
     const objcat: ICategory = {
-      id: 0,
       descr_it: '',
       descr_en: '',
       descr_es: ''
@@ -50,19 +101,45 @@ export default class Category extends Vue {
       myid = ris
     })
 
-    // created_at: new Date(),
-
     objcat.id = myid
 
     // Add into the memory
-    this.categories_arr.push(objcat)
+    this.categories_loc.push(objcat)
+
+    // empty the field
+    this.category = ''
+  }
+
+  async deleteCategory(myarrobj) {
+
+    await myarrobj.forEach(myobj => {
+
+      if (myobj.id !== undefined) {
+        console.log('KEY = ', myobj.id)
+
+        // Delete item
+        let deleteCount = this.$db.categories
+          .where('id').equals(myobj.id)
+          .delete()
+
+        console.log('deleteCount = ', deleteCount)
+        if (deleteCount > 0) {
+          // Remove into the memory
+          this.categories_loc.slice(this.categories_loc.indexOf(myobj), 1)
 
           this.updatetable()
+
+          return deleteCount
+        }
+      }
+    })
+
   }
 
   updatetable() {
 
     this.filterCategories()
+    this.categories_arr = [...this.categories_loc]
 
   }
 
@@ -76,13 +153,48 @@ export default class Category extends Vue {
         .then((response) => {
           Promise.all(response.map(key => key))
             .then((myarr) => {
-              this.categories_arr = [...myarr]
+              this.categories_loc = [...myarr]
-              return this.categories_arr
+              return this.categories_loc
             })
         })
     } else {
-      return this.categories_arr
+      return this.categories_loc
     }
   }
 
+  deleteRow() {
+    console.log('SEL = ', this.selectedSecond)
+
+    const seldel = [...this.selectedSecond]
+    if (this.deleteCategory(this.selectedSecond)) {
+      this.$q.notify({
+        color: 'primary',
+        icon: 'delete',
+        message: `Deleted ` + (seldel.length.toString()) + ' item'
+      })
+
+
+    }
+
+  }
+
+  /*
+  await db.transaction('rw', [db.friends], async () => {
+  const friend = await db.friends.get(1);
+  ++friend.age;
+  await db.friends.put(friend);
+  });
+   */
+
+  async modify() {
+    // esempio da sistemare
+    await this.$db.transaction('rw', [this.$db.categories], async () => {
+      const friend = await this.$db.get(1)
+      ++friend.age
+      await this.$db.put(friend)
+    })
+
+  }
+
+
 }

src/components/categories/category/category.vue

@@ -7,11 +7,53 @@
                      :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
                      v-on:keyup.enter="insertCategory"/>
 
-            <ul>
+            <q-table
-                Lista:
+                    title="Categories"
+                    :data="categories_arr"
+                    :columns="columns"
+                    row-key="id"
+                    selection="multiple"
+                    color="secondary"
+                    :selected.sync="selectedSecond">
 
-                <SingleCat :itemcat='mycat' v-for="mycat of categories_arr" :key="mycat.id"/>
+
-            </ul>
+                <!--
+
+                <q-tr slot="body" slot-scope="props" :props="props">
+                    <q-td key="desc" :props="props">
+                      {{ props.row.name }}
+                      <q-popup-edit v-model="props.row.name">
+                        <q-field count>
+                          <q-input v-model="props.row.name" />
+                        </q-field>
+                      </q-popup-edit>
+                    </q-td>
+                    <q-td key="calories" :props="props">
+                      {{ props.row.calories }}
+                      <q-popup-edit v-model="props.row.calories" title="Update calories" buttons>
+                        <q-input type="number" v-model="props.row.calories" />
+                      </q-popup-edit>
+                    </q-td>
+                    <q-td key="fat" :props="props">{{ props.row.fat }}</q-td>
+                    <q-td key="carbs" :props="props">{{ props.row.carbs }}</q-td>
+                    <q-td key="protein" :props="props">{{ props.row.protein }}</q-td>
+                    <q-td key="sodium" :props="props">{{ props.row.sodium }}</q-td>
+                    <q-td key="calcium" :props="props">{{ props.row.calcium }}</q-td>
+                    <q-td key="iron" :props="props">{{ props.row.iron }}</q-td>
+                  </q-tr>
+                    -->
+
+                <!-- gets displayed only when there's at least one row selected -->
+                <template slot="top-selection" slot-scope="props">
+                    <!--<q-btn color="secondary" flat label="Action 1" class="q-mr-sm"/>
+                    <q-btn color="secondary" flat label="Action 2"/>-->
+                    <div class="col"/>
+                    <q-btn color="negative" flat round delete icon="delete" @click="deleteRow"/>
+                </template>
+            </q-table>
+
+
+            <!-- <SingleCat :itemcat='mycat' v-for="mycat of categories_arr" :key="mycat.id"/> -->
         </div>
     </q-page>