From e46e93de61fb99af5925b3c7031c899530ed4d32 Mon Sep 17 00:00:00 2001 From: Paolo Arena Date: Mon, 28 Jan 2019 03:13:04 +0100 Subject: [PATCH] - if last character is ':' then is like a Title. --- quasar.conf.js | 2 +- .../todos/SingleTodo/SingleTodo.scss | 63 ++++++- src/components/todos/SingleTodo/SingleTodo.ts | 157 ++++++++++++++---- .../todos/SingleTodo/SingleTodo.vue | 40 +++-- src/components/todos/todo/todo.ts | 35 ++-- src/components/todos/todo/todo.vue | 4 +- src/i18n.js | 6 + src/model/Todos.ts | 1 + src/store/Modules/rescodes.ts | 11 +- 9 files changed, 249 insertions(+), 70 deletions(-) diff --git a/quasar.conf.js b/quasar.conf.js index b284689..6a50d08 100644 --- a/quasar.conf.js +++ b/quasar.conf.js @@ -153,7 +153,7 @@ module.exports = function (ctx) { ], directives: [ 'Ripple', - 'CloseOverlay' + 'CloseOverlay', ], // Quasar plugins plugins: [ diff --git a/src/components/todos/SingleTodo/SingleTodo.scss b/src/components/todos/SingleTodo/SingleTodo.scss index 8b89709..08eabf4 100644 --- a/src/components/todos/SingleTodo/SingleTodo.scss +++ b/src/components/todos/SingleTodo/SingleTodo.scss @@ -26,7 +26,7 @@ } .rowselected { - border-width: 1px 0px 1px 0px; + border-width: 2px 0px 2px 0px; border-style: solid; border-color: rgba(49, 68, 240, 0.6); //background-color: rgba(166, 153, 240, 0.7) !important; @@ -53,6 +53,18 @@ } +.titleLista-item { + max-width: 92px; + min-width: 92px; + margin: 0 auto; + height: 36px; + line-height: 36px; + text-align: center; + // background-color: #ff4081; + font-size: 1rem; + font-weight: bold; +} + .pos-item-popover{ max-width: 24px; @@ -98,8 +110,10 @@ min-width: 24px; } - - +.completed-item { + max-width: 24px; + min-width: 24px; +} .myexpired { padding-top: 0px; @@ -112,8 +126,15 @@ min-width: 100px; display: block; visibility: initial; + color: #ccc; } + +.data-item .q-input-target{ + color:red !important; +} + + /* @media screen and (max-width: 600px) { .data-item { @@ -124,13 +145,28 @@ } */ -.div_descr { - // background-color: green; +.div_descr, .div_descr_edit { margin: 2px; padding: 2px; + min-width: 100px; flex: 2 1 auto; + vertical-align: middle; + text-align: left; + + height: 24px; + line-height: 24px; /* same as height! */ + + &.hide { + display: none !important; + visibility: hidden; + } + &.show { + visibility: visible; + } } + + .div_descr:hover { border-width: 1px 0px 1px 0px; border-color: rgba(125, 255, 125, 0.5); @@ -183,6 +219,21 @@ } .status_completed { - color:rgba(49, 68, 240, 0.7);; + color:rgba(49, 68, 240, 0.7); } +.menuTitlePriority { + background-color: blue; + color:white; + padding: 2px; + margin: 2px; + font-weight: bold; +} + +.test{ + color: fuchsia; + &.mio1{ + + background-color: red; + } +} diff --git a/src/components/todos/SingleTodo/SingleTodo.ts b/src/components/todos/SingleTodo/SingleTodo.ts index 07e5584..44fd0d1 100644 --- a/src/components/todos/SingleTodo/SingleTodo.ts +++ b/src/components/todos/SingleTodo/SingleTodo.ts @@ -6,15 +6,18 @@ import { UserStore } from '@modules' import { ITodo } from '../../../model/index' +import $ from 'jquery' + @Component({ name: 'SingleTodo' }) export default class SingleTodo extends Vue { public selectPriority: [] = [] - public menuPopupTodo: [] = [] + public menuPopupTodo: any[] = [] public iconCompleted: string = '' public classCompleted: string = '' public classDescr: string = '' + public classDescrEdit:string = '' public classExpiring: string = '' public classExpiringEx: string = '' public iconPriority: string = '' @@ -22,23 +25,42 @@ 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' + public inEdit: boolean = false + public descrtoEdit: string = '' $q: any @Prop({ required: true }) itemtodo: ITodo @Watch('itemtodo.completed') valueChanged() { - this.$emit('eventupdate', this.itemtodo) - this.updateicon() + this.watchupdate() + } + + @Watch('itemtodo.enableExpiring') valueChanged4() { + this.watchupdate() } @Watch('itemtodo.expiring_at') valueChanged2() { - this.$emit('eventupdate', this.itemtodo) + this.watchupdate() } @Watch('itemtodo.priority') valueChanged3() { + this.watchupdate() + } + + @Watch('itemtodo.descr') valueChanged5() { + this.descrtoEdit = this.itemtodo.descr + } + + isTodo () { + return this.isTodoByElem(this.itemtodo) + } + + isTodoByElem (elem) { + return elem.descr.slice(-1) !== ':' + } + + watchupdate() { this.$emit('eventupdate', this.itemtodo) this.updateicon() } @@ -46,8 +68,11 @@ export default class SingleTodo extends Vue { updateClasses() { // this.classCompleted = 'completed-item' this.classCompleted = 'completed-item-popover' - this.classDescr = 'flex-item div_descr' + this.classDescrEdit = 'flex-item div_descr_edit' + if (!this.isTodo()) + this.classDescr += ' titleLista-item' + this.classExpiring = 'flex-item data-item' this.classExpiringEx = '' if (this.itemtodo.completed) { @@ -57,6 +82,26 @@ export default class SingleTodo extends Vue { this.classExpiringEx += ' status_completed' } + if (this.inEdit) { + this.classDescr += ' hide' + this.classDescrEdit += ' show' + } else { + this.classDescrEdit += ' hide' + this.classDescr += ' show' + } + + // this.getinputdescr = 'inputdescr' + this.itemtodo.id + + console.log('classDescrEdit = ', this.classDescrEdit) + console.log('classDescr', this.classDescr) + + if (this.isTodo()) + this.menuPopupTodo = rescodes.menuPopupTodo[UserStore.state.lang] + else { + this.menuPopupTodo = [] + this.menuPopupTodo.push(rescodes.menuPopupTodo[UserStore.state.lang][0]) + } + } created() { @@ -65,45 +110,91 @@ export default class SingleTodo extends Vue { this.updateClasses() this.selectPriority = rescodes.selectPriority[UserStore.state.lang] - this.menuPopupTodo = rescodes.menuPopupTodo[UserStore.state.lang] } - setclassPosItemPopup() { - - if (this.isover) - this.classPosItemPopup = 'pos-item-popover' - else - this.classPosItemPopup = 'pos-item-popover' - } - getClassRow() { return 'row flex-container2 ' + this.classRow } clickRiga () { - this.sel = false - if (this.classRow !== 'rowselected') { - this.sel = true - } else { - this.sel = false + console.log('CLICK RIGA ************') + if (!this.inEdit) { + this.$emit('deselectAllRows', this.itemtodo, true) + + if (!this.sel) { + this.selectRiga() + } else { + this.deselectRiga() + } } - this.$emit('click', this.itemtodo) + } + selectRiga() { + console.log('selectRiga', this.itemtodo.descr) + this.sel = true this.classRow = 'rowselected' + this.updateClasses() + console.log('FINE selectRiga', this.itemtodo.descr) + } + deselectRiga() { + console.log('DeselectRiga', this.itemtodo.descr) + this.sel = false + this.classRow = '' + this.inEdit = false this.updateClasses() } + deselectAndExitEdit () { + this.deselectRiga() + this.exitEdit() + } + mouseUp() { - - if (this.sel) { - this.classRow = 'rowselected' - } else { - this.classRow = '' + if (!this.inEdit) { + if (this.sel) { + this.selectRiga() + } else { + this.deselectRiga() + } } + } + editTodo () { + console.log('INIZIO - editTodo') + this.$emit('click') + this.inEdit = true + if (!this.sel) + this.selectRiga() + else + this.updateClasses() + + this.descrtoEdit = this.itemtodo.descr + + let theField = this.$refs.inputdescr + theField.focus() + console.log('focus()') + + console.log('FINE - editTodo') + } + + exitEdit () { + if (this.inEdit) { + console.log('exitEdit') + this.inEdit = false + this.updateClasses + this.$emit('deselectAllRows', this.itemtodo, false) + } + } + + + updateTodo () { + this.watchupdate() + this.itemtodo.descr = this.descrtoEdit + this.inEdit = false + this.updateClasses() } setCompleted() { @@ -135,6 +226,7 @@ export default class SingleTodo extends Vue { else if (this.itemtodo.priority === rescodes.Todos.PRIORITY_LOW) this.iconPriority = 'expand_more' // expand_more + this.updateClasses() } @@ -142,10 +234,19 @@ export default class SingleTodo extends Vue { this.$emit('deleteitem', id) } + enableExpiring() { + this.itemtodo.enableExpiring = !this.itemtodo.enableExpiring + + } + clickMenu(action) { console.log('click menu: ', action) - if (action === rescodes.MenuAction.DELETE) + if (action === rescodes.MenuAction.DELETE) { this.removeitem(this.itemtodo.id) + } else if (action === rescodes.MenuAction.TOGGLE_EXPIRING) { + this.enableExpiring() + } + } setPriority(newpriority) { diff --git a/src/components/todos/SingleTodo/SingleTodo.vue b/src/components/todos/SingleTodo/SingleTodo.vue index 4b71947..27b74d8 100644 --- a/src/components/todos/SingleTodo/SingleTodo.vue +++ b/src/components/todos/SingleTodo/SingleTodo.vue @@ -1,5 +1,5 @@