Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { useEffect, useState } from "react";
- import { useForm } from "react-hook-form";
- import { zodResolver } from "@hookform/resolvers/zod";
- import * as z from "zod";
- import Page from "../../../components/Page";
- import DayPicker from "../../../components/DayPicker";
- import { useMutation, useQuery } from "@apollo/client";
- import {
- EVENT_MUTATION,
- DELETE_EVENT_MUTATION,
- MODIFY_EVENT_MUTATION,
- } from "../../../gql/eventMutation";
- import Upload from "../../../components/upload/UploadAntDesign";
- import { useToasts } from "react-toast-notifications";
- import SelectField from "../../../components/SelectField";
- import Modal from "../../../components/Modal";
- import { TAG_QUERY, TagName } from "../../../gql/tagsQuery";
- import { Dialog, Transition } from "@headlessui/react";
- import { UserI } from "../../../types";
- import { getUser } from "../../../utils/getUser";
- import { UseQueryResult, useQuery as reactUseQuery } from "react-query";
- import {
- ALLINITIATIVES_QUERY,
- InitiativeData,
- } from "../../../gql/allInitiativesQuery";
- import { IMAGE_MUTATION } from "../../../gql/imageMutation";
- import StaffDropdown from "../../../components/StaffDropdown";
- import "./styles.css";
- import TimePicker from "../../../components/TimePicker";
- import Button from "../../../components/Button";
- import Breadcrumb from "../../../components/Breadcrumb";
- import { EVENTS_QUERY, EventsData } from "../../../gql/eventsQuery";
- import { HiOutlineExclamation, HiX } from "react-icons/hi";
- const initialFormValues = {
- action: "",
- title: "",
- description: "",
- eventdate: null,
- eventtime: "",
- location: "",
- initiative: "",
- staffPresenter: [],
- guestPresenter: "",
- tags: [],
- };
- export interface selectedStaffI {
- id: number;
- name: string;
- }
- // const urlSchema = z.string().url({ message: "Please enter a valid URL" }).optional();
- // const validateUrl = async (url: any) => {
- // try {
- // await urlSchema.parse(url);
- // return true;
- // } catch (error) {
- // return false;
- // }
- // };
- export default function UpdateEventForm() {
- const [selectedDepartment, setSelectedDepartment] = useState("");
- const [filenames, setFileNames] = useState<string[]>([]);
- const [action, setAction] = useState("");
- const [isActionSelected, setIsActionSelected] = useState(false);
- const [staffPresenters, setStaffPresenters] = useState<selectedStaffI[]>([]);
- const [time, setTime] = useState("12:00");
- const user: UseQueryResult<UserI, any> = reactUseQuery("user", getUser);
- const { addToast } = useToasts();
- const [isModalOpen, setIsModalOpen] = useState(false);
- const [isRemoveModalOpen, setIsRemoveModalOpen] = useState(false);
- const openModal = () => {
- setIsModalOpen(true);
- };
- const closeModal = () => {
- setIsModalOpen(false);
- };
- const openRemoveModal = () => {
- setIsRemoveModalOpen(true);
- };
- const closeRemoveModal = () => {
- setIsRemoveModalOpen(false);
- };
- const handlePurposeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
- setAction(event.target.value);
- setIsActionSelected(event.target.value !== "Select an Action");
- };
- const { data: pastEvents } = useQuery<EventsData>(EVENTS_QUERY, {
- variables: { pastEvents: true, futureEvents: null },
- });
- const { data: allEvents } = useQuery<EventsData>(EVENTS_QUERY, {
- variables: { pastEvents: null, futureEvents: null },
- });
- const [eventSelected, setEventSelected] = useState(false);
- const [selectedEvent, setSelectedEvent] = useState("");
- const [pastEventSelected, setPastEventSelected] = useState(false);
- const [selectedPastEvent, setSelectedPastEvent] = useState(-1);
- const handleEventChange = (event: any) => {
- setEventSelected(true);
- setSelectedEvent(event.target.value);
- };
- const eventToRemove = allEvents?.allEvents.find(
- (Event) => Event.title === selectedEvent
- );
- const eventToModify = allEvents?.allEvents.find(
- (Event) => Event.id === selectedPastEvent
- );
- const isValidUrl = (url: string) => {
- return !url || /^https?:\/\/.*/i.test(url);
- };
- const [validationErrors, setValidationErrors] = useState({ slides: '', videoUrl: '' });
- const handleSlideChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
- setSlides(event.target.value);
- if (!isValidUrl(event.target.value)) {
- setValidationErrors(prev => ({ ...prev, slides: 'Please enter a valid URL for slides' }));
- } else {
- setValidationErrors(prev => ({ ...prev, slides: '' }));
- }
- };
- const handleVideoUrlChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
- setVideoUrl(event.target.value);
- if (!isValidUrl(event.target.value)) {
- setValidationErrors(prev => ({ ...prev, videoUrl: 'Please enter a valid URL for video' }));
- } else {
- setValidationErrors(prev => ({ ...prev, videoUrl: '' }));
- }
- };
- const urlValidation = (url: string) => /^https?:\/\/.*/i.test(url);
- const [slides, setSlides] = useState(eventToModify?.slides || "");
- const [videoUrl, setVideoUrl] = useState(eventToModify?.videoUrl || "");
- // const handleSlideChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
- // setSlides(event.target.value);
- // };
- // const handleVideoUrlChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
- // setVideoUrl(event.target.value);
- // };
- const [eventDate, setEventDate] = useState("");
- const originalDateString = eventToRemove?.date;
- useEffect(() => {
- if (originalDateString) {
- const date = new Date(originalDateString);
- const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
- const months = [
- "Jan",
- "Feb",
- "Mar",
- "Apr",
- "May",
- "Jun",
- "Jul",
- "Aug",
- "Sep",
- "Oct",
- "Nov",
- "Dec",
- ];
- let hours = date.getUTCHours();
- const amOrPm = hours >= 12 ? "PM" : "AM";
- hours = hours % 12 || 12;
- const formattedDate = `${
- weekdays[date.getUTCDay()]
- }, ${date.getUTCDate()} ${months[date.getUTCMonth()]} ${date
- .getUTCFullYear()
- .toString()
- .slice(-2)} at ${hours}:${date
- .getUTCMinutes()
- .toString()
- .padStart(2, "0")} ${amOrPm}`;
- setEventDate(formattedDate);
- } else {
- console.log("Date is undefined.");
- }
- }, [originalDateString]);
- const getZodSchema = (action: string) => {
- switch (action) {
- case "Add an Event":
- return z.object({
- action: z
- .string()
- .nonempty("Select an action from the dropdown")
- .refine((value) => value !== "", {
- message: "Select an action from the dropdown",
- }),
- title: z.string().nonempty("Please enter an event name"),
- description: z.string().nonempty("Please enter an event description"),
- eventdate: z
- .date()
- .nullable()
- .refine((date: Date | null) => date !== null, {
- message: "Select an event date",
- }),
- location: z.string().nonempty("Please enter location of event"),
- initiative: z.string().nonempty("An initiative must be selected"),
- staffPresenter: z.array(z.number()),
- guestPresenter: z.string(),
- tags: z.string().array(),
- });
- case "Update Past Event":
- return z.object({
- action: z.string(),
- slides: z.string().refine(urlValidation, { message: "Please enter a valid URL for slides" }).optional(),
- videoUrl: z.string().refine(urlValidation, { message: "Please enter a valid URL for video" }).optional(),
- });
- default:
- return z.object({
- action: z.string(),
- });
- }
- };
- useEffect(() => {
- if (eventToModify) {
- setSlides(eventToModify.slides || "");
- setVideoUrl(eventToModify.videoUrl || "");
- }
- }, [eventToModify]);
- const formSchema = getZodSchema(action);
- const {
- register,
- handleSubmit,
- formState: { errors },
- control,
- reset,
- } = useForm({
- resolver: zodResolver(formSchema),
- defaultValues: {
- ...initialFormValues,
- department: selectedDepartment,
- // slides: eventToModify?.slides || "",
- // videoUrl: eventToModify?.videoUrl || "",
- },
- });
- const [newEvent] = useMutation(EVENT_MUTATION);
- const [moveImageFromTemp] = useMutation(IMAGE_MUTATION);
- const [deleteEvent] = useMutation(DELETE_EVENT_MUTATION);
- const [modifyEvent] = useMutation(MODIFY_EVENT_MUTATION);
- const onSubmit = async (data: any) => {
- try {
- if (data.action === "Add an Event") {
- var imageResponse;
- if (filenames.length) {
- imageResponse = await moveImageFromTemp({
- variables: {
- filenames: filenames,
- paths: filenames.map(
- (filename) => `events/${data.title}/${filename}`
- ),
- },
- });
- }
- const response = await newEvent({
- variables: {
- title: data.title,
- description: data.description,
- date: data.eventdate.toLocaleDateString("en-GB", {
- month: "2-digit",
- day: "2-digit",
- year: "numeric",
- }),
- eventTime: time,
- location: data.location,
- initiativeId: selectedInitiativeId,
- guestPresenters: data.guestPresenter,
- staffPresenters: staffPresenters.map((presenter) => presenter.id),
- tags: [...data.tags],
- banner: encodeURIComponent(
- imageResponse?.data?.uploadImageFile.filenames[0]
- ),
- user: `${user.data?.givenName} ${user.data?.surname}`,
- },
- });
- if (response.data) {
- addToast("Form submitted successfully", { appearance: "success" });
- reset(initialFormValues);
- setStaffPresenters([]);
- // Add a delay of 5 seconds before refreshing the page
- setTimeout(() => {
- window.location.reload();
- }, 2000);
- } else {
- console.error("Error submitting the form:", response.errors);
- addToast("An error occurred while submitting the form", {
- appearance: "error",
- });
- }
- } else if (data.action === "Remove an Event") {
- // Handle the DELETE request for removing an event
- deleteEvent({
- variables: {
- deleteEventId: eventToRemove?.id,
- user: `${user.data?.givenName} ${user.data?.surname}`,
- },
- })
- .then((response) => {
- console.log(response);
- })
- .catch((error) => {
- console.error("Error deleting event:", error);
- });
- addToast("Event removed successfully", { appearance: "success" });
- // Add a delay of 5 seconds before refreshing the page
- setTimeout(() => {
- window.location.reload();
- }, 2000);
- } else if (data.action === "Update Past Event") {
- // Handle the Update request for updating a past event
- // if (slides && !(await validateUrl(slides))) {
- // addToast("Invalid URL for slides", { appearance: "error" });
- // return;
- // }
- // if (videoUrl && !(await validateUrl(videoUrl))) {
- // addToast("Invalid URL for video", { appearance: "error" });
- // return;
- // }
- if (!isValidUrl(slides) || !isValidUrl(videoUrl)) {
- addToast("Invalid URL(s) provided", { appearance: "error" });
- return;
- }
- const variables = {
- eventId: selectedPastEvent,
- user: `${user.data?.givenName} ${user.data?.surname}`,
- slides: slides !== eventToModify?.slides ? slides : undefined,
- videoUrl: videoUrl !== eventToModify?.videoUrl ? videoUrl : undefined,
- };
- const response = await modifyEvent({ variables });
- if (response.data) {
- addToast("Event updated successfully", { appearance: "success" });
- reset(initialFormValues);
- // Add a delay of 5 seconds before refreshing the page
- setTimeout(() => {
- window.location.reload();
- }, 2000);
- } else {
- console.error("Error updating the event:", response.errors);
- addToast("An error occurred while updating the event", {
- appearance: "error",
- });
- }
- }
- } catch (error) {
- console.error("Error submitting the form:", error);
- addToast("An error occurred while submitting the form", {
- appearance: "error",
- });
- }
- };
- const [hasGuestPresenters, setHasGuestPresenters] = useState(false);
- const handleCheckboxChange = () => {
- // Toggle the state when the checkbox is clicked
- setHasGuestPresenters(!hasGuestPresenters);
- };
- const [hasEventBanner, setHasEventBanner] = useState(false);
- const handleBannerChange = () => {
- // Toggle the state when the checkbox is clicked
- setHasEventBanner(!hasEventBanner);
- };
- const [hasEventTags, setHasEventTags] = useState(false);
- const handleTagsChange = () => {
- // Toggle the state when the checkbox is clicked
- setHasEventTags(!hasEventTags);
- };
- const options = [
- {name: "Select an Action", id: -1},
- {name: "Add an Event", id: -1},
- {name: "Remove an Event", id: -1},
- {name: "Update Past Event", id: -1}
- ];
- const handlePastEventChange = (event: any) => {
- setSelectedPastEvent(Number(event.target.value));
- setPastEventSelected(true);
- };
- const { data: tagName } = useQuery<TagName>(TAG_QUERY);
- const { data: InitiativeData } =
- useQuery<InitiativeData>(ALLINITIATIVES_QUERY);
- const [selectedInitiativeId, setSelectedInitiativeId] = useState<number>();
- const pages = [
- { name: "Update an Event", link: "/update-event", current: true },
- ];
- return (
- <Page>
- {/* Hero Section */}
- <Breadcrumb data={pages} />
- <div className="grid place-items-center py-12">
- <div
- className="absolute inset-x-0 -top-40 -z-20 transform-gpu overflow-hidden blur-3xl sm:-top-80"
- aria-hidden="true"
- >
- <div
- className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#bfdbfe] to-[#2563eb] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
- style={{
- clipPath:
- "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
- }}
- />
- </div>
- {!action && (
- <>
- <div className="mx-auto max-w-2xl">
- <h1 className="text-4xl font-semibold tracking-tight text-text-primary sm:text-6xl animate__animated animate__slideInDown flex pl-4 justify-center">
- Manage Events
- </h1>
- <p className="mt-6 text-lg text-center leading-8 text-text-secondary">
- This page serves as a dedicated platform to efficiently manage
- events within the department. Seamlessly add, remove, or update
- and event. Please select an action to get started.
- </p>
- </div>
- </>
- )}
- {action === "Add an Event" && (
- <>
- <div className="mx-auto max-w-2xl">
- <h1 className="text-4xl font-semibold tracking-tight text-text-primary sm:text-6xl animate__animated animate__slideInDown flex pl-4 justify-center">
- Adding an Event
- </h1>
- <p className="mt-6 text-lg text-center leading-8 text-text-secondary">
- This page is designed to help you easily manage the process of
- adding new events to the site. You can effortlessly add events
- to the events page and ensure a smooth experience for your
- users.
- </p>
- </div>
- </>
- )}
- {action === "Remove an Event" && (
- <>
- <div className="mx-auto max-w-2xl">
- <h1 className="text-4xl font-semibold tracking-tight text-text-primary sm:text-6xl animate__animated animate__slideInDown flex pl-4 justify-center">
- Remove an Event
- </h1>
- <p className="mt-6 text-lg text-center leading-8 text-text-secondary">
- This page is designed to help you easily manage the process of
- removing events from the site.
- </p>
- </div>
- </>
- )}
- {action === "Update Past Event" && (
- <>
- <div className="mx-auto max-w-2xl">
- <h1 className="text-4xl font-semibold tracking-tight text-text-primary sm:text-6xl animate__animated animate__slideInDown flex pl-4 justify-center">
- Update Past Event
- </h1>
- <p className="mt-6 text-lg text-center leading-8 text-text-secondary">
- This page is designed to help you easily manage the process of
- adding updating past events within the site. You can
- effortlessly update past events; ensuring a smooth experience
- for your users.
- </p>
- </div>
- </>
- )}
- {action === "Select an Action" && (
- <>
- <div className="mx-auto max-w-2xl">
- <h1 className="text-4xl font-semibold tracking-tight text-text-primary sm:text-6xl animate__animated animate__slideInDown flex pl-4 justify-center">
- Manage Events
- </h1>
- <p className="mt-6 text-lg text-center leading-8 text-text-secondary">
- This page serves as a dedicated platform to efficiently manage
- events within the department. Seamlessly add, remove, or update
- and event. Please select an action to get started.
- </p>
- </div>
- </>
- )}
- <div className="py-12 w-9/12">
- <form
- className="bg-neutral shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl"
- onSubmit={handleSubmit(onSubmit)}
- >
- <div className="px-4 py-8 sm:p-8">
- <div>
- <SelectField
- type="select"
- label="Action"
- name="action"
- autoComplete="action-name"
- options={options}
- onChange={handlePurposeChange}
- formSchema={{ control, errors }}
- />
- {/* Conditional rendering based on the selected purpose */}
- {action === "Add an Event" && (
- <>
- <div>
- <SelectField
- label="Name of Event"
- name="title"
- autoComplete="given-name"
- type="text"
- placeholder="Enter The Event Name"
- formSchema={{ control, errors }}
- options={[]}
- onChange={onchange}
- className="text-text-primary placeholder-text-primary"
- />
- </div>
- <div className="grid grid-cols-2 gap-x-6 gap-y-8 py-8 border-t border-gray-900/10">
- <label className="block text-sm font-medium leading-6 text-text-primary">
- Description of Event{" "}
- <span className="text-helpers-error-button">*</span>
- </label>
- <div className="w-full">
- <textarea
- id="description"
- {...register("description")}
- placeholder="Description of The Event"
- rows={3}
- className="block w-full rounded-md bg-neutral-dimmed border-0 py-1.5 text-text-primary placeholder-text-primary shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:max-w-md sm:text-sm sm:leading-6"
- defaultValue={""}
- />
- {errors.description && (
- <p className="error text-helpers-error-button mt-2">
- {errors.description?.message}
- </p>
- )}
- </div>
- </div>
- <div className="grid grid-cols-2 gap-x-6 gap-y-8 border-t border-gray-900/10 py-8">
- <label className="block text-sm font-medium leading-6 text-text-primary">
- Select Date of Event
- <span className="text-helpers-error-button">*</span>
- </label>
- <DayPicker
- register={register}
- errors={errors}
- formSchema={formSchema}
- control={control}
- name="eventdate"
- />
- </div>
- <div className="grid grid-cols-2 gap-x-6 gap-y-8 py-8 border-t border-gray-900/10">
- <label className="block text-sm font-medium leading-6 text-text-primary">
- Time of Event{" "}
- <span className="text-helpers-error-button">*</span>
- </label>
- <TimePicker
- time={time}
- changeTime={setTime}
- register={register}
- errors={errors}
- formSchema={formSchema}
- control={control}
- />
- </div>
- <div className="border-t border-gray-900/10">
- <SelectField
- label="Location of Event"
- name="location"
- autoComplete="given-name"
- type="text"
- placeholder="Enter Location of The Event"
- formSchema={{ control, errors }}
- options={[]}
- onChange={onchange}
- className="text-text-primary placeholder-text-primary"
- />
- </div>
- <div className="grid grid-cols-2 gap-x-6 gap-y-8 py-8 border-t border-gray-900/10">
- <label className="block text-sm font-medium leading-6 text-text-primary">
- Hosting Initiative{" "}
- <span className="text-helpers-error-button">*</span>
- </label>
- <div className="w-full">
- <select
- id="initiative"
- {...register("initiative")}
- autoComplete="Hosting initiative"
- className="block w-full rounded-md bg-neutral-dimmed border-0 py-1.5 text-text-primary placeholder-text-primary shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:max-w-md sm:text-sm sm:leading-6"
- onChange={(e) => {
- const selectedId =
- InitiativeData?.allInitiatives.find(
- (initiative) =>
- initiative.name === e.target.value
- )?.id;
- setSelectedInitiativeId(selectedId);
- }}
- >
- <option disabled selected value="">
- Select an Initiative
- </option>
- {InitiativeData?.allInitiatives.map(
- (initiative: any) => (
- <option
- key={initiative.id}
- value={initiative.name}
- >
- {initiative.name}
- </option>
- )
- )}
- </select>
- {errors.initiative && (
- <p className="error text-helpers-error-button mt-2">
- {errors.initiative?.message}
- </p>
- )}
- </div>
- </div>
- <div className="py-8 border-t border-gray-900/10">
- <StaffDropdown
- selectedStaff={staffPresenters}
- setSelectedStaff={setStaffPresenters}
- register={register}
- errors={errors}
- formSchema={formSchema}
- control={control}
- />
- </div>
- <div className="border-t border-gray-900/10 mb-8">
- <div className="mt-8">
- <label className="block text-sm font-medium leading-6 text-text-primary">
- Are There Any Guest Presenters?
- <input
- type="checkbox"
- className="ml-2 mb-1 rounded-md bg-neutral-dimmed border-1 shadow-sm ring-inset ring-gray-300 focus:ring-inset focus:ring-elements-secondary-dimmed"
- onChange={handleCheckboxChange}
- checked={hasGuestPresenters}
- />
- </label>
- </div>
- {hasGuestPresenters && (
- <div>
- <SelectField
- label="Guest Presenters of Event"
- name="guestPresenter"
- autoComplete="given-name"
- type="text"
- placeholder="Enter The Guest Presenter Name"
- formSchema={{ control, errors }}
- options={[]}
- onChange={onchange}
- className="text-text-primary placeholder-text-primary block w-full rounded-md bg-neutral-dimmed border-0 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:max-w-md sm:text-sm sm:leading-6"
- required={false}
- />
- </div>
- )}
- {!hasGuestPresenters && (
- <div className="mt-8">
- <p className="text-sm text-text-tertiary">
- If the checkbox is left unselected, no guest
- presenters will be submitted.
- </p>
- </div>
- )}
- </div>
- <div className="border-t border-gray-900/10 mb-8">
- <div className="mt-8">
- <label className="block text-sm font-medium leading-6 text-text-primary">
- Are There Any Event Tags?
- <input
- type="checkbox"
- className="ml-2 mb-1 rounded-md bg-neutral-dimmed border-1 shadow-sm ring-inset ring-gray-300 focus:ring-inset focus:ring-elements-secondary-dimmed"
- onChange={handleTagsChange}
- checked={hasEventTags}
- />
- </label>
- </div>
- {hasEventTags && (
- <div className="grid grid-cols-2 gap-x-6 gap-y-8 py-8 ">
- <div>
- <label className="block text-sm font-medium leading-6 text-text-primary whitespace-nowrap">
- Event Tag{" "}
- </label>
- </div>
- <div className="w-full">
- <select
- id="eventTags"
- multiple={true}
- autoComplete="event-tags"
- className="block w-full overflow-hidden rounded-md bg-neutral-dimmed border-0 py-1.5 text-text-primary placeholder-text-primary shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:max-w-md sm:text-sm sm:leading-6"
- {...register("tags")}
- >
- <option disabled selected value="">
- Select Tag Related to the Event
- </option>
- {tagName?.allTags.map((tag: any) => (
- <option key={tag.id} value={tag.name}>
- {tag.name}
- </option>
- ))}
- </select>
- {errors.tags && (
- <p className="error text-helpers-error-button mt-2">
- {errors.tags?.message}
- </p>
- )}
- </div>
- </div>
- )}
- {!hasEventTags && (
- <div className="mt-8">
- <p className="text-sm text-text-tertiary">
- If the checkbox is left unselected, no event tags
- will be submitted.
- </p>
- </div>
- )}
- </div>
- <div className="border-t border-gray-900/10">
- <div className="mt-8">
- <label className="block text-sm font-medium leading-6 text-text-primary">
- Would You Like To Upload An Event Banner?
- <input
- type="checkbox"
- className="ml-2 mb-1 rounded-md bg-neutral-dimmed border-1 shadow-sm ring-inset ring-gray-300 focus:ring-inset focus:ring-elements-secondary-dimmed"
- onChange={handleBannerChange}
- checked={hasEventBanner}
- />
- </label>
- </div>
- {hasEventBanner && (
- <div>
- <label className="mt-8 block text-sm font-medium leading-6 text-text-primary">
- Event Banner{" "}
- </label>
- <div className="mt-2">
- <Upload
- imageType="photo"
- filenames={filenames}
- setFileNames={setFileNames}
- control={control}
- register={register}
- errors={errors}
- formSchema={formSchema}
- name="file"
- multiple={false}
- component_choice="single"
- showUploadList={false}
- />
- </div>
- </div>
- )}
- {!hasEventBanner && (
- <div className="mt-8">
- <p className="text-sm text-text-tertiary">
- If no event banner is uploaded, a default image will
- be used.
- </p>
- </div>
- )}
- </div>
- </>
- )}
- {action === "Remove an Event" && (
- <>
- <div className="grid grid-cols-2 gap-x-6 gap-y-8 py-8">
- <div>
- <label className="block text-sm font-medium leading-6 text-text-primary whitespace-nowrap">
- Name of Past Event{" "}
- <span className="text-helpers-error-button">*</span>
- </label>
- </div>
- <div className="w-full">
- <select
- id="name"
- name="name"
- autoComplete="event"
- className="block w-full rounded-md bg-neutral-dimmed border-0 py-1.5 text-text-primary placeholder-text-primary shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:max-w-md sm:text-sm sm:leading-6"
- onChange={handleEventChange}
- >
- <option disabled selected value="">
- Select Name of Event
- </option>
- {allEvents?.allEvents.map((event: any) => (
- <option>{event.title}</option>
- ))}
- </select>
- </div>
- </div>
- {eventSelected && (
- <>
- <div className="grid grid-cols-2 gap-x-6 gap-y-8 py-8 border-t border-gray-900/10">
- <label className="block text-sm font-medium leading-6 text-text-primary">
- Description of Event{" "}
- <span className="text-helpers-error-button">*</span>
- </label>
- <div className="w-full">
- <textarea
- id="description"
- placeholder=""
- rows={4}
- className="cursor-not-allowed block w-full rounded-md bg-neutral border-0 py-1.5 text-text-primary sm:max-w-md sm:text-sm sm:leading-6"
- value={
- eventToRemove ? eventToRemove.description : ""
- }
- disabled={true}
- />
- </div>
- </div>
- <div className="grid grid-cols-2 gap-x-6 gap-y-8 border-t border-gray-900/10 py-8">
- <label className="block text-sm font-medium leading-6 text-text-primary">
- Date of Event
- <span className="text-helpers-error-button">*</span>
- </label>
- <div className="">
- <input
- id="description"
- placeholder=""
- className="cursor-not-allowed block w-full rounded-md bg-neutral border-0 py-1.5 text-text-primary sm:max-w-md sm:text-sm sm:leading-6"
- value={eventDate}
- disabled={true}
- />
- </div>
- </div>
- </>
- )}
- </>
- )}
- {action === "Update Past Event" && (
- <>
- <div className="grid grid-cols-2 gap-x-6 gap-y-8 py-8">
- <div>
- <label className="block text-sm font-medium leading-6 text-text-primary whitespace-nowrap">
- Name of Past Event{" "}
- <span className="text-helpers-error-button">*</span>
- </label>
- </div>
- <div className="w-full">
- <select
- id="name"
- {...register("title")}
- autoComplete="pastEvent"
- className="block w-full rounded-md bg-neutral-dimmed border-0 py-1.5 text-text-primary placeholder-text-primary shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:max-w-md sm:text-sm sm:leading-6"
- onChange={handlePastEventChange}
- >
- <option disabled selected value="">
- Select Name of Event
- </option>
- {pastEvents?.allEvents.map((event: any) => (
- <option value={event.id}>{event.title}</option>
- ))}
- </select>
- {errors.title && (
- <p className="error text-helpers-error-button mt-2">
- {errors.title?.message}
- </p>
- )}
- </div>
- </div>
- {/* Conditionally render the Event Video Link and Event Presentation Slides fields */}
- {pastEventSelected && (
- <>
- <div className="py-8 border-t border-gray-900/10">
- <SelectField
- label="Video Link"
- name="videoUrl"
- autoComplete="given-name"
- type="text"
- value={videoUrl}
- placeholder="Enter The Event MS Stream Link "
- formSchema={{ control, errors }}
- options={[]}
- onChange={handleVideoUrlChange}
- errorMessage={validationErrors.slides}
- className="text-text-primary placeholder-text-primary"
- required={false}
- />
- </div>
- <div className="col-span-full border-t border-gray-900/10 pt-8">
- <SelectField
- label="Event Presentation Slides"
- name="slides"
- autoComplete="given-name"
- type="text"
- value={slides}
- placeholder="Enter The Link For The Presentation Slides"
- formSchema={{ control, errors }}
- options={[]}
- onChange={handleSlideChange}
- errorMessage={validationErrors.videoUrl}
- className="text-text-primary placeholder-text-primary"
- required={false}
- />
- </div>
- </>
- )}
- </>
- )}
- </div>
- </div>
- <div className="flex items-center justify-end gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
- <Button
- type="text"
- label="Cancel"
- size="lg"
- className="text-text-primary"
- onClick={openModal}
- disabled={!isActionSelected}
- />
- {isModalOpen && (
- <Modal
- closeModal={() => {
- reset(initialFormValues);
- window.location.reload();
- closeModal();
- }}
- title="Warning"
- description="Are you sure you want to cancel your changes?"
- appearance="warning"
- action="Continue"
- />
- )}
- {action === "Remove an Event" ? (
- <>
- <Button
- type="text"
- label="Remove"
- size="lg"
- className="bg-elements-secondary-shadow hover:bg-elements-secondary-dimmed px-4 py-2 text-white"
- onClick={openRemoveModal}
- disabled={!isActionSelected}
- />
- {isRemoveModalOpen && (
- <Transition.Root
- show={isRemoveModalOpen}
- as={React.Fragment}
- >
- {/* <Dialog
- as="div"
- className="fixed inset-0 z-10 overflow-y-auto"
- onClose={closeRemoveModal}
- > */}
- <div className="fixed inset-0 z-10 overflow-y-auto flex items-center justify-center">
- <Transition.Child
- as={React.Fragment}
- enter="ease-out duration-300"
- enterFrom="opacity-0"
- enterTo="opacity-100"
- leave="ease-in duration-200"
- leaveFrom="opacity-100"
- leaveTo="opacity-0"
- >
- <div className="fixed inset-0 transition-opacity">
- <div className="absolute inset-0 bg-gray-500 opacity-75" />
- </div>
- </Transition.Child>
- <Transition.Child
- as={React.Fragment}
- enter="ease-out duration-300"
- enterFrom="opacity-0 scale-95"
- enterTo="opacity-100 scale-100"
- leave="ease-in duration-200"
- leaveFrom="opacity-100 scale-100"
- leaveTo="opacity-0 scale-95"
- >
- <div className="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform rounded-lg shadow-xl bg-neutral-dimmed-heavy sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
- <div className="absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
- <button
- type="button"
- className="rounded-md bg-neutral text-text-dimmed hover:text-text-tertiary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:elements-primary-main"
- onClick={closeRemoveModal}
- >
- <span className="sr-only">Close</span>
- <HiX className="w-6 h-6" aria-hidden="true" />
- </button>
- </div>
- <div className="sm:flex sm:items-start">
- <div className="bg-helpers-warning-dimmed mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full sm:mx-0 sm:h-10 sm:w-10">
- <HiOutlineExclamation
- className="text-helpers-warning-main w-6 h-6"
- aria-hidden="true"
- />
- </div>
- <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
- <h3 className="text-lg font-medium leading-6 text-text-primary">
- Warning
- </h3>
- <div className="mt-2">
- <p className="text-sm text-text-tertiary">
- Are you sure you want to remove an event?
- </p>
- </div>
- </div>
- </div>
- <div className="mt-5 sm:mt-4 flex sm:flex-row-reverse space-x-4">
- <Button
- type="primary"
- size="md"
- label="Remove"
- className="ml-3 bg-helpers-warning-button hover:bg-helpers-warning-button-hover focus:ring-helpers-warning-button"
- disabled={!isActionSelected}
- buttonType="submit"
- />
- <button
- type="button"
- className="inline-flex justify-center w-full px-4 py-2 mt-3 text-base font-medium border rounded-md shadow-sm border-divider-main bg-neutral-dimmed-heavy hover:bg-neutral-dimmed text-text-secondary hover:text-text-tertiary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-elements-primary-main sm:mt-0 sm:w-auto sm:text-sm"
- onClick={closeRemoveModal}
- >
- Cancel
- </button>
- </div>
- </div>
- </Transition.Child>
- </div>
- {/* </Dialog> */}
- </Transition.Root>
- )}
- </>
- ) : (
- <Button
- type="primary"
- size="md"
- label="Save"
- className="bg-elements-secondary-shadow hover:bg-elements-secondary-dimmed"
- disabled={!isActionSelected}
- buttonType="submit"
- />
- )}
- </div>
- </form>
- </div>
- <div
- className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
- aria-hidden="true"
- >
- <div
- className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#bfdbfe] to-[#2563eb] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
- style={{
- clipPath:
- "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
- }}
- />
- </div>
- </div>
- </Page>
- );
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement