ShowEasyFrontEnd/FrontEnd/components/user/companyAddNewDialog.vue

<template>
  <modal name="addCompany" :clickToClose="false">
    <div class="tw-text-base-primary">
      <div class="modal-header tw-w-full tw-mb-[20px] md:tw-mb-[50px]">
        <div class="tw-text-[18px] tw-font-bold md:tw-text-[20px]">
          {{ $t("userProfile.addCompanyInfo") }}
        </div>
        <button class="close tw-transition tw-btn-md" @click="$modal.hide('addCompany')"></button>
      </div>
      <div
        class="modal-content tw-grid tw-grid-cols-1 tw-gap-y-[20px] tw-mb-[30px] md:tw-grid-cols-[260px_260px] md:tw-gap-x-[64px] md:tw-mb-[60px]">
        <div class="element">
          <elementInput :input="{
            id: 'CompanyName',
            label: 'userProfile.companyName',
            required: true,
            type: 'text',
          }" :default="userCompany.CompanyName" :validation="validation.CompanyName"
            @change="userCompany.CompanyName = $event"></elementInput>
        </div>
        <div class="element">
          <elementInput :input="{
            id: 'TaxNumber',
            label: 'userProfile.taxNumber',
            required: true,
            type: 'tel',
          }" :default="userCompany.TaxNumber" :validation="validation.TaxNumber"
            @change="userCompany.TaxNumber = $event"></elementInput>
        </div>
        <div class="element md:tw-col-span-2">
          <elementAddress :input="{
            id: 'StreetAddress',
            label: 'userProfile.companyAddress',
            required: true,
            type: 'street',
          }" :default1="userCompany.Street1" :default2="userCompany.Street2"
            :validation1="validation.Street1" :validation2="validation.Street2"
            @change1="userCompany.Street1 = $event" @change2="userCompany.Street2 = $event">
          </elementAddress>
        </div>
        <div class="element">
          <elementInput :input="{
            id: 'City',
            label: 'userProfile.companyCity',
            required: true,
            type: 'text',
          }" :default="userCompany.CityName" :validation="validation.CityName"
            @change="userCompany.CityName = $event"></elementInput>
        </div>
        <div class="element">
          <elementInput :input="{
            id: 'State',
            label: 'userProfile.stateAndProvince',
            required: false,
            type: 'text',
          }" :default="userCompany.StateName" :validation="validation.StateName"
            @change="userCompany.StateName = $event"></elementInput>
        </div>

        <div class="element">
          <elementSelect :select="{
            id: 'Country',
            label: 'userProfile.companyCountry',
            required: true,
          }" :selectList="countryOptions" :default="userCompany.CountryID"
            :validation="validation.CountryID" @change="userCompany.CountryID = $event"></elementSelect>
        </div>
        <div class="element">
          <elementInput :input="{
            id: 'ZIP',
            label: 'userProfile.zipAndPostalCode',
            required: true,
            type: 'zip',
          }" :default="userCompany.ZipCode" :validation="validation.ZipCode"
            @change="userCompany.ZipCode = $event"></elementInput>
        </div>
      </div>
      <div class="md:tw-flex md:tw-flex-row-reverse">
        <button
          class="tw-transition tw-btn-md tw-bg-primary-1 tw-text-white tw-w-full tw-py-[13px] tw-rounded-[16px] tw-mb-[10px] md:hover:tw-bg-primary-2 md:tw-w-fit md:tw-px-[24px] md:tw-mb-0"
          @click="save()">
          {{ $t("userProfile.save") }}
        </button>
        <button
          class="tw-transition tw-btn-md tw-bg-white tw-text-primary-1 tw-w-full tw-py-[13px] tw-rounded-[16px] md:tw-w-fit md:tw-px-[24px] md:tw-mr-[10px]"
          @click="reset()">
          {{ $t('userProfile.cancel')}}
        </button>
      </div>
    </div>
  </modal>
</template>
<script>
import elementInput from "@/components/newComponent/form/ElementInput.vue";
import elementAddress from "@/components/newComponent/form/ElementAddress.vue";
import elementSelect from "@/components/newComponent/form/ElementSelect.vue";
import is from "is_js";
export default {
  name: "addCompany",
  props: {
    countryOptions: {
      type: Array,
    },
    selectList: {
      type: Array,
    },
  },
  data() {
    return {
      userCompany: {
        CompanyName: "",
        TaxNumber: "",
        Street1: "",
        Street2: "",
        CityName: "",
        StateName: "",
        CountryID: "",
        ZipCode: "",
      },
      validation: {
        CompanyName: true,
        TaxNumber: true,
        Street1: true,
        Street2: true,
        CityName: true,
        StateName: true,
        CountryID: true,
        ZipCode: true,
      },
      // valid: false,
      errors: null,
    };
  },
  components: {
    elementInput,
    elementAddress,
    elementSelect,
    is,
  },
  methods: {
    reset() {
      this.userCompany = {
        CompanyName: "",
        TaxNumber: "",
        Street1: "",
        Street2: "",
        CityName: "",
        StateName: "",
        CountryID: "",
        ZipCode: "",
      };
      this.$modal.hide("addCompany");
    },
    patchUserData() {
      this.$axios
      .post(`/trending/api/Members/Company`, this.userCompany)
          .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("refetch-user");
                this.$modal.hide("addCompany");
              }
            }
          })
          .catch((error) => {
            console.log(error);
          });
    },

    validators() {
      if (is.empty(this.userCompany.CompanyName)) {
        this.validation.CompanyName = false;
      } else {
        this.validation.CompanyName = true;
      }
      if (is.empty(this.userCompany.TaxNumber)) {
        this.validation.TaxNumber = false;
      } else {
        this.validation.TaxNumber = true;
      }
      if (is.empty(this.userCompany.Street1)) {
        this.validation.Street1 = false;
      } else {
        this.validation.Street1 = true;
      }
      if (is.empty(this.userCompany.CityName)) {
        this.validation.CityName = false;
      } else {
        this.validation.CityName = true;
      }
      if (this.userCompany.CountryID == "") {
        this.validation.CountryID = false;
      } else {
        this.validation.CountryID = true;
      }
      if (is.empty(this.userCompany.ZipCode)) {
        this.validation.ZipCode = false;
      } else {
        this.validation.ZipCode = true;
      }
      this.errors = Object.entries(this.validation).filter(
        (e) => e[1] == false
      );
      if (this.errors.length > 0) {
        return false;
      } else {
        return true;
      }
    },
    save() {
      this.validators();
      if (this.validators()) {
        const patchData = this.userCompany;
        this.$axios
        .post(`/trending/api/Members/Company`, 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("refetch-user");
                this.reset();
                this.$modal.hide("addCompany");
              }
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
  },
};
</script>
<style scoped lang="scss">
.close {
  position: absolute;
  right: 30px;
  top: 30px;
  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 {
    padding: 30px;
    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>