ShowEasyFrontEnd/FrontEnd/components/service/Contact.vue

<template>
  <div>
    <div class="element tw-mt-[16px]">
      <ElementInputNew
        :input="{
          id: 'FirstName',
          label: 'First Name',
          required: false,
          type: 'text',
        }"
        :validation="validation.first_name"
        @change="formData.first_name = $event"
      ></ElementInputNew>
    </div>
    <div class="element tw-mt-[16px]">
      <ElementInputNew
        :input="{
          id: 'LastName',
          label: 'Last Name',
          required: false,
          type: 'text',
        }"
        :validation="validation.last_name"
        @change="formData.last_name = $event"
      >
      </ElementInputNew>
    </div>
    <div class="element tw-mt-[16px]">
      <ElementInputNew
        :input="{
          id: 'Email',
          label: 'Email',
          required: false,
          type: 'email',
        }"
        :validation="validation.email"
        @change="formData.email = $event"
      >
      </ElementInputNew>
    </div>
    <div class="element tw-mt-[16px]">
      <ElementInputNew
        :input="{
          id: 'Phone',
          label: 'Phone',
          required: false,
          type: 'text',
        }"
        :validation="validation.phone_number"
        @change="formData.phone_number = $event"
      >
      </ElementInputNew>
    </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>