Paolo Arena
@@ -13,9 +13,9 @@ const extendTypescriptToWebpack = (config) => {
|
||||
config.resolve
|
||||
.alias
|
||||
.set('@components', path.resolve(__dirname, 'src/components/index.ts'))
|
||||
.set('@components', path.resolve(__dirname, 'src/components'))
|
||||
// .set('@components', path.resolve(__dirname, 'src/components'))
|
||||
.set('@views', path.resolve(__dirname, 'src/components/views/index.ts'))
|
||||
.set('@views', path.resolve(__dirname, 'src/components/views'))
|
||||
// .set('@views', path.resolve(__dirname, 'src/components/views'))
|
||||
.set('@src', path.resolve(__dirname, 'src'))
|
||||
.set('@icons', path.resolve(__dirname, 'src/assets/icons'))
|
||||
.set('@images', path.resolve(__dirname, 'src/assets/images'))
|
||||
@@ -149,13 +149,17 @@ module.exports = function (ctx) {
|
||||
'QDatetime',
|
||||
'QSlideTransition',
|
||||
'QTable',
|
||||
'QContextMenu',
|
||||
'QProgress',
|
||||
'QSlider',
|
||||
],
|
||||
directives: [
|
||||
'Ripple',
|
||||
'CloseOverlay'
|
||||
'CloseOverlay',
|
||||
],
|
||||
// Quasar plugins
|
||||
plugins: [
|
||||
'Dialog',
|
||||
'Notify',
|
||||
'Meta',
|
||||
'Cookies',
|
||||
|
||||
42
src/classes/debounce.ts
Normal file
42
src/classes/debounce.ts
Normal file
@@ -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<F extends Procedure>(
|
||||
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 = <any>setTimeout(doLater, waitMilliseconds)
|
||||
|
||||
if (shouldCallNow) {
|
||||
func.apply(context, args)
|
||||
}
|
||||
} as any
|
||||
}
|
||||
18
src/classes/routinestd.ts
Normal file
18
src/classes/routinestd.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
export async function askConfirm($q: any, mytitle, mytext, ok, cancel) {
|
||||
try {
|
||||
return await $q.dialog({
|
||||
title: mytitle,
|
||||
message: mytext,
|
||||
ok: ok,
|
||||
cancel: cancel
|
||||
}).then((ris) => {
|
||||
return true
|
||||
// this.$q.notify('Agreed!')
|
||||
}).catch(() => {
|
||||
return false
|
||||
// this.$q.notify('Disagreed...')
|
||||
})
|
||||
} catch (e) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<!--
|
||||
<router-link :to="'/'" v-if="$router.currentRoute.meta.backButton">
|
||||
<button>
|
||||
<i>arrow_back</i>
|
||||
</button>
|
||||
</router-link>
|
||||
-->
|
||||
<q-layout-header>
|
||||
<q-toolbar
|
||||
color="primary"
|
||||
@@ -130,6 +137,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.fixed-left:hover{
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
/*
|
||||
@-webkit-keyframes moveFromLeftFade {
|
||||
from {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import Vue from 'vue'
|
||||
import { Component, Watch } from 'vue-property-decorator'
|
||||
|
||||
import { SingleCat } from '@components'
|
||||
import { SingleCat } from '../SingleCat'
|
||||
import { ICategory } from '@src/model'
|
||||
|
||||
|
||||
|
||||
@@ -1,17 +1,43 @@
|
||||
|
||||
|
||||
$colcompleted: #a2a2a2;
|
||||
$heightitem: 19px;
|
||||
|
||||
.flex-item{
|
||||
background-color: #d5e2eb;
|
||||
padding: 1px;
|
||||
margin: 1px;
|
||||
// background-color: #d5e2eb;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
color: #000;
|
||||
font-size: 0.85rem;
|
||||
flex: 1 1 auto;
|
||||
//flex: 0 0 100%;
|
||||
}
|
||||
|
||||
|
||||
.flex-container2 {
|
||||
flex-flow: row nowrap;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
margin: 2px 5px 2px 5px; // top right bottom left
|
||||
}
|
||||
|
||||
// Set visibility: visible to the icon menu of pos-item-popover
|
||||
.flex-container2:hover .pos-item-popover, .flex-container2:hover .priority-item-popover{
|
||||
//.flex-container2:hover .pos-item-popover {
|
||||
background-color: rgba(230, 230, 230, 0.8);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flex-container2:hover{
|
||||
background-color: rgba(230, 230, 230, 0.8);
|
||||
}
|
||||
|
||||
.rowselected {
|
||||
border-width: 1px 0px 1px 0px;
|
||||
border-style: solid;
|
||||
border-color: rgba(49, 68, 240, 0.6);
|
||||
//background-color: rgba(166, 153, 240, 0.7) !important;
|
||||
}
|
||||
|
||||
|
||||
.btn-item {
|
||||
max-width: 24px;
|
||||
}
|
||||
@@ -20,16 +46,77 @@
|
||||
.pos-item {
|
||||
max-width: 24px;
|
||||
min-width: 24px;
|
||||
margin: 0 auto;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
margin-left: 1px;
|
||||
margin-right: 1px;
|
||||
padding-left: 1px;
|
||||
padding-right: 1px;
|
||||
height: $heightitem;
|
||||
line-height: $heightitem;
|
||||
text-align: center;
|
||||
// background-color: #ff4081;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.todo-menu {
|
||||
min-width: 202px;
|
||||
|
||||
}
|
||||
|
||||
.item-menu{
|
||||
font-size: 1rem;
|
||||
|
||||
}
|
||||
|
||||
.titleLista-item {
|
||||
max-width: 92px;
|
||||
min-width: 92px;
|
||||
margin: 0 auto;
|
||||
height: $heightitem;
|
||||
line-height: $heightitem;
|
||||
text-align: center;
|
||||
// background-color: #ff4081;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.pos-item-popover{
|
||||
max-width: 24px;
|
||||
min-width: 24px;
|
||||
padding: 0px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
display: none;
|
||||
color: #777;
|
||||
height: 100%;
|
||||
//visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
.pos-item:hover, .pos-item-popover:hover {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.priority-item-popover {
|
||||
max-width: 24px;
|
||||
min-width: 24px;
|
||||
padding: 0px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
display: none;
|
||||
height: 100%;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.completed-item-popover {
|
||||
max-width: 24px;
|
||||
min-width: 24px;
|
||||
padding: 0px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.priority-item {
|
||||
@@ -42,6 +129,42 @@
|
||||
min-width: 24px;
|
||||
}
|
||||
|
||||
.progress-item {
|
||||
max-width: 32px;
|
||||
min-width: 24px;
|
||||
flex: 1;
|
||||
order: 2;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
.percProgress {
|
||||
height: $heightitem;
|
||||
line-height: $heightitem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.menuProgress {
|
||||
|
||||
}
|
||||
|
||||
.colProgress {
|
||||
}
|
||||
|
||||
.lowperc {
|
||||
color: red;
|
||||
}
|
||||
.medperc {
|
||||
color: blue;
|
||||
}
|
||||
.highperc {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.percompleted {
|
||||
color: $colcompleted
|
||||
}
|
||||
|
||||
.myexpired {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
@@ -50,11 +173,22 @@
|
||||
|
||||
.data-item {
|
||||
max-width: 100px;
|
||||
min-width: 100px;
|
||||
display: block;
|
||||
visibility: initial;
|
||||
//min-width: 100px;
|
||||
//display: flex;
|
||||
//visibility: initial;
|
||||
margin-right: 3px;
|
||||
color: #ccc;
|
||||
order: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
||||
.data-item .q-input-target{
|
||||
color:red !important;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
@media screen and (max-width: 600px) {
|
||||
.data-item {
|
||||
display: none;
|
||||
@@ -62,11 +196,35 @@
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
.div_descr, .div_descr_edit {
|
||||
margin: 2px;
|
||||
padding: 2px;
|
||||
min-width: 200px;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
|
||||
flex: 1;
|
||||
//order: 2;
|
||||
//height: 24px;
|
||||
//line-height: 24px; /* same as height! */
|
||||
|
||||
&.hide {
|
||||
display: none !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
&.show {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.div_descr {
|
||||
// background-color: green;
|
||||
flex: 2 1 auto;
|
||||
|
||||
.div_descr:hover {
|
||||
border-width: 1px 0px 1px 0px;
|
||||
border-color: rgba(125, 255, 125, 0.5);
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
|
||||
@@ -75,8 +233,8 @@
|
||||
font-size: 1.0rem;
|
||||
// display: flex;
|
||||
margin: 1px;
|
||||
padding: 2px;
|
||||
border: 1px;
|
||||
padding: 1px;
|
||||
border: 0px;
|
||||
background-color: #e1ebed;
|
||||
}
|
||||
|
||||
@@ -110,6 +268,61 @@
|
||||
}
|
||||
|
||||
|
||||
.icon_completed:hover {
|
||||
color: darkgreen;
|
||||
.icon_completed {
|
||||
color: rgb(178, 235, 225);
|
||||
}
|
||||
|
||||
.status_completed {
|
||||
color: $colcompleted
|
||||
}
|
||||
|
||||
.menuTitlePriority {
|
||||
background-color: blue;
|
||||
color:white;
|
||||
padding: 2px;
|
||||
margin: 2px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.test{
|
||||
color: fuchsia;
|
||||
&.mio1{
|
||||
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.after_textarea {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.after_textarea:hover {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
.container {
|
||||
background-color: #ccc;
|
||||
padding: 10px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
.item {
|
||||
background-color: red;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
|
||||
}
|
||||
.i3{
|
||||
order: 1;
|
||||
flex: 1;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
@@ -6,29 +6,270 @@ import { UserStore } from '@modules'
|
||||
|
||||
import { ITodo } from '../../../model/index'
|
||||
|
||||
import { SubMenus } from '../SubMenus'
|
||||
|
||||
|
||||
import $ from 'jquery'
|
||||
|
||||
// import { debounce } from '../../../classes/debounce'
|
||||
import { askConfirm } from '../../../classes/routinestd'
|
||||
|
||||
@Component({
|
||||
name: 'SingleTodo'
|
||||
name: 'SingleTodo',
|
||||
components: { SubMenus }
|
||||
})
|
||||
export default class SingleTodo extends Vue {
|
||||
public selectPriority: [] = []
|
||||
public menuPopupTodo: any[] = []
|
||||
public iconCompleted: string = ''
|
||||
public classCompleted: string = ''
|
||||
public classDescr: string = ''
|
||||
public classDescrEdit: string = ''
|
||||
public classExpiring: string = ''
|
||||
public classExpiringEx: string = ''
|
||||
public iconPriority: string = ''
|
||||
public popover: boolean = false
|
||||
public popover_menu: boolean = false // Serve
|
||||
public classRow: string = ''
|
||||
public sel: boolean = false
|
||||
public inEdit: boolean = false
|
||||
public precDescr: string = ''
|
||||
public menuProgress: string = 'menuprogress'
|
||||
public percProgress: string = 'percProgress'
|
||||
public colProgress: string = 'blue'
|
||||
public togglemenu: boolean = false
|
||||
public percentageProgress: number = 0
|
||||
$q: any
|
||||
|
||||
@Prop({required: true}) itemtodo: ITodo
|
||||
@Prop({ required: true }) itemtodo: ITodo
|
||||
|
||||
|
||||
@Watch('itemtodo.completed') valueChanged() {
|
||||
this.$emit('eventupdate', this.itemtodo)
|
||||
}
|
||||
@Watch('itemtodo.expiring_at') valueChanged2() {
|
||||
this.$emit('eventupdate', this.itemtodo)
|
||||
}
|
||||
@Watch('itemtodo.priority') valueChanged3() {
|
||||
this.$emit('eventupdate', this.itemtodo)
|
||||
this.watchupdate()
|
||||
}
|
||||
|
||||
setCompleted () {
|
||||
@Watch('itemtodo.enableExpiring') valueChanged4() {
|
||||
this.watchupdate()
|
||||
}
|
||||
|
||||
@Watch('itemtodo.expiring_at') valueChanged2() {
|
||||
this.watchupdate()
|
||||
}
|
||||
|
||||
@Watch('itemtodo.priority') valueChanged3() {
|
||||
this.watchupdate()
|
||||
}
|
||||
|
||||
|
||||
@Watch('itemtodo.descr') valueChanged5() {
|
||||
this.precDescr = this.itemtodo.descr
|
||||
}
|
||||
|
||||
@Watch('itemtodo.progress') valueChanged6() {
|
||||
this.updateClasses()
|
||||
}
|
||||
|
||||
isTodo() {
|
||||
return this.isTodoByElem(this.itemtodo)
|
||||
}
|
||||
|
||||
isTodoByElem(elem) {
|
||||
return elem.descr.slice(-1) !== ':'
|
||||
}
|
||||
|
||||
watchupdate() {
|
||||
this.$emit('eventupdate', this.itemtodo)
|
||||
this.updateicon()
|
||||
}
|
||||
|
||||
updateClasses() {
|
||||
// this.classCompleted = 'completed-item'
|
||||
this.classCompleted = 'completed-item-popover'
|
||||
this.classDescr = 'flex-item div_descr show'
|
||||
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) {
|
||||
this.percentageProgress = 100
|
||||
this.classCompleted += ' icon_completed'
|
||||
this.classDescr += ' status_completed'
|
||||
this.classExpiring += ' status_completed'
|
||||
this.classExpiringEx += ' status_completed'
|
||||
} else {
|
||||
this.percentageProgress = this.itemtodo.progress
|
||||
}
|
||||
|
||||
this.menuProgress = 'menuProgress'
|
||||
this.percProgress = 'percProgress'
|
||||
|
||||
let mycolcl = ''
|
||||
if (this.itemtodo.progress < 33) {
|
||||
mycolcl = ' lowperc'
|
||||
} else if (this.itemtodo.progress < 66) {
|
||||
mycolcl = ' medperc'
|
||||
} else {
|
||||
mycolcl = ' highperc'
|
||||
}
|
||||
|
||||
if (this.itemtodo.completed)
|
||||
mycolcl = ' percompleted'
|
||||
|
||||
this.colProgress = mycolcl
|
||||
|
||||
this.menuProgress += mycolcl
|
||||
this.percProgress += mycolcl
|
||||
|
||||
// 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][rescodes.INDEX_MENU_DELETE])
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
created() {
|
||||
this.precDescr = this.itemtodo.descr
|
||||
this.updateicon()
|
||||
|
||||
this.updateClasses()
|
||||
|
||||
this.selectPriority = rescodes.selectPriority[UserStore.state.lang]
|
||||
|
||||
|
||||
}
|
||||
|
||||
getClassRow() {
|
||||
return 'row flex-container2 ' + this.classRow
|
||||
}
|
||||
|
||||
clickRiga() {
|
||||
// console.log('CLICK RIGA ************')
|
||||
if (!this.inEdit) {
|
||||
this.$emit('deselectAllRows', this.itemtodo, true)
|
||||
|
||||
if (!this.sel) {
|
||||
this.selectRiga()
|
||||
} else {
|
||||
this.deselectRiga()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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.inEdit) {
|
||||
if (this.sel) {
|
||||
this.selectRiga()
|
||||
} else {
|
||||
this.deselectRiga()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
editTodo() {
|
||||
// console.log('INIZIO - editTodo')
|
||||
this.$emit('click')
|
||||
this.precDescr = this.itemtodo.descr
|
||||
this.inEdit = true
|
||||
if (!this.sel)
|
||||
this.selectRiga()
|
||||
else
|
||||
this.updateClasses()
|
||||
|
||||
this.faiFocus('inputdescr')
|
||||
|
||||
|
||||
// console.log('FINE - editTodo')
|
||||
}
|
||||
|
||||
faiFocus(elem, isparent: boolean = false) {
|
||||
let mythis = this
|
||||
setTimeout(() => {
|
||||
let theField = null
|
||||
if (isparent)
|
||||
theField = <HTMLInputElement>mythis.$parent.$parent.$parent.$parent.$refs[elem]
|
||||
else
|
||||
theField = <HTMLInputElement>mythis.$refs[elem]
|
||||
theField.focus()
|
||||
// console.log('focus()')
|
||||
}, 100)
|
||||
}
|
||||
|
||||
exitEdit(singola: boolean = false) {
|
||||
if (this.inEdit) {
|
||||
// console.log('exitEdit')
|
||||
this.inEdit = false
|
||||
this.updateClasses
|
||||
this.$emit('deselectAllRows', this.itemtodo, false, singola)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
keyDownArea(e) {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
this.updateTodo()
|
||||
this.deselectRiga()
|
||||
this.faiFocus('insertTask', true)
|
||||
}
|
||||
|
||||
// console.log('keyDownArea', e)
|
||||
if (e.key === 'Escape') {
|
||||
this.deselectRiga()
|
||||
this.faiFocus('insertTask', true)
|
||||
console.log('LOAD this.precDescr', this.precDescr)
|
||||
this.precDescr = this.itemtodo.descr
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
updateTodo() {
|
||||
this.itemtodo.descr = this.precDescr
|
||||
console.log('updateTodo', this.precDescr, this.itemtodo.descr)
|
||||
this.watchupdate()
|
||||
this.inEdit = false
|
||||
// this.precDescr = this.itemtodo.descr
|
||||
this.updateClasses()
|
||||
}
|
||||
|
||||
setCompleted() {
|
||||
// console.log('setCompleted')
|
||||
this.itemtodo.completed = !this.itemtodo.completed
|
||||
|
||||
@@ -38,10 +279,12 @@ export default class SingleTodo extends Vue {
|
||||
}
|
||||
|
||||
updatedata() {
|
||||
console.log('calling this.$emit(eventupdate)')
|
||||
this.$emit('eventupdate', this.itemtodo)
|
||||
}
|
||||
|
||||
updateicon () {
|
||||
updateicon() {
|
||||
console.log('updateicon')
|
||||
if (this.itemtodo.completed)
|
||||
this.iconCompleted = 'check_circle'
|
||||
else
|
||||
@@ -55,25 +298,56 @@ export default class SingleTodo extends Vue {
|
||||
else if (this.itemtodo.priority === rescodes.Todos.PRIORITY_LOW)
|
||||
this.iconPriority = 'expand_more' // expand_more
|
||||
|
||||
this.updateClasses()
|
||||
}
|
||||
|
||||
created() {
|
||||
this.updateicon()
|
||||
|
||||
this.selectPriority = rescodes.selectPriority[UserStore.state.lang]
|
||||
removeitem(id) {
|
||||
this.$emit('deleteitem', id)
|
||||
}
|
||||
|
||||
enableExpiring() {
|
||||
this.itemtodo.enableExpiring = !this.itemtodo.enableExpiring
|
||||
|
||||
}
|
||||
|
||||
remove(id) {
|
||||
this.$emit('event', id)
|
||||
clickMenu(action) {
|
||||
console.log('click menu: ', action)
|
||||
if (action === rescodes.MenuAction.DELETE) {
|
||||
this.askConfirmDelete()
|
||||
} else if (action === rescodes.MenuAction.TOGGLE_EXPIRING) {
|
||||
this.enableExpiring()
|
||||
} else if (action === rescodes.MenuAction.COMPLETED) {
|
||||
this.setCompleted()
|
||||
} else if (action === rescodes.MenuAction.PROGRESS_BAR) {
|
||||
this.updatedata()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
setPriority (newpriority) {
|
||||
setPriority(newpriority) {
|
||||
|
||||
this.itemtodo.priority = newpriority
|
||||
|
||||
this.updatedata()
|
||||
|
||||
this.updateicon()
|
||||
|
||||
// this.$q.notify('setPriority: ' + elem)
|
||||
}
|
||||
|
||||
askConfirmDelete() {
|
||||
const deletestr = this.$t('dialog.delete')
|
||||
const cancelstr = this.$t('dialog.cancel')
|
||||
|
||||
askConfirm(this.$q, this.$t('dialog.msg.titledeleteTask'), this.$t('dialog.msg.deleteTask').toString(), deletestr, cancelstr)
|
||||
.then(ris => {
|
||||
console.log('ris', ris)
|
||||
if (ris)
|
||||
this.removeitem(this.itemtodo.id)
|
||||
}).catch(err => {
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,48 +1,69 @@
|
||||
<template>
|
||||
<div class="row flex-container2">
|
||||
<div class="flex-item pos-item">{{ itemtodo.pos }}ª</div>
|
||||
<div class="flex-item priority-item">
|
||||
<q-btn push
|
||||
class="priority-item-popover"
|
||||
:icon="iconPriority">
|
||||
<q-popover
|
||||
v-model="popover"
|
||||
self="top left"
|
||||
<div :class="getClassRow()">
|
||||
<q-context-menu ref="contextMenu">
|
||||
<SubMenus :menuPopupTodo="menuPopupTodo" :itemtodo="itemtodo" @clickMenu="clickMenu" @setPriority="setPriority"></SubMenus>
|
||||
</q-context-menu>
|
||||
|
||||
>
|
||||
<q-list link>
|
||||
<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"/>
|
||||
<q-item-main>
|
||||
<q-item-tile label>{{field.label}}</q-item-tile>
|
||||
</q-item-main>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<div v-if="isTodo()" class="flex-item pos-item" @mouseup.left="mouseUp" @mousedown="clickRiga">
|
||||
<q-btn flat
|
||||
class="pos-item-popover"
|
||||
icon="menu" >
|
||||
<q-popover self="top right">
|
||||
<SubMenus :menuPopupTodo="menuPopupTodo" :itemtodo="itemtodo" @clickMenu="clickMenu" @setPriority="setPriority"></SubMenus>
|
||||
</q-popover>
|
||||
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="flex-item completed-item">
|
||||
<q-btn push
|
||||
class="priority-item-popover"
|
||||
|
||||
<div v-if="isTodo()" class="flex-item completed-item">
|
||||
<q-btn push flat
|
||||
:class="classCompleted"
|
||||
:icon="iconCompleted"
|
||||
@click.native="setCompleted">
|
||||
</q-btn>
|
||||
<!--<q-icon class=" mycols allleft icon_completed ScheduleStatus" :name="iconCompleted"
|
||||
@click.native="setCompleted"/>-->
|
||||
</div>
|
||||
<div class="flex-item div_descr">
|
||||
{{ itemtodo.descr }}
|
||||
</div>
|
||||
|
||||
<div class="flex-item data-item">
|
||||
<q-datetime
|
||||
v-model="itemtodo.expiring_at"
|
||||
class="myexpired"/>
|
||||
<q-input type="textarea" ref="inputdescr" v-model="precDescr"
|
||||
:class="classDescr" :max-height="50"
|
||||
@keydown="keyDownArea" v-on:keydown.esc="exitEdit" @blur="exitEdit(true)" @click="editTodo()"/>
|
||||
|
||||
<!--:after="[{icon: 'arrow_forward', content: true, handler () {}}]"-->
|
||||
|
||||
<!--<div :class="classDescr" @mousedown.left="editTodo()">-->
|
||||
<!--<q-field>{{ itemtodo.descr }}</q-field>-->
|
||||
<!--</div>-->
|
||||
|
||||
<div v-if="isTodo()" class="flex-item progress-item">
|
||||
<q-progress
|
||||
:percentage="percentageProgress"
|
||||
class="progress-item"
|
||||
:color="colProgress"
|
||||
>
|
||||
</q-progress>
|
||||
<div :class="percProgress">
|
||||
{{percentageProgress}}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item btn-item">
|
||||
<q-btn class="mybtn" round color="" icon="delete" @click="remove(itemtodo.id)"></q-btn>
|
||||
|
||||
|
||||
<div v-if="itemtodo.enableExpiring">
|
||||
<div :class="classExpiring">
|
||||
<q-datetime
|
||||
:class="classExpiringEx"
|
||||
v-model="itemtodo.expiring_at"
|
||||
class="myexpired">
|
||||
</q-datetime>
|
||||
</div>
|
||||
</div>
|
||||
<!--<div class="flex-item btn-item">-->
|
||||
<!--{{classPosItemPopup}}-->
|
||||
<!--</div>-->
|
||||
<!--<div class="flex-item btn-item">-->
|
||||
<!--<q-btn class="mybtn" round color="" icon="delete" @click.native="removeitem(itemtodo.id)"></q-btn>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="flex-item">-->
|
||||
<!--[{{ itemtodo.id_prev}} - {{ itemtodo.id_next}}]-->
|
||||
<!--</div>-->
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
0
src/components/todos/SubMenus/SubMenus.scss
Normal file
0
src/components/todos/SubMenus/SubMenus.scss
Normal file
33
src/components/todos/SubMenus/SubMenus.ts
Normal file
33
src/components/todos/SubMenus/SubMenus.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
import Vue from 'vue'
|
||||
import { Component, Prop } from 'vue-property-decorator'
|
||||
|
||||
import { ITodo } from '../../../model/index'
|
||||
import { rescodes } from "@src/store/Modules/rescodes"
|
||||
import { UserStore } from "@store"
|
||||
|
||||
|
||||
@Component({
|
||||
name: 'SubMenus'
|
||||
})
|
||||
|
||||
export default class SubMenus extends Vue {
|
||||
public selectPriority: [] = rescodes.selectPriority[UserStore.state.lang]
|
||||
|
||||
@Prop({ required: false }) menuPopupTodo: any[]
|
||||
@Prop({ required: false }) itemtodo: ITodo[]
|
||||
$q: any
|
||||
|
||||
clickMenu (field) {
|
||||
this.$emit('clickMenu', field)
|
||||
}
|
||||
|
||||
setPriority (field) {
|
||||
this.$emit('setPriority', field)
|
||||
}
|
||||
|
||||
create () {
|
||||
this.selectPriority = rescodes.selectPriority[UserStore.state.lang]
|
||||
|
||||
console.log('CREAZIONE')
|
||||
}
|
||||
}
|
||||
62
src/components/todos/SubMenus/SubMenus.vue
Normal file
62
src/components/todos/SubMenus/SubMenus.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div>
|
||||
<q-list link separator no-border class="todo-menu">
|
||||
<div v-for="field in menuPopupTodo" :key="field.value">
|
||||
<q-item v-if="(field.value !== 130) && (field.value !== 100)" :icon="field.icon"
|
||||
@click.native="clickMenu(field.value)">
|
||||
<q-item-side :icon="field.icon"/>
|
||||
|
||||
<q-item-main v-if="field.value !== 120">
|
||||
<q-item-tile label class="item-menu">{{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-side v-if="field.value === 110">
|
||||
<q-checkbox v-model="itemtodo.completed"/>
|
||||
</q-item-side>
|
||||
|
||||
<q-item-main v-if="field.value === 120">
|
||||
<q-slider :class="$parent.menuProgress" v-model="itemtodo.progress" :min="0" :max="100"/>
|
||||
</q-item-main>
|
||||
<q-item-side v-if="field.value === 120">
|
||||
<div :class="$parent.percProgress">
|
||||
{{$parent.percentageProgress}}%
|
||||
</div>
|
||||
</q-item-side>
|
||||
|
||||
</q-item>
|
||||
<q-item v-if="(field.value === 100)" :icon="field.icon" v-close-overlay
|
||||
@click.native="clickMenu(field.value)">
|
||||
<q-item-side :icon="field.icon"/>
|
||||
<q-item-tile label class="item-menu">{{field.label}}</q-item-tile>
|
||||
</q-item>
|
||||
<q-item v-if="(field.value === 130)" :icon="field.icon"
|
||||
@click.native="clickMenu(field.value)">
|
||||
|
||||
<q-item-side :icon="$parent.iconPriority"/>
|
||||
|
||||
<q-item-main>
|
||||
<q-btn-dropdown ref="dropdown_priority" flat :label="field.label"
|
||||
>
|
||||
<q-list link>
|
||||
<q-item v-close-overlay v-for="field in selectPriority" :key="field.value"
|
||||
@click.native="setPriority(field.value)">
|
||||
<q-item-side :icon="field.icon" inverted color="primary"/>
|
||||
<q-item-main>
|
||||
<q-item-tile label>{{field.label}}</q-item-tile>
|
||||
</q-item-main>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
</q-item-main>
|
||||
|
||||
</q-item>
|
||||
</div>
|
||||
</q-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./SubMenus.ts">
|
||||
</script>
|
||||
1
src/components/todos/SubMenus/index.ts
Normal file
1
src/components/todos/SubMenus/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export {default as SubMenus} from './SubMenus.vue'
|
||||
@@ -1,2 +1,3 @@
|
||||
export * from './SingleTodo'
|
||||
export * from './SubMenus'
|
||||
export * from './todo'
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
.flex-container{
|
||||
background-color: #ccc;
|
||||
background-color: rgb(250, 250, 250);
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@@ -11,3 +11,68 @@
|
||||
.mycard {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.myitemdrag {
|
||||
padding: 2px;
|
||||
margin-top: 4px;
|
||||
border-width: 1px 0px 0px 0px;
|
||||
//border: solid 1px #ccc;
|
||||
border-style: solid;
|
||||
border-color: #ccc;
|
||||
transition: all .4s;
|
||||
}
|
||||
|
||||
.titlePriority, .titleCompleted{
|
||||
border-width: 0px 0px 1px 0px;
|
||||
border-style: solid;
|
||||
border-color: #ccc;
|
||||
color:white;
|
||||
}
|
||||
|
||||
.titleCompleted {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.high_priority {
|
||||
background-color: #4caf50;
|
||||
}
|
||||
|
||||
.medium_priority {
|
||||
background-color: #3846af;
|
||||
}
|
||||
|
||||
.low_priority {
|
||||
background-color: #af2218;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.myitemdrag-enter, .myitemdrag-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.drag {
|
||||
//background-color: green;
|
||||
}
|
||||
|
||||
.dragArea {
|
||||
min-height: 10px;
|
||||
}
|
||||
|
||||
.divtitlecat {
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.categorytitle{
|
||||
color:blue;
|
||||
background-color: lightblue;
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.titleSubMenu {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 350;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import Vue from 'vue'
|
||||
import { Component, Watch } from 'vue-property-decorator'
|
||||
import { Component, Prop, Watch } from 'vue-property-decorator'
|
||||
|
||||
import { SingleTodo } from '@components'
|
||||
import { SingleTodo } from '../SingleTodo'
|
||||
import { ITodo } from '@src/model'
|
||||
|
||||
import { rescodes } from '../../../store/Modules/rescodes'
|
||||
@@ -12,7 +12,10 @@ import _ from 'lodash'
|
||||
|
||||
import draggable from 'vuedraggable'
|
||||
|
||||
import $ from 'jquery'
|
||||
|
||||
@Component({
|
||||
|
||||
components: { SingleTodo, draggable }
|
||||
})
|
||||
export default class Todo extends Vue {
|
||||
@@ -21,67 +24,243 @@ export default class Todo extends Vue {
|
||||
filter: boolean = false
|
||||
title: string = ''
|
||||
todo: string = ''
|
||||
todos_arr: any[] = [{}]
|
||||
todos_arr: ITodo[] = []
|
||||
drag: boolean = true
|
||||
startpos: number = 0
|
||||
endpos: number = 0
|
||||
listPriorityLabel: number[] = []
|
||||
arrPrior: number[] = []
|
||||
prioritySel: number = 0
|
||||
itemDragStart: any = null
|
||||
itemDragEnd: any = null
|
||||
selrowid: number = 0
|
||||
|
||||
// @Prop({ required: false }) category: string
|
||||
|
||||
$refs: {
|
||||
single: SingleTodo[]
|
||||
}
|
||||
|
||||
@Watch('drag') changedrag() {
|
||||
console.log('drag = ' + this.drag)
|
||||
}
|
||||
|
||||
@Watch('$route.params.category') changecat() {
|
||||
console.log('changecat')
|
||||
this.load()
|
||||
}
|
||||
|
||||
getCategory() {
|
||||
return this.$route.params.category
|
||||
// return this.category
|
||||
}
|
||||
|
||||
change(param) {
|
||||
console.log('Change... ' + param)
|
||||
}
|
||||
|
||||
getmyid(id) {
|
||||
return 'row' + id
|
||||
}
|
||||
|
||||
getrefbyid(id) {
|
||||
return 'single' + id
|
||||
}
|
||||
|
||||
|
||||
getelem(indelem, arr: ITodo[] = this.todos_arr) {
|
||||
return (indelem >= 0) && (indelem < arr.length) ? arr[indelem] : null
|
||||
}
|
||||
|
||||
getLastElem() {
|
||||
if (this.todos_arr.length > 0)
|
||||
return this.todos_arr[this.todos_arr.length - 1]
|
||||
else
|
||||
return null
|
||||
}
|
||||
|
||||
getFirstelem() {
|
||||
return this.todos_arr[this.todos_arr.length - 1]
|
||||
}
|
||||
|
||||
onStart() {
|
||||
|
||||
this.startpos = 0
|
||||
this.itemDragStart = null
|
||||
}
|
||||
|
||||
getpos(indelem) {
|
||||
return this.todos_arr[indelem].pos
|
||||
async updateLinkedList(init: boolean, arr: ITodo[] = this.todos_arr) {
|
||||
|
||||
console.log('updateLinkedList', this.todos_arr)
|
||||
|
||||
let idprev = -1
|
||||
let idnext = -1
|
||||
let pos = 1
|
||||
if (arr.length > 0) {
|
||||
idprev = arr[0].id_prev
|
||||
idnext = arr[0].id_next
|
||||
}
|
||||
await arr.forEach((elem, index) => {
|
||||
if (index === 0) {
|
||||
idprev = rescodes.LIST_START
|
||||
} else {
|
||||
const elemprev = this.getelem(index - 1, arr)
|
||||
idprev = elemprev.id
|
||||
}
|
||||
if (index === arr.length - 1) {
|
||||
idnext = rescodes.LIST_END
|
||||
} else {
|
||||
const elemnext = this.getelem(index + 1, arr)
|
||||
idnext = elemnext.id
|
||||
}
|
||||
|
||||
elem.modified = ((elem.id_prev !== idprev) || (elem.id_next !== idnext) || (elem.pos !== pos)) ? true : elem.modified
|
||||
elem.id_prev = idprev
|
||||
elem.id_next = idnext
|
||||
elem.pos = pos
|
||||
if (init) {
|
||||
elem.modified = false
|
||||
}
|
||||
|
||||
pos++
|
||||
|
||||
this.logelem('updateLinked', elem)
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
onEnd(myvar) {
|
||||
let oldpos = this.getpos(myvar.oldIndex)
|
||||
let newpos = this.getpos(myvar.newIndex)
|
||||
logelem(mystr, elem) {
|
||||
console.log(mystr, 'elem [', elem.id, '] ', elem.descr, ' Pr(', this.getPriorityByInd(elem.priority), ') [', elem.id_prev, '-', elem.id_next, '] modif=', elem.modified)
|
||||
}
|
||||
|
||||
console.log('onEnd old = ' + oldpos + ' new = ' + newpos)
|
||||
if (myvar.oldIndex < myvar.newIndex) {
|
||||
// c'è spazio
|
||||
newpos = oldpos - 1
|
||||
if (newpos <= 0)
|
||||
newpos = 1
|
||||
getPriorityToSet(ind1, ind2) {
|
||||
let elem1 = this.getelem(ind1)
|
||||
let elem2 = this.getelem(ind2)
|
||||
|
||||
if ((elem1 !== null) && (elem2 !== null)) {
|
||||
if (elem1.priority === elem2.priority) {
|
||||
return elem1.priority
|
||||
} else {
|
||||
// if different priority then take the first
|
||||
return elem1.priority
|
||||
}
|
||||
} else {
|
||||
newpos = newpos + 1
|
||||
return (elem1 != null) ? elem1.priority : ((elem2 != null) ? elem2.priority : null)
|
||||
}
|
||||
}
|
||||
|
||||
getCompleted(ind1, ind2) {
|
||||
let elem1 = this.getelem(ind1)
|
||||
let elem2 = this.getelem(ind2)
|
||||
|
||||
if ((elem1 !== null) && (elem2 !== null)) {
|
||||
if (elem1.completed === elem2.completed) {
|
||||
return elem1.completed
|
||||
} else {
|
||||
return elem1.completed
|
||||
}
|
||||
} else {
|
||||
return (elem1 != null) ? elem1.completed : ((elem2 != null) ? elem2.completed : null)
|
||||
}
|
||||
|
||||
console.log('newpos = ' + newpos)
|
||||
}
|
||||
|
||||
if (newpos >= 0) {
|
||||
let myobj = this.todos_arr[myvar.oldIndex]
|
||||
console.log('posprec = ' + myobj.pos)
|
||||
myobj.pos = newpos
|
||||
this.modify(myobj)
|
||||
getTitlePriority (priority) {
|
||||
let cl = ''
|
||||
|
||||
if (priority === rescodes.Todos.PRIORITY_HIGH)
|
||||
cl = 'high_priority'
|
||||
else if (priority === rescodes.Todos.PRIORITY_NORMAL)
|
||||
cl = 'medium_priority'
|
||||
else if (priority === rescodes.Todos.PRIORITY_LOW)
|
||||
cl = 'low_priority'
|
||||
|
||||
return cl + ' titlePriority'
|
||||
}
|
||||
|
||||
async onEnd(itemdragend) {
|
||||
console.log('newindex=', itemdragend.newIndex, 'oldindex=', itemdragend.oldIndex)
|
||||
|
||||
if (itemdragend.newIndex === itemdragend.oldIndex)
|
||||
return // If nothing change, exit
|
||||
|
||||
let myobj = this.getelem(itemdragend.newIndex)
|
||||
|
||||
const indini = itemdragend.newIndex - 1
|
||||
const indfine = itemdragend.newIndex + 1
|
||||
console.log('indini', indini, 'indfine', indfine)
|
||||
// If the newIndex is between another priority, then change priority
|
||||
|
||||
let completed = this.getCompleted(indini, indfine)
|
||||
let changecompleted = false
|
||||
if (completed != null) {
|
||||
myobj.modified = (myobj.completed !== completed) ? true : myobj.modified
|
||||
myobj.completed = completed
|
||||
changecompleted = true
|
||||
console.log('Newcompleted: ', completed)
|
||||
}
|
||||
|
||||
if (!changecompleted) {
|
||||
// if I changed the completed, I don't have to put in other list priority
|
||||
let newpriority = this.getPriorityToSet(indini, indfine)
|
||||
if (newpriority != null && newpriority >= 0) {
|
||||
myobj.modified = (myobj.priority !== newpriority) ? true : myobj.modified
|
||||
myobj.priority = newpriority
|
||||
console.log('NewPriority: ', newpriority)
|
||||
}
|
||||
}
|
||||
|
||||
await this.updateLinkedList(false)
|
||||
|
||||
// Updated only elements modified
|
||||
await this.updateModifyRecords(true)
|
||||
|
||||
}
|
||||
|
||||
async updateModifyRecords(refresh: boolean = false) {
|
||||
let update = false
|
||||
await this.todos_arr.forEach((elem: ITodo) => {
|
||||
if (elem.modified) {
|
||||
this.modify(elem, false)
|
||||
update = true
|
||||
}
|
||||
})
|
||||
|
||||
if (update)
|
||||
await this.updatetable(refresh)
|
||||
}
|
||||
|
||||
|
||||
created() {
|
||||
this.loadCat()
|
||||
this.load()
|
||||
}
|
||||
|
||||
showlistaTodos(nomelista = '') {
|
||||
|
||||
// console.log('todos_arr: ')
|
||||
this.todos_arr.forEach((todo, key) => {
|
||||
console.log('Todo n"' + key + ': ' + todo)
|
||||
setarrPriority() {
|
||||
this.arrPrior = []
|
||||
const arr = rescodes.selectPriority[UserStore.state.lang]
|
||||
arr.forEach(rec => {
|
||||
this.arrPrior.push(rec.value)
|
||||
})
|
||||
console.log('Array PRIOR:', this.arrPrior)
|
||||
}
|
||||
|
||||
loadCat() {
|
||||
this.updatetable()
|
||||
|
||||
async load() {
|
||||
// Set last category selected
|
||||
localStorage.setItem(rescodes.localStorage.categorySel, this.getCategory())
|
||||
|
||||
for (let todosKey in rescodes.Todos) {
|
||||
this.listPriorityLabel.push(rescodes.Todos[todosKey])
|
||||
}
|
||||
console.log('Priority:' + this.listPriorityLabel)
|
||||
this.setarrPriority()
|
||||
this.clearArr()
|
||||
|
||||
await this.updatetable()
|
||||
|
||||
this.todos_arr.forEach((elem, index) => {
|
||||
this.logelem('LOAD ' + index, elem)
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
initcat() {
|
||||
@@ -91,40 +270,56 @@ export default class Todo extends Vue {
|
||||
const objtodo: ITodo = {
|
||||
userId: UserStore.state.userId,
|
||||
descr: '',
|
||||
pos: -1,
|
||||
priority: rescodes.Todos.PRIORITY_NORMAL,
|
||||
completed: false,
|
||||
created_at: new Date(),
|
||||
category: '',
|
||||
modify_at: new Date(),
|
||||
expiring_at: mydateexp
|
||||
expiring_at: mydateexp,
|
||||
enableExpiring: false,
|
||||
id_prev: 0,
|
||||
id_next: 0,
|
||||
pos: 0,
|
||||
modified: true,
|
||||
progress: 0
|
||||
}
|
||||
return objtodo
|
||||
|
||||
}
|
||||
|
||||
getLastPos() {
|
||||
let max = 0
|
||||
this.todos_arr.forEach(myobj => {
|
||||
if (myobj.pos > max)
|
||||
max = myobj.pos
|
||||
})
|
||||
|
||||
return max + 1
|
||||
|
||||
getPriorityByInd(index) {
|
||||
const arr = rescodes.selectPriority[UserStore.state.lang]
|
||||
for (let rec of arr) {
|
||||
if (rec.value === index)
|
||||
return rec.label
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
async insertTodo() {
|
||||
if (this.todo.trim() === '')
|
||||
return
|
||||
|
||||
const objtodo = this.initcat()
|
||||
|
||||
let myid = 0
|
||||
objtodo.descr = this.todo
|
||||
objtodo.pos = this.getLastPos()
|
||||
objtodo.category = this.getCategory()
|
||||
const lastelem = this.getLastList()
|
||||
objtodo.id_prev = (lastelem !== null) ? lastelem.id : rescodes.LIST_START
|
||||
objtodo.id_next = rescodes.LIST_END
|
||||
objtodo.pos = (lastelem !== null) ? lastelem.pos + 1 : 1
|
||||
objtodo.modified = true
|
||||
|
||||
// Add to Indexdb
|
||||
await this.$db.todos.add(objtodo
|
||||
).then(() => {
|
||||
this.updatetable()
|
||||
).then((id) => {
|
||||
console.log('*** IDNEW = ', id)
|
||||
if (lastelem !== null) {
|
||||
lastelem.id_next = id
|
||||
lastelem.modified = true
|
||||
this.modify(lastelem, false)
|
||||
}
|
||||
this.modify(objtodo, true)
|
||||
}).catch(err => {
|
||||
console.log('Errore: ' + err.message)
|
||||
})
|
||||
@@ -133,86 +328,259 @@ export default class Todo extends Vue {
|
||||
this.todo = ''
|
||||
}
|
||||
|
||||
getobjbyid(id) {
|
||||
let myobjtrov = null
|
||||
this.todos_arr.forEach(myobj => {
|
||||
if (myobj.id === id)
|
||||
myobjtrov = myobj
|
||||
})
|
||||
getElemById(id, lista = this.todos_arr) {
|
||||
let myobj: ITodo
|
||||
for (myobj of lista) {
|
||||
if (myobj.id === id) {
|
||||
return myobj
|
||||
}
|
||||
}
|
||||
|
||||
return myobjtrov
|
||||
return null
|
||||
}
|
||||
|
||||
deleteitem(id) {
|
||||
// console.log('deleteitem: KEY = ', id)
|
||||
async deleteitem(id) {
|
||||
console.log('deleteitem: KEY = ', id)
|
||||
|
||||
let myobjtrov = this.getobjbyid(id)
|
||||
let myobjtrov = this.getElemById(id)
|
||||
|
||||
if (myobjtrov !== null) {
|
||||
let myobjprev = this.getElemById(myobjtrov.id_prev)
|
||||
let myobjnext = this.getElemById(myobjtrov.id_next)
|
||||
|
||||
if (myobjprev !== null) {
|
||||
myobjprev.id_next = myobjtrov.id_next
|
||||
myobjprev.modified = true
|
||||
this.modify(myobjprev, false)
|
||||
}
|
||||
|
||||
if (myobjnext !== null) {
|
||||
myobjnext.id_prev = myobjtrov.id_prev
|
||||
myobjnext.modified = true
|
||||
this.modify(myobjnext, false)
|
||||
}
|
||||
|
||||
console.log('ENTRATO')
|
||||
const mythis = this
|
||||
// Delete item
|
||||
this.$db.todos
|
||||
await this.$db.todos
|
||||
.where('id').equals(id)
|
||||
.delete()
|
||||
.then(() => {
|
||||
this.updatetable()
|
||||
console.log('UpdateTable')
|
||||
mythis.updatetable()
|
||||
}).catch((error) => {
|
||||
console.log('err: ', error)
|
||||
})
|
||||
}
|
||||
|
||||
console.log('FINE deleteitem')
|
||||
}
|
||||
|
||||
async updatetable() {
|
||||
await this.filtertodos()
|
||||
async updatetable(refresh: boolean = false) {
|
||||
await this.filtertodos(refresh)
|
||||
}
|
||||
|
||||
async filtertodos() {
|
||||
clearArr() {
|
||||
this.todos_arr = []
|
||||
}
|
||||
|
||||
existArr(x) {
|
||||
return x = (typeof x !== 'undefined' && x instanceof Array) ? x : []
|
||||
}
|
||||
|
||||
getFirstList(arrlist) {
|
||||
let elem: ITodo
|
||||
for (elem of arrlist) {
|
||||
if (elem.id_prev === rescodes.LIST_START) {
|
||||
return elem
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
getLastList(arrlist = this.todos_arr) {
|
||||
let elem: ITodo
|
||||
for (elem of arrlist) {
|
||||
if (elem.id_next === rescodes.LIST_END) {
|
||||
return elem
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
setArrayFinale(arrris) {
|
||||
|
||||
// Sort List:
|
||||
let myarr = []
|
||||
|
||||
let current = this.getFirstList(arrris)
|
||||
let currentprec = current
|
||||
|
||||
if (current !== null)
|
||||
myarr.push(current)
|
||||
|
||||
let index = -1
|
||||
while (current !== null && current.id_next !== rescodes.LIST_END && index < arrris.length) {
|
||||
this.logelem('current : ', current)
|
||||
console.log('id_next', current.id_next)
|
||||
// let changed = (prior !== elem.priority) ? true : false
|
||||
current = this.getElemById(current.id_next, arrris)
|
||||
if (current === null)
|
||||
break
|
||||
if (current.id === currentprec.id)
|
||||
break
|
||||
myarr.push(current)
|
||||
currentprec = current
|
||||
this.logelem('current AFTER : ', current)
|
||||
index++
|
||||
}
|
||||
|
||||
return myarr
|
||||
|
||||
|
||||
}
|
||||
|
||||
async filtertodos(refresh: boolean = false) {
|
||||
console.log('filtertodos')
|
||||
|
||||
let arrtemp = []
|
||||
|
||||
if (this.filter) {
|
||||
// #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))
|
||||
.then((ristodos) => {
|
||||
this.todos_arr = ristodos
|
||||
arrtemp = ristodos
|
||||
})
|
||||
})
|
||||
} else {
|
||||
|
||||
await this.$db.todos
|
||||
.where('userId').equals(UserStore.state.userId)
|
||||
|
||||
.and(todo => todo.category === this.getCategory())
|
||||
.toArray().then(ristodos => {
|
||||
this.todos_arr = ristodos
|
||||
arrtemp = ristodos
|
||||
})
|
||||
|
||||
this.todos_arr = _.orderBy(this.todos_arr, ['completed', 'priority', 'pos'], ['asc', 'desc', 'asc'])
|
||||
arrtemp = _.orderBy(arrtemp, ['completed', 'priority', 'pos'], ['asc', 'desc', 'asc'])
|
||||
}
|
||||
|
||||
this.todos_arr.map((item, index) => {
|
||||
item.pos = (index * 2) + 1
|
||||
})
|
||||
this.updateLinkedList(true, arrtemp)
|
||||
|
||||
// set array
|
||||
// arrtemp = this.setArrayFinale(arrtemp)
|
||||
|
||||
this.todos_arr = [...arrtemp] // make copy
|
||||
|
||||
|
||||
return []
|
||||
}
|
||||
|
||||
sortarr(arr, field) {
|
||||
|
||||
return arr.slice().sort(function(a, b) {
|
||||
return a[field] - b[field]
|
||||
})
|
||||
|
||||
// let ind1 = -1
|
||||
// let val1 = -1
|
||||
// for (let x = 0; x <= arr.length; x++) {
|
||||
// if (x[field] < ind1) {
|
||||
// val11 = x[field]
|
||||
// ind1 = x
|
||||
// }
|
||||
// for (let y: ITodo = null of arr) {
|
||||
//
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
updateitem(myobj) {
|
||||
console.log('updateitem')
|
||||
this.modify(myobj)
|
||||
this.modify(myobj, true)
|
||||
}
|
||||
|
||||
// inactiveAllButtons() {
|
||||
// let divs = this.$children.filter(function (child) {
|
||||
// return child.$attrs['component-type'] === 'my-custom-button'
|
||||
// })
|
||||
// divs.forEach(i => {
|
||||
// divs[i].isActive = false
|
||||
// })
|
||||
// }
|
||||
//
|
||||
|
||||
deselectAllRows(item, 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]
|
||||
// @ts-ignore
|
||||
let id = contr.itemtodo.id
|
||||
// Don't deselect the actual clicked!
|
||||
let des = false
|
||||
if (onlythis) {
|
||||
des = item.id === id
|
||||
}else {
|
||||
des = ((check && (item.id !== id)) || (!check))
|
||||
}
|
||||
if (des) {
|
||||
// @ts-ignore
|
||||
contr.deselectAndExitEdit()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// updateRow(rec: ITodo) {
|
||||
// let index = -1
|
||||
// // get index
|
||||
// this.$refs.single.forEach( (singletodo: SingleTodo) => {
|
||||
// if (singletodo.itemtodo.id === rec.id)
|
||||
// index = -1
|
||||
// })
|
||||
//
|
||||
// }
|
||||
|
||||
modifyField(recOut, recIn, field) {
|
||||
if (recOut[field] !== recIn[field]) {
|
||||
recOut.modified = true
|
||||
recOut[field] = recIn[field]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async modify(myobj) {
|
||||
async modify(myobj: ITodo, update: boolean) {
|
||||
await this.$db.transaction('rw', [this.$db.todos], async () => {
|
||||
const miorec = await this.$db.todos.get(myobj.id)
|
||||
|
||||
miorec.modify_at = new Date()
|
||||
miorec.completed = myobj.completed
|
||||
miorec.expiring_at = myobj.expiring_at
|
||||
miorec.priority = myobj.priority
|
||||
miorec.pos = myobj.pos
|
||||
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')
|
||||
this.modifyField(miorec, myobj, 'id_next')
|
||||
this.modifyField(miorec, myobj, 'pos')
|
||||
this.modifyField(miorec, myobj, 'enableExpiring')
|
||||
this.modifyField(miorec, myobj, 'progress')
|
||||
|
||||
await this.$db.todos.put(miorec)
|
||||
|
||||
this.updatetable()
|
||||
if (miorec.modified) {
|
||||
miorec.modify_at = new Date()
|
||||
|
||||
this.logelem('modify', miorec)
|
||||
|
||||
await this.$db.todos.put(miorec)
|
||||
|
||||
if (update)
|
||||
await this.updatetable(false)
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
@@ -3,22 +3,37 @@
|
||||
<div class="panel">
|
||||
<p class="caption"></p>
|
||||
|
||||
<q-input v-model="todo" inverted float-label="Inserisci il Todo"
|
||||
:after="[{icon: 'arrow_forward', content: true, handler () {}}]"
|
||||
v-on:keyup.enter="insertTodo"/>
|
||||
<div class="divtitlecat">
|
||||
<div class="categorytitle">{{ getCategory() }}</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex-container">
|
||||
<draggable v-model="todos_arr" :options="{draggable:'.myitemdrag'}" @start="onStart" @end="onEnd">
|
||||
<div style="display: none">{{ prior = 0, priorcomplet = false }}</div>
|
||||
<div class="drag">
|
||||
<draggable v-model="todos_arr" :options="{draggable:'.myitemdrag'}"
|
||||
@start="onStart" @end="onEnd" class="dragArea">
|
||||
<transition-group>
|
||||
<SingleTodo @event="deleteitem" @eventupdate="updateitem" :itemtodo='mytodo'
|
||||
v-for="mytodo of todos_arr" :key="mytodo.id" class="myitemdrag">
|
||||
</SingleTodo>
|
||||
<div :id="getmyid(mytodo.id)" :key="mytodo.id" v-for="mytodo in todos_arr" class="myitemdrag">
|
||||
|
||||
<div v-if="(prior !== mytodo.priority) && !mytodo.completed" :class="getTitlePriority(mytodo.priority)">
|
||||
<label>{{getPriorityByInd(mytodo.priority)}}</label>
|
||||
</div>
|
||||
<div v-if="(!priorcomplet && mytodo.completed)" class="titleCompleted">
|
||||
<label>{{$t('todo.completed')}}</label>
|
||||
<div style="display: none">{{ priorcomplet = true }}</div>
|
||||
</div>
|
||||
<SingleTodo ref="single" @deleteitem="deleteitem" @eventupdate="updateitem"
|
||||
@deselectAllRows="deselectAllRows"
|
||||
:itemtodo='mytodo' />
|
||||
|
||||
<div style="display: none">{{ prior = mytodo.priority, priorcomplet = mytodo.completed }}</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
</div>
|
||||
|
||||
<!--<div v-for="element in todos_arr" :key="element.id">{{element.descr}}</div>-->
|
||||
<q-input ref="insertTask" v-model="todo" inverted :float-label="$t('todo.insert')"
|
||||
:after="[{icon: 'arrow_forward', content: true, handler () {}}]"
|
||||
v-on:keyup.enter="insertTodo"/>
|
||||
|
||||
</div>
|
||||
</q-page>
|
||||
|
||||
38
src/i18n.js
38
src/i18n.js
@@ -1,5 +1,15 @@
|
||||
const messages = {
|
||||
it: {
|
||||
dialog: {
|
||||
yes: 'Si',
|
||||
no: 'No',
|
||||
delete: 'Elimina',
|
||||
cancel: 'Annulla',
|
||||
msg: {
|
||||
titledeleteTask: 'Cancella Task',
|
||||
deleteTask: 'Vuoi cancellare questo Task?'
|
||||
}
|
||||
},
|
||||
comp:{
|
||||
Conta: "Conta",
|
||||
},
|
||||
@@ -16,6 +26,9 @@ const messages = {
|
||||
Test: 'Test',
|
||||
Category: 'Categorie',
|
||||
Todo: 'Todo',
|
||||
personal: 'Personale',
|
||||
work: 'Lavoro',
|
||||
shopping: 'Spesa',
|
||||
},
|
||||
components: {
|
||||
authentication:{
|
||||
@@ -84,8 +97,24 @@ const messages = {
|
||||
undefined: 'non definito'
|
||||
}
|
||||
},
|
||||
todo: {
|
||||
titleprioritymenu: 'Priorità:',
|
||||
insert: 'Inserisci il Task',
|
||||
edit: 'Descrizione Task:',
|
||||
completed: 'Completati'
|
||||
}
|
||||
},
|
||||
enUk: {
|
||||
dialog: {
|
||||
yes: 'Yes',
|
||||
no: 'No',
|
||||
delete: 'Delete',
|
||||
cancel: 'Cancel',
|
||||
msg: {
|
||||
titledeleteTask: 'Delete Task',
|
||||
deleteTask: 'Delete this Task?'
|
||||
}
|
||||
},
|
||||
comp:{
|
||||
Conta: "Count",
|
||||
},
|
||||
@@ -102,6 +131,9 @@ const messages = {
|
||||
Test: 'Test',
|
||||
Category: 'Category',
|
||||
Todo: 'Todo',
|
||||
personal: 'Personal',
|
||||
work: 'Work',
|
||||
shopping: 'Shopping',
|
||||
},
|
||||
components: {
|
||||
authentication:{
|
||||
@@ -170,6 +202,12 @@ const messages = {
|
||||
undefined: 'undefined'
|
||||
}
|
||||
},
|
||||
todo: {
|
||||
titleprioritymenu: 'Priority:',
|
||||
insert: 'Insert Task',
|
||||
edit: 'Task Description:',
|
||||
completed: 'Completed'
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -38,6 +38,7 @@
|
||||
import { Store } from 'vuex'
|
||||
import { UserStore } from '@modules'
|
||||
import { GlobalStore } from '@modules'
|
||||
import { ITodoList } from "../../model";
|
||||
|
||||
|
||||
@Component({
|
||||
@@ -48,32 +49,48 @@
|
||||
export default class Drawer extends Vue {
|
||||
public $q
|
||||
$t: any
|
||||
public arrlista = GlobalStore.state.listatodo
|
||||
photo = ''
|
||||
user = null
|
||||
links
|
||||
|
||||
created() {
|
||||
console.log('Drawer created...')
|
||||
|
||||
let listatodo = []
|
||||
|
||||
this.arrlista.forEach((elem: ITodoList) => {
|
||||
let item = { route: '/todo/' + elem.namecat, faIcon: 'fa fa-list-alt', materialIcon: 'todo', name: 'pages.' + elem.description }
|
||||
listatodo.push(item)
|
||||
|
||||
})
|
||||
|
||||
this.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',
|
||||
routes2: listatodo
|
||||
},
|
||||
{ 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,
|
||||
},
|
||||
Forms: {
|
||||
routes: [
|
||||
{ route: '/prec', faIcon: 'fa fa-search', materialIcon: 'search', name: 'pages.Test' },
|
||||
],
|
||||
show: false
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
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: '/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
|
||||
},
|
||||
Forms: {
|
||||
routes: [
|
||||
{ route: '/prec', faIcon: 'fa fa-search', materialIcon: 'search', name: 'pages.Test' },
|
||||
],
|
||||
show: false
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
get MenuCollapse() {
|
||||
return GlobalStore.state.menuCollapse
|
||||
@@ -140,6 +157,10 @@
|
||||
margin-top: 5%;
|
||||
}
|
||||
|
||||
.fixed-left:hover {
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
footer {
|
||||
small {
|
||||
color: red;
|
||||
|
||||
@@ -1,15 +1,26 @@
|
||||
<template>
|
||||
|
||||
<div class="list no-border platform-delimiter light-paragraph">
|
||||
<q-icon name="action"/>
|
||||
<template v-for="(parent, index) in links">
|
||||
<!--
|
||||
<div class="list-label cursor-pointer" @click="parent.show = !parent.show">
|
||||
{{replaceUnderlineToSpace(index)}} <div class="menu_freccina"><i aria-hidden="true" class="v-icon material-icons theme--light">keyboard_arrow_down</i></div>
|
||||
<!--
|
||||
<div class="list-label cursor-pointer" @click="parent.show = !parent.show">
|
||||
{{replaceUnderlineToSpace(index)}} <div class="menu_freccina"><i aria-hidden="true" class="v-icon material-icons theme--light">keyboard_arrow_down</i></div>
|
||||
</div>
|
||||
-->
|
||||
<div class="q-list-header">{{replaceUnderlineToSpace(index)}}</div>
|
||||
<template v-for="child in parent.routes">
|
||||
<div v-if="child.routes2">
|
||||
<q-collapsible menu :label="$t(child.name)" icon="format_list_bulleted" class="titleSubMenu">
|
||||
<div v-for="child2 in child.routes2">
|
||||
<q-item link :to="child2.route" exact
|
||||
class="item item-link drawer-closer cursor-pointer">
|
||||
<i :class="child2.faIcon" class="item-primary"></i>
|
||||
<div class="item-content">{{$t(child2.name)}}</div>
|
||||
</q-item>
|
||||
</div>
|
||||
</q-collapsible>
|
||||
</div>
|
||||
-->
|
||||
<div class="q-list-header">{{replaceUnderlineToSpace(index)}}</div>
|
||||
<template v-for="child in parent.routes">
|
||||
<div v-else>
|
||||
<q-slide-transition :duration=200>
|
||||
<div v-show="true">
|
||||
<q-item link :to="child.route" exact
|
||||
@@ -19,7 +30,8 @@
|
||||
</q-item>
|
||||
</div>
|
||||
</q-slide-transition>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
@@ -67,7 +79,7 @@
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
.menu-hr{
|
||||
.menu-hr {
|
||||
border-color: #dedede;
|
||||
height: 0.5px;
|
||||
}
|
||||
|
||||
@@ -9,6 +9,14 @@ export interface IGlobalState {
|
||||
mobileMode: boolean
|
||||
menuCollapse: boolean
|
||||
leftDrawerOpen: boolean
|
||||
category: string
|
||||
posts: IPost[]
|
||||
listatodo: ITodoList[]
|
||||
}
|
||||
|
||||
|
||||
export interface ITodoList {
|
||||
namecat: string
|
||||
description: string
|
||||
}
|
||||
|
||||
|
||||
@@ -1,13 +1,19 @@
|
||||
export interface ITodo {
|
||||
id?: number,
|
||||
userId: string
|
||||
pos: number,
|
||||
category?: string
|
||||
descr?: string,
|
||||
priority: number,
|
||||
completed: boolean,
|
||||
created_at: any,
|
||||
modify_at: any,
|
||||
expiring_at: any
|
||||
expiring_at: any,
|
||||
enableExpiring?: boolean,
|
||||
id_prev?: number,
|
||||
id_next?: number,
|
||||
modified?: boolean,
|
||||
pos?: number,
|
||||
progress?: number
|
||||
}
|
||||
|
||||
export interface ITodosState {
|
||||
|
||||
@@ -22,6 +22,7 @@ export interface IUserState {
|
||||
tokens?: IToken[]
|
||||
|
||||
verifiedEmail?: boolean
|
||||
categorySel?: string
|
||||
|
||||
tokenforgot?: string
|
||||
|
||||
|
||||
5
src/plugins/dialog.js
Normal file
5
src/plugins/dialog.js
Normal file
@@ -0,0 +1,5 @@
|
||||
import Dialog from 'quasar'
|
||||
|
||||
export default ({ Vue }) => {
|
||||
Vue.use(Dialog)
|
||||
}
|
||||
@@ -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' }
|
||||
{ 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' },
|
||||
|
||||
@@ -2,7 +2,7 @@ import Vue from 'vue'
|
||||
import { Component } from 'vue-property-decorator'
|
||||
import { GlobalStore } from '@store'
|
||||
|
||||
import { Logo } from '@components'
|
||||
import { Logo } from '../../components/logo'
|
||||
|
||||
@Component({
|
||||
components: { Logo }
|
||||
|
||||
@@ -25,8 +25,9 @@ export const RouteConfig: VueRouteConfig[] = [
|
||||
meta: { name: 'Verify Reg' }
|
||||
},
|
||||
{
|
||||
path: '/todo',
|
||||
path: '/todo/:category',
|
||||
component: () => import('@/components/todos/todo/todo.vue'),
|
||||
// props: { category: 'personal' },
|
||||
meta: { name: 'Todos' }
|
||||
},
|
||||
{
|
||||
|
||||
@@ -452,31 +452,31 @@
|
||||
style="fill:none;stroke:#ffffff;stroke-miterlimit:1;stroke-opacity:0" />
|
||||
</g>
|
||||
<!-- SUN -->
|
||||
<animate xlink:href="#sun" attributeName="r" from="3.6" to="4.1" dur="5s" begin="2s" fill="freeze" />
|
||||
<animate xlink:href="#sun" attributeName="r" from="4.1" to="3.6" dur="5s" begin="7s" fill="freeze" />
|
||||
<animate xlink:href="#sun" attributeName="r" from="3.6" to="3.1" dur="5s" begin="12s" fill="freeze" />
|
||||
<animate xlink:href="#sun" attributeName="r" from="3.1" to="3.6" dur="5s" begin="17s" fill="freeze" />
|
||||
<animate xlink:href="#sun" attributeName="r" from="3.6" to="4.1" dur="3s" begin="2s" fill="freeze" />
|
||||
<animate xlink:href="#sun" attributeName="r" from="4.1" to="3.6" dur="3s" begin="3s" fill="freeze" />
|
||||
<animate xlink:href="#sun" attributeName="r" from="3.6" to="3.1" dur="3s" begin="10s" fill="freeze" />
|
||||
<animate xlink:href="#sun" attributeName="r" from="3.1" to="3.6" dur="3s" begin="15s" fill="freeze" />
|
||||
|
||||
<!-- MOON -->
|
||||
<animate xlink:href="#moon" attributeName="r" from="3.6" to="3.1" dur="5s" begin="2s" fill="freeze" />
|
||||
<animate xlink:href="#moon" attributeName="r" from="3.1" to="3.6" dur="5s" begin="7s" fill="freeze" />
|
||||
<animate xlink:href="#moon" attributeName="r" from="3.6" to="4.1" dur="5s" begin="12s" fill="freeze" />
|
||||
<animate xlink:href="#moon" attributeName="r" from="4.1" to="3.6" dur="5s" begin="17s" fill="freeze" />
|
||||
<animate xlink:href="#moon" attributeName="r" from="3.6" to="3.1" dur="3s" begin="2s" fill="freeze" />
|
||||
<animate xlink:href="#moon" attributeName="r" from="3.1" to="3.6" dur="3s" begin="3s" fill="freeze" />
|
||||
<animate xlink:href="#moon" attributeName="r" from="3.6" to="4.1" dur="3s" begin="10s" fill="freeze" />
|
||||
<animate xlink:href="#moon" attributeName="r" from="4.1" to="3.6" dur="3s" begin="15s" fill="freeze" />
|
||||
|
||||
|
||||
<animateMotion id="anim1" xlink:href="#sun" dur="20s" begin="2s" fill="freeze">
|
||||
<animateMotion id="anim1" xlink:href="#sun" dur="15s" begin="2s" fill="freeze">
|
||||
<mpath xlink:href="#motionPathSun"/>
|
||||
</animateMotion>
|
||||
|
||||
<animateMotion id="anim2" xlink:href="#moon" dur="20s" begin="2s" fill="freeze">
|
||||
<animateMotion id="anim2" xlink:href="#moon" dur="15s" begin="2s" fill="freeze">
|
||||
<mpath xlink:href="#motionPathMoon"/>
|
||||
</animateMotion>
|
||||
|
||||
<animateMotion id="anim3" xlink:href="#sunrays" dur="20s" begin="2s" fill="freeze">
|
||||
<animateMotion id="anim3" xlink:href="#sunrays" dur="15s" begin="2s" fill="freeze">
|
||||
<mpath xlink:href="#motionPathSun"/>
|
||||
</animateMotion>
|
||||
|
||||
<animateMotion id="anim4" xlink:href="#moonlight" dur="20s" begin="2s" fill="freeze">
|
||||
<animateMotion id="anim4" xlink:href="#moonlight" dur="15s" begin="2s" fill="freeze">
|
||||
<mpath xlink:href="#motionPathMoon"/>
|
||||
</animateMotion>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 190 KiB After Width: | Height: | Size: 190 KiB |
@@ -9,7 +9,13 @@ const state: IGlobalState = {
|
||||
mobileMode: false,
|
||||
menuCollapse: true,
|
||||
leftDrawerOpen: true,
|
||||
posts: []
|
||||
category: 'personal',
|
||||
posts: [],
|
||||
listatodo: [
|
||||
{namecat: 'personal', description: 'personal'},
|
||||
{namecat: 'work', description: 'work'},
|
||||
{namecat: 'shopping', description: 'shopping'}
|
||||
]
|
||||
}
|
||||
|
||||
const b = storeBuilder.module<IGlobalState>('GlobalModule', state)
|
||||
@@ -18,10 +24,20 @@ const b = storeBuilder.module<IGlobalState>('GlobalModule', state)
|
||||
namespace Getters {
|
||||
|
||||
const conta = b.read(state => state.conta, 'conta')
|
||||
const listatodo = b.read(state => state.listatodo, 'listatodo')
|
||||
const category = b.read(state => state.category, 'category')
|
||||
|
||||
export const getters = {
|
||||
get conta() {
|
||||
return conta()
|
||||
},
|
||||
|
||||
get listaTodo() {
|
||||
return listatodo()
|
||||
},
|
||||
|
||||
get category() {
|
||||
return category()
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -36,9 +52,15 @@ namespace Mutations {
|
||||
state.leftDrawerOpen = bool
|
||||
}
|
||||
|
||||
function setCategorySel(state: IGlobalState, cat: string) {
|
||||
state.category = cat
|
||||
}
|
||||
|
||||
|
||||
export const mutations = {
|
||||
setConta: b.commit(setConta),
|
||||
setleftDrawerOpen: b.commit(setleftDrawerOpen)
|
||||
setleftDrawerOpen: b.commit(setleftDrawerOpen),
|
||||
setCategorySel: b.commit(setCategorySel)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -22,7 +22,8 @@ const state: IUserState = {
|
||||
repeatPassword: '',
|
||||
idToken: '',
|
||||
tokens: [],
|
||||
verifiedEmail: false
|
||||
verifiedEmail: false,
|
||||
categorySel: 'personal'
|
||||
}
|
||||
|
||||
|
||||
@@ -69,6 +70,7 @@ namespace Mutations {
|
||||
state.username = data.username
|
||||
state.idToken = data.idToken
|
||||
state.verifiedEmail = data.verifiedEmail
|
||||
state.category = data.categorySel
|
||||
// @ts-ignore
|
||||
state.tokens = [
|
||||
{ access: 'auth', token: data.idToken }
|
||||
@@ -106,6 +108,7 @@ namespace Mutations {
|
||||
state.tokens = []
|
||||
state.idToken = ''
|
||||
state.verifiedEmail = false
|
||||
state.categorySel = 'personal'
|
||||
}
|
||||
|
||||
export const mutations = {
|
||||
@@ -484,12 +487,14 @@ namespace Actions {
|
||||
localStorage.removeItem(rescodes.localStorage.isLogged)
|
||||
// localStorage.removeItem(rescodes.localStorage.leftDrawerOpen)
|
||||
localStorage.removeItem(rescodes.localStorage.verifiedEmail)
|
||||
localStorage.removeItem(rescodes.localStorage.categorySel)
|
||||
|
||||
router.push('/signin')
|
||||
}
|
||||
|
||||
function setGlobal() {
|
||||
GlobalStore.mutations.setleftDrawerOpen(localStorage.getItem(rescodes.localStorage.leftDrawerOpen) === 'true')
|
||||
GlobalStore.mutations.setCategorySel(localStorage.getItem(rescodes.localStorage.categorySel))
|
||||
}
|
||||
|
||||
async function autologin (context) {
|
||||
|
||||
@@ -5,8 +5,12 @@ export const rescodes = {
|
||||
DUPLICATE_EMAIL_ID: 11000,
|
||||
DUPLICATE_USERNAME_ID: 11100,
|
||||
|
||||
LIST_END: 10000000,
|
||||
LIST_START: 0,
|
||||
|
||||
localStorage: {
|
||||
verifiedEmail: 'vf',
|
||||
categorySel: 'cs',
|
||||
isLogged: 'ilog',
|
||||
expirationDate: 'expdate',
|
||||
leftDrawerOpen: 'ldo',
|
||||
@@ -16,9 +20,17 @@ export const rescodes = {
|
||||
},
|
||||
|
||||
Todos: {
|
||||
PRIORITY_NORMAL: 0,
|
||||
PRIORITY_HIGH: 1,
|
||||
PRIORITY_LOW: -1
|
||||
PRIORITY_HIGH: 2,
|
||||
PRIORITY_NORMAL: 1,
|
||||
PRIORITY_LOW: 0
|
||||
},
|
||||
|
||||
MenuAction: {
|
||||
DELETE: 100,
|
||||
TOGGLE_EXPIRING: 101,
|
||||
COMPLETED: 110,
|
||||
PROGRESS_BAR: 120,
|
||||
PRIORITY: 130
|
||||
},
|
||||
|
||||
|
||||
@@ -27,41 +39,120 @@ export const rescodes = {
|
||||
{
|
||||
id: 1,
|
||||
label: 'Alta',
|
||||
value: 1,
|
||||
value: 2,
|
||||
icon: 'expand_less'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: 'Normale',
|
||||
value: 0,
|
||||
value: 1,
|
||||
icon: 'remove'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: 'Bassa',
|
||||
value: -1,
|
||||
value: 0,
|
||||
icon: 'expand_more'
|
||||
}],
|
||||
'enUk': [
|
||||
{
|
||||
id: 1,
|
||||
label: 'High',
|
||||
value: 1,
|
||||
value: 2,
|
||||
icon: 'expand_less'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: 'Normal',
|
||||
value: 0,
|
||||
value: 1,
|
||||
icon: 'remove'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: 'Low',
|
||||
value: -1,
|
||||
value: 0,
|
||||
icon: 'expand_more'
|
||||
}]
|
||||
|
||||
},
|
||||
|
||||
INDEX_MENU_DELETE: 3,
|
||||
|
||||
menuPopupTodo: {
|
||||
'it': [
|
||||
{
|
||||
id: 10,
|
||||
label: '',
|
||||
value: 120, // PROGRESS_BAR
|
||||
icon: 'rowing',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
label: 'Imposta Priorità',
|
||||
value: 130, // PRIORITY
|
||||
icon: 'rowing',
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
id: 30,
|
||||
label: 'Completato',
|
||||
value: 110, // COMPLETED
|
||||
icon: 'check_circle',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
id: 40,
|
||||
label: 'Imposta Scadenza',
|
||||
value: 101, // TOGGLE_EXPIRING
|
||||
icon: 'date_range',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
id: 50,
|
||||
label: 'Cancella',
|
||||
value: 100, // DELETE
|
||||
icon: 'delete',
|
||||
checked: false
|
||||
}
|
||||
],
|
||||
'enUk': [
|
||||
{
|
||||
id: 10,
|
||||
label: '',
|
||||
value: 120, // PROGRESS_BAR
|
||||
icon: 'check_circle',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
label: 'Set Priority',
|
||||
value: 130, // PRIORITY
|
||||
icon: 'high_priority',
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
id: 30,
|
||||
label: 'Completed',
|
||||
value: 110, // COMPLETED
|
||||
icon: 'check_circle',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
id: 40,
|
||||
label: 'Set Expiring',
|
||||
value: 101, // TOGGLE_EXPIRING
|
||||
icon: 'date_range',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
id: 50,
|
||||
label: 'Delete',
|
||||
value: 100, // DELETE
|
||||
icon: 'trash',
|
||||
checked: false
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ import { validations, TSignin } from './signin-validate'
|
||||
|
||||
import { validationMixin } from 'vuelidate'
|
||||
|
||||
import { Logo } from '@components'
|
||||
import { Logo } from '../../../components/logo'
|
||||
|
||||
import router from '@router'
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ import { validations, TSignup } from './signup-validate'
|
||||
|
||||
import { validationMixin } from 'vuelidate'
|
||||
|
||||
import { Logo } from '@components'
|
||||
import { Logo } from '../../../components/logo'
|
||||
|
||||
// import {Loading, QSpinnerFacebook, QSpinnerGears} from 'quasar'
|
||||
|
||||
|
||||
Reference in New Issue
Block a user