Table MySkills
This commit is contained in:
@@ -55,11 +55,18 @@ export default defineComponent({
|
||||
function refreshval() {
|
||||
myarrvalues.value = []
|
||||
|
||||
// console.table(options)
|
||||
// console.log('options', props.options)
|
||||
if (props.options) {
|
||||
props.options.forEach((rec: any, index) => {
|
||||
if (props.type === costanti.FieldType.multiselect) {
|
||||
if (!!myval.value) {
|
||||
/*
|
||||
console.log('rec', rec)
|
||||
console.log('optval', props.optval)
|
||||
console.log('optlab', props.optlab)
|
||||
console.log('myval.value', myval.value)
|
||||
console.log('rec[props.optval]', rec[props.optval])
|
||||
*/
|
||||
// @ts-ignore
|
||||
if (myval.value.includes(rec[props.optval])) {
|
||||
const mydata: any = {
|
||||
@@ -71,6 +78,18 @@ export default defineComponent({
|
||||
color: tools.getColorByIndexBest(index)
|
||||
}
|
||||
|
||||
if (rec['color']) {
|
||||
mydata.color = rec['color']
|
||||
}
|
||||
|
||||
/*
|
||||
if (rec['theme']) {
|
||||
mydata.class = rec['theme']
|
||||
}
|
||||
*/
|
||||
|
||||
// console.log('mydata', mydata)
|
||||
|
||||
if (tools.isObject(props.optlab)) {
|
||||
// @ts-ignore
|
||||
mydata.label = props.options.filter((myrec: any) => myrec[props.optval] === mydata.value).map(props.optlab)
|
||||
@@ -80,6 +99,8 @@ export default defineComponent({
|
||||
mydata.label = rec[props.optlab]
|
||||
}
|
||||
|
||||
// console.log('mydata.label', mydata.label)
|
||||
|
||||
if (props.opticon)
|
||||
mydata.icon = rec[props.opticon]
|
||||
if (props.optcolor)
|
||||
|
||||
@@ -32,6 +32,16 @@ export default defineComponent({
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
indrec: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: -1,
|
||||
},
|
||||
mysubsubkey: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
type: {
|
||||
type: Number,
|
||||
required: true,
|
||||
@@ -183,7 +193,7 @@ export default defineComponent({
|
||||
|
||||
function savefield(value: any, initialval: any, myq: any) {
|
||||
myvalue.value = value
|
||||
setValDb(myq, props.mykey, myvalue.value, props.type, props.serv, props.table, props.mysubkey, props.id)
|
||||
setValDb(myq, props.mykey, myvalue.value, props.type, props.serv, props.table, props.mysubkey, props.id, props.indrec, props.mysubsubkey)
|
||||
}
|
||||
|
||||
function savefieldboolean(value: any) {
|
||||
@@ -192,7 +202,7 @@ export default defineComponent({
|
||||
else
|
||||
myvalue.value = value
|
||||
|
||||
setValDb($q, props.mykey, myvalue, props.type, props.serv, props.table, props.mysubkey, props.id)
|
||||
setValDb($q, props.mykey, myvalue, props.type, props.serv, props.table, props.mysubkey, props.id, props.indrec, props.mysubsubkey)
|
||||
}
|
||||
|
||||
function selectcountry({ name, iso2, dialCode }: { name: string, iso2: string, dialCode: string }) {
|
||||
|
||||
@@ -122,7 +122,7 @@ export default defineComponent({
|
||||
|
||||
function mounted() {
|
||||
// console.log('mounted')
|
||||
if ((props.subfield !== '') && (props.subfield !== '')) {
|
||||
if (props.subfield !== '') {
|
||||
if (props.row[props.field] === undefined) {
|
||||
myrow.value[props.field] = {}
|
||||
myvalue.value = ''
|
||||
|
||||
@@ -114,18 +114,19 @@
|
||||
<CMyChipList
|
||||
@update:model-value="changevalRec"
|
||||
:type="costanti.FieldType.multiselect"
|
||||
:value="myvalue"
|
||||
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.select">
|
||||
myvalue: {{ myvalue }}
|
||||
<CMyChipList
|
||||
@update:model-value="changevalRec"
|
||||
myclass="text-center"
|
||||
:type="costanti.FieldType.select"
|
||||
:value="myvalue"
|
||||
v-model:value="myvalue"
|
||||
:options="globalStore.getTableJoinByName(col.jointable)"
|
||||
:optval="fieldsTable.getKeyByTable(col.jointable)"
|
||||
:optlab="fieldsTable.getLabelByTable(col.jointable)"
|
||||
@@ -133,7 +134,8 @@
|
||||
</div>
|
||||
<div v-else-if="col.fieldtype === costanti.FieldType.boolean">
|
||||
<q-toggle
|
||||
dark color="green" v-model="myvalue" :label="col.title"
|
||||
dark color="green"
|
||||
v-model:value="myvalue" :label="col.title"
|
||||
:disable="disable && col.name !== 'profile.saw_zoom_presentation'"
|
||||
@update:model-value="changevalRec"></q-toggle>
|
||||
</div>
|
||||
@@ -319,7 +321,7 @@
|
||||
</div>
|
||||
<div v-else-if="col.fieldtype === costanti.FieldType.select">
|
||||
<CMySelect
|
||||
:label="col.title"
|
||||
:label="col.label"
|
||||
v-model:value="scope.value"
|
||||
:optval="fieldsTable.getKeyByTable(col.jointable)"
|
||||
:optlab="fieldsTable.getLabelByTable(col.jointable)"
|
||||
@@ -369,7 +371,6 @@
|
||||
|
||||
</div>
|
||||
<div v-else-if="col.fieldtype === costanti.FieldType.multiselect">
|
||||
<div>join: {{ col.jointable }}</div>
|
||||
|
||||
<q-select
|
||||
v-model="scope.value"
|
||||
@@ -385,7 +386,7 @@
|
||||
:option-label="fieldsTable.getLabelByTable(col.jointable)"
|
||||
:option-value="fieldsTable.getKeyByTable(col.jointable)"
|
||||
style="min-width: 150px"
|
||||
@update:model-value="changeCol">
|
||||
@update:model-value="changeval">
|
||||
|
||||
</q-select>
|
||||
</div>
|
||||
|
||||
@@ -11,7 +11,7 @@ export default defineComponent({
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
value: [String, Number, Array],
|
||||
value: [String, Number],
|
||||
label: {
|
||||
type: String,
|
||||
required: true,
|
||||
@@ -57,7 +57,7 @@ export default defineComponent({
|
||||
const userStore = useUserStore()
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
const myvalue = ref('')
|
||||
const myvalue = ref(<string | number>'')
|
||||
|
||||
function changeval(newval: any) {
|
||||
console.log('changeval', newval)
|
||||
@@ -67,21 +67,29 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
function mounted() {
|
||||
console.log('mounted', mounted)
|
||||
if (props.options) {
|
||||
const rec: any = props.options.find((myrec: any) => myrec[`${props.optval}`] === props.value)
|
||||
// console.log('rec', rec)
|
||||
if (!props.useinput) {
|
||||
if (props.value) {
|
||||
myvalue.value = props.value.toString()
|
||||
}
|
||||
} else {
|
||||
if (rec) {
|
||||
if (props.funcgetvaluebyid)
|
||||
myvalue.value = props.funcgetvaluebyid(rec[`${props.optval}`])
|
||||
else
|
||||
myvalue.value = rec[`${props.optlab}`]
|
||||
/*
|
||||
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('myvalue', myvalue, 'optval', optval, 'rec', rec[`${optval}`])
|
||||
if (rec) {
|
||||
if (props.funcgetvaluebyid)
|
||||
myvalue.value = props.funcgetvaluebyid(rec[`${props.optval}`])
|
||||
else
|
||||
myvalue.value = rec[`${props.optlab}`]
|
||||
|
||||
// console.log('myvalue', myvalue, 'optval', optval, 'rec', rec[`${optval}`])
|
||||
} else {
|
||||
if (!props.useinput) {
|
||||
if (props.value) {
|
||||
myvalue.value = props.value
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
29
src/components/CSkill/CSkill.scss
Executable file
29
src/components/CSkill/CSkill.scss
Executable file
@@ -0,0 +1,29 @@
|
||||
|
||||
.cltitlebg{
|
||||
|
||||
}
|
||||
|
||||
.titletext {
|
||||
color: white;
|
||||
font-size: 3rem;
|
||||
font-weight: 500;
|
||||
line-height: 3rem;
|
||||
text-shadow: .25rem .25rem .5rem black;
|
||||
letter-spacing: .00937em;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
@media (max-width: 718px) {
|
||||
// PER VERSIONE MOBILE
|
||||
.titletext {
|
||||
color: white;
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
line-height: 2rem;
|
||||
text-shadow: .25rem .25rem .5rem black;
|
||||
}
|
||||
}
|
||||
|
||||
.q-img__content > div{
|
||||
background: rgba(0,0,0,0.17) !important;
|
||||
}
|
||||
56
src/components/CSkill/CSkill.ts
Executable file
56
src/components/CSkill/CSkill.ts
Executable file
@@ -0,0 +1,56 @@
|
||||
import {
|
||||
defineComponent, onBeforeMount, onBeforeUnmount, onMounted, ref, toRef, toRefs, watch,
|
||||
} from 'vue'
|
||||
|
||||
import { tools } from '@store/Modules/tools'
|
||||
import { CMyFieldDb } from '@/components/CMyFieldDb'
|
||||
import { costanti } from '@costanti'
|
||||
import { useGlobalStore } from '@store/globalStore'
|
||||
import { useUserStore } from '@store/UserStore'
|
||||
import { colmySkills } from '@store/Modules/fieldsTable'
|
||||
import { CGridTableRec } from '@/components/CGridTableRec'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CSkill',
|
||||
props: {
|
||||
defaultnewrec: {
|
||||
type: Function,
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
CMyFieldDb, CGridTableRec,
|
||||
},
|
||||
setup(props, { attrs, slots, emit }) {
|
||||
const mytable = 'users'
|
||||
const globalStore = useGlobalStore()
|
||||
const userStore = useUserStore()
|
||||
|
||||
async function createNewRecordInUserTable() {
|
||||
console.log('createNewRecordInUserTable')
|
||||
|
||||
let mydata = {
|
||||
table: mytable,
|
||||
data: {
|
||||
userId: userStore.my._id,
|
||||
data: {},
|
||||
field: 'myskills'
|
||||
}
|
||||
};
|
||||
|
||||
if (props.defaultnewrec) {
|
||||
|
||||
mydata.data.data = props.defaultnewrec
|
||||
}
|
||||
|
||||
console.log('mydata', mydata)
|
||||
const data = await globalStore.saveSubRec(mydata)
|
||||
}
|
||||
|
||||
return {
|
||||
tools,
|
||||
costanti,
|
||||
colmySkills,
|
||||
}
|
||||
},
|
||||
})
|
||||
46
src/components/CSkill/CSkill.vue
Executable file
46
src/components/CSkill/CSkill.vue
Executable file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div>
|
||||
Competenze:<br>
|
||||
<div class="q-ma-sm q-gutter-sm q-pa-xs">
|
||||
<CGridTableRec
|
||||
prop_mytable="myskills"
|
||||
prop_mytitle="Mie Competenze"
|
||||
:prop_mycolumns="colmySkills"
|
||||
prop_colkey="idSkill"
|
||||
nodataLabel="Nessuna Competenza inserita"
|
||||
noresultLabel="Il filtro selezionato non ha trovato nessun risultato">
|
||||
|
||||
</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">
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './CSkill.scss';
|
||||
</style>
|
||||
1
src/components/CSkill/index.ts
Executable file
1
src/components/CSkill/index.ts
Executable file
@@ -0,0 +1 @@
|
||||
export { default as CSkill } from './CSkill.vue'
|
||||
Reference in New Issue
Block a user