eamco_office_frontend/src/pages/admin/oilprice.vue

<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]">
            Add Oil Price
            </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">Price Customer</label>
                <input v-model="CreateOilForm.basicInfo.price_for_customer"
                         class="input input-bordered w-full max-w-xs"
                       id="title" type="text" placeholder="Todays Price"/>
              </div>

              <div class="mb-4">
                <label class="block text-white text-sm font-bold mb-2">Price Employee</label>
                <input v-model="CreateOilForm.basicInfo.price_for_employee"
                       class="input input-bordered w-full max-w-xs"
                       id="title" type="text" placeholder="Todays Price Employee"/>
              </div>



              <div class="mb-4">
                <label class="block text-white text-sm font-bold mb-2"> Price from Supplier</label>
                <input v-model="CreateOilForm.basicInfo.price_from_supplier"
                       class="input input-bordered w-full max-w-xs"
                       id="prime" type="text" placeholder="Price Prime"/>
              </div>

              <div class="mb-4">
                <label class="block text-white text-sm font-bold mb-2">Price same day</label>
                <input v-model="CreateOilForm.basicInfo.price_same_day"
                       class="input input-bordered w-full max-w-xs"
                       id="title" type="text" placeholder="Price Same Day"/>
              </div>


              <div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
                <button
                    class="btn">
                  Create Price
                </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: 'OilPrice',

    components: {
      Header,
      SideBar,
      Footer,
    },

    data() {
      return {
        v$: useValidate(),
        user: null,
        CreateOilForm: {
          basicInfo: {
            price_from_supplier: '',
            price_for_customer: '',
            price_for_employee: '',
            price_same_day: '',
          },
        },
      }
    },

    created() {
      this.userStatus()
    },
    watch: {
      $route() {

      },
    },
    mounted() {
      this.getCurrentPrices()
    },
    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
            })
      },
    getCurrentPrices() {
      let path = import.meta.env.VITE_BASE_URL + "/admin/oil/get";
      axios({
        method: "get",
        url: path,
        withCredentials: true,
        headers: authHeader(),
      })
          .then((response: any) => {
            if (response.data) {

              this.CreateOilForm.basicInfo.price_from_supplier = response.data.price_from_supplier;
              this.CreateOilForm.basicInfo.price_for_customer = response.data.price_for_customer;
              this.CreateOilForm.basicInfo.price_for_employee = response.data.price_for_employee;
              this.CreateOilForm.basicInfo.price_same_day = response.data.price_same_day;
            }
          })
    },
      CreatePricing(payload: {
        price_from_supplier: string;
        price_for_customer: string;
        price_for_employee: string;
        price_same_day: string;

      }) {
        let path = import.meta.env.VITE_BASE_URL  + "/admin/oil/create";
        axios({
          method: "post",
          url: path,
          data: payload,
          withCredentials: true,
          headers: authHeader(),
        })
            .then((response: any) => {
              if (response.data.ok) {
                notify({
                title: "update",
                text: "Prices have been updated!",
                type: "success",
              });
                this.$router.push({name: "oilprice"});
              }
              if (response.data.error) {
                this.$router.push("/");
              }
            })
      },
      onSubmit() {
        let payload = {
            price_from_supplier: this.CreateOilForm.basicInfo.price_from_supplier,
            price_for_customer: this.CreateOilForm.basicInfo.price_for_customer,
            price_for_employee: this.CreateOilForm.basicInfo.price_for_employee,
           price_same_day: this.CreateOilForm.basicInfo.price_same_day,
        };
        this.CreatePricing(payload);
      },
    },
  })
  </script>

  <style scoped>

  </style>