Skip to content

Commit

Permalink
Update event editing modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@0-ft
0-ft committed May 18, 2022
1 parent acf3075 commit fb52d78
Show file tree
Hide file tree
Showing 2 changed files with 232 additions and 130 deletions.
300 changes: 170 additions & 130 deletions src/components/EditEvent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { DropdownComponent } from "obsidian";
import * as React from "react";
import { useEffect, useRef, useState } from "react";
import {
Expand Down Expand Up @@ -57,26 +56,31 @@ const DAY_MAP = {
const DaySelect = ({
value: days,
onChange,
label: selectLabel,
}: {
value: string[];
onChange: (days: string[]) => void;
label: string;
}) => {
return (
<div>
{Object.entries(DAY_MAP).map(([code, label]) => (
<DayChoice
key={code}
code={code}
label={label}
isSelected={days.includes(code)}
onClick={() =>
days.includes(code)
? onChange(days.filter((c) => c !== code))
: onChange([code, ...days])
}
/>
))}
</div>
<>
<label htmlFor="daysSelect">{selectLabel}</label>
<div id="daysSelect">
{Object.entries(DAY_MAP).map(([code, label]) => (
<DayChoice
key={code}
code={code}
label={label}
isSelected={days.includes(code)}
onClick={() =>
days.includes(code)
? onChange(days.filter((c) => c !== code))
: onChange([code, ...days])
}
/>
))}
</div>
</>
);
};

Expand Down Expand Up @@ -134,6 +138,11 @@ export const EditEvent = ({
[]
);

const onRecurringDaysChanged = (days: string[]) => {
setIsRecurring(days.length > 0);
setDaysOfWeek(days);
};

const [allDay, setAllDay] = useState(initialEvent?.allDay || false);

const [calendarIndex, setCalendarIndex] = useState(defaultCalendarIndex);
Expand Down Expand Up @@ -161,6 +170,7 @@ export const EditEvent = ({
endRecur: endRecur || undefined,
}
: {
type: "single",
date,
endDate,
}),
Expand All @@ -169,30 +179,110 @@ export const EditEvent = ({
);
};

return (
const startTimeInput = (
<>
<div>
<p style={{ float: "right" }}>
{open && <button onClick={open}>Open Note</button>}
</p>
</div>
<label htmlFor="startTime">Start Time</label>
<input
type="time"
id="startTime"
value={startTime}
required
onChange={makeChangeListener(setStartTime, (x) => x)}
/>
</>
);

const endTimeInput = (
<>
<label htmlFor="endTime">End Time</label>
<input
type="time"
id="endTime"
value={endTime}
required
onChange={makeChangeListener(setEndTime, (x) => x)}
/>
</>
);

const startDateInput = (
<>
<label htmlFor="date">Start Date</label>
<input
type="date"
id="date"
value={date}
required={!isRecurring}
onChange={makeChangeListener(setDate, (x) => x)}
/>
</>
);

const endDateInput = (
<>
<label htmlFor="endDate">End Date</label>
<input
type="date"
id="endDate"
value={endDate}
required={!isRecurring}
onChange={makeChangeListener(setEndDate, (x) =>
x == "undefined" ? undefined : x
)}
/>
</>
);

<form onSubmit={handleSubmit}>
<p>
// const startRecurringInput = <>
// <label htmlFor="startDate">Starts Recurring</label>
// <input
// type="date"
// id="startDate"
// value={date}
// onChange={makeChangeListener(setDate, (x) => x)}
// />
// </>

const stopRecurringInput = (
<>
<label htmlFor="startDate">Stop repeating</label>
<input
type="date"
id="endRecurDate"
value={endRecur}
onChange={makeChangeListener(setEndRecur, (x) => x)}
/>
</>
);

return (
<>
<form onSubmit={handleSubmit} className="fc-edit-modal-content">
<div
className="fc-edit-modal-column"
style={{ gridColumn: "span 2" }}
>
<label htmlFor="title">Event title</label>
<input
ref={titleRef}
className="fc-edit-modal-event-title"
type="text"
id="title"
value={title}
placeholder={"Add title"}
required
onChange={makeChangeListener(setTitle, (x) => x)}
/>
</p>
<p>
</div>
<div
className="fc-edit-modal-column"
style={{ gridColumn: "span 2" }}
>
<label htmlFor="calendar">Calendar</label>
<select
id="calendar"
value={calendarIndex}
className={"fc-edit-modal-event-calendar"}
onChange={makeChangeListener(
setCalendarIndex,
parseInt
Expand All @@ -206,121 +296,71 @@ export const EditEvent = ({
</option>
))}
</select>
</p>
<p>
{!isRecurring && (
<input
type="date"
id="date"
value={date}
required={!isRecurring}
onChange={makeChangeListener(setDate, (x) => x)}
/>
)}

{allDay ? (
<></>
) : (
<>
<input
type="time"
id="startTime"
value={startTime}
required
onChange={makeChangeListener(
setStartTime,
(x) => x
)}
/>
-
<input
type="time"
id="endTime"
value={endTime}
required
onChange={makeChangeListener(
setEndTime,
(x) => x
)}
/>
</>
)}
</p>
<p>
</div>
<div className="fc-edit-modal-column">{startDateInput}</div>
<div className="fc-edit-modal-column">
{!isRecurring && endDateInput}
</div>
<div
className="fc-edit-modal-checkbox"
style={{ gridColumn: "span 2" }}
>
<label htmlFor="allDay">All day event </label>
<input
id="allDay"
checked={allDay}
onChange={(e) => setAllDay(e.target.checked)}
type="checkbox"
/>
</p>
<p>
<label htmlFor="recurring">Recurring Event </label>
<input
id="recurring"
checked={isRecurring}
onChange={(e) => setIsRecurring(e.target.checked)}
type="checkbox"
/>
</p>

{isRecurring && (
</div>
{!allDay && (
<>
<DaySelect
value={daysOfWeek}
onChange={setDaysOfWeek}
/>
<p>
Starts recurring
<input
type="date"
id="startDate"
value={date}
onChange={makeChangeListener(setDate, (x) => x)}
/>
and stops recurring
<input
type="date"
id="endDate"
value={endRecur}
onChange={makeChangeListener(
setEndRecur,
(x) => x
)}
/>
</p>
<div className="fc-edit-modal-column">
{startTimeInput}
</div>
<div className="fc-edit-modal-column">
{endTimeInput}
</div>
</>
)}
<div className="fc-edit-modal-column">
<DaySelect
label="Repeat on"
value={daysOfWeek}
onChange={onRecurringDaysChanged}
/>
</div>
{daysOfWeek.length > 0 && (
<div className="fc-edit-modal-column">
{stopRecurringInput}
</div>
)}

<p
style={{
display: "flex",
justifyContent: "space-between",
width: "100%",
}}
>
<button type="submit"> Save Event </button>
<span>
{deleteEvent && (
<button
type="button"
style={{
backgroundColor:
"var(--interactive-normal)",
color: "var(--background-modifier-error)",
borderColor:
"var(--background-modifier-error)",
borderWidth: "1px",
borderStyle: "solid",
}}
onClick={deleteEvent}
>
Delete Event
</button>
)}
</span>
</p>
<div className="fc-edit-modal-buttons">
{deleteEvent && (
<button
type="button"
className="fc-edit-modal-event-delete-button"
onClick={deleteEvent}
>
Delete Event
</button>
)}
<button
className="fc-edit-modal-event-open-button"
onClick={open}
disabled={!open}
>
Open Note
</button>
<button
className="fc-edit-modal-event-save-button"
type="submit"
>
{" "}
Save Event{" "}
</button>
</div>
</form>
</>
);
Expand Down
Loading

0 comments on commit fb52d78

Please sign in to comment.