39 lines
1.4 KiB
JavaScript
39 lines
1.4 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>
|
|
);
|
|
}
|