You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
413 lines
14 KiB
413 lines
14 KiB
<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>
|