- added fields: longdescr, hoursworked, hoursplanned
This commit is contained in:
Paolo Arena
@@ -1,6 +1,11 @@
|
||||
.clMain {
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
.flex-container{
|
||||
background-color: rgb(250, 250, 250);
|
||||
padding: 2px;
|
||||
padding: 4px;
|
||||
margin: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
@@ -60,10 +65,6 @@
|
||||
min-height: 10px;
|
||||
}
|
||||
|
||||
.divtitlecat {
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.categorytitle{
|
||||
color:blue;
|
||||
@@ -74,6 +75,40 @@
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.projecttitle{
|
||||
color: white;
|
||||
// color:blue;
|
||||
background-color: rgba(65, 152, 239, 0.6);
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.itemdescr{
|
||||
font-size: 1rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.progress-item {
|
||||
margin: 1px;
|
||||
padding: 2px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
flex: 1;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.progrbar-item {
|
||||
//height: 10px
|
||||
padding-top: 7px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.flex-icon{
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.titleSubMenu {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 350;
|
||||
@@ -108,3 +143,11 @@
|
||||
min-width: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.percProgress {
|
||||
padding-top: 3px;
|
||||
color: #888;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
//line-height: $heightitem;
|
||||
}
|
||||
|
||||
@@ -12,11 +12,14 @@ import { UserStore } from '@store'
|
||||
|
||||
import { Getter } from 'vuex-class'
|
||||
|
||||
import { Screen } from 'quasar'
|
||||
import { CProgress } from '@src/components/CProgress'
|
||||
|
||||
const namespace: string = 'Projects'
|
||||
|
||||
@Component({
|
||||
|
||||
components: { SingleProject },
|
||||
components: { SingleProject, CProgress },
|
||||
filters: {
|
||||
capitalize(value) {
|
||||
if (!value) {
|
||||
@@ -34,13 +37,24 @@ export default class ProjList extends Vue {
|
||||
public polling = null
|
||||
public service: any
|
||||
public scrollable = true
|
||||
public categoryAtt: string = tools.FIRST_PROJ
|
||||
public dragname: string = 'second'
|
||||
public idProjAtt: string = tools.FIRST_PROJ
|
||||
public idProjParentAtt: string = ''
|
||||
public splitterModel = 50 // start at 50%
|
||||
public itemproj: IProject = null
|
||||
public idsel: string = ''
|
||||
public itemsel: IProject = Projects.getters.getRecordEmpty()
|
||||
public colProgress: string = 'blue'
|
||||
public percProgress: string = 'percProgress'
|
||||
|
||||
public $refs: {
|
||||
single: SingleProject[]
|
||||
}
|
||||
|
||||
get getrouteup() {
|
||||
return '/projects/' + this.idProjParentAtt
|
||||
}
|
||||
|
||||
get tools() {
|
||||
return tools
|
||||
}
|
||||
@@ -54,10 +68,6 @@ export default class ProjList extends Vue {
|
||||
GlobalStore.mutations.setShowType(value)
|
||||
}
|
||||
|
||||
get doneProjectsCount() {
|
||||
return Projects.getters.doneProjectsCount(this.categoryAtt)
|
||||
}
|
||||
|
||||
get menuPopupConfigProject() {
|
||||
return tools.menuPopupConfigProject[UserStore.state.lang]
|
||||
}
|
||||
@@ -66,19 +76,30 @@ export default class ProjList extends Vue {
|
||||
return tools.listOptionShowTask[UserStore.state.lang]
|
||||
}
|
||||
|
||||
get ProjectsCount() {
|
||||
return Projects.getters.ProjectsCount(this.categoryAtt)
|
||||
get descrParent() {
|
||||
return Projects.getters.getDescrById(this.idProjParentAtt)
|
||||
}
|
||||
|
||||
get descrProject() {
|
||||
return Projects.getters.getDescrById(this.idProjAtt)
|
||||
}
|
||||
|
||||
// get ProjectsCount() {
|
||||
// return Projects.getters.ProjectsCount(this.idProjParentAtt)
|
||||
// }
|
||||
|
||||
@Getter('items_dacompletare', { namespace })
|
||||
public items_dacompletare: (state: IProjectsState, category: string) => IProject[]
|
||||
public items_dacompletare: (state: IProjectsState, id_parent: string) => IProject[]
|
||||
|
||||
@Getter('projs_completati', { namespace })
|
||||
public projs_completati: (state: IProjectsState, category: string) => IProject[]
|
||||
@Watch('$route.params.idProj')
|
||||
public changeparent() {
|
||||
this.idProjAtt = this.$route.params.idProj
|
||||
this.idProjParentAtt = Projects.getters.getParentById(this.idProjAtt)
|
||||
}
|
||||
|
||||
@Watch('$route.params.category')
|
||||
public changecat() {
|
||||
this.categoryAtt = this.$route.params.category
|
||||
@Watch('itemsel.progressCalc')
|
||||
public changeprogress() {
|
||||
this.updateclasses()
|
||||
}
|
||||
|
||||
public getmyid(id) {
|
||||
@@ -97,10 +118,13 @@ export default class ProjList extends Vue {
|
||||
const $service = this.$dragula.$service
|
||||
tools.dragula_option($service, this.dragname)
|
||||
|
||||
this.updateclasses()
|
||||
|
||||
$service.eventBus.$on('dragend', (args) => {
|
||||
|
||||
const itemdragend: IDrag = {
|
||||
category: this.categoryAtt,
|
||||
field: '',
|
||||
id_proj: this.idProjAtt,
|
||||
newIndex: this.getElementIndex(args.el),
|
||||
oldIndex: this.getElementOldIndex(args.el)
|
||||
}
|
||||
@@ -120,19 +144,32 @@ export default class ProjList extends Vue {
|
||||
}
|
||||
|
||||
public mounted() {
|
||||
this.categoryAtt = this.$route.params.category
|
||||
|
||||
console.log('Screen.width', Screen.width)
|
||||
|
||||
if (Screen.width < 400) {
|
||||
this.splitterModel = 100
|
||||
} else {
|
||||
this.splitterModel = 50
|
||||
}
|
||||
this.idProjAtt = this.$route.params.idProj
|
||||
this.idProjParentAtt = Projects.getters.getParentById(this.idProjAtt)
|
||||
|
||||
tools.touchmove(this.scrollable)
|
||||
}
|
||||
|
||||
public async load() {
|
||||
console.log('LOAD PROJECTS....')
|
||||
if (!!this.$route.params.category) {
|
||||
this.categoryAtt = this.$route.params.category
|
||||
if (!!this.$route.params.idProj) {
|
||||
this.idProjAtt = this.$route.params.idProj
|
||||
this.idProjParentAtt = Projects.getters.getParentById(this.idProjAtt)
|
||||
this.itemproj = Projects.getters.getRecordById(this.idProjAtt)
|
||||
}
|
||||
|
||||
// console.log('this.idProjAtt', this.idProjAtt, this.idProjParentAtt)
|
||||
|
||||
// Set last category selected
|
||||
localStorage.setItem(tools.localStorage.categorySel, this.categoryAtt)
|
||||
// localStorage.setItem(tools.localStorage.categorySel, this.categoryAtt)
|
||||
|
||||
this.checkUpdate_everytime()
|
||||
}
|
||||
@@ -150,7 +187,7 @@ export default class ProjList extends Vue {
|
||||
|
||||
public mydeleteItem(idobj: string) {
|
||||
// console.log('mydeleteItem', idobj)
|
||||
return Projects.actions.deleteItem({ cat: this.categoryAtt, idobj })
|
||||
return Projects.actions.deleteItem({ idobj })
|
||||
}
|
||||
|
||||
public dbInsert(atfirst: boolean = false) {
|
||||
@@ -166,7 +203,7 @@ export default class ProjList extends Vue {
|
||||
|
||||
const myobj: IProject = {
|
||||
descr,
|
||||
category: this.categoryAtt
|
||||
id_parent: this.idProjAtt
|
||||
}
|
||||
|
||||
this.projbottom = ''
|
||||
@@ -174,18 +211,22 @@ export default class ProjList extends Vue {
|
||||
return Projects.actions.dbInsert({ myobj, atfirst })
|
||||
}
|
||||
|
||||
public setidsel(id: string) {
|
||||
this.idsel = id
|
||||
this.itemsel = Projects.getters.getRecordById(this.idsel)
|
||||
}
|
||||
|
||||
public async updateitem({ myitem, field }) {
|
||||
console.log('calling MODIFY updateitem', myitem, field)
|
||||
|
||||
const itemdragend: IDrag = {
|
||||
category: this.categoryAtt,
|
||||
id_proj: this.idProjAtt,
|
||||
field,
|
||||
idelemtochange: myitem._id,
|
||||
prioritychosen: myitem.priority,
|
||||
atfirst: false
|
||||
}
|
||||
|
||||
await Projects.actions.swapElems(itemdragend)
|
||||
// await Projects.actions.swapElems(itemdragend)
|
||||
|
||||
await Projects.actions.modify({ myitem, field })
|
||||
|
||||
@@ -213,6 +254,10 @@ export default class ProjList extends Vue {
|
||||
}
|
||||
}
|
||||
|
||||
public updateclasses() {
|
||||
this.colProgress = tools.getProgressColor(this.itemsel.progressCalc)
|
||||
}
|
||||
|
||||
public checkUpdate() {
|
||||
ApiTables.waitAndcheckPendingMsg()
|
||||
}
|
||||
@@ -225,4 +270,11 @@ export default class ProjList extends Vue {
|
||||
return parseInt(el.attributes.index.value, 10)
|
||||
}
|
||||
|
||||
get getCalcHoursWorked() {
|
||||
let myperc = Math.round(this.itemsel.hoursworked / this.itemsel.hoursplanned * 100)
|
||||
|
||||
return myperc
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,89 +1,155 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="panel">
|
||||
<div class="divtitlecat">
|
||||
<div class="flex-container">
|
||||
<div class="flex-item categorytitle">{{categoryAtt | capitalize}}</div>
|
||||
<div class="flex-item">
|
||||
<q-btn push
|
||||
icon="settings">
|
||||
<q-menu id="popconfig" self="top right">
|
||||
<q-list link separator no-border class="todo-menu">
|
||||
<q-item clickable v-for="field in menuPopupConfigProject" :key="field.value">
|
||||
<q-item-section avatar>
|
||||
<q-icon :name="field.icon"/>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>{{field.label}}</q-item-section>
|
||||
<q-splitter
|
||||
v-model="splitterModel"
|
||||
:limits="[50, 100]"
|
||||
>
|
||||
|
||||
<q-item-section side v-if="showTask(field.value)">
|
||||
<q-item-section side>
|
||||
<q-icon name="keyboard_arrow_right"/>
|
||||
</q-item-section>
|
||||
<template v-slot:before class="clMain">
|
||||
<div>
|
||||
<div class="divtitlecat clMain">
|
||||
<div class="flex-container clMain">
|
||||
<q-btn v-if="!!idProjParentAtt" size="sm" push color="secondary" round
|
||||
icon="arrow_back"
|
||||
:to="getrouteup"/>
|
||||
<div class="flex-item categorytitle shadow-4">{{descrProject | capitalize}}</div>
|
||||
<div class="flex-item">
|
||||
<q-btn push
|
||||
size="sm"
|
||||
icon="settings">
|
||||
<q-menu id="popconfig" self="top right">
|
||||
<q-list link separator no-border class="todo-menu">
|
||||
<q-item clickable v-for="field in menuPopupConfigProject"
|
||||
:key="field.value">
|
||||
<q-item-section avatar>
|
||||
<q-icon :name="field.icon"/>
|
||||
</q-item-section>
|
||||
|
||||
<q-menu auto-close anchor="bottom middle" self="top middle">
|
||||
<q-list dense>
|
||||
<q-item side :icon="field.icon">
|
||||
<q-item-section>{{field.label}}</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
<q-item-section side v-if="showTask(field.value)">
|
||||
<q-item-section side>
|
||||
<q-icon name="keyboard_arrow_right"/>
|
||||
</q-item-section>
|
||||
|
||||
<q-menu auto-close anchor="bottom middle" self="top middle">
|
||||
<q-list dense>
|
||||
<q-item clickable v-ripple
|
||||
v-for="opt in listOptionShowTask"
|
||||
:key="opt.value"
|
||||
@click="showtype = opt.value">
|
||||
<q-item-section avatar>
|
||||
<q-icon :name="opt.icon" inverted
|
||||
color="primary"/>
|
||||
</q-item-section>
|
||||
<q-item side :icon="field.icon">
|
||||
|
||||
<q-item-section>
|
||||
{{opt.label}}
|
||||
<q-list dense>
|
||||
<q-item clickable v-ripple
|
||||
v-for="opt in listOptionShowTask"
|
||||
:key="opt.value"
|
||||
@click="showtype = opt.value">
|
||||
<q-item-section avatar>
|
||||
<q-icon :name="opt.icon"
|
||||
inverted
|
||||
color="primary"/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
{{opt.label}}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-menu>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: none">{{ prior = 0, priorcomplet = false }}</div>
|
||||
<div>
|
||||
<!--<q-infinite-scroll :handler="loadMoreTodo" :offset="7">-->
|
||||
<div class="container" v-dragula="items_dacompletare(categoryAtt)" drake="second">
|
||||
<div :id="getmyid(myproj._id)" :index="index"
|
||||
v-for="(myproj, index) in items_dacompletare(categoryAtt)"
|
||||
:key="myproj._id" class="myitemdrag">
|
||||
<div style="display: none">{{ prior = 0, priorcomplet = false }}</div>
|
||||
<div>
|
||||
<!--<q-infinite-scroll :handler="loadMoreTodo" :offset="7">-->
|
||||
<div class="container" v-dragula="items_dacompletare(idProjAtt)" drake="second">
|
||||
<div :id="getmyid(myproj._id)" :index="index"
|
||||
v-for="(myproj, index) in items_dacompletare(idProjAtt)"
|
||||
:key="myproj._id" class="myitemdrag">
|
||||
|
||||
<SingleProject ref="single" @deleteItem="mydeleteItem(myproj._id)" @eventupdate="updateitem"
|
||||
@deselectAllRows="deselectAllRows" @onEnd="onEnd2"
|
||||
:itemproject='myproj'/>
|
||||
<SingleProject ref="single" @deleteItem="mydeleteItem(myproj._id)"
|
||||
@eventupdate="updateitem"
|
||||
@idsel="setidsel"
|
||||
@deselectAllRows="deselectAllRows" @onEnd="onEnd2"
|
||||
:itemproject='myproj'/>
|
||||
|
||||
<!--<div :name="`REF${index}`" class="divdrag non-draggato"></div>-->
|
||||
</div>
|
||||
</div>
|
||||
<!--</q-infinite-scroll>-->
|
||||
|
||||
<div style="display: none">{{ prior = myproj.priority, priorcomplet = myproj.completed }}
|
||||
|
||||
<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(false)"/>
|
||||
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--</q-infinite-scroll>-->
|
||||
</template>
|
||||
<template v-if="!!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"/>
|
||||
<div class="flex-item projecttitle shadow-4">
|
||||
{{itemsel.descr}}
|
||||
</div>
|
||||
</div>
|
||||
<q-separator/>
|
||||
<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="itemsel.longdescr"
|
||||
:label="$t('proj.longdescr')"
|
||||
outlined
|
||||
debounce="500"
|
||||
autogrow
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-container clMain">
|
||||
<q-icon class="flex-item flex-icon" name="work_outline"/>
|
||||
<div class="flex-item itemdescr">
|
||||
<q-input
|
||||
ref="input"
|
||||
v-model="itemsel.hoursworked"
|
||||
type="number"
|
||||
rounded outlined
|
||||
:label="$t('proj.hoursworked')"
|
||||
debounce="500"
|
||||
/>
|
||||
<CProgress descr="" :progressval="getCalcHoursWorked"></CProgress>
|
||||
|
||||
<q-input ref="insertTaskBottom" 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(false)"/>
|
||||
|
||||
<br>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<q-icon class="flex-item flex-icon" name="watch_later"/>
|
||||
<div class="flex-item itemdescr content-center">
|
||||
<q-input
|
||||
ref="input"
|
||||
type="number"
|
||||
v-model="itemsel.hoursplanned"
|
||||
rounded outlined
|
||||
:label="$t('proj.hoursplanned')"
|
||||
debounce="500"
|
||||
/>
|
||||
<CProgress :descr="$t('proj.progresstask')" :progressval="itemsel.progressCalc"></CProgress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</q-splitter>
|
||||
</div>
|
||||
</q-page>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user