++ Added "Projects" (step 1)

This commit is contained in:
Paolo Arena
2019-03-22 20:51:42 +01:00
parent 4d32467eb1
commit dbd062636b
12 changed files with 790 additions and 490 deletions

View File

@@ -1,33 +1,53 @@
import Vue from 'vue'
import { Component, Watch } from 'vue-property-decorator'
import { IDrag, ITodo, ITodosState } from '../../../model/index'
import { IDrag, ITodo, IProjectsState } from '../../../model/index'
import { SingleTodo } from '../../../components/todos/SingleTodo/index'
import { tools } from '../../../store/Modules/tools'
import * as ApiTables from '../../../store/Modules/ApiTables'
import { GlobalStore, Todos } from '@store'
import { GlobalStore, Projects } from '@store'
import { UserStore } from '@store'
import { Getter, Mutation, State } from 'vuex-class'
const namespace: string = 'Todos'
import { Getter } from 'vuex-class'
const namespace: string = 'Projects'
@Component({
components: { SingleTodo },
filters: {
capitalize(value) {
if (!value) { return '' }
if (!value) {
return ''
}
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
export default class ProjList extends Vue {
public $q: any
public todotop: string = ''
public todobottom: string = ''
public polling = null
public service: any
public scrollable = true
public categoryAtt: string = ''
public dragname: string = 'second'
public $refs: {
single: SingleTodo[]
}
get tools() {
return tools
}
get showtype() {
return Todos.state.showtype
return Projects.state.showtype
}
set showtype(value) {
@@ -35,8 +55,8 @@ export default class ProjList extends Vue {
GlobalStore.mutations.setShowType(value)
}
get doneTodosCount() {
return Todos.getters.doneTodosCount(this.categoryAtt)
get doneProjectsCount() {
return Projects.getters.doneProjectsCount(this.categoryAtt)
}
get menuPopupConfigTodo() {
@@ -47,73 +67,37 @@ export default class ProjList extends Vue {
return tools.listOptionShowTask[UserStore.state.lang]
}
get TodosCount() {
return Todos.getters.TodosCount(this.categoryAtt)
get ProjectsCount() {
return Projects.getters.ProjectsCount(this.categoryAtt)
}
// Computed:
get reload_fromServer() {
return Todos.state.reload_fromServer
@Getter('projs_dacompletare', { namespace })
public projs_dacompletare: (state: IProjectsState, category: string) => ITodo[]
@Getter('projs_completati', { namespace })
public projs_completati: (state: IProjectsState, category: string) => ITodo[]
@Watch('$route.params.category')
public changecat() {
this.categoryAtt = this.$route.params.category
}
set reload_fromServer(value: number) {
Todos.state.reload_fromServer = value
}
public $q: any
public filter: boolean = false
public title: string = ''
public todotop: string = ''
public todobottom: string = ''
public drag: boolean = true
public listPriorityLabel: number[] = []
public arrPrior: number[] = []
public itemDragStart: any = null
public polling = null
public loadDone: boolean = false
public inddragging: number = -1
public service: any
public actualMaxPosition: number = 15
public scrollable = true
public tmpstrTodos: string = ''
public categoryAtt: string = ''
// public showtype: number = Todos.state.showtype
public $refs: {
single: SingleTodo[]
public getmyid(id) {
return 'row' + id
}
@Getter('projList', { namespace })
public projList: (state: ITodosState, category: string) => ITodo[]
public showTask(field_value) {
return field_value === tools.MenuAction.SHOW_TASK
}
public async onEnd(itemdragend) {
console.log('************ END DRAG: ', itemdragend)
this.inddragging = -1
await Todos.actions.swapElems(itemdragend)
await Projects.actions.swapElems(itemdragend)
}
public created() {
const $service = this.$dragula.$service
$service.options('first',
{
// isContainer: function (el) {
// return el.classList.contains('dragula-container')
// },
moves(el, source, handle, sibling) {
// console.log('moves')
return !el.classList.contains('donotdrag') // elements are always draggable by default
},
accepts(el, target, source, sibling) {
// console.log('accepts dragging '+ el.id + ' from ' + source.id + ' to ' + target.id)
return true // elements can be dropped in any of the `containers` by default
},
invalid(el, handle) {
// console.log('invalid')
return el.classList.contains('donotdrag') // don't prevent any drags from initiating by default
},
direction: 'vertical'
})
tools.dragula_option($service, this.dragname)
$service.eventBus.$on('dragend', (args) => {
const itemdragend: IDrag = {
@@ -126,12 +110,9 @@ export default class ProjList extends Vue {
})
$service.eventBus.$on('drag', (el, source) => {
// mythis.inddragging = mythis.getElementIndex(el)
console.log('+++ DRAG ind=', this.inddragging)
this.scrollable = false
})
$service.eventBus.$on('drop', (el, source) => {
console.log('+++ DROP')
this.scrollable = true
})
@@ -139,40 +120,38 @@ export default class ProjList extends Vue {
}
public mounted() {
// console.log('*** MOUNTED ***')
this.categoryAtt = this.$route.params.category
if (window) {
window.addEventListener('touchmove', (e) => {
// console.log('touchmove')
if (!this.scrollable) {
e.preventDefault()
}
}, { passive: false })
}
}
public setarrPriority() {
this.arrPrior = []
const arr = tools.selectPriority[UserStore.state.lang]
if (arr) {
arr.forEach((rec) => {
this.arrPrior.push(rec.value)
})
}
// console.log('Array PRIOR:', this.arrPrior)
tools.touchmove(this.scrollable)
}
public async load() {
console.log('LOAD TODO....')
this.categoryAtt = this.$route.params.category
// Set last category selected
localStorage.setItem(tools.localStorage.categorySel, this.categoryAtt)
this.checkUpdate_everytime()
}
// Call to check if need to refresh
public checkUpdate_everytime() {
this.polling = setInterval(() => {
this.checkUpdate()
}, 60000)
}
public beforeDestroy() {
clearInterval(this.polling)
}
public insertTodo(atfirst: boolean = false) {
public mydeleteItem(idobj: string) {
// console.log('mydeleteItem', idobj)
return Projects.actions.deleteItem({ cat: this.categoryAtt, idobj })
}
public insertProject(atfirst: boolean = false) {
let descr = this.todobottom.trim()
if (atfirst) {
descr = this.todotop.trim()
@@ -182,43 +161,28 @@ export default class ProjList extends Vue {
return
}
if (UserStore.state.userId === undefined) {
tools.showNotif(this.$q, this.$t('todo.usernotdefined'))
if (!tools.checkIfUserExist(this)) {
return
}
// if (!this.isRegistered()) {
// // Not logged
// tools.showNotif(this.$q, this.$t('user.notregistered'))
// return
// }
const myobj: ITodo = {
descr,
category: this.categoryAtt
}
return Todos.actions.insertTodo({ myobj, atfirst })
.then((data) => {
// empty the field
if (atfirst) {
this.todotop = ''
}
else {
this.todobottom = ''
}
console.log('data', data)
// if (data !== null) {
// tools.showNotif(this.$q, data)
// }
// empty the field
if (atfirst) {
this.todotop = ''
}
else {
this.todobottom = ''
}
})
return Projects.actions.insertProject({ myobj, atfirst })
}
public async updateitem({ myitem, field }) {
console.log('calling MODIFY updateitem', myitem, field)
// Update the others components...
const itemdragend: IDrag = {
category: this.categoryAtt,
@@ -228,9 +192,9 @@ export default class ProjList extends Vue {
atfirst: false
}
await Todos.actions.swapElems(itemdragend)
await Projects.actions.swapElems(itemdragend)
await Todos.actions.modify({ myitem, field })
await Projects.actions.modify({ myitem, field })
}
@@ -256,6 +220,10 @@ export default class ProjList extends Vue {
}
}
public checkUpdate() {
ApiTables.waitAndcheckPendingMsg()
}
private getElementIndex(el: any) {
return [].slice.call(el.parentElement.children).indexOf(el)
}

View File

@@ -56,34 +56,34 @@
<div style="display: none">{{ prior = 0, priorcomplet = false }}</div>
<div>
<!--<q-infinite-scroll :handler="loadMoreTodo" :offset="7">-->
<div class="container" v-dragula="proj_dacompletare(categoryAtt)" drake="second">
<div :id="getmyid(mytodo._id)" :index="index"
v-for="(mytodo, index) in proj_dacompletare(categoryAtt)"
:key="mytodo._id" class="myitemdrag">
<div class="container" v-dragula="projs_dacompletare(categoryAtt)" drake="second">
<div :id="getmyid(myproj._id)" :index="index"
v-for="(myproj, index) in projs_dacompletare(categoryAtt)"
:key="myproj._id" class="myitemdrag">
<div v-if="(prior !== mytodo.priority) && !mytodo.completed"
:class="getTitlePriority(mytodo.priority)">
<label>{{getPriorityByInd(mytodo.priority)}}</label>
<div v-if="(prior !== myproj.priority) && !myproj.completed"
:class="getTitlePriority(myproj.priority)">
<label>{{getPriorityByInd(myproj.priority)}}</label>
</div>
<SingleTodo ref="single" @deleteItem="mydeleteItem(mytodo._id)" @eventupdate="updateitem"
<SingleTodo ref="single" @deleteItem="mydeleteItem(myproj._id)" @eventupdate="updateitem"
@deselectAllRows="deselectAllRows" @onEnd="onEnd"
:itemtodo='mytodo'/>
:itemtodo='myproj'/>
<!--<div :name="`REF${index}`" class="divdrag non-draggato"></div>-->
<div style="display: none">{{ prior = mytodo.priority, priorcomplet = mytodo.completed }}
<div style="display: none">{{ prior = myproj.priority, priorcomplet = myproj.completed }}
</div>
</div>
</div>
<!--</q-infinite-scroll>-->
<q-input v-if="TodosCount > 0" ref="insertTaskBottom" v-model="todobottom"
<q-input v-if="ProjectsCount > 0" ref="insertTaskBottom" v-model="todobottom"
style="margin-left: 6px;"
color="blue-12"
:label="$t('todo.insertbottom')"
:after="[{icon: 'arrow_forward', content: true, handler () {}}]"
v-on:keyup.enter="insertTodo(false)"/>
v-on:keyup.enter="insertProject(false)"/>
<br>