46 lines
1.8 KiB
JavaScript
46 lines
1.8 KiB
JavaScript
import React from "react";
|
|
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
|
|
import AlertComponent from "../alert/alert.component";
|
|
import {Timeline} from "antd";
|
|
import {useTranslation} from "react-i18next";
|
|
import {DateTimeFormatter} from "../../utils/DateFormatter";
|
|
|
|
export default function ScheduleExistingAppointmentsList({
|
|
existingAppointments,
|
|
}) {
|
|
const {t} = useTranslation();
|
|
if (existingAppointments.loading) return <LoadingSpinner/>;
|
|
if (existingAppointments.error)
|
|
return (
|
|
<AlertComponent
|
|
message={existingAppointments.error.message}
|
|
type="error"
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
{t("appointments.labels.priorappointments")}
|
|
<Timeline
|
|
items={
|
|
existingAppointments.data
|
|
? existingAppointments.data.appointments.map((item) => ({
|
|
key: item.id,
|
|
color: item.canceled ? "red" : item.arrived ? "green" : "blue",
|
|
children: (
|
|
<>
|
|
{item.canceled
|
|
? t("appointments.labels.cancelledappointment")
|
|
: item.arrived
|
|
? t("appointments.labels.arrivedon")
|
|
: t("appointments.labels.scheduledfor")}
|
|
<DateTimeFormatter>{item.start}</DateTimeFormatter>
|
|
</>
|
|
),
|
|
}))
|
|
: []
|
|
}
|
|
/></div>
|
|
);
|
|
}
|