edb/neuf-www
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

draft for showing active filters

Browse Source
This commit is contained in:
Jonas Braathen
2024-07-10 18:36:05 +02:00
parent 6dc5c26165
commit b819796e29
5 changed files with 63 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/components/events/EventContainer.tsx
View File

@ -2,7 +2,7 @@
import { useQueryState, parseAsStringLiteral, parseAsString } from "nuqs";
import { EventItem } from "./EventItem";
import { EventFilter } from "./EventFilter";
import { EventFilter, EventFilterExplained } from "./EventFilter";
import {
EventFragment,
EventCategory,
@ -140,6 +140,14 @@ export const EventContainer = ({
activeVenue={venue}
isVisible={showFilter}
/>
<EventFilterExplained
eventCategories={filterableCategories}
activeCategory={category}
eventOrganizers={filterableOrganizers}
activeOrganizer={organizer}
venues={filterableVenues}
activeVenue={venue}
/>
{mode === "list" && <EventList events={filteredEvents} />}
{mode === "calendar" && <EventCalendar events={filteredEvents} />}
</div>
@ -147,6 +155,8 @@ export const EventContainer = ({
);
};
const ActiveFilterExplained = ({})
const EventList = ({ events }: { events: EventFragment[] }) => {
return (
<ul className={styles.eventList}>

47
web/src/components/events/EventFilter.tsx
View File

@ -105,3 +105,50 @@ export const EventFilter = ({
</div>
);
};
export const EventFilterExplained = ({
eventCategories,
activeCategory,
eventOrganizers,
activeOrganizer,
venues,
activeVenue,
}: {
eventCategories: EventCategory[];
activeCategory: string | null;
eventOrganizers: EventOrganizer[];
activeOrganizer: string | null;
venues: VenueFragment[];
activeVenue: string | null;
}) => {
const category =
activeCategory && eventCategories.find((x) => x.slug === activeCategory);
const organizer =
activeOrganizer && eventOrganizers.find((x) => x.slug === activeOrganizer);
const venue = activeVenue && venues.find((x) => x.slug === activeVenue);
let text = "";
if (category && organizer && venue) {
text = `${category.name} arrangert av ${organizer.name} ${venue.preposition} ${venue.title}`;
} else if (category && organizer) {
text = `${category.name} arrangert av ${organizer.name}`;
} else if (category) {
text = `Kategori: ${category.name}`;
} else if (organizer && venue) {
text = `Arrangeres av ${organizer.name} ${venue.preposition} ${venue.title}`;
} else if (organizer) {
text = `Arrangeres av ${organizer.name}`;
} else if (venue) {
text = `Arrangementer ${venue.preposition} ${venue.title}`;
}
if (text === "") {
return <></>;
}
return (
<div className={styles.eventFilterExplained}>
<h2>{text}</h2>
</div>
);
};

4
web/src/gql/gql.ts
View File

@ -38,7 +38,7 @@ const documents = {
"\n fragment Image on CustomImage {\n id\n url\n width\n height\n alt\n attribution\n }\n": types.ImageFragmentDoc,
"\n fragment ContactEntity on ContactEntity {\n id\n name\n contactType\n title\n email\n phoneNumber\n image {\n ...Image\n }\n }\n": types.ContactEntityFragmentDoc,
"\n fragment Event on EventPage {\n __typename\n id\n slug\n title\n body {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n }\n featuredImage {\n ...Image\n }\n pig\n facebookUrl\n ticketUrl\n free\n priceRegular\n priceMember\n priceStudent\n categories {\n ... on EventCategory {\n name\n slug\n pig\n }\n }\n occurrences {\n ... on EventOccurrence {\n __typename\n id\n start\n end\n venue {\n __typename\n id\n slug\n title\n preposition\n url\n }\n }\n }\n organizers {\n ... on EventOrganizer {\n id\n name\n slug\n externalUrl\n association {\n ... on AssociationPage {\n url\n }\n }\n }\n }\n }\n": types.EventFragmentDoc,
"\n query futureEvents {\n events: eventIndex {\n ... on EventIndex {\n futureEvents {\n ... on EventPage {\n ...Event\n }\n }\n }\n }\n eventCategories: eventCategories {\n ... on EventCategory {\n name\n slug\n showInFilters\n }\n }\n eventOrganizers: eventOrganizers {\n ... on EventOrganizer {\n id\n name\n slug\n externalUrl\n association {\n ... on AssociationPage {\n url\n }\n }\n }\n }\n venues: pages(contentType: \"venues.VenuePage\") {\n ... on VenuePage {\n id\n title\n slug\n }\n }\n }\n": types.FutureEventsDocument,
"\n query futureEvents {\n events: eventIndex {\n ... on EventIndex {\n futureEvents {\n ... on EventPage {\n ...Event\n }\n }\n }\n }\n eventCategories: eventCategories {\n ... on EventCategory {\n name\n slug\n showInFilters\n }\n }\n eventOrganizers: eventOrganizers {\n ... on EventOrganizer {\n id\n name\n slug\n externalUrl\n association {\n ... on AssociationPage {\n url\n }\n }\n }\n }\n venues: pages(contentType: \"venues.VenuePage\") {\n ... on VenuePage {\n id\n title\n slug\n preposition\n }\n }\n }\n": types.FutureEventsDocument,
"\n fragment News on NewsPage {\n __typename\n id\n slug\n title\n firstPublishedAt\n excerpt\n featuredImage {\n ...Image\n }\n body {\n ...Blocks\n }\n }\n": types.NewsFragmentDoc,
"\n fragment NewsIndex on NewsIndex {\n __typename\n id\n slug\n title\n lead\n }\n": types.NewsIndexFragmentDoc,
"\n query news {\n index: newsIndex {\n ... on NewsIndex {\n ...NewsIndex\n }\n }\n news: pages(contentType: \"news.NewsPage\") {\n ... on NewsPage {\n ...News\n }\n }\n }\n": types.NewsDocument,
@ -165,7 +165,7 @@ export function graphql(source: "\n fragment Event on EventPage {\n __typena
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n query futureEvents {\n events: eventIndex {\n ... on EventIndex {\n futureEvents {\n ... on EventPage {\n ...Event\n }\n }\n }\n }\n eventCategories: eventCategories {\n ... on EventCategory {\n name\n slug\n showInFilters\n }\n }\n eventOrganizers: eventOrganizers {\n ... on EventOrganizer {\n id\n name\n slug\n externalUrl\n association {\n ... on AssociationPage {\n url\n }\n }\n }\n }\n venues: pages(contentType: \"venues.VenuePage\") {\n ... on VenuePage {\n id\n title\n slug\n }\n }\n }\n"): (typeof documents)["\n query futureEvents {\n events: eventIndex {\n ... on EventIndex {\n futureEvents {\n ... on EventPage {\n ...Event\n }\n }\n }\n }\n eventCategories: eventCategories {\n ... on EventCategory {\n name\n slug\n showInFilters\n }\n }\n eventOrganizers: eventOrganizers {\n ... on EventOrganizer {\n id\n name\n slug\n externalUrl\n association {\n ... on AssociationPage {\n url\n }\n }\n }\n }\n venues: pages(contentType: \"venues.VenuePage\") {\n ... on VenuePage {\n id\n title\n slug\n }\n }\n }\n"];
export function graphql(source: "\n query futureEvents {\n events: eventIndex {\n ... on EventIndex {\n futureEvents {\n ... on EventPage {\n ...Event\n }\n }\n }\n }\n eventCategories: eventCategories {\n ... on EventCategory {\n name\n slug\n showInFilters\n }\n }\n eventOrganizers: eventOrganizers {\n ... on EventOrganizer {\n id\n name\n slug\n externalUrl\n association {\n ... on AssociationPage {\n url\n }\n }\n }\n }\n venues: pages(contentType: \"venues.VenuePage\") {\n ... on VenuePage {\n id\n title\n slug\n preposition\n }\n }\n }\n"): (typeof documents)["\n query futureEvents {\n events: eventIndex {\n ... on EventIndex {\n futureEvents {\n ... on EventPage {\n ...Event\n }\n }\n }\n }\n eventCategories: eventCategories {\n ... on EventCategory {\n name\n slug\n showInFilters\n }\n }\n eventOrganizers: eventOrganizers {\n ... on EventOrganizer {\n id\n name\n slug\n externalUrl\n association {\n ... on AssociationPage {\n url\n }\n }\n }\n }\n venues: pages(contentType: \"venues.VenuePage\") {\n ... on VenuePage {\n id\n title\n slug\n preposition\n }\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/

4
web/src/gql/graphql.ts
View File

File diff suppressed because one or more lines are too long

1
web/src/lib/event.ts
View File

@ -123,6 +123,7 @@ export const futureEventsQuery = graphql(`
id
title
slug
preposition
}
}
}