Files
myprojplanet_vite/src/components/CMyPopupEdit/CMyPopupEdit.ts

800 lines
21 KiB
TypeScript
Executable File

import { defineComponent, onMounted, onBeforeMount, PropType, ref, toRef, watch, computed } from 'vue'
import { useI18n } from '@src/boot/i18n'
import { useUserStore } from '@store/UserStore'
import { useGlobalStore } from '@store/globalStore'
import { useQuasar } from 'quasar'
import { IColGridTable, IImgGallery, ISpecialField } from 'model'
import { CMyChipList } from '../CMyChipList'
import { CDate } from '../CDate'
import { CDateTime } from '../CDateTime'
import { CLabel } from '../CLabel'
import { CMyToggleList } from '../CMyToggleList'
import { CMySelect } from '../CMySelect'
import { CCurrencyValue } from '../CCurrencyValue'
import { CMyEditor } from '../CMyEditor'
import { CGallery } from '../CGallery'
import { CSelectImage } from '../CSelectImage'
import { CAccomodation } from '../CAccomodation'
import { tools } from '@store/Modules/tools'
import { costanti } from '@costanti'
// @ts-ignore
// import VueTelInput from 'vue3-tel-input'
// import 'vue3-tel-input/dist/vue3-tel-input.css'
import { fieldsTable } from '@store/Modules/fieldsTable'
import MixinBase from '@/mixins/mixin-base'
import MixinUsers from '@/mixins/mixin-users'
import { toolsext } from '@store/Modules/toolsext'
import { shared_consts } from '@/common/shared_vuejs'
export default defineComponent({
name: 'CMyPopupEdit',
emits: ['showandsave', 'update:row', 'show', 'save', 'annulla'],
props: {
title: {
type: String,
required: false,
default: '',
},
row: {
type: Object,
required: true,
},
rec: {
type: Object,
required: false,
default: null,
},
fielddb: {
type: Boolean,
required: false,
default: false,
},
isrec: {
type: Boolean,
required: false,
default: false,
},
mycol: {
type: Object as PropType<IColGridTable | undefined>,
required: true,
},
canEdit: {
type: Boolean,
required: false,
default: false,
},
insertMode: {
type: Boolean,
required: false,
default: false,
},
canModify: {
type: Boolean,
required: false,
default: false,
},
isInModif: {
type: Boolean,
required: false,
default: false,
},
field: {
type: String,
required: false,
default: '',
},
subfield: {
type: String,
required: false,
default: '',
},
mysubsubkey: {
type: String,
required: false,
default: '',
},
specialField: {
type: Object as PropType<ISpecialField>,
required: false,
default: null,
},
serv: {
type: Boolean,
required: false,
default: false,
},
indrec: {
type: Number,
required: false,
default: -1,
},
type: {
type: Number,
required: false,
default: 0,
},
showall: {
type: Boolean,
required: false,
default: false,
},
view: {
type: String,
required: false,
default: 'row',
},
minuteinterval: {
type: String,
required: false,
default: '5',
},
disable: {
type: Boolean,
required: false,
default: false,
},
visulabel: {
type: Boolean,
required: false,
default: false,
},
jointable: {
type: String,
required: false,
default: '',
},
filter: {
type: [String, Function],
required: false,
default: null,
},
field_extra: {
type: String,
required: false,
default: '',
},
value_extra: {
type: [String, Number],
required: false,
default: '',
},
table: {
type: String,
required: false,
default: '',
},
myimg: {
type: String,
required: false,
default: '',
},
id: {
type: [String, Number],
required: false,
default: '',
},
idmain: {
type: String,
required: false,
default: '',
},
tablesel: {
type: String,
required: false,
default: '',
},
pickup: {
type: Boolean,
required: false,
default: false,
},
nosaveToDb: {
type: Boolean,
required: false,
default: false,
},
path: {
type: String,
required: false,
default: '',
},
},
components: { CMyChipList, CDateTime, CDate, CMyToggleList, CMySelect, CMyEditor, CGallery,
CCurrencyValue, CLabel, CAccomodation, CSelectImage },
setup(props, { emit }) {
const $q = useQuasar()
const { t } = useI18n()
const userStore = useUserStore()
const globalStore = useGlobalStore()
const myvalue = ref(null as any)
const myvalueprec = ref('false')
const countryname = ref('')
const visueditor = ref(false)
const visuhtml = ref(false)
const showeditor = ref(false)
const myImgGall = ref([{}] as IImgGallery[])
const col = ref(<IColGridTable>{
name: 'test',
fieldtype: 0,
showWhen: costanti.showWhen.NewRec + costanti.showWhen.InEdit + costanti.showWhen.InView,
visible: true,
maxlength: props.mycol ? props.mycol.maxlength : 0,
minlength: props.mycol ? props.mycol.minlength : undefined
})
const { setValDb, getValDb } = MixinBase()
const { getMyUsername } = MixinUsers()
const myrealrow = toRef(props, 'row')
watch(() => props.row, (newval, oldval) => {
refresh()
})
watch(() => props.rec, (newval, oldval) => {
refresh()
})
const myrow = ref(<any>null)
/* const myrow = computed(() => {
return props.rec && props.isrec ? props.rec : props.row
})
*/
function crea() {
// console.log('crea', isFieldDb(), 'props.mycol', props.mycol)
if (props.mycol && props.mycol.name && props.mycol.name !== 'test') {
col.value = props.mycol
} else {
if (col.value.name === 'test') {
col.value.name = props.field
if (props.subfield) {
col.value.name += '.' + props.subfield
}
}
col.value.jointable = props.jointable
if (props.filter)
col.value.filter = props.filter
col.value.fieldtype = props.type
col.value.label = props.title
if (props.type === costanti.FieldType.image) {
myImgGall.value = [{
_id: '',
imagefile: myvalue.value,
// order: 1,
alt: 'img',
}]
} else if (props.type === costanti.FieldType.imgcard) {
myImgGall.value = [myvalue.value]
}
// console.log('* col', col.value);
}
if (props.type) {
col.value.fieldtype = props.type
}
if (props.isrec) {
} else {
if (isFieldDb()) {
myvalue.value = getValDb(props.field, props.serv, '', props.table, props.subfield, props.id, props.idmain, props.indrec, props.mysubsubkey, props.specialField)
} else {
if (props.mycol && props.mycol.name)
col.value = { ...props.mycol }
}
}
if (props.tablesel) {
// let obj = tools.getParamsByTable(props.table)
// console.log('OBJ:', obj)
if (true) {
console.log(' CAMPO', props.field + '.' + props.subfield)
let myval = tools.getLabelFooterByRow(myrow.value, props.field + '.' + props.subfield, props.table)
if (myval)
myvalue.value = myval
console.log(' RECORD INPUT', myrow.value)
console.log(' VALORE OUTPUT: ', myvalue.value)
}
}
// console.log('CMyFieldDb crea', myvalue)
}
watch(() => props.id, (newval, oldval) => {
crea()
})
function isFieldDb() {
// return props.type !== 0
return props.fielddb
}
function isviewfield() {
return props.view === 'field'
}
function changeval(newval: any) {
// console.log('changeval update:row', newval)
if (!props.isrec) {
emit('update:row', props.row)
}
if (props.isInModif)
OpenEdit()
}
function getrealval(newval: any) {
if (col.value.fieldtype === costanti.FieldType.hours) {
newval = newval.value
}
}
async function addNewValue(value: any) {
// console.log('addNewValue', value, col.value)
if (col.value.allowNewValue && col.value.jointable) {
let myrec: any = {}
let mylabel = fieldsTable.getLabelByTable(col.value.jointable)
myrec[mylabel] = value
if (col.value.filter_field && props.value_extra) {
myrec[col.value.filter_field] = props.value_extra
}
// console.log('value_extra', props.value_extra)
if (props.table) {
return await globalStore.saveNewRecord(col.value.jointable, myrec)
}
}
return null
}
function changevalRec(newval: any) {
if (col.value && col.value.allowchar === costanti.ALLOWCHAR_CODE) {
myvalue.value = tools.removespaces_slash(newval)
}
// console.log('popuppedit: changevalRec', newval, 'COLName', col.value.name)
// console.log('row', props.row, 'col', props.mycol, 'newval', newval)
// console.log('row[col.value.name]', props.row[col.value.name])
if (props.type === costanti.FieldType.image) {
// console.log('image', newval)
}
myrow.value[col.value.name] = newval
// console.log('changevalRec update:row', myrow.value)
emit('update:row', myrow.value)
if (props.isInModif)
OpenEdit()
}
function changevalRecHours(newval: any) {
if (col.value.fieldtype === costanti.FieldType.hours) {
newval = newval.value
}
changevalRec(newval)
myvalue.value = newval
}
function updatedata() {
mounted()
}
function mounted() {
myrow.value = props.rec && props.isrec ? {...props.rec} : {...props.row}
try {
// console.log('mounted', 'isFieldDb()', isFieldDb())
if (isFieldDb() && !props.isrec) {
// console.log(' . none...')
} else {
if (props.subfield !== '') {
if (myrow.value[props.field] === undefined) {
myrow.value[props.field] = {}
myvalue.value = ''
} else {
myvalue.value = myrow.value[props.field][props.subfield]
}
} else {
if (props.field !== '')
myvalue.value = myrow.value[props.field]
else {
// @ts-ignore
myvalue.value = myrow.value
}
}
// console.log('props.field', props.field, 'props.subfield', props.subfield, 'myvalue: ', myvalue)
}
} catch (e) {
}
// 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 ')
myvalue.value = {
title: 'Galleria',
directory: 'none',
list: []
}
}
} else if (col.value.fieldtype === costanti.FieldType.listobj) {
if (myvalue.value === '' || myvalue.value === undefined) {
// console.log('set default myvalue.value ')
myvalue.value = [{
type: 0, // Letto matrimoniale / letto singolo / divano-letto / almaca / a terra sul tappeto (per sacco a pelo)
location: 0, // in camera privata / in camera condivisa / in soggiorno / in camper / in tenda / in giardino / all'aperto
num: 0,
}]
}
}
// console.log('myvalue.value', myvalue.value)
myvalueprec.value = myvalue.value
crea()
// console.log('myvalueprec', myvalueprec)
}
function refresh() {
mounted()
}
function OpenEdit() {
// console.log('OpenEdit')
emit('show')
}
function OpenEditDateToday() {
// console.log('OpenEdit')
myvalue.value = new Date()
emit('show')
}
/*function getval() {
let myval: any = 'false'
if ((props.subfield !== '') && (props.subfield !== '')) {
if (myrow.value[props.field] === undefined) {
myrow.value[props.field] = {}
myval = ''
} else {
myval = myrow.value[props.field][props.subfield]
}
} else {
if (props.field !== '')
myval = myrow.value[props.field]
else
myval = myrow.value
}
return myval
}*/
function SaveValueInt(newVal: any, valinitial: any) {
console.log('SaveValueInt', newVal, valinitial)
if (isFieldDb()) {
savefield(newVal, valinitial, $q)
} else {
// Update value in table memory
if (props.subfield !== '') {
if (myrow.value[props.field] === undefined)
myrow.value[props.field] = {}
myrow.value[props.field][props.subfield] = newVal
} else {
if (props.field !== '')
myrow.value[props.field] = newVal
else {
if (!props.isrec) {
// @ts-ignore
myrealrow.value = newVal
}
}
}
}
emit('save', newVal, valinitial)
}
function savefield(value: any, initialval: any, myq: any) {
if (!props.insertMode) {
myvalue.value = value
setValDb(myq, props.field, myvalue.value, props.type, props.serv, props.table, props.subfield, props.id, props.indrec, props.mysubsubkey, props.specialField)
}
}
function annulla(val: any) {
emit('annulla', true)
}
function savefieldboolean(value: any) {
if (myvalue.value === undefined)
myvalue.value = 'true'
else
myvalue.value = value
setValDb($q, props.field, myvalue, props.type, props.serv, props.table, props.subfield, props.id, props.indrec, props.mysubsubkey, props.specialField)
}
function Savedb(newVal: any, valinitial: any) {
console.log('Savedb', newVal)
if (col.value.fieldtype === costanti.FieldType.boolean) {
// console.log('myvalue', myvalue, newVal, myvalueprec)
if (myvalueprec.value === undefined) {
newVal = true
myvalueprec.value = myvalue.value
myvalue.value = newVal
}
// console.log('DOPO myvalue', myvalue, newVal, myvalueprec)
}
if (col.value.fieldtype === costanti.FieldType.image) {
console.log('newVal.imagefile', newVal)
myvalue.value = newVal
} else if (col.value.fieldtype === costanti.FieldType.imgcard) {
console.log('newVal.imagefile', newVal)
myvalue.value = newVal
}
if (col.value.fieldtype === costanti.FieldType.listobj) {
myvalue.value.accomodation = newVal
}
// console.log('Savedb', newVal)
emit('showandsave', props.row, props.mycol, newVal, valinitial)
visueditor.value = false
}
function visuValByType(val: any, col: IColGridTable, row: any) {
if (col === undefined || row === undefined)
return
// let val = ''
// if (col.subfield !== '') {
// if (row[col.field] === undefined)
// row[col.field] = {}
//
// val = row[col.field][col.subfield]
// } else {
// val = row[col.field]
// }
//
if (col.fieldtype === costanti.FieldType.date) {
if (val === undefined) {
return '[]'
} else {
return tools.getstrDateTime(val)
}
} else if (col.fieldtype === costanti.FieldType.onlydate) {
if (val === undefined) {
return '[]'
} else {
return tools.getstrDate(val)
}
} else if (col.fieldtype === costanti.FieldType.boolean) {
return (val) ? t('dialog.yes') : t('dialog.no')
} else if (col.fieldtype === costanti.FieldType.binary) {
if (val === undefined)
return '[---]'
else
return globalStore.getArrStrByValueBinary(col, val)
} else if (col.fieldtype === costanti.FieldType.select) {
if (val === undefined)
return '[---]'
else
return globalStore.getValueByTable(col, val)
} else if ((col.fieldtype === costanti.FieldType.nationality) || (col.fieldtype === costanti.FieldType.select_by_server) || (col.fieldtype === costanti.FieldType.multiselect_by_server)) {
if (!val)
return '[---]'
else
return val
} else if (col.fieldtype === costanti.FieldType.intcode) {
if (!val)
return '[---]'
else
return val
} else if (col.fieldtype === costanti.FieldType.multiselect) {
if (val === undefined)
return '[---]'
else
return globalStore.getMultiValueByTable(col, val)
} else if (col.fieldtype === costanti.FieldType.multioption) {
if (val === undefined)
return '[---]'
else
return globalStore.getMultiValueByTable(col, val)
} else if (col.fieldtype === costanti.FieldType.password) {
if (val === undefined)
return '[---]'
else
return '***************'
} else {
if (val === undefined || val === null) {
if (props.canEdit)
return ' <span class="text-grey">(' + t('reg.select') + ')</span> '
else
return ''
} else if (val === '') {
if (props.canEdit)
return ' <span class="text-grey">(' + t('reg.select') + ')</span> '
else
return ''
} else {
let mystr = ''
let mylink = ''
if (col.link)
mylink = col.link.replace(col.name, val)
if (col.tipovisu === costanti.TipoVisu.LINK && col.link) {
return "<a href='" + mylink + "'>" + val + '</a>'
} else if (col.tipovisu === costanti.TipoVisu.BUTTON && col.link) {
return ''
}
if (props.showall) {
return val
} else {
mystr = tools.firstchars(val, tools.MAX_CHARACTERS)
}
if (val) {
if (val.length > tools.MAX_CHARACTERS)
mystr += '...'
} else {
return val
}
return mystr
}
}
}
function getclassCol(mycol: any) {
if (mycol) {
let myclstr = (mycol.disable || isviewfield()) ? '' : 'colmodif'
myclstr += ((mycol.fieldtype === costanti.FieldType.date) || (mycol.fieldtype === costanti.FieldType.onlydate)) ? ' coldate flex flex-container' : ''
return myclstr
} else {
return ''
}
}
function mycl() {
if (props.disable) {
return 'cldisable'
}
}
function selectcountry({ name, iso2, dialCode }: {name: string, iso2: string, dialCode: string}) {
// console.log(name, iso2, dialCode)
myvalueprec.value = myvalue.value
myvalue.value = iso2
countryname.value = name
}
function intcode_change(coderec: any) {
myvalueprec.value = myvalue.value
myvalue.value = '+' + coderec.dialCode
}
function onInput(phone: any, phoneObject: any, input: any) {
if (phoneObject?.formatted) {
myvalue.value = phoneObject.formatted
}
}
function uploaded(info: any) {
if (info.files) {
myvalue.value = tools.geturlrelativeprofile() + '/' + getMyUsername() + '/' + info.files[0].name
console.log('uploaded', myvalue.value)
savefield(myvalue.value, '', $q)
}
// info.files[0].name
}
function removephoto() {
myvalue.value = ''
SaveValueInt(myvalue.value, '')
}
function noPopupeditByCol(mycol: IColGridTable) {
return (mycol.fieldtype !== costanti.FieldType.html
&& mycol.fieldtype !== costanti.FieldType.image
&& mycol.fieldtype !== costanti.FieldType.imgcard
&& mycol.fieldtype !== costanti.FieldType.listimages
&& mycol.fieldtype !== costanti.FieldType.listobj
&& mycol.fieldtype !== costanti.FieldType.number
)
}
function getTitleEditor(col: IColGridTable, row: any) {
let title = ''
if (!!col.field_extra1) {
try {
title = tools.getValue(row, col.field_extra1, col.subfield_extra1!)
} catch (e) {
}
}
return title
}
onBeforeMount(mounted)
return {
myvalue,
countryname,
visueditor,
visuhtml,
showeditor,
isviewfield,
changeval,
changevalRec,
addNewValue,
changevalRecHours,
updatedata,
OpenEdit,
OpenEditDateToday,
SaveValueInt,
annulla,
Savedb,
visuValByType,
getclassCol,
selectcountry,
intcode_change,
tools,
costanti,
fieldsTable,
onInput,
globalStore,
userStore,
removephoto,
isFieldDb,
col,
myImgGall,
noPopupeditByCol,
getTitleEditor,
myrow,
shared_consts,
}
}
})