surya/freeplanet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cleaning Code, moving functions...

Browse Source
This commit is contained in:
Paolo Arena
2019-03-22 15:32:32 +01:00
parent a2c1a90050
commit dd695a7ce5
56 changed files with 512 additions and 533 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/todos/SingleTodo/SingleTodo.scss
View File

@@ -48,7 +48,7 @@ $heightdescr: 20px;
border-width: 1px 0px 1px 0px;
border-style: solid;
border-color: rgba(49, 68, 240, 0.6);
background-color: rgba(83, 132, 250, 0.44) !important;
background-color: rgba(160, 174, 255, 0.35) !important;
}
@@ -115,7 +115,7 @@ $heightdescr: 20px;
@media screen and (min-width: 600px) {
display: none;
}
color: #777;
color: #939393;
height: $heightitem;
line-height: $heightitem;
//visibility: hidden;

2
src/components/todos/SingleTodo/SingleTodo.ts
View File

@@ -285,7 +285,7 @@ export default class SingleTodo extends Vue {
}
// console.log('exitEdit')
this.inEdit = false
this.updateClasses
this.updateClasses()
this.$emit('deselectAllRows', this.itemtodo, false, singola)
}
}

2
src/components/todos/SingleTodo/SingleTodo.vue
View File

@@ -77,7 +77,7 @@
<!--</q-popup-edit>-->
</div>
<div v-if="isTodo()" class="flex-item pos-item " @mousedown="clickRiga">
<q-btn push
<q-btn flat
:class="clButtPopover"
icon="menu">
<q-menu ref="popmenu" self="top right">

2
src/components/todos/index.ts
View File

@@ -1,3 +1,3 @@
export * from './SingleTodo'
export * from './SubMenus'
export * from './todo'
export * from '../../views/todo'

1
src/components/todos/todo/index.ts
View File

@@ -1 +0,0 @@
export {default as Todo} from './todo.vue'

110
src/components/todos/todo/todo.scss
View File

@@ -1,110 +0,0 @@
.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;
}

461
src/components/todos/todo/todo.ts
View File

@@ -1,461 +0,0 @@
import Vue from 'vue'
import { Component, Watch } from 'vue-property-decorator'
import { ICfgServer, IDrag, IGlobalState, ITodo, ITodosState } from '@src/model'
import { SingleTodo } from '../SingleTodo'
import { tools } from '../../../store/Modules/tools'
import { GlobalStore, Todos } from '@store'
import { UserStore } from '@store'
// _.cloneDeep( Per clonare un oggetto
import { costanti } from '@src/store/Modules/costanti'
import { Getter, Mutation, State } from 'vuex-class'
const namespace: string = 'Todos'
import globalroutines from './../../../globalroutines/index'
@Component({
components: { SingleTodo },
filters: {
capitalize(value) {
if (!value) { return '' }
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
export default class Todo 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)
}
get todos_vista() {
let mystr = ''
const arr = Todos.getters.todos_dacompletare(this.categoryAtt)
for (const ind in arr) {
mystr += this.getstrelem(arr[ind]) + '\n'
}
return mystr + ''
}
// get mytodos_dacompletare() {
// return todos_dacompletare(this.categoryAtt)
// }
// @Watch('$route', { immediate: true, deep: true })
// onUrlChange(newVal: any) {
// // Some action
// }
// 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('todos_dacompletare', { namespace })
public todos_dacompletare: (state: ITodosState, category: string) => ITodo[]
@Getter('todos_completati', { namespace })
public todos_completati: (state: ITodosState, category: string) => ITodo[]
@Watch('$route.params.category') public changecat() {
this.categoryAtt = this.$route.params.category
}
// clickaggshowtype () {
// console.log('1B) clickaggshowtype Todos.state.showtype=', Todos.state.showtype)
// Todos.state.showtype = costanti.ShowTypeTask.SHOW_ALL
// console.log('2B) Dopo: showtype=', this.showtype)
// }
public loadval(e) {
console.log('1) loadval, showtype=', this.showtype)
this.showtype = Todos.state.showtype
console.log('2) Dopo: showtype=', this.showtype)
}
public getmyid(id) {
return 'row' + id
}
public showTask(field_value) {
return field_value === tools.MenuAction.SHOW_TASK
}
public onStart() {
this.startpos = 0
this.itemDragStart = null
}
public logelem(mystr, elem) {
console.log(mystr, 'elem [', elem._id, '] ', elem.descr, ' Pr(', this.getPriorityByInd(elem.priority), ') [', elem.id_prev, '] modif=', elem.modified)
}
public getstrelem(elem) {
return 'elem [' + elem._id + '] ' + elem.descr + ' Pr(' + this.getPriorityByInd(elem.priority) + ') [ID_PREV=' + elem.id_prev + '] modif=' + elem.modified + ' '
}
public getTitlePriority(priority) {
let cl = ''
if (priority === tools.Todos.PRIORITY_HIGH) {
cl = 'high_priority'
}
else if (priority === tools.Todos.PRIORITY_NORMAL) {
cl = 'medium_priority'
}
else if (priority === tools.Todos.PRIORITY_LOW) {
cl = 'low_priority'
}
return cl + ' titlePriority'
}
public logga_arr(myarr: ITodo[]) {
let mystr = '\n'
myarr.forEach((item) => {
mystr += '[' + item.pos + '] ' + item.descr + ' Pr(' + this.getPriorityByInd(item.priority) + ') [' + item.id_prev + '] modif=' + item.modified + '\n'
// mystr += '[' + item.pos + '] ' + item.descr + '\n'
})
return mystr
}
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() {
console.log('LOAD TODO....')
this.categoryAtt = this.$route.params.category
// Set last category selected
localStorage.setItem(tools.localStorage.categorySel, this.categoryAtt)
for (const todosKey in tools.Todos) {
this.listPriorityLabel.push(tools.Todos[todosKey])
}
// console.log('Priority:' + this.listPriorityLabel)
this.setarrPriority()
this.loadDone = true
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 getPriorityByInd(index) {
// console.log('LANG in PRIOR', UserStore.state.lang)
try {
const arr = tools.selectPriority[UserStore.state.lang]
for (const rec of arr) {
if (rec.value === index) {
return rec.label
}
}
} catch (e) {
}
return ''
}
public isRegistered() {
return localStorage.getItem(tools.localStorage.userId) !== ''
}
public mydeleteItem(idobj: string) {
// console.log('mydeleteItem', idobj)
return Todos.actions.deleteItem({ cat: this.categoryAtt, idobj })
}
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 = ''
}
})
}
/*
sendMessageToSW(recdata, method) {
navigator.serviceWorker.controller.postMessage({
type: 'sync',
recdata,
method,
cmd: 'sync-new-todos',
token: UserStore.state.idToken,
lang: UserStore.state.lang
})
}
*/
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()
}
}
}
public checkUpdate() {
tools.waitAndcheckPendingMsg()
}
public loadMoreTodo(index, done) {
setTimeout(() => {
this.actualMaxPosition += 15
done()
}, 100)
}
public getArrTodos() {
let mystr = ''
this.tmpstrTodos = ''
return globalroutines(null, 'readall', 'todos', null)
.then((alldata) => {
const myrecs = [...alldata]
myrecs.forEach((rec) => {
mystr = mystr + rec.descr + rec.completed + '] ['
})
this.tmpstrTodos = 'TODOS: ' + mystr
})
}
private getElementIndex(el: any) {
return [].slice.call(el.parentElement.children).indexOf(el)
}
private getElementOldIndex(el: any) {
return parseInt(el.attributes.index.value, 10)
}
// setArrTodos() {
//
// let mystr = ''
// let mythis = this
//
// mythis.tmpstrTodos = ''
// return globalroutines(null, 'write', 'todos', this.todos_arr[0])
// .then(function (alldata) {
// mythis.getArrTodos()
// })
// }
//
}

154
src/components/todos/todo/todo.vue
View File

@@ -1,154 +0,0 @@
<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>
<q-input ref="insertTask" color="blue-12" v-model="todotop" :label="$t('todo.inserttop')"
style="margin-left: 6px;"
:after="[{icon: 'arrow_forward', content: true, handler () {}}]"
v-on:keyup.enter="insertTodo(true)">
<template v-slot:prepend>
<q-icon name="add"/>
</template>
</q-input>
<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="first">
<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>-->
<div v-if="doneTodosCount > 0" class="titleCompleted">
<label>{{$t('todo.completed')}}</label>
</div>
<!--<q-infinite-scroll :handler="loadMoreTodo" :offset="7">-->
<div class="container">
<div :id="getmyid(mytodo._id)" :index="index"
v-for="(mytodo, index) in todos_completati(categoryAtt)"
:key="mytodo._id" class="myitemdrag">
<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>-->
</div>
<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>
<!--{{ tmpstrTodos }}-->
<!--<div class="flex-item btn-item">-->
<!--<q-btn class="mybtn" round color="" icon="lock" @click="getArrTodos">Get Todo</q-btn>-->
<!--&lt;!&ndash;<q-btn class="mybtn" round color="" icon="person" @click="setArrTodos">Set Todo</q-btn>&ndash;&gt;-->
<!--&lt;!&ndash;<q-btn class="mybtn" round color="" icon="list" @click="reload_fromServer++">Reload</q-btn>&ndash;&gt;-->
<!--</div>-->
<!--
<!--&lt;!&ndash;<q-input v-model="testPao" float-label="testPao"/>&ndash;&gt;-->
<!--<q-input v-model="todos_changed" float-label="todos_changed"/>-->
<!--<q-input v-model="reload_fromServer" float-label="reload_fromServer"/>-->
<!--<div class="flex-item btn-item">-->
<!--<q-btn class="mybtn" round color="" icon="lock" @click="clicktest()"></q-btn>-->
<!--<q-btn class="mybtn" round color="" icon="person" @click="clicktest2()"></q-btn>-->
<!--<q-btn class="mybtn" round color="" icon="list" @click="checkUpdate()"></q-btn>-->
<!--</div>-->
<!--&ndash;&gt;-->
<!--<q-btn class="mybtn" round color="" icon="lock" @click="clickaggshowtype()"></q-btn>-->
<!--<span style="white-space: pre;">{{ todos_vista }}</span>-->
</div>
</q-page>
</template>
<script lang="ts" src="./todo.ts">
</script>
<style lang="scss" scoped>
@import './todo.scss';
</style>