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,15 +1,17 @@
 <template>
-    <div class="flex-item progress-item shadow-1">
-        <q-linear-progress
-                stripe
-                rounded
-                :value="progressval / 100"
-                class="cpr-progrbar-item"
-                :color="cpr_colProgress"
-        >
-        </q-linear-progress>
-        <div :class="cpr_percProgress">
-            {{getdescr}} {{progressval}}%
+    <div>
+        <div class="flex-item progress-item shadow-1">
+            <q-linear-progress
+                    stripe
+                    rounded
+                    :value="progressval / 100"
+                    class="cpr-progrbar-item"
+                    :color="cpr_colProgress">
+            </q-linear-progress>
+
+            <div :class="cpr_percProgress">
+                {{getdescr}} {{progressval}}%
+            </div>
         </div>
     </div>
 </template>

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.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/components/todos/CTodo/CTodo.ts

@@ -0,0 +1,235 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+
+import { IDrag, IProject, ITodo, ITodosState } from '../../../model/index'
+
+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) {
+      return tools.capitalize(value)
+    }
+  }
+})
+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 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[]
+  }
+
+  get tools() {
+    return tools
+  }
+
+  get showtype() {
+    return Todos.state.showtype
+  }
+
+  set showtype(value) {
+    console.log('showtype', value)
+    GlobalStore.mutations.setShowType(value)
+  }
+
+  get doneTodosCount() {
+    return Todos.getters.doneTodosCount(this.categoryAtt)
+  }
+
+  get menuPopupConfigTodo() {
+    return tools.menuPopupConfigTodo[UserStore.state.lang]
+  }
+
+  get listOptionShowTask() {
+    return tools.listOptionShowTask[UserStore.state.lang]
+  }
+
+  get TodosCount() {
+    return Todos.getters.TodosCount(this.categoryAtt)
+  }
+
+  @Getter('items_dacompletare', { namespace })
+  public items_dacompletare: (state: ITodosState, category: string) => ITodo[]
+
+  @Getter('todos_completati', { namespace })
+  public todos_completati: (state: ITodosState, category: string) => ITodo[]
+
+  public showTask(field_value) {
+    return field_value === tools.MenuAction.SHOW_TASK
+  }
+
+  public async onEndtodo(itemdragend) {
+    await Todos.actions.swapElems(itemdragend)
+  }
+
+  public created() {
+    const $service = this.$dragula.$service
+    tools.dragula_option($service, this.dragname)
+
+    $service.eventBus.$on('dragend', (args) => {
+
+      const itemdragend: IDrag = {
+        category: this.categoryAtt,
+        newIndex: this.getElementIndex(args.el),
+        oldIndex: this.getElementOldIndex(args.el)
+      }
+
+      this.onEndtodo(itemdragend)
+    })
+
+    $service.eventBus.$on('drag', (el, source) => {
+      this.scrollable = false
+    })
+    $service.eventBus.$on('drop', (el, source) => {
+      this.scrollable = true
+    })
+
+    this.load()
+  }
+
+  public mounted() {
+    tools.touchmove(this.scrollable)
+  }
+
+  public load() {
+    console.log('LOAD TODO....')
+
+    // Set last category selected
+    localStorage.setItem(tools.localStorage.categorySel, this.categoryAtt)
+
+    this.checkUpdate_everytime()
+  }
+
+  // Call to check if need to refresh
+  public checkUpdate_everytime() {
+    this.polling = setInterval(() => {
+      this.checkUpdate()
+    }, tools.NUMSEC_CHECKUPDATE)
+  }
+
+  public beforeDestroy() {
+    clearInterval(this.polling)
+  }
+
+  public mydeleteitemtodo(idobj: string) {
+    // console.log('mydeleteitemtodo', idobj)
+    return Todos.actions.deleteItemtodo({ cat: this.categoryAtt, idobj })
+  }
+
+  public async dbInsert(atfirst: boolean = false) {
+    let descr = this.todobottom.trim()
+    if (atfirst) {
+      descr = this.todotop.trim()
+    }
+
+    if (descr === '') {
+      return
+    }
+
+    if (!tools.checkIfUserExist(this)) {
+      return
+    }
+
+    const myobj: ITodo = {
+      descr,
+      category: this.categoryAtt
+    }
+
+    // empty the field
+    if (atfirst) {
+      this.todotop = ''
+    }
+    else {
+      this.todobottom = ''
+    }
+
+    return await Todos.actions.dbInsert({ myobj, atfirst })
+  }
+
+  public async updateitemtodo({ myitem, field }) {
+    console.log('calling MODIFY updateitemtodo', myitem, field)
+
+    const itemdragend: IDrag = {
+      category: this.categoryAtt,
+      field,
+      idelemtochange: myitem._id,
+      prioritychosen: myitem.priority,
+      atfirst: false
+    }
+
+    await Todos.actions.swapElems(itemdragend)
+
+    await Todos.actions.modify({ myitem, field })
+
+  }
+
+  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('CTODO deselectAllRowstodo : ', item)
+
+    for (let i = 0; i < this.$refs.single.length; i++) {
+
+      const contr = this.$refs.single[i] as SingleTodo
+      // @ts-ignore
+      const id = contr.itemtodo._id
+      // Don't deselect the actual clicked!
+      let des = false
+      if (onlythis) {
+        des = item._id === id
+      } else {
+        if (!!check) {
+          des = ((check && (item._id !== id)) || (!check))
+        } else {
+          des = !check
+        }
+      }
+      if (des) {
+        // @ts-ignore
+        contr.deselectAndExitEdit()
+      }
+    }
+  }
+
+  public checkUpdate() {
+    ApiTables.waitAndcheckPendingMsg()
+  }
+
+  private getElementIndex(el: any) {
+    return [].slice.call(el.parentElement.children).indexOf(el)
+  }
+
+  private getElementOldIndex(el: any) {
+    return parseInt(el.attributes.index.value, 10)
+  }
+
+}

src/components/todos/CTodo/CTodo.vue

@@ -0,0 +1,155 @@
+<template>
+    <q-page>
+        <div class="panel">
+            <div v-if="!!title" class="divtitlecat">
+                <div class="flex-container">
+                    <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"
+                               icon="settings">
+                            <q-menu id="popconfig" self="top right">
+                                <q-list link separator no-border class="todo-menu">
+                                    <q-item clickable v-for="field in menuPopupConfigTodo" :key="field.value">
+                                        <q-item-section avatar>
+                                            <q-icon :name="field.icon"/>
+                                        </q-item-section>
+
+                                        <q-item-section>{{field.label}}</q-item-section>
+
+                                        <q-item-section side v-if="showTask(field.value)">
+                                            <q-item-section side>
+                                                <q-icon name="keyboard_arrow_right"/>
+                                            </q-item-section>
+
+                                            <q-menu auto-close anchor="bottom middle" self="top middle">
+                                                <q-list dense>
+                                                    <q-item side :icon="field.icon">
+
+                                                        <q-item-section>
+                                                            <q-list dense>
+                                                                <q-item clickable v-ripple v-for="opt in listOptionShowTask"
+                                                                        :key="opt.value"
+                                                                        @click="showtype = opt.value">
+                                                                    <q-item-section avatar>
+                                                                        <q-icon :name="opt.icon" inverted color="primary"/>
+                                                                    </q-item-section>
+                                                                    <q-item-section>
+                                                                        {{opt.label}}
+                                                                    </q-item-section>
+                                                                </q-item>
+                                                            </q-list>
+                                                        </q-item-section>
+                                                    </q-item>
+                                                </q-list>
+                                            </q-menu>
+                                        </q-item-section>
+                                    </q-item>
+                                </q-list>
+                            </q-menu>
+                        </q-btn>
+                    </div>
+                </div>
+            </div>
+
+            <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)">
+                <template v-slot:prepend>
+                    <q-icon name="add"/>
+                </template>
+            </q-input>
+
+            <div style="display: none">{{ prior = 0, priorcomplet = false }}</div>
+            <div>
+                <!--<q-infinite-scroll :handler="loadMoreTodo" :offset="7">-->
+                <div class="container" v-dragula="items_dacompletare(categoryAtt)" :drake="dragname">
+                    <div :id="tools.getmyid(mytodo._id)" :index="index"
+                         v-for="(mytodo, index) in items_dacompletare(categoryAtt)"
+                         :key="mytodo._id" class="myitemdrag">
+
+                        <div v-if="(prior !== mytodo.priority) && mytodo.status !== tools.Status.COMPLETED"
+                             :class="tools.getTitlePriority(mytodo.priority)">
+                            <label>{{tools.getPriorityByInd(mytodo.priority)}}</label>
+                        </div>
+                        <SingleTodo ref="single" @deleteItemtodo="mydeleteitemtodo(mytodo._id)" @eventupdate="updateitemtodo"
+                                    @setitemsel="setitemsel" @deselectAllRowstodo="deselectAllRowstodo" @deselectAllRowsproj="deselectAllRowsproj" @onEnd="onEndtodo"
+                                    :itemtodo='mytodo'/>
+
+                        <!--<div :nametranslate="`REF${index}`" class="divdrag non-draggato"></div>-->
+
+                        <div style="display: none">{{ prior = mytodo.priority, priorcomplet = (mytodo.status === tools.Status.COMPLETED) }}
+                        </div>
+                    </div>
+                </div>
+                <!--</q-infinite-scroll>-->
+
+                <div v-if="doneTodosCount > 0" class="titleCompleted">
+                    <label>{{$t('todo.completed')}}</label>
+                </div>
+
+                <!--<q-infinite-scroll :handler="loadMoreTodo" :offset="7">-->
+                <div class="container">
+                    <div :id="tools.getmyid(mytodo._id)" :index="index"
+                         v-for="(mytodo, index) in todos_completati(categoryAtt)"
+                         :key="mytodo._id" class="myitemdrag">
+
+                        <SingleTodo ref="single" @deleteItemtodo="mydeleteItemtodo(mytodo._id)" @eventupdate="updateitemtodo"
+                                    @deselectAllRows="deselectAllRowstodo" @deselectAllRowsproj="deselectAllRowsproj" @onEndtodo="onEndtodo"
+                                    :itemtodo='mytodo'/>
+
+                        <!--<div :nametranslate="`REF${index}`" class="divdrag non-draggato"></div>-->
+
+                        <div style="display: none">{{ prior = mytodo.priority, priorcomplet = (mytodo.status === tools.Status.COMPLETED) }}
+                        </div>
+                    </div>
+                </div>
+                <!--</q-infinite-scroll>-->
+            </div>
+
+
+            <q-input v-if="TodosCount > 0 || !viewtaskTop" ref="insertTaskBottom" v-model="todobottom"
+                     style="margin-left: 6px;"
+                     color="blue-12"
+                     :label="$t('todo.insertbottom')"
+                     :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
+                     v-on:keyup.enter="dbInsert(false)"/>
+
+            <br>
+
+            <!--{{ tmpstrTodos }}-->
+
+            <!--<div class="flex-item btn-item">-->
+            <!--<q-btn class="mybtn" round color="" icon="lock" @click="getArrTodos">Get Todo</q-btn>-->
+            <!--&lt;!&ndash;<q-btn class="mybtn" round color="" icon="person" @click="setArrTodos">Set Todo</q-btn>&ndash;&gt;-->
+            <!--&lt;!&ndash;<q-btn class="mybtn" round color="" icon="list" @click="reload_fromServer++">Reload</q-btn>&ndash;&gt;-->
+            <!--</div>-->
+
+            <!--
+            <!--&lt;!&ndash;<q-input v-model="testPao" float-label="testPao"/>&ndash;&gt;-->
+            <!--<q-input v-model="todos_changed" float-label="todos_changed"/>-->
+
+            <!--<q-input v-model="reload_fromServer" float-label="reload_fromServer"/>-->
+
+            <!--<div class="flex-item btn-item">-->
+            <!--<q-btn class="mybtn" round color="" icon="lock" @click="clicktest()"></q-btn>-->
+            <!--<q-btn class="mybtn" round color="" icon="person" @click="clicktest2()"></q-btn>-->
+            <!--<q-btn class="mybtn" round color="" icon="list" @click="checkUpdate()"></q-btn>-->
+            <!--</div>-->
+            <!--&ndash;&gt;-->
+
+            <!--<q-btn class="mybtn" round color="" icon="lock" @click="clickaggshowtype()"></q-btn>-->
+
+
+            <!--<span style="white-space: pre;">{{ todos_vista }}</span>-->
+        </div>
+    </q-page>
+
+
+</template>
+<script lang="ts" src="./CTodo.ts">
+</script>
+<style lang="scss" scoped>
+    @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'