ShowEasyFrontEnd/FrontEnd/components/newComponent/modal/UserAddContactModal.vue

<template>
  <modal name="add-contact-modal" width="100%" :clickToClose="false">
    <div class="tw-p-[30px] md:tw-p-0 tw-h-full tw-overflow-auto">
      <div
        class="modal-header tw-flex tw-justify-start tw-items-center tw-mb-[30px] md:tw-mb-[50px] xl:tw-justify-between">
        <div
          class="tw-flex tw-justify-between tw-w-full tw-text-[18px] tw-font-bold tw-leading-[26px] md:tw-text-[20px]">
          {{ $t("userProfile.addContactInfo") }}
        </div>
        <button class="close tw-transition tw-btn-md" @click="$modal.hide('add-contact-modal')"></button>
      </div>
      <div
        class="modal-content tw-grid tw-grid-cols-1 tw-gap-y-[20px] tw-mb-[30px] md:tw-grid-cols-2 md:tw-gap-x-[60px] md:tw-mb-[60px]">
        <div class="element">
          <elementInput :input="{
            id: 'FirstName',
            label: 'userProfile.firstName',
            required: true,
            type: 'text',
          }" :default="formData.FirstName" :validation="validation.FirstName" @change="formData.FirstName = $event">
          </elementInput>
        </div>
        <div class="element">
          <elementInput :input="{
            id: 'LastName',
            label: 'userProfile.lastName',
            required: true,
            type: 'text',
          }" :default="formData.LastName" :validation="validation.LastName" @change="formData.LastName = $event">
          </elementInput>
        </div>
        <div class="element">
          <elementInput :input="{
            id: 'Email',
            label: 'Email',
            required: true,
            type: 'email',
          }" :default="formData.Email" :validation="validation.Email" @change="formData.Email = $event">
          </elementInput>
        </div>
        <div class="element">
          <label class="tw-block tw-mb-[10px]"><span>{{ $t("Phone") }}<span class="required">*</span></span></label>
          <div class="tw-grid tw-grid-cols-[120px_auto]">

            <elementCountryCodeSelect :userCodeSelect="this.formData.PhoneCountryCode" :validation="validation.codeSelect" @returnCode = "getReturnCode"></elementCountryCodeSelect>      
                  
            <vue-phone-number-input
                  color="#e5e5e5"
                  :border-radius="5"
                  error-color="#ef5a5a"
                  valid-color="#e5e5e5"
                  :error="error"
                  required
                  no-flags
                  no-example
                  :no-country-selector="true"
                  :validation="validation.PhoneNo"
                  v-model="formData.PhoneNo"
                ></vue-phone-number-input>
          </div>   
        </div>
      </div>
      <div class="modal-footer md:tw-flex md:tw-flex-row-reverse md:tw-justify-start md:tw-items-center">
        <button
          class="tw-text-[18px] tw-transition tw-btn-md tw-bg-primary-1 tw-w-full tw-py-[12px] tw-rounded-[16px] tw-mb-[10px] md:tw-w-fit md:tw-px-[24px] md:tw-mb-0 md:hover:tw-bg-primary-2"
          @click="save">
          {{ $t("userProfile.add") }}
        </button>
        <button
          class="tw-text-[18px] tw-transition tw-btn-md tw-text-primary-1 tw-w-full tw-py-[12px] tw-rounded-[16px] md:tw-w-fit md:tw-px-[24px] md:tw-mr-[10px]"
          @click="reset">
          {{ $t("Clear") }}
        </button>
      </div>
    </div>
  </modal>
</template>
<script>
import elementInput from "@/components/newComponent/form/ElementInput";
import elementCountryCodeSelect from "@/components/newComponent/form/ElementCountryCodeSelect.vue";

import Swal from "sweetalert2";
import is from "is_js";
export default {
  name: "AddContactModal",
  components: {
    elementInput,
    elementCountryCodeSelect,
  },
  data() {
    return {
      formData: {
        FirstName: "",
        LastName: "",
        Email: "",
        PhoneCountryCode: "999",
        PhoneNo: "",
      },
      validation: {
        FirstName: true,
        LastName: true,
        Email: true,
        PhoneNo: true,
        codeSelect: true,

      },
      isValid: true,
      countryCode: "",
      phoneValid: false,
      errors: null,
      error: false,
    };
  },
  mounted() { },
  methods: {
    getReturnCode(code){
      this.formData.PhoneCountryCode = code;
    },
    reset() {
      this.formData = {
        FirstName: "",
        LastName: "",
        Email: "",
        PhoneNo: "",
        PhoneCountryCode: "999",
      };
    },
    getPhoneData(phoneData) {
      this.formData.PhoneCountryCode = phoneData.countryCode;
    },
    showCode(object) {
      this.formData.PhoneCountryCode = object.dialCode;
    },
    save() {
      this.validators();
      if (this.validators()) {
        const patchData = JSON.parse(JSON.stringify(this.formData));
        this.$axios
        .post(
          `/trending/api/Members/Contact`, patchData
        )
        .then((response) => {
          //console.log(JSON.stringify(response));
          if(response && response.data && response.data.DATA && response.data.DATA.rel){
            let data = response.data.DATA.rel
            if(data){
              this.$emit("update", true);
              this.reset();
              this.$modal.hide("add-contact-modal");
            }
          }
        })
        .catch((error) => {
          console.log(error);
        });
      }
    },
    validators() {
      if (is.empty(this.formData.FirstName)) {
        this.validation.FirstName = false;
      } else {
        this.validation.FirstName = true;
      }
      if (is.empty(this.formData.LastName)) {
        this.validation.LastName = false;
      } else {
        this.validation.LastName = true;
      }
      if (is.empty(this.formData.Email) || is.not.email(this.formData.Email)) {
        this.validation.Email = false;
      } else {
        this.validation.Email = true;
      }
      if (this.formData.PhoneNo == null
      ) {
        this.validation.PhoneNo = false;
        this.error = true;
      } else {
        this.validation.PhoneNo = true;
        this.error = false;
      }
      if(this.formData.PhoneCountryCode == "999"){
        this.validation.codeSelect = false;

      }else{
        this.validation.codeSelect = 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>
.close {
  // position: absolute;
  right: 30px;
  top: 32px;
  background-image: url("~/assets/svg/close.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 14px;
  height: 14px;

  @media screen and (min-width: 768px) {
    right: 40px;
    top: 40px;
  }
}

.v--modal-overlay::v-deep {
  .v--modal {
    width: 100% !important;
    height: 100vh !important;

    @media screen and (min-width: 768px) {
      padding: 40px;
      width: max-content;
      height: max-content !important;
      border-radius: 30px;
    }
  }

  .v--modal-box {
    height: 100vh !important;
    overflow: auto;

    @media screen and (min-width: 768px) {
      padding: 40px;
      width: max-content;
      height: max-content !important;
    }
  }
}
</style>