Erikhoff00/web 129 add a flag to events to hide them from the events overview 2

frontend/src/Pages/ComponentPage/ComponentPage.tsx

@@ -65,7 +65,7 @@ export function ComponentPage() {
       visibility_from_dt: new Date().toISOString(),
       visibility_to_dt: '',
       start_dt: new Date().toISOString(),
-      status: 'active',
+      status: 'public',
       ticket_type: 'free',
       title_en: 'Von August with a very long title just like this // 23:59',
       title_nb: 'Von August // 23:59',

frontend/src/PagesAdmin/EventCreatorAdminPage/EventCreatorAdminPage.tsx

@@ -13,8 +13,15 @@ import type { EventDto } from '~/dto';
 import { usePrevious, useTitle } from '~/hooks';
 import { KEY } from '~/i18n/constants';
 import { venueKeys } from '~/queryKeys';
-import { EventAgeRestriction, type EventAgeRestrictionValue, EventCategory, type EventCategoryValue } from '~/types';
-import { dbT, getAgeRestrictionKey, getEventCategoryKey, lowerCapitalize } from '~/utils';
+import {
+  EventAgeRestriction,
+  type EventAgeRestrictionValue,
+  EventCategory,
+  type EventCategoryValue,
+  type EventStatus,
+  EventStatusChoice,
+} from '~/types';
+import { dbT, getAgeRestrictionKey, getEventCategoryKey, getEventStatusTranslationKey, lowerCapitalize } from '~/utils';
 import { AdminPageLayout } from '../AdminPageLayout/AdminPageLayout';
 import styles from './EventCreatorAdminPage.module.scss';
 import { type FormType, useEventCreatorForm } from './hooks/useEventCreatorForm';
@@ -57,6 +64,15 @@ export function EventCreatorAdminPage() {
     label: t(getAgeRestrictionKey(age)),
   }));
 
+  const availableEventStatuses: EventStatus[] = id
+    ? Object.values(EventStatusChoice)
+    : [EventStatusChoice.PUBLIC, EventStatusChoice.PRIVATE];
+
+  const eventStatusOptions: DropdownOption<EventStatus>[] = availableEventStatuses.map((status) => ({
+    value: status,
+    label: t(getEventStatusTranslationKey(status)),
+  }));
+
   const { form, watchedValues, buildPayload } = useEventCreatorForm({
     event,
     defaultCategory: eventCategoryOptions[0]?.value ?? EventCategory.ART,
@@ -68,7 +84,7 @@ export function EventCreatorAdminPage() {
     info: <InfoStep form={form} eventCategoryOptions={eventCategoryOptions} locationOptions={locationOptions} />,
     payment: <PaymentStep form={form} ageLimitOptions={ageLimitOptions} />,
     graphics: <GraphicsStep form={form} />,
-    summary: <SummaryStep form={form} />,
+    summary: <SummaryStep form={form} eventStatusOptions={eventStatusOptions} />,
   };
 
   // Fetch event data using the event ID

frontend/src/PagesAdmin/EventCreatorAdminPage/EventCreatorSchema.ts

@@ -12,6 +12,7 @@ import {
   EVENT_LOCATION,
   EVENT_REGISTRATION_URL,
   EVENT_START_DT,
+  EVENT_STATUS,
   EVENT_TICKET_TYPE,
   EVENT_TITLE,
   EVENT_VISIBILITY_FROM_DT,
@@ -51,6 +52,7 @@ export const eventSchema = z.object({
   // Graphics
   image: OPTIONAL_IMAGE,
   // Summary/Publication date
+  status: EVENT_STATUS,
   visibility_from_dt: EVENT_VISIBILITY_FROM_DT,
   visibility_to_dt: EVENT_VISIBILITY_TO_DT,
 });

frontend/src/PagesAdmin/EventCreatorAdminPage/hooks/useEventCreatorForm.ts

@@ -4,7 +4,7 @@ import { useForm } from 'react-hook-form';
 import type { z } from 'zod';
 
 import type { EventDto, EventWriteDto } from '~/dto';
-import type { EventCategoryValue } from '~/types';
+import { type EventCategoryValue, EventStatusChoice } from '~/types';
 import { utcTimestampToLocal } from '~/utils';
 import { eventSchema } from '../EventCreatorSchema';
 
@@ -46,6 +46,7 @@ export function useEventCreatorForm(params: {
       custom_tickets: [],
       billig_id: undefined,
       image: undefined,
+      status: EventStatusChoice.PUBLIC,
       visibility_from_dt: '',
       visibility_to_dt: '',
     },
@@ -75,6 +76,7 @@ export function useEventCreatorForm(params: {
       custom_tickets: event.custom_tickets || [],
       billig_id: event.billig?.id,
       image: event.image ?? undefined,
+      status: event.status || EventStatusChoice.PUBLIC,
       visibility_from_dt: event.visibility_from_dt ? utcTimestampToLocal(event.visibility_from_dt, false) : '',
       visibility_to_dt: event.visibility_to_dt ? utcTimestampToLocal(event.visibility_to_dt, false) : '',
     };

frontend/src/PagesAdmin/EventCreatorAdminPage/steps/SummaryStep.tsx

@@ -1,27 +1,51 @@
 import type { UseFormReturn } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { FormControl, FormField, FormItem, FormLabel, FormMessage, Input } from '~/Components';
+import { Dropdown, FormControl, FormField, FormItem, FormLabel, FormMessage, Input } from '~/Components';
+import type { DropdownOption } from '~/Components/Dropdown/Dropdown';
 import { KEY } from '~/i18n/constants';
+import type { EventStatus } from '~/types';
 import styles from '../EventCreatorAdminPage.module.scss';
 import type { FormType } from '../hooks/useEventCreatorForm';
 
-export function SummaryStep({ form }: { form: UseFormReturn<FormType> }) {
+type Props = {
+  form: UseFormReturn<FormType>;
+  eventStatusOptions: DropdownOption<EventStatus>[];
+};
+
+export function SummaryStep({ form, eventStatusOptions }: Props) {
   const { t } = useTranslation();
 
   return (
-    <FormField
-      control={form.control}
-      name="visibility_from_dt"
-      key="visibility_from_dt"
-      render={({ field }) => (
-        <FormItem className={styles.form_item}>
-          <FormLabel>{t(KEY.saksdokumentpage_publication_date) ?? ''}</FormLabel>
-          <FormControl>
-            <Input type="datetime-local" {...field} />
-          </FormControl>
-          <FormMessage />
-        </FormItem>
-      )}
-    />
+    <div className={styles.input_row}>
+      <FormField
+        control={form.control}
+        name="visibility_from_dt"
+        key="visibility_from_dt"
+        render={({ field }) => (
+          <FormItem className={styles.form_item}>
+            <FormLabel>{t(KEY.saksdokumentpage_publication_date) ?? ''}</FormLabel>
+            <FormControl>
+              <Input type="datetime-local" {...field} />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <FormField
+        control={form.control}
+        name="status"
+        key="status"
+        render={({ field }) => (
+          <FormItem className={styles.form_item}>
+            <FormLabel>{t(KEY.event_status)}</FormLabel>
+            <FormControl>
+              <Dropdown options={eventStatusOptions} nullOption={{ label: t(KEY.common_choose) }} {...field} />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </div>
   );
 }

frontend/src/PagesAdmin/EventCreatorAdminPage/steps/stepConfig.ts

@@ -59,6 +59,6 @@ export const steps: EventCreatorStep[] = [
     title_nb: 'Oppsummering',
     title_en: 'Summary',
     customIcon: 'ic:outline-remove-red-eye',
-    validate: (d) => !!d.visibility_from_dt,
+    validate: (d) => !!d.visibility_from_dt && !!d.status,
   },
 ];

frontend/src/dto.ts

@@ -191,6 +191,8 @@ export type EventDto = {
 };
 
 export type EventWriteDto = {
+  status?: EventStatus;
+
   title_nb: string;
   title_en: string;
   description_long_nb: string;

frontend/src/i18n/constants.ts

@@ -332,6 +332,14 @@ export const KEY = {
   event_category_theme_party: 'event_category_theme_party',
   event_category_uka_event: 'event_category_uka_event',
 
+  // Event statuses
+  event_status: 'event_status',
+  event_status_public: 'event_status_public',
+  event_status_private: 'event_status_private',
+  event_status_archived: 'event_status_archived',
+  event_status_cancelled: 'event_status_cancelled',
+  event_status_deleted: 'event_status_deleted',
+
   // Venue Page:
   venuepage_title: 'venuepage_title',
 
@@ -689,6 +697,7 @@ export const KEY = {
   event_form_category_required: 'event_form_category_required',
   event_form_age_restriction_required: 'event_form_age_restriction_required',
   event_form_ticket_type_required: 'event_form_ticket_type_required',
+  event_form_status_required: 'event_form_status_required',
 } as const;
 
 // This will ensure that each value matches the key exactly.

frontend/src/i18n/translations.ts

@@ -305,6 +305,14 @@ export const nb = prepareTranslations({
   [KEY.event_category_theme_party]: 'Temafest',
   [KEY.event_category_uka_event]: 'UKE-arrangement',
 
+  // Event statuses
+  [KEY.event_status]: 'Status',
+  [KEY.event_status_public]: 'Offentlig',
+  [KEY.event_status_private]: 'Privat',
+  [KEY.event_status_archived]: 'Arkivert',
+  [KEY.event_status_cancelled]: 'Avlyst',
+  [KEY.event_status_deleted]: 'Slettet',
+
   //Purchase Ticket Info:
   [KEY.invalid_email_message]: 'Ugyldig e-postformat',
   [KEY.email_or_membership_number_message]: 'Du må oppgi enten en e-post eller et medlemsnummer',
@@ -708,6 +716,7 @@ export const nb = prepareTranslations({
   [KEY.event_form_category_required]: 'Kategori er påkrevd',
   [KEY.event_form_age_restriction_required]: 'Aldersgrense er påkrevd',
   [KEY.event_form_ticket_type_required]: 'Billetttype er påkrevd',
+  [KEY.event_form_status_required]: 'Status er påkrevd',
 });
 
 export const en = prepareTranslations({
@@ -1003,6 +1012,14 @@ export const en = prepareTranslations({
   [KEY.event_category_theme_party]: 'Theme party',
   [KEY.event_category_uka_event]: 'UKA event',
 
+  // Event statuses
+  [KEY.event_status]: 'Status',
+  [KEY.event_status_public]: 'Public',
+  [KEY.event_status_private]: 'Private',
+  [KEY.event_status_archived]: 'Archived',
+  [KEY.event_status_cancelled]: 'Cancelled',
+  [KEY.event_status_deleted]: 'Deleted',
+
   // EventPage:
   [KEY.event_registration_url]: 'Registration URL',
   [KEY.event_add_ticket]: 'Add ticket',
@@ -1409,4 +1426,5 @@ export const en = prepareTranslations({
   [KEY.event_form_category_required]: 'Category is required',
   [KEY.event_form_age_restriction_required]: 'Age restriction is required',
   [KEY.event_form_ticket_type_required]: 'Ticket type is required',
+  [KEY.event_form_status_required]: 'Status is required',
 });

frontend/src/schema/event.ts

@@ -1,6 +1,6 @@
 import { z } from 'zod';
 import { KEY } from '~/i18n/constants';
-import { EventAgeRestriction, EventCategory, EventTicketType } from '~/types';
+import { EventAgeRestriction, EventCategory, EventStatusChoice, EventTicketType } from '~/types';
 import { zodEnum } from './utils';
 
 export const EVENT_TITLE = z.string().min(1, { message: KEY.event_form_title_required });
@@ -26,3 +26,4 @@ export const EVENT_X_LINK = z.string().url().optional();
 export const EVENT_CATEGORY = zodEnum(EventCategory, KEY.event_form_category_required);
 export const EVENT_AGE_RESTRICTION = zodEnum(EventAgeRestriction, KEY.event_form_age_restriction_required);
 export const EVENT_TICKET_TYPE = zodEnum(EventTicketType, KEY.event_form_ticket_type_required);
+export const EVENT_STATUS = zodEnum(EventStatusChoice, KEY.event_form_status_required);

frontend/src/types.ts

@@ -105,7 +105,15 @@ export const ALL_DAYS: Day[] = ['monday', 'tuesday', 'wednesday', 'thursday', 'f
 export const WEEK_DAYS: Day[] = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday'];
 
 /** Event types */
-export type EventStatus = 'active' | 'cancelled' | 'archived' | 'deleted';
+export const EventStatusChoice = {
+  PUBLIC: 'public',
+  PRIVATE: 'private',
+  ARCHIVED: 'archived',
+  CANCELLED: 'cancelled',
+  DELETED: 'deleted',
+} as const;
+
+export type EventStatus = (typeof EventStatusChoice)[keyof typeof EventStatusChoice];
 
 export const EventAgeRestriction = {
   NONE: 'none',

frontend/src/utils.ts

@@ -14,6 +14,7 @@ import {
   EventAgeRestriction,
   type EventAgeRestrictionValue,
   type EventCategoryValue,
+  type EventStatus,
   EventTicketType,
   type EventTicketTypeValue,
 } from './types';
@@ -280,6 +281,20 @@ export function getAgeRestrictionKey(age: EventAgeRestrictionValue): Translation
   }
 }
 
+/**
+ * Gets the translation key for a given event status
+ */
+export function getEventStatusTranslationKey(status: EventStatus): TranslationKeys {
+  const map: Record<EventStatus, TranslationKeys> = {
+    public: KEY.event_status_public,
+    private: KEY.event_status_private,
+    archived: KEY.event_status_archived,
+    cancelled: KEY.event_status_cancelled,
+    deleted: KEY.event_status_deleted,
+  };
+  return map[status];
+}
+
 /**
  * Converts a UTC timestring from django to
  * a local timestring suitable for html input elements