birzha-legalizasia-frontend/src/views/profile-forms/Contacts.vue

<template>
  <div>
    <div class="intro-y flex items-center mt-8">
      <h2 class="text-lg font-medium mr-auto">{{$t('CONTACTS')}}</h2>
    </div>
    <div class="grid grid-cols-12 gap-6 mt-5">
      <div class="intro-y col-span-12 lg:col-span-6">
        <!-- BEGIN: Form Validation -->
        <PreviewComponent class="intro-y box">
          <div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
            <h2 class="font-medium text-base mr-auto">{{$t('CONTACTS_FORM')}}</h2>
          </div>
          <div class="p-5">
            <!-- BEGIN: Validation Form -->
            <form class="validate-form" @submit.prevent="onRegister">
              <!-- Begin Address -->
              <div class="input-form">
                <label for="validation-form-6" class="form-label w-full flex flex-col sm:flex-row">
                  {{$t('ADDRESS')}}
                  <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"><span class="text-red-600">*</span> {{
                  $t("REQUIRED") }}
                  </span>
                </label>
                <textarea id="validation-form-6" v-model.trim="validate.address.$model" class="form-control"
                  :class="{ 'border-danger': validate.address.$error }" name="address"
                  :placeholder="$t('ADDRESS')"></textarea>
                <template v-if="validate.address.$error">
                  <div v-for="(error, index) in validate.address.$errors" :key="index" class="text-danger mt-2">
                    {{ error.$message }}
                  </div>
                </template>
              </div>
              <!-- End Address -->

              <!-- Begin Email -->
              <div class="input-form mt-3">
                <label for="validation-form-2" class="form-label w-full flex flex-col sm:flex-row">
                  {{$t('EMAIL')}}
                  <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"><span class="text-red-600">*</span> {{
                  $t("REQUIRED") }}
                  </span>
                </label>
                <input id="validation-form-2" v-model.trim="validate.email.$model" type="email" name="email"
                  class="form-control" :class="{ 'border-danger': validate.email.$error }" :placeholder="$t('EMAIL')" />
                <template v-if="validate.email.$error">
                  <div v-for="(error, index) in validate.email.$errors" :key="index" class="text-danger mt-2">
                    {{ error.$message }}
                  </div>
                </template>
              </div>
              <!-- End Email -->

              <!-- Begin Phone -->
              <div class="input-form mt-3">
                <label for="validation-form-4" class="form-label w-full flex flex-col sm:flex-row">
                  {{$t('PHONE')}}
                  <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"><span class="text-red-600">*</span> {{
                  $t("REQUIRED") }}
                  </span>
                </label>
                <input id="validation-form-4" v-model.trim="validate.phone.$model" type="number" name="phone"
                  class="form-control" :class="{ 'border-danger': validate.phone.$error }" placeholder="9936xxxxxxx" />
                <template v-if="validate.phone.$error">
                  <div v-for="(error, index) in validate.phone.$errors" :key="index" class="text-danger mt-2">
                    {{ error.$message }}
                  </div>
                </template>
              </div>
              <!-- End Phone -->

              <!-- Begin Fax -->
              <div class="input-form mt-3">
                <label for="validation-form-4" class="form-label w-full flex flex-col sm:flex-row">
                  {{$t('FAX')}}
                  <span class="sm:ml-auto mt-1 sm:mt-0 text-xs text-slate-500"><span class="text-red-600">*</span> {{
                  $t("REQUIRED") }}
                  </span>
                </label>
                <input id="validation-form-4" v-model.trim="validate.fax.$model" type="number" name="fax"
                  class="form-control" :class="{ 'border-danger': validate.fax.$error }" placeholder="99312xxxxxx" />
                <template v-if="validate.fax.$error">
                  <div v-for="(error, index) in validate.fax.$errors" :key="index" class="text-danger mt-2">
                    {{ error.$message }}
                  </div>
                </template>
              </div>
              <!-- End Fax -->

              <button type="submit" class="btn btn-primary mt-5">
                {{$t('REGISTER')}}
                <LoadingIcon icon="oval" color="white" class="w-4 h-4 ml-2" v-if="isLoading" />
              </button>
            </form>
            <!-- END: Validation Form -->
          </div>
        </PreviewComponent>
        <!-- END: Form Validation -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from "vue";

import {
  required,
  minLength,
  helpers,
  email,
  integer,
} from "@vuelidate/validators";
import { useVuelidate } from "@vuelidate/core";
import { fetchWrapper } from "@/api";
import { useRoute } from "vue-router";
import router from "@/router";
import _ from "lodash";

const baseUrl = `${import.meta.env.VITE_API_URL}/api`;

const route = useRoute();

const { t } = useI18n({});

const isLoading = ref(false);

const formData = reactive({
  address: "",
  email: "",
  phone: "",
  fax: "",
});

const rules = {
  email: {
    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
    email,
  },

  phone: {
    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
    integer,
  },

  fax: {
    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
    integer,
  },

  address: {
    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
    minLength: minLength(10),
  },
};

const validate = useVuelidate(rules, toRefs(formData));

const onRegister = async () => {
  validate.value.$touch();

  // if form is invalid
  // if (validate.value.$invalid) return;

  try {
    isLoading.value = true;

    // await new Promise((resolve) => setTimeout(resolve, 4000));
    const response = await fetchWrapper.put(
      `${baseUrl}/account/contacts`,
      formData
    );

    isLoading.value = false;
    //console.log("response onRegister: ", response);

    // refresh LS "contacts"
    localStorage.removeItem("contacts");
    localStorage.setItem("contacts", JSON.stringify(formData));

    router.push({ name: "profile", params: { loadFromLS: true } });
  } catch (error) {
    isLoading.value = false;
  }
};

onMounted(() => {
  const params = _.isEmpty(route.params)
    ? JSON.parse(localStorage.getItem("contacts"))
    : route.params;

  //console.log("Params: ", params);

  if (params) {
    localStorage.setItem("contacts", JSON.stringify(params));
    Object.assign(formData, params);
  }
});
</script>