Add social media links to create events

backend/samfundet/migrations/0006_event_general_link_event_lastfm_link_and_more.py

@@ -0,0 +1,48 @@
+# Generated by Django 5.2.11 on 2026-03-05 17:52
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('samfundet', '0005_medlemsinfo'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='event',
+            name='general_link',
+            field=models.URLField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='event',
+            name='lastfm_link',
+            field=models.URLField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='event',
+            name='soundcloud_link',
+            field=models.URLField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='event',
+            name='spotify_uri',
+            field=models.CharField(blank=True, max_length=200, null=True),
+        ),
+        migrations.AddField(
+            model_name='event',
+            name='vimeo_link',
+            field=models.URLField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='event',
+            name='youtube_embed',
+            field=models.URLField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='event',
+            name='youtube_link',
+            field=models.URLField(blank=True, null=True),
+        ),
+    ]

backend/samfundet/models/event.py

@@ -169,9 +169,17 @@ def __init__(self, *args: Any, **kwargs: Any) -> None:
     email_contact = models.EmailField(max_length=200, blank=True, null=True)
 
     host_link = models.URLField(max_length=200, blank=True, null=True)
-    instagram_link = models.URLField(max_length=200, blank=True, null=True)
+
+    spotify_uri = models.CharField(max_length=200, blank=True, null=True)
+    youtube_link = models.URLField(max_length=200, blank=True, null=True)
+    youtube_embed = models.URLField(max_length=200, blank=True, null=True)
     facebook_link = models.URLField(max_length=200, blank=True, null=True)
+    soundcloud_link = models.URLField(max_length=200, blank=True, null=True)
+    instagram_link = models.URLField(max_length=200, blank=True, null=True)
     x_link = models.URLField(max_length=200, blank=True, null=True)
+    lastfm_link = models.URLField(max_length=200, blank=True, null=True)
+    vimeo_link = models.URLField(max_length=200, blank=True, null=True)
+    general_link = models.URLField(max_length=200, blank=True, null=True)
 
     # ======================== #
     #       Venue/Entrance     #

frontend/src/Pages/ComponentPage/ComponentPage.tsx

@@ -82,6 +82,16 @@ export function ComponentPage() {
             ...billig,
           }
         : undefined,
+      spotify_uri: '',
+      youtube_link: '',
+      youtube_embed: '',
+      facebook_link: '',
+      soundcloud_link: '',
+      instagram_link: '',
+      x_link: '',
+      lastfm_link: '',
+      vimeo_link: '',
+      general_link: '',
       ...override,
     };
   }

frontend/src/PagesAdmin/EventCreatorAdminPage/EventCreatorAdminPage.module.scss

@@ -62,6 +62,7 @@
   }
 }
 
+
 .half {
   flex-basis: 50%;
   display: flex;
@@ -87,3 +88,37 @@
   padding-bottom: 3.75em;
   gap: 0.5em;
 }
+
+.socialMediaGrid {
+  display: grid;
+  gap: 20px;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  align-items: start;
+}
+
+.socialMediaItem {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+
+.socialMediaLabel {
+  font-weight: 600;
+}
+
+.socialMediaInput {
+  height: 36px;
+  padding: 0 10px;
+  border: 1px solid #b8b8b8;
+  border-radius: 6px;
+  background: #ffffff;
+}
+
+.gridItemFull {
+  grid-column: 1 / -1;
+}
+
+.gridItemFull .socialGrid {
+  max-width:max-content ;
+}

frontend/src/PagesAdmin/EventCreatorAdminPage/EventCreatorAdminPage.tsx

@@ -22,6 +22,7 @@ import {
   Textarea,
 } from '~/Components';
 import type { DropdownOption } from '~/Components/Dropdown/Dropdown';
+import { FormDescription } from '~/Components/Forms/Form';
 import { ImagePicker } from '~/Components/ImagePicker/ImagePicker';
 import { type Tab, TabBar } from '~/Components/TabBar/TabBar';
 import { getEvent, getVenues, postEvent } from '~/api';
@@ -35,7 +36,7 @@ import { EventAgeRestriction, type EventAgeRestrictionValue, EventCategory, type
 import { dbT, getAgeRestrictionKey, getEventCategoryKey, lowerCapitalize, utcTimestampToLocal } from '~/utils';
 import { AdminPageLayout } from '../AdminPageLayout/AdminPageLayout';
 import styles from './EventCreatorAdminPage.module.scss';
-import { eventSchema } from './EventCreatorSchema';
+import { type EventFormType, eventSchema } from './EventCreatorSchema';
 import { PaymentForm } from './components/PaymentForm';
 
 // Define the Zod schema for event validation
@@ -51,6 +52,20 @@ type EventCreatorStep = {
   validate: (data: FormType) => boolean;
 };
 
+type SocialLinkKey = Extract<
+  keyof EventFormType,
+  | 'spotify_uri'
+  | 'youtube_link'
+  | 'youtube_embed'
+  | 'facebook_link'
+  | 'soundcloud_link'
+  | 'instagram_link'
+  | 'x_link'
+  | 'lastfm_link'
+  | 'vimeo_link'
+  | 'general_link'
+>;
+
 export function EventCreatorAdminPage() {
   const { t } = useTranslation();
   const navigate = useCustomNavigate();
@@ -77,6 +92,38 @@ export function EventCreatorAdminPage() {
     label: t(getAgeRestrictionKey(age)),
   }));
 
+  const SOCIAL_KEYS: readonly SocialLinkKey[] = [
+    'spotify_uri',
+    'youtube_link',
+    'youtube_embed',
+    'facebook_link',
+    'soundcloud_link',
+    'instagram_link',
+    'x_link',
+    'lastfm_link',
+    'vimeo_link',
+    'general_link',
+  ] as const;
+
+  const SOCIAL_LABELS: Record<SocialLinkKey, string> = {
+    spotify_uri: 'Spotify URI',
+    youtube_link: 'YouTube link',
+    youtube_embed: 'YouTube embed',
+    facebook_link: 'Facebook link',
+    soundcloud_link: 'SoundCloud link',
+    instagram_link: 'Instagram link',
+    x_link: 'X link',
+    lastfm_link: 'Last.fm link',
+    vimeo_link: 'Vimeo link',
+    general_link: t(KEY.event_general_link),
+  };
+
+  const SOCIAL_MEDIA_HELP: Partial<Record<SocialLinkKey, string>> = {
+    spotify_uri: t(KEY.event_spotify_uri_help),
+    youtube_link: t(KEY.event_youtube_link_help),
+    youtube_embed: t(KEY.event_youtube_embed_help),
+  };
+
   // Setup React Hook Form
   const form = useForm<FormType>({
     resolver: zodResolver(eventSchema),
@@ -99,6 +146,16 @@ export function EventCreatorAdminPage() {
       ticket_type: undefined,
       custom_tickets: [],
       billig_id: undefined,
+      spotify_uri: '',
+      youtube_link: '',
+      youtube_embed: '',
+      soundcloud_link: '',
+      instagram_link: '',
+      facebook_link: '',
+      x_link: '',
+      lastfm_link: '',
+      vimeo_link: '',
+      general_link: '',
       image: undefined,
       visibility_from_dt: '',
       visibility_to_dt: '',
@@ -139,6 +196,16 @@ export function EventCreatorAdminPage() {
             visibility_from_dt: eventData.visibility_from_dt
               ? utcTimestampToLocal(eventData.visibility_from_dt, false)
               : '',
+            spotify_uri: eventData.spotify_uri || '',
+            youtube_link: eventData.youtube_link || '',
+            youtube_embed: eventData.youtube_embed || '',
+            facebook_link: eventData.facebook_link || '',
+            soundcloud_link: eventData.soundcloud_link || '',
+            instagram_link: eventData.instagram_link || '',
+            x_link: eventData.x_link || '',
+            lastfm_link: eventData.lastfm_link || '',
+            vimeo_link: eventData.vimeo_link || '',
+            general_link: eventData.general_link || '',
           });
           setShowSpinner(false);
         })
@@ -458,6 +525,42 @@ export function EventCreatorAdminPage() {
         </>
       ),
     },
+    // Social media links
+    {
+      key: 'socialmedia',
+      title_nb: 'Sosiale medier',
+      title_en: 'Social media',
+      validate: () => {
+        const socialFields = SOCIAL_KEYS;
+        return !socialFields.some((name) => !!form.formState.errors[name]);
+      },
+      template: (
+        <div className={styles.socialMediaGrid}>
+          {SOCIAL_KEYS.map((name) => (
+            <FormField
+              key={name}
+              name={name}
+              control={form.control}
+              render={({ field }) => (
+                <FormItem className={styles.socialMediaItem}>
+                  <FormLabel className={styles.socialMediaLabel}>{SOCIAL_LABELS[name]}</FormLabel>
+                  <FormControl>
+                    <input
+                      className={styles.socialMediaInput}
+                      type="text"
+                      {...field}
+                      placeholder={name === 'spotify_uri' ? 'spotify:...' : 'http://...'}
+                    />
+                  </FormControl>
+                  {SOCIAL_MEDIA_HELP[name] ? <FormDescription>{SOCIAL_MEDIA_HELP[name]}</FormDescription> : null}
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          ))}
+        </div>
+      ),
+    },
     // Graphics.
     {
       key: 'graphics',

frontend/src/PagesAdmin/EventCreatorAdminPage/EventCreatorSchema.ts

@@ -4,28 +4,32 @@ import {
   EVENT_BILLIG_ID,
   EVENT_CAPACITY,
   EVENT_CATEGORY,
+  EVENT_CUSTOM_TICKET,
   EVENT_DESCRIPTION_LONG,
   EVENT_DESCRIPTION_SHORT,
   EVENT_DURATION,
   EVENT_END_DT,
+  EVENT_FACEBOOK_LINK,
+  EVENT_GENERAL_LINK,
   EVENT_HOST,
+  EVENT_INSTAGRAM_LINK,
+  EVENT_LASTFM_LINK,
   EVENT_LOCATION,
   EVENT_REGISTRATION_URL,
+  EVENT_SOUNDCLOUD_LINK,
+  EVENT_SPOTIFY_URI,
   EVENT_START_DT,
   EVENT_TICKET_TYPE,
   EVENT_TITLE,
+  EVENT_VIMEO_LINK,
   EVENT_VISIBILITY_FROM_DT,
   EVENT_VISIBILITY_TO_DT,
+  EVENT_X_LINK,
+  EVENT_YOUTUBE_EMBED,
+  EVENT_YOUTUBE_LINK,
 } from '~/schema/event';
 import { OPTIONAL_IMAGE } from '~/schema/samfImage';
 
-const event_custom_ticket = z.object({
-  id: z.number(),
-  name_nb: z.string().min(1),
-  name_en: z.string().min(1),
-  price: z.number().min(0),
-});
-
 export const eventSchema = z.object({
   // text and description
   title_nb: EVENT_TITLE,
@@ -45,9 +49,20 @@ export const eventSchema = z.object({
   // Payment/registration
   age_restriction: EVENT_AGE_RESTRICTION,
   ticket_type: EVENT_TICKET_TYPE,
-  custom_tickets: z.array(event_custom_ticket).optional(),
+  custom_tickets: z.array(EVENT_CUSTOM_TICKET).optional(),
   registration_url: EVENT_REGISTRATION_URL,
   billig_id: EVENT_BILLIG_ID,
+  // Social media links
+  spotify_uri: EVENT_SPOTIFY_URI,
+  youtube_link: EVENT_YOUTUBE_LINK,
+  youtube_embed: EVENT_YOUTUBE_EMBED,
+  facebook_link: EVENT_FACEBOOK_LINK,
+  soundcloud_link: EVENT_SOUNDCLOUD_LINK,
+  instagram_link: EVENT_INSTAGRAM_LINK,
+  x_link: EVENT_X_LINK,
+  lastfm_link: EVENT_LASTFM_LINK,
+  vimeo_link: EVENT_VIMEO_LINK,
+  general_link: EVENT_GENERAL_LINK,
   // Graphics
   image: OPTIONAL_IMAGE,
   // Summary/Publication date

frontend/src/dto.ts

@@ -196,6 +196,17 @@ export type EventDto = {
   // Used to create new event with using id of existing imagedto
   image?: ImageDto;
   capacity?: number;
+
+  spotify_uri: string;
+  youtube_link: string;
+  youtube_embed: string;
+  facebook_link: string;
+  soundcloud_link: string;
+  instagram_link: string;
+  x_link: string;
+  lastfm_link: string;
+  vimeo_link: string;
+  general_link: string;
 };
 
 export type EventGroupDto = {

frontend/src/i18n/constants.ts

@@ -281,6 +281,10 @@ export const KEY = {
 
   // EventPage:
   event_registration_url: 'event_registration_url',
+  event_general_link: 'event_general_link',
+  event_spotify_uri_help: 'event_spotify_uri_help',
+  event_youtube_link_help: 'event_youtube_link_help',
+  event_youtube_embed_help: 'event_youtube_embed_help',
   event_add_ticket: 'event_add_ticket',
 
   // Purchase Ticket Info:

frontend/src/i18n/translations.ts

@@ -270,6 +270,11 @@ export const nb = prepareTranslations({
 
   // EventPage:
   [KEY.event_registration_url]: 'Registreringslenke',
+  [KEY.event_general_link]: 'Generell lenke',
+  [KEY.event_spotify_uri_help]:
+    'Legg til spotify URI-en til en spilleliste, og en widget med denne listen vil dukke opp på arrangementsiden.',
+  [KEY.event_youtube_link_help]: 'Legg til Youtube-film som skal linkes til',
+  [KEY.event_youtube_embed_help]: 'Legg til Youtube-film som skal embeddes, så vil den vises på arrangementsiden.',
   [KEY.event_add_ticket]: 'Legg til billett',
 
   // Event categories
@@ -962,6 +967,11 @@ export const en = prepareTranslations({
 
   // EventPage:
   [KEY.event_registration_url]: 'Registration URL',
+  [KEY.event_general_link]: 'General Link',
+  [KEY.event_spotify_uri_help]:
+    'Add the Spotify URI of a playlist, and a widget will appear on the event page with the chosen playlist.',
+  [KEY.event_youtube_link_help]: 'Add a link to a Youtube movie',
+  [KEY.event_youtube_embed_help]: 'Add a link to a Youtube movie to be embedded, and it will appear on the event page.',
   [KEY.event_add_ticket]: 'Add ticket',
 
   //Purchase Ticket Info: