- CMyPopupEdit

- Star
- Insert and Edit
- Update quasar 3.2.4
This commit is contained in:
Paolo Arena
2021-12-02 10:12:57 +01:00
parent ea9822e5f6
commit 5ae0518030
32 changed files with 3849 additions and 3335 deletions

View File

@@ -44,10 +44,12 @@ $grayshadow: #555;
min-width: 200px;
padding: 1rem 1rem;
height: 350px;
margin: auto;
}
.my-card-gallery-view {
width: 100px;
height: 100px;
padding: 0.5rem 0.5rem;
margin: auto;
}

View File

@@ -25,7 +25,7 @@ export default defineComponent({
required: true,
},
imgGall: {
type: Object as PropType<IImgGallery | string | undefined>,
type: Object as PropType<IImgGallery | string | undefined | null>,
required: true,
},
},

View File

@@ -31,7 +31,6 @@
v-model="order">-->
<div v-for="(mygallery, index) in getlistimages()" :key="index">
mygallery : {{ mygallery }}
<div
class="q-pa-sm q-gutter-sm"
@dragenter="onDragEnter"

View File

@@ -20,3 +20,10 @@
font-size: 1rem;
}
}
.q-table {
&__col {
font-size: 1rem;
color: gray;
}
}

View File

@@ -3,7 +3,16 @@ import { useI18n } from '@src/boot/i18n'
import { tools } from '../../store/Modules/tools'
import { IColGridTable, IFilter, ITableRec, IPagination, IParamDialog, IEvents, IDataToSet } from '../../model'
import {
IColGridTable,
IFilter,
ITableRec,
IPagination,
IParamDialog,
IEvents,
IDataToSet,
IMySkill
} from '../../model'
import { lists } from '../../store/Modules/lists'
import { IParamsQuery } from '../../model/GlobalStore'
import { CMyPopupEdit } from '../CMyPopupEdit'
@@ -39,6 +48,16 @@ export default defineComponent({
required: false,
default: '',
},
prop_search: {
type: Boolean,
required: false,
default: true,
},
vertical: {
type: Boolean,
required: false,
default: false,
},
prop_codeId: {
type: String,
required: false,
@@ -105,8 +124,9 @@ export default defineComponent({
const addRow = ref('Aggiungi')
const newRecordBool = ref(false)
const editRecordBool = ref(false)
const newRecord: any = ref({})
const savenewRec = ref(false)
const recModif: any = ref({})
const mytable = ref('')
const mytitle = ref('')
@@ -275,6 +295,12 @@ export default defineComponent({
}
function refresh_arr() {
const myarr = [...serverData.value]
serverData.value = []
serverData.value = [...myarr]
}
function refresh_table() {
onRequest({
pagination: pagination.value
@@ -327,11 +353,14 @@ export default defineComponent({
}
}
function selItem(item: any, col: IColGridTable) {
console.log('selItem', item)
function selItem(item: any, col: IColGridTable, inmodif?: boolean) {
console.log('selItem', item, col)
rowsel = item
idsel = item._id
colsel.value = col
if (inmodif) {
}
}
function undoVal() {
@@ -373,11 +402,16 @@ export default defineComponent({
}
function annulla(val: any) {
// console.log('annulla')
globalStore.DeleteRec({ table: mytable.value, id: newRecord.value._id })
.then((ris) => {
return true
})
console.log('annulla')
if (newRecord.value) {
globalStore.DeleteRec({ table: mytable.value, id: newRecord.value._id })
.then((ris) => {
// console.log('deleted', ris)
serverData.value.pop(ris)
newRecord.value = null
return true
})
}
}
function SaveValue(newVal: any, valinitial: any) {
@@ -391,11 +425,6 @@ export default defineComponent({
}
if (myfield) {
if (colsel.value) {
// console.log('rowsel[myfield]', rowsel[myfield], 'field', myfield)
// console.log('subf', subf)
}
if (colsel.value) {
// Update value in table memory
if (subf !== '') {
@@ -465,18 +494,13 @@ export default defineComponent({
const mydata: any = {
table: mytable.value,
data: function () {
return {}
}
data: {}
}
mydata.data = props.defaultnewrec
if (props.defaultnewrec)
mydata.data = props.defaultnewrec()
// const mykey = fieldsTable.getKeyByTable(mytable)
// mydata.data[mykey] = ''
// console.log('mydata', mydata)
// console.log('DATA=', mydata.data)
newRecord.value = await globalStore.saveTable(mydata)
newRecordBool.value = true
@@ -484,26 +508,10 @@ export default defineComponent({
}
async function createNewRecord() {
console.log('createNewRecord')
loading.value = true
const mydata: any = {
table: mytable.value,
data: {}
}
await createNewRecordDialog()
if (props.defaultnewrec) {
mydata.data = props.defaultnewrec
}
// const mykey = fieldsTable.getKeyByTable(mytable)
// mydata.data[mykey] = ''
console.log('mydata', mydata)
const data = await globalStore.saveTable(mydata)
serverData.value.push(data)
serverData.value.push(newRecord.value)
pagination.value.rowsNumber++
loading.value = false
@@ -549,7 +557,7 @@ export default defineComponent({
tablesel.value = mytable.value
}
console.log('2) tablesel', tablesel.value)
// console.log('2) tablesel', tablesel.value)
changeTable(tablesel.value)
@@ -590,25 +598,34 @@ export default defineComponent({
param2: item,
}
return $q.dialog({
message: translate(col.askaction) + '?',
html: true,
ok: {
label: ok,
push: true,
},
title: 'Action',
cancel: true,
persistent: false,
}).onOk(() => {
// console.log('OK')
exec_func_table(table, col.action, par)
return true
}).onCancel(() => {
// console.log('CANCEL')
exec_func_table(table, funccancel, par)
return false
})
if (col.action === lists.MenuAction.CAN_EDIT_TABLE) {
console.log('Edit', item)
selItem(item, col)
recModif.value = item
editRecordBool.value = true
} else {
return $q.dialog({
message: translate(col.askaction) + '?',
html: true,
ok: {
label: ok,
push: true,
},
title: 'Action',
cancel: true,
persistent: false,
}).onOk(() => {
// console.log('OK')
exec_func_table(table, col.action, par)
return true
}).onCancel(() => {
// console.log('CANCEL')
exec_func_table(table, funccancel, par)
return false
})
}
}
}
@@ -617,7 +634,7 @@ export default defineComponent({
if (action === lists.MenuAction.DELETE_RECTABLE) {
if ((serverData.value.length > 0) && item) {
serverData.value.splice(serverData.value.indexOf(item), 1)
refresh_table()
refresh_arr()
}
} else if (action === lists.MenuAction.DUPLICATE_RECTABLE) {
// Add record duplicated
@@ -638,6 +655,21 @@ export default defineComponent({
}
}
function clByCol(col: IColGridTable) {
if (!visuIntestazCol(col)) {
return 'row justify-center vertical-middle'
} else {
return ''
}
}
function visuIntestazCol(col: IColGridTable) {
if (col.fieldtype === costanti.FieldType.html || col.fieldtype === costanti.FieldType.listimages) {
return false
} else {
return true
}
}
function changeCol(newval: any) {
// console.log('changecol', mytable.value)
if (!!mytable.value) {
@@ -666,7 +698,7 @@ export default defineComponent({
}
}
console.log('tablesel', tablesel.value, 'mytab', mytab)
// console.log('tablesel', tablesel.value, 'mytab', mytab)
if (mytab) {
mytitle.value = mytab.label
@@ -774,29 +806,55 @@ export default defineComponent({
async function saveNewRecord() {
console.log('saveNewRecord')
savenewRec.value = true
const mydata = {
table: mytable.value,
data: {}
}
mydata.data = newRecord
mydata.data = newRecord.value
const data = await globalStore.saveTable(mydata)
.then((ris) => {
if (ris) {
// console.log('ris', ris)
newRecordBool.value = false
refresh()
const indrec = serverData.value.findIndex((rec: IMySkill) => rec._id === ris._id)
console.log('indrec', indrec, serverData.value[indrec])
if (indrec >= 0)
serverData.value[indrec] = ris
else
serverData.value.push(ris)
newRecord.value = null
// refresh()
}
})
}
async function saverecModif() {
console.log('saverecModif')
const mydata = {
table: mytable.value,
data: {}
}
mydata.data = recModif.value
const data = await globalStore.saveTable(mydata)
.then((ris) => {
if (ris) {
// console.log('ris', ris)
editRecordBool.value = false
const indrec = serverData.value.findIndex((rec: IMySkill) => rec._id === ris._id)
console.log('indrec', indrec, serverData.value[indrec])
if (indrec >= 0)
serverData.value[indrec] = ris
}
})
}
function hidewindow() {
console.log('hidewindow')
if (!savenewRec.value) {
annulla(0)
}
annulla(0)
}
function getlabelAddRow() {
@@ -826,6 +884,8 @@ export default defineComponent({
saveFieldValue,
clickFunz,
visCol,
visuIntestazCol,
clByCol,
changeCol,
changeTable,
doSearch,
@@ -836,6 +896,7 @@ export default defineComponent({
selectionclick,
getusernamesel,
saveNewRecord,
saverecModif,
hidewindow,
isfinishLoading,
getlabelAddRow,
@@ -858,11 +919,15 @@ export default defineComponent({
myfilter,
disabilita,
newRecordBool,
editRecordBool,
newRecord,
recModif,
lists,
refresh,
spinner_visible,
tablesel,
myfilterand,
tools,
}
}
})

View File

@@ -8,7 +8,61 @@
@click="createNewRecordDialog"></q-btn>
</div>
<div
v-if="prop_search"
class="row justify-center vertical-middle">
<q-input
v-model="search" filled dense type="search" debounce="500" hint="Cerca"
v-on:keyup.enter="doSearch">
<template v-slot:after>
<q-btn v-if="mytable" dense label="" color="primary" @click="refresh" icon="search"></q-btn>
</template>
</q-input>
<q-space></q-space>
<q-select
v-if="mytable"
v-model="colVisib"
rounded
outlined
multiple
dense
options-dense
:display-value="$t('grid.columns')"
emit-value
map-options
:options="mycolumns"
option-value="name"
@update:model-value="changeCol">
</q-select>
</div>
<div class="q-gutter-md q-ma-xs row">
<div class="q-table__title" style="min-width: 150px;">{{ mytitle }}</div>
<q-space></q-space>
<q-btn
v-if="mytable" rounded dense size="sm" flat :color="canEdit ? 'positive' : 'light-gray'"
:disable="disabilita()"
:val="lists.MenuAction.CAN_EDIT_TABLE"
icon="fas fa-pencil-alt" @update:model-value="changefuncAct"
@click="canEdit = !canEdit">
</q-btn>
<q-btn
v-if="mytable" rounded dense size="sm" flat color="light-gray"
:disable="loading"
icon="fas fa-plus"
@click="createNewRecord">
</q-btn>
</div>
<q-inner-loading :showing="spinner_visible">
<q-spinner-tail size="2em" color="primary"/>
</q-inner-loading>
<q-table
:grid="vertical"
flat
bordered
class="my-sticky-header-table"
@@ -32,7 +86,6 @@
<template v-slot:header="props">
<q-tr :props="props">
<q-th>
</q-th>
<q-th
v-for="col in props.cols" :key="col.name"
@@ -47,53 +100,7 @@
</q-tr>
</template>
<template v-slot:top-right>
<div class="q-table__title" style="min-width: 150px;">{{ mytitle }}</div>
<!--<p style="color:red"> Rows: {{ getrows }}</p>-->
<q-input
v-model="search" filled dense type="search" debounce="500" 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="canEdit" :disable="disabilita()" :val="lists.MenuAction.CAN_EDIT_TABLE"
class="q-mx-sm"
:label="$t('grid.editvalues')" @update:model-value="changefuncAct">
</q-toggle>
<q-btn
v-if="mytable" flat dense color="primary" :disable="loading || !canEdit"
:label="$t('grid.addrecord')"
@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"
rounded
outlined
multiple
dense
options-dense
:display-value="$t('grid.columns')"
emit-value
map-options
:options="mycolumns"
option-value="name"
@update:model-value="changeCol">
</q-select>
<template v-slot:top-right v-if="tablesList || arrfilters">
<q-select
v-if="tablesList"
v-model="tablesel"
@@ -107,12 +114,6 @@
>
</q-select>
<q-inner-loading :showing="spinner_visible">
<q-spinner-tail size="2em" color="primary"/>
</q-inner-loading>
<div class="row">
<q-toggle
v-for="(filter, index) of arrfilters"
@@ -135,7 +136,6 @@
<div
v-if="colVisib.includes(col.field + col.subfield)" class="tdclass">
<div :class="getclrow(props.row)">
<CMyPopupEdit
:table="prop_mytable"
:canEdit="canEdit"
@@ -169,6 +169,66 @@
<br>
</template>
<template v-slot:item="props">
<div
class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
:style="props.selected ? 'transform: scale(0.95);' : ''"
>
<q-card :class="props.selected ? 'bg-grey-2' : ''">
<q-list dense>
<div v-for="col in mycolumns" :key="col.name">
<q-item v-if="colVisib.includes(col.field + col.subfield)" :class="clByCol(col)">
<q-item-section avatar v-if="visuIntestazCol(col)">
<q-item-label class="q-table__col">{{ col.label }}</q-item-label>
</q-item-section>
<q-item-section>
<div class="tdclass">
<div :class="getclrow(props.row)">
<CMyPopupEdit
:table="prop_mytable"
:canEdit="canEdit"
:disable="disabilita()"
:mycol="col"
v-model:row="props.row"
:field="col.field"
:subfield="col.subfield"
minuteinterval="1"
@save="SaveValue"
@show="selItem(props.row, col)"
@showandsave="showandsel">
</CMyPopupEdit>
</div>
</div>
</q-item-section>
</q-item>
</div>
<div>
<q-item-section>
<q-item-label class="q-table__col"></q-item-label>
</q-item-section>
<q-item class="row justify-center">
<q-item-section side>
<q-item-label caption>
<q-item>
<div v-for="col in mycolumns" :key="col.name">
<div v-if="colExtra.includes(col.name) && col.action" class="tdclass">
<q-btn
flat round color="red" :icon="col.icon" size="sm"
@click="clickFunz(props.row, col)"></q-btn>
</div>
</div>
</q-item>
</q-item-label>
</q-item-section>
</q-item>
</div>
</q-list>
</q-card>
</div>
</template>
<!--
<q-btn
flat round dense
@@ -223,7 +283,7 @@
</div>
<q-dialog v-model="newRecordBool" @hide="hidewindow">
<q-card :style="`min-width: `+ tools.myheight_dialog() + `px;`">
<q-toolbar class="bg-primary text-white">
<q-toolbar class="bg-primary text-white centeritems">
<q-toolbar-title>
{{ mytitle }}
</q-toolbar-title>
@@ -260,6 +320,44 @@
</q-card-actions>
</q-card>
</q-dialog>
<q-dialog v-model="editRecordBool">
<q-card :style="`min-width: `+ tools.myheight_dialog() + `px;`">
<q-toolbar class="bg-primary text-white centeritems">
<q-toolbar-title>
{{ mytitle }}
</q-toolbar-title>
<q-btn flat round color="white" icon="close" v-close-popup></q-btn>
</q-toolbar>
<q-card-section class="inset-shadow">
<div
v-for="col in mycolumns" :key="col.name">
<div
v-if="colVisib.includes(col.field + col.subfield)">
<div>
<CMyPopupEdit
:table="prop_mytable"
:canEdit="true"
:mycol="col"
:isInModif="true"
v-model:row="recModif"
:field="col.field"
:subfield="col.subfield"
minuteinterval="1"
@save="SaveValue"
@show="selItem(recModif, col, true)"
@showandsave="showandsel">
</CMyPopupEdit>
</div>
</div>
</div>
</q-card-section>
<q-card-actions align="center">
<q-btn flat :label="$t('dialog.ok')" color="primary" @click="saverecModif"></q-btn>
<q-btn flat :label="$t('dialog.cancel')" color="primary" v-close-popup></q-btn>
</q-card-actions>
</q-card>
</q-dialog>
</div>
</template>
<script lang="ts" src="./CGridTableRec.ts">

View File

@@ -53,6 +53,7 @@ export default defineComponent({
})
function refreshval() {
console.log('refreshval')
myarrvalues.value = []
// console.log('options', props.options)

View File

@@ -106,7 +106,7 @@ export default defineComponent({
])
function changeval(newval: any) {
// console.log('changeval', newval)
console.log('myEditor: changeval', newval)
emit('update:value', newval)
}

View File

@@ -29,7 +29,6 @@
toolbar-toggle-color="yellow-8"
toolbar-bg="primary"
:toolbar="toolbarcomp"
debounce="500"
:fonts="myfonts"
@update:model-value="changeval"
@paste="evt => pasteCapture(evt)"

View File

@@ -0,0 +1,6 @@
.editor{
border: solid 2px #1c64aa;
border-radius: 5px;
padding: 2px;
height: 60px;
}

View File

@@ -1,4 +1,4 @@
import { defineComponent, onMounted, PropType, ref, toRef, watch } from 'vue'
import { defineComponent, onMounted, onBeforeMount, PropType, ref, toRef, watch } from 'vue'
import { useI18n } from '@src/boot/i18n'
import { useUserStore } from '@store/UserStore'
import { useGlobalStore } from '@store/globalStore'
@@ -40,6 +40,11 @@ export default defineComponent({
required: false,
default: false,
},
isInModif: {
type: Boolean,
required: false,
default: false,
},
field: {
type: String,
required: false,
@@ -143,7 +148,12 @@ export default defineComponent({
const { setValDb, getValDb } = MixinBase()
const { getMyUsername } = MixinUsers()
watch(() => props.row, (newval, oldval) => {
refresh()
})
function crea() {
// console.log('crea', isFieldDb())
if (isFieldDb()) {
// mykey -> field
@@ -170,7 +180,7 @@ export default defineComponent({
}]
}
console.log('col', col.value);
// console.log('col', col.value);
} else {
col.value = {...props.mycol}
}
@@ -192,8 +202,11 @@ export default defineComponent({
}
function changeval(newval: any) {
// console.log('changeval update:row', newval)
console.log('changeval update:row', newval)
emit('update:row', props.row)
if (props.isInModif)
OpenEdit()
}
function getrealval(newval: any) {
@@ -203,11 +216,14 @@ export default defineComponent({
}
function changevalRec(newval: any) {
console.log('popypedit: changevalRec', newval)
// console.log('row', props.row, 'col', props.mycol, 'newval', newval)
// console.log('row[col.value.name]', props.row[col.value.name])
myrow.value[col.value.name] = newval
// console.log('changevalRec update:row', newval)
emit('update:row', props.row)
if (props.isInModif)
OpenEdit()
}
function changevalRecHours(newval: any) {
@@ -224,7 +240,8 @@ export default defineComponent({
}
function mounted() {
// console.log('mounted')
// console.log('mounted', 'isFieldDb()', isFieldDb())
if (isFieldDb()) {
} else {
@@ -245,9 +262,11 @@ export default defineComponent({
}
}
// console.log('popupedit: myvalue.value', myvalue.value)
if (col.value.fieldtype === costanti.FieldType.listimages) {
if (myvalue.value === '' || myvalue.value === undefined) {
console.log('set default myvalue.value ')
// console.log('set default myvalue.value ')
myvalue.value = {
title: 'Galleria',
directory: 'none',
@@ -261,6 +280,11 @@ export default defineComponent({
// console.log('myvalueprec', myvalueprec)
}
function refresh() {
mounted()
}
function OpenEdit() {
// console.log('OpenEdit')
emit('show')
@@ -504,7 +528,7 @@ export default defineComponent({
}
onMounted(mounted)
onBeforeMount(mounted)
crea()

View File

@@ -34,7 +34,7 @@
:readonly="false"
:minuteinterval="minuteinterval"
:dense="true"
@update:model-value="changevalRec"
@update:valueDate="changevalRec"
canEdit="true"
@savetoclose="SaveValueInt"
@show="OpenEdit"
@@ -88,7 +88,7 @@
:directory="getDirectoryGall()"
:imgGall="myvalue" :edit="isviewfield()"
@showandsave="Savedb"
@update:model-value="changevalRec"
@update:imgGall="changevalRec"
>
</CGallery>
@@ -100,7 +100,7 @@
:directory="getDirectoryGall()"
:imgGall="myvalue" :edit="isviewfield()"
:single="isFieldDb()"
@update:model-value="changevalRec"
@update:imgGall="changevalRec"
@showandsave="Savedb">
</CGallery>
@@ -134,7 +134,7 @@
<CMyChipList
:type="costanti.FieldType.binary"
:value="myvalue"
@update:model-value="changevalRec"
@update:value="changevalRec"
:options="globalStore.getTableJoinByName(col.jointable)"
:optval="fieldsTable.getKeyByTable(col.jointable)"
:optlab="fieldsTable.getLabelByTable(col.jointable)"
@@ -152,7 +152,6 @@
:opticon="fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.select">
myvalue: {{ myvalue }}
<CMyChipList
@update:model-value="changevalRec"
myclass="text-center"
@@ -163,6 +162,19 @@
:optlab="fieldsTable.getLabelByTable(col.jointable)"
:opticon="fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.star5">
<q-rating
:model-value="`${myvalue}` - 1"
@update:model-value="changevalRec"
size="1.5rem"
style="display: block !important;"
:color="tools.getColByLevel(myvalue)"
icon="star_border"
icon-selected="star"
:max="5"
:readonly="true"
/>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.boolean">
<q-toggle
dark color="green"
@@ -170,289 +182,484 @@
:disable="disable && col.name !== 'profile.saw_zoom_presentation'"
@update:model-value="changevalRec"></q-toggle>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.html">
<div v-else-if="col.fieldtype === costanti.FieldType.html" class="editor">
<div v-html="visuValByType(myvalue, col, row)" @click="visueditor = true">
</div>
</div>
</div>
</div>
<div v-else>
<div v-if="col.fieldtype === costanti.FieldType.listimages">
<CGallery
:title="getTitleGall()"
:directory="getDirectoryGall()"
:imgGall="myvalue" :edit="isviewfield()"
@showandsave="Savedb">
</CGallery>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.image">
<CGallery
:title="getTitleGall()"
:directory="getDirectoryGall()"
:single="isFieldDb()"
:imgGall="myImgGall" :edit="isviewfield()"
@showandsave="Savedb">
</CGallery>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.nationality">
<div>
{{ myvalue }}
</div>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.intcode">
<div>
{{ myvalue }}
</div>
</div>
<div v-else>
<div v-else class="flex justify-center" :class="{ editor: (col.fieldtype === costanti.FieldType.html) && !isInModif }">
<div v-if="!isInModif">
<!-- Edit Value -->
<span v-if="col.fieldtype === costanti.FieldType.date">
<CDateTime
v-if="myvalue"
:label="col.label"
class="cursor-pointer"
v-model:value="myvalue"
:readonly="false"
:minuteinterval="minuteinterval"
:dense="true"
:canEdit="canEdit"
@savetoclose="SaveValueInt"
@show="OpenEdit">
</CDateTime>
</span>
<span v-else-if="col.fieldtype === costanti.FieldType.onlydate">
<div v-if="col.fieldtype === costanti.FieldType.listimages">
<CGallery
:title="getTitleGall()"
:directory="getDirectoryGall()"
:imgGall="myvalue" :edit="isviewfield()"
@showandsave="Savedb">
<CDateTime
:label="col.label"
class="cursor-pointer"
:valueDate="myvalue"
v-model:value="myvalue"
:readonly="false"
:minuteinterval="minuteinterval"
:dense="true"
:canEdit="canEdit"
@savetoclose="SaveValueInt"
@show="OpenEdit"
view="date">
</CDateTime>
</span>
<div v-else>
</CGallery>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.image">
<CGallery
:title="getTitleGall()"
:directory="getDirectoryGall()"
:single="isFieldDb()"
:imgGall="myImgGall" :edit="isviewfield()"
@showandsave="Savedb">
</CGallery>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.nationality">
<div>
<div v-if="col.fieldtype === costanti.FieldType.binary">
<CMyChipList
:type="costanti.FieldType.binary"
:value="myvalue"
:options="globalStore.getTableJoinByName(col.jointable)"
:optval="fieldsTable.getKeyByTable(col.jointable)"
:optlab="fieldsTable.getLabelByTable(col.jointable)"
:opticon="fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
</div>
<!-- Show Value -->
<div v-else-if="col.fieldtype === costanti.FieldType.multiselect">
<CMyChipList
:type="costanti.FieldType.multiselect"
:value="myvalue"
:options="globalStore.getTableJoinByName(col.jointable)"
:optval="fieldsTable.getKeyByTable(col.jointable)"
:optlab="fieldsTable.getLabelByTable(col.jointable)"
:opticon="fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.select">
<CMyChipList
myclass="text-center"
:type="costanti.FieldType.select"
:value="myvalue"
:options="globalStore.getTableJoinByName(col.jointable)"
:optval="fieldsTable.getKeyByTable(col.jointable)"
:optlab="fieldsTable.getLabelByTable(col.jointable)"
:opticon="fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.boolean">
<q-toggle
dark color="green" v-model="myvalue" :label="col.title"
:disable="disable && col.name !== 'profile.saw_zoom_presentation'"
@update:model-value="Savedb"></q-toggle>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.html">
<div v-if="isFieldDb()">
<div v-html="visuValByType(myvalue, col, row)" @click="visueditor = true"></div>
</div>
<div v-else>
<q-dialog v-model="visueditor" no-backdrop-dismiss persistent full-height full-width>
<q-card :style="`min-width: `+ tools.myheight_dialog() + `px;`">
<q-card-section>
<CMyEditor
v-if="visueditor" v-model:value="myvalue" :title="col.title" @keyup.enter.stop
@showandsave="Savedb" @annulla="visueditor=false">
</CMyEditor>
</q-card-section>
</q-card>
</q-dialog>
</div>
</div>
<div v-else>
<span v-html="visuValByType(myvalue, col, row)"></span>
</div>
<q-popup-edit
v-if="canEdit && col.fieldtype !== costanti.FieldType.html"
v-model="myvalue"
:disable="col.disable"
:title="col.title ? col.title : col.titlepopupedit"
buttons
persistent
@save="SaveValueInt"
@show="OpenEdit"
v-slot="scope">
<div v-if="col.fieldtype === costanti.FieldType.boolean">
<q-checkbox v-model="scope.value" :label="col.title">
</q-checkbox>
<span v-html="visuValByType(myvalue, col, row)"></span>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.string">
<q-input
v-model="scope.value"
autogrow
@keyup.enter.stop
autofocus>
</q-input>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.password">
<q-input
v-model="scope.value"
type="password"
@keyup.enter="scope.set"
autofocus>
</q-input>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.number">
<q-input
v-model="scope.value" type="number"
autofocus>
</q-input>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.hours">
<div v-if="isFieldDb()">
<CMySelect
label="Ore" v-model:value="myvalue"
optval="_id" optlab="label"
:useinput="false"
:options="tools.SelectHours">
</CMySelect>
</div>
<div v-else>
<q-input
v-model="scope.value" type="number"
autofocus>
</q-input>
</div>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.binary">
<CMyToggleList
:label="col.titlepopupedit"
:options="globalStore.getTableJoinByName(col.jointable)"
v-model:value="scope.value"
:optval="fieldsTable.getKeyByTable(col.jointable)"
:optlab="fieldsTable.getLabelByTable(col.jointable)">
</CMyToggleList>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.select">
<CMySelect
:label="col.label"
v-model:value="scope.value"
:optval="fieldsTable.getKeyByTable(col.jointable)"
:optlab="fieldsTable.getLabelByTable(col.jointable)"
:options="globalStore.getTableJoinByName(col.jointable)"
:useinput="false">
</CMySelect>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.nationality">
<div class="justify-center q-gutter-sm clgutter q-mt-sm">
<q-input
v-model="countryname"
:readonly="true"
rounded dense
debounce="1000"
@keyup.enter="scope.set"
:label="title"
>
<template v-slot:prepend>
<div style="font-size: 1rem;">
<!--<vue-country-code
:defaultCountry="scope.value"
: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 === costanti.FieldType.intcode">
<!-- <vue-tel-input
@country-changed="intcode_change"
:value="scope.value"
@update:model-value="oninput"
:placeholder="$t('reg.cell')"
:enabledCountryCode="true"
inputClasses="clCell"
wrapperClasses="clCellCode">
</vue-tel-input>
-->
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.multiselect">
<q-select
v-model="scope.value"
rounded
outlined
multiple
dense
options-dense
:display-value="fieldsTable.getTitleByTable(col.jointable)"
emit-value
map-options
:options="globalStore.getTableJoinByName(col.jointable)"
style="min-width: 150px"
:option-value="fieldsTable.getKeyByTable(col.jointable)"
@update:model-value="changeval">
<template v-slot:option="{ itemProps, opt, selected, toggleOption }">
<q-item v-bind="itemProps">
<q-item-section>
<q-item-label>{{ opt[fieldsTable.getLabelByTable(col.jointable)] }}</q-item-label>
</q-item-section>
<q-item-section side>
<q-toggle :model-value="selected" @update:model-value="toggleOption(opt)"/>
</q-item-section>
</q-item>
</template>
</q-select>
</div>
</q-popup-edit>
{{ myvalue }}
</div>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.intcode">
<div>
{{ myvalue }}
</div>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.date">
<CDateTime
v-if="myvalue"
:label="col.label"
class="cursor-pointer"
v-model:value="myvalue"
:readonly="false"
:minuteinterval="minuteinterval"
:dense="true"
:canEdit="canEdit"
@savetoclose="SaveValueInt"
@show="OpenEdit">
</CDateTime>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.onlydate">
<CDateTime
:label="col.label"
class="cursor-pointer"
:valueDate="myvalue"
v-model:value="myvalue"
:readonly="false"
:minuteinterval="minuteinterval"
:dense="true"
:canEdit="canEdit"
@savetoclose="SaveValueInt"
@show="OpenEdit"
view="date">
</CDateTime>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.binary">
<CMyChipList
:type="costanti.FieldType.binary"
:value="myvalue"
:options="globalStore.getTableJoinByName(col.jointable)"
:optval="fieldsTable.getKeyByTable(col.jointable)"
:optlab="fieldsTable.getLabelByTable(col.jointable)"
:opticon="fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
</div>
<!-- Show Value -->
<div v-else-if="col.fieldtype === costanti.FieldType.multiselect">
<CMyChipList
:type="costanti.FieldType.multiselect"
@update:value="changevalRec"
:value="myvalue"
:options="globalStore.getTableJoinByName(col.jointable)"
:optval="fieldsTable.getKeyByTable(col.jointable)"
:optlab="fieldsTable.getLabelByTable(col.jointable)"
:opticon="fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.select">
<CMyChipList
myclass="text-center"
:type="costanti.FieldType.select"
@update:model-value="changevalRec"
v-model:value="myvalue"
:options="globalStore.getTableJoinByName(col.jointable)"
:optval="fieldsTable.getKeyByTable(col.jointable)"
:optlab="fieldsTable.getLabelByTable(col.jointable)"
:opticon="fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.star5">
<q-rating
:model-value="`${myvalue}` - 1"
@update:model-value="changevalRec"
size="1.5rem"
style="display: block !important;"
:color="tools.getColByLevel(myvalue)"
icon="star_border"
icon-selected="star"
:max="5"
:readonly="true"
/>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.boolean">
<q-toggle
dark color="green" v-model="myvalue" :label="col.title"
:disable="disable && col.name !== 'profile.saw_zoom_presentation'"
@update:model-value="Savedb"></q-toggle>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.html">
<div v-html="visuValByType(myvalue, col, row)" @click="visueditor = true"></div>
<div v-if="!isFieldDb()">
<q-dialog v-model="visueditor" no-backdrop-dismiss persistent full-height full-width>
<q-card :style="`min-width: `+ tools.myheight_dialog() + `px;`">
<q-card-section>
<CMyEditor
v-if="visueditor" v-model:value="myvalue" :title="col.title" @keyup.enter.stop
@showandsave="Savedb" @annulla="visueditor=false">
</CMyEditor>
</q-card-section>
</q-card>
</q-dialog>
</div>
</div>
<div v-else>
<span v-html="visuValByType(myvalue, col, row)"></span>
</div>
<q-popup-edit
v-if="(canEdit && col.fieldtype !== costanti.FieldType.html)"
v-model="myvalue"
:disable="col.disable"
:title="col.title ? col.title : col.titlepopupedit"
buttons
persistent
@save="SaveValueInt"
@show="OpenEdit"
v-slot="scope">
<div v-if="col.fieldtype === costanti.FieldType.boolean">
<q-checkbox v-model="scope.value" :label="col.title">
</q-checkbox>
<span v-html="visuValByType(myvalue, col, row)"></span>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.string">
<q-input
v-model="scope.value"
autogrow
@keyup.enter.stop
autofocus>
</q-input>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.password">
<q-input
v-model="scope.value"
type="password"
@keyup.enter="scope.set"
autofocus>
</q-input>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.number">
<q-input
v-model="scope.value" type="number"
autofocus>
</q-input>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.hours">
<div v-if="isFieldDb()">
<CMySelect
label="Ore" v-model:value="myvalue"
optval="_id" optlab="label"
:useinput="false"
:options="tools.SelectHours">
</CMySelect>
</div>
<div v-else>
<q-input
v-model="scope.value" type="number"
autofocus>
</q-input>
</div>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.binary">
<CMyToggleList
:label="col.titlepopupedit"
:options="globalStore.getTableJoinByName(col.jointable)"
v-model:value="scope.value"
:optval="fieldsTable.getKeyByTable(col.jointable)"
:optlab="fieldsTable.getLabelByTable(col.jointable)">
</CMyToggleList>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.select">
<CMySelect
:label="col.label"
v-model:value="scope.value"
:optval="fieldsTable.getKeyByTable(col.jointable)"
:optlab="fieldsTable.getLabelByTable(col.jointable)"
:options="globalStore.getTableJoinByName(col.jointable)"
:useinput="false">
</CMySelect>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.star5">
<CMySelect
:label="col.label"
v-model:value="scope.value"
:optval="fieldsTable.getKeyByTable(col.jointable)"
:optlab="fieldsTable.getLabelByTable(col.jointable)"
:options="globalStore.getTableJoinByName(col.jointable)"
:useinput="false">
</CMySelect>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.nationality">
<div class="justify-center q-gutter-sm clgutter q-mt-sm">
<q-input
v-model="countryname"
:readonly="true"
rounded dense
debounce="1000"
@keyup.enter="scope.set"
:label="title"
>
<template v-slot:prepend>
<div style="font-size: 1rem;">
<!--<vue-country-code
:defaultCountry="scope.value"
: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 === costanti.FieldType.intcode">
<!-- <vue-tel-input
@country-changed="intcode_change"
:value="scope.value"
@update:model-value="oninput"
:placeholder="$t('reg.cell')"
:enabledCountryCode="true"
inputClasses="clCell"
wrapperClasses="clCellCode">
</vue-tel-input>
-->
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.multiselect">
<q-select
v-model="scope.value"
rounded
outlined
multiple
dense
options-dense
:display-value="fieldsTable.getTitleByTable(col.jointable)"
emit-value
map-options
:options="globalStore.getTableJoinByName(col.jointable)"
style="min-width: 150px"
:option-value="fieldsTable.getKeyByTable(col.jointable)"
@update:model-value="changeval">
<template v-slot:option="{ itemProps, opt, selected, toggleOption }">
<q-item v-bind="itemProps">
<q-item-section>
<q-item-label>{{ opt[fieldsTable.getLabelByTable(col.jointable)] }}</q-item-label>
</q-item-section>
<q-item-section side>
<q-toggle :model-value="selected" @update:model-value="toggleOption(opt)"/>
</q-item-section>
</q-item>
</template>
</q-select>
</div>
</q-popup-edit>
</div>
<div v-else>
<!-- IN MODIFICA !-->
<div v-if="col.fieldtype === costanti.FieldType.boolean">
<q-checkbox
v-model="myvalue"
@update:model-value="changevalRec"
:label="col.title">
</q-checkbox>
<span v-html="visuValByType(myvalue, col, row)"></span>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.string">
<q-input
v-model="myvalue"
@update:model-value="changevalRec"
autogrow
@keyup.enter.stop
autofocus>
</q-input>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.password">
<q-input
v-model="myvalue"
@update:model-value="changevalRec"
type="password"
@keyup.enter="scope.set"
autofocus>
</q-input>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.number">
<q-input
v-model="myvalue" @update:model-value="changevalRec"
type="number"
autofocus>
</q-input>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.hours">
<div v-if="isFieldDb()">
<CMySelect
label="Ore"
v-model:value="myvalue"
@update:value="changevalRec"
optval="_id" optlab="label"
:useinput="false"
:options="tools.SelectHours">
</CMySelect>
</div>
<div v-else>
<q-input
v-model="myvalue" type="number"
@update:value="changevalRec"
autofocus>
</q-input>
</div>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.binary">
<CMyToggleList
:label="col.titlepopupedit"
:options="globalStore.getTableJoinByName(col.jointable)"
v-model:value="myvalue"
@update:value="changevalRec"
:optval="fieldsTable.getKeyByTable(col.jointable)"
:optlab="fieldsTable.getLabelByTable(col.jointable)">
</CMyToggleList>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.select">
<CMySelect
:label="col.label"
v-model:value="myvalue"
@update:value="changevalRec"
:optval="fieldsTable.getKeyByTable(col.jointable)"
:optlab="fieldsTable.getLabelByTable(col.jointable)"
:options="globalStore.getTableJoinByName(col.jointable)"
:useinput="false">
</CMySelect>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.star5">
<CMySelect
:label="col.label"
v-model:value="myvalue"
@update:value="changevalRec"
:optval="fieldsTable.getKeyByTable(col.jointable)"
:optlab="fieldsTable.getLabelByTable(col.jointable)"
:options="globalStore.getTableJoinByName(col.jointable)"
:useinput="false">
</CMySelect>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.nationality">
<div class="justify-center q-gutter-sm clgutter q-mt-sm">
<q-input
v-model:value="countryname"
@update:value="changevalRec"
:readonly="true"
rounded dense
debounce="1000"
@keyup.enter="scope.set"
: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 === costanti.FieldType.intcode">
<!-- <vue-tel-input
@country-changed="intcode_change"
:value="myvalue"
@update:model-value="oninput"
:placeholder="$t('reg.cell')"
:enabledCountryCode="true"
inputClasses="clCell"
wrapperClasses="clCellCode">
</vue-tel-input>
-->
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.multiselect">
<q-select
v-model="myvalue"
rounded
outlined
multiple
dense
options-dense
:display-value="fieldsTable.getTitleByTable(col.jointable)"
emit-value
map-options
:options="globalStore.getTableJoinByName(col.jointable)"
style="min-width: 150px"
:option-value="fieldsTable.getKeyByTable(col.jointable)"
@update:model-value="changevalRec">
<template v-slot:option="{ itemProps, opt, selected, toggleOption }">
<q-item v-bind="itemProps">
<q-item-section>
<q-item-label>{{ opt[fieldsTable.getLabelByTable(col.jointable)] }}</q-item-label>
</q-item-section>
<q-item-section side>
<q-toggle :model-value="selected" @update:value="toggleOption(opt)"/>
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<div v-else-if="col.fieldtype === costanti.FieldType.html">
<div v-if="!isFieldDb()">
<CMyEditor
v-model:value="myvalue" :title="col.title" @keyup.enter.stop
@update:value="changevalRec"
@showandsave="Savedb">
</CMyEditor>
</div>
</div>
</div>
</div>
</div>

View File

@@ -6,6 +6,7 @@ import { useQuasar } from 'quasar'
export default defineComponent({
name: 'CMySelect',
emits: ['update:value', 'changeval'],
props: {
options: {
type: Array,
@@ -67,16 +68,15 @@ export default defineComponent({
}
function mounted() {
console.log('mounted', mounted)
// console.log('mounted myselect', props.options)
if (props.options) {
const rec: any = props.options.find((myrec: any) => myrec[`${props.optval}`] === props.value)
/*
console.log('rec', rec, 'props.useinput', props.useinput)
/*console.log('rec', rec, 'props.useinput', props.useinput)
console.log('props.value', props.value)
console.log('options', props.options)
console.log('optval', props.optval)
console.log('optlab', props.optlab)
*/
console.log('optlab', props.optlab)*/
if (rec) {
if (props.funcgetvaluebyid)
@@ -84,7 +84,7 @@ export default defineComponent({
else
myvalue.value = rec[`${props.optlab}`]
// console.log('myvalue', myvalue, 'optval', optval, 'rec', rec[`${optval}`])
// console.log('myvalue', myvalue, 'optval', props.optval, 'rec', rec[`${props.optval}`])
} else {
if (!props.useinput) {
if (props.value) {
@@ -93,6 +93,7 @@ export default defineComponent({
}
}
}
// console.log('cmyselect: myvalue.value', myvalue.value)
}
onMounted(mounted)

View File

@@ -16,8 +16,7 @@
:option-label="optlab"
@update:model-value="changeval"
:label="label"
:dense="dense"
>
:dense="dense">
</q-select>
</div>
<div v-else>
@@ -35,9 +34,7 @@
:label="label"
emit-value
map-options
style="min-width: 170px; max-width: 400px;"
>
style="min-width: 170px; max-width: 400px;">
</q-select>
</div>
</div>

View File

@@ -9,6 +9,7 @@ import { useGlobalStore } from '@store/globalStore'
import { useUserStore } from '@store/UserStore'
import { colmySkills } from '@store/Modules/fieldsTable'
import { CGridTableRec } from '@/components/CGridTableRec'
import { IMySkill, ISkill } from 'model'
export default defineComponent({
name: 'CSkill',
@@ -47,10 +48,25 @@ export default defineComponent({
const data = await globalStore.saveSubRec(mydata)
}
function getdefaultnewrec(): any {
return {
_id: 0,
idSkill: 0,
idStatusSkill: [],
idCity: [],
NumLevel: 0,
photos: [],
note: '',
subTitle: '',
}
}
return {
tools,
costanti,
colmySkills,
getdefaultnewrec,
}
},
})

View File

@@ -1,42 +1,21 @@
<template>
<div>
Competenze:<br>
<div class="q-ma-sm q-gutter-sm q-pa-xs">
<CGridTableRec
prop_mytable="myskills"
prop_mytitle="Mie Competenze"
prop_mytitle=""
:prop_mycolumns="colmySkills"
prop_colkey="idSkill"
:vertical="true"
nodataLabel="Nessuna Competenza inserita"
noresultLabel="Il filtro selezionato non ha trovato nessun risultato">
:prop_search="false"
noresultLabel="Il filtro selezionato non ha trovato nessun risultato"
:defaultnewrec="getdefaultnewrec">
</CGridTableRec>
</div>
<div class="row">
<!--
<q-btn
flat dense color="primary"
:label="$t('grid.addrecord')"
@click="createNewRecordInUserTable">
</q-btn>
<CMyFieldDb
title="Competenza"
table="users"
mykey="profile"
mysubkey="myskills"
indrec=0
mysubsubkey="idSkill"
:type="costanti.FieldType.binary">
</CMyFieldDb>
-->
</div>
</div>
Servizi:<br>
</template>
<script lang="ts" src="./CSkill.ts">