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

<template>
  <modal name="add-modal" width="100%" :clickToClose="false">
    <div class="tw-p-[40px]">
      <div
        class="modal-header tw-flex tw-justify-center tw-items-center tw-mb-[40px] md:tw-mb-[40px] xl:tw-justify-between">
        <div class="tw-text-[20px] tw-font-bold tw-leading-[26px]">
          {{ $t("Add Company Info") }}
        </div>
        <button class="close tw-transition tw-btn-md" @click="$modal.hide('add-modal')"></button>
      </div>

      <div class="modal-content tw-grid tw-grid-cols-1 tw-gap-y-[10px] md:tw-grid-cols-2 md:tw-gap-x-[60px]">
        <div class="element">
          <elementInput :input="{
            id: 'CompanyName',
            label: 'Company Name',
            required: true,
            type: 'text',
          }" :default="formData.company_name" :validation="validation.company_name"
            @change="formData.company_name = $event"></elementInput>
        </div>
        <div class="element">
          <elementInput :input="{
            id: 'TaxNumber',
            label: 'Tax Number',
            required: true,
            type: 'tel',
          }" :default="formData.company_tax_no" :validation="validation.company_tax_no"
            @change="formData.company_tax_no = $event"></elementInput>
        </div>
        <div class="element md:tw-col-span-2">
          <elementAddress :input="{
            id: 'StreetAddress',
            label: 'Street address',
            required: true,
            type: 'street',
          }" :default1="formData.company_address1" :default2="formData.company_address2"
            :validation1="validation.company_address1" :validation2="validation.company_address2"
            @change1="formData.company_address1 = $event" @change2="formData.company_address2 = $event">
          </elementAddress>
        </div>
        <div class="element">
          <elementInput :input="{
            id: 'City',
            label: 'City',
            required: true,
            type: 'text',
          }" :default="formData.company_city" :validation="validation.company_city"
            @change="formData.company_city = $event"></elementInput>
        </div>
        <div class="element">
          <elementInput :input="{
            id: 'State',
            label: 'State/Province',
            required: false,
            type: 'text',
          }" :default="formData.company_state" :validation="validation.company_state"
            @change="formData.company_state = $event"></elementInput>
        </div>
        <div class="element">
          <elementSelect :select="{
            id: 'Country',
            label: 'Country',
            required: true,
          }" :selectList="selectList" :default="formData.company_country" :validation="validation.company_country"
            @change="formData.company_country = $event"></elementSelect>
        </div>
        <div class="element">
          <elementInput :input="{
            id: 'ZIP',
            label: 'ZIP/Postal code',
            required: true,
            type: 'zip',
          }" :default="formData.company_zipcode" :validation="validation.company_zipcode"
            @change="formData.company_zipcode = $event"></elementInput>
        </div>
      </div>
      <div class="modal-footer tw-flex tw-justify-end tw-items-center tw-mt-[60px]">
        <button class="tw-transition tw-btn-md tw-text-primary-1 tw-px-[30px] tw-py-[9.5px] tw-mr-[10px] tw-rounded-2xl"
          @click="reset">
          {{ $t("Clear") }}
        </button>
        <button
          class="tw-transition tw-btn-md tw-bg-primary-1 tw-px-[30px] tw-py-[9.5px] tw-rounded-2xl hover:tw-bg-primary-2"
          @click="save">
          {{ $t("Save") }}
        </button>
      </div>
    </div>
  </modal>
</template>
<script>
import elementInput from "@/components/newComponent/form/ElementInput";
import elementSelect from "@/components/newComponent/form/ElementSelect";
import elementAddress from "@/components/newComponent/form/ElementAddress";
import is from "is_js";
export default {
  name: "AddCompanyModal",
  components: {
    elementInput,
    elementSelect,
    elementAddress,
    is,
  },
  props: {
    selectList: {
      type: Array,
    },
  },
  data() {
    return {
      formData: {
        company_state: "",
        company_zipcode: "",
        company_tax_no: "",
        company_address1: "",
        company_city: "",
        company_country: 0,
        company_name: "",
        company_address2: "",
      },
      validation: {
        company_state: true,
        company_zipcode: true,
        company_tax_no: true,
        company_address1: true,
        company_city: true,
        company_country: true,
        company_name: true,
        company_address2: true,
      },
      errors: null,
    };
  },
  mounted() {},
  methods: {
    reset() {
      this.formData = {
        company_state: "",
        company_zipcode: "",
        company_tax_no: "",
        company_address1: "",
        company_city: "",
        company_country: 0,
        company_name: "",
        company_address2: "",
        company_country_name: "",
      };
    },
    save() {
      this.validators();
      if (this.validators()) {
        const patchData = JSON.parse(JSON.stringify(this.formData));
        this.$axios
          .post(
            `/member/company?jwt=${
              this.$auth.$storage.getUniversal("jwt").token
            }`,
            patchData
          )
          .then((result) => {
            if (result.status == 200) {
              this.$emit("update", true);
              this.reset();
              this.$modal.hide("add-modal");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    validators() {
      if (is.empty(this.formData.company_name)) {
        this.validation.company_name = false;
      } else {
        this.validation.company_name = true;
      }
      if (is.empty(this.formData.company_tax_no)) {
        this.validation.company_tax_no = false;
      } else {
        this.validation.company_tax_no = true;
      }
      if (is.empty(this.formData.company_address1)) {
        this.validation.company_address1 = false;
      } else {
        this.validation.company_address1 = true;
      }
      if (is.empty(this.formData.company_city)) {
        this.validation.company_city = false;
      } else {
        this.validation.company_city = true;
      }
      if (this.formData.company_country == 0) {
        this.validation.company_country = false;
      } else {
        this.validation.company_country = true;
      }
      if (is.empty(this.formData.company_zipcode)) {
        this.validation.company_zipcode = false;
      } else {
        this.validation.company_zipcode = 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: 25px;
  top: 25px;
  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: 1366px) {
    position: relative;
    right: initial;
    top: initial;
  }
}

:deep() {
  .v--modal-box {
    height: 100vh !important;

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

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

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