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.
473 lines
16 KiB
473 lines
16 KiB
<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>
|
|
</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><span class="required">*</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><span class="required">*</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><span class="required">*</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><span class="required">*</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><span class="required">*</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><span class="required">*</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><span class="required">*</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.country) || this.formData.country=="0") {
|
|
this.validation.country = false;
|
|
} else {
|
|
this.validation.country = 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>
|
|
|