Added and linked todo list to the project list

This commit is contained in:
Paolo Arena
2019-04-03 02:48:05 +02:00
parent 7cacf5c6ea
commit fe600f40a6
34 changed files with 493 additions and 153 deletions

View File

@@ -2,9 +2,9 @@
min-width: 350px;
}
.flex-container{
.flex-container, .flex-container_col{
background-color: rgb(250, 250, 250);
padding: 4px;
padding: 2px 4px 2px 4px;
margin: 2px;
display: flex;
align-items: center;
@@ -12,6 +12,9 @@
justify-content: space-between;
}
.flex-container_col {
flex-direction: column;
}
.mycard {
@@ -113,6 +116,7 @@
.flex-icon{
padding: 3px;
font-size: 1.5rem;
}
.titleSubMenu {

View File

@@ -1,25 +1,26 @@
import Vue from 'vue'
import { Component, Watch } from 'vue-property-decorator'
import { IDrag, IProject, IProjectsState } from '../../../model/index'
import { IDrag, IProject, IProjectsState, ITodo } from '../../../model/index'
import { SingleProject } from '../../../components/projects/SingleProject/index'
import { CTodo } from '../../../components/todos/CTodo'
import { tools } from '../../../store/Modules/tools'
import * as ApiTables from '../../../store/Modules/ApiTables'
import { GlobalStore, Projects } from '@store'
import { GlobalStore, Projects, Todos } from '@store'
import { UserStore } from '@store'
import { Getter } from 'vuex-class'
import { Screen } from 'quasar'
import { CProgress } from '@src/components/CProgress'
import { CProgress } from '@components'
const namespace: string = 'Projects'
@Component({
components: { SingleProject, CProgress },
components: { SingleProject, CProgress, CTodo },
filters: {
capitalize(value) {
if (!value) {
@@ -44,11 +45,14 @@ export default class ProjList extends Vue {
public itemproj: IProject = null
public idsel: string = ''
public itemsel: IProject = Projects.getters.getRecordEmpty()
public itemtodosel: ITodo = Todos.getters.getRecordEmpty()
public whatisSel: number = 0
public colProgress: string = 'blue'
public percProgress: string = 'percProgress'
public $refs: {
singleproject: SingleProject[]
singleproject: SingleProject[],
ctodo: CTodo
}
get getrouteup() {
@@ -210,8 +214,9 @@ export default class ProjList extends Vue {
console.log('this.$refs.singleproject', this.$refs.singleproject)
for (const elem of this.$refs.singleproject) {
// @ts-ignore
if (elem.itemproject._id === id)
if (elem.itemproject._id === id) {
return elem
}
}
}
@@ -232,8 +237,13 @@ export default class ProjList extends Vue {
public setidsel(id: string) {
this.idsel = id
this.whatisSel = tools.WHAT_PROJECT
this.itemsel = Projects.getters.getRecordById(this.idsel)
}
public setitemsel(item: ITodo) {
this.whatisSel = tools.WHAT_TODO
this.itemtodosel = item
}
public async updateitemproj({ myitem, field }) {
console.log('calling MODIFY updateitemproj', myitem, field)
@@ -251,10 +261,25 @@ export default class ProjList extends Vue {
}
public deselectAllRowsproj(item: IProject, check, onlythis: boolean = false) {
// console.log('deselectAllRowsproj : ', item)
public deselectAllRowstodo(item: ITodo, check, onlythis: boolean = false) {
console.log('PROJ-LIST deselectAllRowstodo : ', item)
for (let i = 0; i < this.$refs.singleproject.length; i++) {
// @ts-ignore
for (const i in this.$refs.ctodo.$refs.single) {
// @ts-ignore
const contr = this.$refs.ctodo.$refs.single[i] as SingleTodo
const des = !check
if (des) {
// @ts-ignore
contr.deselectAndExitEdit()
}
}
}
public deselectAllRowsproj(item: IProject, check, onlythis: boolean = false) {
console.log('deselectAllRowsproj: ', item)
for (const i in this.$refs.singleproject) {
const contr = this.$refs.singleproject[i] as SingleProject
// @ts-ignore
@@ -264,7 +289,11 @@ export default class ProjList extends Vue {
if (onlythis) {
des = item._id === id
} else {
des = ((check && (item._id !== id)) || (!check))
if (!!item) {
des = ((check && (item._id !== id)) || (!check))
} else {
des = !check
}
}
if (des) {
// @ts-ignore
@@ -290,9 +319,10 @@ export default class ProjList extends Vue {
}
get getCalcHoursWorked() {
if (this.itemsel.hoursplanned <= 0)
if (this.itemsel.hoursplanned <= 0) {
return 0
let myperc = Math.round(this.itemsel.hoursworked / this.itemsel.hoursplanned * 100)
}
const myperc = Math.round(this.itemsel.hoursworked / this.itemsel.hoursplanned * 100)
return myperc

View File

@@ -84,30 +84,23 @@
<SingleProject ref="singleproject" @deleteItemproj="mydeleteitemproj(myproj._id)"
@eventupdateproj="updateitemproj"
@idsel="setidsel"
@deselectAllRowsproj="deselectAllRowsproj" @onEnd="onEndproj"
@deselectAllRowsproj="deselectAllRowsproj" @deselectAllRowstodo="deselectAllRowstodo" @onEnd="onEndproj"
:itemproject='myproj'>
</SingleProject>
</div>
</div>
<!--</q-infinite-scroll>-->
<q-input ref="insertProjectBottom" v-model="projbottom"
style="margin-left: 6px;"
color="blue-12"
:label="$t('todo.insertbottom')"
:after="[{icon: 'arrow_forward', content: true, handler () {}}]"
v-on:keyup.enter="dbInsert()">
</q-input>
<br>
</div>
<q-separator></q-separator>
<CTodo ref="ctodo" @setitemsel="setitemsel" :categoryAtt="idProjAtt" title="" backcolor="white" forecolor="black" :viewtaskTop="false" @deselectAllRowsproj="deselectAllRowsproj" @deselectAllRowstodo="deselectAllRowstodo"
>
</CTodo>
</div>
</template>
<template v-if="!!itemsel.descr" v-slot:after>
<template v-if="(whatisSel === tools.WHAT_PROJECT) && (!!itemsel.descr)" v-slot:after>
<div class="q-pa-xs clMain">
<div class="flex-container clMain">
<q-icon class="flex-item flex-icon" name="format_align_center"/>
@@ -142,7 +135,6 @@
debounce="500"
/>
<CProgress descr="" :progressval="getCalcHoursWorked"></CProgress>
</div>
<q-icon class="flex-item flex-icon" name="watch_later"/>
<div class="flex-item itemdata content-center">
@@ -159,11 +151,11 @@
</div>
</div>
<div class="flex-container clMain">
<div style="margin: 10px;"></div>
<q-icon class="flex-item flex-icon" name="developer_mode"/>
<div class="flex-item itemdata">
<q-input v-model="itemsel.begin_development" mask="date" :hint="$t('proj.begin_development')">
<q-input dense v-model="itemsel.begin_development" mask="date" :hint="$t('proj.begin_development')">
<!--<span class="data_string">{{tools.getstrDate(itemsel.begin_development)}}</span>-->
<q-icon name="event" class="cursor-pointer">
<q-icon name="event" class="cursor-pointer" style="font-size: 1.5rem;">
<q-popup-proxy>
<q-date v-model="itemsel.begin_development" today-btn/>
</q-popup-proxy>
@@ -172,9 +164,9 @@
</div>
<div style="margin: 10px;"></div>
<div class="flex-item itemdata">
<q-input v-model="itemsel.begin_test" mask="date" :hint="$t('proj.begin_test')">
<q-input dense v-model="itemsel.begin_test" mask="date" :hint="$t('proj.begin_test')">
<!--<span class="data_string">{{tools.getstrDate(itemsel.begin_development)}}</span>-->
<q-icon name="event" class="cursor-pointer">
<q-icon name="event" class="cursor-pointer" style="font-size: 1.5rem;">
<q-popup-proxy>
<q-date v-model="itemsel.begin_test" today-btn/>
</q-popup-proxy>
@@ -184,6 +176,24 @@
</div>
</div>
</template>
<template v-else-if="(whatisSel === tools.WHAT_TODO) && (!!itemtodosel.descr)" v-slot:after>
<div class="q-pa-xs clMain">
<div class="flex-container clMain">
<q-icon class="flex-item flex-icon" name="border_color"/>
<div class="flex-item itemdescr">
<q-input
ref="input"
v-model="itemtodosel.descr"
:label="$t('proj.longdescr')"
outlined
debounce="500"
autogrow
/>
</div>
</div>
</div>
</template>
</q-splitter>
</div>
</q-page>