ShowEasyFrontEnd/FrontEnd/components/service/Contact.vue

<template>
  <div class="tw-w-3/4">
    <div class="element tw-mt-[16px]">
      <div class="element tw-grid tw-grid-cols-1 md:tw-grid-cols-[112px_auto] xl:tw-grid-cols-[112px_auto] tw-gap-[10px]">
        <div class="tw-flex tw-items-center">
          <label class="tw-font-normal ">
            <span>{{ $t("First Name")}}</span><span class="required">*</span>
          </label>
        </div>
        <ElementInputNew
          :input="{
            id: 'FirstName',
            required: false,
            type: 'text',
          }"
          :validation="validation.first_name"
          @change="formData.first_name = $event"
        ></ElementInputNew>
      </div>
    </div>
    <div class="element tw-mt-[16px]">
      <div class="element tw-grid tw-grid-cols-1 md:tw-grid-cols-[112px_auto] xl:tw-grid-cols-[112px_auto] tw-gap-[10px]">
        <div class="tw-flex tw-items-center">
          <label class="tw-font-normal ">
            <span>{{ $t("E-mail for contact")}}</span><span class="required">*</span>
          </label>
        </div>
        <ElementInputNew
          :input="{
            id: 'Country',
            required: false,
            type: 'text',
          }"
          :validation="validation.last_name"
          @change="formData.last_name = $event"
        >
        </ElementInputNew>
      </div>
    </div>
    <div class="element tw-mt-[16px]">
      <div class="element tw-grid tw-grid-cols-1 md:tw-grid-cols-[112px_auto] xl:tw-grid-cols-[112px_auto] tw-gap-[10px]">
        <div class="tw-flex tw-items-center">
          <label class="tw-font-normal ">
            <span>{{ $t("Email")}}</span><span class="required">*</span>
          </label>
        </div>
        <ElementInputNew
          :input="{
            id: 'Email',
            required: false,
            type: 'email',
          }"
          :validation="validation.email"
          @change="formData.email = $event"
        >
        </ElementInputNew>
      </div>
    </div>
    <div class="element tw-mt-[16px]">
      <div class="element tw-grid tw-grid-cols-1 md:tw-grid-cols-[112px_auto] xl:tw-grid-cols-[112px_auto] tw-gap-[10px]">
        <div class="tw-flex tw-items-center">
          <label class="tw-font-normal ">
            <span>{{ $t("Phone")}}</span><span class="required">*</span>
          </label>
        </div>
        <ElementInputNew
          :input="{
            id: 'Phone',
            required: false,
            type: 'text',
          }"
          :validation="validation.phone_number"
          @change="formData.phone_number = $event"
        >
        </ElementInputNew>
      </div>
    </div>
  </div>
</template>
  <script>
import ElementInputNew from "@/components/newComponent/form/ElementInputNew";
import is from "is_js";
export default {
  name: "Contact",
  components: {
    ElementInputNew,
    is,
  },
  data() {
    return {
      formData: {
        first_name: "",
        last_name: "",
        email: "",
        country_code: "",
        phone_number: "",
      },
      validation: {
        first_name: true,
        last_name: true,
        email: true,
        phone_number: true,
      },
      errors: null,
    };
  },
  mounted() {},
  methods: {
    reset() {
      this.formData = {
        first_name: "",
        last_name: "",
        email: "",
        country_code: "",
        phone_number: "",
      };
    },
    save() {
      this.validators();
      if (this.validators()) {
        const patchData = JSON.parse(JSON.stringify(this.formData));
        // this.$axios
        //   .post(
        //     `/member/contacts?jwt=${
        //       this.$auth.$storage.getUniversal("jwt").token
        //     }`,
        //     patchData
        //   )
        //   .then((result) => {
        //     if (result.status == 200) {
        //       this.$emit("update", true);
        //       this.reset();
        //       this.$modal.hide("add-contact-modal");
        //     }
        //   })
        //   .catch((err) => {
        //     console.log(err);
        //   });
      }
    },
    validators() {
      // if (is.empty(this.formData.first_name)) {
      //   this.validation.first_name = false;
      // } else {
      //   this.validation.first_name = true;
      // }
      // if (is.empty(this.formData.last_name)) {
      //   this.validation.last_name = false;
      // } else {
      //   this.validation.last_name = true;
      // }
      // if (is.empty(this.formData.email) || is.not.email(this.formData.email)) {
      //   this.validation.email = false;
      // } else {
      //   this.validation.email = true;
      // }
      // if (
      //   is.empty(this.formData.phone_number) &&
      //   is.number(this.formData.phone_number)
      // ) {
      //   this.validation.phone_number = false;
      // } else {
      //   this.validation.phone_number = true;
      // }
      // this.errors = Object.entries(this.validation).filter(
      //   (e) => e[1] == false
      // );
      // if (this.errors.length > 0) {
      //   return false;
      // } else {
      //   return true;
      // }
    },
  },
};
</script>
  <style lang="scss" scoped>
</style>