- Settings label priority as Title

- If drag down, the task become completed
2019-01-27 21:49:10 +01:00
parent 83420447d3
commit 0733e92acd
7 changed files with 170 additions and 42 deletions
--- a/src/components/todos/SingleTodo/SingleTodo.scss
+++ b/src/components/todos/SingleTodo/SingleTodo.scss
@@ -14,13 +14,22 @@
  justify-content: space-between;
 }

-.flex-container2:hover {
-  background-color: rgba(240, 240, 240, 0.7);
+// Set visibility: visible to the icon menu of pos-item-popover
+.flex-container2:hover .pos-item-popover, .flex-container2:hover .priority-item-popover{
+//.flex-container2:hover .pos-item-popover {
+  background-color: rgba(230, 230, 230, 0.8);
+  display: inline-block;
+}
+
+.flex-container2:hover{
+  background-color: rgba(230, 230, 230, 0.8);
 }

 .rowselected {
-  border: 1px solid rgba(255, 0, 0, 0.5);
-  background-color: rgba(49, 68, 240, 0.7) !important;
+  border-width: 1px 0px 1px 0px;
+  border-style: solid;
+  border-color: rgba(49, 68, 240, 0.6);
+  //background-color: rgba(166, 153, 240, 0.7) !important;
 }


@@ -44,15 +53,17 @@

 }

-.pos-item-popover {
+
+.pos-item-popover{
  max-width: 24px;
  min-width: 24px;
  padding: 0px;
  text-align: center;
  vertical-align: middle;
-  display: inline-block;
+  display: none;
+  color: #777;
  height: 100%;
-  color: #555;
+  //visibility: hidden;
 }


@@ -61,13 +72,25 @@
 }

 .priority-item-popover {
+  max-width: 24px;
+  min-width: 24px;
+  padding: 0px;
+  text-align: center;
+  vertical-align: middle;
+  display: none;
+  height: 100%;
+  color: #777;
+}
+
+.completed-item-popover {
  max-width: 24px;
  min-width: 24px;
  padding: 0px;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
-  height: 100%
+  height: 100%;
+  color: #777;
 }

 .priority-item {
@@ -75,10 +98,8 @@
  min-width: 24px;
 }

-.completed-item {
-  max-width: 24px;
-  min-width: 24px;
-}
+
+

 .myexpired {
  padding-top: 0px;
@@ -111,7 +132,8 @@
 }

 .div_descr:hover {
-  border: 1px solid rgba(125, 255, 125, 0.5);
+  border-width: 1px 0px 1px 0px;
+  border-color: rgba(125, 255, 125, 0.5);
  padding: 1px;
 }

--- a/src/components/todos/SingleTodo/SingleTodo.ts
+++ b/src/components/todos/SingleTodo/SingleTodo.ts
@@ -22,6 +22,8 @@ export default class SingleTodo extends Vue {
  public popover_menu: boolean = false
  public classRow: string = ''
  public sel: boolean = false
+  public isover: boolean = false
+  public classPosItemPopup = 'pos-item-popover'
  $q: any

  @Prop({ required: true }) itemtodo: ITodo
@@ -42,7 +44,9 @@ export default class SingleTodo extends Vue {
  }

  updateClasses() {
-    this.classCompleted = 'priority-item-popover'
+    // this.classCompleted = 'completed-item'
+    this.classCompleted = 'completed-item-popover'
+
    this.classDescr = 'flex-item div_descr'
    this.classExpiring = 'flex-item data-item'
    this.classExpiringEx = ''
@@ -66,6 +70,14 @@ export default class SingleTodo extends Vue {

  }

+  setclassPosItemPopup() {
+
+    if (this.isover)
+      this.classPosItemPopup = 'pos-item-popover'
+    else
+      this.classPosItemPopup = 'pos-item-popover'
+  }
+
  getClassRow() {
    return 'row flex-container2 ' + this.classRow
  }
--- a/src/components/todos/SingleTodo/SingleTodo.vue
+++ b/src/components/todos/SingleTodo/SingleTodo.vue
@@ -1,31 +1,41 @@
 <template>
-    <div :class="getClassRow()" @mousedown="clickRiga" @mouseup="mouseUp">
+    <div :class="getClassRow()" @mousedown="clickRiga" @mouseup.left="mouseUp">
+        <q-context-menu>
+            <q-list link separator no-border class="todo-menu">
+                <q-item v-for="field in menuPopupTodo" :key="field.value"
+                        v-close-overlay
+                        @click.native="clickMenu(field.value), popover_menu = false">
+                    <q-item-side :icon="field.icon"/>
+                    <q-item-main>
+                        <q-item-tile label>{{field.label}}</q-item-tile>
+                    </q-item-main>
+                </q-item>
+            </q-list>
+        </q-context-menu>
        <div class="flex-item pos-item">
            <q-btn flat
                   class="pos-item-popover"
-                   icon="menu"
-            >
+                   icon="menu">
+
                <q-popover
                        v-model="popover_menu"
                        self="top left">
-                    <q-context-menu>
-                        <q-list link separator no-border class="todo-menu">
-                            <q-item v-for="field in menuPopupTodo" :key="field.value"
-                                    v-close-overlay
-                                    @click.native="clickMenu(field.value), popover_menu = false">
-                                <q-item-side :icon="field.icon"/>
-                                <q-item-main>
-                                    <q-item-tile label>{{field.label}}</q-item-tile>
-                                </q-item-main>
-                            </q-item>
-                        </q-list>
-                    </q-context-menu>
+                    <q-list link separator no-border class="todo-menu">
+                        <q-item v-for="field in menuPopupTodo" :key="field.value"
+                                v-close-overlay
+                                @click.native="clickMenu(field.value), popover_menu = false">
+                            <q-item-side :icon="field.icon"/>
+                            <q-item-main>
+                                <q-item-tile label>{{field.label}}</q-item-tile>
+                            </q-item-main>
+                        </q-item>
+                    </q-list>
                </q-popover>
            </q-btn>
        </div>
        <!--<div class="flex-item pos-item">[{{ itemtodo.pos }}]</div>-->
        <div class="flex-item priority-item">
-            <q-btn push
+            <q-btn push flat
                   class="priority-item-popover"
                   :icon="iconPriority">
                <q-popover
@@ -46,7 +56,7 @@
            </q-btn>
        </div>
        <div class="flex-item completed-item">
-            <q-btn push
+            <q-btn push flat
                   :class="classCompleted"
                   :icon="iconCompleted"
                   @click.native="setCompleted">
@@ -64,6 +74,9 @@
                    v-model="itemtodo.expiring_at"
                    class="myexpired"/>
        </div>
+        <!--<div class="flex-item btn-item">-->
+            <!--{{classPosItemPopup}}-->
+        <!--</div>-->
        <!--<div class="flex-item btn-item">-->
        <!--<q-btn class="mybtn" round color="" icon="delete" @click.native="removeitem(itemtodo.id)"></q-btn>-->
        <!--</div>-->
--- a/src/components/todos/todo/todo.scss
+++ b/src/components/todos/todo/todo.scss
@@ -15,10 +15,38 @@
 .myitemdrag {
  padding: 2px;
  margin-top: 4px;
-  border: solid 1px #ccc;
+  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;
 }
--- a/src/components/todos/todo/todo.ts
+++ b/src/components/todos/todo/todo.ts
@@ -119,7 +119,7 @@ export default class Todo extends Vue {
    console.log(mystr, 'elem [', elem.id, '] ', elem.descr, ' Pr(', this.getPriorityByInd(elem.priority), ') [', elem.id_prev, '-', elem.id_next, '] modif=', elem.modified)
  }

-  haveSamePriority(ind1, ind2) {
+  getPriorityToSet(ind1, ind2) {
    let elem1 = this.getelem(ind1)
    let elem2 = this.getelem(ind2)

@@ -133,24 +133,67 @@ export default class Todo extends Vue {
    } else {
      return (elem1 != null) ? elem1.priority : ((elem2 != null) ? elem2.priority : null)
    }
+  }

-    return -1
+  getCompleted(ind1, ind2) {
+    let elem1 = this.getelem(ind1)
+    let elem2 = this.getelem(ind2)
+
+    if ((elem1 !== null) && (elem2 !== null)) {
+      if (elem1.completed === elem2.completed) {
+        return true
+      } else {
+        return elem1.completed
+      }
+    } else {
+      return (elem1 != null) ? elem1.completed : ((elem2 != null) ? elem2.completed : null)
+    }
+
+  }
+
+  getTitlePriority (priority) {
+    let cl = ''
+
+    if (priority === rescodes.Todos.PRIORITY_HIGH)
+      cl = 'high_priority'
+    else if (priority === rescodes.Todos.PRIORITY_NORMAL)
+      cl = 'medium_priority'
+    else if (priority === rescodes.Todos.PRIORITY_LOW)
+      cl = 'low_priority'
+
+    return cl + ' titlePriority'
  }

  async onEnd(itemdragend) {
    console.log('newindex=', itemdragend.newIndex, 'oldindex=', itemdragend.oldIndex)

+    if (itemdragend.newIndex === itemdragend.oldIndex)
+      return // If nothing change, exit
+
    let myobj = this.getelem(itemdragend.newIndex)

    const indini = itemdragend.newIndex - 1
    const indfine = itemdragend.newIndex + 1
    console.log('indini', indini, 'indfine', indfine)
    // If the newIndex is between another priority, then change priority
-    let newpriority = this.haveSamePriority(indini, indfine)
-    if (newpriority != null && newpriority >= 0) {
-      myobj.modified = (myobj.priority !== newpriority) ? true : myobj.modified
-      myobj.priority = newpriority
-      console.log('NewPriority: ', newpriority)
+
+    let completed = this.getCompleted(indini, indfine)
+    let changecompleted = false
+    if (completed) {
+      myobj.modified = (myobj.completed !== completed) ? true : myobj.modified
+      myobj.completed = completed
+      changecompleted = true
+      console.log('Newcompleted: ', completed)
+    }
+
+    if (!changecompleted) {
+      // if I changed the completed, I don't have to put in other list priority
+      let newpriority = this.getPriorityToSet(indini, indfine)
+      if (newpriority != null && newpriority >= 0) {
+        myobj.modified = (myobj.priority !== newpriority) ? true : myobj.modified
+        myobj.priority = newpriority
+        console.log('NewPriority: ', newpriority)
+      }
    }

    await this.updateLinkedList(false)
--- a/src/components/todos/todo/todo.vue
+++ b/src/components/todos/todo/todo.vue
@@ -8,7 +8,7 @@
                     v-on:keyup.enter="insertTodo"/>


-            <div style="display: none">{{ prior = 0 }}</div>
+            <div style="display: none">{{ prior = 0, priorcomplet = false }}</div>
            <div class="drag">
                <div class="flex-container">
                    <draggable v-model="todos_arr" :options="{draggable:'.myitemdrag'}"
@@ -16,14 +16,18 @@
                        <transition-group>
                            <div :id="getmyid(mytodo.id)" :key="mytodo.id" v-for="mytodo in todos_arr" class="myitemdrag">

-                                <div v-if="prior !== mytodo.priority">
+                                <div v-if="(prior !== mytodo.priority) && !mytodo.completed" :class="getTitlePriority(mytodo.priority)">
                                    <label>{{getPriorityByInd(mytodo.priority)}}</label>
                                </div>
+                                <div v-if="(!priorcomplet && mytodo.completed)" class="titleCompleted">
+                                    <label>{{$t('todo.completed')}}</label>
+                                    <div style="display: none">{{ priorcomplet = true }}</div>
+                                </div>
                                <SingleTodo ref="single" @deleteitem="deleteitem" @eventupdate="updateitem"
                                            @click="clickRiga"
                                            :itemtodo='mytodo' />

-                                <div style="display: none">{{ prior = mytodo.priority }}</div>
+                                <div style="display: none">{{ prior = mytodo.priority, priorcomplet = mytodo.completed }}</div>
                            </div>
                        </transition-group>
                    </draggable>
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -84,6 +84,9 @@ const messages = {
        undefined: 'non definito'
      }
    },
+    todo: {
+      completed: 'Completati'
+    }
  },
  enUk: {
    comp:{
@@ -170,6 +173,9 @@ const messages = {
        undefined: 'undefined'
      }
    },
+    todo: {
+      completed: 'Completed'
+    }
  },
 };