other components...
This commit is contained in:
Paolo Arena
17
src/components/CMyFieldDb/CMyFieldDb.scss
Executable file
17
src/components/CMyFieldDb/CMyFieldDb.scss
Executable file
@@ -0,0 +1,17 @@
|
||||
.colmodif {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.colmodif:hover {
|
||||
background-color: #a8f0ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.colsel {
|
||||
background-color: #81b8ff;
|
||||
}
|
||||
|
||||
.cldisable{
|
||||
color: gray !important;
|
||||
}
|
||||
164
src/components/CMyFieldDb/CMyFieldDb.ts
Executable file
164
src/components/CMyFieldDb/CMyFieldDb.ts
Executable file
@@ -0,0 +1,164 @@
|
||||
import { Component, Prop, Watch } from 'vue-property-decorator'
|
||||
|
||||
import { tools } from '../../store/Modules/tools'
|
||||
import { toolsext } from '@src/store/Modules/toolsext'
|
||||
|
||||
import { QEditor } from 'quasar'
|
||||
import { CMyEditor } from '../CMyEditor'
|
||||
import MixinBase from '../../mixins/mixin-base'
|
||||
import { fieldsTable } from '../../store/Modules/fieldsTable'
|
||||
import { IColGridTable } from '../../model'
|
||||
import { CMySelect } from '../CMySelect'
|
||||
import { GlobalStore, UserStore } from '../../store/Modules'
|
||||
import { CMyChipList } from '../CMyChipList'
|
||||
import { CMyToggleList } from '../CMyToggleList'
|
||||
import translate from '@src/globalroutines/util'
|
||||
import { CDateTime } from '../CDateTime'
|
||||
|
||||
@Component({
|
||||
name: 'CMyFieldDb',
|
||||
components: { CMyEditor, CMySelect, CMyChipList, CMyToggleList, CDateTime }
|
||||
})
|
||||
|
||||
export default class CMyFieldDb extends MixinBase {
|
||||
@Prop({ required: true }) public title
|
||||
@Prop({ required: true }) public mykey: string
|
||||
@Prop({ required: false, default: '' }) public mysubkey: string
|
||||
@Prop({ required: true }) public type: number
|
||||
@Prop({ required: false, default: false }) public serv: boolean
|
||||
@Prop({ required: false, default: false }) public disable: boolean
|
||||
@Prop({ required: false, default: '' }) public jointable: string
|
||||
@Prop({ required: false, default: 'settings' }) public table: string
|
||||
@Prop({ required: false, default: '' }) public myimg: string
|
||||
@Prop({ required: false, default: '' }) public id: string
|
||||
@Prop({ required: false, default: '' }) public idmain: string
|
||||
|
||||
public $t
|
||||
public myvalue = ''
|
||||
public col: IColGridTable = { name: 'test' }
|
||||
public canEdit: boolean = true
|
||||
public countryname = ''
|
||||
|
||||
public created() {
|
||||
this.crea()
|
||||
}
|
||||
|
||||
public crea() {
|
||||
|
||||
this.myvalue = this.getValDb(this.mykey, this.serv, '', this.table, this.mysubkey, this.id, this.idmain)
|
||||
this.col.jointable = this.jointable
|
||||
this.col.fieldtype = this.type
|
||||
this.col.label = this.title
|
||||
|
||||
// console.log('CMyFieldDb crea', this.myvalue)
|
||||
}
|
||||
|
||||
@Watch('id')
|
||||
public idchanged(value) {
|
||||
this.crea()
|
||||
}
|
||||
|
||||
public getclassCol(col) {
|
||||
if (col) {
|
||||
let mycl = (this.disable || col.disable) ? '' : 'colmodif '
|
||||
mycl += ((col.fieldtype === tools.FieldType.date) || (col.fieldtype === tools.FieldType.onlydate)) ? ' coldate flex flex-container ' : ''
|
||||
|
||||
return mycl
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
public visuValByType(val) {
|
||||
if (this.col.fieldtype === tools.FieldType.date) {
|
||||
if (val === undefined) {
|
||||
return '[]'
|
||||
} else {
|
||||
return tools.getstrDateTime(val)
|
||||
}
|
||||
} else if (this.col.fieldtype === tools.FieldType.onlydate) {
|
||||
if (val === undefined) {
|
||||
return '[]'
|
||||
} else {
|
||||
return tools.getstrDate(val)
|
||||
}
|
||||
} else if (this.col.fieldtype === tools.FieldType.boolean) {
|
||||
return (val) ? this.$t('dialog.yes') : this.$t('dialog.no')
|
||||
} else if (this.col.fieldtype === tools.FieldType.binary) {
|
||||
if (val === undefined)
|
||||
return '[---]'
|
||||
else
|
||||
return fieldsTable.getArrStrByValueBinary(this, this.col, val)
|
||||
} else if (this.col.fieldtype === tools.FieldType.select) {
|
||||
if (val === undefined)
|
||||
return '[---]'
|
||||
else
|
||||
return fieldsTable.getValueByTable(this.col, val)
|
||||
} else if (this.col.fieldtype === tools.FieldType.multiselect) {
|
||||
if (val === undefined)
|
||||
return '[---]'
|
||||
else
|
||||
return fieldsTable.getMultiValueByTable(this.col, val)
|
||||
} else if (this.col.fieldtype === tools.FieldType.multioption) {
|
||||
if (val === undefined)
|
||||
return '[---]'
|
||||
else
|
||||
return fieldsTable.getMultiValueByTable(this.col, val)
|
||||
} else if (this.col.fieldtype === tools.FieldType.password) {
|
||||
if (val === undefined)
|
||||
return '[---]'
|
||||
else
|
||||
return '***************'
|
||||
} else {
|
||||
if (val === undefined)
|
||||
return ' <span class="text-grey">(' + translate('reg.select') + ')</span> '
|
||||
else if (val === '') {
|
||||
return ' <span class="text-grey">(' + translate('reg.select') + ')</span> '
|
||||
} else {
|
||||
let mystr = tools.firstchars(val, 5000)
|
||||
if (val) {
|
||||
if (val.length > 5000)
|
||||
mystr += '...'
|
||||
} else {
|
||||
return val
|
||||
}
|
||||
return mystr
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
get mycl() {
|
||||
if (this.disable) {
|
||||
return 'cldisable'
|
||||
}
|
||||
}
|
||||
|
||||
get myvalprinted() {
|
||||
return this.visuValByType(this.myvalue)
|
||||
}
|
||||
|
||||
public savefield(value, initialval) {
|
||||
this.myvalue = value
|
||||
this.setValDb(this.mykey, this.myvalue, this.type, this.serv, this.table, this.mysubkey, this.id)
|
||||
}
|
||||
|
||||
public savefieldboolean(value) {
|
||||
if (this.myvalue === undefined)
|
||||
this.myvalue = 'true'
|
||||
else
|
||||
this.myvalue = value
|
||||
|
||||
this.setValDb(this.mykey, this.myvalue, this.type, this.serv, this.table, this.mysubkey, this.id)
|
||||
}
|
||||
|
||||
public selectcountry({ name, iso2, dialCode }) {
|
||||
// console.log(name, iso2, dialCode)
|
||||
this.myvalue = iso2
|
||||
this.countryname = name
|
||||
}
|
||||
|
||||
public intcode_change(coderec) {
|
||||
this.myvalue = '+' + coderec.dialCode
|
||||
}
|
||||
|
||||
}
|
||||
274
src/components/CMyFieldDb/CMyFieldDb.vue
Executable file
274
src/components/CMyFieldDb/CMyFieldDb.vue
Executable file
@@ -0,0 +1,274 @@
|
||||
<template>
|
||||
<div class="text-center">
|
||||
<div class="row items-center justify-center q-gutter-md q-ma-xs">
|
||||
|
||||
<div class="q-ma-xs">
|
||||
<q-field rounded outlined bg-color="blue-1" dense style="min-width:110px;">
|
||||
<template v-slot:control>
|
||||
<div class="centermydiv">
|
||||
<div v-if="myimg" class="text-center">
|
||||
<q-img
|
||||
:src="myimg"
|
||||
class="text-center"
|
||||
style="height: 50px; width: 50px;"
|
||||
:alt="title">
|
||||
</q-img>
|
||||
</div>
|
||||
<div class="self-center full-width no-outline text-center" tabindex="0">{{ title }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</q-field>
|
||||
</div>
|
||||
<div :class="getclassCol(col) + ` q-ma-sm q-pa-sm col-grow rounded-borders`" style="border: 1px solid #bbb">
|
||||
<div v-if="type === tools.FieldType.date">
|
||||
<CDateTime
|
||||
:label="col.label"
|
||||
class="cursor-pointer"
|
||||
:value.sync="myvalue"
|
||||
:readonly="false"
|
||||
:dense="true"
|
||||
:canEdit="canEdit"
|
||||
>
|
||||
</CDateTime>
|
||||
</div>
|
||||
<div v-else-if="type === tools.FieldType.onlydate">
|
||||
<CDateTime
|
||||
:label="col.label"
|
||||
class="cursor-pointer"
|
||||
:value.sync="myvalue"
|
||||
:readonly="false"
|
||||
:dense="true"
|
||||
:canEdit="canEdit"
|
||||
view="date"
|
||||
>
|
||||
</CDateTime>
|
||||
</div>
|
||||
<div v-else :class="mycl">
|
||||
<div v-if="type === tools.FieldType.binary">
|
||||
<CMyChipList
|
||||
:type="tools.FieldType.binary"
|
||||
:value="myvalue"
|
||||
: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>
|
||||
</div>
|
||||
<!-- Show Value -->
|
||||
<div v-else-if="type === tools.FieldType.nationality">
|
||||
<q-input
|
||||
input-class="cursor-pointer text-center"
|
||||
:readonly="true"
|
||||
v-model="countryname"
|
||||
rounded
|
||||
dense
|
||||
debounce="1000"
|
||||
>
|
||||
|
||||
<div class="hidden">
|
||||
<vue-country-code
|
||||
:defaultCountry="myvalue"
|
||||
:disabledFetchingCountry="true"
|
||||
@onSelect="selectcountry"
|
||||
:preferredCountries="tools.getprefCountries"
|
||||
:dropdownOptions="{ disabledDialCode: true }">
|
||||
|
||||
</vue-country-code>
|
||||
</div>
|
||||
|
||||
</q-input>
|
||||
</div>
|
||||
<div v-else-if="type === tools.FieldType.intcode">
|
||||
|
||||
<div v-html="myvalprinted"></div>
|
||||
|
||||
</div>
|
||||
<div v-else-if="((type === tools.FieldType.multiselect) || (type === tools.FieldType.multioption))">
|
||||
<CMyChipList
|
||||
:type="type"
|
||||
:value="myvalue"
|
||||
: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>
|
||||
</div>
|
||||
<div v-else-if="type === tools.FieldType.select">
|
||||
<CMyChipList
|
||||
myclass="text-center"
|
||||
:type="tools.FieldType.select"
|
||||
:value="myvalue"
|
||||
: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>
|
||||
</div>
|
||||
<div v-else-if="type === tools.FieldType.html">
|
||||
<div v-html="myvalprinted">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="type === tools.FieldType.boolean">
|
||||
<q-toggle dark color="green" v-model="myvalue" :label="col.title"
|
||||
@input="savefieldboolean"></q-toggle>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-html="myvalprinted"></div>
|
||||
</div>
|
||||
|
||||
<q-popup-edit
|
||||
v-if="(canEdit && type !== tools.FieldType.boolean) && !disable"
|
||||
v-model="myvalue"
|
||||
:disable="col.disable"
|
||||
:title="col.title"
|
||||
@save="savefield"
|
||||
buttons
|
||||
>
|
||||
|
||||
<div v-if="type === tools.FieldType.boolean">
|
||||
<q-checkbox v-model="myvalue" :label="col.title">
|
||||
</q-checkbox>
|
||||
<div v-html="visuValByType(myvalue)">
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="type === tools.FieldType.string">
|
||||
<q-input v-model="myvalue"
|
||||
|
||||
autogrow
|
||||
@keyup.enter.stop
|
||||
autofocus>
|
||||
|
||||
</q-input>
|
||||
</div>
|
||||
<div v-else-if="type === tools.FieldType.password">
|
||||
<q-input v-model="myvalue"
|
||||
type="password"
|
||||
@keyup.enter.stop
|
||||
autofocus>
|
||||
|
||||
</q-input>
|
||||
</div>
|
||||
<div v-else-if="type === tools.FieldType.number">
|
||||
<q-input v-model="myvalue" type="number"
|
||||
autofocus>
|
||||
|
||||
</q-input>
|
||||
</div>
|
||||
<div v-else-if="type === tools.FieldType.hours">
|
||||
<CMySelect label="Ore" :value.sync="myvalue"
|
||||
optval="_id" optlab="label"
|
||||
:useinput="false"
|
||||
o :options="tools.SelectHours">
|
||||
</CMySelect>
|
||||
</div>
|
||||
<div v-else-if="type === tools.FieldType.binary">
|
||||
<CMyToggleList :label="col.title"
|
||||
:options="db_fieldsTable.getTableJoinByName(col.jointable)"
|
||||
:value.sync="myvalue"
|
||||
:optval="db_fieldsTable.getKeyByTable(col.jointable)"
|
||||
:optlab="db_fieldsTable.getLabelByTable(col.jointable)">
|
||||
</CMyToggleList>
|
||||
</div>
|
||||
<div v-else-if="type === tools.FieldType.html">
|
||||
<CMyEditor :value.sync="myvalue" :title="title" @keyup.enter.stop>
|
||||
|
||||
</CMyEditor>
|
||||
</div>
|
||||
<div v-else-if="type === tools.FieldType.select">
|
||||
<CMySelect :label="col.title"
|
||||
:value.sync="myvalue"
|
||||
:optval="db_fieldsTable.getKeyByTable(col.jointable)"
|
||||
:optlab="db_fieldsTable.getLabelByTable(col.jointable)"
|
||||
:options="db_fieldsTable.getTableJoinByName(col.jointable)"
|
||||
:useinput="false">
|
||||
</CMySelect>
|
||||
</div>
|
||||
<div v-else-if="col.fieldtype === tools.FieldType.nationality">
|
||||
<div class="justify-center q-gutter-sm clgutter q-mt-sm">
|
||||
<q-input
|
||||
v-model="countryname"
|
||||
:readonly="true"
|
||||
rounded dense
|
||||
debounce="1000"
|
||||
:label="title">
|
||||
|
||||
<template v-slot:prepend>
|
||||
<div style="font-size: 1rem;">
|
||||
<vue-country-code
|
||||
:defaultCountry="myvalue"
|
||||
:disabledFetchingCountry="true"
|
||||
@onSelect="selectcountry"
|
||||
:preferredCountries="tools.getprefCountries"
|
||||
:dropdownOptions="{ disabledDialCode: true }">
|
||||
|
||||
</vue-country-code>
|
||||
</div>
|
||||
</template>
|
||||
</q-input>
|
||||
<div style="height: 180px;">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="col.fieldtype === tools.FieldType.intcode">
|
||||
|
||||
<div class="justify-center q-gutter-sm clgutter q-mt-sm">
|
||||
<vue-tel-input
|
||||
@country-changed="intcode_change"
|
||||
v-model="myvalue"
|
||||
:disabledFetchingCountry="true"
|
||||
:preferredCountries="tools.getprefCountries"
|
||||
:placeholder="$t('reg.cell')"
|
||||
:enabledCountryCode="true"
|
||||
inputClasses="clCell"
|
||||
wrapperClasses="clCellCode">
|
||||
</vue-tel-input>
|
||||
<div style="height: 180px;">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div v-else-if="col.fieldtype === tools.FieldType.multiselect">
|
||||
<CMyToggleList :label="col.title"
|
||||
:options="db_fieldsTable.getTableJoinByName(col.jointable)"
|
||||
:value.sync="myvalue"
|
||||
:optval="db_fieldsTable.getKeyByTable(col.jointable)"
|
||||
:optlab="db_fieldsTable.getLabelByTable(col.jointable)"
|
||||
:isarray="true">
|
||||
</CMyToggleList>
|
||||
|
||||
<!--
|
||||
<q-select
|
||||
v-model="myvalue"
|
||||
rounded
|
||||
dense
|
||||
outlined
|
||||
multiple
|
||||
options-dense
|
||||
:display-value="db_fieldsTable.getTitleByTable(col.jointable)"
|
||||
emit-value
|
||||
map-options
|
||||
:options="db_fieldsTable.getTableJoinByName(col.jointable)"
|
||||
:option-label="db_fieldsTable.getLabelByTable(col.jointable)"
|
||||
:option-value="db_fieldsTable.getKeyByTable(col.jointable)"
|
||||
style="min-width: 150px"
|
||||
>
|
||||
|
||||
</q-select>
|
||||
-->
|
||||
</div>
|
||||
<div v-else-if="col.fieldtype === tools.FieldType.multioption">
|
||||
</div>
|
||||
|
||||
</q-popup-edit>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./CMyFieldDb.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './CMyFieldDb.scss';
|
||||
</style>
|
||||
1
src/components/CMyFieldDb/index.ts
Executable file
1
src/components/CMyFieldDb/index.ts
Executable file
@@ -0,0 +1 @@
|
||||
export {default as CMyFieldDb} from './CMyFieldDb.vue'
|
||||
Reference in New Issue
Block a user