- todo: added priority, expired, pos fields.

- todo: delete item.
- sorted by fields.

src/components/categories/category/category.ts

@@ -25,13 +25,15 @@ export default class Category extends Vue {
     id: 0,
     descr_it: 'Frozen Yogurt',
     descr_en: '',
-    descr_es: ''
+    descr_es: '',
+    campo2bool: true
   },
     {
       id: 1,
       descr_it: 'Secondo',
       descr_en: '',
-      descr_es: ''
+      descr_es: '',
+      campo2bool: false
     }]
 
   columns: any [] = [
@@ -59,6 +61,14 @@ export default class Category extends Vue {
       field: 'descr_es',
       sortable: true,
       classes: 'my-class',
+    },
+    {
+      name: 'campo2bool',
+      label: 'campo2bool',
+      align: 'left',
+      field: 'campo2bool',
+      sortable: true,
+      classes: 'my-class',
     }
   ]
 
@@ -82,7 +92,8 @@ export default class Category extends Vue {
     const objcat: ICategory = {
       descr_it: '',
       descr_en: '',
-      descr_es: ''
+      descr_es: '',
+      campo2bool: true
     }
     return objcat
 

src/components/categories/category/category.vue

@@ -53,7 +53,7 @@
             </q-table>
 
 
-            <!-- <SingleCat :itemcat='mycat' v-for="mycat of categories_arr" :key="mycat.id"/> -->
+            <!-- <SingleTodo :itemcat='mycat' v-for="mycat of categories_arr" :key="mycat.id"/> -->
         </div>
     </q-page>
 

src/components/categories/tabledata/tabledata.ts

@@ -57,6 +57,14 @@ export default class Tabledata extends Vue {
       field: 'descr_es',
       sortable: true,
       classes: 'my-class',
+    },
+    {
+      name: 'campo2bool',
+      label: 'campo2bool',
+      align: 'left',
+      field: 'campo2bool',
+      sortable: true,
+      classes: 'my-class',
     }
   ]
 
@@ -80,7 +88,8 @@ export default class Tabledata extends Vue {
     const objcat: ICategory = {
       descr_it: '',
       descr_en: '',
-      descr_es: ''
+      descr_es: '',
+      campo2bool: false
     }
     return objcat
 
@@ -123,7 +132,7 @@ export default class Tabledata extends Vue {
         console.log('deleteCount = ', deleteCount)
         if (deleteCount > 0) {
           // Remove into the memory
-          this.categories_loc.slice(this.categories_loc.indexOf(myobj), 1)
+          this.categories_loc.splice(this.categories_loc.indexOf(myobj), 1)
 
           this.updatetable()
 

src/components/index.ts

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

src/components/logo/logo.scss

@@ -23,3 +23,7 @@
   }
 }
 
+#smile{
+  opacity: 0.1 !important;
+  fill: red;
+}

src/components/logo/logo.ts

@@ -5,6 +5,9 @@ require('./logo.scss')
 
 import { TimelineLite, Back } from 'gsap'
 
+import $ from 'jquery'
+import Timeout = NodeJS.Timeout
+
 @Component({
 
 })
@@ -19,11 +22,33 @@ export default class Logo extends Vue {
   animate () {
     const timeline = new TimelineLite()
 
-    timeline.to('#sun', 5, {
+    /*
+
+    let mysmile = $('#smile')
+
+    mysmile.attr('class', 'smile_hide')
+
+    setTimeout(() => {
+      mysmile.removeClass('smilevisible')
+      mysmile.addClass('smile_hide')
+    }, 1000)
+
+
+    setTimeout(() => {
+      mysmile.addClass('smilevisible')
+      mysmile.removeClass('smile_hide')
+    }, 10000)
+
+    */
+
+
+    /*
+    timeline.to('#smile', 5, {
       cy: 20,
       cx: 60,
       ease: Back.easeInOut // Specify an ease
     })
+    */
 
   }
 

src/components/todos/SingleTodo/SingleTodo.scss

@@ -0,0 +1,37 @@
+.flex-container {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  -ms-box-orient: horizontal;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -moz-flex;
+  display: -webkit-flex;
+  display: flex;
+}
+
+
+#appsingletodo {
+  color: white;
+  font-size: 1.1rem;
+  display: flex;
+  margin: 2px;
+  padding: 3px;
+  border: 2px;
+  background-color: #9db6ff;
+}
+
+.mycols{
+  padding: 2px;
+  margin: 1px;
+  border-color: #8a8484;
+  border-style: outset;
+  /* background-color: green; */
+}
+
+.mybtn{
+  width: 18px;
+  height: 18px;
+}

src/components/todos/SingleTodo/SingleTodo.ts

@@ -0,0 +1,36 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+
+require('./SingleTodo.scss')
+
+import { rescodes } from '../../../store/Modules/rescodes'
+import { UserStore } from '@modules'
+
+import { ITodo } from '../../../model/index'
+
+@Component({
+  name: 'SingleTodo'
+})
+export default class SingleTodo extends Vue {
+  public selectPriority: []
+  @Prop({required: true}) itemtodo: ITodo
+
+  @Watch('itemtodo.completed') valueChanged() {
+    this.$emit('eventupdate', this.itemtodo)
+  }
+  @Watch('itemtodo.expiring_at') valueChanged2() {
+    this.$emit('eventupdate', this.itemtodo)
+  }
+  @Watch('itemtodo.priority') valueChanged3() {
+    this.$emit('eventupdate', this.itemtodo)
+  }
+
+  created() {
+    this.selectPriority = rescodes.selectPriority[UserStore.state.lang]
+  }
+
+  remove(id) {
+    this.$emit('event', id)
+  }
+
+}

src/components/todos/SingleTodo/SingleTodo.vue

@@ -0,0 +1,30 @@
+<template>
+    <div id="appsingletodo" class="flex-container">
+
+        <div class="doc-container">
+            <div class="row">
+                <div class="flex-item mycols">P: {{ itemtodo.pos }}</div>
+                <q-checkbox class="flex-item mycols" v-model="itemtodo.completed" :label="itemtodo.descr" />
+                <div class="flex-item mycols">
+                <q-select
+                        v-model="itemtodo.priority"
+                        float-label=""
+                        radio
+                        :options="selectPriority"
+                />
+                </div>
+
+                <div class="flex-item mycols"><q-datetime
+                        v-model="itemtodo.expiring_at"/></div>
+                <div class="flex-item mycols">
+                    <q-btn class="mybtn" round color="" icon="delete" @click="remove(itemtodo.id)"></q-btn>
+                </div>
+
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script lang="ts" src="./SingleTodo.ts">
+</script>

src/components/todos/SingleTodo/index.ts

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

src/components/todos/index.ts

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

src/components/todos/todo/index.ts

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

src/components/todos/todo/todo.scss

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

src/components/todos/todo/todo.ts

@@ -0,0 +1,191 @@
+import Vue from 'vue'
+import { Component, Watch } from 'vue-property-decorator'
+
+import { SingleTodo } from '@components'
+import { ITodo } from '@src/model'
+
+require('./todo.scss')
+
+import { rescodes } from '../../../store/Modules/rescodes'
+
+import { UserStore } from '@modules'
+
+import _ from 'lodash'
+
+@Component({
+  components: { SingleTodo }
+})
+export default class Todo extends Vue {
+  $q: any
+
+  filter: boolean = false
+  title: string = ''
+  todo: string = ''
+  todos_arr: any[] = [{}]
+
+
+  created() {
+    this.loadCat()
+  }
+
+  showlistaTodos(nomelista = '') {
+
+    // console.log('todos_arr: ')
+    this.todos_arr.forEach((todo, key) => {
+      console.log('Todo n"' + key + ': ' + todo)
+    })
+  }
+
+  loadCat() {
+    this.updatetable()
+  }
+
+  initcat() {
+
+    const mydateexp = new Date().setDate((new Date()).getDate() + 1)
+
+    const objtodo: ITodo = {
+      userId: UserStore.state.userId,
+      descr: '',
+      pos: -1,
+      priority: rescodes.Todos.PRIORITY_NORMAL,
+      completed: false,
+      created_at: new Date(),
+      modify_at: new Date(),
+      expiring_at: mydateexp
+    }
+    return objtodo
+
+  }
+
+  getLastPos() {
+    let max = 0
+    this.todos_arr.forEach(myobj => {
+      if (myobj.pos > max)
+        max = myobj.pos
+    })
+
+    return max + 1
+
+  }
+
+  async insertTodo() {
+
+    const objtodo = this.initcat()
+
+    let myid = 0
+    objtodo.descr = this.todo
+    objtodo.pos = this.getLastPos()
+
+    // Add to Indexdb
+    await this.$db.todos.add(objtodo
+    ).then(() => {
+      this.updatetable()
+    }).catch(err => {
+      console.log('Errore: ' + err.message)
+    })
+
+    // objtodo.id = myid
+
+    // Add into the memory
+    // this.todos_loc.push(objtodo)
+
+    // empty the field
+    this.todo = ''
+  }
+
+  deleteitem(id) {
+    // console.log('deleteitem: KEY = ', id)
+
+    let myobjtrov = null
+    this.todos_arr.forEach(myobj => {
+      if (myobj.id === id)
+        myobjtrov = myobj
+    })
+
+    if (myobjtrov !== null) {
+      // Delete item
+      this.$db.todos
+        .where('id').equals(id)
+        .delete()
+        .then(() => {
+          this.updatetable()
+        })
+    }
+  }
+
+  async updatetable() {
+    await this.filtertodos()
+  }
+
+  async filtertodos() {
+
+    if (this.filter) {
+      // #Todo If need to filter the output database ...
+      await this.$db.todos
+        .where('userId').equals(UserStore.state.userId)
+        .toArray()
+        .then((response) => {
+          Promise.all(response.map(key => key))
+            .then((ristodos) => {
+              this.todos_arr = ristodos
+            })
+        })
+    } else {
+
+      // this.$db.dispatch('todosSetSort', { sort: 'pos' } )
+
+      let coll = this.$db.todos
+
+      await this.$db.todos
+        .where('userId').equals(UserStore.state.userId)
+        // .sortBy('descr')
+
+        .toArray().then(ristodos => {
+          this.todos_arr = ristodos
+        })
+
+
+      let reverse = []
+      reverse['completed'] = true
+      reverse['priority'] = true
+      reverse['pos'] = true
+      console.log(reverse)
+
+      this.todos_arr = _.orderBy(this.todos_arr, ['completed', 'priority', 'pos'], ['asc', 'desc', 'asc'])
+    }
+    return []
+  }
+
+  /*
+  await db.transaction('rw', [db.friends], async () => {
+  const friend = await db.friends.get(1);
+  ++friend.age;
+  await db.friends.put(friend);
+  });
+   */
+
+  updateitem(myobj) {
+    console.log('updateitem')
+    this.modify(myobj)
+  }
+
+
+  async modify(myobj) {
+    await this.$db.transaction('rw', [this.$db.todos], async () => {
+      const miorec = await this.$db.todos.get(myobj.id)
+
+      miorec.modify_at = new Date()
+      miorec.completed = myobj.completed
+      miorec.expiring_at = myobj.expiring_at
+      miorec.priority = myobj.priority
+
+      await this.$db.todos.put(miorec)
+
+      this.updatetable()
+    })
+
+  }
+
+
+}

src/components/todos/todo/todo.vue

@@ -0,0 +1,20 @@
+<template>
+    <q-page>
+        <div class="panel">
+            <p class="caption"></p>
+
+            <q-input v-model="todo" inverted float-label="Inserisci il Todo"
+                     :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
+                     v-on:keyup.enter="insertTodo"/>
+
+            <SingleTodo @event="deleteitem" @eventupdate="updateitem" :itemtodo='mytodo' v-for="mytodo of todos_arr" :key="mytodo.id">
+
+            </SingleTodo>
+
+        </div>
+    </q-page>
+
+
+</template>
+<script lang="ts" src="./todo.ts">
+</script>