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

Heavily simplified the startTime and endTime display by removing dayjs from SetTimesModal

Browse source
This commit is contained in:
Alex van Andel 2021-06-29 22:00:25 +00:00
parent 575747bcd3
commit 5d30586a24
3 changed files with 28 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
components/ui/Scheduler.tsx
View file

@ -50,13 +50,16 @@ export const Scheduler = ({
const addNewSchedule = () => setEditSchedule(openingHours.length);
const applyEditSchedule = (changed) => {
// new entry
if (!changed.days) {
changed.days = [1, 2, 3, 4, 5]; // Mon - Fri
setOpeningHours(openingHours.concat(changed));
} else {
// update
const replaceWith = { ...openingHours[editSchedule], ...changed };
openingHours.splice(editSchedule, 1, replaceWith);
setOpeningHours([].concat(openingHours));
}
const replaceWith = { ...openingHours[editSchedule], ...changed };
openingHours.splice(editSchedule, 1, replaceWith);
setOpeningHours([].concat(openingHours));
};
const removeScheduleAt = (toRemove: number) => {
@ -69,9 +72,15 @@ export const Scheduler = ({
<div className="inline-flex ml-2">
<WeekdaySelect defaultValue={item.days} onSelect={(selected: number[]) => (item.days = selected)} />
<button className="ml-2 text-sm px-2" type="button" onClick={() => setEditSchedule(idx)}>
{dayjs(item.startDate).format(item.startDate.minute() === 0 ? "ha" : "h:mma")}
{dayjs()
.startOf("day")
.add(item.startTime, "minutes")
.format(item.startTime % 60 === 0 ? "ha" : "h:mma")}
&nbsp;until&nbsp;
{dayjs(item.endDate).format(item.endDate.minute() === 0 ? "ha" : "h:mma")}
{dayjs()
.startOf("day")
.add(item.endTime, "minutes")
.format(item.endTime % 60 === 0 ? "ha" : "h:mma")}
</button>
</div>
<button
@ -122,8 +131,9 @@ export const Scheduler = ({
</div>
{editSchedule >= 0 && (
<SetTimesModal
schedule={{ ...openingHours[editSchedule], timeZone: selectedTimeZone }}
onChange={applyEditSchedule}
startTime={openingHours[editSchedule] ? openingHours[editSchedule].startTime : 540}
endTime={openingHours[editSchedule] ? openingHours[editSchedule].endTime : 1020}
onChange={(times) => applyEditSchedule({ ...(openingHours[editSchedule] || {}), ...times })}
onExit={() => setEditSchedule(-1)}
/>
)}

32
components/ui/modal/SetTimesModal.tsx
View file

@ -1,25 +1,9 @@
import { ClockIcon } from "@heroicons/react/outline";
import { useRef } from "react";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/utc";
dayjs.extend(utc);
dayjs.extend(timezone);
export default function SetTimesModal(props) {
const { startDate, endDate } = {
startDate: dayjs
.utc()
.startOf("day")
.add(props.schedule.startTime || 540, "minutes"),
endDate: dayjs
.utc()
.startOf("day")
.add(props.schedule.endTime || 1020, "minutes"),
};
startDate.tz(props.timeZone);
endDate.tz(props.timeZone);
const [startHours, startMinutes] = [Math.floor(props.startTime / 60), props.startTime % 60];
const [endHours, endMinutes] = [Math.floor(props.endTime / 60), props.endTime % 60];
const startHoursRef = useRef<HTMLInputElement>();
const startMinsRef = useRef<HTMLInputElement>();
@ -35,8 +19,8 @@ export default function SetTimesModal(props) {
const enteredEndMins = parseInt(endMinsRef.current.value);
props.onChange({
startDate: startDate.minute(enteredStartMins).hour(enteredStartHours),
endDate: endDate.minute(enteredEndMins).hour(enteredEndHours),
startTime: enteredStartHours * 60 + enteredStartMins,
endTime: enteredEndHours * 60 + enteredEndMins,
});
props.onExit(0);
@ -85,7 +69,7 @@ export default function SetTimesModal(props) {
id="startHours"
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
placeholder="9"
defaultValue={startDate.format("H")}
defaultValue={startHours}
/>
</div>
<span className="mx-2 pt-1">:</span>
@ -104,7 +88,7 @@ export default function SetTimesModal(props) {
id="startMinutes"
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
placeholder="30"
defaultValue={startDate.format("m")}
defaultValue={startMinutes}
/>
</div>
</div>
@ -124,7 +108,7 @@ export default function SetTimesModal(props) {
id="endHours"
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
placeholder="17"
defaultValue={endDate.format("H")}
defaultValue={endHours}
/>
</div>
<span className="mx-2 pt-1">:</span>
@ -143,7 +127,7 @@ export default function SetTimesModal(props) {
id="endMinutes"
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
placeholder="30"
defaultValue={endDate.format("m")}
defaultValue={endMinutes}
/>
</div>
</div>

13
pages/availability/event/[type].tsx
View file

@ -118,16 +118,7 @@ export default function EventTypePage({
};
if (enteredAvailability) {
payload.availability = {
dateOverrides: [],
openingHours: enteredAvailability.openingHours.map((item): OpeningHours => {
item.startTime = item.startDate.hour() * 60 + item.startDate.minute();
delete item.startDate;
item.endTime = item.endDate.hour() * 60 + item.endDate.minute();
delete item.endDate;
return item;
}),
};
payload.availability = enteredAvailability;
}
await fetch("/api/availability/eventtype", {
@ -855,7 +846,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async ({ req, query
{
days: [0, 1, 2, 3, 4, 5, 6],
startTime: user.startTime,
length: user.endTime >= 1440 ? 1439 : user.endTime,
endTime: user.endTime,
},
];