File: //home/arjun/projects/buyercall/buyercall/assets/vue/widgets/PartnershipTable/WhiteLabel.vue
<template>
<div>
<div class="row justify-content-center">
<div class="col-xl-10">
<div class="card">
<div class="card-body">
<h4 class="card-title">White-label Configuration</h4>
<p class="card-title-desc">
Update or change the partnership white-label configuration
</p>
<b-form @submit.prevent="formSubmit">
<div class="row">
<div class="col-md-12">
<b-form-group
class="mb-3 form-label"
label="Partner Account Signup Link"
label-for="formrow-accountsignup"
>
<span
id="formrow-accountsignup"
class="text-primary"
ref="textToCopy"
>
{{ partnerData.signUpLink }}
</span>
<b-button
v-b-popover.top.focus="'Copied!'"
variant="light"
@click="copyText"
>Copy</b-button
>
</b-form-group>
</div>
</div>
<div class="row">
<div class="col-md-6">
<b-form-group
class="mb-3"
label="Partner Domain"
label-for="formrow-partnerurl-input"
>
<b-form-input
id="formrow-partnerurl-input"
type="text"
placeholder="Partner Domain"
v-model="form.partnerUrl"
name="partnerUrl"
:class="{
'is-invalid': submitted && $v.form.partnerUrl.$error,
}"
></b-form-input>
<div
v-if="submitted && $v.form.partnerUrl.$error"
class="invalid-feedback"
>
<span v-if="!$v.form.partnerUrl.required"
>This value is required.</span
>
<span v-else-if="!$v.form.partnerUrl.domainValidator">{{
formvalidationMessages.domainvalidatorMessage
}}</span>
</div>
</b-form-group>
</div>
<div class="col-md-6">
<b-form-group
class="mb-3"
label="Default System Email"
label-for="formrow-systememail-input"
>
<b-form-input
id="formrow-systememail-input"
type="text"
placeholder="Default system email"
v-model="form.systemEmail"
name="systemEmail"
:class="{
'is-invalid': submitted && $v.form.systemEmail.$error,
}"
></b-form-input>
<div
v-if="submitted && $v.form.systemEmail.$error"
class="invalid-feedback"
>
<span v-if="!$v.form.systemEmail.required"
>This value is required.</span
>
<span v-else-if="!$v.form.partnerUrl.email"
>Please provide a valid email.</span
>
</div>
</b-form-group>
</div>
<div class="col-md-6">
<b-form-group class="mb-3" label="Select Primary Color">
<b-input-group>
<template #prepend>
<v-input-colorpicker
v-model="form.sidebarColor"
:style="{ backgroundColor: form.sidebarColor }"
/>
</template>
<b-form-input
id="formrow-colorpicker-input"
type="text"
placeholder="Select Primary Color"
v-model="form.sidebarColor"
name="colorpicker"
></b-form-input>
</b-input-group>
</b-form-group>
</div>
<div class="col-md-6">
<b-form-group
class="mb-3"
label="Invite Partner User Email"
label-for="formrow-systememail-input"
>
<b-form-input
id="formrow-partneruseremail-input"
type="text"
placeholder="Invite partner user email"
v-model="form.partneruseremail"
name="partneruseremail"
:class="{
'is-invalid':
submitted && $v.form.partneruseremail.$error,
}"
></b-form-input>
<div
v-if="submitted && $v.form.partneruseremail.$error"
class="invalid-feedback"
>
<span v-if="!$v.form.partneruseremail.email"
>Please provide a valid email.</span
>
</div>
</b-form-group>
</div>
<div class="col-md-6">
<div class="form-check form-switch mb-3 form-switch-lg">
<input
class="form-check-input"
type="checkbox"
id="restrictLoginAccess"
v-model="form.isExpandedMenu"
/>
<label class="form-check-label" for="restrictLoginAccess"
>Display expanded menu as default</label
>
</div>
</div>
</div>
<div>
<b-button variant="primary" type="submit">
<i
v-if="partnershipWhiteLabelUpdateLoading"
class="bx bx-loader bx-spin font-size-16 align-middle me-2"
></i>
Save</b-button
>
<b-button variant="light" @click="resetForm">Cancel</b-button>
</div>
</b-form>
</div>
</div>
</div>
</div>
<div class="row justify-content-center" v-if="showDomainverficaitionCard">
<div class="col-xl-10">
<div class="card">
<div class="card-body">
<h4 class="card-title">Domain Verficiation Status</h4>
<p class="card-title-desc">
Please see your domain verification have been verified
</p>
<div class="table-responsive">
<table class="table table-bordered border-primary mb-0">
<thead class="table-light">
<tr>
<th>Type</th>
<th>Name</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr v-for="(record, index) in getDkmRecords()" :key="index">
<td>{{ record.type }}</td>
<td>{{ record.name }}</td>
<td>{{ record.value }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { required, email } from 'vuelidate/lib/validators';
import * as _ from 'lodash';
import InputColorPicker from 'vue-native-color-picker';
import { formvalidation, formvalidationMessages } from '../../utils/util';
import { BForm,BButton,BFormGroup,BInputGroup,BFormInput,BPopover} from 'bootstrap-vue-next';
const { domainValidator } = formvalidation;
export default {
props: {
partnerData: {
type: Object,
required: true,
},
partnershipWhiteLabelUpdateLoading: {
type: Boolean,
required: true,
},
},
components: {
'v-input-colorpicker': InputColorPicker,
BForm,BButton,BFormGroup,BInputGroup,BFormInput,
BPopover
},
data() {
return {
formvalidationMessages,
form: {
partnerUrl: this.partnerData.partnerUrl,
systemEmail: this.partnerData.email,
sidebarColor: this.partnerData.sidebarColor
? this.partnerData.sidebarColor
: '#2a3042',
partneruseremail: '',
isExpandedMenu: this.partnerData.isExpandedMenu,
},
submitted: false,
};
},
computed: {
showDomainverficaitionCard() {
if (
this.partnerData.sesIdentityStatus &&
_.isArray(this.partnerData.sesIdentityStatus) &&
this.partnerData.sesIdentityStatus.length &&
_.filter(
this.partnerData.sesIdentityStatus,
({ identityStatus }) => identityStatus !== 'Success',
).length
) {
return true;
}
return false;
},
},
validations: {
form: {
partnerUrl: { required, domainValidator },
systemEmail: { required, email },
partneruseremail: { email },
},
},
methods: {
getDkmRecords() {
return this.partnerData.dkimRecords;
},
copyText() {
this.selectText(this.$refs.textToCopy); // e.g. <div ref="text">
document.execCommand('copy');
},
selectText(element) {
var range;
if (document.selection) {
// IE
range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
range = document.createRange();
range.selectNode(element);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
}
},
formSubmit() {
this.submitted = true;
// this.$v.$touch();
// if (this.$v.$invalid) {
// return;
// }
console.log(JSON.stringify(this.form));
this.$emit('formSubmit', this.form);
},
resetForm() {
this.form = {
partnershipName: this.partnerData.name,
partnerUrl: this.partnerData.partnerUrl,
systemEmail: this.partnerData.email,
sidebarColor: this.partnerData.sidebarColor
? this.partnerData.sidebarColor
: '#2a3042',
partneruseremail: '',
};
},
},
directives: { 'b-popover': BPopover ,'v-input-colorpicker':InputColorPicker },
};
</script>