commonscomputer/cal.diy
4
0
Fork 0
Code Issues Pull Requests Actions 2.2k Packages Projects Releases Wiki Activity

Added timeZone to v2, bugfix availabilityAsString (#4210)

Browse Source 
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
This commit is contained in:
Alex van Andel
2022-09-06 12:34:29 -06:00
committed by GitHub
co-authored by Peer Richelsen
parent 3a35eb413f
commit dd9d7ab485
8 changed files with 63 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/components/availability/ScheduleListItem.tsx
+5 -1
View File
@@ -1,3 +1,7 @@
/**
* @deprecated modifications to this file should be v2 only
* Use `/packages/ui/modules/availability/ScheduleListItem.tsx` instead
*/
import Link from "next/link";
import { Fragment } from "react";
@@ -37,7 +41,7 @@ export function ScheduleListItem({
<p className="mt-1 text-xs text-neutral-500">
{schedule.availability.map((availability: Availability) => (
<Fragment key={availability.id}>
{availabilityAsString(availability, i18n.language)}
{availabilityAsString(availability, { locale: i18n.language })}
<br />
</Fragment>
))}
apps/web/pages/availability/[schedule].tsx
+5 -1
View File
@@ -1,3 +1,7 @@
/**
* @deprecated modifications to this file should be v2 only
* Use `/apps/web/pages/v2/availability/[schedule].tsx` instead
*/
import { GetStaticPaths, GetStaticProps } from "next";
import { useRouter } from "next/router";
import { useState } from "react";
@@ -147,7 +151,7 @@ export default function Availability() {
heading={<EditableHeading title={name || data.schedule.name} onChange={setName} />}
subtitle={data.schedule.availability.map((availability) => (
<span key={availability.id}>
{availabilityAsString(availability, i18n.language)}
{availabilityAsString(availability, { locale: i18n.language })}
<br />
</span>
))}>
apps/web/pages/availability/index.tsx
+4
View File
@@ -1,3 +1,7 @@
/**
* @deprecated modifications to this file should be v2 only
* Use `/apps/web/pages/v2/availability/index.tsx` instead
*/
import { useLocale } from "@calcom/lib/hooks/useLocale";
import showToast from "@calcom/lib/notification";
import { inferQueryOutput, trpc } from "@calcom/trpc/react";
apps/web/pages/v2/availability/[schedule].tsx
+1 -1
View File
@@ -152,7 +152,7 @@ export default function Availability() {
heading={<EditableHeading title={name || data.schedule.name} onChange={setName} />}
subtitle={data.schedule.availability.map((availability) => (
<span key={availability.id}>
{availabilityAsString(availability, i18n.language)}
{availabilityAsString(availability, { locale: i18n.language })}
<br />
</span>
))}>
apps/web/pages/v2/availability/index.tsx
+8 -1
View File
@@ -3,16 +3,19 @@ import { inferQueryOutput, trpc } from "@calcom/trpc/react";
import { Icon } from "@calcom/ui/Icon";
import Shell from "@calcom/ui/Shell";
import { NewScheduleButton, EmptyScreen, showToast } from "@calcom/ui/v2";
import { ScheduleListItem } from "@calcom/ui/v2/modules/availability/ScheduleListItem";
import { withQuery } from "@lib/QueryCell";
import { HttpError } from "@lib/core/http/error";
import { ScheduleListItem } from "@components/availability/ScheduleListItem";
import SkeletonLoader from "@components/availability/SkeletonLoader";
export function AvailabilityList({ schedules }: inferQueryOutput<"viewer.availability.list">) {
const { t } = useLocale();
const utils = trpc.useContext();
const meQuery = trpc.useQuery(["viewer.me"]);
const deleteMutation = trpc.useMutation("viewer.availability.schedule.delete", {
onSuccess: async () => {
await utils.invalidateQueries(["viewer.availability.list"]);
@@ -41,6 +44,10 @@ export function AvailabilityList({ schedules }: inferQueryOutput<"viewer.availab
<ul className="divide-y divide-neutral-200" data-testid="schedules">
{schedules.map((schedule) => (
<ScheduleListItem
displayOptions={{
hour12: meQuery.data?.timeFormat ? meQuery.data.timeFormat === 12 : undefined,
timeZone: meQuery.data?.timeZone,
}}
key={schedule.id}
schedule={schedule}
deleteFunction={deleteMutation.mutate}
packages/lib/availability.ts
+6 -3
View File
@@ -120,7 +120,10 @@ export function getWorkingHours(
return workingHours;
}
export function availabilityAsString(availability: Availability, locale: string) {
export function availabilityAsString(
availability: Availability,
{ locale, hour12 }: { locale?: string; hour12?: boolean }
) {
const weekSpan = (availability: Availability) => {
const days = availability.days.slice(1).reduce(
(days, day) => {
@@ -145,11 +148,11 @@ export function availabilityAsString(availability: Availability, locale: string)
const timeSpan = (availability: Availability) => {
return (
new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "numeric" }).format(
new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "numeric", hour12 }).format(
new Date(availability.startTime.toISOString().slice(0, -1))
) +
" - " +
new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "numeric" }).format(
new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "numeric", hour12 }).format(
new Date(availability.endTime.toISOString().slice(0, -1))
)
);
packages/lib/weekday.ts
+5 -1
View File
@@ -3,6 +3,10 @@ export function weekdayNames(locale: string | string[], weekStart = 0, type: "sh
return Array.from(Array(7).keys()).map((d) => nameOfDay(locale, d + weekStart, type));
}
export function nameOfDay(locale: string | string[], day: number, type: "short" | "long" = "long") {
export function nameOfDay(
locale: string | string[] | undefined,
day: number,
type: "short" | "long" = "long"
) {
return new Intl.DateTimeFormat(locale, { weekday: type }).format(new Date(1970, 0, day + 4));
}
packages/ui/v2/modules/availability/ScheduleListItem.tsx
+29 -18
View File
@@ -5,23 +5,24 @@ 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 { Icon } from "@calcom/ui";
import { Button } from "@calcom/ui";
import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
import { Icon } from "@calcom/ui/Icon";
import Badge from "@calcom/ui/v2/core/Badge";
import Button from "@calcom/ui/v2/core/Button";
import Dropdown, {
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@calcom/ui/v2/core/Dropdown";
export function ScheduleListItem({
schedule,
deleteFunction,
isDeleting = false,
displayOptions,
}: {
schedule: inferQueryOutput<"viewer.availability.list">["schedules"][number];
deleteFunction: ({ scheduleId }: { scheduleId: number }) => void;
isDeleting: boolean;
displayOptions?: {
timeZone?: string;
hour12?: boolean;
};
}) {
const { t, i18n } = useLocale();
@@ -31,27 +32,37 @@ export function ScheduleListItem({
<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 pr-2 font-semibold text-gray-900">{schedule.name}</span>
{schedule.isDefault && <Badge variant="green">{t("default")}</Badge>}
<div className="space-x-2">
<span className="truncate font-medium text-neutral-900">{schedule.name}</span>
{schedule.isDefault && (
<Badge variant="success" className="text-xs">
{t("default")}
</Badge>
)}
</div>
<p className="mt-1 hidden text-base leading-4 text-gray-600 lg:block">
<p className="mt-1 text-xs text-neutral-500">
{schedule.availability.map((availability: Availability) => (
<Fragment key={availability.id}>
{availabilityAsString(availability, i18n.language)}
{availabilityAsString(availability, {
locale: i18n.language,
hour12: displayOptions?.hour12,
})}
<br />
</Fragment>
))}
{schedule.timeZone && schedule.timeZone !== displayOptions?.timeZone && (
<p className="my-1 flex items-center first-letter:text-xs">
<Icon.FiGlobe />
&nbsp;{schedule.timeZone}
</p>
)}
</p>
</a>
</Link>
</div>
<Button color="secondary" href={"/availability/" + schedule.id}>
Edit
</Button>
<Dropdown>
<DropdownMenuTrigger className="focus:bg-transparent focus:ring-0">
<Button color="secondary" size="icon" StartIcon={Icon.FiMoreHorizontal} />
<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>
@@ -63,7 +74,7 @@ export function ScheduleListItem({
});
}}
type="button"
color="destructive"
color="warn"
className="w-full font-normal"
StartIcon={isDeleting ? undefined : Icon.FiTrash}
loading={isDeleting}>