Cleaning Code, moving functions...
This commit is contained in:
Paolo Arena
110
src/views/projects/proj-list/proj-list.scss
Normal file
110
src/views/projects/proj-list/proj-list.scss
Normal file
@@ -0,0 +1,110 @@
|
||||
.flex-container{
|
||||
background-color: rgb(250, 250, 250);
|
||||
padding: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.mycard {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.myitemdrag {
|
||||
padding: 2px;
|
||||
//margin-top: 4px;
|
||||
border-width: 1px 0px 0px 0px;
|
||||
//border: solid 1px #ccc;
|
||||
border-style: solid;
|
||||
border-color: #ccc;
|
||||
transition: all .4s;
|
||||
}
|
||||
|
||||
.titlePriority, .titleCompleted{
|
||||
border-width: 0px 0px 1px 0px;
|
||||
border-style: solid;
|
||||
border-color: #ccc;
|
||||
color:white;
|
||||
}
|
||||
|
||||
.titleCompleted {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.high_priority {
|
||||
background-color: #4caf50;
|
||||
}
|
||||
|
||||
.medium_priority {
|
||||
background-color: #3846af;
|
||||
}
|
||||
|
||||
.low_priority {
|
||||
background-color: #af2218;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.myitemdrag-enter, .myitemdrag-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.drag {
|
||||
//background-color: green;
|
||||
}
|
||||
|
||||
.dragArea {
|
||||
min-height: 10px;
|
||||
}
|
||||
|
||||
.divtitlecat {
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.categorytitle{
|
||||
color:blue;
|
||||
background-color: lightblue;
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.titleSubMenu {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 350;
|
||||
}
|
||||
|
||||
.draggatodraggato2 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.non-draggato {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
.divdrag{
|
||||
animation: fadeIn 0.2s ease-in 1 forwards;
|
||||
min-height: 50px;
|
||||
background-color: #9f9f9f;
|
||||
}
|
||||
|
||||
.menuInputCompleted > div:nth-child(2) > div > input {
|
||||
min-width: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
268
src/views/projects/proj-list/proj-list.ts
Normal file
268
src/views/projects/proj-list/proj-list.ts
Normal file
@@ -0,0 +1,268 @@
|
||||
import Vue from 'vue'
|
||||
import { Component, Watch } from 'vue-property-decorator'
|
||||
|
||||
import { IDrag, ITodo, ITodosState } 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 { UserStore } from '@store'
|
||||
|
||||
import { Getter, Mutation, State } from 'vuex-class'
|
||||
const namespace: string = 'Todos'
|
||||
|
||||
@Component({
|
||||
|
||||
components: { SingleTodo },
|
||||
filters: {
|
||||
capitalize(value) {
|
||||
if (!value) { return '' }
|
||||
value = value.toString()
|
||||
return value.charAt(0).toUpperCase() + value.slice(1)
|
||||
}
|
||||
}
|
||||
})
|
||||
export default class ProjList extends Vue {
|
||||
|
||||
get showtype() {
|
||||
return Todos.state.showtype
|
||||
}
|
||||
|
||||
set showtype(value) {
|
||||
console.log('showtype', value)
|
||||
GlobalStore.mutations.setShowType(value)
|
||||
}
|
||||
|
||||
get doneTodosCount() {
|
||||
return Todos.getters.doneTodosCount(this.categoryAtt)
|
||||
}
|
||||
|
||||
get menuPopupConfigTodo() {
|
||||
return tools.menuPopupConfigTodo[UserStore.state.lang]
|
||||
}
|
||||
|
||||
get listOptionShowTask() {
|
||||
return tools.listOptionShowTask[UserStore.state.lang]
|
||||
}
|
||||
|
||||
get TodosCount() {
|
||||
return Todos.getters.TodosCount(this.categoryAtt)
|
||||
}
|
||||
|
||||
// Computed:
|
||||
get reload_fromServer() {
|
||||
return Todos.state.reload_fromServer
|
||||
}
|
||||
|
||||
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 startpos: number = 0
|
||||
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[]
|
||||
}
|
||||
|
||||
@Getter('projList', { namespace })
|
||||
public projList: (state: ITodosState, category: string) => ITodo[]
|
||||
|
||||
public async onEnd(itemdragend) {
|
||||
console.log('************ END DRAG: ', itemdragend)
|
||||
this.inddragging = -1
|
||||
|
||||
await Todos.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'
|
||||
})
|
||||
$service.eventBus.$on('dragend', (args) => {
|
||||
|
||||
const itemdragend: IDrag = {
|
||||
category: this.categoryAtt,
|
||||
newIndex: this.getElementIndex(args.el),
|
||||
oldIndex: this.getElementOldIndex(args.el)
|
||||
}
|
||||
|
||||
this.onEnd(itemdragend)
|
||||
})
|
||||
|
||||
$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
|
||||
})
|
||||
|
||||
this.load()
|
||||
}
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
public async load() {
|
||||
|
||||
}
|
||||
|
||||
public beforeDestroy() {
|
||||
|
||||
}
|
||||
|
||||
public insertTodo(atfirst: boolean = false) {
|
||||
let descr = this.todobottom.trim()
|
||||
if (atfirst) {
|
||||
descr = this.todotop.trim()
|
||||
}
|
||||
|
||||
if (descr === '') {
|
||||
return
|
||||
}
|
||||
|
||||
if (UserStore.state.userId === undefined) {
|
||||
tools.showNotif(this.$q, this.$t('todo.usernotdefined'))
|
||||
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) => {
|
||||
|
||||
console.log('data', data)
|
||||
// if (data !== null) {
|
||||
// tools.showNotif(this.$q, data)
|
||||
// }
|
||||
|
||||
// empty the field
|
||||
if (atfirst) {
|
||||
this.todotop = ''
|
||||
}
|
||||
else {
|
||||
this.todobottom = ''
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
public async updateitem({ myitem, field }) {
|
||||
console.log('calling MODIFY updateitem', myitem, field)
|
||||
// Update the others components...
|
||||
|
||||
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 })
|
||||
|
||||
}
|
||||
|
||||
public deselectAllRows(item: ITodo, check, onlythis: boolean = false) {
|
||||
// console.log('deselectAllRows : ', item)
|
||||
|
||||
for (let i = 0; i < this.$refs.single.length; i++) {
|
||||
|
||||
const contr = this.$refs.single[i] as SingleTodo
|
||||
// @ts-ignore
|
||||
const id = contr.itemtodo._id
|
||||
// Don't deselect the actual clicked!
|
||||
let des = false
|
||||
if (onlythis) {
|
||||
des = item._id === id
|
||||
} else {
|
||||
des = ((check && (item._id !== id)) || (!check))
|
||||
}
|
||||
if (des) {
|
||||
// @ts-ignore
|
||||
contr.deselectAndExitEdit()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private getElementIndex(el: any) {
|
||||
return [].slice.call(el.parentElement.children).indexOf(el)
|
||||
}
|
||||
|
||||
private getElementOldIndex(el: any) {
|
||||
return parseInt(el.attributes.index.value, 10)
|
||||
}
|
||||
|
||||
}
|
||||
100
src/views/projects/proj-list/proj-list.vue
Normal file
100
src/views/projects/proj-list/proj-list.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<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 menuPopupConfigTodo" :key="field.value">
|
||||
<q-item-section avatar>
|
||||
<q-icon :name="field.icon"/>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>{{field.label}}</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 side :icon="field.icon">
|
||||
|
||||
<q-item-section>
|
||||
<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-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="todos_dacompletare(categoryAtt)" drake="second">
|
||||
<div :id="getmyid(mytodo._id)" :index="index"
|
||||
v-for="(mytodo, index) in todos_dacompletare(categoryAtt)"
|
||||
:key="mytodo._id" class="myitemdrag">
|
||||
|
||||
<div v-if="(prior !== mytodo.priority) && !mytodo.completed"
|
||||
:class="getTitlePriority(mytodo.priority)">
|
||||
<label>{{getPriorityByInd(mytodo.priority)}}</label>
|
||||
</div>
|
||||
<SingleTodo ref="single" @deleteItem="mydeleteItem(mytodo._id)" @eventupdate="updateitem"
|
||||
@deselectAllRows="deselectAllRows" @onEnd="onEnd"
|
||||
:itemtodo='mytodo'/>
|
||||
|
||||
<!--<div :name="`REF${index}`" class="divdrag non-draggato"></div>-->
|
||||
|
||||
<div style="display: none">{{ prior = mytodo.priority, priorcomplet = mytodo.completed }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--</q-infinite-scroll>-->
|
||||
|
||||
|
||||
<q-input v-if="TodosCount > 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)"/>
|
||||
|
||||
<br>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</q-page>
|
||||
|
||||
|
||||
</template>
|
||||
<script lang="ts" src="./proj-list.ts">
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './proj-list';
|
||||
</style>
|
||||
Reference in New Issue
Block a user