mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
Dillon Ngo
254 lines
12 KiB
Vue
254 lines
12 KiB
Vue
<template>
|
|
<div class="row">
|
|
<div class="col">
|
|
<loading-component style="height: 50px; top: 0;" key="1" color="success" v-show="$store.getters.isLoading(section)"></loading-component>
|
|
<div class="row" v-show="!$store.getters.isLoading(section)">
|
|
<div class="col">
|
|
<div class="row m-b-20">
|
|
<div class="col">
|
|
<h6 class="all-caps m-b-5 bold no-margin">{{ parameters.id ? 'Update Affiliate Code' : 'Create Affiliate Code' }}</h6>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-5 animate__animated animate__fadeInUpBig animate__fast" v-if="error">
|
|
<div class="col">
|
|
<small class="bold fs-10 text-danger">{{error}}</small>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-10">
|
|
<div class="col">
|
|
<input type="hidden" class="form-control" v-if="parameters.id" v-model="parameters.id">
|
|
<validation-wrapper-component :validator="$v.parameters.campaign_name">
|
|
<label>Campaign Name</label>
|
|
<input type="text" class="form-control" v-model="parameters.campaign_name" placeholder="e.g., Summer Campaign 2024">
|
|
</validation-wrapper-component>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-10">
|
|
<div class="col">
|
|
<validation-wrapper-component :validator="$v.parameters.code">
|
|
<label>Code</label>
|
|
<input type="text" class="form-control" v-model="parameters.code" placeholder="e.g., SUMMER2024" :disabled="!!parameters.id">
|
|
<small class="hint-text" v-if="!parameters.id">Leave empty to auto-generate a unique code</small>
|
|
<small class="hint-text" v-if="parameters.id">Code cannot be changed after creation</small>
|
|
</validation-wrapper-component>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-10">
|
|
<div class="col">
|
|
<validation-wrapper-component :validator="$v.parameters.campaign_description">
|
|
<label>Campaign Description</label>
|
|
<textarea class="form-control" v-model="parameters.campaign_description" rows="3" placeholder="Optional description for this affiliate campaign"></textarea>
|
|
</validation-wrapper-component>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-10">
|
|
<div class="col">
|
|
<label>Is Active</label>
|
|
<div class="row m-t-5">
|
|
<div class="col-auto">
|
|
<div class="pointer" @click="parameters.is_active = !parameters.is_active">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto p-r-10">
|
|
<div class="icon-thumbnail fs-12 icon-30 btn-rounded" :class="[{'bg-success': parameters.is_active}, {'bg-master-light': !parameters.is_active}]">
|
|
<i class="fa fa-check fs-12 text-white" v-if="parameters.is_active"></i>
|
|
</div>
|
|
</div>
|
|
<div class="col p-l-0">
|
|
<div class="font-heading fs-10" :class="[{'text-success': parameters.is_active}, {'text-muted': !parameters.is_active}]">
|
|
{{ parameters.is_active ? 'Active' : 'Inactive' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-20" v-if="parameters.id && trackingLink">
|
|
<div class="col">
|
|
<label>Tracking Link</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" :value="trackingLink" readonly>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-sm btn-default" @click="copyLink" type="button">
|
|
<i class="fa fa-copy"></i> Copy
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col p-r-5">
|
|
<div class="btn btn-sm btn-default bg-master-lightest btn-block b-rad-none" data-dismiss="modal">Cancel</div>
|
|
</div>
|
|
<div class="col p-l-5">
|
|
<div class="btn btn-sm btn-success btn-block b-rad-none" @click="submitForm()">{{ parameters.id ? 'Update' : 'Create' }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import ModalFormHandler from '../../../general/mixins/modalFormHandler';
|
|
import { required } from "vuelidate/lib/validators";
|
|
export default {
|
|
props: {
|
|
section: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
data: {
|
|
type: Object,
|
|
default: null
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
error: '',
|
|
parameters: {
|
|
id: null,
|
|
campaign_name: '',
|
|
code: '',
|
|
campaign_description: '',
|
|
is_active: true
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
trackingLink() {
|
|
if (this.parameters.id && this.parameters.code) {
|
|
const baseUrl = window.location.origin;
|
|
return `${baseUrl}/signup?tracking=${this.parameters.code}`;
|
|
}
|
|
return null;
|
|
}
|
|
},
|
|
created() {
|
|
// Override formHandler mixin's created() to create a copy instead of reference
|
|
if (this.data) {
|
|
// Create a deep copy to avoid modifying the original data object
|
|
this.parameters = JSON.parse(JSON.stringify(this.data));
|
|
// Normalize is_active to boolean
|
|
if (this.parameters.is_active !== undefined) {
|
|
if (this.parameters.is_active === false || this.parameters.is_active === 'false' || this.parameters.is_active === 0 || this.parameters.is_active === '0') {
|
|
this.parameters.is_active = false;
|
|
} else if (this.parameters.is_active === true || this.parameters.is_active === 'true' || this.parameters.is_active === 1 || this.parameters.is_active === '1') {
|
|
this.parameters.is_active = true;
|
|
}
|
|
} else {
|
|
this.parameters.is_active = true;
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
data: {
|
|
handler(newData) {
|
|
// Create a deep copy to avoid modifying the original data object
|
|
if (newData) {
|
|
this.parameters = JSON.parse(JSON.stringify(newData));
|
|
// Normalize is_active to boolean
|
|
if (this.parameters.is_active !== undefined) {
|
|
if (this.parameters.is_active === false || this.parameters.is_active === 'false' || this.parameters.is_active === 0 || this.parameters.is_active === '0') {
|
|
this.parameters.is_active = false;
|
|
} else if (this.parameters.is_active === true || this.parameters.is_active === 'true' || this.parameters.is_active === 1 || this.parameters.is_active === '1') {
|
|
this.parameters.is_active = true;
|
|
}
|
|
} else {
|
|
this.parameters.is_active = true;
|
|
}
|
|
} else {
|
|
// For new records, reset to defaults
|
|
this.parameters = {
|
|
id: null,
|
|
campaign_name: '',
|
|
code: '',
|
|
campaign_description: '',
|
|
is_active: true
|
|
};
|
|
}
|
|
},
|
|
immediate: true,
|
|
deep: true
|
|
}
|
|
},
|
|
validations: {
|
|
parameters: {
|
|
campaign_name: { required },
|
|
code: {},
|
|
campaign_description: {},
|
|
is_active: {}
|
|
}
|
|
},
|
|
methods: {
|
|
successHandler() {
|
|
// Only refresh the list on successful create/update
|
|
this.closeModal();
|
|
// Set loading to false
|
|
this.isLoading = false;
|
|
// Reset form
|
|
this.resetForm();
|
|
// Reload the affiliates list only on success
|
|
this.$store.dispatch('reloadList', {'name': 'affiliatesSection'});
|
|
},
|
|
errorHandler(error) {
|
|
// Don't reload the list on error - just handle the error message
|
|
this.isLoading = false;
|
|
|
|
// Parse error message properly
|
|
let errorMessage = error.message || error;
|
|
|
|
// If error.message is a JSON string, parse it
|
|
if (typeof errorMessage === 'string') {
|
|
try {
|
|
const parsed = JSON.parse(errorMessage);
|
|
errorMessage = parsed.message || errorMessage;
|
|
} catch (e) {
|
|
// If parsing fails, use the message as-is
|
|
}
|
|
}
|
|
|
|
this.errorMessageHandler(errorMessage);
|
|
},
|
|
resetForm() {
|
|
if (this.$v) {
|
|
this.$v.$reset();
|
|
}
|
|
if (!this.data) {
|
|
this.parameters = {
|
|
id: null,
|
|
campaign_name: '',
|
|
code: '',
|
|
campaign_description: '',
|
|
is_active: true
|
|
};
|
|
}
|
|
},
|
|
submitForm() {
|
|
if (!this.validate()) {
|
|
return;
|
|
}
|
|
const url = this.parameters.id
|
|
? this.route('api.affiliate.update', this.parameters.id)
|
|
: this.route('api.affiliate.create');
|
|
const method = this.parameters.id ? 'put' : 'post';
|
|
this.submit(url, method, this.section, true, false);
|
|
},
|
|
copyLink() {
|
|
if (this.trackingLink) {
|
|
navigator.clipboard.writeText(this.trackingLink).then(() => {
|
|
this.$store.dispatch('createNotification', {
|
|
title: 'Success',
|
|
message: 'Tracking link copied to clipboard',
|
|
type: 'success'
|
|
});
|
|
});
|
|
}
|
|
}
|
|
},
|
|
mixins: [ModalFormHandler]
|
|
}
|
|
</script>
|
|
|