Files
myprojplanet_vite/src/components/CMySelect/CMySelect.ts
Surya Paolo d1a66ef4ea - altro aggiornamento restying
- Invio RIS aggiornato
- Eventi
- Home Page restyling
2025-12-18 16:58:06 +01:00

905 lines
27 KiB
TypeScript
Executable File

import type { PropType } from 'vue';
import { computed, defineComponent, onMounted, ref, toRef, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useUserStore } from '@store/UserStore';
import { useGlobalStore } from '@store/globalStore';
import { useQuasar } from 'quasar';
import { costanti } from '@costanti';
import { fieldsTable } from '@store/Modules/fieldsTable';
import { shared_consts } from '@/common/shared_vuejs';
import type { IColGridTable } from 'model';
import { IOperators } from 'model';
import { tools } from '@tools';
import { useProducts } from 'app/src/store/Products';
export default defineComponent({
name: 'CMySelect',
emits: ['update:value', 'update:arrvalue', 'changeval', 'clear', 'searchOnGM'],
props: {
options: {
type: Array,
required: true,
},
arrvalue: {
type: Array,
required: false,
default: [],
},
value: [String, Number, Object],
label: {
type: String,
required: false,
default: undefined,
},
addstrrequired: {
type: String,
required: false,
default: '',
},
myclass: {
type: String,
required: false,
default: '',
},
tablesel: {
type: String,
required: false,
default: '',
},
type_out: {
type: Number,
required: false,
},
row: {
type: Object,
required: false,
default: () => {
return {};
},
},
col: {
type: Object as PropType<IColGridTable>,
required: false,
default: () => {
return { name: '' };
},
},
filter_table: {
type: String,
required: false,
default: '',
},
filter_field: {
type: String,
required: false,
default: '',
},
filter_extra: {
type: [Object, String],
required: false,
default: null,
},
value_extra: {
type: [String, Number],
required: false,
default: '',
},
myvaltosee: {
type: [String, Number],
required: false,
default: '',
},
optlab: [String, Function],
optval: {
type: String,
required: true,
},
useinput: {
type: Boolean,
required: false,
default: true,
},
pickup: {
type: Boolean,
required: false,
default: false,
},
addall: {
type: Boolean,
required: false,
default: false,
},
addnone: {
type: Boolean,
required: false,
default: false,
},
addlast: {
type: Boolean,
required: false,
default: false,
},
dense: {
type: Boolean,
required: false,
default: true,
},
multiple: {
type: Boolean,
required: false,
default: false,
},
newvaluefunc: {
type: Function,
required: false,
},
funcgetvaluebyid: {
type: Function,
required: false,
},
multiselect_by_server: {
type: Boolean,
default: false,
},
sola_lettura: {
type: Boolean,
default: false,
},
focus: {
type: Boolean,
default: false,
},
withToggle: {
type: Boolean,
default: false,
},
icon_alternative: {
type: String,
required: false,
default: '',
},
filter: {
type: Function,
required: false,
default: () => true,
},
},
components: {},
setup(props, { emit }) {
const $q = useQuasar();
const { t } = useI18n();
const userStore = useUserStore();
const globalStore = useGlobalStore();
const optFiltered = ref(<any>[]);
const valori = ref(<any>[]);
const myvalue = ref(<string | number | object>'');
const myarrvalue = ref(<any[]>[]);
const arrtempOpt = ref(<any[]>[]);
const optionsreal: any = [];
const selectMultiServer = ref(null);
const selectPickup = ref(null);
const selectMultiple = ref(null);
const selectGeneric = ref(null);
const productStore = useProducts();
const mystr = ref('');
const myval_tosee = ref<string | number>('');
const valoriload = computed(() => {
return updateArrOptions();
});
watch(
() => props.options,
(value: any, oldval: any) => {
if (!props.multiselect_by_server) {
valori.value = valoriload.value;
} else {
// console.log('@@@ VALORI CHANGED (1)', valori.value)
}
}
);
watch(
() => props.value,
(value: any, oldval: any) => {
update();
}
);
watch(
() => props.arrvalue,
(value: any, oldval: any) => {
// console.log(' MODIF props.arrvalue', props.arrvalue)
update();
}
);
function saveOptInCookie(arrval: any) {
// console.log('saveOptInCookie')
if (arrval) {
for (const id of arrval) {
const trovato = arrtempOpt.value.find((rec) => rec._id === id);
if (!trovato) {
const rec = valori.value.find((rec: any) => rec._id === id);
if (rec) {
// console.log('SAVE OPT rec', rec)
const obj: any = {};
obj[`${props.optval}`] = id;
obj[`${props.optlab}`] = rec[`${props.optlab}`];
arrtempOpt.value.push(obj);
let num = localStorage.getItem(props.tablesel + 'NUM') || 0;
try {
if (!num) {
num = 0;
} else {
num = parseInt(num.toString(), 10);
}
} catch (e) {
num = 0;
}
// console.log('----------- valori.value', valori.value)
// console.log('----------- arrtempOpt.value', arrtempOpt.value)
tools.localStSetItem(props.tablesel + num + props.optval, id);
const mysaved = tools.getValueByFunzOrVal(rec, props.optlab);
tools.localStSetItem(props.tablesel + num + props.optlab, mysaved);
console.log(
' SAVED: ',
props.tablesel + num + props.optlab,
'=',
mysaved
);
num += 1;
tools.localStSetItem(props.tablesel + 'NUM', num.toString());
}
}
}
}
}
function changeval(newval: any) {
// console.log(' ½½½½½½½ changeval', newval)
if (props.multiple || props.multiselect_by_server) {
// tools.localStSetItem(props.tablesel + '_' + newval, valori.value[newval])
if (props.type_out === costanti.FieldType.object) {
const arrout = [];
for (const val of newval) {
const obj: any = {};
if (typeof val !== 'object') {
obj[props.optval] = val;
arrout.push(obj);
} else {
arrout.push(val);
}
}
myarrvalue.value = arrout;
} else {
myarrvalue.value = newval && newval['arrvalue'] ? newval['arrvalue'] : newval;
}
saveOptInCookie(newval);
console.log(' ----- Myselect changeval Arrvalue', myarrvalue.value);
emit('update:arrvalue', myarrvalue.value);
emit('changeval', myarrvalue.value);
} else {
if (props.tablesel === shared_consts.TAB_COUNTRY)
myvalue.value = newval && newval['value'] ? newval['value'] : newval;
else if (props.tablesel === shared_consts.TAB_CITIES)
myvalue.value = newval && newval['value'] ? newval['value'] : newval;
else if (props.tablesel === shared_consts.TAB_PHONES)
myvalue.value = newval && newval['code'] ? newval['code'] : newval;
else myvalue.value = newval;
// console.log('Myselect changeval', myvalue.value)
if (myvalue.value && JSON.stringify(myvalue.value)) {
saveLastOpt(props.optval, JSON.stringify(myvalue.value));
}
saveOptInCookie([myvalue.value]);
emit('update:value', myvalue.value);
emit('changeval', myvalue.value);
}
}
function saveLastOpt(key: string, myval: any) {
let ind = 9;
// get free number
for (let i = 0; i < 10; i++) {
let myoldval = tools.getItemLS(props.tablesel + 'last_VAL' + i.toString());
myoldval = tools.strToObj(myoldval);
if (myoldval && myoldval[key]) {
if (myoldval[key] === myval) {
// already exist
return;
}
// if (myoldval[key] !== myval) {
if (!myoldval[key]) {
ind = i;
break;
}
} else {
ind = i;
break;
}
}
// console.log('saveLastOpt', ind, 'key', key, 'myval', myval)
tools.localStSetItem(props.tablesel + 'last_OPT' + ind.toString(), key);
tools.localStSetItem(props.tablesel + 'last_VAL' + ind.toString(), myval);
}
function mounted() {
// console.log('CMYSELECT: mounted')
myval_tosee.value = props.myvaltosee
optionsreal.value = props.options;
if (props.focus) {
focusVisibleSelect();
}
update();
}
function focusVisibleSelect() {
try {
if (selectMultiServer.value && props.multiselect_by_server) {
selectMultiServer.value.focus();
} else if (selectPickup.value && props.pickup) {
selectPickup.value.focus();
} else if (selectMultiple.value && props.multiple) {
selectMultiple.value?.focus();
} else {
if (selectGeneric.value) selectGeneric.value?.focus();
}
} catch (e) {
console.error('Err', e);
}
}
function update() {
// console.log(' #### mounted myselect', props.options, 'arrvalue', myarrvalue.value)
let rec: any;
if (optionsreal.value) {
if (!props.multiselect_by_server) {
rec = optionsreal.value.find(
(myrec: any) => myrec[`${props.optval}`] === props.value
);
}
}
if (props.multiselect_by_server) {
const num = parseInt(localStorage.getItem(props.tablesel + 'NUM')!, 10);
// console.log('num LOADED ', num)
arrtempOpt.value = [];
if (props.addall) {
let myobj: any = {};
if (typeof props.optlab === 'string') {
myobj = tools.setRecordByField(props.optlab, myobj, '(Tutti)');
myobj = tools.setRecordByField(props.optval, myobj, costanti.FILTER_TUTTI);
}
arrtempOpt.value.push(myobj);
}
if (props.addnone) {
const myobj: any = {};
if (typeof props.optlab === 'string') {
myobj[props.optlab] = '[Nessuno]';
myobj[props.optval] = costanti.FILTER_NESSUNO;
}
arrtempOpt.value = [myobj, ...arrtempOpt.value];
}
for (let i = 0; i < num; i++) {
const itemId = parseInt(
localStorage.getItem(props.tablesel + i + props.optval)!,
10
);
const itemlab = localStorage.getItem(props.tablesel + i + props.optlab);
if (itemId) {
const obj: any = {};
obj[`${props.optval}`] = itemId;
obj[`${props.optlab}`] = itemlab;
if (!arrtempOpt.value.find((rec) => rec._id === itemId))
arrtempOpt.value.push(obj);
}
}
// Check if exist other array:
if (props.col) {
if (props.col.remote_table && props.col.remote_key && props.col.remote_field) {
try {
const myarrremote = props.row[props.col.remote_table];
for (const myrec of myarrremote) {
const myidkey = myrec[props.col.remote_key];
if (!arrtempOpt.value.includes(myidkey)) {
const myobj: any = {};
myobj[props.col.remote_key] = myidkey;
if (props.col.remote_field === 'comune' && !!myrec['prov']) {
myobj[props.col.remote_field] =
myrec[props.col.remote_field] + ' (' + myrec['prov'] + ')';
} else {
myobj[props.col.remote_field] = myrec[props.col.remote_field];
}
arrtempOpt.value.push(myobj);
}
}
} catch (e) {}
}
}
myarrvalue.value = [];
const myarr = props.arrvalue;
if (tools.isArray(myarr)) {
for (const val of myarr) {
rec = arrtempOpt.value.find((myrec: any) => val === myrec[`${props.optval}`]);
if (rec) {
myarrvalue.value.push(rec[`${props.optval}`]);
} else {
myarrvalue.value.push(val);
}
}
}
} else {
if (props.addnone) {
const myobj: any = {};
if (typeof props.optlab === 'string') {
myobj[props.optlab] = '[Nessuno]';
myobj[props.optval] = costanti.FILTER_NESSUNO;
}
myarrvalue.value = [myobj, ...myarrvalue.value];
}
}
if (props.tablesel === 'friendsandme') {
// debugger;
}
if (props.multiple) {
const arrrec = [];
let myarr = props.arrvalue;
if (myarr && !tools.isArray(myarr)) {
myarr = [myarr];
}
if (myarr) {
for (const val of myarr) {
rec = optionsreal.value.find(
(myrec: any) => val === myrec[`${props.optval}`]
);
if (rec) {
arrrec.push(rec[`${props.optval}`]);
}
}
}
if (arrrec.length > 0) {
if (props.funcgetvaluebyid) myarrvalue.value = props.funcgetvaluebyid(arrrec);
else myarrvalue.value = arrrec;
} else {
if (props.arrvalue) {
myarrvalue.value = props.arrvalue;
}
}
} else {
if (rec) {
if (props.funcgetvaluebyid)
myvalue.value = props.funcgetvaluebyid(rec[`${props.optval}`]);
else myvalue.value = tools.getValueByFunzOrVal(rec, props.optlab);
} else {
// if (!props.useinput) {
if (props.value) {
myvalue.value = props.value;
} else {
myvalue.value = '';
}
// }
}
// console.log('myvalue', props.tablesel, myvalue.value)
// console.log('props.value', props.value)
}
if (props.multiselect_by_server) {
valori.value = arrtempOpt.value;
} else {
valori.value = valoriload.value;
}
// console.log('cmyselect: myvalue.value', myvalue.value)
}
function updateArrOptions() {
let myarr: any = [];
// console.log(props.col.jointable, props.filter)
if (props && props.col && props.col.jointable) {
optionsreal.value = globalStore.getTableJoinByName(
props.col.jointable,
props.col.addall,
props.col.addnone,
props.filter
);
// console.log('optionsreal.value', optionsreal.value)
} else {
optionsreal.value = props.options;
}
// console.log('optionsreal.value', optionsreal.value)
myarr = optionsreal.value;
if (!fieldsTable.tableRemotePickup.includes(props.tablesel)) {
const needle: any = props.value_extra;
// console.log('needle', needle, 'props.multiple', props.multiple)
if (props.filter_table) {
// console.log(' FILTERTABLE', props.filter_field, myarr)
if (props.multiple) {
myarr = myarr.filter((rec: any) => rec[props.filter_field] === needle);
} else {
myarr = myarr.filter((rec: any) => {
if (tools.isArray(rec[props.filter_field]))
return rec[props.filter_field].includes(needle);
else return false;
});
}
// console.log(' RISSSSSSSSS: ', myarr)
}
}
if (props.addall) {
let myobj: any = {};
// if (typeof props.optlab === 'string') {
myobj = tools.setRecordByField(props.optlab, myobj, '(Tutti)');
myobj = tools.setRecordByField(props.optval, myobj, costanti.FILTER_TUTTI);
// }
if (myarr && !tools.isObjectEmpty(myobj)) myarr = [myobj, ...myarr];
}
if (props.addnone) {
const myobj: any = {};
if (typeof props.optlab === 'string') {
myobj[props.optlab] = '[Nessuno]';
myobj[props.optval] = costanti.FILTER_NESSUNO;
}
if (myarr) myarr = [myobj, ...myarr];
}
if (props.addlast) {
myarr = getLastInserted(myarr);
}
// console.log(' myarr: ', myarr)
return myarr;
}
function getLastInserted(myarr: any) {
for (let ind = 0; ind < 10; ind++) {
const optlab = tools.getItemLS(props.tablesel + 'last_OPT' + ind.toString());
let optval = tools.getItemLS(props.tablesel + 'last_VAL' + ind.toString());
if (optval) optval = JSON.parse(optval);
// console.log(ind, '¶¶¶¶¶¶¶¶¶¶ optlab', optlab, 'optval', optval)
const myobj2: any = {};
if (typeof props.optlab === 'string') {
if (optval && !!optval['comune']) {
myobj2[props.optlab] = optval['comune'];
myobj2[props.optval] = optval[optlab];
myarr = [...myarr, myobj2];
}
}
}
return myarr;
}
function filterFn(val: any, update: any, abort: any) {
update(
async () => {
// console.log('Filter val:', val, 'len=', val.length)
// console.log('props.filter_extra', props.filter_extra)
// console.log('valori.value', valori.value)
let myarr: any = [];
mystr.value = val.toLocaleLowerCase();
myarr = updateArrOptions();
if (!fieldsTable.tableRemotePickup.includes(props.tablesel)) {
if (myarr && myarr.length > 0) {
valori.value = myarr;
} else {
if (props.filter_table) {
valori.value = [];
}
}
if (!props.multiple && !props.multiselect_by_server) {
if (val === '') {
valori.value = myarr;
} else {
const optlab: any = props.optlab ? '' + props.optlab : '';
if (optlab) {
valori.value = myarr.filter((v: any) => {
const mioval = tools.getRecordByField(optlab, v);
if (mioval) return mioval?.toLowerCase().indexOf(mystr.value) > -1;
else return false;
});
}
}
}
return;
}
if (
val.length <= 1 &&
!(
fieldsTable.tableRemotePickup.includes(props.tablesel) && props.filter_extra
)
) {
console.log('@@@ LENGTH <= 1');
abort();
return;
}
// console.log('props.tablesel', props.tablesel)
if (fieldsTable.tableRemotePickup.includes(props.tablesel)) {
try {
// myarr = optionsreal.value
myarr = [];
if (mystr.value !== '' || props.filter_extra) {
// myarr = [{_id:1, prov: 'RN', descr: 'Rimini'}]
/*
if (val === '1') {
myarr.push({ _id: 1, comune: 'PROVA 1', prov: 'AL' })
myarr.push({ _id: 2, comune: 'PROVA 1b', prov: 'AL' })
}else if (val === '2') {
myarr.push({ _id: 1, comune: 'PROVA 2', prov: 'AL' })
myarr.push({ _id: 2, comune: 'PROVA 2B', prov: 'AL' })
}*/ // @ts-ignore
myarr = await globalStore.loadPickup({
table: props.tablesel,
search: mystr.value.trim(),
filter: props.filter_extra,
});
}
if (myarr === null) {
console.log('@@@ VALORI VALUE XXX', valori.value);
valori.value = arrtempOpt.value;
}
} catch (e) {
console.log('@@@ VALORI VALUE XXX', valori.value);
valori.value = arrtempOpt.value;
}
// const needle = val.toLocaleLowerCase()
// optFiltered.value = optFiltered.value.filter((v: any) => v.toLocaleLowerCase().indexOf(needle) > -1)
if (props.addall) {
let myobj: any = {};
if (typeof props.optlab === 'string') {
myobj = tools.setRecordByField(props.optlab, myobj, '(Tutti)');
myobj = tools.setRecordByField(
props.optval,
myobj,
costanti.FILTER_TUTTI
);
}
myarr = [myobj, ...myarr];
}
if (props.addnone) {
const myobj: any = {};
if (typeof props.optlab === 'string') {
myobj[props.optlab] = '[Nessuno]';
myobj[props.optval] = costanti.FILTER_NESSUNO;
}
myarr = [myobj, ...myarr];
}
if (props.addlast) {
myarr = getLastInserted(myarr);
}
}
if (myarr && myarr.length > 0) {
valori.value = myarr;
if (props.multiselect_by_server) {
// console.log('@@@ VALORI CHANGED (3)', valori.value)
}
} else {
valori.value = [];
}
console.log('*** OUT: tablesel', props.tablesel, 'filterFn', myarr);
},
// "ref" is the Vue reference to the QSelect
(ref: any) => {
if (!props.useinput) {
// console.log('ref.options', ref.options)
if (val !== '' && ref.options.length > 0) {
ref.setOptionIndex(-1); // reset optionIndex in case there is something selected
ref.moveOptionSelection(1, true); // focus the first selectable option and do not update the input-value
}
}
}
);
}
function abortFilterFn() {
console.log('delayed filter aborted');
}
function checkIfShowRec(rec: any) {
return (rec._id > 0 && typeof rec._id === 'number') || rec._id !== 'number';
}
async function newvaluefuncfirst(value: any, done: any) {
if (props.newvaluefunc && props.col) {
const fieldval = fieldsTable.getLabelByTable(props.col.jointable);
// console.log('fieldval', fieldval, 'optionsreal.value', optionsreal.value)
// Se esiste già, non crearlo
const esiste = optionsreal.value.find((rec: any) => {
// console.log('rec[fieldval]',rec[fieldval], value.toLowerCase())
return (
rec[fieldval]?.toLowerCase() === value.toLowerCase() &&
rec[props.filter_field] === props.value_extra
);
});
console.log('esiste', esiste);
if (!esiste || (esiste && esiste.length === 0)) {
// console.log('non esiste, lo creo ! ', value)
const newrec = await props.newvaluefunc(tools.CapitalizeAllWords(value));
if (newrec) {
if (props.col && props.col.jointable) {
// Reload
// console.log(' A1', optionsreal.value)
// valori.value = valoriload.value
// optionsreal.value = valori.value
console.log('DOPO', optionsreal.value);
}
console.log('newrec', newrec);
const myid = fieldsTable.getKeyByTable(props.col.jointable);
const recfound = valori.value.find((rec: any) => rec[myid] === newrec[myid]);
if (!recfound) {
done(newrec, 'add-unique');
}
// console.log('myid', myid, optionsreal.value)
// console.log('recfound',recfound)
// console.log('newrec[myid]',newrec[myid])
/*if (recfound) {
const arrout = [...myarrvalue.value]
if (!arrout.includes(recfound[myid])) {
arrout.push(recfound[myid])
}
console.log(' arrout (1)', arrout)
if (props.multiple || props.multiselect_by_server) {
if (myid) {
done(newrec, 'add-unique')
}
} else {
done(recfound[myid], 'add-unique')
}
/* if (props.multiple || props.multiselect_by_server) {
console.log('arrout (2)', arrout)
changeval(arrout)
}
}*/
}
}
}
}
function getIcon() {
if (props.icon_alternative) return props.icon_alternative;
if (props.col && props.col['icon']) {
return props.col['icon'];
}
return '';
}
function selectText(event: any) {
// Seleziona tutto il testo all'interno della casella di testo
event.target.select();
}
function getLabelValue(opt: any): string {
const collabel = props.optlab;
if (typeof collabel === 'function') {
// Se collabel è una funzione, chiamala con opt
return collabel(opt);
} else if (typeof collabel === 'string') {
// Se collabel è una stringa, usa il valore della proprietà corrispondente
return opt[collabel] || 'N/A';
}
// Fallback generico
return 'N/A';
}
function getOptionLabel(option: any): string {
// console.log('getOptionLabel', option)
let lab = '';
if (typeof props.optlab === 'function') {
lab = props.optlab(option); // Se optlab è una funzione, chiamala
} else {
if (typeof option === "object") {
lab = option[props.optlab]; // Se optlab è una stringa, usa la proprietà corrispondente
} else {
lab = myval_tosee.value ? myval_tosee.value : '';
}
}
if (!lab) {
// console.log('⚠️ LAB NON PRESENTE !');
}
return lab;
}
function clear() {
emit('clear');
myvalue.value = '';
mystr.value = '';
myval_tosee.value = '';
}
function searchOnGM(mystr: string) {
emit('searchOnGM', mystr);
}
function applyLabelColorBasedOnProductStatus(myrec: any) {
let classi = '';
if (props.tablesel === 'products') {
if (productStore.isNonVendibile(myrec)) {
classi = 'bg-grey';
}
if (!productStore.isDisponibile(myrec)) {
classi = 'bg-red-1';
}
}
return classi;
}
onMounted(mounted);
return {
changeval,
myvalue,
myarrvalue,
valori,
filterFn,
fieldsTable,
checkIfShowRec,
abortFilterFn,
newvaluefuncfirst,
getIcon,
tools,
selectText,
getLabelValue,
getOptionLabel,
clear,
mystr,
searchOnGM,
applyLabelColorBasedOnProductStatus,
};
},
});