ShowEasyFrontEnd/FrontEnd/components/service/Company.vue

<template>
  <div>
    <table class="table-auto">
      <template  v-if="windewWidth>414">
        <tr class="elemen">
          <td class="tw-pr-[20px]" style="white-space: nowrap;">
            <div class="tw-flex tw-items-center">
              <label class="tw-font-normal ">
                <span>{{ $t("Company Name")}}</span><span class="required">*</span>
              </label>
            </div>
          </td>
          <td width="99%">
            <div class="element tw-my-[10px] tw-w-full">
             <ElementInputNew
                :input="{
                  id: 'CompanyName',
                  required: false,
                  type: 'text',
                  placeholder: ''
                }"
              :validation="validation.company_name"
              @change="formData.company_name = $event"
            ></ElementInputNew></div>
          </td>
        </tr>
        <tr class="element">
          <td class="tw-pr-[20px]" style="white-space: nowrap;">
                  <div class="tw-flex tw-items-center">
                    <label class="tw-font-normal ">
                      <span>{{ $t("Unified Number")}}</span><span class="required">*</span>
                    </label>
                  </div>
                </td>
                <td width="99%">
                  <div class="element tw-my-[10px]">
                  <ElementInputNew
                    :input="{
                      id: 'UnifiedBumber',
                      required: false,
                      type: 'text',
                      placeholder: ''
                    }"
                    :validation="validation.unified_number"
                    @change="formData.unified_number = $event"
                  >
                  </ElementInputNew></div>
                </td>
              </tr>
              <tr class="element">
                <td class="tw-pr-[20px]" style="white-space: nowrap;">
                  <div class="tw-flex tw-items-center">
                    <label class="tw-font-normal ">
                      <span>{{ $t("Company Address")}}</span><span class="required">*</span>
                    </label>
                  </div>
                </td>
                <td width="99%">
                  <div class="element tw-my-[10px]">
                  <ElementInputNew
                    :input="{
                      id: 'Company address',
                      required: false,
                      type: 'text',
                      placeholder: ''
                    }"
                    :maxlength="500"
                    :validation="validation.company_address"
                    @change="formData.company_address = $event"
                  >
                  </ElementInputNew></div>
                </td>
              </tr>
              <tr class="element">
                <td class="tw-pr-[20px]" style="white-space: nowrap;">
                  <div class="tw-flex tw-items-center">
                    <label class="tw-font-normal ">
                      <span>{{ $t("Company City")}}</span><span class="required">*</span>
                    </label>
                  </div>
                </td>
                <td width="99%">
                  <div class="element tw-my-[10px]">
                  <ElementInputNew
                    :input="{
                      id: 'companyCity',
                      required: false,
                      type: 'text',
                      placeholder: ''
                    }"
                    :validation="validation.city_"
                    @change="formData.city_ = $event"
                  >
                  </ElementInputNew></div>
                </td>
              </tr>
              <tr class="element">
                <td class="tw-pr-[20px]" style="white-space: nowrap;">
                  <div class="tw-flex tw-items-center">
                    <label class="tw-font-normal ">
                      <span>{{ $t("State or Province")}}</span><span class="required">*</span>
                    </label>
                  </div>
                </td>
                <td width="99%">
                  <div class="element tw-my-[10px]">
                  <ElementInputNew
                    :input="{
                      id: 'State or Province',
                      required: false,
                      type: 'text',
                      placeholder: ''
                    }"
                    :validation="validation.state_or_province"
                    @change="formData.state_or_province = $event"
                  >
                  </ElementInputNew></div>
                </td>
              </tr>
              <tr class="element">
                <td class="tw-pr-[20px]" style="white-space: nowrap;">
                  <div class="tw-flex tw-items-center">
                    <label class="tw-font-normal ">
                      <span>{{ $t("Country")}}</span>
                    </label>
                  </div>
                </td>
                <td width="99%">
                  <div class="element tw-my-[10px]">
                  <elementSelectNew
                    :select="{
                      id: 'Country',
                      label: '',
                      required: true,
                    }"
                    :isRow="true"
                    :itemsCenter="true"
                    :labelWidth="0"
                    :selectWidth="200"
                    :selectList="countryOptions"
                    :default="formData.country"
                    :validation="validation.country"
                    @change="formData.country = $event"
                  >
                  </elementSelectNew></div>
                </td>
              </tr>
              <tr class="element">
                <td class="tw-pr-[20px]" style="white-space: nowrap;">
                  <div class="tw-flex tw-items-center">
                    <label class="tw-font-normal ">
                      <span>{{ $t("Postal Code")}}</span><span class="required">*</span>
                    </label>
                  </div>
                </td>
                <td width="99%">
                  <div class="element tw-my-[10px]">
                  <ElementInputNew
                    :input="{
                      id: 'Postal Code',
                      required: false,
                      type: 'text',
                      placeholder: ''
                    }"
                    :maxlength="10"
                    :validation="validation.postal_code"
                    @change="formData.postal_code = $event"
                  >
                  </ElementInputNew></div>
                </td>
              </tr>
      </template>  
      <template v-else>
        <tr class="element">
          <div class="tw-flex tw-items-center">
            <label class="tw-font-normal ">
              <span>{{ $t("Company Name")}}</span>
            </label>
          </div>
        </tr>
        <tr>
          <div class="element tw-my-[10px] tw-w-full">
          <ElementInputNew
              :input="{
                id: 'CompanyName',
                  required: false,
                  type: 'text',
                  placeholder: ''
                }"
              :validation="validation.company_name"
              @change="formData.company_name = $event"
              ></ElementInputNew></div>
        </tr>
        <tr class="element">
          <div class="tw-flex tw-items-center">
                    <label class="tw-font-normal ">
                      <span>{{ $t("Unified Number")}}</span>
                    </label>
                  </div>
        </tr>
        <tr>
          <div class="element tw-my-[10px]">
                  <ElementInputNew
                    :input="{
                      id: 'UnifiedBumber',
                      required: false,
                      type: 'text',
                      placeholder: ''
                    }"
                    :validation="validation.unified_number"
                    @change="formData.unified_number = $event"
                  >
                  </ElementInputNew></div>
        </tr>
        <tr class="element">
          <div class="tw-flex tw-items-center">
                    <label class="tw-font-normal ">
                      <span>{{ $t("Company Address")}}</span>
                    </label>
                  </div>
        </tr>
        <tr>
          <div class="element tw-my-[10px]">
                  <ElementInputNew
                    :input="{
                      id: 'Company address',
                      required: false,
                      type: 'text',
                      placeholder: ''
                    }"
                    :maxlength="500"
                    :validation="validation.company_address"
                    @change="formData.company_address = $event"
                  >
                  </ElementInputNew></div>
        </tr>
        <tr class="element">
          <div class="tw-flex tw-items-center">
                    <label class="tw-font-normal ">
                      <span>{{ $t("Company City")}}</span>
                    </label>
                  </div>
        </tr>
        <tr>
          <div class="element tw-my-[10px]">
                  <ElementInputNew
                    :input="{
                      id: 'companyCity',
                      required: false,
                      type: 'text',
                      placeholder: ''
                    }"
                    :validation="validation.city_"
                    @change="formData.city_ = $event"
                  >
                  </ElementInputNew></div>
        </tr>
        <tr class="element">
          <div class="tw-flex tw-items-center">
                    <label class="tw-font-normal ">
                      <span>{{ $t("State or Province")}}</span>
                    </label>
                  </div>
        </tr>
        <tr>
          <div class="element tw-my-[10px]">
                  <ElementInputNew
                    :input="{
                      id: 'State or Province',
                      required: false,
                      type: 'text',
                      placeholder: ''
                    }"
                    :validation="validation.state_or_province"
                    @change="formData.state_or_province = $event"
                  >
                  </ElementInputNew></div>
        </tr>
        <tr class="element">
          <div class="tw-flex tw-items-center">
                    <label class="tw-font-normal ">
                      <span>{{ $t("Country")}}</span>
                    </label>
                  </div>
        </tr>
        <tr>
          <div class="element tw-my-[10px]">
                  <ElementInputNew
                    :input="{
                      id: 'Country',
                      required: false,
                      type: 'text',
                      placeholder: ''
                    }"
                    :validation="validation.country"
                    @change="formData.country = $event"
                  >
                  </ElementInputNew></div>
        </tr>
        <tr class="element">
          <div class="tw-flex tw-items-center">
                    <label class="tw-font-normal ">
                      <span>{{ $t("Postal Code")}}</span>
                    </label>
                  </div>
        </tr>
        <tr>
          <div class="element tw-my-[10px]">
                  <ElementInputNew
                    :input="{
                      id: 'Postal Code',
                      required: false,
                      type: 'text',
                      placeholder: ''
                    }"
                    :maxlength="10"
                    :validation="validation.postal_code"
                    @change="formData.postal_code = $event"
                  >
                  </ElementInputNew></div>
        </tr>
      </template>   
    </table>
  </div>
</template>
  <script>
import ElementInputNew from "@/components/newComponent/form/ElementInputNew";
import elementSelectNew from "@/components/newComponent/form/ElementSelectNew";

import is from "is_js";
export default {
  name: "Contact",
  components: {
    ElementInputNew,
    elementSelectNew,
    is,
  },
  props: {
    countryOptions: {
      type: Array,
    },
  },
  data() {
    return {
      formData: {
        company_name: "",
        unified_number: "",
        company_address: "",
        city_: "",
        state_or_province: "",
        country: "0",
        postal_code: "",
      },
      validation: {
        company_name: true,
        unified_number: true,
        company_address: true,
        city_: true,
        state_or_province: true,
        country: true,
        postal_code: true,
      },
      errors: null,
      windewWidth: null,
    };
  },
  mounted() {},
  created(){
    if (process.browser) {
      window.addEventListener("resize", this.handleResize);
    }
    this.handleResize();
  },
  destroyed() {
    if (process.browser) {
      window.removeEventListener("resize", this.handleResize);
    }
  },
  methods: {
    handleResize() {
      if (process.browser) {
        this.windewWidth = window.innerWidth;
      }
    },
    reset() {
      this.formData = {
        company_name: "",
        unified_number: "",
        company_address: "",
        city_: "",
        state_or_province: "",
        country: "0",
        postal_code: "",
      };
    },
    getFormData() {
      let formData = JSON.parse(JSON.stringify(this.formData));
      return formData;
      // 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);
      //   //   });
      // }else{
      //   return null;
      // }
    },
    validators() {
      if (is.empty(this.formData.company_name)) {
        this.validation.company_name = false;
      } else {
        this.validation.company_name = true;
      }
      if (is.empty(this.formData.unified_number)) {
        this.validation.unified_number = false;
      } else {
        this.validation.unified_number = true;
      }
      if (is.empty(this.formData.company_address)) {
        this.validation.company_address = false;
      } else {
        this.validation.company_address = true;
      }
      
      if (is.empty(this.formData.city_)) {
        this.validation.city_ = false;
      } else {
        this.validation.city_ = true;
      }

      if (is.empty(this.formData.state_or_province)) {
        this.validation.state_or_province = false;
      } else {
        this.validation.state_or_province = true;
      }

      if (is.empty(this.formData.postal_code)) {
        this.validation.postal_code = false;
      } else {
        this.validation.postal_code = 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>