- created logo FreePlanet in SVG animation !

src/components/categories/index.ts

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

src/components/categories/tabledata/index.ts

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

src/components/categories/tabledata/tabledata.ts

@@ -0,0 +1,198 @@
+import Vue from 'vue'
+import { Component, Watch } from 'vue-property-decorator'
+
+import { ICategory } from '@src/model'
+
+require('./tabledata.scss')
+
+
+@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',
+    }
+  ]
+
+  @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: ''
+    }
+    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) {
+
+    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]
+
+  }
+
+  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)) {
+      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/tabledata/tabledata.vue

@@ -0,0 +1,61 @@
+<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>

src/components/index.ts

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

src/components/logo/index.ts

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

src/components/logo/logo.scss

@@ -0,0 +1,48 @@
+.svgclass{
+  color: white;
+  transform: translateY(0px);
+
+}
+
+.svgclass_animate {
+  transform: translateY(-70px);
+  color: red;
+}
+
+#sun {
+  animation: around 5s infinite;
+
+}
+
+@keyframes gravity{
+  0%{
+    transform: rotateY(0deg);
+  }
+  100%{
+    transform: rotateY(360deg);
+  }
+}
+
+
+@keyframes around {
+  0% {
+    cx: 20;
+    cy: 22;
+  }
+  20% {
+    cx: 25;
+    cy: 24;
+  }
+  50% {
+    cx: 40;
+    cy: 26;
+  }
+  80% {
+    cx: 55;
+    cy: 24;
+  }
+  100% {
+    cx: 60;
+    cy: 22;
+  }
+}

src/components/logo/logo.ts

@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import { Component } from 'vue-property-decorator'
+
+require('./logo.scss')
+
+import { TimelineLite, Back } from 'gsap'
+
+@Component({
+
+})
+export default class Logo extends Vue {
+  svgclass: string = 'svgclass'
+  created() {
+    this.animate()
+  }
+
+  animate () {
+    const timeline = new TimelineLite()
+
+    timeline.to('#sun', 5, {
+      cy: 20,
+      cx: 60,
+      ease: Back.easeInOut // Specify an ease
+    })
+
+  }
+
+  public logoimg() {
+    return process.env.LOGO_REG
+  }
+
+}

src/components/logo/logo.vue

@@ -0,0 +1,7 @@
+<template>
+    <div id="logo">
+        <img id="logoimg" alt="FreePlanet" :src="`assets/${logoimg()}`">
+    </div>
+</template>
+<script lang="ts" src="./logo.ts">
+</script>