Added and linked todo list to the project list

src/components/CDate/CDate.scss

@@ -0,0 +1,40 @@
+$heightBtn: 100%;
+
+.flex-item{
+  // background-color: #d5e2eb;
+  display: flex;
+  padding: 2px;
+  margin: 2px;
+  margin-left: 3px;
+  margin-right: 3px;
+  color: #000;
+  font-size: 1rem;
+  height: $heightBtn;
+  line-height: $heightBtn;
+  vertical-align: middle;
+  //flex: 0 0 100%;
+}
+
+.progress-item {
+  margin: 1px;
+  padding: 2px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  flex: 1;
+  flex-direction: column;
+  order: 1;
+}
+
+.cpr-progrbar-item {
+  //height: 10px
+  padding-top: 7px;
+  height:15px;
+}
+
+.cpr-percProgress {
+  padding-top: 3px;
+  color: #888;
+  vertical-align: middle;
+  text-align: center;
+  //line-height: $heightitem;
+}

src/components/CDate/CDate.ts

@@ -0,0 +1,39 @@
+import Vue from 'vue'
+import { Component, Emit, Inject, Model, Prop, Provide } from 'vue-property-decorator'
+import { tools } from '@src/store/Modules/tools'
+import * as moment from 'moment'
+
+@Component({
+  name: 'CDate'
+})
+
+export default class CDate extends Vue {
+  // ************* IS NOT WORKING WELL ! ************
+  // @Model('input', {
+  //   default: ''
+  // })
+  // public mydate!: Date
+  @Prop() public myhint: string
+  @Model('input', {
+    default: '1999/01/01'
+  })
+  public mydate!: string
+
+  private valueInternal: string = '1988/01/01'
+
+  @Emit('input')
+  public onValueChanged(value: string) {
+    this.valueInternal = value
+  }
+
+  // get getmydate() {
+  //   console.log('getmydate', this.mydate)
+  //   return tools.getstrDate(this.mydate)
+  // }
+  //
+  // public updatedate(mydate) {
+  //   console.log('updatedate', mydate)
+  //   this.mydate = mydate
+  // }
+
+}

src/components/CDate/CDate.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <q-input dense v-model="mydate" mask="date" :hint="myhint">
+            <!--<span class="data_string">{{tools.getstrDate(itemsel.begin_development)}}</span>-->
+            <q-icon name="event" class="cursor-pointer" style="font-size: 1.5rem;">
+                <!--<q-popup-proxy>-->
+                    <!--<q-date v-model="mydate" today-btn/>-->
+                <!--</q-popup-proxy>-->
+            </q-icon>
+        </q-input>
+    </div>
+</template>
+
+<script lang="ts" src="./CDate.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CDate.scss';
+</style>

src/components/CDate/index.ts

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

src/components/CProgress/CProgress.scss

@@ -2,6 +2,7 @@ $heightBtn: 100%;
 
 .flex-item{
   // background-color: #d5e2eb;
+  display: flex;
   padding: 2px;
   margin: 2px;
   margin-left: 3px;

src/components/CProgress/CProgress.vue

@@ -1,17 +1,19 @@
 <template>
+    <div>
         <div class="flex-item progress-item shadow-1">
             <q-linear-progress
                     stripe
                     rounded
                     :value="progressval / 100"
                     class="cpr-progrbar-item"
-                :color="cpr_colProgress"
-        >
+                    :color="cpr_colProgress">
             </q-linear-progress>
+
             <div :class="cpr_percProgress">
                 {{getdescr}} {{progressval}}%
             </div>
         </div>
+    </div>
 </template>
 
 <script lang="ts" src="./CProgress.ts">

src/components/index.ts

@@ -2,3 +2,4 @@ export * from '../views/categories'
 export * from './todos'
 export * from './logo'
 export * from './CProgress'
+export * from './CDate'

src/components/projects/SingleProject/SingleProject.ts

@@ -36,6 +36,10 @@ export default class SingleProject extends Vue {
 
   public $q: any
 
+  get tools() {
+    return tools
+  }
+
   @Prop({ required: true }) public itemproject: IProject
 
   // @Watch('itemproject.completed') valueChanged() {
@@ -103,6 +107,7 @@ export default class SingleProject extends Vue {
   }
 
   public watchupdate(field = '') {
+    console.log('watchupdate')
     this.$emit('eventupdateproj', {myitem: this.itemproject, field } )
     this.updateicon()
   }
@@ -172,6 +177,7 @@ export default class SingleProject extends Vue {
     if (!this.sel) {
       if (!this.inEdit) {
         // this.attivaEdit = true
+        this.$emit('deselectAllRowstodo', null, false)
         this.$emit('deselectAllRowsproj', this.itemproject, true)
 
         if (!this.sel) {
@@ -283,6 +289,7 @@ export default class SingleProject extends Vue {
       this.inEdit = false
       this.attivaEdit = false
       this.updateClasses()
+      this.$emit('deselectAllRowstodo', null, false, false)
       this.$emit('deselectAllRowsproj', this.itemproject, false, singola)
     }
   }
@@ -414,7 +421,7 @@ export default class SingleProject extends Vue {
   }
 
   public removeitem(id) {
-    this.$emit('deleteItem', id)
+    this.$emit('deleteItemproj', id)
   }
 
   public enableExpiring() {

src/components/todos/CTodo/CTodo.ts

@@ -1,42 +1,43 @@
 import Vue from 'vue'
-import { Component, Watch } from 'vue-property-decorator'
+import { Component, Prop, Watch } from 'vue-property-decorator'
 
-import { IDrag, ITodo, ITodosState } from '../../model/index'
-import { SingleTodo } from '../../components/todos/SingleTodo/index'
+import { IDrag, IProject, ITodo, ITodosState } from '../../../model/index'
 
-import { tools } from '../../store/Modules/tools'
-import * as ApiTables from '../../store/Modules/ApiTables'
+import { tools } from '../../../store/Modules/tools'
+import * as ApiTables from '../../../store/Modules/ApiTables'
 
 import { GlobalStore, Todos } from '@store'
 import { UserStore } from '@store'
 
 import { Getter } from 'vuex-class'
+import { SingleTodo } from '../SingleTodo'
+
 
 const namespace: string = 'Todos'
 
 @Component({
-
   components: { SingleTodo },
   filters: {
     capitalize(value) {
-      if (!value) {
-        return ''
-      }
-      value = value.toString()
-      return value.charAt(0).toUpperCase() + value.slice(1)
+      return tools.capitalize(value)
     }
   }
 })
-export default class Todo extends Vue {
+export default class CTodo extends Vue {
   public $q: any
   public todotop: string = ''
   public todobottom: string = ''
   public polling = null
   public service: any
   public scrollable = true
-  public categoryAtt: string = ''
   public dragname: string = 'first'
 
+  @Prop({ required: true }) public categoryAtt: string
+  @Prop({ required: true }) public title: string
+  @Prop({ required: false, default: 'blue' }) public forecolor: string
+  @Prop({ required: false, default: 'lightblue' }) public backcolor: string
+  @Prop({ required: false, default: true }) public viewtaskTop: boolean
+
   public $refs: {
     single: SingleTodo[]
   }
@@ -76,11 +77,6 @@ export default class Todo extends Vue {
   @Getter('todos_completati', { namespace })
   public todos_completati: (state: ITodosState, category: string) => ITodo[]
 
-  @Watch('$route.params.category')
-  public changecat() {
-    this.categoryAtt = this.$route.params.category
-  }
-
   public showTask(field_value) {
     return field_value === tools.MenuAction.SHOW_TASK
   }
@@ -115,14 +111,11 @@ export default class Todo extends Vue {
   }
 
   public mounted() {
-    this.categoryAtt = this.$route.params.category
-
     tools.touchmove(this.scrollable)
   }
 
-  public async load() {
+  public load() {
     console.log('LOAD TODO....')
-    this.categoryAtt = this.$route.params.category
 
     // Set last category selected
     localStorage.setItem(tools.localStorage.categorySel, this.categoryAtt)
@@ -193,8 +186,16 @@ export default class Todo extends Vue {
 
   }
 
+  public deselectAllRowsproj(item: IProject, check, onlythis: boolean = false) {
+    this.$emit('deselectAllRowsproj', item, check, onlythis)
+  }
+
+  public setitemsel(item: ITodo) {
+    this.$emit('setitemsel', item)
+  }
+
   public deselectAllRowstodo(item: ITodo, check, onlythis: boolean = false) {
-    // console.log('deselectAllRowstodo : ', item)
+    console.log('CTODO deselectAllRowstodo : ', item)
 
     for (let i = 0; i < this.$refs.single.length; i++) {
 
@@ -206,7 +207,11 @@ export default class Todo extends Vue {
       if (onlythis) {
         des = item._id === id
       } else {
+        if (!!check) {
           des = ((check && (item._id !== id)) || (!check))
+        } else {
+          des = !check
+        }
       }
       if (des) {
         // @ts-ignore

src/components/todos/CTodo/CTodo.vue

@@ -1,9 +1,9 @@
 <template>
     <q-page>
         <div class="panel">
-            <div class="divtitlecat">
+            <div v-if="!!title" class="divtitlecat">
                 <div class="flex-container">
-                    <div class="flex-item categorytitle">{{categoryAtt | capitalize}}</div>
+                    <div class="flex-item categorytitle" :style="`background-color: ${backcolor} !important; color: ${forecolor} !important;`">{{title | capitalize}}</div>
                     <div class="flex-item">
                         <q-btn push
                                size="sm"
@@ -52,7 +52,7 @@
                 </div>
             </div>
 
-            <q-input ref="insertTask" color="blue-12" v-model="todotop" :label="$t('todo.inserttop')"
+            <q-input v-if="viewtaskTop" ref="insertTask" color="blue-12" v-model="todotop" :label="$t('todo.inserttop')"
                      style="margin-left: 6px;"
                      :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
                      v-on:keyup.enter="dbInsert(true)">
@@ -74,7 +74,7 @@
                             <label>{{tools.getPriorityByInd(mytodo.priority)}}</label>
                         </div>
                         <SingleTodo ref="single" @deleteItemtodo="mydeleteitemtodo(mytodo._id)" @eventupdate="updateitemtodo"
-                                    @deselectAllRowstodo="deselectAllRowstodo" @onEnd="onEndtodo"
+                                    @setitemsel="setitemsel" @deselectAllRowstodo="deselectAllRowstodo" @deselectAllRowsproj="deselectAllRowsproj" @onEnd="onEndtodo"
                                     :itemtodo='mytodo'/>
 
                         <!--<div :nametranslate="`REF${index}`" class="divdrag non-draggato"></div>-->
@@ -96,7 +96,7 @@
                          :key="mytodo._id" class="myitemdrag">
 
                         <SingleTodo ref="single" @deleteItemtodo="mydeleteItemtodo(mytodo._id)" @eventupdate="updateitemtodo"
-                                    @deselectAllRows="deselectAllRowstodo" @onEndtodo="onEndtodo"
+                                    @deselectAllRows="deselectAllRowstodo" @deselectAllRowsproj="deselectAllRowsproj" @onEndtodo="onEndtodo"
                                     :itemtodo='mytodo'/>
 
                         <!--<div :nametranslate="`REF${index}`" class="divdrag non-draggato"></div>-->
@@ -109,7 +109,7 @@
             </div>
 
 
-            <q-input v-if="TodosCount > 0" ref="insertTaskBottom" v-model="todobottom"
+            <q-input v-if="TodosCount > 0 || !viewtaskTop" ref="insertTaskBottom" v-model="todobottom"
                      style="margin-left: 6px;"
                      color="blue-12"
                      :label="$t('todo.insertbottom')"
@@ -148,8 +148,8 @@
 
 
 </template>
-<script lang="ts" src="./todo.ts">
+<script lang="ts" src="./CTodo.ts">
 </script>
 <style lang="scss" scoped>
-    @import './todo';
+    @import './CTodo.scss';
 </style>

src/components/todos/CTodo/index.ts

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

src/components/todos/SingleTodo/SingleTodo.ts

@@ -42,6 +42,10 @@ export default class SingleTodo extends Vue {
 
   public $q: any
 
+  get tools() {
+    return tools
+  }
+
   @Prop({ required: true }) public itemtodo: ITodo
 
   // @Watch('itemtodo.completed') valueChanged() {
@@ -188,6 +192,7 @@ export default class SingleTodo extends Vue {
 
     if (!this.sel) {
       if (!this.inEdit) {
+        this.$emit('deselectAllRowsproj', null, false, false)
         this.$emit('deselectAllRowstodo', this.itemtodo, true)
 
         if (!this.sel) {
@@ -231,6 +236,7 @@ export default class SingleTodo extends Vue {
   }
 
   public clickRow() {
+    this.$emit('setitemsel', this.itemtodo)
     this.clickRiga()
   }
 
@@ -277,6 +283,7 @@ export default class SingleTodo extends Vue {
       // console.log('exitEdit')
       this.inEdit = false
       this.updateClasses()
+      this.$emit('deselectAllRowsproj', null, false, false)
       this.$emit('deselectAllRowstodo', this.itemtodo, false, singola)
     }
   }

src/components/todos/index.ts

@@ -1,3 +1,3 @@
 export * from './SingleTodo'
 export * from './SubMenus'
-export * from '../../views/todo'
+export * from './CTodo'

src/model/GlobalStore.ts

@@ -1,5 +1,6 @@
 import { costanti } from "@src/store/Modules/costanti"
 import { UserStore } from "@store"
+import { tools } from '@src/store/Modules/tools'
 
 export interface IPost {
   title: string

src/router/route-config.ts

@@ -58,7 +58,7 @@ export const routesList: IMyRouteConfig[] = [
   {
     path: '/todo/:category',
     name: 'Todos',
-    component: () => import('@/views/todo/todo.vue'),
+    component: () => import('@/views/todo-list/todo-list.vue'),
     meta: {
       requiresAuth: true,
       async asyncData() {

src/store/Modules/GlobalStore.ts

@@ -111,9 +111,10 @@ namespace Getters {
   }, 'showtype')
 
   const getmenu = b.read((state) => {
+    console.log('getmenu')
 
     const arrlista = GlobalStore.state.listatodo
-    const listatodo = []
+    const lista = []
 
     arrlista.forEach((elem: IMenuList) => {
       const item = {
@@ -122,7 +123,7 @@ namespace Getters {
         name: 'pages.' + elem.description,
         route: '/todo/' + elem.nametranslate
       }
-      listatodo.push(item)
+      lista.push(item)
 
     })
 
@@ -145,7 +146,7 @@ namespace Getters {
 
     if (!process.env.PROD) {
       addRoute(arrroutes, { route: '/todo', faIcon: 'fa fa-list-alt', materialIcon: 'format_list_numbered', name: 'pages.Todo',
-        routes2: listatodo,
+        routes2: lista,
         level_parent: 0.5,
         level_child: 0.5
       })
@@ -173,6 +174,8 @@ namespace Getters {
 
     return state.menulinks
 
+    console.log('state.menulinks', state.menulinks)
+
   }, 'getmenu')
 
   export const getters = {

src/store/Modules/Projects.ts

@@ -38,13 +38,10 @@ function getarrByCategory(category: string) {
 }
 
 function initcat() {
-
-  // return this.copy(objproj)
-  let rec = Getters.getters.getRecordEmpty()
+  const rec = Getters.getters.getRecordEmpty()
   rec.userId = UserStore.state.userId
 
   return rec
-
 }
 
 namespace Getters {

src/store/Modules/Todos.ts

@@ -36,7 +36,7 @@ function getindexbycategory(category: string) {
   return state.categories.indexOf(category)
 }
 
-function gettodosByCategory(category: string) {
+function gettodosByCategory(category: string): [] {
   const indcat = state.categories.indexOf(category)
   if (!state.todos[indcat]) {
     return []
@@ -46,6 +46,16 @@ function gettodosByCategory(category: string) {
 
 function initcat() {
 
+  let rec = Getters.getters.getRecordEmpty()
+  rec.userId = UserStore.state.userId
+
+  return rec
+
+}
+
+namespace Getters {
+  const getRecordEmpty = b.read((state: ITodosState) => (): ITodo => {
+
     const tomorrow = new Date()
     tomorrow.setDate(tomorrow.getDate() + 1)
 
@@ -69,10 +79,7 @@ function initcat() {
     }
     // return this.copy(objtodo)
     return objtodo
-
-}
-
-namespace Getters {
+  }, 'getRecordEmpty')
   const items_dacompletare = b.read((state: ITodosState) => (cat: string): ITodo[] => {
     const indcat = getindexbycategory(cat)
     if (state.todos[indcat]) {
@@ -85,11 +92,14 @@ namespace Getters {
   const todos_completati = b.read((state: ITodosState) => (cat: string): ITodo[] => {
     const indcat = getindexbycategory(cat)
     if (state.todos[indcat]) {
-      if (state.showtype === costanti.ShowTypeTask.SHOW_LAST_N_COMPLETED) {
+      if (state.showtype === costanti.ShowTypeTask.SHOW_LAST_N_COMPLETED) {   // Show only the first N completed
         return state.todos[indcat].filter((todo) => todo.status === tools.Status.COMPLETED).slice(0, state.visuLastCompleted)
-      }  // Show only the first N completed
+      }
+      else if (state.showtype === costanti.ShowTypeTask.SHOW_ONLY_TOCOMPLETE) {
+        return []
+      }
       else if (state.showtype === costanti.ShowTypeTask.SHOW_ALL) {
-        return state.todos[indcat].filter((todo) => todo.completed === tools.Status.COMPLETED)
+        return state.todos[indcat].filter((todo) => todo.status === tools.Status.COMPLETED)
       }
       else {
         return []
@@ -120,6 +130,9 @@ namespace Getters {
   }, 'getRecordById')
 
   export const getters = {
+    get getRecordEmpty() {
+      return getRecordEmpty()
+    },
     get items_dacompletare() {
       return items_dacompletare()
     },

src/store/Modules/tools.ts

@@ -25,6 +25,9 @@ export const tools = {
 
   FIRST_PROJ: '__PROJECTS',
 
+  WHAT_TODO: 1,
+  WHAT_PROJECT: 2,
+
   arrLangUsed: ['enUs', 'it', 'es'],
 
   SERVKEY_VERS: 'vers',
@@ -595,8 +598,8 @@ export const tools = {
     if (itemdragend.field === 'priority') {
       // get last elem priority
       console.log('get last elem priority')
-      itemdragend.newIndex = tools.getLastFirstElemPriority(itemdragend.category, itemdragend.prioritychosen, itemdragend.atfirst, itemdragend.idelemtochange)
-      itemdragend.oldIndex = tools.getIndexById(itemdragend.category, itemdragend.idelemtochange)
+      itemdragend.newIndex = tools.getLastFirstElemPriority(myarr, itemdragend.prioritychosen, itemdragend.atfirst, itemdragend.idelemtochange)
+      itemdragend.oldIndex = tools.getIndexById(myarr, itemdragend.idelemtochange)
 
       console.log('swapElems PRIORITY', itemdragend)
     }
@@ -675,6 +678,7 @@ export const tools = {
   },
 
   getElemById(myarr, id) {
+    console.log('getElemById', myarr, id)
     return myarr.find((elem) => elem._id === id)
   },
 
@@ -984,5 +988,12 @@ export const tools = {
     return date.formatDate(mytimestamp, 'DD-MM-YY')
   },
 
+  capitalize(value) {
+    if (!value) {
+      return ''
+    }
+    value = value.toString()
+    return value.charAt(0).toUpperCase() + value.slice(1)
+  }
 
 }

src/views/categories/TableData/TableData.ts

@@ -2,23 +2,21 @@ 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"
+import { tools } from '../../../store/Modules/tools'
 
 @Component({
 })
-export default class Tabledata extends Vue {
-  $q: any
+export default class TableData extends Vue {
+  public $q: any
+  public filter: boolean = false
+  public title: string = ''
+  public category: string = ''
+  public categories_loc: any[] = [{}]
+  public categories_arr: any[] = [{}]
+  public selected: any [] = []
+  public selectedSecond: any [] = []
 
-  filter: boolean = false
-  title: string = ''
-  category: string = ''
-  categories_loc: any[] = [{}]
-  categories_arr: any[] = [{}]
-  selected: any [] = []
-  selectedSecond: any [] = []
-
-  data: any [] = [{
+  public data: any [] = [{
     id: 0,
     descr_it: 'Frozen Yogurt',
     descr_en: '',
@@ -31,7 +29,7 @@ export default class Tabledata extends Vue {
       descr_es: ''
     }]
 
-  columns: any [] = [
+  public columns: any [] = [
     {
       name: 'descr_it',
       required: true,
@@ -39,7 +37,7 @@ export default class Tabledata extends Vue {
       align: 'left',
       field: 'descr_it',
       sortable: true,
-      classes: 'my-class',
+      classes: 'my-class'
     },
     {
       name: 'descr_en',
@@ -47,7 +45,7 @@ export default class Tabledata extends Vue {
       align: 'left',
       field: 'descr_en',
       sortable: true,
-      classes: 'my-class',
+      classes: 'my-class'
     },
     {
       name: 'descr_es',
@@ -55,7 +53,7 @@ export default class Tabledata extends Vue {
       align: 'left',
       field: 'descr_es',
       sortable: true,
-      classes: 'my-class',
+      classes: 'my-class'
     },
     {
       name: 'campo2bool',
@@ -63,26 +61,25 @@ export default class Tabledata extends Vue {
       align: 'left',
       field: 'campo2bool',
       sortable: true,
-      classes: 'my-class',
+      classes: 'my-class'
     }
   ]
 
-  @Watch('categories_loc') valueChanged() {
+  @Watch('categories_loc') public valueChanged() {
     this.updatetable()
   }
 
-
-  created() {
+  public created() {
     this.loadCat()
   }
 
-  async loadCat() {
-    await this.$db.categories.toArray().then(ris => this.categories_loc = ris)
+  public async loadCat() {
+    await this.$db.categories.toArray().then((ris) => this.categories_loc = ris)
 
     this.updatetable()
   }
 
-  initcat() {
+  public initcat() {
 
     const objcat: ICategory = {
       descr_it: '',
@@ -94,7 +91,7 @@ export default class Tabledata extends Vue {
 
   }
 
-  async insertCategory() {
+  public async insertCategory() {
 
     const objcat = this.initcat()
 
@@ -116,7 +113,7 @@ export default class Tabledata extends Vue {
     this.category = ''
   }
 
-  async deleteCategory(myarrobj) {
+  public async deleteCategory(myarrobj) {
 
     for (const myobj of myarrobj) {
 
@@ -142,14 +139,14 @@ export default class Tabledata extends Vue {
 
   }
 
-  updatetable() {
+  public updatetable() {
 
     this.filterCategories()
     this.categories_arr = [...this.categories_loc]
 
   }
 
-  async filterCategories() {
+  public async filterCategories() {
 
     if (this.filter) {
       // #Todo If need to filter the output database ...
@@ -168,7 +165,7 @@ export default class Tabledata extends Vue {
     }
   }
 
-  deleteRow() {
+  public deleteRow() {
     console.log('SEL = ', this.selectedSecond)
 
     const seldel = [...this.selectedSecond]
@@ -191,7 +188,7 @@ export default class Tabledata extends Vue {
   });
    */
 
-  async modify() {
+  public async modify() {
     // esempio da sistemare
     await this.$db.transaction('rw', [this.$db.categories], async () => {
       const friend = await this.$db.get(1)

src/views/categories/TableData/TableData.vue

@@ -57,9 +57,9 @@
 
 
 </template>
-<script lang="ts" src="tabledata.ts">
+<script lang="ts" src="./TableData.ts">
 </script>
 
 <style lang="scss" scoped>
-    @import 'tabledata';
+    @import './TableData.scss';
 </style>

src/views/categories/TableData/index.ts

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

src/views/categories/index.ts

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

src/views/categories/tabledata/index.ts

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

src/views/projects/proj-list/proj-list.scss

@@ -2,9 +2,9 @@
   min-width: 350px;
 }
 
-.flex-container{
+.flex-container, .flex-container_col{
   background-color: rgb(250, 250, 250);
-  padding: 4px;
+  padding: 2px 4px 2px 4px;
   margin: 2px;
   display: flex;
   align-items: center;
@@ -12,6 +12,9 @@
   justify-content: space-between;
 }
 
+.flex-container_col {
+  flex-direction: column;
+}
 
 
 .mycard {
@@ -113,6 +116,7 @@
 
 .flex-icon{
   padding: 3px;
+  font-size: 1.5rem;
 }
 
 .titleSubMenu {

src/views/projects/proj-list/proj-list.ts

@@ -1,25 +1,26 @@
 import Vue from 'vue'
 import { Component, Watch } from 'vue-property-decorator'
 
-import { IDrag, IProject, IProjectsState } from '../../../model/index'
+import { IDrag, IProject, IProjectsState, ITodo } from '../../../model/index'
 import { SingleProject } from '../../../components/projects/SingleProject/index'
+import { CTodo } from '../../../components/todos/CTodo'
 
 import { tools } from '../../../store/Modules/tools'
 import * as ApiTables from '../../../store/Modules/ApiTables'
 
-import { GlobalStore, Projects } from '@store'
+import { GlobalStore, Projects, Todos } from '@store'
 import { UserStore } from '@store'
 
 import { Getter } from 'vuex-class'
 
 import { Screen } from 'quasar'
-import { CProgress } from '@src/components/CProgress'
+import { CProgress } from '@components'
 
 const namespace: string = 'Projects'
 
 @Component({
 
-  components: { SingleProject, CProgress },
+  components: { SingleProject, CProgress, CTodo },
   filters: {
     capitalize(value) {
       if (!value) {
@@ -44,11 +45,14 @@ export default class ProjList extends Vue {
   public itemproj: IProject = null
   public idsel: string = ''
   public itemsel: IProject = Projects.getters.getRecordEmpty()
+  public itemtodosel: ITodo = Todos.getters.getRecordEmpty()
+  public whatisSel: number = 0
   public colProgress: string = 'blue'
   public percProgress: string = 'percProgress'
 
   public $refs: {
-    singleproject: SingleProject[]
+    singleproject: SingleProject[],
+    ctodo: CTodo
   }
 
   get getrouteup() {
@@ -210,10 +214,11 @@ export default class ProjList extends Vue {
     console.log('this.$refs.singleproject', this.$refs.singleproject)
     for (const elem of this.$refs.singleproject) {
       // @ts-ignore
-      if (elem.itemproject._id === id)
+      if (elem.itemproject._id === id) {
         return elem
       }
     }
+  }
 
   // const descr = this.$t('project.newproj').toString()
 
@@ -232,8 +237,13 @@ export default class ProjList extends Vue {
 
   public setidsel(id: string) {
     this.idsel = id
+    this.whatisSel = tools.WHAT_PROJECT
     this.itemsel = Projects.getters.getRecordById(this.idsel)
   }
+  public setitemsel(item: ITodo) {
+    this.whatisSel = tools.WHAT_TODO
+    this.itemtodosel = item
+  }
 
   public async updateitemproj({ myitem, field }) {
     console.log('calling MODIFY updateitemproj', myitem, field)
@@ -251,10 +261,25 @@ export default class ProjList extends Vue {
 
   }
 
-  public deselectAllRowsproj(item: IProject, check, onlythis: boolean = false) {
-    // console.log('deselectAllRowsproj : ', item)
+  public deselectAllRowstodo(item: ITodo, check, onlythis: boolean = false) {
+    console.log('PROJ-LIST deselectAllRowstodo : ', item)
 
-    for (let i = 0; i < this.$refs.singleproject.length; i++) {
+    // @ts-ignore
+    for (const i in this.$refs.ctodo.$refs.single) {
+    // @ts-ignore
+      const contr = this.$refs.ctodo.$refs.single[i] as SingleTodo
+      const des = !check
+      if (des) {
+        // @ts-ignore
+        contr.deselectAndExitEdit()
+      }
+    }
+  }
+
+  public deselectAllRowsproj(item: IProject, check, onlythis: boolean = false) {
+    console.log('deselectAllRowsproj: ', item)
+
+    for (const i in this.$refs.singleproject) {
 
       const contr = this.$refs.singleproject[i] as SingleProject
       // @ts-ignore
@@ -264,7 +289,11 @@ export default class ProjList extends Vue {
       if (onlythis) {
         des = item._id === id
       } else {
+        if (!!item) {
           des = ((check && (item._id !== id)) || (!check))
+        } else {
+          des = !check
+        }
       }
       if (des) {
         // @ts-ignore
@@ -290,9 +319,10 @@ export default class ProjList extends Vue {
   }
 
   get getCalcHoursWorked() {
-    if (this.itemsel.hoursplanned <= 0)
+    if (this.itemsel.hoursplanned <= 0) {
       return 0
-    let myperc = Math.round(this.itemsel.hoursworked / this.itemsel.hoursplanned * 100)
+    }
+    const myperc = Math.round(this.itemsel.hoursworked / this.itemsel.hoursplanned * 100)
 
     return myperc
 

src/views/projects/proj-list/proj-list.vue

@@ -84,30 +84,23 @@
                                     <SingleProject ref="singleproject" @deleteItemproj="mydeleteitemproj(myproj._id)"
                                                    @eventupdateproj="updateitemproj"
                                                    @idsel="setidsel"
-                                                   @deselectAllRowsproj="deselectAllRowsproj" @onEnd="onEndproj"
+                                                   @deselectAllRowsproj="deselectAllRowsproj" @deselectAllRowstodo="deselectAllRowstodo" @onEnd="onEndproj"
                                                    :itemproject='myproj'>
 
                                     </SingleProject>
 
                                 </div>
                             </div>
-                            <!--</q-infinite-scroll>-->
-
-
-                            <q-input ref="insertProjectBottom" v-model="projbottom"
-                                     style="margin-left: 6px;"
-                                     color="blue-12"
-                                     :label="$t('todo.insertbottom')"
-                                     :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
-                                     v-on:keyup.enter="dbInsert()">
-
-                            </q-input>
-
-                            <br>
                         </div>
+                        <q-separator></q-separator>
+
+                        <CTodo ref="ctodo" @setitemsel="setitemsel" :categoryAtt="idProjAtt" title="" backcolor="white" forecolor="black" :viewtaskTop="false" @deselectAllRowsproj="deselectAllRowsproj" @deselectAllRowstodo="deselectAllRowstodo"
+                                >
+                        </CTodo>
+
                     </div>
                 </template>
-                <template v-if="!!itemsel.descr" v-slot:after>
+                <template v-if="(whatisSel === tools.WHAT_PROJECT) && (!!itemsel.descr)" v-slot:after>
                     <div class="q-pa-xs clMain">
                         <div class="flex-container clMain">
                             <q-icon class="flex-item flex-icon" name="format_align_center"/>
@@ -142,7 +135,6 @@
                                         debounce="500"
                                 />
                                 <CProgress descr="" :progressval="getCalcHoursWorked"></CProgress>
-
                             </div>
                             <q-icon class="flex-item flex-icon" name="watch_later"/>
                             <div class="flex-item itemdata content-center">
@@ -159,11 +151,11 @@
                             </div>
                         </div>
                         <div class="flex-container clMain">
-                            <div style="margin: 10px;"></div>
+                            <q-icon class="flex-item flex-icon" name="developer_mode"/>
                             <div class="flex-item itemdata">
-                                <q-input v-model="itemsel.begin_development" mask="date" :hint="$t('proj.begin_development')">
+                                <q-input dense v-model="itemsel.begin_development" mask="date" :hint="$t('proj.begin_development')">
                                     <!--<span class="data_string">{{tools.getstrDate(itemsel.begin_development)}}</span>-->
-                                    <q-icon name="event" class="cursor-pointer">
+                                    <q-icon name="event" class="cursor-pointer" style="font-size: 1.5rem;">
                                         <q-popup-proxy>
                                             <q-date v-model="itemsel.begin_development" today-btn/>
                                         </q-popup-proxy>
@@ -172,9 +164,9 @@
                             </div>
                             <div style="margin: 10px;"></div>
                             <div class="flex-item itemdata">
-                                <q-input v-model="itemsel.begin_test" mask="date" :hint="$t('proj.begin_test')">
+                                <q-input dense v-model="itemsel.begin_test" mask="date" :hint="$t('proj.begin_test')">
                                     <!--<span class="data_string">{{tools.getstrDate(itemsel.begin_development)}}</span>-->
-                                    <q-icon name="event" class="cursor-pointer">
+                                    <q-icon name="event" class="cursor-pointer" style="font-size: 1.5rem;">
                                         <q-popup-proxy>
                                             <q-date v-model="itemsel.begin_test" today-btn/>
                                         </q-popup-proxy>
@@ -184,6 +176,24 @@
                         </div>
                     </div>
                 </template>
+                <template v-else-if="(whatisSel === tools.WHAT_TODO) && (!!itemtodosel.descr)" v-slot:after>
+                    <div class="q-pa-xs clMain">
+                        <div class="flex-container clMain">
+                            <q-icon class="flex-item flex-icon" name="border_color"/>
+                            <div class="flex-item itemdescr">
+                                <q-input
+                                        ref="input"
+                                        v-model="itemtodosel.descr"
+                                        :label="$t('proj.longdescr')"
+                                        outlined
+                                        debounce="500"
+                                        autogrow
+                                />
+
+                            </div>
+                        </div>
+                    </div>
+                </template>
             </q-splitter>
         </div>
     </q-page>

src/views/todo-list/index.ts

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

src/views/todo-list/todo-list.scss

@@ -0,0 +1,110 @@
+.flex-container{
+  background-color: rgb(250, 250, 250);
+  padding: 2px;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+
+
+.mycard {
+  visibility: hidden;
+}
+
+.myitemdrag {
+  padding: 2px;
+  //margin-top: 4px;
+  border-width: 1px 0px 0px 0px;
+  //border: solid 1px #ccc;
+  border-style: solid;
+  border-color: #ccc;
+  transition: all .4s;
+}
+
+.titlePriority, .titleCompleted{
+  border-width: 0px 0px 1px 0px;
+  border-style: solid;
+  border-color: #ccc;
+  color:white;
+}
+
+.titleCompleted {
+  background-color: #ccc;
+}
+
+.high_priority {
+  background-color: #4caf50;
+}
+
+.medium_priority {
+  background-color: #3846af;
+}
+
+.low_priority {
+  background-color: #af2218;
+}
+
+
+
+.myitemdrag-enter, .myitemdrag-leave-active {
+  opacity: 0;
+}
+
+.drag {
+  //background-color: green;
+}
+
+.dragArea {
+  min-height: 10px;
+}
+
+.divtitlecat {
+  margin: 5px;
+  padding: 5px;
+}
+
+.categorytitle{
+  color:blue;
+  background-color: lightblue;
+  font-size: 1.25rem;
+  font-weight: bold;
+  text-align: center;
+  flex: 1;
+}
+
+.titleSubMenu {
+  font-size: 0.7rem;
+  font-weight: 350;
+}
+
+.draggatodraggato2 {
+  display: inline-block;
+}
+
+.non-draggato {
+  display: none;
+}
+
+@keyframes fadeIn {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 0.3;
+  }
+}
+
+.divdrag{
+  animation: fadeIn 0.2s ease-in 1 forwards;
+  min-height: 50px;
+  background-color: #9f9f9f;
+}
+
+.menuInputCompleted > div:nth-child(2) > div > input {
+  min-width: 30px;
+  width: 30px;
+}

src/views/todo-list/todo-list.ts

@@ -0,0 +1,29 @@
+import Vue from 'vue'
+import { Component, Watch } from 'vue-property-decorator'
+import { CTodo } from '@src/components/todos/CTodo'
+import { tools } from '@src/store/Modules/tools'
+
+@Component({
+  components: { CTodo },
+  filters: {
+    capitalize(value) {
+      return tools.capitalize(value)
+    }
+  }
+
+})
+export default class TodoList extends Vue {
+  public categoryAtt: string = ''
+
+  @Watch('$route.params.category')
+  public changecat() {
+    this.categoryAtt = this.$route.params.category
+    console.log('this.categoryAtt', this.categoryAtt)
+  }
+
+  public created() {
+    console.log('LOAD TODO-LIST....')
+
+    this.changecat()
+  }
+}

src/views/todo-list/todo-list.vue

@@ -0,0 +1,12 @@
+<template>
+    <div>
+        <CTodo :categoryAtt="categoryAtt" :title="categoryAtt">
+
+        </CTodo>
+    </div>
+</template>
+<script lang="ts" src="./todo-list.ts">
+</script>
+<style lang="scss" scoped>
+    @import './todo-list.scss';
+</style>

src/views/todo/index.ts

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