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

Add CMyToogleList and CMyChipList to views Binary choice number 2, 4, 8... show the Values Selected (join with other table)

Browse Source
This commit is contained in:
Paolo Arena
2019-10-28 19:00:06 +01:00
parent 340c813a7c
commit 6c9f97c716
18 changed files with 320 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/CDateTime/CDateTime.ts
View File

@@ -38,8 +38,12 @@ export default class CDateTime extends Vue {
this.valueprec = this.myvalue
this.$emit('show')
} else {
if (!this.saveit)
this.myvalue = this.valueprec
if (!this.saveit) {
if (this.myvalue !== this.valueprec) {
this.myvalue = this.valueprec
tools.showNeutralNotif(this.$q, this.$t('db.reccanceled'))
}
}
}
}
@@ -73,7 +77,7 @@ export default class CDateTime extends Vue {
}
public changeval(newval) {
console.log('changeval', newval)
// console.log('changeval', newval)
this.$emit('update:value', newval)
}
}

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

@@ -12,9 +12,11 @@ import { lists } from '../../store/Modules/lists'
import { IParamsQuery } from '../../model/GlobalStore'
import { fieldsTable } from '../../store/Modules/fieldsTable'
import { CDateTime } from '../CDateTime'
import { CMyToggleList } from '../CMyToggleList'
import { CMyChipList } from '../CMyChipList'
@Component({
components: { CDateTime }
components: { CDateTime, CMyToggleList, CMyChipList }
})
export default class CGridTableRec extends Vue {
@Prop({ required: false }) public prop_mytable: string
@@ -81,9 +83,6 @@ export default class CGridTableRec extends Vue {
this.rowsel = item
this.idsel = item._id
this.colsel = col
this.updateValueExtra(col, this.rowsel[col.name])
// console.log('this.idsel', this.idsel)
}
public undoVal() {
@@ -363,7 +362,7 @@ export default class CGridTableRec extends Vue {
}
}
public visuValByType(col, val) {
public visuValByType(col: IColGridTable, val) {
if (col.fieldtype === tools.FieldType.date) {
if (val === undefined) {
return '[]'
@@ -374,9 +373,9 @@ export default class CGridTableRec extends Vue {
return (val) ? this.$t('dialog.yes') : this.$t('dialog.no')
} else if (col.fieldtype === tools.FieldType.binary) {
if (val === undefined)
return '[]'
return '[---]'
else
return val
return fieldsTable.getArrStrByValueBinary(this, col, val)
} else {
if (val === undefined)
return '[]'
@@ -435,37 +434,4 @@ export default class CGridTableRec extends Vue {
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)
}
}
}

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

@@ -119,29 +119,28 @@
</div>
<div v-else-if="col.fieldtype === tools.FieldType.binary">
<div :class="getclassCol(col)">
{{ visuValByType(col, props.row[col.name]) }}
<CMyChipList
:value="props.row[col.name]"
:options="db_fieldsTable.getTableJoinByName(col.jointable)"
:optval="db_fieldsTable.getKeyByTable(col.jointable)"
:optlab="db_fieldsTable.getLabelByTable(col.jointable)"
:opticon="db_fieldsTable.getIconByTable(col.jointable)"
></CMyChipList>
<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
<CMyToggleList :label="col.title"
:options="db_fieldsTable.getTableJoinByName(col.jointable)"
@input="setResultJoin(col, props.row)"
:option-value="db_fieldsTable.getKeyByTable(col.jointable)"
style="min-width: 150px">
:value.sync="props.row[col.name]"
:optval="db_fieldsTable.getKeyByTable(col.jointable)"
:optlab="db_fieldsTable.getLabelByTable(col.jointable)"
</q-select>
>
<q-input v-model="props.row[col.name]"/>
{{ visuValByType(col, props.row[col.name]) }}
</CMyToggleList>
</q-popup-edit>
</div>

5
src/components/CMyChipList/CMyChipList.scss Normal file
View File

@@ -0,0 +1,5 @@
.clchip{
display: flex;
//flex: 1;
//flex-direction: column;
}

57
src/components/CMyChipList/CMyChipList.ts Normal file
View File

@@ -0,0 +1,57 @@
import Vue from 'vue'
import { Component, Prop, Watch } from 'vue-property-decorator'
import { tools } from '../../store/Modules/tools'
import { toolsext } from '@src/store/Modules/toolsext'
@Component({
name: 'CMyChipList'
})
export default class CMyChipList extends Vue {
public $t
@Prop({ required: true }) public options: []
@Prop({ required: true }) public value
@Prop({ required: true, default: '' }) public optlab
@Prop({ required: true, default: '' }) public optval
@Prop({ required: false, default: '' }) public myclass
@Prop({ required: false, default: '' }) public opticon
@Prop({ required: false, default: '' }) public optcolor
public myvalue = ''
public myarrvalues = []
get tools() {
return tools
}
public mounted() {
this.myarrvalues = []
console.table(this.options)
this.options.forEach((rec, index) => {
if (tools.isBitActive(this.value, rec[this.optval])) {
const mydata = {
label: this.$t(rec[this.optlab]),
value: rec[this.optval],
valbool: tools.isBitActive(this.value, rec[this.optval]),
icon: '',
color: tools.getColorByIndexBest(index)
}
if (this.opticon)
mydata.icon = rec[this.opticon]
if (this.optcolor)
mydata.color = rec[this.optcolor]
this.myarrvalues.push(mydata)
}
})
if (this.myarrvalues.length === 0)
this.myarrvalues.push({ label: this.$t('otherpages.manage.nessuno'), color: 'gray' })
console.log('arrvalues=', this.myarrvalues)
}
}

19
src/components/CMyChipList/CMyChipList.vue Normal file
View File

@@ -0,0 +1,19 @@
<template>
<div class="clchip">
<div v-for="(rec, index) in myarrvalues">
<q-chip dense
:color="rec.color"
text-color="white"
:icon="rec.icon">
{{rec.label}}
</q-chip>
</div>
</div>
</template>
<script lang="ts" src="./CMyChipList.ts">
</script>
<style lang="scss" scoped>
@import './CMyChipList.scss';
</style>

1
src/components/CMyChipList/index.ts Normal file
View File

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

2
src/components/CMySelect/CMySelect.ts
View File

@@ -31,7 +31,7 @@ export default class CMySelect extends Vue {
}
public changeval(newval) {
console.log('changeval', newval)
// console.log('changeval', newval)
// const newvallab = newval[`${this.optval}`]
// this.myvalue = newvallab
this.$emit('update:value', newval)

5
src/components/CMyToggleList/CMyToggleList.scss Normal file
View File

@@ -0,0 +1,5 @@
.cltoggle{
display: flex;
flex: 1;
flex-direction: column;
}

50
src/components/CMyToggleList/CMyToggleList.ts Normal file
View File

@@ -0,0 +1,50 @@
import Vue from 'vue'
import { Component, Prop, Watch } from 'vue-property-decorator'
import { tools } from '../../store/Modules/tools'
import { toolsext } from '@src/store/Modules/toolsext'
@Component({
name: 'CMyToggleList'
})
export default class CMyToggleList extends Vue {
public $t
@Prop({ required: true }) public options: []
@Prop({ required: true }) public value
@Prop({ required: true, default: '' }) public label
@Prop({ required: false, default: '' }) public myclass
@Prop({ required: true, default: '' }) public optlab
@Prop({ required: true, default: '' }) public optval
public myvalue = ''
public myarrvalues = []
get tools() {
return tools
}
public changeval(newval) {
// Update value
const totale = this.myarrvalues.filter((rec) => rec.valbool).reduce((sum, rec) => sum + rec.value, 0)
this.myvalue = totale
// Refresh value
this.$emit('update:value', this.myvalue)
}
public mounted() {
this.myarrvalues = []
console.table(this.options)
this.options.forEach((rec) => {
const mydata = {
label: this.$t(rec[this.optlab]),
value: rec[this.optval],
valbool: tools.isBitActive(this.value, rec[this.optval])
}
this.myarrvalues.push(mydata)
})
}
}

20
src/components/CMyToggleList/CMyToggleList.vue Normal file
View File

@@ -0,0 +1,20 @@
<template>
<div>
<div class="cltoggle" v-for="(rec, index) in myarrvalues">
<q-toggle
v-model="rec.valbool"
:label="rec.label"
:color="tools.getColorByIndexBest(index)"
keep-color
@input="changeval">
</q-toggle>
</div>
</div>
</template>
<script lang="ts" src="./CMyToggleList.ts">
</script>
<style lang="scss" scoped>
@import './CMyToggleList.scss';
</style>

1
src/components/CMyToggleList/index.ts Normal file
View File

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

2
src/components/index.ts
View File

@@ -7,6 +7,8 @@ export * from './CBook'
export * from './CMyPage'
export * from './CTitle'
export * from './CMySelect'
export * from './CMyToggleList'
export * from './CMyChipList'
export * from './CMyEditor'
export * from './CImgText'
export * from './CImgTitle'