Problemi form Vue/Bootstrap

di il
1 risposte

Problemi form Vue/Bootstrap

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>

1 Risposte

  • Re: Problemi form Vue/Bootstrap

    Ciao a tutti... oggi mi sono rimesso e ho risolto.
    Condivido le modifiche in modo da agevolare coloro che riscontrino le stesse problematiche.

    Soluzioni:
    1 - ho erroneamente racchiuso il form in un label... quindi ho stostituito la parola "label" con "div".
    2 - permetto l'inserimento della password nel solo form inserimento customer, visto che la modifica la possono fare direttamente da portale.
    quindi ho modificato il relativo codice in questo modo:

    
    <!-- password solo per inserimento -->
                    <tr v-if="action == 'insert'">
                        <th>*Password</th>
                        <td>
                            <div class="input-group mb-3">
                                <input type="text" :id="[action + 'password' + dataCustomer.id]" class="form-control" value="" name="password" required>
                                <div class="input-group-append">
                                  <div class="input-group-text">
                                    <span class="fas fa-eye" :id="['eye_' + action + 'password' + dataCustomer.id]" @click="toggleShowPassword(action + 'password' + dataCustomer.id)"></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="text" :id="[action + 'repeat_password' + dataCustomer.id]" class="form-control" name="repeat_password" value="" required>
                                <div class="input-group-append">
                                  <div class="input-group-text">
                                    <span class="fas fa-eye" :id="['eye_' + action + 'repeat_password' + dataCustomer.id]" @click="toggleShowPassword(action + 'repeat_password' + dataCustomer.id)"></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>
    

    e la relativa funzione per la gestione del font-awesome e type
    
    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');
                  viewType.type = "text";
                } else {
                  specificButton.classList.add('fa-eye-slash');
                  viewType.type = "password";
                }
            },
    

    ciao
Devi accedere o registrarti per scrivere nel forum
1 risposte