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

- Added CDateTime component (to save in the db)... in the component CGridTableRec and for CEventsCalendar

Browse Source
This commit is contained in:
Paolo Arena
2019-10-28 16:00:37 +01:00
parent c95cded522
commit 340c813a7c
19 changed files with 383 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/CGridTableRec/CGridTableRec.scss
View File

@@ -1,3 +1,8 @@
.colmodif {
cursor: pointer;
}
.coldate {
max-width: 250px;
min-width: 200px;
}

109
src/components/CGridTableRec/CGridTableRec.ts
View File

@@ -9,8 +9,13 @@ import { ICategory, IColGridTable, ITableRec } from '../../model'
import { CTodo } from '../todos/CTodo'
import { SingleProject } from '../projects/SingleProject'
import { lists } from '../../store/Modules/lists'
import { IParamsQuery } from '../../model/GlobalStore'
import { fieldsTable } from '../../store/Modules/fieldsTable'
import { CDateTime } from '../CDateTime'
@Component({})
@Component({
components: { CDateTime }
})
export default class CGridTableRec extends Vue {
@Prop({ required: false }) public prop_mytable: string
@Prop({ required: true }) public prop_mytitle: string
@@ -24,6 +29,7 @@ export default class CGridTableRec extends Vue {
public mytitle: string
public mycolumns: any[]
public colkey: string
public search: string = ''
public tablesel: string = ''
@@ -42,12 +48,12 @@ export default class CGridTableRec extends Vue {
public spinner_visible: boolean = false
public idsel: string = ''
public colsel: string = ''
public colsel: IColGridTable = {name: ''}
public valPrec: string = ''
public separator: 'horizontal'
public filter: string = ''
public selected: any
public rowsel: any
public dark: boolean = true
public funcActivated = []
@@ -70,25 +76,27 @@ export default class CGridTableRec extends Vue {
}
}
public selItem(item, colsel) {
public selItem(item, col: IColGridTable) {
// console.log('item', item)
this.selected = item
this.rowsel = item
this.idsel = item._id
this.colsel = colsel
this.colsel = col
this.updateValueExtra(col, this.rowsel[col.name])
// console.log('this.idsel', this.idsel)
}
public undoVal() {
console.log('undoVal', 'colsel', this.colsel, 'valprec', this.valPrec, 'this.colkey', this.colkey, 'this.selected', this.selected)
console.log('undoVal', 'colsel', this.colsel, 'valprec', this.valPrec, 'this.colkey', this.colkey, 'this.selected', this.rowsel)
console.table(this.serverData)
if (this.colsel)
this.selected[this.colsel] = this.valPrec
this.rowsel[this.colsel.field] = this.valPrec
// this.serverData[this.colsel] = this.valPrec
}
public SaveValue(newVal, valinitial) {
// console.log('SaveValue', newVal, 'selected', this.selected)
console.log('SaveValue', newVal, 'rowsel', this.rowsel)
const mydata = {
id: this.idsel,
@@ -96,7 +104,7 @@ export default class CGridTableRec extends Vue {
fieldsvalue: {}
}
mydata.fieldsvalue[this.colsel] = newVal
mydata.fieldsvalue[this.colsel.field] = newVal
this.valPrec = valinitial
@@ -135,7 +143,7 @@ export default class CGridTableRec extends Vue {
public onRequest(props) {
const { page, rowsPerPage, rowsNumber, sortBy, descending } = props.pagination
const filter = props.filter
const filter = this.filter
if (!this.mytable)
return
@@ -146,7 +154,7 @@ export default class CGridTableRec extends Vue {
// update rowsCount with appropriate value
// get all rows if "All" (0) is selected
// get all rows if "All" (0) is rowsel
const fetchCount = rowsPerPage === 0 ? rowsNumber : rowsPerPage
// calculate starting row of data
@@ -193,7 +201,7 @@ export default class CGridTableRec extends Vue {
myobj[sortBy] = 1
}
const params = {
const params: IParamsQuery = {
table: this.mytable,
startRow,
endRow,
@@ -269,7 +277,10 @@ export default class CGridTableRec extends Vue {
}
public getclassCol(col) {
return (col.disable || !this.canEdit) ? '' : 'colmodif'
let mycl = (col.disable || !this.canEdit) ? '' : 'colmodif'
mycl += (col.fieldtype === tools.FieldType.date) ? ' coldate flex flex-container' : ''
return mycl
}
public async createNewRecord() {
@@ -279,6 +290,11 @@ export default class CGridTableRec extends Vue {
table: this.mytable,
data: {}
}
// const mykey = fieldsTable.getKeyByTable(this.mytable)
// mydata.data[mykey] = ''
const data = await GlobalStore.actions.saveTable(mydata)
this.serverData.push(data)
@@ -307,9 +323,13 @@ export default class CGridTableRec extends Vue {
}
public refresh() {
if (this.search !== '')
this.filter = this.search
else
this.filter = ''
this.onRequest({
pagination: this.pagination,
filter: undefined
pagination: this.pagination
})
}
@@ -319,6 +339,7 @@ export default class CGridTableRec extends Vue {
}
}
public ActionAfterYes(action, item, data) {
if (action === lists.MenuAction.DELETE_RECTABLE) {
if (this.serverData.length > 0)
@@ -343,14 +364,19 @@ export default class CGridTableRec extends Vue {
}
public visuValByType(col, val) {
if (col.fieldtype === 'date') {
if (col.fieldtype === tools.FieldType.date) {
if (val === undefined) {
return '[]'
} else {
return tools.getstrDateTime(val)
}
} else if (col.fieldtype === 'boolean') {
} else if (col.fieldtype === tools.FieldType.boolean) {
return (val) ? this.$t('dialog.yes') : this.$t('dialog.no')
} else if (col.fieldtype === tools.FieldType.binary) {
if (val === undefined)
return '[]'
else
return val
} else {
if (val === undefined)
return '[]'
@@ -395,4 +421,51 @@ export default class CGridTableRec extends Vue {
this.updatedcol()
this.refresh()
}
get tools() {
return tools
}
get db_fieldsTable() {
return fieldsTable
}
public doSearch() {
this.refresh()
}
public setResultJoin(col: IColGridTable, row) {
let myval = 0
const tabjoin = fieldsTable.getTableJoinByName(col.jointable)
col.resultjoin.forEach((mycol) => {
myval = tools.SetBit(myval, mycol)
})
row[col.name] = myval
console.log('col.resultjoin')
console.table(col.resultjoin)
console.log('row[col.name]', row[col.name])
}
public updateValueExtra(col: IColGridTable, myval) {
if (col.jointable) {
const tabjoin = fieldsTable.getTableJoinByName(col.jointable)
const arr = []
if (myval !== undefined && tabjoin !== undefined) {
tabjoin.forEach((mybit) => {
if (tools.isBitActive(myval, mybit.value))
arr.push(mybit)
})
}
col.resultjoin = arr
console.log('col', col.field, 'myval', myval, 'arr', arr)
console.log('resultjoin')
console.table(col.resultjoin)
}
}
}

89
src/components/CGridTableRec/CGridTableRec.vue
View File

@@ -35,11 +35,16 @@
<!--<p style="color:red"> Rows: {{ getrows }}</p>-->
<q-input v-model="search" filled dense type="search" hint="Search" v-on:keyup.enter="doSearch">
<template v-slot:after>
<q-btn v-if="mytable" label="" color="primary" @click="refresh" icon="search"></q-btn>
</template>
</q-input>
<q-toggle v-if="mytable" v-model="funcActivated" :val="lists.MenuAction.CAN_EDIT_TABLE" class="q-mx-sm"
:label="$t('grid.editvalues')"></q-toggle>
<q-btn v-if="mytable" label="Refresh" color="primary" @click="refresh" class="q-mx-sm"></q-btn>
<q-btn v-if="mytable" flat dense color="primary" :disable="loading || !canEdit" :label="$t('grid.addrecord')"
<q-btn v-if="mytable" flat dense color="primary" :disable="loading || !canEdit"
:label="$t('grid.addrecord')"
@click="createNewRecord"></q-btn>
<q-space/>
@@ -84,47 +89,26 @@
<q-tr v-if="mytable" slot="body" slot-scope="props" :props="props">
<q-td v-for="col in mycolumns" :key="col.name" :props="props" v-if="colVisib.includes(col.field)">
<div v-if="col.fieldtype === 'date'">
<div style="max-width: 250px; min-width: 200px">
<div class="flex flex-container">
<q-icon name="event" class="cursor-pointer">
<q-popup-edit transition-show="scale" transition-hide="scale" v-if="canEdit"
v-model="props.row[col.name]" :disable="col.disable"
:title="col.title" buttons
@save="SaveValue" @show="selItem(props.row, col.field)">
<q-date v-model="props.row[col.name]" mask="YYYY-MM-DD HH:mm"/>
</q-popup-edit>
<!--<q-popup-proxy transition-show="scale" transition-hide="scale">-->
<!--<q-date v-model="props.row[col.name]" mask="YYYY-MM-DD HH:mm" />-->
<!--</q-popup-proxy>-->
</q-icon>
<div>
{{ visuValByType(col, props.row[col.name]) }}
</div>
<q-icon name="access_time" class="cursor-pointer">
<q-popup-edit transition-show="scale" transition-hide="scale" v-if="canEdit"
v-model="props.row[col.name]" :disable="col.disable"
:title="col.title" buttons
@save="SaveValue" @show="selItem(props.row, col.field)">
<q-time v-model="props.row[col.name]" mask="YYYY-MM-DD HH:mm" format24h/>
</q-popup-edit>
<!--<q-popup-proxy transition-show="scale" transition-hide="scale">-->
<!--<q-time v-model="props.row[col.name]" mask="YYYY-MM-DD HH:mm" format24h />-->
<!--</q-popup-proxy>-->
</q-icon>
</div>
<div v-if="col.fieldtype === tools.FieldType.date">
<div :class="getclassCol(col)">
<CDateTime
class="cursor-pointer"
:value.sync="props.row[col.name]"
:label="col.title"
:dense="true"
:readonly="true"
@savetoclose="SaveValue"
@show="selItem(props.row, col)"
>
</CDateTime>
</div>
</div>
<div v-else-if="col.fieldtype === 'boolean'">
<div v-else-if="col.fieldtype === tools.FieldType.boolean">
<div :class="getclassCol(col)">
{{ visuValByType(col, props.row[col.name]) }}
<q-popup-edit v-if="canEdit" v-model="props.row[col.name]" :disable="col.disable"
:title="col.title" buttons
@save="SaveValue" @show="selItem(props.row, col.field)">
@save="SaveValue" @show="selItem(props.row, col)">
<q-checkbox v-model="props.row[col.name]" label="">
</q-checkbox>
@@ -133,12 +117,41 @@
</q-popup-edit>
</div>
</div>
<div v-else-if="col.fieldtype === tools.FieldType.binary">
<div :class="getclassCol(col)">
{{ visuValByType(col, props.row[col.name]) }}
<q-popup-edit v-if="canEdit" v-model="props.row[col.name]" :disable="col.disable"
:title="col.title" buttons
@save="SaveValue" @show="selItem(props.row, col)">
<q-select
v-model="col.resultjoin"
multiple
borderless
dense
options-dense
display-value="Valori:"
emit-value
map-options
:options="db_fieldsTable.getTableJoinByName(col.jointable)"
@input="setResultJoin(col, props.row)"
:option-value="db_fieldsTable.getKeyByTable(col.jointable)"
style="min-width: 150px">
</q-select>
<q-input v-model="props.row[col.name]"/>
{{ visuValByType(col, props.row[col.name]) }}
</q-popup-edit>
</div>
</div>
<div v-else>
<div :class="getclassCol(col)">
{{ visuValByType(col, props.row[col.name]) }}
<q-popup-edit v-if="canEdit" v-model="props.row[col.name]" :disable="col.disable"
:title="col.title" buttons
@save="SaveValue" @show="selItem(props.row, col.field)">
@save="SaveValue" @show="selItem(props.row, col)">
<q-input v-model="props.row[col.name]"/>
</q-popup-edit>