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

added themecolor and themebgcolor to todos and projects

Browse Source
This commit is contained in:
Paolo Arena
2019-04-29 23:47:42 +02:00
parent 166be747a5
commit 08c0ded31f
26 changed files with 547 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/projects/SingleProject/SingleProject.scss
View File

@@ -270,7 +270,7 @@ $heightdescr: 20px;
//padding: 2px;
min-width: 100px;
text-align: left;
color: blue !important;
color: blue;
overflow: hidden;
align-items: center;

64
src/components/projects/SingleProject/SingleProject.ts
View File

@@ -3,6 +3,7 @@ import { Component, Prop, Watch } from 'vue-property-decorator'
import { Projects, UserStore } from '@modules'
import { tools } from '../../../store/Modules/tools'
import { lists } from '../../../store/Modules/lists'
import { IProject } from '../../../model/index'
@@ -18,7 +19,6 @@ import { RouteNames } from '@src/router/route-names'
name: 'SingleProject'
})
export default class SingleProject extends Vue {
public selectPriority: [] = []
public menuPopupProj: any[] = []
public classDescr: string = ''
public classDescrEdit: string = ''
@@ -77,6 +77,16 @@ export default class SingleProject extends Vue {
this.watchupdate('hoursplanned')
}
@Watch('itemproject.themecolor')
public valueChangedthemecolor() {
this.watchupdate('themecolor')
}
@Watch('itemproject.themebgcolor')
public valueChangedthemebgcolor() {
this.watchupdate('themebgcolor')
}
@Watch('itemproject.hoursworked')
public valueChangedhoursworked() {
this.watchupdate('hoursworked')
@@ -172,6 +182,9 @@ export default class SingleProject extends Vue {
this.classDescrEdit += ' titleLista-item'
}
this.classDescr += ' text-' + this.itemproject.themecolor + ' bg-' + this.itemproject.themebgcolor
this.classDescrEdit += ' text-' + this.itemproject.themecolor + ' bg-' + this.itemproject.themebgcolor
this.percProgress = 'percProgress'
this.classExpiring = 'flex-item data-item shadow-1 hide-if-small'
@@ -210,8 +223,6 @@ export default class SingleProject extends Vue {
this.updateClasses()
this.selectPriority = tools.selectPriority[UserStore.state.lang]
}
public getClassRow() {
@@ -357,7 +368,7 @@ export default class SingleProject extends Vue {
if (((e.keyCode === 46)) && (this.precDescr === '') && !e.shiftKey) {
e.preventDefault()
this.deselectRiga()
this.clickMenu(tools.MenuAction.DELETE)
this.clickMenu(lists.MenuAction.DELETE)
.then(() => {
this.faiFocus('insertProjectBottom', true)
return
@@ -385,7 +396,7 @@ export default class SingleProject extends Vue {
if (((e.keyCode === 46)) && (this.precDescr === '') && !e.shiftKey) {
e.preventDefault()
this.deselectRiga()
this.clickMenu(tools.MenuAction.DELETE)
this.clickMenu(lists.MenuAction.DELETE)
.then(() => {
this.faiFocus('insertProjectBottom', true)
return
@@ -486,16 +497,16 @@ export default class SingleProject extends Vue {
public async clickMenu(action) {
console.log('click menu: ', action)
if (action === tools.MenuAction.DELETE) {
if (action === lists.MenuAction.DELETE) {
return await this.askConfirmDelete()
} else if (action === tools.MenuAction.TOGGLE_EXPIRING) {
} else if (action === lists.MenuAction.TOGGLE_EXPIRING) {
return await this.enableExpiring()
} else if (action === tools.MenuAction.EDIT) {
} else if (action === lists.MenuAction.EDIT) {
this.activeEdit()
} else if (action === tools.MenuAction.CUT) {
} else if (action === lists.MenuAction.CUT) {
const myaction = {
table: tools.projects,
type: tools.MenuAction.CUT,
type: lists.MenuAction.CUT,
_id: this.itemproject._id
}
return await Projects.actions.ActionCutPaste(myaction)
@@ -505,6 +516,39 @@ export default class SingleProject extends Vue {
}
public selectSubMenu(action, elem) {
if (action === lists.MenuAction.PRIORITY) {
this.setPriority(elem)
} else if (action === lists.MenuAction.THEME) {
this.setThemeColor(elem, false)
} else if (action === lists.MenuAction.THEMEBG) {
this.setThemeColor(elem, true)
}
}
public setThemeColor(newtheme, bg: boolean) {
let changedfield = ''
if (bg) {
if (this.itemproject.themebgcolor !== newtheme) {
this.itemproject.themebgcolor = newtheme
changedfield = 'themebgcolor'
}
} else {
if (this.itemproject.themecolor !== newtheme) {
this.itemproject.themecolor = newtheme
changedfield = 'themecolor'
}
}
if (changedfield !== '') {
this.updatedata(changedfield)
this.updateicon()
}
}
public setPriority(newpriority) {
if (this.itemproject.priority !== newpriority) {

2
src/components/projects/SingleProject/SingleProject.vue
View File

@@ -50,7 +50,7 @@
icon="menu">
<q-menu ref="popmenu" self="top right">
<SubMenusProj :menuPopupProj="menuPopupProj" :itemproject="itemproject" @clickMenu="clickMenu"
@setPriority="setPriority"></SubMenusProj>
@selectSubMenu="selectSubMenu"></SubMenusProj>
</q-menu>
</q-btn>
</div>

15
src/components/projects/SubMenusProj/SubMenusProj.ts
View File

@@ -2,6 +2,7 @@ import Vue from 'vue'
import { Component, Prop, Watch } from 'vue-property-decorator'
import { tools } from '@src/store/Modules/tools'
import { lists } from '@src/store/Modules/lists'
import { UserStore } from '@store'
import { IProject } from '../../../model/index'
@@ -16,18 +17,21 @@ import { IProject } from '../../../model/index'
})
export default class SubMenusProj extends Vue {
public selectPriority: [] = tools.selectPriority[UserStore.state.lang]
@Prop({ required: false }) public menuPopupProj: any[]
@Prop({ required: false }) public itemproject: IProject
public $q: any
get lists() {
return lists
}
public clickMenu(field) {
this.$emit('clickMenu', field)
}
public setPriority(field) {
this.$emit('setPriority', field)
public selectSubMenu(action, field) {
this.$emit('selectSubMenu', action, field)
}
public KeychangeProgress(e) {
@@ -46,9 +50,4 @@ export default class SubMenusProj extends Vue {
}
}
public create() {
this.selectPriority = tools.selectPriority[UserStore.state.lang]
console.log('CREAZIONE')
}
}

23
src/components/projects/SubMenusProj/SubMenusProj.vue
View File

@@ -1,7 +1,9 @@
<template>
<q-list separator no-border class="todo-menu">
<div v-for="field in menuPopupProj" :key="field.value">
<q-item v-close-popup clickable v-if="(field.value !== 130) && (field.value !== 120)" :icon="field.icon"
<q-item v-close-popup clickable
v-if="(field.arrlista === undefined) && (field.value !== lists.MenuAction.PROGRESS_BAR)"
:icon="field.icon"
@click="clickMenu(field.value)">
<q-item-section avatar>
<q-icon :name="field.icon"/>
@@ -11,11 +13,11 @@
<q-item-label>{{field.label}}</q-item-label>
</q-item-section>
<q-item-section side top v-if="field.value === 101">
<q-item-section side top v-if="field.value === lists.MenuAction.TOGGLE_EXPIRING">
<q-checkbox v-model="itemproject.enableExpiring"/>
</q-item-section>
</q-item>
<q-item clickable v-if="(field.value === 120)" :icon="field.icon"
<q-item clickable v-if="(field.value === lists.MenuAction.PROGRESS_BAR)" :icon="field.icon"
@click="clickMenu(field.value)">
<q-item-section avatar>
<q-icon :name="field.icon"/>
@@ -37,9 +39,10 @@
</div>
</q-item-section>
</q-item>
<q-item clickable v-if="(field.value === 130)">
<q-item clickable
v-if="(field.arrlista !== undefined)">
<q-item-section avatar>
<q-icon name="priority_high" inverted color="primary"/>
<q-icon :name="field.icon" inverted color="primary"/>
</q-item-section>
<q-item-section>{{field.label}}</q-item-section>
@@ -54,14 +57,16 @@
<q-item-section>
<q-list dense>
<q-item clickable v-ripple v-for="fieldprior in selectPriority"
<q-item clickable v-ripple v-for="fieldprior in field.arrlista"
:key="fieldprior.value"
@click="setPriority(fieldprior.value)">
<q-item-section avatar>
@click="selectSubMenu(field.value, fieldprior.value)">
<q-item-section avatar v-if="!!fieldprior.icon">
<q-icon :name="fieldprior.icon" inverted color="primary"/>
</q-item-section>
<q-item-section>
{{fieldprior.label}}
<span :class="`text-`+fieldprior.value">
{{fieldprior.label}}
</span>
</q-item-section>
</q-item>
</q-list>

23
src/components/todos/CTodo/CTodo.ts
View File

@@ -4,6 +4,7 @@ import { Component, Prop, Watch } from 'vue-property-decorator'
import { IDrag, IProject, ITodo, ITodosState } from '../../../model/index'
import { tools } from '../../../store/Modules/tools'
import { lists } from '../../../store/Modules/lists'
import * as ApiTables from '../../../store/Modules/ApiTables'
import { GlobalStore, Todos } from '@store'
@@ -80,7 +81,7 @@ export default class CTodo extends Vue {
public todos_completati: (state: ITodosState, category: string) => ITodo[]
public showTask(field_value) {
return field_value === tools.MenuAction.SHOW_TASK
return field_value === lists.MenuAction.SHOW_TASK
}
public async onEndtodo(itemdragend) {
@@ -176,15 +177,15 @@ export default class CTodo extends Vue {
public async updateitemtodo({ myitem, field }) {
console.log('calling MODIFY updateitemtodo', myitem, field)
const itemdragend: IDrag = {
category: this.categoryAtt,
field,
idelemtochange: myitem._id,
prioritychosen: myitem.priority,
atfirst: false
}
await Todos.actions.swapElems(itemdragend)
// const itemdragend: IDrag = {
// category: this.categoryAtt,
// field,
// idelemtochange: myitem._id,
// prioritychosen: myitem.priority,
// atfirst: false
// }
//
// await Todos.actions.swapElems(itemdragend)
await Todos.actions.modify({ myitem, field })
@@ -218,7 +219,7 @@ export default class CTodo extends Vue {
}
}
if (des) {
console.log('contr', contr)
// console.log('contr', contr)
// @ts-ignore
contr.deselectAndExitEdit()
}

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

@@ -264,7 +264,6 @@ $heightdescr: 20px;
//padding: 2px;
min-width: 100px;
text-align: left;
color: blue !important;
overflow: hidden;
align-items: center;
@@ -272,8 +271,6 @@ $heightdescr: 20px;
vertical-align: middle;
line-height: 120%;
//background-color: #d50000;
//order: 2;
&.hide {

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

@@ -3,6 +3,7 @@ import { Component, Prop, Watch } from 'vue-property-decorator'
import { Projects, UserStore } from '@modules'
import { tools } from '../../../store/Modules/tools'
import { lists } from '../../../store/Modules/lists'
import { ITodo } from '../../../model/index'
@@ -17,7 +18,6 @@ import { CDate } from '../../CDate'
name: 'SingleTodo'
})
export default class SingleTodo extends Vue {
public selectPriority: [] = []
public menuPopupTodo: any[] = []
public iconCompleted: string = ''
public classCompleted: string = ''
@@ -90,6 +90,12 @@ export default class SingleTodo extends Vue {
@Watch('itemtodo.assigned_to_userId') public valueChangedend_assigned_to_userId() {
this.watchupdate('assigned_to_userId')
}
@Watch('itemtodo.themecolor') public valueChangedend_themecolor() {
this.watchupdate('themecolor')
}
@Watch('itemtodo.themebgcolor') public valueChangedend_themebgcolor() {
this.watchupdate('themebgcolor')
}
@Watch('itemtodo.phase') public valueChangedend_phase() {
this.watchupdate('phase')
}
@@ -138,6 +144,9 @@ export default class SingleTodo extends Vue {
this.classDescrEdit += ' titleLista-item'
}
this.classDescr += ' text-' + this.itemtodo.themecolor + ' bg-' + this.itemtodo.themebgcolor
this.classDescrEdit += ' text-' + this.itemtodo.themecolor + ' bg-' + this.itemtodo.themebgcolor
if (this.itemtodo.progress > 100)
this.itemtodo.progress = 100
@@ -197,9 +206,6 @@ export default class SingleTodo extends Vue {
this.updateicon()
this.updateClasses()
this.selectPriority = tools.selectPriority[UserStore.state.lang]
}
public getClassRow() {
@@ -315,7 +321,7 @@ export default class SingleTodo extends Vue {
if (((e.keyCode === 8) || (e.keyCode === 46)) && (this.precDescr === '') && !e.shiftKey) {
e.preventDefault()
this.deselectRiga()
this.clickMenu(tools.MenuAction.DELETE)
this.clickMenu(lists.MenuAction.DELETE)
.then(() => {
this.faiFocus('insertTask', true)
return
@@ -343,7 +349,7 @@ export default class SingleTodo extends Vue {
if (((e.keyCode === 8) || (e.keyCode === 46)) && (this.precDescr === '') && !e.shiftKey) {
e.preventDefault()
this.deselectRiga()
this.clickMenu(tools.MenuAction.DELETE)
this.clickMenu(lists.MenuAction.DELETE)
.then(() => {
this.faiFocus('insertTask', true)
return
@@ -452,18 +458,18 @@ export default class SingleTodo extends Vue {
public async clickMenu(action) {
console.log('click menu: ', action)
if (action === tools.MenuAction.DELETE) {
if (action === lists.MenuAction.DELETE) {
return await this.askConfirmDelete()
} else if (action === tools.MenuAction.TOGGLE_EXPIRING) {
} else if (action === lists.MenuAction.TOGGLE_EXPIRING) {
return await this.enableExpiring()
} else if (action === tools.MenuAction.COMPLETED) {
} else if (action === lists.MenuAction.COMPLETED) {
return await this.setCompleted()
} else if (action === tools.MenuAction.PROGRESS_BAR) {
} else if (action === lists.MenuAction.PROGRESS_BAR) {
return await this.updatedata('progress')
} else if (action === tools.MenuAction.CUT) {
} else if (action === lists.MenuAction.CUT) {
const myaction = {
table: tools.todos,
type: tools.MenuAction.CUT,
type: lists.MenuAction.CUT,
_id: this.itemtodo._id,
cat: this.itemtodo.category
}
@@ -474,6 +480,38 @@ export default class SingleTodo extends Vue {
}
public selectSubMenu(action, elem) {
if (action === lists.MenuAction.PRIORITY) {
this.setPriority(elem)
} else if (action === lists.MenuAction.THEME) {
this.setThemeColor(elem, false)
} else if (action === lists.MenuAction.THEMEBG) {
this.setThemeColor(elem, true)
}
}
public setThemeColor(newtheme, bg: boolean) {
let changedfield = ''
if (bg){
if (this.itemtodo.themebgcolor !== newtheme) {
this.itemtodo.themebgcolor = newtheme
changedfield = 'themebgcolor'
}
}else {
if (this.itemtodo.themecolor !== newtheme) {
this.itemtodo.themecolor = newtheme
changedfield = 'themecolor'
}
}
if (changedfield !== '') {
this.updatedata(changedfield)
this.updateicon()
}
}
public setPriority(newpriority) {
if (this.itemtodo.priority !== newpriority) {

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

@@ -72,7 +72,7 @@
icon="menu">
<q-menu v-if="CanIModifyTodo" ref="popmenu" self="top right">
<SubMenus :menuPopupTodo="menuPopupTodo" :itemtodo="itemtodo" @clickMenu="clickMenu"
@setPriority="setPriority"></SubMenus>
@selectSubMenu="selectSubMenu"></SubMenus>
</q-menu>
</q-btn>

15
src/components/todos/SubMenus/SubMenus.ts
View File

@@ -2,6 +2,7 @@ import Vue from 'vue'
import { Component, Prop, Watch } from 'vue-property-decorator'
import { tools } from '@src/store/Modules/tools'
import { lists } from '@src/store/Modules/lists'
import { UserStore } from '@store'
import { ITodo } from '../../../model/index'
@@ -16,18 +17,21 @@ import { ITodo } from '../../../model/index'
})
export default class SubMenus extends Vue {
public selectPriority: [] = tools.selectPriority[UserStore.state.lang]
@Prop({ required: false }) public menuPopupTodo: any[]
@Prop({ required: false }) public itemtodo: ITodo
public $q: any
get lists() {
return lists
}
public clickMenu(field) {
this.$emit('clickMenu', field)
}
public setPriority(field) {
this.$emit('setPriority', field)
public selectSubMenu(action, field) {
this.$emit('selectSubMenu', action, field)
}
public KeychangeProgress(e) {
@@ -46,9 +50,4 @@ export default class SubMenus extends Vue {
}
}
public create() {
this.selectPriority = tools.selectPriority[UserStore.state.lang]
console.log('CREAZIONE')
}
}

23
src/components/todos/SubMenus/SubMenus.vue
View File

@@ -1,7 +1,9 @@
<template>
<q-list separator no-border class="todo-menu">
<div v-for="field in menuPopupTodo" :key="field.value">
<q-item v-close-popup clickable v-if="(field.value !== 130) && (field.value !== 120)" :icon="field.icon"
<q-item v-close-popup clickable
v-if="(field.arrlista === undefined) && (field.value !== 120)"
:icon="field.icon"
@click="clickMenu(field.value)">
<q-item-section avatar>
<q-icon :name="field.icon"/>
@@ -11,14 +13,14 @@
<q-item-label>{{field.label}}</q-item-label>
</q-item-section>
<q-item-section side top v-if="field.value === 101">
<q-item-section side top v-if="field.value === lists.MenuAction.TOGGLE_EXPIRING">
<q-checkbox v-model="itemtodo.enableExpiring"/>
</q-item-section>
<q-item-section side v-if="field.value === 110">
<q-item-section side v-if="field.value === lists.MenuAction.COMPLETED">
<q-checkbox v-model="itemtodo.statustodo"/>
</q-item-section>
</q-item>
<q-item clickable v-if="(field.value === 120)" :icon="field.icon"
<q-item clickable v-if="(field.value === lists.MenuAction.PROGRESS_BAR)" :icon="field.icon"
@click="clickMenu(field.value)">
<q-item-section avatar>
<q-icon :name="field.icon"/>
@@ -40,9 +42,10 @@
</div>
</q-item-section>
</q-item>
<q-item clickable v-if="(field.value === 130)">
<q-item clickable
v-if="(field.arrlista !== undefined)">
<q-item-section avatar>
<q-icon name="priority_high" inverted color="primary"/>
<q-icon :name="field.icon" inverted color="primary"/>
</q-item-section>
<q-item-section>{{field.label}}</q-item-section>
@@ -57,14 +60,16 @@
<q-item-section>
<q-list dense>
<q-item clickable v-ripple v-for="fieldprior in selectPriority"
<q-item clickable v-ripple v-for="fieldprior in field.arrlista"
:key="fieldprior.value"
@click="setPriority(fieldprior.value)">
<q-item-section avatar>
@click="selectSubMenu(field.value, fieldprior.value)">
<q-item-section avatar v-if="!!fieldprior.icon">
<q-icon :name="fieldprior.icon" inverted color="primary"/>
</q-item-section>
<q-item-section>
<span :class="`text-`+fieldprior.value">
{{fieldprior.label}}
</span>
</q-item-section>
</q-item>
</q-list>