surya/freeplanet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- if last character is ':' then is like a Title.

Browse Source
This commit is contained in:
Paolo Arena
2019-01-28 03:13:04 +01:00
parent 0733e92acd
commit e46e93de61
9 changed files with 249 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
quasar.conf.js
View File

@@ -153,7 +153,7 @@ module.exports = function (ctx) {
],
directives: [
'Ripple',
'CloseOverlay'
'CloseOverlay',
],
// Quasar plugins
plugins: [

63
src/components/todos/SingleTodo/SingleTodo.scss
View File

@@ -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;
}
}

157
src/components/todos/SingleTodo/SingleTodo.ts
View File

@@ -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 = <HTMLInputElement>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) {

40
src/components/todos/SingleTodo/SingleTodo.vue
View File

@@ -1,5 +1,5 @@
<template>
<div :class="getClassRow()" @mousedown="clickRiga" @mouseup.left="mouseUp">
<div :class="getClassRow()" @mouseup.left="mouseUp" @mousedown="clickRiga">
<q-context-menu>
<q-list link separator no-border class="todo-menu">
<q-item v-for="field in menuPopupTodo" :key="field.value"
@@ -9,10 +9,14 @@
<q-item-main>
<q-item-tile label>{{field.label}}</q-item-tile>
</q-item-main>
<q-item-side v-if="field.value === 101">
<q-checkbox v-model="itemtodo.enableExpiring"/>
</q-item-side>
</q-item>
</q-list>
</q-context-menu>
<div class="flex-item pos-item">
<div v-if="isTodo()" class="flex-item pos-item" >
<q-btn flat
class="pos-item-popover"
icon="menu">
@@ -28,13 +32,16 @@
<q-item-main>
<q-item-tile label>{{field.label}}</q-item-tile>
</q-item-main>
<q-item-side v-if="field.value === 101">
<q-checkbox v-model="itemtodo.enableExpiring"/>
</q-item-side>
</q-item>
</q-list>
</q-popover>
</q-btn>
</div>
<!--<div class="flex-item pos-item">[{{ itemtodo.pos }}]</div>-->
<div class="flex-item priority-item">
<div v-if="isTodo()" class="flex-item priority-item">
<q-btn push flat
class="priority-item-popover"
:icon="iconPriority">
@@ -44,6 +51,8 @@
>
<q-list link>
<q-item-tile label inverted class="menuTitlePriority">{{$t('todo.titleprioritymenu')}}
</q-item-tile>
<q-item v-for="field in selectPriority" :key="field.value"
@click.native="setPriority(field.value), popover = false">
<q-item-side :icon="field.icon" inverted color="primary"/>
@@ -55,7 +64,7 @@
</q-popover>
</q-btn>
</div>
<div class="flex-item completed-item">
<div v-if="isTodo()" class="flex-item completed-item">
<q-btn push flat
:class="classCompleted"
:icon="iconCompleted"
@@ -64,18 +73,27 @@
<!--<q-icon class=" mycols allleft icon_completed ScheduleStatus" :name="iconCompleted"
@click.native="setCompleted"/>-->
</div>
<div :class="classDescr">
<q-input autofocus ref="inputdescr" :value="descrtoEdit" @change="val => descrtoEdit = val"
:class="classDescrEdit"
v-on:keyup.enter="updateTodo" v-on:keydown.esc="exitEdit"/>
<div :class="classDescr" @click="editTodo()">
{{ itemtodo.descr }}
</div>
<div :class="classExpiring">
<q-datetime
:class="classExpiringEx"
v-model="itemtodo.expiring_at"
class="myexpired"/>
<div v-if="itemtodo.enableExpiring">
<div :class="classExpiring">
<q-datetime
:class="classExpiringEx"
v-model="itemtodo.expiring_at"
class="myexpired"/>
</div>
</div>
<!--<div class="flex-item btn-item">-->
<!--{{classPosItemPopup}}-->
<!--{{classPosItemPopup}}-->
<!--</div>-->
<!--<div class="flex-item btn-item">-->
<!--<q-btn class="mybtn" round color="" icon="delete" @click.native="removeitem(itemtodo.id)"></q-btn>-->

35
src/components/todos/todo/todo.ts
View File

@@ -141,7 +141,7 @@ export default class Todo extends Vue {
if ((elem1 !== null) && (elem2 !== null)) {
if (elem1.completed === elem2.completed) {
return true
return elem1.completed
} else {
return elem1.completed
}
@@ -179,7 +179,7 @@ export default class Todo extends Vue {
let completed = this.getCompleted(indini, indfine)
let changecompleted = false
if (completed) {
if (completed != null) {
myobj.modified = (myobj.completed !== completed) ? true : myobj.modified
myobj.completed = completed
changecompleted = true
@@ -259,6 +259,7 @@ export default class Todo extends Vue {
created_at: new Date(),
modify_at: new Date(),
expiring_at: mydateexp,
enableExpiring: false,
id_prev: 0,
id_next: 0,
pos: 0,
@@ -278,6 +279,8 @@ export default class Todo extends Vue {
}
async insertTodo() {
if (this.todo.trim() === '')
return
const objtodo = this.initcat()
@@ -490,24 +493,20 @@ export default class Todo extends Vue {
// }
//
clickRiga(item) {
console.log('ClickRiga : ', item)
deselectAllRows(item, check) {
console.log('deselectAllRows : ', item)
for (let i = 0; i < this.$refs.single.length; i++) {
// @ts-ignore
this.$refs.single[i].classRow = ''
}
// // Disattiva quella precedente
// if (this.selrowid > 0) {
// $('#' + this.getrefbyid(this.selrowid) + ' div').removeClass('rowselected')
// }
//
if (this.selrowid !== item.id) {
this.selrowid = item.id
} else {
// was already selected, so deselected
this.selrowid = -1
let contr = <SingleTodo>this.$refs.single[i]
// @ts-ignore
let id = contr.itemtodo.id
// Don't deselect the actual clicked!
if ((check && (item.id !== id)) || (!check)) {
// @ts-ignore
contr.deselectAndExitEdit()
}
}
}
@@ -533,12 +532,14 @@ export default class Todo extends Vue {
await this.$db.transaction('rw', [this.$db.todos], async () => {
const miorec = await this.$db.todos.get(myobj.id)
this.modifyField(miorec, myobj, 'descr')
this.modifyField(miorec, myobj, 'completed')
this.modifyField(miorec, myobj, 'expiring_at')
this.modifyField(miorec, myobj, 'priority')
this.modifyField(miorec, myobj, 'id_prev')
this.modifyField(miorec, myobj, 'id_next')
this.modifyField(miorec, myobj, 'pos')
this.modifyField(miorec, myobj, 'enableExpiring')
if (miorec.modified) {
miorec.modify_at = new Date()

4
src/components/todos/todo/todo.vue
View File

@@ -3,7 +3,7 @@
<div class="panel">
<p class="caption"></p>
<q-input v-model="todo" inverted float-label="Inserisci il Todo"
<q-input v-model="todo" inverted :float-label="$t('todo.insert')"
:after="[{icon: 'arrow_forward', content: true, handler () {}}]"
v-on:keyup.enter="insertTodo"/>
@@ -24,7 +24,7 @@
<div style="display: none">{{ priorcomplet = true }}</div>
</div>
<SingleTodo ref="single" @deleteitem="deleteitem" @eventupdate="updateitem"
@click="clickRiga"
@deselectAllRows="deselectAllRows"
:itemtodo='mytodo' />
<div style="display: none">{{ prior = mytodo.priority, priorcomplet = mytodo.completed }}</div>

6
src/i18n.js
View File

@@ -85,6 +85,9 @@ const messages = {
}
},
todo: {
titleprioritymenu: 'Priorità:',
insert: 'Inserisci il Task',
edit: 'Descrizione Task:',
completed: 'Completati'
}
},
@@ -174,6 +177,9 @@ const messages = {
}
},
todo: {
titleprioritymenu: 'Priority:',
insert: 'Insert Task',
edit: 'Task Description:',
completed: 'Completed'
}
},

1
src/model/Todos.ts
View File

@@ -7,6 +7,7 @@ export interface ITodo {
created_at: any,
modify_at: any,
expiring_at: any,
enableExpiring?: boolean,
id_prev?: number,
id_next?: number,
modified?: boolean,

11
src/store/Modules/rescodes.ts
View File

@@ -25,7 +25,8 @@ export const rescodes = {
},
MenuAction: {
DELETE: 100
DELETE: 100,
TOGGLE_EXPIRING: 101
},
@@ -81,8 +82,8 @@ export const rescodes = {
},
{
id: 2,
label: 'Attiva...',
value: 101, // ATTIVA
label: 'Imposta Scadenza',
value: 101, // TOGGLE_EXPIRING
icon: 'expand_more'
}
],
@@ -95,8 +96,8 @@ export const rescodes = {
},
{
id: 2,
label: 'Attiva...',
value: 101, // ATTIVA
label: 'Set Expiring',
value: 101, // TOGGLE_EXPIRING
icon: 'sun'
}
]