ShowEasyFrontEnd/FrontEnd/components/user/companyEditInfoDialog.vue

<template>
  <modal name="edit-company-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-[20px] 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.editCompanyInfo") }}
        </div>
        <button class="close tw-transition tw-btn-md" @click="$modal.hide('edit-company-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-[64px] md:tw-mb-[60px]">
        <div class="element">
          <elementInput :input="{
            id: 'CompanyName',
            label: 'userProfile.companyName',
            required: true,
            type: 'text',
          }" :default="userCompany.company_name" :validation="validation.company_name"
            @change="userCompany.company_name = $event"></elementInput>
        </div>
        <div class="element">
          <elementInput :input="{
            id: 'TaxNumber',
            label: 'userProfile.taxNumber',
            required: true,
            type: 'tel',
          }" :default="userCompany.company_tax_no" :validation="validation.company_tax_no"
            @change="userCompany.company_tax_no = $event"></elementInput>
        </div>
        <div class="element md:tw-col-span-2">
          <elementAddress :input="{
            id: 'StreetAddress',
            label: 'userProfile.companyAddress',
            required: true,
            type: 'street',
          }" :default1="userCompany.company_address1" :default2="userCompany.company_address2"
            :validation1="validation.company_address1" :validation2="validation.company_address2"
            @change1="userCompany.company_address1 = $event" @change2="userCompany.company_address2 = $event">
          </elementAddress>
        </div>
        <div class="element">
          <elementInput :input="{
            id: 'City',
            label: 'userProfile.companyCity',
            required: true,
            type: 'text',
          }" :default="userCompany.company_city" :validation="validation.company_city"
            @change="userCompany.company_city = $event"></elementInput>
        </div>
        <div class="element">
          <elementInput :input="{
            id: 'State',
            label: 'userProfile.stateAndProvince',
            required: false,
            type: 'text',
          }" :default="userCompany.company_state" :validation="validation.company_state"
            @change="userCompany.company_state = $event"></elementInput>
        </div>
        <div class="element">
          <elementSelect :select="{
            id: 'Country',
            label: 'userProfile.companyCountry',
            required: true,
          }" :selectList="countryOptions" :default="userCompany.company_country"
            :validation="validation.company_country" @change="userCompany.company_country = $event"></elementSelect>
        </div>
        <div class="element">
          <elementInput :input="{
            id: 'ZIP',
            label: 'userProfile.zipAndPostalCode',
            required: true,
            type: 'zip',
          }" :default="userCompany.company_zipcode" :validation="validation.company_zipcode"
            @change="userCompany.company_zipcode = $event"></elementInput>
        </div>
      </div>
      <div class="md:tw-flex md:tw-flex-row-reverse">
        <button
          class="tw-text-[18px] tw-bg-primary-1 tw-text-white 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.save") }}
        </button>
        <button
          class="tw-text-[18px] tw-bg-white 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("userProfile.clear") }}
        </button>
      </div>
    </div>
  </modal>
  <!-- <v-dialog @click:outside="closeDialog" :value="companyEditInfoDialogActive"
    :width="$vuetify.breakpoint.mdAndUp ? '49%' : '90%'" style="z-index:500">
    <v-card class="border-radius-30 pa-10">
      <v-spacer class="d-flex mb-7 align-center">
        <span class="font-weight-bold text-size-18">{{ $t("userProfile.companyInfo") }}</span>
        <v-spacer></v-spacer>
        <v-btn icon @click="closeDialog">
          <v-icon>
            mdi-close
          </v-icon>
        </v-btn>
      </v-spacer>
      <v-form v-model="valid">
        <v-spacer :class="$vuetify.breakpoint.smAndUp ? 'd-flex' : ''">
          <v-spacer :class="$vuetify.breakpoint.smAndUp ? 'me-8' : ''" class="input-wrap">
            <span>{{ $t("userProfile.companyName")+'*' }}</span>
            <v-text-field v-model="userCompanyCopy.company_name" dense outlined :rules="[rules.require]"></v-text-field>
          </v-spacer>
          <v-spacer :class="$vuetify.breakpoint.smAndUp ? 'ms-8' : ''" class="input-wrap">
            <span>{{ $t("userProfile.taxNumber")+'*' }}</span>
            <v-text-field v-model="userCompanyCopy.company_tax_no" dense outlined :rules="[rules.require]">
            </v-text-field>
          </v-spacer>
        </v-spacer>
       
        <span>{{ $t("userProfile.companyAddress")+'*' }}</span>
        <v-spacer>
          <v-text-field v-model="userCompanyCopy.company_address1" dense :rules="[rules.require]" outlined>
          </v-text-field>
          <v-text-field v-model="userCompanyCopy.company_address2" dense :rules="[rules.require]" outlined>
          </v-text-field>
        </v-spacer>
        <v-spacer :class="$vuetify.breakpoint.smAndUp ? 'd-flex' : ''">
          <v-spacer :class="$vuetify.breakpoint.smAndUp ? 'me-8' : ''" class="input-wrap">
            <span>{{ $t("userProfile.companyCity")+'*' }}</span>
            <v-text-field v-model="userCompanyCopy.company_city" dense :rules="[rules.require]" outlined></v-text-field>
          </v-spacer>
          <v-spacer :class="$vuetify.breakpoint.smAndUp ? 'ms-8' : ''" class="input-wrap">
            <span>{{ $t("userProfile.stateAndProvince") }}</span>
            <v-text-field v-model="userCompanyCopy.company_state" dense outlined></v-text-field>
          </v-spacer>
        </v-spacer>
        <v-spacer :class="$vuetify.breakpoint.smAndUp ? 'd-flex' : ''">
          <v-spacer :class="$vuetify.breakpoint.smAndUp ? 'me-8' : ''" class="input-wrap">
            <span>{{ $t("userProfile.companyCountry")+'*' }}</span>
            <v-autocomplete v-model="countrySelect" :items="countryOptions" item-text="name" item-value="id" dense
              :rules="[rules.require]" outlined></v-autocomplete>
          </v-spacer>
          <v-spacer :class="$vuetify.breakpoint.smAndUp ? 'ms-8' : ''" class="input-wrap">
            <span>{{ $t("userProfile.zipAndPostalCode") }}</span>
            <v-text-field v-model="userCompanyCopy.company_zipcode" dense :rules="[rules.require]" outlined>
            </v-text-field>
          </v-spacer>
        </v-spacer>
      </v-form>
      <v-spacer class="d-flex justify-end">
        <v-btn @click="resetUserData" text width="112px" class="text-capitalize primary--text">
          {{ $t("userProfile.companyDialogClear") }}
        </v-btn>
        <v-btn @click="patchUserData" :disabled="!valid" class="border-radius-16 text-capitalize" color="primary"
          width="112px">
          {{ $t("userProfile.companyDialogAdd") }}
        </v-btn>
      </v-spacer>
    </v-card>
  </v-dialog> -->
</template>
<script>
import elementInput from "@/components/newComponent/form/ElementInput";
import elementAddress from "@/components/newComponent/form/ElementAddress";
import elementSelect from "@/components/newComponent/form/ElementSelect";
import is from "is_js";
export default {
  name: "EditCompanytModal",
  components: {
    elementInput,
    elementAddress,
    elementSelect,
    is,
  },
  model: {
    // prop: "companyEditInfoDialogActive",
    event: "update:is-company-edit-dialog-active",
  },
  props: {
    companyEditInfoDialogActive: {
      type: Boolean,
      required: true,
    },
    userCompany: {
      type: Object,
      required: true,
    },
    countryOptions: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      userCompanyCopy: {},
      countrySelect: null,
      validation: {
        company_name: true,
        company_tax_no: true,
        company_address1: true,
        company_address2: true,
        company_city: true,
        company_state: true,
        company_country: true,
        company_zipcode: true,
      },
      errors: null,
      rules: {
        require: (value) => !!value || this.$t("Required."),
        email: (v) =>
          /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/.test(
            v
          ) || this.$t("Invalid email"),
        checkPassword: (v) =>
          (/(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])/.test(v) &&
            v.length >= 8 &&
            v.length <= 20) ||
          this.$t(
            "Passwords must be 8-20 characters with at least 1 number, 1 lower case letter and 1 upper case letter"
          ),
      },
      valid: false,
    };
  },
  methods: {
    patchUserData() {
      // if (!this.countrySelect && typeof this.countrySelect === "object") {
      // } else {
      //   this.userCompanyCopy.company_country = this.countrySelect;
      // }
      this.$axios
        .post(
          `/member/company?jwt=${this.$auth.$storage.getUniversal("jwt").token || ""
          }`,
          this.userCompanyCopy
        )
        .then((result) => {
          this.userCompanyCopy = {};
          // this.countrySelect = null;
          this.$emit("refetch-user");
          this.$emit("close-edit-dialog");
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // resetUserData() {
    //   this.userCompanyInfo = {};
    //   this.countrySelect = null;
    // },
    // closeDialog() {
    //   this.userCompanyInfo = {};
    //   this.countrySelect = null;
    //   this.$emit("close-edit-dialog");
    // },
    validators() {
      if (is.empty(this.userCompany.company_name)) {
        this.validation.company_name = false;
      } else {
        this.validation.company_name = true;
      }
      if (is.empty(this.userCompany.company_tax_no)) {
        this.validation.company_tax_no = false;
      } else {
        this.validation.company_tax_no = true;
      }
      if (is.empty(this.userCompany.company_address1)) {
        this.validation.company_address1 = false;
      } else {
        this.validation.company_address1 = true;
      }
      if (is.empty(this.userCompany.company_city)) {
        this.validation.company_city = false;
      } else {
        this.validation.company_city = true;
      }
      if (this.userCompany.company_country == 0) {
        this.validation.company_country = false;
      } else {
        this.validation.company_country = true;
      }
      if (is.empty(this.userCompany.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;
      }
    },
    save() {
      this.validators();
      if (this.validators()) {
        const patchData = JSON.parse(JSON.stringify(this.userCompany));
        this.$axios
          .post(
            `/member/company?jwt=${this.$auth.$storage.getUniversal("jwt").token
            }`,
            patchData
          )
          .then((result) => {
            if ((result.status = 200)) {
              this.$emit("refetch-user");
              // this.$emit("update", true);
              this.$modal.hide("edit-company-modal");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    reset() {
      this.userCompany = {
        company_name: "",
        company_tax_no: "",
        company_address1: "",
        company_address2: "",
        company_city: "",
        company_state: "",
        company_country: 0,
        company_zipcode: "",
      };
    },
  },
  watch: {
    companyEditInfoDialogActive: {
      handler: function () {
        this.userCompanyCopy = { ...this.userCompany };
        const country = this.userCompany.company_country || null;
        this.countrySelect =
          this.countryOptions.filter((item) => item.id === country)[0].id ||
          null;
      },
    },
  },
};
</script>
<style scoped lang="scss">
.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;
    }
  }

  // :deep() {
  //   .v-dialog {
  //     border-radius: 30px !important;
  //   }

  //   .v-text-field--outlined fieldset {
  //     border-color: #e5e5e5;
  //   }

  //   .v-select {
  //     border-color: #e5e5e5;
  //   }
  // }

  // .input-wrap {
  //   @media screen and (max-width: 600px) {
  //     width: 88%;
  //   }

  //   @media screen and (min-width: 600px) and (max-width: 960px) {
  //     width: 45%;
  //   }

  //   @media screen and (min-width: 961px) {
  //     width: 45%;
  //   }
  // }
}
</style>