/availability - Add ability to set as default in the dropdown (#5717)
Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev> Co-authored-by: gitstart <gitstart@users.noreply.github.com> Co-authored-by: Matheus Benini Ferreira <88898100+MatheusBeniniF@users.noreply.github.com> Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com> Co-authored-by: niteshsingh1357 <niteshsingh1357@gmail.com> Co-authored-by: gitstart-app[bot] <57568882+gitstart-app[bot]@users.noreply.github.com> Co-authored-by: gitstart <gitstart@gitstart.com> Co-authored-by: gGh00sTt <coolmagnas@gmail.com> Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com> Co-authored-by: Matheus Muniz <87545749+matheusmuniz03@users.noreply.github.com> Co-authored-by: gitstart <gitstart@users.noreply.github.com> Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev> Co-authored-by: Matheus Benini Ferreira <88898100+MatheusBeniniF@users.noreply.github.com> Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com> Co-authored-by: niteshsingh1357 <niteshsingh1357@gmail.com> Co-authored-by: gitstart-app[bot] <57568882+gitstart-app[bot]@users.noreply.github.com> Co-authored-by: gitstart <gitstart@gitstart.com> Co-authored-by: gGh00sTt <coolmagnas@gmail.com> Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com> Co-authored-by: Matheus Muniz <87545749+matheusmuniz03@users.noreply.github.com> Co-authored-by: Omar López <zomars@me.com>pull/5919/head
parent
6b26e9a7de
commit
2f36985462
|
@ -45,6 +45,24 @@ export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availab
|
|||
},
|
||||
});
|
||||
|
||||
const updateMutation = trpc.viewer.availability.schedule.update.useMutation({
|
||||
onSuccess: async ({ schedule }) => {
|
||||
await utils.viewer.availability.list.invalidate();
|
||||
showToast(
|
||||
t("availability_updated_successfully", {
|
||||
scheduleName: schedule.name,
|
||||
}),
|
||||
"success"
|
||||
);
|
||||
},
|
||||
onError: (err) => {
|
||||
if (err instanceof HttpError) {
|
||||
const message = `${err.statusCode}: ${err.message}`;
|
||||
showToast(message, "error");
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// Adds smooth delete button - item fades and old item slides into place
|
||||
|
||||
const [animationParentRef] = useAutoAnimate<HTMLUListElement>();
|
||||
|
@ -71,6 +89,7 @@ export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availab
|
|||
}}
|
||||
key={schedule.id}
|
||||
schedule={schedule}
|
||||
updateDefault={updateMutation.mutate}
|
||||
deleteFunction={deleteMutation.mutate}
|
||||
/>
|
||||
))}
|
||||
|
|
|
@ -1408,5 +1408,6 @@
|
|||
"enter_option": "Enter Option {{index}}",
|
||||
"add_an_option": "Add an option",
|
||||
"radio": "Radio",
|
||||
"kbar_search_placeholder" : "Start typing to search"
|
||||
"kbar_search_placeholder" : "Start typing to search",
|
||||
"set_as_default": "Set as default"
|
||||
}
|
||||
|
|
|
@ -2,9 +2,12 @@ import Link from "next/link";
|
|||
import { Fragment } from "react";
|
||||
|
||||
import { availabilityAsString } from "@calcom/lib/availability";
|
||||
import classNames from "@calcom/lib/classNames";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { Availability } from "@calcom/prisma/client";
|
||||
import { RouterOutputs } from "@calcom/trpc/react";
|
||||
import { trpc } from "@calcom/trpc/react";
|
||||
import { Schedule } from "@calcom/types/schedule";
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
|
@ -19,6 +22,7 @@ export function ScheduleListItem({
|
|||
schedule,
|
||||
deleteFunction,
|
||||
displayOptions,
|
||||
updateDefault,
|
||||
}: {
|
||||
schedule: RouterOutputs["viewer"]["availability"]["list"]["schedules"][number];
|
||||
deleteFunction: ({ scheduleId }: { scheduleId: number }) => void;
|
||||
|
@ -26,9 +30,20 @@ export function ScheduleListItem({
|
|||
timeZone?: string;
|
||||
hour12?: boolean;
|
||||
};
|
||||
updateDefault: ({
|
||||
scheduleId,
|
||||
isDefault,
|
||||
schedule,
|
||||
}: {
|
||||
scheduleId: number;
|
||||
isDefault: boolean;
|
||||
schedule: Schedule;
|
||||
}) => void;
|
||||
}) {
|
||||
const { t, i18n } = useLocale();
|
||||
|
||||
const { data, isLoading } = trpc.viewer.availability.schedule.get.useQuery({ scheduleId: schedule.id });
|
||||
|
||||
return (
|
||||
<li key={schedule.id}>
|
||||
<div className="flex items-center justify-between py-5 hover:bg-neutral-50 ltr:pl-4 rtl:pr-4 sm:ltr:pl-0 sm:rtl:pr-0">
|
||||
|
@ -67,22 +82,44 @@ export function ScheduleListItem({
|
|||
<DropdownMenuTrigger asChild className="mr-5">
|
||||
<Button type="button" size="icon" color="secondary" StartIcon={Icon.FiMoreHorizontal} />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>
|
||||
<Button
|
||||
onClick={() => {
|
||||
deleteFunction({
|
||||
scheduleId: schedule.id,
|
||||
});
|
||||
}}
|
||||
type="button"
|
||||
color="destructive"
|
||||
className="w-full font-normal"
|
||||
StartIcon={Icon.FiTrash}>
|
||||
{t("delete_schedule")}
|
||||
</Button>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
{!isLoading && data && (
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem className="min-w-40 focus:ring-gray-100">
|
||||
{!schedule.isDefault && (
|
||||
<Button
|
||||
type="button"
|
||||
color="minimal"
|
||||
className="w-full rounded-b-none border-none font-normal"
|
||||
disabled={schedule.isDefault}
|
||||
onClick={() => {
|
||||
updateDefault({
|
||||
scheduleId: schedule.id,
|
||||
isDefault: true,
|
||||
schedule: data.availability,
|
||||
});
|
||||
}}>
|
||||
{t("set_as_default")}
|
||||
</Button>
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="min-w-40 focus:ring-gray-100">
|
||||
<Button
|
||||
onClick={() => {
|
||||
deleteFunction({
|
||||
scheduleId: schedule.id,
|
||||
});
|
||||
}}
|
||||
type="button"
|
||||
color="destructive"
|
||||
className={classNames(
|
||||
"w-full border-none font-normal",
|
||||
!schedule.isDefault && "rounded-t-none"
|
||||
)}>
|
||||
{t("delete")}
|
||||
</Button>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
)}
|
||||
</Dropdown>
|
||||
</div>
|
||||
</li>
|
||||
|
|
Loading…
Reference in New Issue