eamco_driver_frontend/src/pages/TodayFinishedDelivery.vue

<template>
    <q-page>
      <div class="q-pa-md">
  
        <q-table title="Todays Finished Deliveries" :rows="deliveries" :columns="columns" row-key="id" :filter="filter"
          v-model="filter" class="q-mb-lg">
          <template v-slot:top-right>
            <q-input dense debounce="300" v-model="filter" placeholder="Search">
              <template v-slot:append>
                <q-icon name="search" />
              </template>
            </q-input>
          </template>
          <template v-slot:body="props">
            <q-tr :props="props" class="pointer q-hoverable" @click="onEdit(props.row)">
  
              <q-td key="id" :props="props">
                {{ props.row.id }}
              </q-td>
  
              <q-td key="delivery_status" :props="props">
                <span v-if="props.row.delivery_status == 0" class="text-green-6">Waiting</span>
                <span v-if="props.row.delivery_status == 1" class="text-grey-9">Delivered</span>
                <span v-if="props.row.delivery_status == 2" class="text-green-6">Out For Delivery</span>
                <span v-if="props.row.delivery_status == 3" class="text-red">Cancelled</span>
                <span v-if="props.row.delivery_status == 4" class="text-red-14">Partial Delivery</span>
                <span v-if="props.row.delivery_status == 5" class="text-red-14">Issue</span>
                <span v-if="props.row.delivery_status == 10" class="text-grey-9">Finalized</span>
              </q-td>
  
              <q-td key="customer_name" :props="props">
                {{ props.row.customer_name }}
              </q-td>
  
              <q-td key="address" :props="props">
                {{ props.row.customer_address }}
              </q-td>
  
              <q-td key="town" :props="props">
                {{ props.row.customer_town }}
              </q-td>
  
              <q-td key="gallons_ordered" :props="props">
                <span v-if="props.row.customer_asked_for_fill == 0"> {{ props.row.gallons_ordered }}</span>
                <span v-if="props.row.customer_asked_for_fill == 1"> Fill</span>
              </q-td>
  
              <q-td key="automatic" :props="props">
                <span v-if="props.row.automatic == 0">No</span>
                <span v-if="props.row.automatic == 1">Yes</span>
              </q-td>
  
              <q-td key="payment" :props="props">
                <span v-if="props.row.payment_type == 0">Cash COD</span>
                <span v-if="props.row.payment_type == 1">Credit</span>
                <span v-if="props.row.payment_type == 2">Credit/Cash</span>
                <span v-if="props.row.payment_type == 3">Check</span>
                <span v-if="props.row.payment_type == 4">Other</span>
              </q-td>
  
              <q-td key="prime" :props="props">
                <span v-if="props.row.prime == 0"></span>
                <span v-if="props.row.prime == 1" class="text-red-14">YES</span>
              </q-td>
  
              <q-td key="same_day" :props="props">
                <span v-if="props.row.same_day == 0"></span>
                <span v-if="props.row.same_day == 1" class="text-red-14">YES</span>
              </q-td>
  
  
              <q-td key="dispatcher_notes" :props="props">
                {{ props.row.dispatcher_notes }}
              </q-td>
            </q-tr>
          </template>
        </q-table>
      </div>
    </q-page>
  </template>
  
  
  <script lang="ts">
  import axios from 'axios'
  import { defineComponent } from 'vue'
  import authHeader from '../services/auth.header'
  
  export default defineComponent({
    name: 'TodayFinishedDelivery',
  
    data() {
      return {
        token: null,
        deliveries: [],
        user: {
          user_id: 0,
          user_name: ''
        },
        filter: '',
        employee: {
          id: '',
          user_id: '',
          employee_last_name: "",
          employee_first_name: "",
          employee_town: "",
          employee_address: "",
          employee_apt: "",
          employee_zip: "",
          employee_birthday: "",
          employee_phone_number: "",
          employee_start_date: "",
          employee_end_date: "",
          employee_type: '',
          employee_state: ''
        },
  
        columns: [
          { name: 'id', required: true, label: 'Id', field: 'id', sortable: true },
          { name: 'delivery_status', required: true, label: 'Status', field: 'delivery_status', sortable: true },
          { name: 'customer_name', required: true, align: 'center', label: 'Name', field: 'customer_name', sortable: true },
          { name: 'address', label: 'Address', field: 'address' },
          { name: 'town', label: 'Town', field: 'town', sortable: true },
          { name: 'gallons_ordered', label: 'Gallons', field: 'gallons_ordered' },
          { name: 'automatic', label: 'Automatic', field: 'automatic', sortable: true },
          { name: 'payment', label: 'Payment', field: 'payment' },
          { name: 'prime', label: 'Prime', field: 'prime' },
          { name: 'same_day', label: 'Same Day', field: 'same_day' },
          { name: 'dispatcher_notes', label: 'Notes', field: 'dispatcher_notes' },
        ]
      }
    },
    mounted() {
      this.userStatus()
    },
    methods: {
  
      userStatus() {
        const 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
              this.get_employee()
            }
          })
      },
      get_employee() {
        const path = import.meta.env.VITE_BASE_URL + '/employee/userid/' + this.user.user_id
        axios({
          method: "get",
          url: path,
          withCredentials: true,
          headers: authHeader()
        })
          .then((response: any) => {
            this.employee = response.data
            this.get_oil_orders()
          })
      },
      get_oil_orders() {
        const path = import.meta.env.VITE_BASE_URL + '/deliverystatus/today/driver/' + this.employee.id
        axios({
          method: 'get',
          url: path,
          withCredentials: true,
          headers: authHeader()
        }).then((response: any) => {
          this.deliveries = response.data
        })
      },
      onEdit(row: any) {
        this.$router.push('delivery/' + row.id)
      }
    }
  })
  </script>