Cleaning Code, moving functions...

src/views/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/views/categories/SingleCat/SingleCat.ts

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

src/views/categories/SingleCat/SingleCat.vue

@@ -0,0 +1,23 @@
+<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>
+
+<style lang="scss" scoped>
+    @import './SingleCat';
+</style>

src/views/categories/SingleCat/index.ts

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

src/views/categories/category/category.scss

@@ -0,0 +1,3 @@
+.mycard {
+  visibility: hidden;
+}

src/views/categories/category/category.ts

@@ -0,0 +1,207 @@
+import Vue from 'vue'
+import { Component, Watch } from 'vue-property-decorator'
+
+import { SingleCat } from '../SingleCat/index'
+import { ICategory } from '../../../model/index'
+import { tools } from '../../../store/Modules/tools'
+
+
+@Component({
+  components: { SingleCat }
+})
+export default class Category extends Vue {
+  $q: any
+
+  filter: boolean = false
+  title: string = ''
+  category: string = ''
+  categories_loc: any[] = [{}]
+  categories_arr: any[] = [{}]
+  selected: any [] = []
+  selectedSecond: any [] = []
+
+  data: any [] = [{
+    id: 0,
+    descr_it: 'Frozen Yogurt',
+    descr_en: '',
+    descr_es: '',
+    campo2bool: true
+  },
+    {
+      id: 1,
+      descr_it: 'Secondo',
+      descr_en: '',
+      descr_es: '',
+      campo2bool: false
+    }]
+
+  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',
+    },
+    {
+      name: 'campo2bool',
+      label: 'campo2bool',
+      align: 'left',
+      field: 'campo2bool',
+      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_loc = ris)
+
+    this.updatetable()
+  }
+
+  initcat() {
+
+    const objcat: ICategory = {
+      descr_it: '',
+      descr_en: '',
+      descr_es: '',
+      campo2bool: true
+    }
+    return objcat
+
+  }
+
+  async insertCategory() {
+
+    const objcat = this.initcat()
+
+    let myid = 0
+    objcat.descr_it = this.category
+
+    // Add to Indexdb
+    await this.$db.categories.add(objcat
+    ).then(ris => {
+      myid = ris
+    })
+
+    objcat.id = myid
+
+    // Add into the memory
+    this.categories_loc.push(objcat)
+
+    // empty the field
+    this.category = ''
+  }
+
+  async deleteCategory(myarrobj) {
+
+    for (const myobj of myarrobj) {
+
+      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]
+
+  }
+
+  async filterCategories() {
+
+    if (this.filter) {
+      // #Todo If need to filter the output database ...
+      this.$db.categories
+        .where('descr_it').notEqual('nonlovedi')
+        .toArray()
+        .then((response) => {
+          Promise.all(response.map(key => key))
+            .then((myarr) => {
+              this.categories_loc = [...myarr]
+              return this.categories_loc
+            })
+        })
+    } else {
+      return this.categories_loc
+    }
+  }
+
+  deleteRow() {
+    console.log('SEL = ', this.selectedSecond)
+
+    const seldel = [...this.selectedSecond]
+    if (this.deleteCategory(this.selectedSecond)) {
+      tools.showNotif(this.$q, `Deleted ` + (seldel.length.toString()) + ' item', {
+        color: 'primary',
+        icon: 'delete',
+      })
+    }
+
+  }
+
+  /*
+  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/views/categories/category/category.vue

@@ -0,0 +1,67 @@
+<template>
+    <q-page>
+        <div class="panel">
+            <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"/>
+
+            <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>
+
+
+            <!-- <SingleTodo :itemcat='mycat' v-for="mycat of categories_arr" :key="mycat._id"/> -->
+        </div>
+    </q-page>
+
+
+</template>
+<script lang="ts" src="./category.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './category';
+</style>

src/views/categories/category/index.ts

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

src/views/categories/index.ts

@@ -0,0 +1,3 @@
+export * from './SingleCat/index'
+export * from './category/index'
+export * from './tabledata/index'

src/views/categories/tabledata/index.ts

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

src/views/categories/tabledata/tabledata.ts

@@ -0,0 +1,205 @@
+import Vue from 'vue'
+import { Component, Watch } from 'vue-property-decorator'
+
+import { ICategory } from '../../../model/index'
+import globalroutines from "../../../globalroutines/index"
+import { tools } from "../../../store/Modules/tools"
+
+@Component({
+})
+export default class Tabledata extends Vue {
+  $q: any
+
+  filter: boolean = false
+  title: string = ''
+  category: string = ''
+  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',
+    },
+    {
+      name: 'campo2bool',
+      label: 'campo2bool',
+      align: 'left',
+      field: 'campo2bool',
+      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_loc = ris)
+
+    this.updatetable()
+  }
+
+  initcat() {
+
+    const objcat: ICategory = {
+      descr_it: '',
+      descr_en: '',
+      descr_es: '',
+      campo2bool: false
+    }
+    return objcat
+
+  }
+
+  async insertCategory() {
+
+    const objcat = this.initcat()
+
+    let myid = 0
+    objcat.descr_it = this.category
+
+    // Add to Indexdb
+    await this.$db.categories.put(objcat
+    ).then(ris => {
+      myid = ris
+    })
+
+    objcat.id = myid
+
+    // Add into the memory
+    this.categories_loc.push(objcat)
+
+    // empty the field
+    this.category = ''
+  }
+
+  async deleteCategory(myarrobj) {
+
+    for (const myobj of myarrobj) {
+
+      if (!!myobj.id) {
+        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.splice(this.categories_loc.indexOf(myobj), 1)
+
+          this.updatetable()
+
+          return deleteCount
+        }
+      }
+    }
+
+  }
+
+  updatetable() {
+
+    this.filterCategories()
+    this.categories_arr = [...this.categories_loc]
+
+  }
+
+  async filterCategories() {
+
+    if (this.filter) {
+      // #Todo If need to filter the output database ...
+      this.$db.categories
+        .where('descr_it').notEqual('nonlovedi')
+        .toArray()
+        .then((response) => {
+          Promise.all(response.map(key => key))
+            .then((myarr) => {
+              this.categories_loc = [...myarr]
+              return this.categories_loc
+            })
+        })
+    } else {
+      return this.categories_loc
+    }
+  }
+
+  deleteRow() {
+    console.log('SEL = ', this.selectedSecond)
+
+    const seldel = [...this.selectedSecond]
+    if (this.deleteCategory(this.selectedSecond)) {
+      tools.showNotif(this.$q, `Deleted ` + (seldel.length.toString()) + ' item', {
+        color: 'primary',
+        icon: 'delete'
+      })
+
+
+    }
+
+  }
+
+  /*
+  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/views/categories/tabledata/tabledata.vue

@@ -0,0 +1,65 @@
+<template>
+    <q-page>
+        <div class="panel">
+            <p class="caption">Table Data:</p>
+
+            <q-input v-model="category" inverted float-label="Inserisci la Categoria"
+                     :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
+                     v-on:keyup.enter="insertCategory"/>
+
+            <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>
+
+        </div>
+    </q-page>
+
+
+</template>
+<script lang="ts" src="tabledata.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import 'tabledata';
+</style>