- (Part 2 - Upgrade Components Quasar)
This commit is contained in:
Paolo Arena
@@ -25,7 +25,7 @@ $heightdescr: 20px;
|
||||
.flex-container2 {
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
margin: 0px 5px 0px 5px; // top right bottom left
|
||||
margin: 0px 1px 0px 1px; // top right bottom left
|
||||
}
|
||||
|
||||
// Set visibility: visible to the icon menu of pos-item-popover
|
||||
@@ -71,7 +71,7 @@ $heightdescr: 20px;
|
||||
|
||||
.pos-item {
|
||||
max-width: 24px;
|
||||
min-width: 24px;
|
||||
min-width: 26px;
|
||||
margin-left: 1px;
|
||||
margin-right: 1px;
|
||||
padding-left: 1px;
|
||||
@@ -218,16 +218,20 @@ $heightdescr: 20px;
|
||||
}
|
||||
|
||||
.data-item {
|
||||
max-width: 84px;
|
||||
max-width: 78px;
|
||||
//min-width: 100px;
|
||||
//display: flex;
|
||||
//visibility: initial;
|
||||
margin-right: 3px;
|
||||
color: #ccc;
|
||||
color: #585858;
|
||||
order: 1;
|
||||
flex: 1;
|
||||
height: $heightBtn;
|
||||
line-height: $heightBtn;
|
||||
height: $heightitem;
|
||||
line-height: $heightitem;
|
||||
padding-left: 2px;
|
||||
padding-right: 0px;
|
||||
//height: $heightBtn;
|
||||
//line-height: $heightBtn;
|
||||
}
|
||||
|
||||
|
||||
@@ -263,7 +267,6 @@ $heightdescr: 20px;
|
||||
|
||||
vertical-align: middle;
|
||||
line-height: 120%;
|
||||
max-height: 40px;
|
||||
|
||||
//background-color: #d50000;
|
||||
|
||||
@@ -279,14 +282,17 @@ $heightdescr: 20px;
|
||||
}
|
||||
|
||||
.div_descr {
|
||||
display: table-cell;
|
||||
display: -webkit-box;
|
||||
max-height: 45px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.div_descr_edit {
|
||||
//display: block;
|
||||
max-height: 90px;
|
||||
//line-height: 120%;
|
||||
//max-height: 90px;
|
||||
line-height: $heightitem;
|
||||
}
|
||||
|
||||
|
||||
@@ -22,7 +22,7 @@ export default class SingleTodo extends Vue {
|
||||
public classCompleted: string = ''
|
||||
public classDescr: string = ''
|
||||
public classDescrEdit: string = ''
|
||||
public classExpiring: string = ''
|
||||
public classExpiring: string = 'flex-item data-item shadow-1'
|
||||
public classExpiringEx: string = ''
|
||||
public iconPriority: string = ''
|
||||
public popover: boolean = false
|
||||
@@ -65,7 +65,10 @@ export default class SingleTodo extends Vue {
|
||||
}
|
||||
|
||||
@Watch('itemtodo.progress') public valueChanged6() {
|
||||
console.log('itemtodo.progress')
|
||||
this.updateClasses()
|
||||
|
||||
console.log('this.percentageProgress', this.percentageProgress, 'this.itemtodo.progress', this.itemtodo.progress)
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -103,6 +106,9 @@ export default class SingleTodo extends Vue {
|
||||
this.classDescrEdit += ' titleLista-item'
|
||||
}
|
||||
|
||||
if (this.itemtodo.progress > 100)
|
||||
this.itemtodo.progress = 100
|
||||
|
||||
this.classExpiring = 'flex-item data-item shadow-1'
|
||||
this.classExpiringEx = ''
|
||||
if (this.itemtodo.completed) {
|
||||
@@ -362,6 +368,14 @@ export default class SingleTodo extends Vue {
|
||||
this.updateClasses()
|
||||
}
|
||||
|
||||
public aggiornaProgress(value, initialval){
|
||||
if (value !== initialval) {
|
||||
this.itemtodo.progress = value
|
||||
this.updatedata('progress')
|
||||
this.deselectAndExitEdit()
|
||||
}
|
||||
}
|
||||
|
||||
public setCompleted() {
|
||||
// console.log('setCompleted')
|
||||
this.itemtodo.completed = !this.itemtodo.completed
|
||||
|
||||
@@ -18,6 +18,8 @@
|
||||
<div class="flex-item donotdrag divdescrTot">
|
||||
<q-input v-if="sel && !itemtodo.completed" hide-underline type="textarea" ref="inputdescr"
|
||||
v-model.trim="precDescr"
|
||||
autogrow
|
||||
dense
|
||||
:class="classDescrEdit" :max-height="100"
|
||||
@keydown="keyDownArea" v-on:keydown.esc="exitEdit" @blur="exitEdit(true)" @click="editTodo()"/>
|
||||
|
||||
@@ -37,7 +39,7 @@
|
||||
<!--<q-field>{{ itemtodo.descr }}</q-field>-->
|
||||
<!--</div>-->
|
||||
|
||||
<div v-if="isTodo() && (percentageProgress > 0) " class="flex-item progress-item shadow-1">
|
||||
<div v-if="isTodo() && (itemtodo.progress > 0) " class="flex-item progress-item shadow-1">
|
||||
<q-linear-progress
|
||||
stripe
|
||||
:percentage="percentageProgress"
|
||||
@@ -47,8 +49,11 @@
|
||||
</q-linear-progress>
|
||||
<div :class="percProgress">
|
||||
{{percentageProgress}}%
|
||||
<q-popup-edit v-model="itemtodo.progress" title="Progress" buttons class="editProgress">
|
||||
<q-input type="number" v-model="itemtodo.progress" :max="100" :min="0"/>
|
||||
<q-popup-edit v-model="percentageProgress" title="Progress" buttons class="editProgress"
|
||||
@change="val => { model = val }"
|
||||
@save="aggiornaProgress"
|
||||
>
|
||||
<q-input dense autofocus type="number" v-model="percentageProgress" :max="100" :min="0"/>
|
||||
</q-popup-edit>
|
||||
|
||||
</div>
|
||||
@@ -57,16 +62,24 @@
|
||||
|
||||
<div v-if="itemtodo.enableExpiring" :class="classExpiring">
|
||||
{{getstrDate(itemtodo.expiring_at)}}
|
||||
<q-popup-edit v-model="itemtodo.expiring_at" title="Edit" buttons class="">
|
||||
<q-input
|
||||
filled
|
||||
v-model="itemtodo.expiring_at"
|
||||
type="date"
|
||||
class="myexpired"
|
||||
format="DD/MM/YY"
|
||||
@change="val => { model = val }">
|
||||
</q-input>
|
||||
</q-popup-edit>
|
||||
<q-icon name="event" class="cursor-pointer">
|
||||
<q-popup-proxy>
|
||||
<q-date v-model="itemtodo.expiring_at" today-btn/>
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
<!--<q-icon name="event" class="cursor-pointer" />-->
|
||||
<!--<q-popup-edit v-model="itemtodo.expiring_at"-->
|
||||
<!--title="Edit"-->
|
||||
<!--buttons class="">-->
|
||||
<!--<q-input-->
|
||||
<!--filled-->
|
||||
<!--v-model="itemtodo.expiring_at"-->
|
||||
<!--type="date"-->
|
||||
<!--class="myexpired"-->
|
||||
<!--format="DD/MM/YYYY"-->
|
||||
<!-->-->
|
||||
<!--</q-input>-->
|
||||
<!--</q-popup-edit>-->
|
||||
</div>
|
||||
<div v-if="isTodo()" class="flex-item pos-item " @mousedown="clickRiga">
|
||||
<q-btn push
|
||||
|
||||
@@ -11,7 +11,8 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menuInputProgress > div:nth-child(2) > div > input {
|
||||
.menuInputProgress > div > div > div > input {
|
||||
min-width: 30px;
|
||||
max-width: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import Vue from 'vue'
|
||||
import { Component, Prop } from 'vue-property-decorator'
|
||||
|
||||
import { ITodo } from '../../../model/index'
|
||||
import { tools } from '@src/store/Modules/tools'
|
||||
import { UserStore } from '@store'
|
||||
import { ITodo } from '../../../model/index'
|
||||
|
||||
// Doesn't exist in quasar this ? error TS2305
|
||||
// import { format } from 'quasar'
|
||||
@@ -18,19 +18,19 @@ import { UserStore } from '@store'
|
||||
export default class SubMenus extends Vue {
|
||||
public selectPriority: [] = tools.selectPriority[UserStore.state.lang]
|
||||
|
||||
@Prop({ required: false }) menuPopupTodo: any[]
|
||||
@Prop({ required: false }) itemtodo: ITodo
|
||||
$q: any
|
||||
@Prop({ required: false }) public menuPopupTodo: any[]
|
||||
@Prop({ required: false }) public itemtodo: ITodo
|
||||
public $q: any
|
||||
|
||||
clickMenu (field) {
|
||||
public clickMenu(field) {
|
||||
this.$emit('clickMenu', field)
|
||||
}
|
||||
|
||||
setPriority (field) {
|
||||
public setPriority(field) {
|
||||
this.$emit('setPriority', field)
|
||||
}
|
||||
|
||||
KeychangeProgress (e) {
|
||||
public KeychangeProgress(e) {
|
||||
// between(50, 10, 20)
|
||||
|
||||
if (this.itemtodo.progress > 100) {
|
||||
@@ -46,7 +46,7 @@ export default class SubMenus extends Vue {
|
||||
}
|
||||
}
|
||||
|
||||
create () {
|
||||
public create() {
|
||||
this.selectPriority = tools.selectPriority[UserStore.state.lang]
|
||||
|
||||
console.log('CREAZIONE')
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<q-list link separator no-border class="todo-menu">
|
||||
<q-list separator no-border class="todo-menu">
|
||||
<div v-for="field in menuPopupTodo" :key="field.value">
|
||||
<q-item clickable v-ripple v-if="(field.value !== 130) && (field.value !== 100)" :icon="field.icon"
|
||||
@click.native="clickMenu(field.value)">
|
||||
@@ -8,56 +8,31 @@
|
||||
<q-icon :name="field.icon"/>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section v-if="field.value !== 120" label class="item-menu">{{field.label}}</q-item-section>
|
||||
<q-item-section v-if="field.value !== 120" label class="item-menu">
|
||||
<q-item-label>{{field.label}}</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side top v-if="field.value === 101">
|
||||
<q-checkbox v-model="itemtodo.enableExpiring"/>
|
||||
</q-item-section>
|
||||
<q-item-section v-if="field.value === 110">
|
||||
<q-item-section side v-if="field.value === 110">
|
||||
<q-checkbox v-model="itemtodo.completed"/>
|
||||
</q-item-section>
|
||||
|
||||
|
||||
<!--<q-item tag="label" v-ripple>-->
|
||||
<!--<q-item-section side top>-->
|
||||
<!--<q-checkbox v-model="check1" />-->
|
||||
<!--</q-item-section>-->
|
||||
|
||||
<!--<q-item-section>-->
|
||||
<!--<q-item-label>Notifications</q-item-label>-->
|
||||
<!--<q-item-label caption>-->
|
||||
<!--Notify me about updates to apps or games that I downloaded-->
|
||||
<!--</q-item-label>-->
|
||||
<!--</q-item-section>-->
|
||||
<!--</q-item>-->
|
||||
|
||||
<!--<q-item tag="label" v-ripple>-->
|
||||
<!--<q-item-section side top>-->
|
||||
<!--<q-checkbox v-model="check2" />-->
|
||||
<!--</q-item-section>-->
|
||||
|
||||
<!--<q-item-section>-->
|
||||
<!--<q-item-label>Sound</q-item-label>-->
|
||||
<!--<q-item-label caption>-->
|
||||
<!--Auto-update apps at anytime. Data charges may apply-->
|
||||
<!--</q-item-label>-->
|
||||
<!--</q-item-section>-->
|
||||
<!--</q-item>-->
|
||||
|
||||
<q-item-section v-if="field.value === 120">
|
||||
<q-slider :class="$parent.menuProgress" v-model="itemtodo.progress" :min="0" :max="100"
|
||||
:step="5"/>
|
||||
<q-slider label
|
||||
:class="$parent.menuProgress"
|
||||
v-model="itemtodo.progress"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="5" @change="val => { lazy = val }"
|
||||
/>
|
||||
|
||||
</q-item-section>
|
||||
<q-item-section v-if="field.value === 120">
|
||||
<q-item-section side v-if="field.value === 120">
|
||||
<div>
|
||||
<q-input v-model="itemtodo.progress"
|
||||
class="menuInputProgress"
|
||||
type="number"
|
||||
suffix="%"
|
||||
@change="val => { model = val }"
|
||||
@keydown="KeychangeProgress"
|
||||
/>
|
||||
<q-item-label style="color: blue">{{itemtodo.progress}} %</q-item-label>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
@@ -70,30 +45,38 @@
|
||||
{{field.label}}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-if="(field.value === 130)" :icon="field.icon"
|
||||
@click.native="clickMenu(field.value)">
|
||||
|
||||
<q-item clickable v-if="(field.value === 130)">
|
||||
<q-item-section avatar>
|
||||
<q-icon :name="$parent.iconPriority" inverted color="primary"/>
|
||||
<q-icon name="priority_high" inverted color="primary"/>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
<q-btn-dropdown ref="dropdown_priority" flat :label="field.label"
|
||||
>
|
||||
<q-list bordered>
|
||||
<q-item clickable v-ripple v-for="field in selectPriority" :key="field.value"
|
||||
@click.native="setPriority(field.value)">
|
||||
<q-item-section avatar>
|
||||
<q-icon :name="field.icon" inverted color="primary"/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
{{field.label}}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
<q-item-section>{{field.label}}</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-icon name="keyboard_arrow_right"/>
|
||||
</q-item-section>
|
||||
|
||||
<q-menu auto-close anchor="bottom middle" self="top middle">
|
||||
<q-list dense>
|
||||
<q-item side clickable :icon="field.icon"
|
||||
@click="clickMenu(field.value)">
|
||||
|
||||
<q-item-section>
|
||||
<q-list dense>
|
||||
<q-item clickable v-ripple v-for="fieldprior in selectPriority"
|
||||
:key="fieldprior.value"
|
||||
@click="setPriority(fieldprior.value)">
|
||||
<q-item-section avatar>
|
||||
<q-icon :name="fieldprior.icon" inverted color="primary"/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
{{fieldprior.label}}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-item>
|
||||
</div>
|
||||
</q-list>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import Vue from 'vue'
|
||||
import { Component, Watch } from 'vue-property-decorator'
|
||||
|
||||
import { ICfgServer, IDrag, IGlobalState, ITodo, ITodosState } from '@src/model'
|
||||
import { SingleTodo } from '../SingleTodo'
|
||||
import { ITodo, ITodosState, IDrag, IGlobalState, ICfgServer } from '@src/model'
|
||||
|
||||
import { tools } from '../../../store/Modules/tools'
|
||||
|
||||
@@ -11,82 +11,34 @@ import { UserStore } from '@store'
|
||||
|
||||
// _.cloneDeep( Per clonare un oggetto
|
||||
|
||||
import { Getter, State, Mutation } from 'vuex-class'
|
||||
import { costanti } from '@src/store/Modules/costanti'
|
||||
import { Getter, Mutation, State } from 'vuex-class'
|
||||
const namespace: string = 'Todos'
|
||||
|
||||
import globalroutines from './../../../globalroutines/index'
|
||||
|
||||
|
||||
@Component({
|
||||
|
||||
components: { SingleTodo },
|
||||
filters: {
|
||||
capitalize: function (value) {
|
||||
if (!value) return ''
|
||||
capitalize(value) {
|
||||
if (!value) { return '' }
|
||||
value = value.toString()
|
||||
return value.charAt(0).toUpperCase() + value.slice(1)
|
||||
}
|
||||
}
|
||||
})
|
||||
export default class Todo extends Vue {
|
||||
$q: any
|
||||
filter: boolean = false
|
||||
title: string = ''
|
||||
todotop: string = ''
|
||||
todobottom: string = ''
|
||||
drag: boolean = true
|
||||
startpos: number = 0
|
||||
listPriorityLabel: number[] = []
|
||||
arrPrior: number[] = []
|
||||
itemDragStart: any = null
|
||||
polling = null
|
||||
loadDone: boolean = false
|
||||
public inddragging: number = -1
|
||||
public service: any
|
||||
public actualMaxPosition: number = 15
|
||||
public scrollable = true
|
||||
public tmpstrTodos: string = ''
|
||||
public categoryAtt: string = ''
|
||||
// public showtype: number = Todos.state.showtype
|
||||
|
||||
$refs: {
|
||||
single: SingleTodo[]
|
||||
}
|
||||
|
||||
@Getter('todos_dacompletare', { namespace })
|
||||
public todos_dacompletare: (state: ITodosState, category: string) => ITodo[]
|
||||
|
||||
@Getter('todos_completati', { namespace })
|
||||
public todos_completati: (state: ITodosState, category: string) => ITodo[]
|
||||
|
||||
@Watch('$route.params.category') changecat() {
|
||||
this.categoryAtt = this.$route.params.category
|
||||
}
|
||||
|
||||
get showtype () {
|
||||
get showtype() {
|
||||
return Todos.state.showtype
|
||||
}
|
||||
|
||||
set showtype (value) {
|
||||
set showtype(value) {
|
||||
console.log('showtype', value)
|
||||
GlobalStore.mutations.setShowType(value)
|
||||
}
|
||||
|
||||
// clickaggshowtype () {
|
||||
// console.log('1B) clickaggshowtype Todos.state.showtype=', Todos.state.showtype)
|
||||
// Todos.state.showtype = costanti.ShowTypeTask.SHOW_ALL
|
||||
// console.log('2B) Dopo: showtype=', this.showtype)
|
||||
// }
|
||||
|
||||
|
||||
loadval (e) {
|
||||
console.log('1) loadval, showtype=', this.showtype)
|
||||
this.showtype = Todos.state.showtype
|
||||
console.log('2) Dopo: showtype=', this.showtype)
|
||||
}
|
||||
|
||||
|
||||
get doneTodosCount() {
|
||||
return Todos.getters.doneTodosCount(this.categoryAtt)
|
||||
}
|
||||
@@ -106,7 +58,7 @@ export default class Todo extends Vue {
|
||||
get todos_vista() {
|
||||
let mystr = ''
|
||||
const arr = Todos.getters.todos_dacompletare(this.categoryAtt)
|
||||
for (let ind in arr) {
|
||||
for (const ind in arr) {
|
||||
mystr += this.getstrelem(arr[ind]) + '\n'
|
||||
}
|
||||
|
||||
@@ -118,7 +70,6 @@ export default class Todo extends Vue {
|
||||
// return todos_dacompletare(this.categoryAtt)
|
||||
// }
|
||||
|
||||
|
||||
// @Watch('$route', { immediate: true, deep: true })
|
||||
// onUrlChange(newVal: any) {
|
||||
// // Some action
|
||||
@@ -132,46 +83,93 @@ export default class Todo extends Vue {
|
||||
set reload_fromServer(value: number) {
|
||||
Todos.state.reload_fromServer = value
|
||||
}
|
||||
public $q: any
|
||||
public filter: boolean = false
|
||||
public title: string = ''
|
||||
public todotop: string = ''
|
||||
public todobottom: string = ''
|
||||
public drag: boolean = true
|
||||
public startpos: number = 0
|
||||
public listPriorityLabel: number[] = []
|
||||
public arrPrior: number[] = []
|
||||
public itemDragStart: any = null
|
||||
public polling = null
|
||||
public loadDone: boolean = false
|
||||
public inddragging: number = -1
|
||||
public service: any
|
||||
public actualMaxPosition: number = 15
|
||||
public scrollable = true
|
||||
public tmpstrTodos: string = ''
|
||||
public categoryAtt: string = ''
|
||||
// public showtype: number = Todos.state.showtype
|
||||
|
||||
getmyid(id) {
|
||||
public $refs: {
|
||||
single: SingleTodo[]
|
||||
}
|
||||
|
||||
@Getter('todos_dacompletare', { namespace })
|
||||
public todos_dacompletare: (state: ITodosState, category: string) => ITodo[]
|
||||
|
||||
@Getter('todos_completati', { namespace })
|
||||
public todos_completati: (state: ITodosState, category: string) => ITodo[]
|
||||
|
||||
@Watch('$route.params.category') public changecat() {
|
||||
this.categoryAtt = this.$route.params.category
|
||||
}
|
||||
|
||||
// clickaggshowtype () {
|
||||
// console.log('1B) clickaggshowtype Todos.state.showtype=', Todos.state.showtype)
|
||||
// Todos.state.showtype = costanti.ShowTypeTask.SHOW_ALL
|
||||
// console.log('2B) Dopo: showtype=', this.showtype)
|
||||
// }
|
||||
|
||||
public loadval(e) {
|
||||
console.log('1) loadval, showtype=', this.showtype)
|
||||
this.showtype = Todos.state.showtype
|
||||
console.log('2) Dopo: showtype=', this.showtype)
|
||||
}
|
||||
|
||||
public getmyid(id) {
|
||||
return 'row' + id
|
||||
}
|
||||
|
||||
showTask(field_value) {
|
||||
public showTask(field_value) {
|
||||
return field_value === tools.MenuAction.SHOW_TASK
|
||||
}
|
||||
|
||||
onStart() {
|
||||
public onStart() {
|
||||
|
||||
this.startpos = 0
|
||||
this.itemDragStart = null
|
||||
}
|
||||
|
||||
|
||||
logelem(mystr, elem) {
|
||||
public logelem(mystr, elem) {
|
||||
console.log(mystr, 'elem [', elem._id, '] ', elem.descr, ' Pr(', this.getPriorityByInd(elem.priority), ') [', elem.id_prev, '] modif=', elem.modified)
|
||||
}
|
||||
|
||||
getstrelem(elem) {
|
||||
public getstrelem(elem) {
|
||||
return 'elem [' + elem._id + '] ' + elem.descr + ' Pr(' + this.getPriorityByInd(elem.priority) + ') [ID_PREV=' + elem.id_prev + '] modif=' + elem.modified + ' '
|
||||
}
|
||||
|
||||
getTitlePriority(priority) {
|
||||
public getTitlePriority(priority) {
|
||||
let cl = ''
|
||||
|
||||
if (priority === tools.Todos.PRIORITY_HIGH)
|
||||
if (priority === tools.Todos.PRIORITY_HIGH) {
|
||||
cl = 'high_priority'
|
||||
else if (priority === tools.Todos.PRIORITY_NORMAL)
|
||||
}
|
||||
else if (priority === tools.Todos.PRIORITY_NORMAL) {
|
||||
cl = 'medium_priority'
|
||||
else if (priority === tools.Todos.PRIORITY_LOW)
|
||||
}
|
||||
else if (priority === tools.Todos.PRIORITY_LOW) {
|
||||
cl = 'low_priority'
|
||||
}
|
||||
|
||||
return cl + ' titlePriority'
|
||||
}
|
||||
|
||||
logga_arr(myarr: ITodo[]) {
|
||||
public logga_arr(myarr: ITodo[]) {
|
||||
let mystr = '\n'
|
||||
myarr.forEach(item => {
|
||||
myarr.forEach((item) => {
|
||||
mystr += '[' + item.pos + '] ' + item.descr + ' Pr(' + this.getPriorityByInd(item.priority) + ') [' + item.id_prev + '] modif=' + item.modified + '\n'
|
||||
// mystr += '[' + item.pos + '] ' + item.descr + '\n'
|
||||
})
|
||||
@@ -179,7 +177,7 @@ export default class Todo extends Vue {
|
||||
return mystr
|
||||
}
|
||||
|
||||
async onEnd(itemdragend) {
|
||||
public async onEnd(itemdragend) {
|
||||
console.log('************ END DRAG: ', itemdragend)
|
||||
this.inddragging = -1
|
||||
|
||||
@@ -187,31 +185,22 @@ export default class Todo extends Vue {
|
||||
|
||||
}
|
||||
|
||||
private getElementIndex(el: any) {
|
||||
return [].slice.call(el.parentElement.children).indexOf(el)
|
||||
}
|
||||
|
||||
private getElementOldIndex(el: any) {
|
||||
return parseInt(el.attributes['index'].value)
|
||||
}
|
||||
|
||||
|
||||
created() {
|
||||
public created() {
|
||||
const $service = this.$dragula.$service
|
||||
$service.options('first',
|
||||
{
|
||||
// isContainer: function (el) {
|
||||
// return el.classList.contains('dragula-container')
|
||||
// },
|
||||
moves: function (el, source, handle, sibling) {
|
||||
moves(el, source, handle, sibling) {
|
||||
// console.log('moves')
|
||||
return !el.classList.contains('donotdrag') // elements are always draggable by default
|
||||
},
|
||||
accepts: function (el, target, source, sibling) {
|
||||
accepts(el, target, source, sibling) {
|
||||
// console.log('accepts dragging '+ el.id + ' from ' + source.id + ' to ' + target.id)
|
||||
return true // elements can be dropped in any of the `containers` by default
|
||||
},
|
||||
invalid: function (el, handle) {
|
||||
invalid(el, handle) {
|
||||
// console.log('invalid')
|
||||
return el.classList.contains('donotdrag') // don't prevent any drags from initiating by default
|
||||
},
|
||||
@@ -219,7 +208,7 @@ export default class Todo extends Vue {
|
||||
})
|
||||
$service.eventBus.$on('dragend', (args) => {
|
||||
|
||||
let itemdragend: IDrag = {
|
||||
const itemdragend: IDrag = {
|
||||
category: this.categoryAtt,
|
||||
newIndex: this.getElementIndex(args.el),
|
||||
oldIndex: this.getElementOldIndex(args.el)
|
||||
@@ -238,11 +227,10 @@ export default class Todo extends Vue {
|
||||
this.scrollable = true
|
||||
})
|
||||
|
||||
|
||||
this.load()
|
||||
}
|
||||
|
||||
mounted () {
|
||||
public mounted() {
|
||||
// console.log('*** MOUNTED ***')
|
||||
|
||||
this.categoryAtt = this.$route.params.category
|
||||
@@ -257,25 +245,25 @@ export default class Todo extends Vue {
|
||||
}
|
||||
}
|
||||
|
||||
setarrPriority() {
|
||||
public setarrPriority() {
|
||||
this.arrPrior = []
|
||||
const arr = tools.selectPriority[UserStore.state.lang]
|
||||
if (arr) {
|
||||
arr.forEach(rec => {
|
||||
arr.forEach((rec) => {
|
||||
this.arrPrior.push(rec.value)
|
||||
})
|
||||
}
|
||||
// console.log('Array PRIOR:', this.arrPrior)
|
||||
}
|
||||
|
||||
async load() {
|
||||
public async load() {
|
||||
console.log('LOAD TODO....')
|
||||
this.categoryAtt = this.$route.params.category
|
||||
|
||||
// Set last category selected
|
||||
localStorage.setItem(tools.localStorage.categorySel, this.categoryAtt)
|
||||
|
||||
for (let todosKey in tools.Todos) {
|
||||
for (const todosKey in tools.Todos) {
|
||||
this.listPriorityLabel.push(tools.Todos[todosKey])
|
||||
}
|
||||
// console.log('Priority:' + this.listPriorityLabel)
|
||||
@@ -288,24 +276,24 @@ export default class Todo extends Vue {
|
||||
}
|
||||
|
||||
// Call to check if need to refresh
|
||||
checkUpdate_everytime() {
|
||||
public checkUpdate_everytime() {
|
||||
this.polling = setInterval(() => {
|
||||
this.checkUpdate()
|
||||
}, 60000)
|
||||
}
|
||||
|
||||
beforeDestroy() {
|
||||
public beforeDestroy() {
|
||||
clearInterval(this.polling)
|
||||
}
|
||||
|
||||
|
||||
getPriorityByInd(index) {
|
||||
public getPriorityByInd(index) {
|
||||
// console.log('LANG in PRIOR', UserStore.state.lang)
|
||||
try {
|
||||
const arr = tools.selectPriority[UserStore.state.lang]
|
||||
for (let rec of arr) {
|
||||
if (rec.value === index)
|
||||
for (const rec of arr) {
|
||||
if (rec.value === index) {
|
||||
return rec.label
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
|
||||
@@ -313,22 +301,24 @@ export default class Todo extends Vue {
|
||||
return ''
|
||||
}
|
||||
|
||||
isRegistered() {
|
||||
public isRegistered() {
|
||||
return localStorage.getItem(tools.localStorage.userId) !== ''
|
||||
}
|
||||
|
||||
mydeleteItem(idobj: string) {
|
||||
public mydeleteItem(idobj: string) {
|
||||
console.log('mydeleteItem', idobj)
|
||||
return Todos.actions.deleteItem({ cat: this.categoryAtt, idobj })
|
||||
}
|
||||
|
||||
insertTodo(atfirst: boolean = false) {
|
||||
public insertTodo(atfirst: boolean = false) {
|
||||
let descr = this.todobottom.trim()
|
||||
if (atfirst)
|
||||
if (atfirst) {
|
||||
descr = this.todotop.trim()
|
||||
}
|
||||
|
||||
if (descr === '')
|
||||
if (descr === '') {
|
||||
return
|
||||
}
|
||||
|
||||
if (UserStore.state.userId === undefined) {
|
||||
this.$q.notify(this.$t('todo.usernotdefined'))
|
||||
@@ -341,8 +331,8 @@ export default class Todo extends Vue {
|
||||
return
|
||||
}
|
||||
|
||||
let myobj: ITodo = {
|
||||
descr: descr,
|
||||
const myobj: ITodo = {
|
||||
descr,
|
||||
category: this.categoryAtt
|
||||
}
|
||||
|
||||
@@ -350,18 +340,20 @@ export default class Todo extends Vue {
|
||||
.then((data) => {
|
||||
|
||||
console.log('data', data)
|
||||
if (data !== null)
|
||||
if (data !== null) {
|
||||
this.$q.notify(data)
|
||||
}
|
||||
|
||||
// empty the field
|
||||
if (atfirst)
|
||||
if (atfirst) {
|
||||
this.todotop = ''
|
||||
else
|
||||
}
|
||||
else {
|
||||
this.todobottom = ''
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
sendMessageToSW(recdata, method) {
|
||||
|
||||
@@ -376,7 +368,7 @@ export default class Todo extends Vue {
|
||||
}
|
||||
*/
|
||||
|
||||
async updateitem({ myitem, field }) {
|
||||
public async updateitem({ myitem, field }) {
|
||||
console.log('calling MODIFY updateitem', myitem, field)
|
||||
// Update the others components...
|
||||
|
||||
@@ -394,14 +386,14 @@ export default class Todo extends Vue {
|
||||
|
||||
}
|
||||
|
||||
deselectAllRows(item: ITodo, check, onlythis: boolean = false) {
|
||||
public deselectAllRows(item: ITodo, check, onlythis: boolean = false) {
|
||||
// console.log('deselectAllRows : ', item)
|
||||
|
||||
for (let i = 0; i < this.$refs.single.length; i++) {
|
||||
|
||||
let contr = <SingleTodo>this.$refs.single[i]
|
||||
const contr = this.$refs.single[i] as SingleTodo
|
||||
// @ts-ignore
|
||||
let id = contr.itemtodo._id
|
||||
const id = contr.itemtodo._id
|
||||
// Don't deselect the actual clicked!
|
||||
let des = false
|
||||
if (onlythis) {
|
||||
@@ -416,11 +408,11 @@ export default class Todo extends Vue {
|
||||
}
|
||||
}
|
||||
|
||||
checkUpdate() {
|
||||
public checkUpdate() {
|
||||
Todos.actions.waitAndcheckPendingMsg()
|
||||
}
|
||||
|
||||
loadMoreTodo(index, done) {
|
||||
public loadMoreTodo(index, done) {
|
||||
setTimeout(() => {
|
||||
this.actualMaxPosition += 15
|
||||
done()
|
||||
@@ -428,7 +420,7 @@ export default class Todo extends Vue {
|
||||
|
||||
}
|
||||
|
||||
getArrTodos() {
|
||||
public getArrTodos() {
|
||||
|
||||
let mystr = ''
|
||||
|
||||
@@ -437,7 +429,7 @@ export default class Todo extends Vue {
|
||||
.then((alldata) => {
|
||||
const myrecs = [...alldata]
|
||||
|
||||
myrecs.forEach(rec => {
|
||||
myrecs.forEach((rec) => {
|
||||
mystr = mystr + rec.descr + rec.completed + '] ['
|
||||
})
|
||||
|
||||
@@ -445,6 +437,14 @@ export default class Todo extends Vue {
|
||||
})
|
||||
}
|
||||
|
||||
private getElementIndex(el: any) {
|
||||
return [].slice.call(el.parentElement.children).indexOf(el)
|
||||
}
|
||||
|
||||
private getElementOldIndex(el: any) {
|
||||
return parseInt(el.attributes.index.value, 10)
|
||||
}
|
||||
|
||||
// setArrTodos() {
|
||||
//
|
||||
// let mystr = ''
|
||||
@@ -458,5 +458,4 @@ export default class Todo extends Vue {
|
||||
// }
|
||||
//
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -35,9 +35,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-input ref="insertTask" v-model="todotop" inverted :float-label="$t('todo.inserttop')"
|
||||
<q-input ref="insertTask" color="blue-12" v-model="todotop" :label="$t('todo.inserttop')"
|
||||
style="margin-left: 6px;"
|
||||
:after="[{icon: 'arrow_forward', content: true, handler () {}}]"
|
||||
v-on:keyup.enter="insertTodo(true)"/>
|
||||
v-on:keyup.enter="insertTodo(true)">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="add" />
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<div style="display: none">{{ prior = 0, priorcomplet = false }}</div>
|
||||
<div>
|
||||
@@ -87,8 +92,10 @@
|
||||
</div>
|
||||
|
||||
|
||||
<q-input v-if="TodosCount > 0" ref="insertTaskBottom" v-model="todobottom" inverted
|
||||
:float-label="$t('todo.insertbottom')"
|
||||
<q-input v-if="TodosCount > 0" ref="insertTaskBottom" v-model="todobottom"
|
||||
style="margin-left: 6px;"
|
||||
color="blue-12"
|
||||
:label="$t('todo.insertbottom')"
|
||||
:after="[{icon: 'arrow_forward', content: true, handler () {}}]"
|
||||
v-on:keyup.enter="insertTodo(false)"/>
|
||||
|
||||
@@ -102,8 +109,8 @@
|
||||
<!--<!–<q-btn class="mybtn" round color="" icon="list" @click="reload_fromServer++">Reload</q-btn>–>-->
|
||||
<!--</div>-->
|
||||
|
||||
<!--
|
||||
<!--<!–<q-input v-model="testPao" float-label="testPao"/>–>-->
|
||||
<!--
|
||||
<!--<!–<q-input v-model="testPao" float-label="testPao"/>–>-->
|
||||
<!--<q-input v-model="todos_changed" float-label="todos_changed"/>-->
|
||||
|
||||
<!--<q-input v-model="reload_fromServer" float-label="reload_fromServer"/>-->
|
||||
|
||||
Reference in New Issue
Block a user