Merge pull request #11 from paoloar77/Categories

Categories

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
+

package.json

@@ -85,6 +85,7 @@
     "jest": "^23.6.0",
     "json-loader": "^0.5.4",
     "node-sass": "^4.11.0",
+    "postcss-loader": "^3.0.0",
     "quasar-cli": "^0.17.20",
     "sass-loader": "^7.1.0",
     "strip-ansi": "=3.0.1",

quasar.conf.js

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

src/components/categories/SingleCat/SingleCat.scss

@@ -0,0 +1,17 @@
+#appsinglecat {
+  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

@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import { Component, Prop } from 'vue-property-decorator'
+
+require('./SingleCat.scss')
+
+import { ICategory } from '../../../model/index'
+
+@Component({
+
+})
+export default class SingleCat extends Vue {
+  @Prop({required: true}) itemcat: ICategory
+
+
+  created() {
+
+  }
+
+  remove() {
+
+  }
+
+}

src/components/categories/SingleCat/SingleCat.vue

@@ -0,0 +1,19 @@
+<template>
+    <div id="appsinglecat" class="flex-row-docs">
+        <!--
+        <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>
+
+<script lang="ts" src="./SingleCat.ts">
+</script>

src/components/categories/SingleCat/index.ts

@@ -0,0 +1 @@
+export {default as SingleCat} from './SingleCat.vue'

src/components/categories/category/category.ts

@@ -1,47 +1,145 @@
 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'
 
 require('./category.scss')
 
 
-@Component({})
+@Component({
+  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()
   }
 
+  initcat() {
+
+    const objcat: ICategory = {
+      descr_it: '',
+      descr_en: '',
+      descr_es: ''
+    }
+    return objcat
+
+  }
+
   async insertCategory() {
 
+    const objcat = this.initcat()
+
     let myid = 0
-    const mycat = this.category
+    objcat.descr_it = this.category
+
     // Add to Indexdb
-    await this.$db.categories.add(
-      { descr_it: mycat }
+    await this.$db.categories.add(objcat
     ).then(ris => {
       myid = ris
     })
 
-    // created_at: new Date(),
+    objcat.id = myid
 
     // Add into the memory
-    this.categories_arr.push({ descr_it: mycat, id: myid })
+    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]
 
   }
 
@@ -55,13 +153,48 @@ export default class Category extends Vue {
         .then((response) => {
           Promise.all(response.map(key => key))
             .then((myarr) => {
-              this.categories_arr = [...myarr]
-              return this.categories_arr
+              this.categories_loc = [...myarr]
+              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

@@ -1,16 +1,59 @@
 <template>
     <q-page>
         <div class="panel">
-            <p class="caption">Category:</p>
+            <p class="caption">Singlecat:</p>
 
             <q-input v-model="category" inverted float-label="Inserisci la Categoria"
                      :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>
+            <q-table
+                    title="Categories"
+                    :data="categories_arr"
+                    :columns="columns"
+                    row-key="id"
+                    selection="multiple"
+                    color="secondary"
+                    :selected.sync="selectedSecond">
+
+
+                <!--
+
+                <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>
 

src/components/categories/category/index.ts

@@ -0,0 +1 @@
+export {default as Category} from './category.vue'

src/components/categories/index.ts

@@ -0,0 +1,2 @@
+export * from './SingleCat'
+export * from './category'

src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './categories'
+

src/css/app.styl

@@ -1,4 +1 @@
 // app global css
-/*------------------------------------------------------------------
-[Table of contents]
-# overwrite some style of stylus

src/model/Categories.ts

@@ -0,0 +1,6 @@
+export interface ICategory {
+  id?: number,
+  descr_it?: string
+  descr_en?: string
+  descr_es?: string
+}

src/model/index.ts

@@ -4,3 +4,5 @@ export * from './signin-option'
 export * from './signup-option'
 export * from './key-value'
 export * from './payload'
+
+export * from './Categories'

tsconfig.json

@@ -24,6 +24,7 @@
     "baseUrl": "./src",
     "paths": {
       "@src/*": ["./*"],
+      "@components": ["./components/index.ts"],
       "@classes": ["./classes/index.ts"],
       "@utils/*": ["./utils/*"],
       "@validators": ["./utils/validators.ts"],