mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

Working availability Schedule for every timezone (few things TODO) (#1187)

Browse source
This commit is contained in:
Alex van Andel 2021-11-18 03:29:36 +00:00 committed by GitHub
parent ffdf0b9217
commit e0d1b6b5ea
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
components/ui/form/Schedule.tsx
View file

@ -2,7 +2,7 @@ import { PlusIcon, TrashIcon } from "@heroicons/react/outline";
import dayjs, { Dayjs, ConfigType } from "dayjs"; import dayjs, { Dayjs, ConfigType } from "dayjs";
import timezone from "dayjs/plugin/timezone"; import timezone from "dayjs/plugin/timezone";
import utc from "dayjs/plugin/utc"; import utc from "dayjs/plugin/utc";
import React from "react"; import React, { useCallback, useState } from "react";
import { Controller, useFieldArray } from "react-hook-form"; import { Controller, useFieldArray } from "react-hook-form";
import { defaultDayRange } from "@lib/availability"; import { defaultDayRange } from "@lib/availability";
@ -36,17 +36,31 @@ const TIMES = (() => {
})(); })();
/** End Time Increments For Select */ /** End Time Increments For Select */
type Option = {
readonly label: string;
readonly value: number;
};
type TimeRangeFieldProps = { type TimeRangeFieldProps = {
name: string; name: string;
}; };
const TimeRangeField = ({ name }: TimeRangeFieldProps) => { const TimeRangeField = ({ name }: TimeRangeFieldProps) => {
// Lazy-loaded options, otherwise adding a field has a noticable redraw delay.
const [options, setOptions] = useState<Option[]>([]);
// const { i18n } = useLocale();
const getOption = (time: ConfigType) => ({ const getOption = (time: ConfigType) => ({
value: dayjs(time).utc(true).toDate().valueOf(), value: dayjs(time).toDate().valueOf(),
label: dayjs(time).toDate().toLocaleTimeString("nl-NL", { minute: "numeric", hour: "numeric" }), label: dayjs(time).utc().format("HH:mm"),
// .toLocaleTimeString(i18n.language, { minute: "numeric", hour: "numeric" }),
}); });
const timeOptions = TIMES.map((t) => getOption(t)); const timeOptions = useCallback((offsetOrLimit: { offset?: number; limit?: number } = {}) => {
const { limit, offset } = offsetOrLimit;
return TIMES.filter((time) => (!limit || time.isBefore(limit)) && (!offset || time.isAfter(offset))).map(
(t) => getOption(t)
);
}, []);
return ( return (
<> <>
@ -55,10 +69,10 @@ const TimeRangeField = ({ name }: TimeRangeFieldProps) => {
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<Select <Select
className="w-[6rem]" className="w-[6rem]"
options={timeOptions} options={options}
value={timeOptions.filter(function (option) { onFocus={() => setOptions(timeOptions())}
return option.value === getOption(value).value; onBlur={() => setOptions([])}
})} defaultValue={getOption(value)}
onChange={(option) => onChange(new Date(option?.value as number))} onChange={(option) => onChange(new Date(option?.value as number))}
/> />
)} )}
@ -69,10 +83,10 @@ const TimeRangeField = ({ name }: TimeRangeFieldProps) => {
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<Select <Select
className="w-[6rem]" className="w-[6rem]"
options={timeOptions} options={options}
value={timeOptions.filter(function (option) { onFocus={() => setOptions(timeOptions())}
return option.value === getOption(value).value; onBlur={() => setOptions([])}
})} defaultValue={getOption(value)}
onChange={(option) => onChange(new Date(option?.value as number))} onChange={(option) => onChange(new Date(option?.value as number))}
/> />
)} )}

2
pages/[user]/[type].tsx
View file

@ -168,7 +168,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
const workingHours = getWorkingHours( const workingHours = getWorkingHours(
{ {
timeZone: user.timeZone, timeZone: eventType.timeZone || user.timeZone,
}, },
eventType.availability.length ? eventType.availability : user.availability eventType.availability.length ? eventType.availability : user.availability
); );