eamco_office_frontend/src/pages/admin/promo/edit.vue

<!-- src/pages/admin/promo/edit.vue -->
<template>
      <div class="flex">
  
        <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-secondary btn-sm">
                  Edit Promo
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>

    
  </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 useValidate from "@vuelidate/core";
  import {notify} from "@kyvg/vue3-notification";

  export default defineComponent({
    name: 'PromoEdit',

    components: {
      Header,
      SideBar,
    },

    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>