Added and linked todo list to the project list
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user