#175: add conference performance overview at the edit-conference page

src/components/conference/ConferencePerformanceView.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+    import ConferencePerformanceCard from "./conference-performance-card/ConferencePerformanceCard.svelte";
+    import {formatDate} from "../../utils/date-time-utils";
+    import type {IFormatOptions} from "../../utils/date-time-utils";
+    import type {IPerformance} from "../../model/event";
+
+    interface IPerformanceMapByDate {
+	    [key: string]: IPerformance[];
+    }
+
+	export let performances: IPerformance[];
+	export let onOpenModal: (key: string) => void;
+
+    const formatOption: IFormatOptions = { weekday: 'long', day: '2-digit', month: 'long' };
+    $: allDates = Array.from(
+	    new Set((performances || []).map(
+			(p) => formatDate(p.dateAndTime, formatOption))
+        )
+    );
+
+    $: performanceMapByDate = allDates?.reduce((previousValue, currentValue) => {
+	    const filtered = (performances || []).filter(
+		    (p) => formatDate(p.dateAndTime, formatOption) === currentValue
+	    );
+	    if (filtered !== undefined) {
+		    return {
+			    ...previousValue,
+			    [currentValue]: filtered
+		    };
+	    }
+    }, undefined as IPerformanceMapByDate | undefined);
+
+</script>
+
+
+{#if allDates.length > 0 && performanceMapByDate}
+    <div class="conference-details-main-content-miles-bidrag">
+        <h2>Miles bidrag</h2>
+        <div class="miles-bidrag-content light-gray-bg-color">
+            {#each allDates as date}
+                <h3 class="date">{date}</h3>
+                <div class="miles-bidrag-content-per-day">
+                    {#each performanceMapByDate[date] as performance}
+                        <ConferencePerformanceCard {performance} handleModal={onOpenModal} />
+                    {/each}
+                </div>
+            {/each}
+        </div>
+    </div>
+{/if}
+
+
+<style lang="scss">
+	h2 {
+		font-size: 1.3rem;
+		font-weight: 500;
+	}
+	h3 {
+		font-size: 1rem;
+		margin: 0;
+	}
+
+	.conference-details-main-content-miles-bidrag {
+		display: flex;
+		flex-direction: column;
+
+		.date {
+			text-transform: uppercase;
+			font-weight: 600;
+		}
+
+		.miles-bidrag-content {
+			border-radius: 1rem;
+			padding: 1.5rem;
+			.miles-bidrag-content-per-day {
+				display: flex;
+				flex-direction: column;
+				gap: 1rem;
+				padding-bottom: 1rem;
+			}
+		}
+	}
+
+	// Desktop
+	@media (min-width: 900px) {
+		.conference-details-main-content-miles-bidrag {
+			.miles-bidrag-content {
+				.miles-bidrag-content-per-day {
+					display: grid;
+					grid-template-columns: repeat(2, 1fr);
+				}
+			}
+		}
+	}
+</style>

src/components/conference/NewConference/Page/PerformanceModal/SubmitRow.svelte

@@ -9,7 +9,9 @@
 	    perfType,
 	    perfLocation,
 	    perfTitle,
-	    authorName, authorEmail
+	    authorName,
+        authorEmail,
+        _key
     } from "../../stores/performancesStore";
 	import type {NewPerformance} from "../../stores/performancesStore";
     import darkTheme from "../../../../../stores/theme-store";
@@ -27,8 +29,6 @@
 
 		if (!$invalidFields.length) {
 			const newPerformance: NewPerformance = {
-				/*_key: "IAMAPERFORMANCE-KEY-" + makeid(16),*/
-                /*_type: "performance",*/
 				date: $perfTime,
 				dateAndTime: $perfTime?.toISOString(),
                 location: $perfLocation,

src/components/conference/NewConference/stores/performancesStore.ts

@@ -72,20 +72,20 @@ export const createPerformancesStore = () => {
                 set([]);
 
             } else {
+				console.log("Inserting newPerformances...", newPerformances);
                 set(newPerformances.map(normalizeStorePerformance));
             }
         }
     }
 }
 
-const normalizeStorePerformance = (p:NewPerformance): NewPerformance => {
-    console.log(`Init performance from data:\n\ttitle: ${p.submission.title}\n\tdateAndTime: ${p.dateAndTime}`);
-    if (!p.date) {
+const normalizeStorePerformance = (performance:NewPerformance): NewPerformance => {
+    //console.log(`Init performance from data:\n\ttitle: ${p.submission.title}\n\tdateAndTime: ${p.dateAndTime}`);
+    if (!performance.date) {
 		// TODO: Handling missing dateAndTime?
-        p.date = new Date(p.dateAndTime);
-        console.log(`\t--> date:    ${p.date}`);
+        performance.date = new Date(performance.dateAndTime);
     }
-    return p;
+    return performance;
 }
 
 
@@ -100,19 +100,23 @@ export const perfTime: Writable<Date|null> = writable( null);
 export const perfDuration: Writable<number|null> = writable(null);
 export const perfDescription: Writable<string> = writable('');
 
+export const _key: Writable<string|undefined> = writable();
+
 export const perfTimeIsSet: Writable<boolean> = writable(false);
 
 
 
 export const initPerformanceStore = (initValues?:NewPerformance):void => {
-	perfTitle.set(initValues?.submission?.title ?? '');
-	authorName.set(((initValues?.submission?.authors || [])[0] || {}).name);
-	authorEmail.set(((initValues?.submission?.authors || [])[0] || {}).email);
-	perfType.set(initValues?.submission?.submissionType);
+	const submission = initValues?.submission;
+	perfTitle.set(submission?.title ?? '');
+	authorName.set(((submission?.authors || [])[0] || {}).name);
+	authorEmail.set(((submission?.authors || [])[0] || {}).email);
+	perfType.set(submission?.submissionType);
 	perfLocation.set(initValues?.location ?? '');
 	perfTime.set(initValues?.date ?? null);
-	perfDuration.set(initValues?.submission?.duration ?? null);
-	perfDescription.set(((((initValues?.submission?.description || [])[0] || {}).children || [])[0] || {}).text ?? '');
+	perfDuration.set(submission?.duration ?? null);
+	perfDescription.set(((((submission?.description || [])[0] || {}).children || [])[0] || {}).text ?? '');
+	_key.set(initValues?._key ?? undefined);
 
 	// TODO: true if some dateAndTime condition confirms incoming performance time is set?
 	perfTimeIsSet.set(false);

src/components/conference/conference-perfermance-card/ConferencePerformanceCard.svelte → src/components/conference/conference-performance-card/ConferencePerformanceCard.svelte

@@ -19,18 +19,18 @@
 	$: date = new Date(dateAndTime);
 	$: time = `${date.getHours()}:${date.getMinutes()}`;
 	$: authorsName = authors.map((author) => author.name);
-	$: ariaLabel = `${submission.title} av ${authorsName}. Klokke ${time} i ${location}`;
+	$: ariaLabel = `${submission.title} av ${authorsName}. Klokken ${time} i ${location}`;
 </script>
 
 <div
-	class="conference-perfermance-card-container"
+	class="conference-performance-card-container"
 	role="button"
 	tabindex={0}
 	on:click={() => handleModal(performance._key)}
 	on:keypress={() => handleModal(performance._key)}
 	aria-label={ariaLabel}
 >
-	<div class="content conference-perfermance-card-content" aria-hidden={true}>
+	<div class="content conference-performance-card-content" aria-hidden={true}>
 		<div class="date-location-container">
 			<div class="date-location">
 				{#if dateAndTime}
@@ -66,7 +66,7 @@
 </div>
 
 <style lang="scss">
-	.conference-perfermance-card-container {
+	.conference-performance-card-container {
 		.content {
 			padding: 1rem;
 			border-radius: 0.5rem;

src/lib/sanityClient.ts

@@ -97,6 +97,7 @@ export async function fetchConference(slug: string): Promise<IConference> {
             "imageUrl": image.asset->url,
             performances[] | order(dateAndTime asc)
             {...,
+                _key,
                 submission->{
                     ...,
                     "slug": slug.current,

src/lib/server/sanityClient.ts

@@ -278,6 +278,7 @@ async function addPerformance(performance?: {
 	const performanceDoc = {
 		dateAndTime: performance?.dateAndTime,
 		location: performance?.location,
+		_key: makeid(12),
 		submission: {
 			_ref: submissionId,
 			_type: SANITY_REFERENCE_TYPE

src/routes/konferanser/[slug]/+page.svelte

@@ -14,12 +14,13 @@
 	import { PortableText } from '@portabletext/svelte';
 	import NoImage from '../../../components/no-image/NoImage.svelte';
 	import type { IPerformance } from '../../../model/event';
-	import ConferencePerformanceCard from '../../../components/conference/conference-perfermance-card/ConferencePerformanceCard.svelte';
+	import ConferencePerformanceCard from '../../../components/conference/conference-performance-card/ConferencePerformanceCard.svelte';
 	import { formatDate, type IFormatOptions } from '../../../utils/date-time-utils';
 	import PerformanceModal from '../../../components/modal/performance-modal/PerformanceModal.svelte';
 	import ConferenceCategoryTag from '../../../components/tag/conference-category-tag/ConferenceCategoryTag.svelte';
 	import { updateEmployeesStatus } from '../../../utils/conference-utils';
 	import type { ToastDataType } from '../../../components/conference/NewConference/submitHandler';
+	import ConferencePerformanceView from "../../../components/conference/ConferencePerformanceView.svelte";
 
 	interface IPerformanceMapByDate {
 		[key: string]: IPerformance[];
@@ -176,21 +177,7 @@
 					</div>
 				{/if}
 
-				{#if allDates.length > 0 && performanceMapByDate}
-					<div class="conference-details-main-content-miles-bidrag">
-						<h2>Miles bidrag</h2>
-						<div class="miles-bidrag-content light-gray-bg-color">
-							{#each allDates as date}
-								<h3 class="date">{date}</h3>
-								<div class="miles-bidrag-content-per-day">
-									{#each performanceMapByDate[date] as performance}
-										<ConferencePerformanceCard {performance} handleModal={onOpenModal} />
-									{/each}
-								</div>
-							{/each}
-						</div>
-					</div>
-				{/if}
+                <ConferencePerformanceView performances={conference.performances} onOpenModal={onOpenModal} />
 			</Content>
 		</Paper>
 

src/routes/konferanser/[slug]/rediger/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { IConference } from '../../../../model/conference';
-	import {displayModal, initStore} from '../../../../components/conference/NewConference/stores/stores';
+	import {displayModal, initStore, performances} from '../../../../components/conference/NewConference/stores/stores';
 	import ConferenceEditor from '../../../../components/conference/NewConference/Page/ConferenceEditor.svelte';
 	import { getEditedConferenceSubmitter } from '../../../../components/conference/NewConference/submit';
 	import ButtonFooterRow from '../../../../components/conference/NewConference/Page/ButtonFooterRow.svelte';
@@ -13,6 +13,7 @@
 	import { Icon } from '@smui/common';
 	import NewPerformanceModal
 		from "../../../../components/conference/NewConference/Page/PerformanceModal/NewPerformanceModal.svelte";
+	import ConferencePerformanceView from "../../../../components/conference/ConferencePerformanceView.svelte";
 	const toastContext: IToastContextProps = getContext('toastContext');
 
 	export let data: EditConferenceData;
@@ -36,6 +37,7 @@
 		performances: conference?.performances || [],
 		image: conference?.imageUrl ? urlFor(conference.imageUrl).url() : ''
 	});
+
 	const submitEditedConference = getEditedConferenceSubmitter(toastContext, conference.slug);
 </script>
 
@@ -46,6 +48,7 @@
 </div>
 <Heading>Redigere konferanse</Heading>
 <ConferenceEditor />
+<ConferencePerformanceView performances={$performances} onOpenModal={()=>alert("IMPLEMENT ME!")} />
 <ButtonFooterRow submitText="Oppdater konferanse" submit={submitEditedConference} />
 {#if $displayModal}
     <NewPerformanceModal />