Cleaning Code, moving functions...
This commit is contained in:
Paolo Arena
@@ -1 +0,0 @@
|
||||
export {default as tableOnlyView} from './tableOnlyView.vue'
|
||||
@@ -1,63 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import { Component } from 'vue-property-decorator'
|
||||
|
||||
import { GlobalStore, UserStore } from '@store'
|
||||
|
||||
|
||||
@Component({})
|
||||
export default class TableOnlyView extends Vue {
|
||||
public loading: boolean = false
|
||||
public serverPagination: {
|
||||
page: number ,
|
||||
rowsNumber: number // specifying this determines pagination is server-side
|
||||
} = {page: 1, rowsNumber: 10}
|
||||
|
||||
public serverData: any [] = []
|
||||
public columns: any[] = [
|
||||
{
|
||||
name: 'chiave',
|
||||
required: true,
|
||||
label: 'Chiave',
|
||||
align: 'left',
|
||||
field: 'chiave',
|
||||
sortable: true
|
||||
},
|
||||
{ name: 'valore', label: 'Valore', field: 'valore', sortable: false }
|
||||
]
|
||||
|
||||
public filter: string = ''
|
||||
public selected: any[] = []
|
||||
|
||||
|
||||
request(props) {
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.serverPagination = props.pagination
|
||||
let
|
||||
table = this.$refs.table,
|
||||
rows = GlobalStore.state.cfgServer.slice(),
|
||||
{ page, rowsPerPage, sortBy, descending } = props.pagination
|
||||
|
||||
// if (props.filter) {
|
||||
// rows = table.filterMethod(rows, props.filter)
|
||||
// }
|
||||
// if (sortBy) {
|
||||
// rows = table.sortMethod(rows, sortBy, descending)
|
||||
// }
|
||||
|
||||
this.serverPagination.rowsNumber = rows.length
|
||||
if (rowsPerPage) {
|
||||
rows = rows.slice((page - 1) * rowsPerPage, page * rowsPerPage)
|
||||
}
|
||||
this.serverData = rows
|
||||
this.loading = false
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.request({
|
||||
pagination: this.serverPagination,
|
||||
filter: this.filter
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
<template>
|
||||
<q-page padding class="docs-table">
|
||||
<p class="caption">TableOnlyView</p>
|
||||
<q-table
|
||||
ref="table"
|
||||
color="primary"
|
||||
title="Parametri di Configurazione Server"
|
||||
:data="serverData"
|
||||
:columns="columns"
|
||||
:filter="filter"
|
||||
selection="multiple"
|
||||
:selected.sync="selected"
|
||||
row-key="chiave"
|
||||
:pagination.sync="serverPagination"
|
||||
@request="request"
|
||||
:loading="loading"
|
||||
>
|
||||
<template slot="top-right" slot-scope="props">
|
||||
<q-search hide-underline v-model="filter" />
|
||||
</template>
|
||||
</q-table>
|
||||
</q-page>
|
||||
</template>
|
||||
<script lang="ts" src="./tableOnlyView.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './tableOnlyView.scss';
|
||||
</style>
|
||||
@@ -1,73 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import { Component } from 'vue-property-decorator'
|
||||
|
||||
import { GlobalStore } from '@store'
|
||||
|
||||
|
||||
@Component({})
|
||||
export default class CfgServer extends Vue {
|
||||
public loading: boolean = false
|
||||
public paginationControl: {
|
||||
page: number,
|
||||
rowsPerPage: number // specifying this determines pagination is server-side
|
||||
} = { page: 1, rowsPerPage: 20 }
|
||||
|
||||
public pagination: {
|
||||
page: number
|
||||
} = {page: 1 }
|
||||
|
||||
public serverData: any [] = GlobalStore.state.cfgServer.slice() // [{ chiave: 'chiave1', valore: 'valore 1' }]
|
||||
public columns: any[] = [
|
||||
{
|
||||
name: 'chiave',
|
||||
required: true,
|
||||
label: 'Chiave',
|
||||
align: 'left',
|
||||
field: 'chiave',
|
||||
sortable: true
|
||||
},
|
||||
{ name: 'userid', label: 'UserId', field: 'userid', sortable: false },
|
||||
{ name: 'valore', label: 'Valore', field: 'valore', sortable: false }
|
||||
]
|
||||
|
||||
public visibleColumns: ['chiave', 'userid', 'valore']
|
||||
public separator: 'horizontal'
|
||||
public filter: string = ''
|
||||
public selected: any[] = []
|
||||
public dark: boolean = true
|
||||
|
||||
public keysel: string = ''
|
||||
public userIdsel: string = ''
|
||||
|
||||
|
||||
get tableClass () {
|
||||
if (this.dark) {
|
||||
return 'bg-black'
|
||||
}
|
||||
}
|
||||
|
||||
selItem(item) {
|
||||
console.log('item', item)
|
||||
this.keysel = item.chiave
|
||||
this.userIdsel = item.userid
|
||||
console.log('this.keysel', this.keysel)
|
||||
}
|
||||
|
||||
SaveValue(newVal, valinitial) {
|
||||
console.log('SaveValue', newVal, 'selected', this.selected)
|
||||
|
||||
const mydata = {
|
||||
chiave: this.keysel,
|
||||
userId: this.userIdsel,
|
||||
valore: newVal
|
||||
}
|
||||
// Save on Server
|
||||
GlobalStore.actions.saveCfgServerKey(mydata)
|
||||
}
|
||||
|
||||
created() {
|
||||
this.serverData = GlobalStore.state.cfgServer.slice() // [{ chiave: 'chiave1', valore: 'valore 1' }]
|
||||
// this.serverData = GlobalStore.state.cfgServer.slice()
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
<template>
|
||||
<q-table
|
||||
:data="serverData"
|
||||
:columns="columns"
|
||||
:filter="filter"
|
||||
title="Configurazione Server"
|
||||
row-key="chiave"
|
||||
>
|
||||
<q-tr slot="body" slot-scope="props" :props="props">
|
||||
<q-td key="chiave" :props="props">
|
||||
{{ props.row.chiave }}
|
||||
<q-popup-edit v-model="props.row.chiave" disable>
|
||||
<q-field count>
|
||||
<q-input v-model="props.row.chiave" />
|
||||
</q-field>
|
||||
</q-popup-edit>
|
||||
</q-td>
|
||||
<q-td key="userid" :props="props">
|
||||
{{ props.row.userId }}
|
||||
<q-popup-edit v-model="props.row.userId" disable>
|
||||
<q-field count>
|
||||
<q-input v-model="props.row.userId" />
|
||||
</q-field>
|
||||
</q-popup-edit>
|
||||
</q-td>
|
||||
<q-td key="valore" :props="props">
|
||||
{{ props.row.valore }}
|
||||
<q-popup-edit v-model="props.row.valore" title="Aggiorna Valore" buttons @save="SaveValue" @show="selItem(props.row)">
|
||||
<q-input v-model="props.row.valore"/>
|
||||
</q-popup-edit>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</q-table>
|
||||
</template>
|
||||
<script lang="ts" src="./cfgServer.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './cfgServer.scss';
|
||||
</style>
|
||||
@@ -1 +0,0 @@
|
||||
export {default as cfgServer} from './cfgServer.vue'
|
||||
@@ -1 +0,0 @@
|
||||
export {default as testp1} from './testp1.vue'
|
||||
@@ -1,95 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import { Component, Watch } from 'vue-property-decorator'
|
||||
|
||||
import { GlobalStore, UserStore } from '@store'
|
||||
import { Getter } from "vuex-class"
|
||||
import { ICfgServer, IGlobalState, ITodo, ITodosState } from '@src/model'
|
||||
|
||||
const namespace: string = 'GlobalModule'
|
||||
|
||||
@Component({})
|
||||
export default class Testp1 extends Vue {
|
||||
public myvar:number = 5
|
||||
public paramcategory: string = ''
|
||||
public mioobj: any
|
||||
|
||||
// @Getter('todos_dacompletare', { namespace })
|
||||
// public todos_dacompletare: (state: ITodosState, category: string) => ITodo[]
|
||||
|
||||
@Getter('testpao1_getter_contatore', { namespace })
|
||||
public testpao1: (state: IGlobalState, param1: number) => number
|
||||
|
||||
@Getter('testpao1_getter_array', { namespace })
|
||||
public testpao1_array: (state: IGlobalState, miorec: ICfgServer) => ICfgServer[]
|
||||
|
||||
@Watch('GlobalStore.state.testp1.mioarray', { immediate: true, deep: true })
|
||||
array_changed() {
|
||||
console.log('*** array_changed *** ', GlobalStore.state.testp1.mioarray[GlobalStore.state.testp1.mioarray.length - 1])
|
||||
}
|
||||
|
||||
@Watch('$route.params.category') changecat() {
|
||||
// this.mytypetransgroup = ''
|
||||
console.log('PRIMA this.paramcategory', this.paramcategory)
|
||||
this.paramcategory = this.$route.params.category
|
||||
console.log('DOPO this.paramcategory', this.paramcategory)
|
||||
}
|
||||
|
||||
created() {
|
||||
this.mioobj = {
|
||||
arr1: [{chiave: 'key1', userId: 'ALL', valore: 'val1'}],
|
||||
arr2: [{chiave: 'key2', userId: 'ALL', valore: 'val2'}]
|
||||
}
|
||||
}
|
||||
|
||||
get getarr1 () {
|
||||
// return this.mioobj.arr1
|
||||
return this.mioobj['arr1']
|
||||
}
|
||||
|
||||
get prova2() {
|
||||
return GlobalStore.state.testp1.contatore
|
||||
}
|
||||
|
||||
get provagetter() {
|
||||
return GlobalStore.getters.testpao1_getter_contatore(130)
|
||||
}
|
||||
|
||||
get provagetterarray() {
|
||||
return GlobalStore.getters.testpao1_getter_array(GlobalStore.state.testp1.contatore)
|
||||
}
|
||||
|
||||
|
||||
TestBtnCambioaParamPassing () {
|
||||
this.paramcategory += 's'
|
||||
}
|
||||
|
||||
TestBtn() {
|
||||
GlobalStore.state.testp1.contatore++
|
||||
}
|
||||
|
||||
TestBtn2() {
|
||||
GlobalStore.state.testp1.mioarray.push({chiave: 'pippo2', userId: UserStore.state.userId, valore: GlobalStore.state.testp1.contatore.toString() })
|
||||
}
|
||||
|
||||
TestBtnModify() {
|
||||
// GlobalStore.state.testp1.mioarray[GlobalStore.state.testp1.mioarray.length - 1] = GlobalStore.state.testp1.mioarray[GlobalStore.state.testp1.mioarray.length - 1] + 1
|
||||
GlobalStore.mutations.setPaoArray({chiave: 'pippo', userId: UserStore.state.userId, valore: '20' } )
|
||||
|
||||
}
|
||||
|
||||
TestBtnCambiaTutto() {
|
||||
// GlobalStore.state.testp1.mioarray[GlobalStore.state.testp1.mioarray.length - 1] = GlobalStore.state.testp1.mioarray[GlobalStore.state.testp1.mioarray.length - 1] + 1
|
||||
GlobalStore.mutations.NewArray([{chiave: 'nuovorec1', userId: UserStore.state.userId, valore: '1' }, {chiave: 'nuovorec2', userId: UserStore.state.userId, valore: '2' }] )
|
||||
|
||||
}
|
||||
|
||||
TestBtnAction() {
|
||||
GlobalStore.actions.prova()
|
||||
}
|
||||
|
||||
TestBtnDelete() {
|
||||
// GlobalStore.state.testp1.mioarray[GlobalStore.state.testp1.mioarray.length - 1] = GlobalStore.state.testp1.mioarray[GlobalStore.state.testp1.mioarray.length - 1] + 1
|
||||
GlobalStore.mutations.setPaoArray_Delete()
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
CATEGORY: <strong>{{ paramcategory }}</strong> <br>
|
||||
|
||||
<label>TEST Prova Paolo</label><br>
|
||||
|
||||
|
||||
GETTER CONTATORE:
|
||||
{{ testpao1(300) }} <br>
|
||||
ARRAY:
|
||||
{{ testpao1_array(300) }} <br>
|
||||
|
||||
TEST OBJECT {{ mioobj }} <br>
|
||||
ARR1 {{ getarr1 }} <br>
|
||||
<!--ARR2 {{ mioobj.arr2 }} <br>-->
|
||||
|
||||
<!--<q-input v-model="testpao1(myvar)"></q-input>-->
|
||||
|
||||
<q-input v-model="prova2" float-label="PROVA2:"></q-input>
|
||||
|
||||
<q-input v-model="provagetter" float-label="PROVA GETTER:"></q-input>
|
||||
<q-input v-model="provagetterarray" float-label="GETTER ARRAY:"></q-input>
|
||||
|
||||
<br>
|
||||
|
||||
<q-btn color="secondary" rounded icon="refresh"
|
||||
@click="TestBtn" label="Test 1"/>
|
||||
|
||||
<q-btn color="secondary" rounded icon="refresh" @click="TestBtn2" label="ADD TO ARRAY"/>
|
||||
<q-btn color="secondary" rounded icon="refresh" @click="TestBtnModify" label="MODIFY"/>
|
||||
<q-btn color="secondary" rounded icon="refresh" @click="TestBtnAction" label="MODIF_BYACTION"/>
|
||||
<q-btn color="secondary" rounded icon="refresh" @click="TestBtnDelete" label="DEL LAST"/>
|
||||
<!--<q-btn color="secondary" rounded icon="refresh" @click="TestBtnCambiaTutto" label="NEW ARR"/>-->
|
||||
<q-btn color="secondary" rounded icon="refresh" @click="TestBtnCambioaParamPassing" label="CAMBIA PARAM"/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" src="./testp1.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './testp1.scss';
|
||||
</style>
|
||||
@@ -1,17 +0,0 @@
|
||||
#appsinglecat {
|
||||
color: white;
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
margin: 2px;
|
||||
padding: 3px;
|
||||
border: 2px;
|
||||
background-color: #3b5998;
|
||||
}
|
||||
|
||||
.mycols{
|
||||
padding: 1px;
|
||||
margin: 2px;
|
||||
border-color: #d50000;
|
||||
border-style: outset;
|
||||
background-color: green;
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import { Component, Prop } from 'vue-property-decorator'
|
||||
|
||||
import { ICategory } from '../../../model/index'
|
||||
|
||||
@Component({
|
||||
|
||||
})
|
||||
export default class SingleCat extends Vue {
|
||||
@Prop({required: true}) itemcat: ICategory
|
||||
|
||||
|
||||
created() {
|
||||
|
||||
}
|
||||
|
||||
remove() {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
<template>
|
||||
<div id="appsinglecat" class="flex-row-docs">
|
||||
<!--
|
||||
<div class="doc-container">
|
||||
<div class="row gutter-sm">
|
||||
<div class="col-xs-12 col-sm-6 mycols">IT: {{ itemcat.descr_it }}</div>
|
||||
<div class="col-xs-12 col-sm-6 mycols">EN: {{ itemcat.descr_en }}</div>
|
||||
<div class="col-12 mycols">
|
||||
<q-btn round color="primary" icon="remove" @click="remove()"></q-btn>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./SingleCat.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './SingleCat.scss';
|
||||
</style>
|
||||
@@ -1 +0,0 @@
|
||||
export {default as SingleCat} from './SingleCat.vue'
|
||||
@@ -1,3 +0,0 @@
|
||||
.mycard {
|
||||
visibility: hidden;
|
||||
}
|
||||
@@ -1,207 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import { Component, Watch } from 'vue-property-decorator'
|
||||
|
||||
import { SingleCat } from '../SingleCat'
|
||||
import { ICategory } from '@src/model'
|
||||
import { tools } from "@src/store/Modules/tools"
|
||||
|
||||
|
||||
@Component({
|
||||
components: { SingleCat }
|
||||
})
|
||||
export default class Category extends Vue {
|
||||
$q: any
|
||||
|
||||
filter: boolean = false
|
||||
title: string = ''
|
||||
category: string = ''
|
||||
categories_loc: any[] = [{}]
|
||||
categories_arr: any[] = [{}]
|
||||
selected: any [] = []
|
||||
selectedSecond: any [] = []
|
||||
|
||||
data: any [] = [{
|
||||
id: 0,
|
||||
descr_it: 'Frozen Yogurt',
|
||||
descr_en: '',
|
||||
descr_es: '',
|
||||
campo2bool: true
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
descr_it: 'Secondo',
|
||||
descr_en: '',
|
||||
descr_es: '',
|
||||
campo2bool: false
|
||||
}]
|
||||
|
||||
columns: any [] = [
|
||||
{
|
||||
name: 'descr_it',
|
||||
required: true,
|
||||
label: 'IT',
|
||||
align: 'left',
|
||||
field: 'descr_it',
|
||||
sortable: true,
|
||||
classes: 'my-class',
|
||||
},
|
||||
{
|
||||
name: 'descr_en',
|
||||
label: 'EN',
|
||||
align: 'left',
|
||||
field: 'descr_en',
|
||||
sortable: true,
|
||||
classes: 'my-class',
|
||||
},
|
||||
{
|
||||
name: 'descr_es',
|
||||
label: 'ES',
|
||||
align: 'left',
|
||||
field: 'descr_es',
|
||||
sortable: true,
|
||||
classes: 'my-class',
|
||||
},
|
||||
{
|
||||
name: 'campo2bool',
|
||||
label: 'campo2bool',
|
||||
align: 'left',
|
||||
field: 'campo2bool',
|
||||
sortable: true,
|
||||
classes: 'my-class',
|
||||
}
|
||||
]
|
||||
|
||||
@Watch('categories_loc') valueChanged() {
|
||||
this.updatetable()
|
||||
}
|
||||
|
||||
|
||||
created() {
|
||||
this.loadCat()
|
||||
}
|
||||
|
||||
async loadCat() {
|
||||
// await this.$db.categories.toArray().then(ris => this.categories_loc = ris)
|
||||
|
||||
this.updatetable()
|
||||
}
|
||||
|
||||
initcat() {
|
||||
|
||||
const objcat: ICategory = {
|
||||
descr_it: '',
|
||||
descr_en: '',
|
||||
descr_es: '',
|
||||
campo2bool: true
|
||||
}
|
||||
return objcat
|
||||
|
||||
}
|
||||
|
||||
async insertCategory() {
|
||||
|
||||
const objcat = this.initcat()
|
||||
|
||||
let myid = 0
|
||||
objcat.descr_it = this.category
|
||||
|
||||
// Add to Indexdb
|
||||
await this.$db.categories.add(objcat
|
||||
).then(ris => {
|
||||
myid = ris
|
||||
})
|
||||
|
||||
objcat.id = myid
|
||||
|
||||
// Add into the memory
|
||||
this.categories_loc.push(objcat)
|
||||
|
||||
// empty the field
|
||||
this.category = ''
|
||||
}
|
||||
|
||||
async deleteCategory(myarrobj) {
|
||||
|
||||
for (const myobj of myarrobj) {
|
||||
|
||||
if (myobj.id !== undefined) {
|
||||
console.log('KEY = ', myobj.id)
|
||||
|
||||
// Delete item
|
||||
let deleteCount = this.$db.categories
|
||||
.where('id').equals(myobj.id)
|
||||
.delete()
|
||||
|
||||
console.log('deleteCount = ', deleteCount)
|
||||
if (deleteCount > 0) {
|
||||
// Remove into the memory
|
||||
this.categories_loc.slice(this.categories_loc.indexOf(myobj), 1)
|
||||
|
||||
this.updatetable()
|
||||
|
||||
return deleteCount
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
updatetable() {
|
||||
|
||||
this.filterCategories()
|
||||
this.categories_arr = [...this.categories_loc]
|
||||
|
||||
}
|
||||
|
||||
async filterCategories() {
|
||||
|
||||
if (this.filter) {
|
||||
// #Todo If need to filter the output database ...
|
||||
this.$db.categories
|
||||
.where('descr_it').notEqual('nonlovedi')
|
||||
.toArray()
|
||||
.then((response) => {
|
||||
Promise.all(response.map(key => key))
|
||||
.then((myarr) => {
|
||||
this.categories_loc = [...myarr]
|
||||
return this.categories_loc
|
||||
})
|
||||
})
|
||||
} else {
|
||||
return this.categories_loc
|
||||
}
|
||||
}
|
||||
|
||||
deleteRow() {
|
||||
console.log('SEL = ', this.selectedSecond)
|
||||
|
||||
const seldel = [...this.selectedSecond]
|
||||
if (this.deleteCategory(this.selectedSecond)) {
|
||||
tools.showNotif(this.$q, `Deleted ` + (seldel.length.toString()) + ' item', {
|
||||
color: 'primary',
|
||||
icon: 'delete',
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
await db.transaction('rw', [db.friends], async () => {
|
||||
const friend = await db.friends.get(1);
|
||||
++friend.age;
|
||||
await db.friends.put(friend);
|
||||
});
|
||||
*/
|
||||
|
||||
async modify() {
|
||||
// esempio da sistemare
|
||||
await this.$db.transaction('rw', [this.$db.categories], async () => {
|
||||
const friend = await this.$db.get(1)
|
||||
++friend.age
|
||||
await this.$db.put(friend)
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="panel">
|
||||
<p class="caption">Singlecat:</p>
|
||||
|
||||
<q-input v-model="category" inverted float-label="Inserisci la Categoria"
|
||||
:after="[{icon: 'arrow_forward', content: true, handler () {}}]"
|
||||
v-on:keyup.enter="insertCategory"/>
|
||||
|
||||
<q-table
|
||||
title="Categories"
|
||||
:data="categories_arr"
|
||||
:columns="columns"
|
||||
row-key="id"
|
||||
selection="multiple"
|
||||
color="secondary"
|
||||
:selected.sync="selectedSecond">
|
||||
|
||||
|
||||
<!--
|
||||
|
||||
<q-tr slot="body" slot-scope="props" :props="props">
|
||||
<q-td key="desc" :props="props">
|
||||
{{ props.row.name }}
|
||||
<q-popup-edit v-model="props.row.name">
|
||||
<q-field count>
|
||||
<q-input v-model="props.row.name" />
|
||||
</q-field>
|
||||
</q-popup-edit>
|
||||
</q-td>
|
||||
<q-td key="calories" :props="props">
|
||||
{{ props.row.calories }}
|
||||
<q-popup-edit v-model="props.row.calories" title="Update calories" buttons>
|
||||
<q-input type="number" v-model="props.row.calories" />
|
||||
</q-popup-edit>
|
||||
</q-td>
|
||||
<q-td key="fat" :props="props">{{ props.row.fat }}</q-td>
|
||||
<q-td key="carbs" :props="props">{{ props.row.carbs }}</q-td>
|
||||
<q-td key="protein" :props="props">{{ props.row.protein }}</q-td>
|
||||
<q-td key="sodium" :props="props">{{ props.row.sodium }}</q-td>
|
||||
<q-td key="calcium" :props="props">{{ props.row.calcium }}</q-td>
|
||||
<q-td key="iron" :props="props">{{ props.row.iron }}</q-td>
|
||||
</q-tr>
|
||||
-->
|
||||
|
||||
<!-- gets displayed only when there's at least one row selected -->
|
||||
<template slot="top-selection" slot-scope="props">
|
||||
<!--<q-btn color="secondary" flat label="Action 1" class="q-mr-sm"/>
|
||||
<q-btn color="secondary" flat label="Action 2"/>-->
|
||||
<div class="col"/>
|
||||
<q-btn color="negative" flat round delete icon="delete" @click="deleteRow"/>
|
||||
</template>
|
||||
</q-table>
|
||||
|
||||
|
||||
<!-- <SingleTodo :itemcat='mycat' v-for="mycat of categories_arr" :key="mycat._id"/> -->
|
||||
</div>
|
||||
</q-page>
|
||||
|
||||
|
||||
</template>
|
||||
<script lang="ts" src="./category.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './category.scss';
|
||||
</style>
|
||||
@@ -1 +0,0 @@
|
||||
export {default as Category} from './category.vue'
|
||||
@@ -1,3 +0,0 @@
|
||||
export * from './SingleCat'
|
||||
export * from './category'
|
||||
export * from './tabledata'
|
||||
@@ -1 +0,0 @@
|
||||
export {default as TableData} from './tabledata.vue'
|
||||
@@ -1,205 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import { Component, Watch } from 'vue-property-decorator'
|
||||
|
||||
import { ICategory } from '@src/model'
|
||||
import globalroutines from "@src/globalroutines"
|
||||
import { tools } from "@src/store/Modules/tools"
|
||||
|
||||
@Component({
|
||||
})
|
||||
export default class Tabledata extends Vue {
|
||||
$q: any
|
||||
|
||||
filter: boolean = false
|
||||
title: string = ''
|
||||
category: string = ''
|
||||
categories_loc: any[] = [{}]
|
||||
categories_arr: any[] = [{}]
|
||||
selected: any [] = []
|
||||
selectedSecond: any [] = []
|
||||
|
||||
data: any [] = [{
|
||||
id: 0,
|
||||
descr_it: 'Frozen Yogurt',
|
||||
descr_en: '',
|
||||
descr_es: ''
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
descr_it: 'Secondo',
|
||||
descr_en: '',
|
||||
descr_es: ''
|
||||
}]
|
||||
|
||||
columns: any [] = [
|
||||
{
|
||||
name: 'descr_it',
|
||||
required: true,
|
||||
label: 'IT',
|
||||
align: 'left',
|
||||
field: 'descr_it',
|
||||
sortable: true,
|
||||
classes: 'my-class',
|
||||
},
|
||||
{
|
||||
name: 'descr_en',
|
||||
label: 'EN',
|
||||
align: 'left',
|
||||
field: 'descr_en',
|
||||
sortable: true,
|
||||
classes: 'my-class',
|
||||
},
|
||||
{
|
||||
name: 'descr_es',
|
||||
label: 'ES',
|
||||
align: 'left',
|
||||
field: 'descr_es',
|
||||
sortable: true,
|
||||
classes: 'my-class',
|
||||
},
|
||||
{
|
||||
name: 'campo2bool',
|
||||
label: 'campo2bool',
|
||||
align: 'left',
|
||||
field: 'campo2bool',
|
||||
sortable: true,
|
||||
classes: 'my-class',
|
||||
}
|
||||
]
|
||||
|
||||
@Watch('categories_loc') valueChanged() {
|
||||
this.updatetable()
|
||||
}
|
||||
|
||||
|
||||
created() {
|
||||
this.loadCat()
|
||||
}
|
||||
|
||||
async loadCat() {
|
||||
await this.$db.categories.toArray().then(ris => this.categories_loc = ris)
|
||||
|
||||
this.updatetable()
|
||||
}
|
||||
|
||||
initcat() {
|
||||
|
||||
const objcat: ICategory = {
|
||||
descr_it: '',
|
||||
descr_en: '',
|
||||
descr_es: '',
|
||||
campo2bool: false
|
||||
}
|
||||
return objcat
|
||||
|
||||
}
|
||||
|
||||
async insertCategory() {
|
||||
|
||||
const objcat = this.initcat()
|
||||
|
||||
let myid = 0
|
||||
objcat.descr_it = this.category
|
||||
|
||||
// Add to Indexdb
|
||||
await this.$db.categories.put(objcat
|
||||
).then(ris => {
|
||||
myid = ris
|
||||
})
|
||||
|
||||
objcat.id = myid
|
||||
|
||||
// Add into the memory
|
||||
this.categories_loc.push(objcat)
|
||||
|
||||
// empty the field
|
||||
this.category = ''
|
||||
}
|
||||
|
||||
async deleteCategory(myarrobj) {
|
||||
|
||||
for (const myobj of myarrobj) {
|
||||
|
||||
if (!!myobj.id) {
|
||||
console.log('KEY = ', myobj.id)
|
||||
|
||||
// Delete item
|
||||
let deleteCount = this.$db.categories
|
||||
.where('id').equals(myobj.id)
|
||||
.delete()
|
||||
|
||||
console.log('deleteCount = ', deleteCount)
|
||||
if (deleteCount > 0) {
|
||||
// Remove into the memory
|
||||
this.categories_loc.splice(this.categories_loc.indexOf(myobj), 1)
|
||||
|
||||
this.updatetable()
|
||||
|
||||
return deleteCount
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
updatetable() {
|
||||
|
||||
this.filterCategories()
|
||||
this.categories_arr = [...this.categories_loc]
|
||||
|
||||
}
|
||||
|
||||
async filterCategories() {
|
||||
|
||||
if (this.filter) {
|
||||
// #Todo If need to filter the output database ...
|
||||
this.$db.categories
|
||||
.where('descr_it').notEqual('nonlovedi')
|
||||
.toArray()
|
||||
.then((response) => {
|
||||
Promise.all(response.map(key => key))
|
||||
.then((myarr) => {
|
||||
this.categories_loc = [...myarr]
|
||||
return this.categories_loc
|
||||
})
|
||||
})
|
||||
} else {
|
||||
return this.categories_loc
|
||||
}
|
||||
}
|
||||
|
||||
deleteRow() {
|
||||
console.log('SEL = ', this.selectedSecond)
|
||||
|
||||
const seldel = [...this.selectedSecond]
|
||||
if (this.deleteCategory(this.selectedSecond)) {
|
||||
tools.showNotif(this.$q, `Deleted ` + (seldel.length.toString()) + ' item', {
|
||||
color: 'primary',
|
||||
icon: 'delete'
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
await db.transaction('rw', [db.friends], async () => {
|
||||
const friend = await db.friends.get(1);
|
||||
++friend.age;
|
||||
await db.friends.put(friend);
|
||||
});
|
||||
*/
|
||||
|
||||
async modify() {
|
||||
// esempio da sistemare
|
||||
await this.$db.transaction('rw', [this.$db.categories], async () => {
|
||||
const friend = await this.$db.get(1)
|
||||
++friend.age
|
||||
await this.$db.put(friend)
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="panel">
|
||||
<p class="caption">Table Data:</p>
|
||||
|
||||
<q-input v-model="category" inverted float-label="Inserisci la Categoria"
|
||||
:after="[{icon: 'arrow_forward', content: true, handler () {}}]"
|
||||
v-on:keyup.enter="insertCategory"/>
|
||||
|
||||
<q-table
|
||||
title="Categories"
|
||||
:data="categories_arr"
|
||||
:columns="columns"
|
||||
row-key="id"
|
||||
selection="multiple"
|
||||
color="secondary"
|
||||
:selected.sync="selectedSecond">
|
||||
|
||||
|
||||
<!--
|
||||
|
||||
<q-tr slot="body" slot-scope="props" :props="props">
|
||||
<q-td key="desc" :props="props">
|
||||
{{ props.row.name }}
|
||||
<q-popup-edit v-model="props.row.name">
|
||||
<q-field count>
|
||||
<q-input v-model="props.row.name" />
|
||||
</q-field>
|
||||
</q-popup-edit>
|
||||
</q-td>
|
||||
<q-td key="calories" :props="props">
|
||||
{{ props.row.calories }}
|
||||
<q-popup-edit v-model="props.row.calories" title="Update calories" buttons>
|
||||
<q-input type="number" v-model="props.row.calories" />
|
||||
</q-popup-edit>
|
||||
</q-td>
|
||||
<q-td key="fat" :props="props">{{ props.row.fat }}</q-td>
|
||||
<q-td key="carbs" :props="props">{{ props.row.carbs }}</q-td>
|
||||
<q-td key="protein" :props="props">{{ props.row.protein }}</q-td>
|
||||
<q-td key="sodium" :props="props">{{ props.row.sodium }}</q-td>
|
||||
<q-td key="calcium" :props="props">{{ props.row.calcium }}</q-td>
|
||||
<q-td key="iron" :props="props">{{ props.row.iron }}</q-td>
|
||||
</q-tr>
|
||||
-->
|
||||
|
||||
<!-- gets displayed only when there's at least one row selected -->
|
||||
<template slot="top-selection" slot-scope="props">
|
||||
<!--<q-btn color="secondary" flat label="Action 1" class="q-mr-sm"/>
|
||||
<q-btn color="secondary" flat label="Action 2"/>-->
|
||||
<div class="col"/>
|
||||
<q-btn color="negative" flat round delete icon="delete" @click="deleteRow"/>
|
||||
</template>
|
||||
</q-table>
|
||||
|
||||
</div>
|
||||
</q-page>
|
||||
|
||||
|
||||
</template>
|
||||
<script lang="ts" src="./tabledata.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './tabledata.scss';
|
||||
</style>
|
||||
@@ -1,4 +1,3 @@
|
||||
export * from './categories'
|
||||
export * from '../views/categories'
|
||||
export * from './todos'
|
||||
export * from './logo'
|
||||
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export {default as Offline} from './offline.vue'
|
||||
@@ -1,29 +0,0 @@
|
||||
.svgclass{
|
||||
color: white;
|
||||
transform: translateY(0px);
|
||||
|
||||
}
|
||||
|
||||
.svgclass_animate {
|
||||
transform: translateY(-70px);
|
||||
color: red;
|
||||
}
|
||||
|
||||
#sun {
|
||||
animation: gravity 5s infinite;
|
||||
|
||||
}
|
||||
|
||||
@keyframes gravity{
|
||||
0%{
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
100%{
|
||||
transform: rotateY(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
#smile{
|
||||
opacity: 0.1 !important;
|
||||
fill: red;
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import { Component } from 'vue-property-decorator'
|
||||
|
||||
@Component({
|
||||
})
|
||||
export default class Offline extends Vue {
|
||||
get logoimg() {
|
||||
return '/statics/images/' + process.env.LOGO_REG
|
||||
}
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
<template>
|
||||
<div id="offline">
|
||||
TableOnlyView Page !
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" src="./offline.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './offline.scss';
|
||||
</style>
|
||||
@@ -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;
|
||||
}
|
||||
@@ -1,267 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import { Component, Watch } from 'vue-property-decorator'
|
||||
|
||||
import { IDrag, ITodo, ITodosState } from '@src/model'
|
||||
import { SingleTodo } from '../../todos/SingleTodo'
|
||||
|
||||
import { tools } from '../../../store/Modules/tools'
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,100 +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>
|
||||
|
||||
<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>-->
|
||||
|
||||
|
||||
<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.scss';
|
||||
</style>
|
||||
@@ -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;
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
export * from './SingleTodo'
|
||||
export * from './SubMenus'
|
||||
export * from './todo'
|
||||
export * from '../../views/todo'
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export {default as Todo} from './todo.vue'
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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()
|
||||
// })
|
||||
// }
|
||||
//
|
||||
|
||||
}
|
||||
@@ -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>-->
|
||||
<!--<!–<q-btn class="mybtn" round color="" icon="person" @click="setArrTodos">Set Todo</q-btn>–>-->
|
||||
<!--<!–<q-btn class="mybtn" round color="" icon="list" @click="reload_fromServer++">Reload</q-btn>–>-->
|
||||
<!--</div>-->
|
||||
|
||||
<!--
|
||||
<!--<!–<q-input v-model="testPao" float-label="testPao"/>–>-->
|
||||
<!--<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>-->
|
||||
<!--–>-->
|
||||
|
||||
<!--<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>
|
||||
Reference in New Issue
Block a user