/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
GitStart 2022-12-08 03:35:55 +08:00 committed by GitHub
parent 6b26e9a7de
commit 2f36985462
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 74 additions and 17 deletions

View File

@ -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}
/>
))}

View File

@ -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"
}

View File

@ -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>