code separation and fix typings
parent
2e8398a255
commit
0d4f36c00f
|
@ -6,7 +6,7 @@ import { Clock } from "@calcom/ui/components/icon";
|
||||||
import { EmptyScreen } from "./EmptyScreen";
|
import { EmptyScreen } from "./EmptyScreen";
|
||||||
import { Availability } from "./ScheduleListItem";
|
import { Availability } from "./ScheduleListItem";
|
||||||
|
|
||||||
type Schedule = {
|
export type Schedule = {
|
||||||
isDefault: boolean;
|
isDefault: boolean;
|
||||||
id: number;
|
id: number;
|
||||||
name: string;
|
name: string;
|
||||||
|
@ -14,13 +14,13 @@ type Schedule = {
|
||||||
id: number;
|
id: number;
|
||||||
startTime: Date;
|
startTime: Date;
|
||||||
endTime: Date;
|
endTime: Date;
|
||||||
userId: number | null;
|
userId?: number;
|
||||||
eventTypeId: number | null;
|
eventTypeId?: number;
|
||||||
date: Date | null;
|
date?: Date;
|
||||||
days: number[];
|
days: number[];
|
||||||
scheduleId: number | null;
|
scheduleId?: number;
|
||||||
}[];
|
}[];
|
||||||
timezone: string | null;
|
timezone?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export function AvailabilityList({
|
export function AvailabilityList({
|
||||||
|
@ -39,34 +39,34 @@ export function AvailabilityList({
|
||||||
duplicateMutation: ({ scheduleId }: { scheduleId: number }) => void;
|
duplicateMutation: ({ scheduleId }: { scheduleId: number }) => void;
|
||||||
deleteMutation: ({ scheduleId }: { scheduleId: number }) => void;
|
deleteMutation: ({ scheduleId }: { scheduleId: number }) => void;
|
||||||
}) {
|
}) {
|
||||||
|
if (schedules.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<EmptyScreen
|
||||||
|
Icon={Clock}
|
||||||
|
headline="Create an availability schedule"
|
||||||
|
subtitle="Creating availability schedules allows you to manage availability across event types. They can be applied to one or more event types."
|
||||||
|
className="w-full"
|
||||||
|
buttonRaw={<NewScheduleButton createMutation={onCreateMutation} />}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="border-subtle bg-default mb-16 overflow-hidden rounded-md border">
|
||||||
{schedules.length === 0 ? (
|
<ul className="divide-subtle divide-y" data-testid="schedules">
|
||||||
<div className="flex justify-center">
|
{schedules.map((schedule) => (
|
||||||
<EmptyScreen
|
<Availability
|
||||||
Icon={Clock}
|
key={schedule.id}
|
||||||
headline="Create an availability schedule"
|
schedule={schedule}
|
||||||
subtitle="Creating availability schedules allows you to manage availability across event types. They can be applied to one or more event types."
|
isDeletable={schedules.length !== 1}
|
||||||
className="w-full"
|
updateDefault={updateMutation}
|
||||||
buttonRaw={<NewScheduleButton createMutation={onCreateMutation} />}
|
deleteFunction={deleteMutation}
|
||||||
|
duplicateFunction={duplicateMutation}
|
||||||
/>
|
/>
|
||||||
</div>
|
))}
|
||||||
) : (
|
</ul>
|
||||||
<div className="border-subtle bg-default mb-16 overflow-hidden rounded-md border">
|
</div>
|
||||||
<ul className="divide-subtle divide-y" data-testid="schedules">
|
|
||||||
{schedules.map((schedule) => (
|
|
||||||
<Availability
|
|
||||||
key={schedule.id}
|
|
||||||
schedule={schedule}
|
|
||||||
isDeletable={schedules.length !== 1}
|
|
||||||
updateDefault={updateMutation}
|
|
||||||
deleteFunction={deleteMutation}
|
|
||||||
duplicateFunction={duplicateMutation}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue