From 0b7c792bb04e59ec588a3aa38276cc5429b617e5 Mon Sep 17 00:00:00 2001 From: sindremil Date: Sun, 1 Mar 2026 18:18:58 +0100 Subject: [PATCH 01/16] WIP --- components/form/DatePickerInput.tsx | 18 ++++++------------ pages/admin/[period-id]/index.tsx | 10 +++++++++- pages/admin/new-period.tsx | 28 +++++++++++++++++++++++++++- 3 files changed, 42 insertions(+), 14 deletions(-) diff --git a/components/form/DatePickerInput.tsx b/components/form/DatePickerInput.tsx index 6ef4474c..b039b1f1 100644 --- a/components/form/DatePickerInput.tsx +++ b/components/form/DatePickerInput.tsx @@ -1,18 +1,12 @@ import { useEffect, useState } from "react"; interface Props { label?: string; + fromDate?: string; + toDate?: string; updateDates: (dates: { start: string; end: string }) => void; } const DatePickerInput = (props: Props) => { - const [fromDate, setFromDate] = useState(""); - const [toDate, setToDate] = useState(""); - - useEffect(() => { - const startDate = fromDate ? `${fromDate}T00:00` : ""; - const endDate = toDate ? `${toDate}T23:59` : ""; - props.updateDates({ start: startDate, end: endDate }); - }, [fromDate, toDate]); return (
@@ -24,8 +18,8 @@ const DatePickerInput = (props: Props) => { type="date" id={`${props.label}-from`} name={`${props.label}-from`} - value={fromDate} - onChange={(e) => setFromDate(e.target.value)} + value={props.fromDate ?? ""} + onChange={(e) => props.updateDates({start: `${e.target.value}T00:00`, end: props.toDate ? `${props.toDate}T00:00` : ""})} className="border text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 border-gray-300 text-gray-900 dark:border-gray-600 dark:bg-online-darkBlue dark:text-gray-200" /> til @@ -33,8 +27,8 @@ const DatePickerInput = (props: Props) => { type="date" id={`${props.label}-to`} name={`${props.label}-to`} - value={toDate} - onChange={(e) => setToDate(e.target.value)} + value={props.toDate ?? ""} + onChange={(e) => props.updateDates({start: props.fromDate ? `${props.fromDate}T00:00` : "", end: `${e.target.value}T00:00`})} className="border text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 border-gray-300 text-gray-900 dark:border-gray-600 dark:bg-online-darkBlue dark:text-gray-200" />
diff --git a/pages/admin/[period-id]/index.tsx b/pages/admin/[period-id]/index.tsx index 51d24a7e..256e7413 100644 --- a/pages/admin/[period-id]/index.tsx +++ b/pages/admin/[period-id]/index.tsx @@ -6,13 +6,14 @@ import { periodType } from "../../../lib/types/types"; import NotFound from "../../404"; import ApplicantsOverview from "../../../components/applicantoverview/ApplicantsOverview"; import { Tabs } from "../../../components/Tabs"; -import { CalendarIcon, InboxIcon } from "@heroicons/react/24/solid"; +import { CalendarIcon, CogIcon, InboxIcon } from "@heroicons/react/24/solid"; import Button from "../../../components/Button"; import { useQuery } from "@tanstack/react-query"; import { fetchPeriodById } from "../../../lib/api/periodApi"; import LoadingPage from "../../../components/LoadingPage"; import ErrorPage from "../../../components/ErrorPage"; import toast from "react-hot-toast"; +import NewPeriod from "../new-period"; const Admin = () => { const { data: session } = useSession(); @@ -119,6 +120,13 @@ const Admin = () => { /> ), }, + { + title: "Instillinger", + icon: , + content: ( + + ) + }, //Super admin :) ...(session?.user?.email && [ diff --git a/pages/admin/new-period.tsx b/pages/admin/new-period.tsx index 5ac74cbd..9a1546df 100644 --- a/pages/admin/new-period.tsx +++ b/pages/admin/new-period.tsx @@ -17,7 +17,11 @@ import { createPeriod } from "../../lib/api/periodApi"; import { SimpleTitle } from "../../components/Typography"; import { getCommitteeDisplayNameFactory } from "../../lib/utils/getCommitteeDisplayNameFactory"; -const NewPeriod = () => { +interface Props { + period?: periodType | null +} + +const NewPeriod = ({ period }: Props) => { const queryClient = useQueryClient(); const router = useRouter(); const [showPreview, setShowPreview] = useState(false); @@ -69,6 +73,22 @@ const NewPeriod = () => { }), }); + useEffect(() => { + if (!period) return; + setPeriodData({ + ...period, + applicationPeriod: { + start: new Date(period.applicationPeriod.start), + end: new Date(period.applicationPeriod.end) + }, + interviewPeriod: { + start: new Date(period.interviewPeriod.start), + end: new Date(period.interviewPeriod.end) + } + } + ); + }, [period]); + useEffect(() => { if (!owCommitteeData) return; setAvailableCommittees( @@ -134,6 +154,7 @@ const NewPeriod = () => { setShowPreview((prev) => !prev); }; + if (owCommitteeIsError) return ; return ( @@ -157,6 +178,7 @@ const NewPeriod = () => { label="Beskrivelse" placeholder="Flere komiteer søker nye medlemmer til suppleringsopptak. Har du det som trengs? Søk nå og bli en del av vårt fantastiske miljø! " + value={periodData.description} updateInputValues={(value: string) => setPeriodData({ ...periodData, @@ -169,10 +191,14 @@ const NewPeriod = () => { {owCommitteeIsLoading ? ( From 7ab5fbaa8593ab0377c54d40d20fb425eedf385b Mon Sep 17 00:00:00 2001 From: sindremil Date: Sun, 1 Mar 2026 18:27:33 +0100 Subject: [PATCH 02/16] Show previous values in fields --- components/form/CheckboxInput.tsx | 8 +++++++- pages/admin/new-period.tsx | 2 ++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/components/form/CheckboxInput.tsx b/components/form/CheckboxInput.tsx index 9e03079a..58fec0df 100644 --- a/components/form/CheckboxInput.tsx +++ b/components/form/CheckboxInput.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { InformationCircleIcon } from "@heroicons/react/24/outline"; interface CheckboxOption { @@ -14,12 +14,18 @@ interface Props { required?: boolean; order: number; info?: string; + checkedItems?: string[]; } const CheckboxInput = (props: Props) => { const [checkedItems, setCheckedItems] = useState([]); const [showInfo, setShowInfo] = useState(false); + useEffect(() => { + if (!props.checkedItems) return; + setCheckedItems(props.checkedItems); + }, [props.checkedItems]); + const handleInputChange = (e: React.BaseSyntheticEvent) => { const value = e.target.value; const isChecked = e.target.checked; diff --git a/pages/admin/new-period.tsx b/pages/admin/new-period.tsx index 9a1546df..fc086984 100644 --- a/pages/admin/new-period.tsx +++ b/pages/admin/new-period.tsx @@ -216,6 +216,7 @@ const NewPeriod = ({ period }: Props) => { values={availableCommittees} order={1} required + checkedItems={periodData.committees?.filter(Boolean) as string[]} /> { @@ -230,6 +231,7 @@ const NewPeriod = ({ period }: Props) => { info=" Valgfrie komiteer er komiteene som søkere kan velge i tillegg til de maksimum 3 komiteene de kan søke på. Eksempelvis: FeminIT" + checkedItems={periodData.optionalCommittees?.filter(Boolean) as string[]} /> )} From 4917a7039d140803c87796af2d075b06a3f11731 Mon Sep 17 00:00:00 2001 From: sindremil Date: Mon, 2 Mar 2026 15:13:07 +0100 Subject: [PATCH 03/16] Separate between create and edit period in UI --- pages/admin/[period-id]/index.tsx | 4 ++-- pages/admin/index.tsx | 2 +- pages/admin/{new-period.tsx => period-settings.tsx} | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) rename pages/admin/{new-period.tsx => period-settings.tsx} (97%) diff --git a/pages/admin/[period-id]/index.tsx b/pages/admin/[period-id]/index.tsx index 256e7413..64b3be86 100644 --- a/pages/admin/[period-id]/index.tsx +++ b/pages/admin/[period-id]/index.tsx @@ -13,7 +13,7 @@ import { fetchPeriodById } from "../../../lib/api/periodApi"; import LoadingPage from "../../../components/LoadingPage"; import ErrorPage from "../../../components/ErrorPage"; import toast from "react-hot-toast"; -import NewPeriod from "../new-period"; +import PeriodSettings from "../period-settings"; const Admin = () => { const { data: session } = useSession(); @@ -124,7 +124,7 @@ const Admin = () => { title: "Instillinger", icon: , content: ( - + ) }, //Super admin :) diff --git a/pages/admin/index.tsx b/pages/admin/index.tsx index e37b092d..40d94a5b 100644 --- a/pages/admin/index.tsx +++ b/pages/admin/index.tsx @@ -91,7 +91,7 @@ const Admin = () => {