Calendar, Events

package.json

@@ -28,7 +28,7 @@
   "dependencies": {
     "@babel/plugin-transform-runtime": "^7.4.0",
     "@babel/runtime": "^7.0.0",
-    "@quasar/extras": "^1.1.0",
+    "@quasar/extras": "^1.1.2",
     "@types/vuelidate": "^0.7.0",
     "@vue/eslint-config-standard": "^4.0.0",
     "acorn": "^6.0.0",
@@ -50,7 +50,7 @@
     "normalize.css": "^8.0.0",
     "npm": "^6.9.0",
     "nprogress": "^0.2.0",
-    "quasar": "^1.0.0-beta.17",
+    "quasar": "^1.0.0-beta.21",
     "quasar-extras": "^2.0.8",
     "register-service-worker": "^1.0.0",
     "vee-validate": "^2.1.2",
@@ -85,7 +85,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-syntax-import-meta": "^7.2.0",
     "@babel/preset-env": "^7.4.2",
-    "@quasar/app": "^1.0.0-beta.18",
+    "@quasar/app": "^1.0.0-beta.22",
     "@quasar/quasar-app-extension-typescript": "^1.0.0-alpha.11",
     "@types/dotenv": "^4.0.3",
     "@types/jest": "^23.1.4",

quasar.conf.js

@@ -116,7 +116,7 @@ module.exports = function (ctx) {
     },
     devServer: {
       https: false,
-      port: 8080,
+      port: 8082,
       open: false // opens browser window automatically
     },
     // framework: 'all' --- includes everything; for dev only!

src-pwa/custom-service-worker.js

@@ -6,7 +6,7 @@
 
 // Questo è il swSrc
 
-console.log('   [  VER-0.0.61 ] _---------________------  PAO: this is my custom service worker');
+console.log('   [  VER-0.0.63 ] _---------________------  PAO: this is my custom service worker');
 
 importScripts('../statics/js/idb.js');
 importScripts('../statics/js/storage.js');

src/components/CDate/CDate.scss

@@ -1,20 +1,5 @@
 $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;

src/components/CProgress/CProgress.scss

@@ -1,20 +1,5 @@
 $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;

src/components/Header/Header.ts

@@ -9,7 +9,7 @@ import { GlobalStore, UserStore } from '@modules'
 import { Watch } from 'vue-property-decorator'
 import { tools } from '../../store/Modules/tools'
 
-import Quasar from 'quasar'
+import Quasar, { Screen } from 'quasar'
 
 @Component({
   name: 'Header',
@@ -43,6 +43,14 @@ export default class Header extends Vue {
     // { label: 'German', icon: 'fa-flag-de', value: 'de', image: '../statics/images/de.png', short: 'DE' },
   ]
 
+  get getappname(){
+    if (Screen.width < 400) {
+      return this.$t('msg.myAppNameShort')
+    } else {
+      return this.$t('msg.myAppName')
+    }
+  }
+
   get conn_changed() {
     return GlobalStore.state.stateConnection
   }

src/components/Header/Header.vue

@@ -39,7 +39,7 @@
                     <q-avatar>
                         <img :src="imglogo" height="27">
                     </q-avatar>
-                    {{$t('msg.myAppName')}}
+                    {{getappname}}
                     <div slot="subtitle">{{$t('msg.myDescriz')}} {{ getAppVersion() }}</div>
                 </q-toolbar-title>
 

src/components/index.ts

@@ -2,4 +2,7 @@ export * from '../views/categories'
 export * from './todos'
 export * from './logo'
 export * from './CProgress'
+export * from './CCard'
+export * from './CPage'
+export * from './CTitle'
 export * from './CDate'

src/components/projects/SingleProject/SingleProject.scss

@@ -7,25 +7,11 @@ $heightBtn: 100%;
 $heightcounter: 26px;
 $heightdescr: 20px;
 
-.flex-item{
-   // background-color: #d5e2eb;
-  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%;
-}
-
 
 .flex-container2 {
   flex-flow: row wrap;
   justify-content: space-between;
-  margin: 0px 1px 0px 1px;  // top right bottom left
+  margin: 0px 10px 0px 10px;  // top right bottom left
 }
 
 // Set visibility: visible to the icon menu of pos-item-popover

src/components/projects/SingleProject/SingleProject.ts

@@ -235,14 +235,14 @@ export default class SingleProject extends Vue {
     // if (!this.sel) {
 
     if (!this.inEdit) {
-      console.log('entrato...')
+      // console.log('entrato...')
-      // this.attivaEdit = true
       this.$emit('deselectAllRowstodo', null, false)
       this.$emit('deselectAllRowsproj', this.itemproject, true)
 
       if (!this.sel) {
         this.selectRiga()
       } else {
+        this.$emit('deselectAllRowsproj', null, false, false, true)
         this.deselectRiga()
       }
     }

src/components/todos/CTodo/CTodo.ts

@@ -191,8 +191,8 @@ export default class CTodo extends Vue {
 
   }
 
-  public deselectAllRowsproj(item: IProject, check, onlythis: boolean = false) {
+  public deselectAllRowsproj(item: IProject, check, onlythis: boolean = false, deselectRiga: boolean = false) {
-    this.$emit('deselectAllRowsproj', item, check, onlythis)
+    this.$emit('deselectAllRowsproj', item, check, onlythis, deselectRiga)
   }
 
   public setitemsel(item: ITodo) {

src/components/todos/SingleTodo/SingleTodo.scss

@@ -7,25 +7,10 @@ $heightBtn: 100%;
 $heightcounter: 26px;
 $heightdescr: 20px;
 
-.flex-item{
-   // background-color: #d5e2eb;
-  padding: 0px;
-  margin: 1px;
-  margin-left: 3px;
-  margin-right: 3px;
-  color: #000;
-  font-size: 0.85rem;
-  height: $heightBtn;
-  line-height: $heightBtn;
-  vertical-align: middle;
-  //flex: 0 0 100%;
-}
-
-
 .flex-container2 {
   flex-flow: row wrap;
   justify-content: space-between;
-  margin: 0px 1px 0px 1px;  // top right bottom left
+  margin: 0px 10px 0px 10px;  // top right bottom left
 }
 
 // Set visibility: visible to the icon menu of pos-item-popover

src/components/todos/SingleTodo/SingleTodo.ts

@@ -41,6 +41,7 @@ export default class SingleTodo extends Vue {
   public itemtodoPrec: ITodo
   public clButtPopover: string = 'pos-item-popover'
   public numpos: number = 0
+  public attivaEdit: boolean = false
 
   public $q: any
 
@@ -215,7 +216,6 @@ export default class SingleTodo extends Vue {
   public clickRiga(clickmenu: boolean = false) {
     // console.log('CLICK RIGA ************')
 
-    if (!this.sel) {
     if (!this.inEdit) {
       this.$emit('deselectAllRowsproj', null, false, false)
       this.$emit('deselectAllRowstodo', this.itemtodo, true)
@@ -223,11 +223,11 @@ export default class SingleTodo extends Vue {
       if (!this.sel) {
         this.selectRiga()
       } else {
+        this.$emit('deselectAllRowsproj', null, false, false, true)
         this.deselectRiga()
       }
     }
   }
-  }
 
   public selectRiga() {
     // console.log('selectRiga', this.itemtodo.descr)
@@ -238,10 +238,11 @@ export default class SingleTodo extends Vue {
   }
 
   public deselectRiga() {
-    // console.log('DeselectRiga', this.itemtodo.descr)
+    console.log('DeselectRiga', this.itemtodo.descr)
     this.sel = false
     this.classRow = ''
     this.inEdit = false
+    this.attivaEdit = false
     this.updateClasses()
   }
 
@@ -267,7 +268,8 @@ export default class SingleTodo extends Vue {
   }
 
   public editTodo() {
-    if (this.itemtodo.statustodo !== tools.Status.COMPLETED) {
+
+    if (this.attivaEdit) {
       // console.log('INIZIO - editTodo')
       this.$emit('click')
       this.precDescr = this.itemtodo.descr
@@ -299,7 +301,7 @@ export default class SingleTodo extends Vue {
         theField.focus()
       }
       // console.log('focus()')
-    }, 300)
+    }, 400)
   }
 
   public exitEdit(singola: boolean = false) {
@@ -309,6 +311,7 @@ export default class SingleTodo extends Vue {
       }
       // console.log('exitEdit')
       this.inEdit = false
+      this.attivaEdit = false
       this.updateClasses()
       this.$emit('deselectAllRowsproj', null, false, false)
       this.$emit('deselectAllRowstodo', this.itemtodo, false, singola)
@@ -390,6 +393,7 @@ export default class SingleTodo extends Vue {
 
     this.watchupdate('descr')
     this.inEdit = false
+    this.attivaEdit = false
     // this.precDescr = this.itemtodo.descr
     this.updateClasses()
   }
@@ -456,6 +460,12 @@ export default class SingleTodo extends Vue {
 
   }
 
+  public activeEdit() {
+    console.log('Attiva Edit')
+    this.attivaEdit = true
+    this.editTodo()
+  }
+
   public async clickMenu(action) {
     console.log('click menu: ', action)
     if (action === lists.MenuAction.DELETE) {
@@ -464,6 +474,8 @@ export default class SingleTodo extends Vue {
       return await this.enableExpiring()
     } else if (action === lists.MenuAction.COMPLETED) {
       return await this.setCompleted()
+    } else if (action === lists.MenuAction.EDIT) {
+      this.activeEdit()
     } else if (action === lists.MenuAction.PROGRESS_BAR) {
       return await this.updatedata('progress')
     } else if (action === lists.MenuAction.CUT) {

src/components/todos/SingleTodo/SingleTodo.vue

@@ -11,7 +11,7 @@
         </div>
 
         <div class="flex-item donotdrag divdescrTot">
-            <q-input v-if="sel && itemtodo.statustodo !== tools.Status.COMPLETED" hide-underline type="textarea" ref="inputdescr"
+            <q-input v-if="sel && inEdit && itemtodo.statustodo !== tools.Status.COMPLETED" hide-underline type="textarea" ref="inputdescr"
                      v-model.trim="precDescr"
                      autogrow
                      borderless
@@ -65,7 +65,7 @@
                    data_class="data_string" :readonly="!CanIModifyTodo">
             </CDate>
         </div>
-        <div v-if="isTodo()" :class="classMenuBtn" @mousedown="clickRiga">
+        <div :class="classMenuBtn" @mousedown="clickRiga">
             <q-btn flat
                    :class="clButtPopover"
                    :readonly="!CanIModifyTodo"

src/layouts/menuone/menuOne.scss

@@ -66,6 +66,10 @@
   font-size: 1.5rem;
 }
 
+.clexpansion{
+  min-width: 0px !important;
+}
+
 .my-menu-active {
   background-color: rgba(174, 189, 241, 0.71);
 }

src/layouts/menuone/menuOne.vue

@@ -17,7 +17,7 @@
                             <q-expansion-item v-for="(child2, index) in myitemmenu.routes2"
                                               :key="index"
                                               :to="child2.route"
-                                              :header-inset-level="myitemmenu.level_child"
+                                              :header-inset-level="child2.level_child"
                                               :duration="300"
                                               :icon="child2.materialIcon"
                                               active-class="my-menu-active"
@@ -27,7 +27,7 @@
                                 <q-expansion-item v-if="!!child2.routes2" v-for="(child3, index) in child2.routes2"
                                                   :key="index"
                                                   :to="child3.route"
-                                                  :header-inset-level="myitemmenu.level_child"
+                                                  :header-inset-level="child3.level_child"
                                                   :duration="300"
                                                   :icon="child3.materialIcon"
                                                   :expand-icon="child3.icon"
@@ -44,6 +44,19 @@
                     <div v-else>
                         <q-slide-transition :duration=200>
                             <div v-show="true">
+                                <q-expansion-item
+                                        :to="myitemmenu.route"
+                                        :header-inset-level="myitemmenu.level_parent"
+                                        :content-inset-level="myitemmenu.level_parent"
+                                        :label="getLabelByItem(myitemmenu)"
+                                        :icon="myitemmenu.materialIcon"
+                                        expand-icon="none"
+                                        header-class="my-menu"
+                                        active-class="my-menu-active">
+                                </q-expansion-item>
+
+
+                                    <!--
                                 <q-item
                                         clickable
                                         v-ripple
@@ -58,7 +71,7 @@
                                         {{$t(myitemmenu.name)}}
                                     </q-item-section>
                                 </q-item>
-
+-->
                             </div>
                         </q-slide-transition>
                     </div>

src/model/index.ts

@@ -8,3 +8,5 @@ export * from './key-value'
 export * from './Categories'
 export * from './Todos'
 export * from './Projects'
+
+export * from './Calendar'

src/statics/i18n.js

@@ -8,6 +8,7 @@ const msgglobal = {
       no: 'No',
       delete: 'Elimina',
       cancel: 'Annulla',
+      today: 'Oggi',
       msg: {
         titledeleteTask: 'Elimina Task',
         deleteTask: "Vuoi Eliminare {mytodo}?"
@@ -147,6 +148,20 @@ const msgglobal = {
       themecolor: 'Tema Colore',
       themebgcolor: 'Tema Colore Sfondo'
     },
+    cal: {
+      starttime: 'Dalle',
+      endtime: 'alle',
+      duration: 'Durata',
+      hours: 'Orario',
+      where: 'Dove',
+      teacher: 'Insegnante',
+      enterdate: 'Inserisci data',
+      details: 'Dettagli',
+      infoextra: 'Date e Ora Extra:',
+      alldayevent: 'Tutto il giorno',
+      eventstartdatetime: 'Data e Ora Inizio Evento',
+      enterEndDateTime: 'Data e Ora Fine Evento'
+    }
   },
   'es': {
     dialog: {
@@ -155,6 +170,7 @@ const msgglobal = {
       no: 'No',
       delete: 'Borrar',
       cancel: 'Cancelar',
+      today: 'Hoy',
       msg: {
         titledeleteTask: 'Borrar Tarea',
         deleteTask: 'Quieres borrar {mytodo}?'
@@ -288,6 +304,20 @@ const msgglobal = {
       themecolor: 'Tema Colores',
       themebgcolor: 'Tema Colores Fondo'
     },
+    cal: {
+      starttime: 'Inicio',
+      endtime: 'fin',
+      duration: 'Duración',
+      hours: 'Tiempo',
+      where: 'Donde',
+      teacher: 'Maestro',
+      enterdate: 'Ingresar la fecha',
+      details: 'Detalles',
+      infoextra: 'Fecha y Hora Extras:',
+      alldayevent: 'Todo el dia',
+      eventstartdatetime: 'Evento de inicio de fecha y hora',
+      enterEndDateTime: 'Fecha y hora del evento final'
+    }
   },
   'enUs': {
     dialog: {
@@ -296,6 +326,7 @@ const msgglobal = {
       no: 'No',
       delete: 'Delete',
       cancel: 'Cancel',
+      today: 'Today',
       msg: {
         titledeleteTask: 'Delete Task',
         deleteTask: 'Delete Task {mytodo}?'
@@ -429,6 +460,20 @@ const msgglobal = {
       themecolor: 'Theme Color',
       themebgcolor: 'Theme Color Background'
     },
+    cal: {
+      starttime: 'From',
+      endtime: 'to',
+      duration: 'Duration',
+      hours: 'Hours',
+      where: 'Where',
+      teacher: 'Teacher',
+      enterdate: 'Enter date',
+      details: 'Details',
+      infoextra: 'Extra Info DateTime',
+      alldayevent: 'All-Day event',
+      eventstartdatetime: 'Event start date and time',
+      enterEndDateTime: 'Event end date and time'
+    }
   },
 };
 

src/store/Modules/GlobalStore.ts

@@ -16,6 +16,7 @@ import { GlobalStore, Projects, Todos, UserStore } from '@store'
 import messages from '../../statics/i18n'
 import globalroutines from './../../globalroutines/index'
 
+
 import { cfgrouter } from '../../router/route-config'
 
 let stateConnDefault = 'online'

src/store/Modules/Projects.ts

@@ -56,13 +56,14 @@ function updateDataCalculated(projout, projin) {
 }
 
 function getproj(projects, idproj, tipoproj: string) {
+  console.log('getproj', tipoproj)
 
   if (tipoproj === RouteNames.myprojects)
-    return tools.mapSort(projects.filter((proj) => (proj.id_parent === idproj) && (proj.userId === UserStore.state.userId) && (proj.privacyread === Privacy.onlyme)))
+    return projects.filter((proj) => (proj.id_parent === idproj) && (proj.userId === UserStore.state.userId) && (proj.privacyread === Privacy.onlyme))
   else if (tipoproj === RouteNames.projectsshared)
-    return tools.mapSort(projects.filter((proj) => (proj.id_parent === idproj) && (proj.userId === UserStore.state.userId) && (proj.privacyread !== Privacy.onlyme)))
+    return projects.filter((proj) => (proj.id_parent === idproj) && (proj.userId === UserStore.state.userId) && (proj.privacyread !== Privacy.onlyme))
   else if (tipoproj === RouteNames.projectsall)
-    return tools.mapSort(projects.filter((proj) => (proj.id_parent === idproj) && (proj.userId !== UserStore.state.userId) ))
+    return projects.filter((proj) => (proj.id_parent === idproj) && (proj.userId !== UserStore.state.userId) )
 }
 
 namespace Getters {
@@ -110,7 +111,7 @@ namespace Getters {
   }, 'getRecordEmpty')
 
   const projs_dacompletare = b.read((state: IProjectsState) => (id_parent: string, tipoproj: string): IProject[] => {
-    // console.log('projs_dacompletare', miei)
+    // console.log('projs_dacompletare')
     if (state.projects) {
       // console.log('state.projects', state.projects)
       return getproj(state.projects, id_parent, tipoproj)
@@ -121,7 +122,7 @@ namespace Getters {
 
   const listaprojects = b.read((state: IProjectsState) => (tipoproj: string): IMenuList[] => {
     if (state.projects) {
-      // console.log('state.projects', state.projects)
+      console.log('listaprojects')
       const listaproj = getproj(state.projects, process.env.PROJECT_ID_MAIN, tipoproj)
       const myarr: IMenuList[] = []
       for (const proj of listaproj) {

src/store/Modules/Todos.ts

@@ -92,30 +92,41 @@ namespace Getters {
     return objtodo
   }, 'getRecordEmpty')
   const items_dacompletare = b.read((stateparam: ITodosState) => (cat: string): ITodo[] => {
+    // console.log('items_dacompletare')
     const indcat = getindexbycategory(cat)
+    let arrout = []
     // console.log('items_dacompletare', 'indcat', indcat, stateparam.todos[indcat])
     if (stateparam.todos[indcat]) {
-      return stateparam.todos[indcat].filter((todo) => todo.statustodo !== tools.Status.COMPLETED)
+      arrout = stateparam.todos[indcat].filter((todo) => todo.statustodo !== tools.Status.COMPLETED)
     } else {
-      return []
+      arrout = []
     }
+
+    // return tools.mapSort(arrout)
+    return arrout
   }, 'items_dacompletare')
 
   const todos_completati = b.read((stateparam: ITodosState) => (cat: string): ITodo[] => {
+    console.log('todos_completati')
     const indcat = getindexbycategory(cat)
     if (stateparam.todos[indcat]) {
+      let arrout = []
       if (stateparam.showtype === costanti.ShowTypeTask.SHOW_LAST_N_COMPLETED) {   // Show only the first N completed
-        return stateparam.todos[indcat].filter((todo) => todo.statustodo === tools.Status.COMPLETED).slice(0, stateparam.visuLastCompleted)
+        arrout = stateparam.todos[indcat].filter((todo) => todo.statustodo === tools.Status.COMPLETED).slice(0, stateparam.visuLastCompleted)
       }
       else if (stateparam.showtype === costanti.ShowTypeTask.SHOW_ONLY_TOCOMPLETE) {
-        return []
+        arrout = []
       }
       else if (stateparam.showtype === costanti.ShowTypeTask.SHOW_ALL) {
-        return stateparam.todos[indcat].filter((todo) => todo.statustodo === tools.Status.COMPLETED)
+        arrout = stateparam.todos[indcat].filter((todo) => todo.statustodo === tools.Status.COMPLETED)
       }
       else {
-        return []
+        arrout = []
       }
+
+      return arrout
+      // return tools.mapSort(arrout)
+
     } else {
       return []
     }

src/store/Modules/index.ts

@@ -3,3 +3,4 @@ export {default as GlobalStore} from './GlobalStore'
 export {default as UserStore} from './UserStore'
 export {default as Todos} from './Todos'
 export {default as Projects} from './Projects'
+export {default as CalendarStore} from './Store/calendar/CalendarStore'

src/store/Modules/tools.ts

@@ -2,7 +2,7 @@ import { Todos, Projects, UserStore } from '@store'
 import globalroutines from './../../globalroutines/index'
 import { costanti } from './costanti'
 import { translation } from './translation'
-import Quasar, { date } from 'quasar'
+import Quasar, { date, Screen } from 'quasar'
 import { IListRoutes, IMenuList, IProject, ITodo, Privacy } from '@src/model'
 import * as ApiTables from '@src/store/Modules/ApiTables'
 import translate from '@src/globalroutines/util'
@@ -65,6 +65,14 @@ export const tools = {
     COMPLETED: 10
   },
 
+  DateFormatter: new Intl.DateTimeFormat(this.getLocale() || void 0, {
+    weekday: 'long',
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric'
+    // timeZone: 'UTC'
+  }),
+
   selectPhase: {
     it: [
       {
@@ -285,6 +293,21 @@ export const tools = {
         {
           id: 10,
           disable: false,
+          label: 'Modifica',
+          value: lists.MenuAction.EDIT,
+          icon: 'create'
+        },
+        {
+          id: 11,
+          disable: false,
+          label: 'Elimina',
+          value: lists.MenuAction.DELETE,
+          icon: 'delete',
+          checked: false
+        },
+        {
+          id: 12,
+          disable: false,
           label: '',
           value: lists.MenuAction.PROGRESS_BAR,
           icon: 'rowing',
@@ -332,14 +355,6 @@ export const tools = {
           value: lists.MenuAction.TOGGLE_EXPIRING,
           icon: 'date_range',
           checked: true
-        },
-        {
-          id: 50,
-          disable: false,
-          label: 'Elimina',
-          value: lists.MenuAction.DELETE,
-          icon: 'delete',
-          checked: false
         }
       ],
       es:
@@ -351,6 +366,21 @@ export const tools = {
             value: lists.MenuAction.CUT,
             icon: 'undo'
           },
+          {
+            id: 7,
+            disable: false,
+            label: 'Editar',
+            value: lists.MenuAction.EDIT,
+            icon: 'create'
+          },
+          {
+            id: 8,
+            disable: false,
+            label: 'Borrar',
+            value: lists.MenuAction.DELETE,
+            icon: 'delete',
+            checked: false
+          },
           {
             id: 10,
             disable: false,
@@ -401,14 +431,6 @@ export const tools = {
             value: lists.MenuAction.TOGGLE_EXPIRING,
             icon: 'date_range',
             checked: true
-          },
-          {
-            id: 50,
-            disable: false,
-            label: 'Borrar',
-            value: lists.MenuAction.DELETE,
-            icon: 'delete',
-            checked: false
           }
         ],
       enUs:
@@ -420,6 +442,21 @@ export const tools = {
             value: lists.MenuAction.CUT,
             icon: 'undo'
           },
+          {
+            id: 7,
+            disable: false,
+            label: 'Edit',
+            value: lists.MenuAction.EDIT,
+            icon: 'create'
+          },
+          {
+            id: 8,
+            disable: false,
+            label: 'Delete',
+            value: lists.MenuAction.DELETE,
+            icon: 'trash',
+            checked: false
+          },
           {
             id: 10,
             disable: false,
@@ -470,14 +507,6 @@ export const tools = {
             value: lists.MenuAction.TOGGLE_EXPIRING,
             icon: 'date_range',
             checked: true
-          },
-          {
-            id: 50,
-            disable: false,
-            label: 'Delete',
-            value: lists.MenuAction.DELETE,
-            icon: 'trash',
-            checked: false
           }
         ]
     }
@@ -489,21 +518,29 @@ export const tools = {
         id: 5,
         disable: false,
         label: 'Taglia',
-        value: 71, // CUT
+        value: lists.MenuAction.CUT,
         icon: 'undo'
       },
       {
         id: 10,
         disable: false,
         label: 'Modifica',
-        value: 160, // EDIT
+        value: lists.MenuAction.EDIT,
         icon: 'create'
       },
+      {
+        id: 11,
+        disable: false,
+        label: 'Elimina',
+        value: lists.MenuAction.DELETE,
+        icon: 'delete',
+        checked: false
+      },
       {
         id: 40,
         disable: false,
         label: 'Imposta Scadenza',
-        value: 101, // TOGGLE_EXPIRING
+        value: lists.MenuAction.TOGGLE_EXPIRING,
         icon: 'date_range',
         checked: true
       },
@@ -524,14 +561,6 @@ export const tools = {
         icon: 'format_color_fill',
         checked: false,
         arrlista: lists.selectTheme
-      },
-      {
-        id: 50,
-        disable: false,
-        label: 'Elimina',
-        value: 100, // DELETE
-        icon: 'delete',
-        checked: false
       }
     ],
     es:
@@ -540,21 +569,29 @@ export const tools = {
           id: 5,
           disable: false,
           label: 'Cortar',
-          value: 71, // CUT
+          value: lists.MenuAction.CUT,
           icon: 'undo'
         },
         {
           id: 10,
           disable: false,
           label: 'Editar',
-          value: 160, // EDIT
+          value: lists.MenuAction.EDIT,
           icon: 'create'
         },
+        {
+          id: 11,
+          disable: false,
+          label: 'Borrar',
+          value: 100, // DELETE
+          icon: 'delete',
+          checked: false
+        },
         {
           id: 40,
           disable: false,
           label: 'Establecer expiración',
-          value: 101, // TOGGLE_EXPIRING
+          value: lists.MenuAction.TOGGLE_EXPIRING,
           icon: 'date_range',
           checked: true
         },
@@ -575,14 +612,6 @@ export const tools = {
           icon: 'format_color_fill',
           checked: false,
           arrlista: lists.selectTheme
-        },
-        {
-          id: 50,
-          disable: false,
-          label: 'Borrar',
-          value: 100, // DELETE
-          icon: 'delete',
-          checked: false
         }
       ],
     enUs:
@@ -598,7 +627,7 @@ export const tools = {
           id: 10,
           disable: false,
           label: 'Edit',
-          value: 160, // EDIT
+          value: lists.MenuAction.EDIT,
           icon: 'create'
         },
         {
@@ -1205,6 +1234,7 @@ export const tools = {
   ,
 
   getLastListNotCompleted(nametable, cat, tipoproj: string) {
+    // console.log('getLastListNotCompleted')
     // const module = tools.getModulesByTable(nametable)
     let arr = []
     if (nametable === 'projects')
@@ -1243,9 +1273,7 @@ export const tools = {
   }
   ,
 
-  showNotif(q
+  showNotif(q: any, msg, data ?: INotify | null
-              :
-              any, msg, data ?: INotify | null
   ) {
     let myicon = data ? data.icon : 'ion-add'
     if (!myicon) {
@@ -1394,7 +1422,8 @@ export const tools = {
   ,
 
   mapSort(linkedList) {
-    const sortedList = []
+    console.log('mapSort')
+    let sortedList = []
     const map = new Map()
     let currentId = null
 
@@ -1438,11 +1467,28 @@ export const tools = {
       }
     }
 
-    // console.log('DOPO sortedList', sortedList);
+    // Now Order by Priority
+    if (!!sortedList) {
+      if (sortedList.length > 0) {
+        if (sortedList[0].priority !== undefined) {
+          const sortednew = []
+          let myarr = []
+          for (const priorelem of lists.selectPriority.it) {
+            const myprior = priorelem.value
+            myarr = sortedList.filter((item) => item.priority === myprior)
+            if (myarr !== undefined)
+              sortednew.push(...myarr)
+          }
+
+          sortedList = sortednew
+        }
+      }
+    }
+
+    // console.log('DOPO sortedList', sortedList)
 
     return sortedList
-  }
+  },
-  ,
 
   getProgressClassColor(progress) {
     if (progress > 66) {
@@ -1509,6 +1555,13 @@ export const tools = {
     return value.charAt(0).toUpperCase() + value.slice(1)
   },
 
+  firstchars(value, numchars = 200) {
+    if (!value) {
+      return ''
+    }
+    return value.substring(0, numchars) + '...'
+  },
+
   getDateNow() {
     const mydate = new Date()
     return mydate
@@ -1593,7 +1646,7 @@ export const tools = {
 
       if ('serviceWorker' in navigator) {
         navigator.serviceWorker.ready
-          .then(function (swreg) {
+          .then((swreg) => {
             swreg.showNotification('Successfully subscribed!', options)
           })
       }
@@ -1633,12 +1686,16 @@ export const tools = {
       }
 
       navigator.serviceWorker.ready
-        .then(function (swreg) {
+        .then((swreg) => {
           swreg.showNotification('aaa', options)
         })
     }
   },
 
+  getemailto(text) {
+    return 'mailto:' + text
+  },
+
   askfornotification() {
     tools.showNotif(this.$q, this.$t('notification.waitingconfirm'), { color: 'positive', icon: 'notifications' })
 
@@ -1653,5 +1710,129 @@ export const tools = {
       }
     })
 
+  },
+
+  heightgallery() {
+    if (Screen.width < 400) {
+      return '200px'
+    } else if (Screen.width < 600) {
+      return '300px'
+    } else {
+      return '500px'
     }
+  },
+
+  myheight_imgtitle() {
+    if (Screen.width < 400) {
+      return '250'
+    } else if (Screen.width < 600) {
+      return '350'
+    } else {
+      return '350'
+    }
+  },
+
+  myheight_dialog() {
+    if (Screen.width < 400) {
+      return '350'
+    } else if (Screen.width < 600) {
+      return '400'
+    } else {
+      return '500'
+    }
+  },
+
+  styles_imgtitle() {
+    if (Screen.width < 400) {
+      return 'max-height: 250px'
+    } else {
+      return 'max-height: 350px'
+    }
+  },
+
+  /*
+      <q-img
+        src="https://cdn.quasar.dev/img/image-src.png"
+        srcset="https://cdn.quasar.dev/img/image-1x.png 400w,
+                https://cdn.quasar.dev/img/image-2x.png 800w,
+                https://cdn.quasar.dev/img/image-3x.png 1200w,
+                https://cdn.quasar.dev/img/image-4x.png 1600w"
+        sizes="(max-width: 400px) 400w,
+              (min-width: 400px) and (max-width: 800px) 800w,
+              (min-width: 800px) and (max-width: 1200px) 1200w,
+              (min-width: 1200px) 1600w"
+        style="height: 280px; max-width: 300px"
+      >
+        <div class="absolute-bottom text-body1 text-center">
+          With srcset & sizes
+        </div>
+      </q-img>
+  */
+
+  getsizes() {
+    return '(max-width: 400px) 400w, ' +
+      '(min-width: 400px) and (max-width: 800px) 800w, ' +
+      '(min-width: 800px) and (max-width: 1200px) 1200w, ' +
+      '(min-width: 1200px) 1600w'
+  },
+
+  maxwidth_imgtitle() {
+    if (Screen.width < 400) {
+      return 'max-width: 250px'
+    } else {
+      return 'max-width: 350px'
+    }
+  },
+
+  mywidth_imgtitle() {
+    if (Screen.width < 400) {
+      return '250'
+    } else if (Screen.width < 600) {
+      return '350'
+    } else {
+      return '350'
+    }
+  },
+
+  mymargin_imgtitle() {
+    return 'auto'
+  },
+
+  showthumbnails() {
+    if (Screen.width < 400) {
+      return false
+    } else if (Screen.width < 600) {
+      return true
+    } else {
+      return true
+    }
+  },
+
+  padTime(val) {
+    val = Math.floor(val)
+    if (val < 10) {
+      return '0' + val
+    }
+    return val + ''
+  },
+
+  getLocale() {
+    return UserStore.state.lang
+  },
+
+  getDateStr(mydate) {
+    if (this.DateFormatter && this.getLocale()) {
+      const date = new Date(mydate)
+      return this.titleFormatter.format(date)
+    }
+    return ''
+  }
+
+// getLocale() {
+  //   if (navigator.languages && navigator.languages.length > 0) {
+  //     return navigator.languages[0]
+  //   } else {
+  //     return navigator.userLanguages || navigator.language || navigator.browserLanguages || 'it-IT'
+  //   }
+  // }
 }

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

@@ -95,20 +95,6 @@ $heightBtn: 100%;
   flex: 1;
 }
 
-.flex-item{
-  // background-color: #d5e2eb;
-  padding: 0px;
-  margin: 1px;
-  margin-left: 3px;
-  margin-right: 3px;
-  color: #000;
-  font-size: 0.85rem;
-  height: $heightBtn;
-  line-height: $heightBtn;
-  vertical-align: middle;
-  //flex: 0 0 100%;
-}
-
 .itemdescr{
   font-size: 1rem;
   flex: 1;

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

@@ -38,6 +38,8 @@ const namespace: string = 'Projects'
 export default class ProjList extends Vue {
   public $q: any
   public projbottom: string = ''
+  public prova: string = ''
+  public provatr: string = ''
   public polling = null
   public service: any
   public scrollable = true
@@ -66,10 +68,10 @@ export default class ProjList extends Vue {
   @Getter('projs_dacompletare', { namespace })
   public projs_dacompletare: (state: IProjectsState, id_parent: string, tipoproj: string) => IProject[]
 
-  @Watch('projs_dacompletare')
+  // @Watch('projs_dacompletare')
-  public changeitems() {
+  // public changeitems() {
-    this.updateindexProj()
+  //   this.updateindexProj()
-  }
+  // }
 
   @Watch('$route.name')
   public changename() {
@@ -99,6 +101,10 @@ export default class ProjList extends Vue {
     // console.log('idproj', this.idProjAtt, 'params' , this.$route.params)
   }
 
+  public keyDownArea(e) {
+    console.log('keyDownArea')
+  }
+
   get classTitle() {
     let cl = 'flex-item categorytitle shadow-4'
     if (!!this.itemprojparent) {
@@ -400,6 +406,7 @@ export default class ProjList extends Vue {
   }
 
   public dbInsert() {
+    console.log('dbInsert')
     const descr = this.projbottom.trim()
 
     this.projbottom = ''
@@ -432,6 +439,7 @@ export default class ProjList extends Vue {
   }
 
   public getCompProjectById(id): SingleProject {
+    if (!!this.$refs.singleproject) {
       console.log('this.$refs.singleproject', this.$refs.singleproject)
       for (const elem of this.$refs.singleproject) {
         // @ts-ignore
@@ -440,6 +448,7 @@ export default class ProjList extends Vue {
         }
       }
     }
+  }
 
   // const descr = this.$t('project.newproj').toString()
 
@@ -494,10 +503,32 @@ export default class ProjList extends Vue {
       this.whatisSel = tools.WHAT_NOTHING
     // console.log('readonly = true')
     this.readonly = true
+
+    this.checkiftoenable()
   }
   public setitemsel(item: ITodo) {
-    this.whatisSel = tools.WHAT_TODO
     this.itemtodosel = item
+    if (item !== null)
+      this.whatisSel = tools.WHAT_TODO
+    else
+      this.whatisSel = tools.WHAT_NOTHING
+
+    this.checkiftoenable()
+  }
+
+  public checkiftoenable() {
+    if (this.whatisSel === tools.WHAT_NOTHING)
+      this.splitterModel = 100
+    else
+      this.splitterModel = 0
+  }
+
+  public setdeselectrow() {
+    console.log('setdeselectrow')
+    this.itemtodosel = null
+    this.itemselproj = null
+    this.whatisSel = tools.WHAT_NOTHING
+    this.checkiftoenable()
   }
 
   public cambiadata(value) {
@@ -542,9 +573,14 @@ export default class ProjList extends Vue {
     }
   }
 
-  public deselectAllRowsproj(item: IProject, check, onlythis: boolean = false) {
+  public deselectAllRowsproj(item: IProject, check, onlythis: boolean = false, deselectRiga: boolean = false) {
     // console.log('deselectAllRowsproj: ', item)
 
+    if (deselectRiga) {
+      this.setdeselectrow()
+      return
+    }
+
     if (!!item && check) {
       // This is the new selected
       // console.log('readonly = false')
@@ -552,6 +588,9 @@ export default class ProjList extends Vue {
       this.readonly = false
     }
 
+    if (this.$refs.singleproject === undefined)
+      return
+
     for (const i in this.$refs.singleproject) {
 
       const contr = this.$refs.singleproject[i] as SingleProject

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

@@ -100,12 +100,12 @@
                         </div>
                         <q-separator></q-separator>
 
-                        <q-input v-if="CanIModifyPanelPrivacy" ref="insertProjBottom" v-model="projbottom"
+                        <q-input v-model="projbottom"
                                  style="margin-left: 6px;"
                                  color="blue-12"
                                  :label="$t('proj.insertbottom')"
                                  :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
-                                 v-on:keyup.enter="dbInsert()">
+                                 >
 
                         </q-input>
 
@@ -129,6 +129,7 @@
                     </div>
                 </template>
                 <template v-if="(whatisSel === tools.WHAT_PROJECT) && (!!itemselproj.descr)" v-slot:after>
+
                     <!--ID = {{itemselproj._id}}-->
                     <div class="q-pa-xs clMain">
                         <div class="flex-container clMain">