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

- Added TablesList page

Browse Source 
- Added Insert Record empty
This commit is contained in:
Paolo Arena
2019-10-20 01:22:38 +02:00
parent 4a7c68fbd5
commit 313a7db77d
16 changed files with 292 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,19 +5,28 @@ import { GlobalStore, UserStore } from '../../store/Modules/index'
import { tools } from '../../store/Modules/tools'
import { shared_consts } from '../../common/shared_vuejs'
import { ICategory, IColGridTable } from '../../model'
import { ICategory, IColGridTable, ITableRec } from '../../model'
import { CTodo } from '../todos/CTodo'
import { SingleProject } from '../projects/SingleProject'
import { lists } from '../../store/Modules/lists'
@Component({})
export default class CGridTableRec extends Vue {
@Prop({ required: true }) public mytable: string
@Prop({ required: true }) public mytitle: string
@Prop({ required: true }) public mycolumns: any[]
@Prop({ required: true }) public colkey: string
@Prop({ required: false }) public prop_mytable: string
@Prop({ required: true }) public prop_mytitle: string
@Prop({ required: false, default: [] }) public prop_mycolumns: any[]
@Prop({ required: false, default: '' }) public prop_colkey: string
@Prop({ required: false, default: '' }) public nodataLabel: string
@Prop({ required: false, default: '' }) public noresultLabel: string
@Prop({ required: false, default: null }) public tablesList: ITableRec[]
public mytable: string
public mytitle: string
public mycolumns: any[]
public colkey: string
public tablesel: string = ''
public $q
public $t
public loading: boolean = false
@@ -30,6 +39,7 @@ export default class CGridTableRec extends Vue {
} = { sortBy: '', descending: false, page: 1, rowsNumber: 10, rowsPerPage: 10 }
public serverData: any [] = []
public spinner_visible: boolean = false
public idsel: string = ''
public colsel: string = ''
@@ -61,11 +71,11 @@ export default class CGridTableRec extends Vue {
}
public selItem(item, colsel) {
console.log('item', item)
// console.log('item', item)
this.selected = item
this.idsel = item._id
this.colsel = colsel
console.log('this.idsel', this.idsel)
// console.log('this.idsel', this.idsel)
}
public undoVal() {
@@ -84,9 +94,7 @@ export default class CGridTableRec extends Vue {
// colkey: this.colkey,
id: this.idsel,
table: this.mytable,
fieldsvalue: {
}
fieldsvalue: {}
}
mydata.fieldsvalue[this.colsel] = newVal
@@ -103,15 +111,28 @@ export default class CGridTableRec extends Vue {
public created() {
// this.serverData = this.mylist.slice() // [{ chiave: 'chiave1', valore: 'valore 1' }]
this.mycolumns.forEach((elem) => {
if (elem.field !== '')
this.colVisib.push(elem.field)
if (elem.visible && elem.field === '')
this.colExtra.push(elem.name)
this.mytable = this.prop_mytable
this.mytitle = this.prop_mytitle
this.mycolumns = this.prop_mycolumns
this.colkey = this.prop_colkey
})
this.changeTable(false)
}
public updatedcol() {
if (this.mycolumns) {
this.colVisib = []
this.colExtra = []
this.mycolumns.forEach((elem) => {
if (elem.field !== '')
this.colVisib.push(elem.field)
if (elem.visible && elem.field === '')
this.colExtra.push(elem.name)
})
}
}
get getrows() {
@@ -122,8 +143,13 @@ export default class CGridTableRec extends Vue {
const { page, rowsPerPage, rowsNumber, sortBy, descending } = props.pagination
const filter = props.filter
if (!this.mytable)
return
this.loading = true
this.spinner_visible = true
// update rowsCount with appropriate value
// get all rows if "All" (0) is selected
@@ -133,13 +159,20 @@ export default class CGridTableRec extends Vue {
const startRow = (page - 1) * rowsPerPage
const endRow = startRow + fetchCount
// fetch data from "server"
// fetch data from "server"
this.fetchFromServer(startRow, endRow, filter, sortBy, descending).then((ris) => {
this.pagination.rowsNumber = this.getRowsNumberCount(filter)
// clear out existing data and add new
this.serverData.splice(0, this.serverData.length, ...this.returnedData)
if (this.returnedData === []) {
this.serverData = []
} else {
if (this.serverData.length > 0)
this.serverData.splice(0, this.serverData.length, ...this.returnedData)
else
this.serverData = [...this.returnedData]
}
// don't forget to update local pagination object
this.pagination.page = page
@@ -149,6 +182,7 @@ export default class CGridTableRec extends Vue {
// ...and turn of loading indicator
this.loading = false
this.spinner_visible = false
})
}
@@ -174,8 +208,6 @@ export default class CGridTableRec extends Vue {
descending
}
console.table(params)
const data = await GlobalStore.actions.loadTable(params)
if (data) {
@@ -186,7 +218,9 @@ export default class CGridTableRec extends Vue {
this.returnedCount = 0
}
// if (!filter) {
return true
// if (!filter) {
// data = this.original.slice(startRow, startRow + count)
// }
// else {
@@ -244,6 +278,21 @@ export default class CGridTableRec extends Vue {
return (col.disable || !this.canEdit) ? '' : 'colmodif'
}
public async createNewRecord() {
this.loading = true
const mydata = {
table: this.mytable,
data: {}
}
const data = await GlobalStore.actions.saveTable(mydata)
this.serverData.push(data)
this.pagination.rowsNumber++
this.loading = false
}
public saveFieldValue(mydata) {
console.log('saveFieldValue', mydata)
@@ -259,11 +308,11 @@ export default class CGridTableRec extends Vue {
}
public mounted() {
this.mycolumns.forEach((rec: IColGridTable) => {
if (rec.label_trans)
rec.label = this.$t(rec.label_trans)
})
this.changeTable(false)
}
public refresh() {
this.onRequest({
pagination: this.pagination,
filter: undefined
@@ -278,7 +327,8 @@ export default class CGridTableRec extends Vue {
public ActionAfterYes(action, item) {
if (action === lists.MenuAction.DELETE_RECTABLE) {
this.serverData.splice(this.serverData.indexOf(item), 1)
if (this.serverData.length > 0)
this.serverData.splice(this.serverData.indexOf(item), 1)
}
}
@@ -296,10 +346,51 @@ export default class CGridTableRec extends Vue {
public visuValByType(col, val) {
if (col.isdate) {
return tools.getstrDateTime(val)
if (val === undefined) {
return '[]'
} else {
return tools.getstrDateTime(val)
}
} else {
return val
if (val === undefined) {
return '[]'
} else {
let mystr = tools.firstchars(val, tools.MAX_CHARACTERS)
if (val.length > tools.MAX_CHARACTERS)
mystr += '...'
return mystr
}
}
}
public changeTable(mysel) {
// console.log('changeTable')
let mytab = null
if (this.tablesList) {
if (!this.tablesel) {
this.tablesel = this.tablesList[0].value
}
mytab = this.tablesList.find((rec) => rec.value === this.tablesel)
}
if (mytab) {
this.mytitle = mytab.label
this.colkey = mytab.colkey
this.mycolumns = [...mytab.columns]
}
this.mycolumns.forEach((rec: IColGridTable) => {
if (rec.label_trans)
rec.label = this.$t(rec.label_trans)
})
if (mytab) {
this.mytable = mytab.value
}
this.updatedcol()
this.refresh()
}
}

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

@@ -34,14 +34,20 @@
<!--<p style="color:red"> Rows: {{ getrows }}</p>-->
<q-toggle v-model="funcActivated" :val="lists.MenuAction.CAN_EDIT_TABLE"
<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" label="Add Record"
@click="createNewRecord"></q-btn>
<q-space/>
<!--<q-toggle v-for="(mycol, index) in mycolumns" v-model="colVisib" :val="rec.field" :label="mycol.label"></q-toggle>-->
<q-select
v-if="mytable"
v-model="colVisib"
multiple
borderless
@@ -56,18 +62,71 @@
</q-select>
<q-select v-if="tablesList"
v-model="tablesel"
rounded
outlined
dense
:options="tablesList"
:display-value="mytitle"
emit-value
@input="changeTable"
>
</q-select>
<q-inner-loading :showing="spinner_visible">
<q-spinner-gears size="50px" color="primary"/>
</q-inner-loading>
</template>
<q-tr slot="body" slot-scope="props" :props="props">
<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 :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)">
<q-input v-model="props.row[col.name]"/>
<div v-if="col.isdate">
<div style="max-width: 250px">
<q-input dense v-model="props.row[col.name]">
<template v-slot:prepend>
<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-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>
</template>
<template v-slot:append>
<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>
</template>
</q-input>
</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)">
<q-input v-model="props.row[col.name]"/>
</q-popup-edit>
</div>
</div>
</q-td>
<q-td v-for="col in mycolumns" :key="col.name" :props="props" v-if="colExtra.includes(col.name)">