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

13
src/common/shared_vuejs.ts
View File

@@ -1,21 +1,20 @@
export const shared_consts = {
Permissions: {
Normal: {
value: 0,
label: '[None]'
},
Admin: {
value: 1,
label: 'Admin'
label: 'pages.Admin',
icon: 'fas fa-user-shield'
},
Manager: {
value: 2,
label: 'Manager'
label: 'otherpages.manage.manager',
icon: 'fas fa-tools'
},
Teacher: {
value: 4,
label: 'Teacher'
label: 'event.teacher',
icon: 'fas fa-user-tie'
}
},

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'

2
src/model/GlobalStore.ts
View File

@@ -239,6 +239,8 @@ export interface ITableRec {
value: string
columns: IColGridTable[]
colkey: string
collabel: string
colicon?: string
}
export interface IDataPass {

45
src/statics/i18n.js
View File

@@ -18,7 +18,9 @@ const msgglobal = {
tableslist: 'Lista Tabelle',
},
manage: {
menu: 'Gestione'
menu: 'Gestione',
manager: 'Gestore',
nessuno: 'Nessuno'
},
messages: {
menu: 'I tuoi Messaggi'
@@ -50,6 +52,7 @@ const msgglobal = {
db: {
recupdated: 'Record Aggiornato',
recfailed: 'Errore durante aggiornamento Record',
reccanceled: 'Annullato Aggiornamento. Ripristinato valore precendente',
deleterecord: 'Elimina Record',
deletetherecord: 'Eliminare il Record?',
deletedrecord: 'Record Cancellato',
@@ -196,6 +199,10 @@ const msgglobal = {
themecolor: 'Tema Colore',
themebgcolor: 'Tema Colore Sfondo'
},
where: {
code: 'Id',
whereicon: 'Icona',
},
cal: {
booked: 'Prenotato',
booked_error: 'Prenotazione non avvenuta. Riprovare più tardi',
@@ -304,7 +311,9 @@ const msgglobal = {
tableslist: 'Listado de tablas',
},
manage: {
menu: 'Gestionar'
menu: 'Gestionar',
manager: 'Gerente',
nessuno: 'Nadie'
},
messages: {
menu: 'Tus mensajes'
@@ -336,6 +345,7 @@ const msgglobal = {
db: {
recupdated: 'Registro Actualizado',
recfailed: 'Error durante el registro de actualización',
reccanceled: 'Actualización cancelada Restaurar valor anterior',
deleterecord: 'Eliminar registro',
deletetherecord: '¿Eliminar el registro?',
deletedrecord: 'Registro cancelado',
@@ -476,6 +486,10 @@ const msgglobal = {
themecolor: 'Tema Colores',
themebgcolor: 'Tema Colores Fondo'
},
where: {
code: 'Id',
whereicon: 'Icono',
},
cal: {
booked: 'Reservado',
booked_error: 'Reserva fallida. Intenta nuevamente más tarde',
@@ -581,7 +595,9 @@ const msgglobal = {
tableslist: 'Liste des tables',
},
manage: {
menu: 'Gérer'
menu: 'Gérer',
manager: 'Directeur',
nessuno: 'Aucun'
},
messages: {
menu: 'Vos messages'
@@ -613,6 +629,7 @@ const msgglobal = {
db: {
recupdated: 'Enregistrement mis à jour',
recfailed: 'Erreur lors de la mise à jour',
reccanceled: 'Mise à jour annulée. Restaurer la valeur précédente',
deleterecord: 'Supprimer l\'enregistrement',
deletetherecord: 'Supprimer l\'enregistrement?',
deletedrecord: 'Enregistrement annulé',
@@ -752,6 +769,10 @@ const msgglobal = {
themecolor: 'Tema Colores',
themebgcolor: 'Tema Colores Fondo'
},
where: {
code: 'Id',
whereicon: 'icône',
},
cal: {
booked: 'Réservé',
booked_error: 'La réservation a échoué. Réessayez plus tard',
@@ -857,7 +878,9 @@ const msgglobal = {
tableslist: 'List of tables',
},
manage: {
menu: 'Manage'
menu: 'Manage',
manager: 'Manager',
nessuno: 'None'
},
messages: {
menu: 'Your Messages'
@@ -889,6 +912,7 @@ const msgglobal = {
db: {
recupdated: 'Record Updated',
recfailed: 'Error during update Record',
reccanceled: 'Canceled Update. Restore previous value',
deleterecord: 'Delete Record',
deletetherecord: 'Delete the Record?',
deletedrecord: 'Record Deleted',
@@ -1027,6 +1051,10 @@ const msgglobal = {
themecolor: 'Theme Color',
themebgcolor: 'Theme Color Background'
},
where: {
code: 'Id',
whereicon: 'Icon',
},
cal: {
booked: 'Booked',
booked_error: 'Reservation failed. Try again later',
@@ -1132,7 +1160,9 @@ const msgglobal = {
tableslist: 'List of tables',
},
manage: {
menu: 'Manage'
menu: 'Manage',
manager: 'Manager',
nessuno: 'None'
},
messages: {
menu: 'Your Messages'
@@ -1164,6 +1194,7 @@ const msgglobal = {
db: {
recupdated: 'Record Updated',
recfailed: 'Error during update Record',
reccanceled: 'Canceled Update. Restore previous value',
deleterecord: 'Delete Record',
deletetherecord: 'Delete the Record?',
deletedrecord: 'Record Deleted',
@@ -1304,6 +1335,10 @@ const msgglobal = {
themecolor: 'Theme Color',
themebgcolor: 'Theme Color Background'
},
where: {
code: 'Id',
whereicon: 'Icon',
},
cal: {
booked: 'Booked',
booked_error: 'Reservation failed. Try again later',

58
src/store/Modules/fieldsTable.ts
View File

@@ -40,7 +40,7 @@ function AddCol(params: IColGridTable) {
const colTableWhere = [
AddCol({ name: 'code', label_trans: 'where.code' }),
AddCol({ name: 'placename', label_trans: 'where.placename' }),
AddCol({ name: 'placename', label_trans: 'cal.where' }),
AddCol({ name: 'whereicon', label_trans: 'where.whereicon' }),
AddCol(DeleteRec)
]
@@ -111,6 +111,30 @@ const colTableEvents = [
]
export const fieldsTable = {
getArrStrByValueBinary(mythis, col: IColGridTable, val) {
const arr = this.getArrByValueBinary(mythis, col, val)
if (arr.length > 0)
return arr.join(' - ')
else
return '[---]'
},
getArrByValueBinary(mythis, col: IColGridTable, val) {
if (col.jointable) {
const mylist = this.getTableJoinByName(col.jointable)
const key = this.getKeyByTable(col.jointable)
const myres = []
mylist.forEach((myrec) => {
if (tools.isBitActive(val, myrec[key]))
myres.push(mythis.$t(myrec.label))
})
return myres
} else {
return []
}
},
getColByTable(table) {
if (table === 'permissions') {
return ['value', 'label']
@@ -118,7 +142,7 @@ export const fieldsTable = {
},
getTableJoinByName(table) {
if (table === 'permissions') {
return [shared_consts.Permissions.Normal, shared_consts.Permissions.Admin, shared_consts.Permissions.Manager, shared_consts.Permissions.Teacher]
return [shared_consts.Permissions.Admin, shared_consts.Permissions.Manager, shared_consts.Permissions.Teacher]
}
},
getrecTableList(mytable) {
@@ -131,36 +155,56 @@ export const fieldsTable = {
else
return '_id'
},
getLabelByTable(mytable): string {
const myrec = this.getrecTableList(mytable)
if (myrec)
return ((myrec.collabel) ? myrec.collabel : 'label')
else
return 'label'
},
getIconByTable(mytable): string {
const myrec = this.getrecTableList(mytable)
if (myrec)
return ((myrec.icon) ? myrec.icon : '')
else
return ''
},
tablesList: [
{
value: 'operators',
label: 'Insegnanti',
columns: colTableOperator,
colkey: '_id'
colkey: '_id',
collabel: 'username'
},
{
value: 'wheres',
label: 'Luoghi',
columns: colTableWhere,
colkey: '_id'
colkey: '_id',
collabel: 'placename'
},
{
value: tools.TABEVENTS,
label: 'Eventi',
columns: colTableEvents,
colkey: '_id'
colkey: '_id',
collabel: 'title'
},
{
value: 'contribtype',
label: 'Tipi di Contributi',
columns: colcontribtype,
colkey: '_id'
colkey: '_id',
collabel: 'label'
},
{
value: 'permissions',
label: 'Permessi',
columns: colTablePermission,
colkey: 'value'
colkey: 'value',
collabel: 'label',
colicon: 'icon'
}
],

33
src/store/Modules/tools.ts
View File

@@ -37,6 +37,23 @@ export interface INotify {
}
export const tools = {
listBestColor: [
'blue',
'green',
'purple',
'deep-purple',
'indigo',
'light-blue',
'cyan',
'teal',
'lime',
'orange',
'deeporange',
'grey',
'blue-gray',
'yellow'
],
TABEVENTS: 'myevents',
MAX_CHARACTERS: 60,
@@ -1405,6 +1422,10 @@ export const tools = {
tools.showNotif(q, msg, { color: 'negative', icon: 'notifications' })
},
showNeutralNotif(q: any, msg) {
tools.showNotif(q, msg, { color: 'warning', icon: 'notifications' })
},
showNotif(q: any, msg, data ?: INotify | null
) {
let myicon = data ? data.icon : 'ion-add'
@@ -2494,7 +2515,10 @@ export const tools = {
},
isBitActive(bit, whattofind) {
return ((bit & whattofind) === whattofind)
if (whattofind > 0)
return ((bit & whattofind) === whattofind)
else
return false
},
SetBit(myval, bit) {
@@ -2513,6 +2537,13 @@ export const tools = {
.filter(e => arr[e]).map(e => arr[e])
return unique
},
getColorByIndexBest(index) {
if (index < this.listBestColor.length - 1)
return this.listBestColor[index]
else
return 'primary'
}
// getLocale() {