mirror of
https://github.com/tomru/pfadi-bussle.git
synced 2026-03-04 15:07:13 +01:00
further work on bills
This commit is contained in:
Thomas Ruoff
committed by
Thomas Ruoff
Thomas Ruoff
parent
ec1b2e9629
commit
f8434233d9
@@ -3,9 +3,13 @@ import React, { useEffect, useState } from 'react'
|
||||
import Footer from '../../../components/footer'
|
||||
import Header from '../../../components/header'
|
||||
import Input from '../../../components/wizard/input'
|
||||
import { BillDocument } from '../../../db/bill'
|
||||
import Bill, { AdditionalCosts, BillDocument } from '../../../db/bill'
|
||||
import { BookingDocument } from '../../../db/booking'
|
||||
import { BOOKING_STATUS, MILAGE_RATES } from '../../../db/enums'
|
||||
import {
|
||||
BILL_STATUS,
|
||||
MILAGE_RATES,
|
||||
getMilageRateValue,
|
||||
} from '../../../db/enums'
|
||||
import { getBookingByUUID } from '../../../db/index'
|
||||
import { dateFormatFrontend } from '../../../helpers/date'
|
||||
|
||||
@@ -22,30 +26,64 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
|
||||
res.end()
|
||||
return { props: {} }
|
||||
}
|
||||
const bill =
|
||||
(await Bill.findOne({ booking: booking._id })) ||
|
||||
new Bill({ booking: booking._id })
|
||||
|
||||
// TODO: hack, not sure why _id is not serilizable
|
||||
const bookingJSON = JSON.parse(JSON.stringify(booking.toJSON()))
|
||||
const billJSON = JSON.parse(JSON.stringify(bill?.toJSON()))
|
||||
return {
|
||||
props: { booking: bookingJSON },
|
||||
props: { booking: bookingJSON, bill: billJSON },
|
||||
}
|
||||
}
|
||||
|
||||
function getBookingStatus(booking: BookingDocument) {
|
||||
switch (booking.status) {
|
||||
case BOOKING_STATUS.REQUESTED:
|
||||
return 'In Bearbeitung'
|
||||
case BOOKING_STATUS.CONFIRMED:
|
||||
return 'Best�tigt'
|
||||
case BOOKING_STATUS.REJECTED:
|
||||
return 'Abgewiesen'
|
||||
case BOOKING_STATUS.CANCELED:
|
||||
return 'Storniert'
|
||||
function getRateLabel(rate: MILAGE_RATES) {
|
||||
switch (rate) {
|
||||
case MILAGE_RATES.INTERN_LTE_200:
|
||||
return 'Intern bis zu 200km'
|
||||
case MILAGE_RATES.INTERN_200_1000:
|
||||
return 'Intern 200-1.000km'
|
||||
case MILAGE_RATES.INTERN_1001_2000:
|
||||
return 'Intern 1.001-2.000km'
|
||||
case MILAGE_RATES.INTERN_GTE_2001:
|
||||
return 'Intern ab 2.001km'
|
||||
case MILAGE_RATES.EXTERN_LTE_200:
|
||||
return 'Extern bis zu 200km'
|
||||
case MILAGE_RATES.EXTERN_200_1000:
|
||||
return 'Extern 200-1.000km'
|
||||
case MILAGE_RATES.EXTERN_1001_2000:
|
||||
return 'Extern 1.001-2.000km'
|
||||
case MILAGE_RATES.EXTERN_GTE_2001:
|
||||
return 'Extern ab 2.001km'
|
||||
default:
|
||||
return 'Unbekannt - bitte kontaktieren Sie uns!'
|
||||
return 'Keine'
|
||||
}
|
||||
}
|
||||
|
||||
async function saveBill(booking: BookingDocument, bill: BillDocument) {
|
||||
function getBillStatusLabel(status: BILL_STATUS) {
|
||||
switch (status) {
|
||||
case BILL_STATUS.UNINVOICED:
|
||||
return 'Nicht gestellt'
|
||||
case BILL_STATUS.INVOICED:
|
||||
return 'Gestellt'
|
||||
case BILL_STATUS.PAID:
|
||||
return 'Bezahlt'
|
||||
default:
|
||||
return 'Unbekannt!!!'
|
||||
}
|
||||
}
|
||||
|
||||
async function saveBill(
|
||||
booking: BookingDocument,
|
||||
bill: {
|
||||
milageStart: number
|
||||
milageEnd: number
|
||||
milage?: number
|
||||
rate: MILAGE_RATES
|
||||
additionalCosts?: AdditionalCosts[]
|
||||
}
|
||||
) {
|
||||
const response = await fetch(`/api/booking/${booking.uuid}/bill/`, {
|
||||
method: 'POST',
|
||||
mode: 'cors',
|
||||
@@ -60,21 +98,28 @@ async function saveBill(booking: BookingDocument, bill: BillDocument) {
|
||||
return response.json()
|
||||
}
|
||||
|
||||
export default function Bill({
|
||||
export default function BillPage({
|
||||
booking: bookingProp,
|
||||
bill: billProp,
|
||||
}: {
|
||||
booking: BookingDocument
|
||||
bill: BillDocument
|
||||
}) {
|
||||
const [booking, setBooking] = useState(bookingProp)
|
||||
const [milageStart, setMilageStart] = useState(0)
|
||||
const [milageEnd, setMilageEnd] = useState(0)
|
||||
const [rate, setRate] = useState(MILAGE_RATES.EXTERN_UP_TO_200)
|
||||
const [bill, setBill] = useState(billProp)
|
||||
const [milageStart, setMilageStart] = useState(bill.milageStart)
|
||||
const [milageEnd, setMilageEnd] = useState(bill.milageEnd)
|
||||
const [rate, setRate] = useState(bill.rate)
|
||||
const [status, setStatus] = useState(bill.status)
|
||||
const milage =
|
||||
(0 < milageStart && milageStart < milageEnd && milageEnd - milageStart) || 0
|
||||
const total = (milage && rate && milage * rate) || 0
|
||||
const total =
|
||||
Math.round(milage && rate && milage * getMilageRateValue(rate) * 100) /
|
||||
100 || 0
|
||||
|
||||
// in case the props change, update the internal state
|
||||
useEffect(() => setBooking(bookingProp), [bookingProp])
|
||||
useEffect(() => setBill(billProp), [billProp])
|
||||
|
||||
return (
|
||||
<div className="mx-3 flex flex-col min-h-screen">
|
||||
@@ -89,14 +134,10 @@ export default function Bill({
|
||||
milageStart,
|
||||
milageEnd,
|
||||
milage,
|
||||
total,
|
||||
rate: MILAGE_RATES[rate],
|
||||
})
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<strong>Buchungsstatus:</strong> {getBookingStatus(booking)}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Buchungszeitraum:</strong>{' '}
|
||||
{dateFormatFrontend(new Date(booking.startDate))} -{' '}
|
||||
@@ -134,34 +175,50 @@ export default function Bill({
|
||||
<select
|
||||
className="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
|
||||
id="rate"
|
||||
value={rate}
|
||||
onChange={(
|
||||
e: React.ChangeEvent<React.ElementRef<'select'>>
|
||||
) => setRate(Number(e.target.value))}
|
||||
) => setRate(MILAGE_RATES[e.target.value])}
|
||||
>
|
||||
<option value={MILAGE_RATES.INTERN_UP_TO_200}>
|
||||
Intern bis 200 ({MILAGE_RATES.INTERN_UP_TO_200})
|
||||
</option>
|
||||
<option value={MILAGE_RATES.INTERN_200_1000}>
|
||||
Intern 200-1000 ({MILAGE_RATES.INTERN_200_1000})
|
||||
</option>
|
||||
<option value={MILAGE_RATES.INTERN_1001_2000}>
|
||||
Intern 1001-2000 ({MILAGE_RATES.INTERN_1001_2000})
|
||||
</option>
|
||||
<option value={MILAGE_RATES.INTERN_OVER_2000}>
|
||||
Intern ab 2001 ({MILAGE_RATES.INTERN_OVER_2000})
|
||||
</option>
|
||||
<option value={MILAGE_RATES.EXTERN_UP_TO_200}>
|
||||
Extern bis 200 ({MILAGE_RATES.EXTERN_UP_TO_200})
|
||||
</option>
|
||||
<option value={MILAGE_RATES.EXTERN_200_1000}>
|
||||
Extern 200-1000 ({MILAGE_RATES.EXTERN_200_1000})
|
||||
</option>
|
||||
<option value={MILAGE_RATES.EXTERN_1001_2000}>
|
||||
Extern 1001-2000 ({MILAGE_RATES.EXTERN_1001_2000})
|
||||
</option>
|
||||
<option value={MILAGE_RATES.EXTERN_OVER_2000}>
|
||||
Extern ab 2001 ({MILAGE_RATES.EXTERN_OVER_2000})
|
||||
</option>
|
||||
{Object.values(MILAGE_RATES).map((rate) => {
|
||||
return (
|
||||
<option value={rate} key={rate}>
|
||||
{getRateLabel(rate)} ({getMilageRateValue(rate)} EUR)
|
||||
</option>
|
||||
)
|
||||
})}
|
||||
</select>
|
||||
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
|
||||
<svg
|
||||
className="fill-current h-4 w-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="fsw">
|
||||
<div className="fs">
|
||||
<label className="flabel">Status</label>
|
||||
<div className="relative">
|
||||
<select
|
||||
className="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
|
||||
id="rate"
|
||||
value={status}
|
||||
onChange={(
|
||||
e: React.ChangeEvent<React.ElementRef<'select'>>
|
||||
) => setStatus(BILL_STATUS[e.target.value])}
|
||||
>
|
||||
{Object.values(BILL_STATUS).map((status) => {
|
||||
return (
|
||||
<option value={status} key={status}>
|
||||
{getBillStatusLabel(status)}
|
||||
</option>
|
||||
)
|
||||
})}
|
||||
</select>
|
||||
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
|
||||
<svg
|
||||
|
||||
Reference in New Issue
Block a user