added promo. fixed bugs
This commit is contained in:
206
src/pages/admin/promo/edit.vue
Normal file
206
src/pages/admin/promo/edit.vue
Normal file
@@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<Header/>
|
||||
<div class="flex">
|
||||
<div class="">
|
||||
<SideBar/>
|
||||
</div>
|
||||
<div class=" w-full px-10">
|
||||
<div class="text-sm breadcrumbs">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link :to="{ name: 'home' }">
|
||||
Home
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link :to="{ name: 'customer' }">
|
||||
Customers
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 rounded-md p-6 ">
|
||||
<div class="text-[24px]">
|
||||
Edit Promo {{ PromoOrder.name_of_promotion }}
|
||||
</div>
|
||||
<form class="rounded-md px-8 pt-6 pb-8 mb-4 w-full"
|
||||
enctype="multipart/form-data"
|
||||
@submit.prevent="onSubmit">
|
||||
|
||||
<div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10">
|
||||
<label class="block text-white text-sm font-bold cursor-pointer label">Promotion Name</label>
|
||||
<input v-model="CreatePromoForm.name_of_promotion"
|
||||
class="input input-bordered input-sm w-full max-w-xs"
|
||||
id="title" type="text" placeholder="Name"/>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10">
|
||||
<label class="block text-white text-sm font-bold cursor-pointer label">Text on Ticket</label>
|
||||
<input v-model="CreatePromoForm.text_on_ticket"
|
||||
class="input input-bordered input-sm w-full max-w-xs"
|
||||
id="title" type="text" placeholder="Text appears on ticket "/>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-white text-sm font-bold mb-2">How much off gallon (0.05 for example)</label>
|
||||
<input v-model="CreatePromoForm.money_off_delivery"
|
||||
class="input input-bordered input-sm w-full max-w-xs"
|
||||
id="title" type="text" placeholder="0.01"/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-span-12 md:col-span-4 mb-5 md:mb-0">
|
||||
<textarea v-model="CreatePromoForm.description" rows="4"
|
||||
class="textarea block p-2.5 w-full input-bordered " id="description" type="text" placeholder="Description of Promo" />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
|
||||
<button
|
||||
class="btn btn-accent btn-sm">
|
||||
Edit Promo
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer/>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent} from 'vue'
|
||||
import axios from 'axios'
|
||||
import authHeader from '../../../services/auth.header'
|
||||
import Header from '../../../layouts/headers/headerauth.vue'
|
||||
import SideBar from '../../../layouts/sidebar/sidebar.vue'
|
||||
import Footer from '../../../layouts/footers/footer.vue'
|
||||
import useValidate from "@vuelidate/core";
|
||||
import {notify} from "@kyvg/vue3-notification";
|
||||
|
||||
export default defineComponent({
|
||||
name: 'PromoEdit',
|
||||
|
||||
components: {
|
||||
Header,
|
||||
SideBar,
|
||||
Footer,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
v$: useValidate(),
|
||||
user: null,
|
||||
PromoOrder:{
|
||||
id: 0,
|
||||
name_of_promotion: '',
|
||||
description:'',
|
||||
money_off_delivery: '',
|
||||
text_on_ticket: ''
|
||||
},
|
||||
CreatePromoForm: {
|
||||
name_of_promotion: '',
|
||||
description:'',
|
||||
money_off_delivery: '',
|
||||
text_on_ticket: ''
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.userStatus()
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.getCurrentPromo(this.$route.params.id);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getCurrentPromo(this.$route.params.id);
|
||||
},
|
||||
methods: {
|
||||
userStatus() {
|
||||
let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
|
||||
axios({
|
||||
method: 'get',
|
||||
url: path,
|
||||
withCredentials: true,
|
||||
headers: authHeader(),
|
||||
})
|
||||
.then((response: any) => {
|
||||
if (response.data.ok) {
|
||||
this.user = response.data.user;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.user = null
|
||||
})
|
||||
},
|
||||
getCurrentPromo(promo_id: any) {
|
||||
let path = import.meta.env.VITE_BASE_URL + "/promo/" + promo_id;
|
||||
axios({
|
||||
method: "get",
|
||||
url: path,
|
||||
withCredentials: true,
|
||||
headers: authHeader(),
|
||||
})
|
||||
.then((response: any) => {
|
||||
if (response.data) {
|
||||
this.PromoOrder = response.data
|
||||
this.CreatePromoForm.name_of_promotion = response.data.name_of_promotion;
|
||||
this.CreatePromoForm.description = response.data.description;
|
||||
this.CreatePromoForm.money_off_delivery = response.data.money_off_delivery;
|
||||
this.CreatePromoForm.text_on_ticket = response.data.text_on_ticket;
|
||||
}
|
||||
})
|
||||
},
|
||||
EditPromo(payload: {
|
||||
name_of_promotion: string;
|
||||
description: string;
|
||||
money_off_delivery: string;
|
||||
text_on_ticket: string;
|
||||
|
||||
}) {
|
||||
let path = import.meta.env.VITE_BASE_URL + "/promo/edit/" + this.PromoOrder.id;
|
||||
axios({
|
||||
method: "put",
|
||||
url: path,
|
||||
data: payload,
|
||||
withCredentials: true,
|
||||
headers: authHeader(),
|
||||
})
|
||||
.then((response: any) => {
|
||||
if (response.data.ok) {
|
||||
notify({
|
||||
title: "update",
|
||||
text: "Promo has been edited!",
|
||||
type: "success",
|
||||
});
|
||||
this.$router.push({name: "promo"});
|
||||
}
|
||||
if (response.data.error) {
|
||||
this.$router.push("promo");
|
||||
}
|
||||
})
|
||||
},
|
||||
onSubmit() {
|
||||
let payload = {
|
||||
name_of_promotion: this.CreatePromoForm.name_of_promotion,
|
||||
description: this.CreatePromoForm.description,
|
||||
text_on_ticket: this.CreatePromoForm.text_on_ticket,
|
||||
money_off_delivery: this.CreatePromoForm.money_off_delivery,
|
||||
};
|
||||
this.EditPromo(payload);
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user