Ciao a tutti, volevo chiedervi aiuto su 2 piccole rogne che non riesco a risolvere.
Ho realizzato un componente .vue (di cui vi posto il codice) che contiene un form (perfettamente funzionante) e che richiamo ovunque mi serva.
Ho 2 maledette rogne....
1 - perchè se premo su un qualsiasi punto della tabella, il cursore mi torna al primo input? successivamente ho un campo autocomplete e questo problema mi impedisce la selezione di un valore.
2 - anche se il props "customer" mi arriva vuoto, perchè va a pescare i campi username e password dalla mia sessione?
Avete suggerimenti?
Grazie
<template>
<label :id="id_label_component" class="nascondi">
<section id="formInsertUpdateCustomer" style="padding:5px;">
<form @submit="formSubmit">
<table class="table">
<tr>
<th style="width: 150px;">*Nome</th>
<td>
<div class="input-group mb-3">
<input type="text" class="form-control" name="name" id="name" v-model="dataCustomer.name" required />
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-user"></span>
</div>
</div>
</div>
<div v-if="erroriForm.name" class="formValueError">
<span v-for="err in erroriForm.name">{{ err }} <br></span>
</div>
</td>
</tr>
<tr>
<th>*Cognome</th>
<td>
<div class="input-group mb-3">
<input type="text" class="form-control" name="surname" id="surname" v-model="dataCustomer.surname" required>
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-user"></span>
</div>
</div>
</div>
<div v-if="erroriForm.surname" class="formValueError">
<span v-for="err in erroriForm.surname">{{ err }} <br></span>
</div>
</td>
</tr>
<tr>
<th>*Username</th>
<td>
<div class="input-group mb-3">
<input type="text" class="form-control" name="username" id="username" v-model="dataCustomer.username" required >
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-signature"></span>
</div>
</div>
</div>
<div v-if="erroriForm.username" class="formValueError">
<span v-for="err in erroriForm.username">{{ err }} <br></span>
</div>
</td>
</tr>
<tr>
<th>*Email</th>
<td>
<div class="input-group mb-3">
<input type="email" class="form-control" name="email" id="email" v-model="dataCustomer.email" required >
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-envelope"></span>
</div>
</div>
</div>
<div v-if="erroriForm.email" class="formValueError">
<span v-for="err in erroriForm.email">{{ err }} <br></span>
</div>
</td>
</tr>
<!-- password solo per inserimento -->
<tr v-if="action == 'insert'">
<th>*Password</th>
<td>
<div class="input-group mb-3">
<input type="password" id="password" class="form-control" v-model="dataCustomer.password" name="password" required>
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-eye" id="eye_password" @click="toggleShowPassword('password')"></span>
</div>
</div>
</div>
<div v-if="erroriForm.password" class="formValueError">
<span v-for="err in erroriForm.password">{{ err }} <br></span>
</div>
</td>
</tr>
<tr v-if="action == 'insert'">
<th>*Repeat Password</th>
<td>
<div class="input-group mb-3">
<input type="password" id="repeat_password" class="form-control" name="repeat_password" v-model="dataCustomer.repeat_password" required>
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-eye" id="eye_repeat_password" @click="toggleShowPassword('repeat_password')"></span>
</div>
</div>
</div>
<div v-if="erroriForm.repeat_password" class="formValueError">
<span v-for="err in erroriForm.repeat_password">{{ err }} <br></span>
</div>
</td>
</tr>
<tr>
<th>*Data nascita</th>
<td>
<!-- @input="dataCustomer.date_of_birth = fixDate(dataCustomer.date_of_birth)" -->
<div class="input-group mb-3">
<input type="date" class="form-control" name="date_of_birth" id="date_of_birth" v-model="dataCustomer.date_of_birth" required>
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-birthday-cake"></span>
</div>
</div>
</div>
<div v-if="erroriForm.date_of_birth" class="formValueError">
<span v-for="err in erroriForm.date_of_birth">{{ err }} <br></span>
</div>
</td>
</tr>
<tr>
<th>*Sesso</th>
<td>
<div class="input-group mb-3">
<div class="row col-12">
<div class="col-1"> M </div>
<div class="col-1">
<input type="radio" class="inputRadio form-control" name="gender" value="1" v-model="dataCustomer.gender" required v-if="customer.gender == 1" checked >
<input type="radio" class="inputRadio form-control" name="gender" value="1" v-model="dataCustomer.gender" required v-else>
</div>
<div class="col-1"> F </div>
<div class="col-1">
<input type="radio" class="inputRadio form-control" name="gender" value="0" v-model="dataCustomer.gender" required v-if="customer.gender == 0" checked >
<input type="radio" class="inputRadio form-control" name="gender" value="0" v-model="dataCustomer.gender" required v-else >
</div>
</div>
</div>
<div v-if="erroriForm.gender" class="formValueError">
<span v-for="err in erroriForm.gender">{{ err }} <br></span>
</div>
</td>
</tr>
<tr>
<th>Telefono</th>
<td>
<div class="input-group mb-3">
<input type="text" class="form-control" name="phone" id="phone" v-model="dataCustomer.phone" >
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-phone"></span>
</div>
</div>
</div>
<div v-if="erroriForm.phone" class="formValueError">
<span v-for="err in erroriForm.phone">{{ err }} <br></span>
</div>
</td>
</tr>
<tr>
<th>*Cellulare</th>
<td>
<div class="input-group mb-3">
<input type="text" class="form-control" name="mobile_phone" id="mobile_phone" v-model="dataCustomer.mobile_phone" required>
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-mobile"></span>
</div>
</div>
</div>
<div v-if="erroriForm.mobile_phone" class="formValueError">
<span v-for="err in erroriForm.mobile_phone">{{ err }} <br></span>
</div>
</td>
</tr>
<tr>
<th>Codice Fiscale</th>
<td>
<div class="input-group mb-3">
<input type="text" class="form-control" name="cf" id="cf" v-model="dataCustomer.cf" >
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-id-card"></span>
</div>
</div>
</div>
<div v-if="erroriForm.cf" class="formValueError">
<span v-for="err in erroriForm.cf">{{ err }} <br></span>
</div>
</td>
</tr>
<tr>
<th>P. Iva</th>
<td>
<div class="input-group mb-3">
<input type="text" class="form-control" name="piva" id="piva" v-model="dataCustomer.piva" >
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-id-card"></span>
</div>
</div>
</div>
<div v-if="erroriForm.piva" class="formValueError">
<span v-for="err in erroriForm.piva">{{ err }} <br></span>
</div>
</td>
</tr>
<tr>
<th>Photo</th>
<td>
<div class="input-group mb-3">
<!-- @change="filesChange($event.target.name, $event.target.files); fileCount = $event.target.files.length" -->
<input type="file" accept="image/*" class="form-control-file" name="url_photo" id="url_photo">
</div>
<div v-if="erroriForm.url_photo" class="formValueError">
<span v-for="err in erroriForm.url_photo">{{ err }} <br></span>
</div>
</td>
</tr>
<tr>
<th>Title Photo</th>
<td>
<div class="input-group mb-3">
<input type="text" class="form-control" name="title_photo" id="title_photo" v-model="dataCustomer.title_photo" >
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-id-card"></span>
</div>
</div>
</div>
<div v-if="erroriForm.title_photo" class="formValueError">
<span v-for="err in erroriForm.title_photo">{{ err }} <br></span>
</div>
</td>
</tr>
<tr>
<th>*Business custome</th>
<td>
<div class="input-group mb-3">
<div class="row col-12">
<div class="col-1"> Si </div>
<div class="col-1">
<input type="radio" class="inputRadio form-control" name="business_customer" value="1" v-model="dataCustomer.business_customer" required v-if="dataCustomer.business_customer || dataCustomer.business_customer == 1" checked >
<input type="radio" class="inputRadio form-control" name="business_customer" value="1" v-model="dataCustomer.business_customer" required v-else>
</div>
<div class="col-1"> No </div>
<div class="col-1">
<input type="radio" class="inputRadio form-control" name="business_customer" value="0" v-model="dataCustomer.business_customer" required v-if="!dataCustomer.business_customer || dataCustomer.business_customer == 0" checked >
<input type="radio" class="inputRadio form-control" name="business_customer" value="0" v-model="dataCustomer.business_customer" required v-else >
</div>
</div>
</div>
<div v-if="erroriForm.business_customer" class="formValueError">
<span v-for="err in erroriForm.business_customer">{{ err }} <br></span>
</div>
</td>
</tr>
<tr>
<th>School qualification</th>
<td>
<div class="input-group mb-3">
<input type="text" class="form-control" name="school_qualification" id="school_qualification" v-model="dataCustomer.school_qualification" >
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-graduation-cap"></span>
</div>
</div>
</div>
<div v-if="erroriForm.school_qualification" class="formValueError">
<span v-for="err in erroriForm.school_qualification">{{ err }} <br></span>
</div>
</td>
</tr>
<tr>
<th>Referring Customer</th>
<td>
<div class="input-group mb-3">
<inputTextAutocomplete></inputTextAutocomplete>
</div>
</td>
</tr>
<tr>
<th>Situazione Newsletter</th>
<td>
<div class="input-group mb-3" style="height: auto;">
<select name="situation_newsletter_id" id="situation_newsletter_id" class="form-control" v-model="dataCustomer.situation_newsletter_id" required>
<option v-for="situation in listSituationsNewsletters" :key="situation.id" :value="situation.id">
{{ situation.situation_newsletter }}
</option>
</select>
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-envelope"></span>
</div>
</div>
</div>
<div v-if="erroriForm.situation_newsletter" class="formValueError">
<span v-for="err in erroriForm.situation_newsletter">{{ err }} <br></span>
</div>
</td>
</tr>
<tr>
<th>System To Know</th>
<td>
<div class="input-group mb-3" style="height: auto;">
<select name="system_to_know_id" id="system_to_know_id" class="form-control" v-model="dataCustomer.system_to_know_id" required>
<option v-for="system in listSystemsToKnows" :key="system.id" :value="system.id">
{{ system.method }}
</option>
</select>
<div class="input-group-append">
<div class="input-group-text">
<span class="fa fa-assistive-listening-systems"></span>
</div>
</div>
</div>
<div v-if="erroriForm.method" class="formValueError">
<span v-for="err in erroriForm.method">{{ err }} <br></span>
</div>
</td>
</tr>
<tr>
<th>Language</th>
<td>
<div class="input-group mb-3" style="height: auto;">
<select name="language_id" id="language_id" class="form-control" v-model="dataCustomer.language_id" required>
<option v-for="language in listLanguages" :key="language.id" :value="language.id">
{{ language.language }}
</option>
</select>
<div class="input-group-append">
<div class="input-group-text">
<span class="fa fa-language"></span>
</div>
</div>
</div>
<div v-if="erroriForm.language" class="formValueError">
<span v-for="err in erroriForm.language">{{ err }} <br></span>
</div>
</td>
</tr>
<tr>
<th>Descrizione</th>
<td>
<div class="input-group mb-3" style="height: auto;">
<textarea class="form-control" name="description" :id="['descriptionTextarea_' + dataCustomer.id]" rows="2.5" v-model="dataCustomer.description"></textarea>
</div>
<div v-if="erroriForm.description" class="formValueError">
<span v-for="err in erroriForm.description">{{ err }} <br></span>
</div>
</td>
</tr>
<tr>
<th>Note</th>
<td>
<div class="input-group mb-3" style="height: auto;">
<textarea class="form-control" name="note" :id="['noteTextarea_' + dataCustomer.id]" rows="2.5" v-model="dataCustomer.note"></textarea>
</div>
<div v-if="erroriForm.note" class="formValueError">
<span v-for="err in erroriForm.note">{{ err }} <br></span>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="mb-3 text-right">
<button type="submit" class="btn btn_blu"
:alt="trans('administration.form.formSalva')"
:title="trans('administration.form.formSalva')"
>
<i class="fas fa-save"></i> {{ trans('administration.form.formSalva') }}
</button>
</div>
<modalEsitoOperazioneErrore style="display: none" :page="page" :id="['modalEsitoOperazioneErrore_' + dataCustomer.id]"></modalEsitoOperazioneErrore>
<modalEsitoOperazioneCampiFormNonCongrui style="display: none" :page="page" :id="['modalEsitoOperazioneCampiFormNonCongrui_' + dataCustomer.id]"></modalEsitoOperazioneCampiFormNonCongrui>
<modalEsitoOperazioneOk style="display: none" :page="page" :id="['modalEsitoOperazioneOk_' + dataCustomer.id]"></modalEsitoOperazioneOk>
</td>
</tr>
</table>
</form>
</section>
</label>
</template>
<script>
import inputTextAutocomplete from '../../../generic/form/autocomplete/inputTextAutocomplete'
export default {
name: "formUpdateCustomer",
components: {
"inputTextAutocomplete": inputTextAutocomplete
},
props: [
'customer',
'customers',
'id_label_component',
'listSituationsNewsletters',
'listSystemsToKnows',
'listLanguages',
'page',
'action'
],
data() {
return {
dataCustomer: this.customer,
csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
erroriForm: {}
}
},
methods: {
fixDate() {
if (this.dataCustomer.date_of_birth != null && this.action == 'update') {
this.dataCustomer.date_of_birth = this.$moment(String(this.dataCustomer.date_of_birth)).format('YYYY-MM-DD');
}
},
toggleShowPassword(id) {
let viewType = document.querySelector("#" + id);
let specificButton = document.querySelector("#eye_" + id);
specificButton.classList.remove('fa-eye', 'fa-eye-slash');
if (viewType.type === "password") {
specificButton.classList.add('fa-eye-slash');
viewType.type = "text";
} else {
specificButton.classList.add('fa-eye');
viewType.type = "password";
}
},
formSubmit(e) {
let url_controller = '';
if(this.action == 'update') { url_controller = "skynet_ai_update_customers"; }
if(this.action == 'insert') { url_controller = "skynet_ai_insert_customers"; }
// senza questo, fa il reload della pagina parent
e.preventDefault();
// console.log(this.dataCustomer);
// let currentObj = this;
this.$axios.post(this.$myVar.pathToController + url_controller, {
id: this.dataCustomer.id,
name: this.dataCustomer.name,
surname: this.dataCustomer.surname,
username: this.dataCustomer.username,
email: this.dataCustomer.email,
date_of_birth: this.dataCustomer.date_of_birth,
url_photo: this.dataCustomer.url_photo,
title_photo: this.dataCustomer.title_photo,
description: this.dataCustomer.description,
password: this.dataCustomer.password,
repeat_password: this.dataCustomer.repeat_password,
phone: this.dataCustomer.phone,
mobile_phone: this.dataCustomer.mobile_phone,
cf: this.dataCustomer.cf,
piva: this.dataCustomer.piva,
business_customer: this.dataCustomer.business_customer,
school_qualification: this.dataCustomer.school_qualification,
gender: this.dataCustomer.gender,
note: this.dataCustomer.note,
id_referring_customer: this.dataCustomer.id_referring_customer,
id_referring_user: this.dataCustomer.id_referring_user,
situation_newsletter_id: this.dataCustomer.situation_newsletter_id,
system_to_know_id: this.dataCustomer.system_to_know_id,
language_id: this.dataCustomer.language_id,
headers: {'Content-Type': 'multipart/form-data' },
_token: this.csrf
})
.then(response => {
// query ok
if (response.data.esito === true) {
document.querySelector("#modalEsitoOperazioneOk_" + this.customer.id).style.display = "block";
setTimeout(() => {
this.$parent.getCustomer(this.page);
// serve per insert (pulisce il form)
if(this.action == 'insert') {
this.dataCustomer = this.customer;
document.querySelector("#tr_btn_insert_").style.display = "none";
}
document.querySelector("#modalEsitoOperazioneOk_" + this.customer.id).style.display = "none";
}, 1500);
}
// campi mancanti o errati
else {
document.querySelector("#modalEsitoOperazioneCampiFormNonCongrui_" + this.customer.id).style.display = "block";
setTimeout(() => {
this.erroriForm = response.data.esito.original;
document.querySelector("#modalEsitoOperazioneCampiFormNonCongrui_" + this.customer.id).style.display = "none";
}, 2500);
}
})
// problema query
.catch(error => {
document.querySelector("#modalEsitoOperazioneErrore_" + this.customer.id).style.display = "block";
setTimeout(() => {
document.querySelector("#modalEsitoOperazioneErrore_" + this.customer.id).style.display = "none";
}, 2500);
})
}
},
created() {
this.fixDate();
if(this.action == 'insert') { console.log(this.dataCustomer); }
}
};
</script>
<style scoped>
.input-group, .mb-3 { height: 20px; padding: 0px; margin: 0px;}
/* .inputRadio { background-color: red; color: red; width: 25px; } */
/* .input-group-text span { width: 25px; } */
.dropbox {
outline: 2px dashed grey; /* the dash box */
outline-offset: -10px;
background: lightcyan;
color: dimgray;
padding: 10px 10px;
min-height: 200px; /* minimum height */
position: relative;
cursor: pointer;
}
.input-file {
opacity: 0; /* invisible but it's there! */
width: 100%;
height: 200px;
position: absolute;
cursor: pointer;
}
.dropbox:hover {
background: lightblue; /* when mouse over to the drop zone, change color */
}
.dropbox p {
font-size: 1.2em;
text-align: center;
padding: 50px 0;
}
</style>