Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/vreg/components/Forms/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <div>
    <v-reg-vue-simple-suggest
      ref="address"
      mode="input"
      placeholder-text="Address"
      display-attribute="streetLine"
      v-model="form[addressField].street"
      :filterByQuery="true"
      :field="`${addressField}.street`"
      @suggestion-click="suggestionClicked"
      rules="required"
      :list="getSuggestionList">

      <div slot="suggestion-item" slot-scope="{ suggestion, query }">
        <div v-html="buildAddress(suggestion)"></div>
      </div>


    </v-reg-vue-simple-suggest>


    <input-field :form="form" :field="`${addressField}.address_2`">
      <p class="placeholder-text">Apartment, suite, etc. (optional)</p>
      <input type="text" :name="`${addressField}.address_2`" class="form-control"
             v-model="form[addressField].address_2">
    </input-field>


    <input-field :form="form" :field="`${addressField}.city`" rules="required">
      <p class="placeholder-text required">City</p>
      <input type="text" :name="`${addressField}.city`" class="form-control" v-model="form[addressField].city">
    </input-field>

    <div class="v-form-row">
      <div class="v-form-col">
        <vreg-select required
                     :form="form"
                     @value-selected="v=>form[addressField].state_code=v"
                     :fieldValue="form[addressField].state_code"
                     v-if="states"
                     :options="states"
                     header-text="State"
                     :field="`${addressField}.state_code`"/>
      </div>
      <div class="v-form-col">
        <input-field :form="form" :field="`${addressField}.zip`" rules="required|length:5">
          <p class="placeholder-text required">Zip code</p>
          <input type="text" :name="`${addressField}.zip`" class="form-control" v-model="form[addressField].zip">
        </input-field>
      </div>
    </div>

  </div>

</template>

<script>
import inputField from "@/components/Forms/InputField";
import VRegVueSimpleSuggest from "@/components/Forms/VregSuggesstions/v-reg-vue-simple-suggest";
import VregSelect from "@/components/Forms/VregSelect";
import states from "@/data/states.json"

export default {
  name: "Address",
  components: {VregSelect, VRegVueSimpleSuggest, inputField},
  props: {
    addressField: {
      required: true
    },
    form: {
      required: true
    }
  },
  data() {
    return {
      selectedSearchItem: null,
      states
    }
  },
  mounted() {
    this.watchZipcodeField();
  },
  methods: {
    watchZipcodeField() {
      this.$watch(`form.${this.addressField}.zip`, (zipCode) => {
        if (this.form[this.addressField].zip.length > 5) {
          this.form[this.addressField].zip = this.form[this.addressField].zip.substr(0, 5);
        }
      });
    },
    async suggestionClicked(suggestion) {

      if (suggestion.entries > 1) {
        return this.handleSuggestionEntries(suggestion);
      }

      this.selectedSearchItem = suggestion;
      this.form[this.addressField].street = suggestion.text;
      this.setAddressFields(this.form[this.addressField]);
    },
    async handleSuggestionEntries(suggestion) {
      let query = suggestion.streetLine,
        lookup = new this.$addressLookup(query);
      lookup.selected = this.buildAddress(suggestion, true);

      return await this.$addressLookupClient.send(lookup)
        .then(suggestions => {
          let vregSuggestComponent = this.$refs.address;

          this.$set(vregSuggestComponent, 'suggestions', suggestions.result);
          vregSuggestComponent.showList();
        }).catch(console.log);
    },
    setAddressFields(addressFieldObject) {
      addressFieldObject.street = this.selectedSearchItem.streetLine;
      addressFieldObject.address_2 = this.selectedSearchItem.secondary;
      addressFieldObject.city = this.selectedSearchItem.city;
      addressFieldObject.state_code = this.selectedSearchItem.state;
      addressFieldObject.zip = this.selectedSearchItem.zipcode;
    },
    async getSuggestionList(query) {

      if (query.trim().length <= 3) {
        return [];
      }

      let lookup = new this.$addressLookup(query);

      return await this.$addressLookupClient.send(lookup)
        .then(suggestions => {
          return suggestions.result;
        }).catch(console.log);
    },
    buildAddress(suggestion, onlyEntries) {
      let whiteSpace = "",
        secondary = suggestion.secondary;

      if (suggestion.secondary) {

        if (suggestion.entries > 1) {
          if (onlyEntries) {
            secondary += ` (${suggestion.entries})`;
          } else {
            secondary += ` ( ${suggestion.entries}  more entries)`;
          }
        }

        whiteSpace = " ";
      }

      return suggestion.streetLine + whiteSpace + secondary + " " + suggestion.city + ", " + suggestion.state + " " + suggestion.zipcode;
    }
  }
}
</script>

<style scoped>

</style>