cal.pub0.org/apps/web/components/availability/ScheduleListItem.tsx

83 lines
3.2 KiB
TypeScript
Raw Normal View History

/**
* @deprecated modifications to this file should be v2 only
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
* Use `/packages/features/schedules/components/ScheduleListItem.tsx` instead
*/
import Link from "next/link";
import { Fragment } from "react";
import { availabilityAsString } from "@calcom/lib/availability";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Availability } from "@calcom/prisma/client";
import { inferQueryOutput } from "@calcom/trpc/react";
import { Button } from "@calcom/ui";
import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
2022-07-27 02:24:00 +00:00
import { Icon } from "@calcom/ui/Icon";
Feature/new onboarding page (#3377) * [WIP] New design and components for onboarding page * saving work in progress * new fonts * [WIP] new onboarding page, initial page, components * WIP calendar connect * WIP availability new design * WIP onboarding page * WIP onboarding, working new availability form * WIP AvailabilitySchedule componente v2 * WIP availability with defaultSchedule * User profile view * Relocate new onboarding/getting-started page components * Steps test for onboarding v2 * Remove logs and unused code * remove any as types * Adding translations * Fixes translation text and css for step 4 * Deprecation note for old-getting-started * Added defaul events and refetch user query when finishing getting-started * Fix button text translation * Undo schedule v1 changes * Fix calendar switches state * Add cookie to save return-to when connecting calendar * Change useTranslation for useLocale instead * Change test to work with data-testid instead of hardcoded plain text due to translation * Fix skeleton containers for calendars * Style fixes * fix styles to match v2 * Fix styles and props types to match v2 design * Bugfix/router and console errors (#4206) * The loading={boolean} parameter is required, so this must be <Button /> * Fixes duplicate key error * Use zod and router.query.step directly to power state machine * use ul>li & divide for borders * Update apps/web/components/getting-started/steps-views/ConnectCalendars.tsx Co-authored-by: alannnc <alannnc@gmail.com> * Linting * Deprecation notices and type fixes * Update CreateEventsOnCalendarSelect.tsx * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com>
2022-09-06 22:58:16 +00:00
/**
* @deprecated modifications to this file should be v2 only
* Use `/packages/features/schedules/components/ScheduleListItem.tsx` instead
*/
export function ScheduleListItem({
schedule,
deleteFunction,
isDeleting = false,
}: {
schedule: inferQueryOutput<"viewer.availability.list">["schedules"][number];
2022-05-17 20:43:27 +00:00
deleteFunction: ({ scheduleId }: { scheduleId: number }) => void;
isDeleting: boolean;
}) {
const { t, i18n } = useLocale();
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">
<div className="group flex w-full items-center justify-between hover:bg-neutral-50 sm:px-6">
<Link href={"/availability/" + schedule.id}>
<a className="flex-grow truncate text-sm" title={schedule.name}>
<div>
<span className="truncate font-medium text-neutral-900">{schedule.name}</span>
{schedule.isDefault && (
<span className="ml-2 inline items-center rounded-sm bg-yellow-100 px-1.5 py-0.5 text-xs font-medium text-yellow-800">
{t("default")}
</span>
)}
</div>
<p className="mt-1 text-xs text-neutral-500">
{schedule.availability.map((availability: Availability) => (
<Fragment key={availability.id}>
{availabilityAsString(availability, { locale: i18n.language })}
<br />
</Fragment>
))}
</p>
</a>
</Link>
</div>
<Dropdown>
<DropdownMenuTrigger className="group mr-5 h-10 w-10 border border-transparent p-0 text-neutral-500 hover:border-gray-200">
<Icon.FiMoreHorizontal className="h-5 w-5 group-hover:text-gray-800" />
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<Button
disabled={isDeleting}
onClick={() => {
deleteFunction({
scheduleId: schedule.id,
});
}}
type="button"
color="warn"
className="w-full font-normal"
StartIcon={isDeleting ? undefined : Icon.FiTrash}
loading={isDeleting}>
{isDeleting ? t("deleting") : t("delete_schedule")}
</Button>
</DropdownMenuItem>
</DropdownMenuContent>
</Dropdown>
</div>
</li>
);
}