54 lines
2.2 KiB
TypeScript
54 lines
2.2 KiB
TypeScript
|
import { Credential } from "@prisma/client";
|
||
|
|
import { Bits, Blocks, Elements, Modal, setIfTruthy } from "slack-block-builder";
|
||
|
|
|
||
|
|
const CreateEventModal = (
|
||
|
|
data:
|
||
|
|
| (Credential & {
|
||
|
|
user: {
|
||
|
|
username: string | null;
|
||
|
|
eventTypes: {
|
||
|
|
id: number;
|
||
|
|
title: string;
|
||
|
|
}[];
|
||
|
|
} | null;
|
||
|
|
})
|
||
|
|
| null,
|
||
|
|
invalidInput: boolean = false
|
||
|
|
) => {
|
||
|
|
return Modal({ title: "Create Booking", submit: "Create", callbackId: "cal.event.create" })
|
||
|
|
.blocks(
|
||
|
|
Blocks.Section({ text: `Hey there, *${data?.user?.username}!*` }),
|
||
|
|
Blocks.Divider(),
|
||
|
|
Blocks.Input({ label: "Your Name", blockId: "eventName" }).element(
|
||
|
|
Elements.TextInput({ placeholder: "Event Name" }).actionId("event_name")
|
||
|
|
),
|
||
|
|
Blocks.Input({ label: "Which event would you like to create?", blockId: "eventType" }).element(
|
||
|
|
Elements.StaticSelect({ placeholder: "Which event would you like to create?" })
|
||
|
|
.actionId("create.event.type")
|
||
|
|
.options(
|
||
|
|
data?.user?.eventTypes.map((item: any) =>
|
||
|
|
Bits.Option({ text: item.title ?? "No Name", value: item.id.toString() })
|
||
|
|
)
|
||
|
|
)
|
||
|
|
), // This doesnt need to reach out to the server when the user changes the selection
|
||
|
|
Blocks.Input({
|
||
|
|
label: "Who would you like to invite to your event?",
|
||
|
|
blockId: "selectedUsers",
|
||
|
|
}).element(
|
||
|
|
Elements.UserMultiSelect({ placeholder: "Who would you like to invite to your event?" }).actionId(
|
||
|
|
"invite_users"
|
||
|
|
)
|
||
|
|
),
|
||
|
|
Blocks.Input({ label: "When would this event be?", blockId: "eventDate" }).element(
|
||
|
|
Elements.DatePicker({ placeholder: "Select Date" }).actionId("event_date")
|
||
|
|
),
|
||
|
|
Blocks.Input({ label: "What time would you like to start?", blockId: "eventTime" }).element(
|
||
|
|
Elements.TimePicker({ placeholder: "Select Time" }).actionId("event_start_time")
|
||
|
|
), // TODO: We could in future validate if the time is in the future or if busy at point - Didnt see much point as this gets validated when you submit. Could be better UX
|
||
|
|
setIfTruthy(invalidInput, [Blocks.Section({ text: "Please fill in all the fields" })])
|
||
|
|
)
|
||
|
|
.buildToObject();
|
||
|
|
};
|
||
|
|
|
||
|
|
export default CreateEventModal;
|