+ {
+ showTopicsFilter &&
+
+ }
{
showLocation &&
}
{
showTimeFilter &&
-
+
}
{
diff --git a/src/js/react/apps/linkedevents/containers/SelectionsContainer.tsx b/src/js/react/apps/linkedevents/containers/SelectionsContainer.tsx
index 39d74d089..af62090c5 100644
--- a/src/js/react/apps/linkedevents/containers/SelectionsContainer.tsx
+++ b/src/js/react/apps/linkedevents/containers/SelectionsContainer.tsx
@@ -7,6 +7,7 @@ import FilterButton from '@/react/common/FilterButton';
import {
resetFormAtom,
locationSelectionAtom,
+ topicSelectionAtom,
freeFilterAtom,
remoteFilterAtom,
startDateAtom,
@@ -29,9 +30,10 @@ const SelectionsContainer = ({ url }: SelectionsContainerProps) => {
const startDate = useAtomValue(startDateAtom);
const endDate = useAtomValue(endDateAtom);
const [locationSelection, setLocationSelection] = useAtom(locationSelectionAtom);
+ const [topicsSelection, setTopicsSelection] = useAtom(topicSelectionAtom);
const resetForm = useSetAtom(resetFormAtom);
- const showClearButton = locationSelection.length || startDate || endDate || freeFilter || remoteFilter;
+ const showClearButton = locationSelection.length || topicsSelection.length || startDate || endDate || freeFilter || remoteFilter;
if (!url) {
return null;
@@ -39,6 +41,12 @@ const SelectionsContainer = ({ url }: SelectionsContainerProps) => {
return (
+
{
showTimeFilter: settings?.field_event_time,
showFreeFilter: settings?.field_free_events,
showRemoteFilter: settings?.field_remote_events,
+ showTopicsFilter: settings?.field_filter_keywords.length > 0,
eventCount: Number(settings?.field_event_count)
};
const locations = transformLocations(settings?.places);
+ const topics: Topic[] = settings?.field_filter_keywords.map(topic => ({
+ value: topic.id,
+ label: topic.name.charAt(0).toUpperCase() + topic.name.slice(1),
+ }));
let baseUrl;
let initialParams;
@@ -76,6 +82,7 @@ const createBaseAtom = () => {
initialUrl: eventsApiUrl,
initialParams,
locations,
+ topics,
eventListTitle,
eventsPublicUrl,
};
@@ -101,6 +108,10 @@ export const locationAtom = atom(
(get) => get(baseAtom)?.locations
);
+export const topicsAtom = atom(
+ (get) => get(baseAtom)?.topics
+);
+
export const titleAtom = atom(
(get) => get(baseAtom)?.eventListTitle
);
@@ -115,6 +126,8 @@ export const settingsAtom = atom(
showLocation: false,
showRemoteFilter: false,
showTimeFilter: false,
+ showTopicsFilter: false,
+ topics: [],
eventCount: 3
}
);
@@ -127,6 +140,8 @@ export const paramsAtom = atom(new URLSearchParams());
export const locationSelectionAtom = atom([] as OptionType[]);
+export const topicSelectionAtom = atom([]);
+
export const startDateAtom = atom(undefined);
export const endDateAtom = atom(undefined);
@@ -146,6 +161,7 @@ export const resetFormAtom = atom(null, (get, set) => {
const initialParams = get(initialParamsAtom);
set(locationSelectionAtom, []);
+ set(topicSelectionAtom, []);
set(startDateAtom, undefined);
set(endDateAtom, undefined);
set(endDisabledAtom, false);
diff --git a/src/js/react/apps/linkedevents/types/FilterSettings.ts b/src/js/react/apps/linkedevents/types/FilterSettings.ts
index 071e956a5..1b69f4558 100644
--- a/src/js/react/apps/linkedevents/types/FilterSettings.ts
+++ b/src/js/react/apps/linkedevents/types/FilterSettings.ts
@@ -1,8 +1,11 @@
+import Topic from './Topic';
+
type FilterSettings = {
showLocation: boolean,
showTimeFilter: boolean,
showFreeFilter: boolean,
showRemoteFilter: boolean,
+ showTopicsFilter: boolean,
eventCount: number
};
diff --git a/src/js/react/apps/linkedevents/types/Topic.ts b/src/js/react/apps/linkedevents/types/Topic.ts
new file mode 100644
index 000000000..b95121dd1
--- /dev/null
+++ b/src/js/react/apps/linkedevents/types/Topic.ts
@@ -0,0 +1,7 @@
+
+export type Topic = {
+ value: string,
+ label: string
+};
+
+export default Topic;
diff --git a/src/js/types/drupalSettings.d.ts b/src/js/types/drupalSettings.d.ts
index e4bd1766f..a14efea0a 100644
--- a/src/js/types/drupalSettings.d.ts
+++ b/src/js/types/drupalSettings.d.ts
@@ -15,6 +15,10 @@ declare namespace drupalSettings {
field_free_events: boolean,
field_remote_events: boolean,
field_event_count: string,
+ field_filter_keywords: {
+ id: string,
+ name: string,
+ }[],
places: {
[key:string]: {
id: string,
diff --git a/src/scss/06_components/paragraphs/_event-list.scss b/src/scss/06_components/paragraphs/_event-list.scss
index 326e6c0e7..34c81471d 100644
--- a/src/scss/06_components/paragraphs/_event-list.scss
+++ b/src/scss/06_components/paragraphs/_event-list.scss
@@ -33,6 +33,7 @@ $tag-vertical-padding: 5px;
}
.event-form__filter--location,
+ .event-form__filter--topics,
.event-form__filter--date {
flex-basis: 100%;