From e029f6165ebe1dcd4f95bd57489a46bad7263e98 Mon Sep 17 00:00:00 2001 From: Paolo Arena Date: Tue, 29 Jan 2019 03:12:18 +0100 Subject: [PATCH] - added Categories to the Task List. - Drawer added SubMenu : Personal / Work Todo list categories. --- src/assets/sun.svg | 1276 ----------------- src/classes/debounce.ts | 42 + .../todos/SingleTodo/SingleTodo.scss | 27 +- src/components/todos/SingleTodo/SingleTodo.ts | 11 +- src/components/todos/todo/todo.scss | 9 + src/components/todos/todo/todo.ts | 15 + src/components/todos/todo/todo.vue | 2 + src/layouts/drawer/drawer.vue | 14 +- src/layouts/drawer/menuOne.vue | 30 +- src/model/Todos.ts | 1 + src/plugins/vue-idb.js | 2 +- src/router/route-config.ts | 2 +- src/store/Modules/rescodes.ts | 2 + 13 files changed, 132 insertions(+), 1301 deletions(-) delete mode 100644 src/assets/sun.svg create mode 100644 src/classes/debounce.ts diff --git a/src/assets/sun.svg b/src/assets/sun.svg deleted file mode 100644 index 974abdb..0000000 --- a/src/assets/sun.svg +++ /dev/null @@ -1,1276 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - FreePlanet - FreePlanet - - - - - - - - diff --git a/src/classes/debounce.ts b/src/classes/debounce.ts new file mode 100644 index 0000000..54680aa --- /dev/null +++ b/src/classes/debounce.ts @@ -0,0 +1,42 @@ + +/** + * A function that emits a side effect and does not return anything. + */ +export type Procedure = (...args: any[]) => void + +export type Options = { + isImmediate: boolean +} + +export function debounce( + func: F, + waitMilliseconds: number = 50, + options: Options = { + isImmediate: false + } +): F { + let timeoutId: NodeJS.Timeout | undefined + + return function(this: any, ...args: any[]) { + const context = this + + const doLater = function() { + timeoutId = undefined + if (!options.isImmediate) { + func.apply(context, args) + } + } + + const shouldCallNow = options.isImmediate && timeoutId === undefined + + if (timeoutId !== undefined) { + clearTimeout(timeoutId) + } + + timeoutId = setTimeout(doLater, waitMilliseconds) + + if (shouldCallNow) { + func.apply(context, args) + } + } as any +} diff --git a/src/components/todos/SingleTodo/SingleTodo.scss b/src/components/todos/SingleTodo/SingleTodo.scss index 9436309..b61583a 100644 --- a/src/components/todos/SingleTodo/SingleTodo.scss +++ b/src/components/todos/SingleTodo/SingleTodo.scss @@ -1,4 +1,8 @@ + +$colcompleted: #a2a2a2; +$heightitem: 19px; + .flex-item{ // background-color: #d5e2eb; padding: 0px; @@ -10,7 +14,7 @@ .flex-container2 { - flex-flow: row nowrap; + flex-flow: row wrap; justify-content: space-between; margin: 2px 5px 2px 5px; // top right bottom left } @@ -46,8 +50,8 @@ margin-right: 1px; padding-left: 1px; padding-right: 1px; - height: 36px; - line-height: 36px; + height: $heightitem; + line-height: $heightitem; text-align: center; // background-color: #ff4081; font-size: 0.75rem; @@ -67,8 +71,8 @@ max-width: 92px; min-width: 92px; margin: 0 auto; - height: 36px; - line-height: 36px; + height: $heightitem; + line-height: $heightitem; text-align: center; // background-color: #ff4081; font-size: 1rem; @@ -135,8 +139,8 @@ .percProgress { - height: 24px; - line-height: 24px; + height: $heightitem; + line-height: $heightitem; color: #888; } @@ -157,6 +161,10 @@ color: green; } +.percompleted { + color: $colcompleted +} + .myexpired { padding-top: 0px; padding-bottom: 0px; @@ -164,10 +172,11 @@ } .data-item { - //max-width: 100px; + max-width: 100px; //min-width: 100px; //display: flex; //visibility: initial; + margin-right: 3px; color: #ccc; order: 1; flex: 1; @@ -264,7 +273,7 @@ } .status_completed { - color:rgba(49, 68, 240, 0.7); + color: $colcompleted } .menuTitlePriority { diff --git a/src/components/todos/SingleTodo/SingleTodo.ts b/src/components/todos/SingleTodo/SingleTodo.ts index 3a372e5..3378892 100644 --- a/src/components/todos/SingleTodo/SingleTodo.ts +++ b/src/components/todos/SingleTodo/SingleTodo.ts @@ -8,6 +8,8 @@ import { ITodo } from '../../../model/index' import $ from 'jquery' +import { debounce } from '../../../classes/debounce' + @Component({ name: 'SingleTodo' }) @@ -22,7 +24,7 @@ export default class SingleTodo extends Vue { public classExpiringEx: string = '' public iconPriority: string = '' public popover: boolean = false - public popover_menu: boolean = false + public popover_menu: boolean = false // Serve public classRow: string = '' public sel: boolean = false public inEdit: boolean = false @@ -102,6 +104,9 @@ export default class SingleTodo extends Vue { mycolcl = ' highperc' } + if (this.itemtodo.completed) + mycolcl = ' percompleted' + this.colProgress = mycolcl this.menuProgress += mycolcl @@ -124,7 +129,7 @@ export default class SingleTodo extends Vue { this.menuPopupTodo = rescodes.menuPopupTodo[UserStore.state.lang] else { this.menuPopupTodo = [] - this.menuPopupTodo.push(rescodes.menuPopupTodo[UserStore.state.lang][0]) + this.menuPopupTodo.push(rescodes.menuPopupTodo[UserStore.state.lang][rescodes.INDEX_MENU_DELETE]) } } @@ -304,6 +309,8 @@ export default class SingleTodo extends Vue { this.enableExpiring() } else if (action === rescodes.MenuAction.COMPLETED) { this.setCompleted() + } else if (action === rescodes.MenuAction.PROGRESS_BAR) { + this.updatedata() } } diff --git a/src/components/todos/todo/todo.scss b/src/components/todos/todo/todo.scss index 169f796..453338f 100644 --- a/src/components/todos/todo/todo.scss +++ b/src/components/todos/todo/todo.scss @@ -59,3 +59,12 @@ min-height: 10px; } +.categorytitle{ + font-size: 1.25rem; + font-weight: bold; +} + +.titleSubMenu { + font-size: 0.7rem; + font-weight: 350; +} diff --git a/src/components/todos/todo/todo.ts b/src/components/todos/todo/todo.ts index 01425cc..e05703d 100644 --- a/src/components/todos/todo/todo.ts +++ b/src/components/todos/todo/todo.ts @@ -15,6 +15,7 @@ import draggable from 'vuedraggable' import $ from 'jquery' @Component({ + components: { SingleTodo, draggable } }) export default class Todo extends Vue { @@ -41,6 +42,15 @@ export default class Todo extends Vue { console.log('drag = ' + this.drag) } + @Watch('$route.params.category') changecat() { + console.log('changecat') + this.load() + } + + getCategory() { + return this.$route.params.category + } + change(param) { console.log('Change... ' + param) } @@ -257,6 +267,7 @@ export default class Todo extends Vue { priority: rescodes.Todos.PRIORITY_NORMAL, completed: false, created_at: new Date(), + category: '', modify_at: new Date(), expiring_at: mydateexp, enableExpiring: false, @@ -286,6 +297,7 @@ export default class Todo extends Vue { const objtodo = this.initcat() objtodo.descr = this.todo + objtodo.category = this.getCategory() const lastelem = this.getLastList() objtodo.id_prev = (lastelem !== null) ? lastelem.id : rescodes.LIST_START objtodo.id_next = rescodes.LIST_END @@ -432,6 +444,7 @@ export default class Todo extends Vue { // #Todo If need to filter the output database ... await this.$db.todos .where('userId').equals(UserStore.state.userId) + .and(todo => todo.category === this.getCategory()) .toArray() .then((response) => { Promise.all(response.map(key => key)) @@ -442,6 +455,7 @@ export default class Todo extends Vue { } else { await this.$db.todos .where('userId').equals(UserStore.state.userId) + .and(todo => todo.category === this.getCategory()) .toArray().then(ristodos => { arrtemp = ristodos }) @@ -541,6 +555,7 @@ export default class Todo extends Vue { this.modifyField(miorec, myobj, 'descr') this.modifyField(miorec, myobj, 'completed') + this.modifyField(miorec, myobj, 'category') this.modifyField(miorec, myobj, 'expiring_at') this.modifyField(miorec, myobj, 'priority') this.modifyField(miorec, myobj, 'id_prev') diff --git a/src/components/todos/todo/todo.vue b/src/components/todos/todo/todo.vue index e237d73..090d1c2 100644 --- a/src/components/todos/todo/todo.vue +++ b/src/components/todos/todo/todo.vue @@ -3,6 +3,8 @@

+
{{ getCategory() }}
+
{{ prior = 0, priorcomplet = false }}
diff --git a/src/layouts/drawer/drawer.vue b/src/layouts/drawer/drawer.vue index de1627c..d3b9f75 100644 --- a/src/layouts/drawer/drawer.vue +++ b/src/layouts/drawer/drawer.vue @@ -53,19 +53,27 @@ console.log('Drawer created...') } + Glo + photo = '' user = null links = { Dashboard: { routes: [ { route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'pages.home' }, - { route: '/todo', faIcon: 'fa fa-list-alt', materialIcon: 'todo', name: 'pages.Todo' }, + { + route: '/todo', faIcon: 'fa fa-list-alt', materialIcon: 'todo', name: 'pages.Todo', + routes2: [ + { route: '/todo/personal', faIcon: 'fa fa-list-alt', materialIcon: 'todo', name: 'Personal' }, + { route: '/todo/work', faIcon: 'fa fa-list-alt', materialIcon: 'todo', name: 'Work' } + ] + }, { route: '/category', faIcon: 'fa fa-list-alt', materialIcon: 'category', name: 'pages.Category' }, { route: '/signup', faIcon: 'fa fa-registered', materialIcon: 'home', name: 'pages.SignUp' }, { route: '/signin', faIcon: 'fa fa-anchor', materialIcon: 'home', name: 'pages.SignIn' }, /* {route: '/vreg?idlink=aaa', faIcon: 'fa fa-login', materialIcon: 'login', name: 'pages.vreg'},*/ ], - show: true + show: true, }, Forms: { routes: [ @@ -140,7 +148,7 @@ margin-top: 5%; } - .fixed-left:hover{ + .fixed-left:hover { cursor: ew-resize; } diff --git a/src/layouts/drawer/menuOne.vue b/src/layouts/drawer/menuOne.vue index 90a266d..bac1038 100644 --- a/src/layouts/drawer/menuOne.vue +++ b/src/layouts/drawer/menuOne.vue @@ -1,15 +1,26 @@ @@ -67,7 +79,7 @@ padding: 5px 8px; } - .menu-hr{ + .menu-hr { border-color: #dedede; height: 0.5px; } diff --git a/src/model/Todos.ts b/src/model/Todos.ts index 97bcffc..825e74d 100644 --- a/src/model/Todos.ts +++ b/src/model/Todos.ts @@ -1,6 +1,7 @@ export interface ITodo { id?: number, userId: string + category?: string descr?: string, priority: number, completed: boolean, diff --git a/src/plugins/vue-idb.js b/src/plugins/vue-idb.js index 9398b23..af71717 100644 --- a/src/plugins/vue-idb.js +++ b/src/plugins/vue-idb.js @@ -9,7 +9,7 @@ export default ({ Vue }) => { database: 'test', schemas: [ { categories: '++id, sub_categ_id, descr_it, campo2bool, campo3bool' }, - { todos: '++id, userId, pos, descr, priority, completed, created_at, modify_at, expiring_at, progress, enableExpiring' } + { todos: '++id, userId, category, pos, descr, priority, completed, created_at, modify_at, expiring_at, progress, enableExpiring' } ], options: { todos: { type: 'list', primary: 'pos', label: 'label', updated_at: 'updated_at' }, diff --git a/src/router/route-config.ts b/src/router/route-config.ts index 97f54c8..9b80a94 100644 --- a/src/router/route-config.ts +++ b/src/router/route-config.ts @@ -25,7 +25,7 @@ export const RouteConfig: VueRouteConfig[] = [ meta: { name: 'Verify Reg' } }, { - path: '/todo', + path: '/todo/:category', component: () => import('@/components/todos/todo/todo.vue'), meta: { name: 'Todos' } }, diff --git a/src/store/Modules/rescodes.ts b/src/store/Modules/rescodes.ts index 71ee941..6ceaf6d 100644 --- a/src/store/Modules/rescodes.ts +++ b/src/store/Modules/rescodes.ts @@ -74,6 +74,8 @@ export const rescodes = { }, + INDEX_MENU_DELETE: 3, + menuPopupTodo: { 'it': [ {