286 add filtering to events

backend/samfundet/utils.py

@@ -1,7 +1,7 @@
 from __future__ import annotations
 from typing import Sequence
 from django.http import QueryDict
-from django.db.models import Q
+from django.db.models import Q, CharField, TextField
 from django.db.models.query import QuerySet
 from django.contrib.auth.models import Group
 
@@ -103,6 +103,30 @@ def groups_to_dataclass(*, groups: Sequence[Group]) -> list[GroupDto]:
 ###
 
 
+def general_search(events_query: QuerySet, search_term: str, types: tuple = (CharField, TextField)) -> QuerySet:
+    """
+
+    Args:
+        events_query: Event object
+        search_term: What to search for
+        types: What fields to search in
+
+    Returns:
+        Filtered QuerySet
+
+    """
+    qs = Q()
+    for field in events_query.model._meta.fields:
+        for typ in types:
+            if isinstance(field, typ):
+                qs = qs | Q(**{field.name + '__icontains': search_term})
+
+    return events_query.filter(qs)
+
+
+###
+
+
 def eventgroup_to_dataclass(*, event_group: EventGroup) -> EventGroupDto:
     return EventGroupDto(id=event_group.id, name=event_group.name)
 

backend/samfundet/views.py

@@ -13,6 +13,7 @@
 from django.utils.decorators import method_decorator
 from django.contrib.auth.models import Group
 from django.views.decorators.csrf import csrf_protect, ensure_csrf_cookie
+from django.db.models import Q
 
 from root.constants import XCSRFTOKEN
 
@@ -23,6 +24,7 @@
     groups_to_dataclass,
     events_to_dataclass,
     closedperiod_to_dataclass,
+    general_search,
 )
 
 from .models import (
@@ -85,9 +87,39 @@ class EventView(ModelViewSet):
 class EventPerDayView(APIView):
     permission_classes = [AllowAny]
 
+    def url_args(self, query_word: str) -> str:
+        """
+
+        Args:
+            query_word: url query param key
+
+        Returns:
+            url value for param key
+
+        """
+        query = self.request.GET.get(query_word, None)
+        if query is None:
+            return ''
+        return query.split(',')[0]
+
+    def status_group(self) -> str:
+        """
+
+        Returns: Archived or active events, true/false in url query
+
+        """
+        if self.request.GET.get('archived', None) != 'true':
+            return 'archived'
+        return 'active'
+
     def get(self, request: Request) -> Response:
         events: dict = {}
-        for event in Event.objects.all().values():
+        events_query = Event.objects.all()
+
+        if '?' in self.request.build_absolute_uri():
+            events_query = general_search(events_query, self.url_args('search')).filter(Q(location__contains=self.url_args('location')))
+
+        for event in events_query.order_by('start_dt').filter(status_group=self.status_group()).values():
             _data_ = event['start_dt'].strftime('%Y-%m-%d')
             events.setdefault(_data_, [])
             events[_data_].append(event)

frontend/src/Pages/EventsPage/EventsPage.module.scss

@@ -6,4 +6,54 @@
   display: flex;
   justify-content: center;
   margin-top: 20%;
-}
+}
+
+.center {
+  margin: 5%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  @include for-tablet-down {
+    margin: 5%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.container {
+  display: block;
+  position: relative;
+  padding-left: 35px;
+  margin-bottom: 12px;
+  cursor: pointer;
+  font-size: 22px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.filterColumn {
+  -webkit-column-count: 4;
+  -moz-column-count: 4;
+  column-count: 4;
+  -webkit-column-gap: 2%;
+  -moz-column-gap: 2%;
+   column-gap: 2%;
+  -webkit-column-rule: 1px solid rgba(28, 110, 164, 0.39);
+  -moz-column-rule: 1px solid rgba(28, 110, 164, 0.39);
+  column-rule: 1px solid rgba(28, 110, 164, 0.39);
+  @include for-mobile-down {
+    -webkit-column-count: 1;
+    -moz-column-count: 1;
+    column-count: 1;
+    -webkit-column-gap: 2%;
+    -moz-column-gap: 2%;
+    column-gap: 2%;
+    -webkit-column-rule: 1px solid rgba(28, 110, 164, 0.39);
+    -moz-column-rule: 1px solid rgba(28, 110, 164, 0.39);
+    column-rule: 1px solid rgba(28, 110, 164, 0.39);
+  }
+}

frontend/src/Pages/EventsPage/EventsPage.tsx

@@ -1,21 +1,60 @@
 import { useEffect, useState } from 'react';
 import { EventsList } from './components/EventsList';
-import { getEventsPerDay } from '~/api';
+import { getEventsFilter, getEventsPerDay, getVenues } from '~/api';
 import { Page } from '~/Components/Page';
-import { SamfundetLogoSpinner } from '~/Components';
+import { Button, InputField, RadioButton, SamfundetLogoSpinner } from '~/Components';
 import styles from './EventsPage.module.scss';
+import { KEY } from '~/i18n/constants';
+import { useTranslation } from 'react-i18next';
+import { Checkbox } from '~/Components/Checkbox';
+
+interface Venue {
+  id: number;
+  name: string;
+  description: string;
+}
 
 export function EventsPage() {
+  const { t } = useTranslation();
   const [events, setEvents] = useState({});
   const [showSpinner, setShowSpinner] = useState<boolean>(true);
+  const [search, setSearch] = useState('');
+  const [venues, setVenues] = useState<Venue[]>([]);
+  const [selectedVenue, setSelectedVenue] = useState('');
+  const [filterToggle, setFilterToggle] = useState(true);
+  const [archived, setArchived] = useState(false);
+
+  const handleArchived = () => {
+    setArchived(!archived);
+  };
+
+  const handleClick = () => {
+    let venue_value;
+    if (selectedVenue == 'all') {
+      venue_value = '';
+    } else {
+      venue_value = selectedVenue;
+    }
+    getEventsFilter({ search: search, location: venue_value, archived: String(archived) }).then((data) => {
+      setEvents(data);
+    });
+  };
 
   useEffect(() => {
     getEventsPerDay().then((data) => {
       setEvents(data);
       setShowSpinner(false);
     });
+
+    getVenues().then((data) => {
+      setVenues(data);
+    });
   }, []);
 
+  const handleFilterToggle = () => {
+    setFilterToggle(!filterToggle);
+  };
+
   if (showSpinner) {
     return (
       <div className={styles.spinner}>
@@ -26,6 +65,71 @@ export function EventsPage() {
 
   return (
     <Page>
+      <Button onClick={handleFilterToggle} className={styles.buttonClass}>
+        Filter
+      </Button>
+
+      {filterToggle ? (
+        <div>
+          <div>
+            <div className={styles.center}>
+              <InputField
+                type="text"
+                key={'search'}
+                onChange={(e) => {
+                  setSearch(e ? e.currentTarget.value : '');
+                }}
+                value={search}
+                placeholder={t(KEY.search_all)}
+              />
+            </div>
+
+            <label className={styles.center}>{t(KEY.select_event)}</label>
+
+            <div className={styles.filterColumn}>
+              <label className={styles.container} key={t(KEY.all_venues)}>
+                <RadioButton
+                  name="venues"
+                  value=""
+                  checked={selectedVenue.includes('all')}
+                  onChange={(event) => {
+                    if (event.target.checked) {
+                      setSelectedVenue('all');
+                    }
+                  }}
+                />
+                {t(KEY.all_venues)}
+              </label>
+
+              {venues.map((venue) => (
+                <label className={styles.container} key={venue.name}>
+                  <RadioButton
+                    name="venues"
+                    value={venue.name}
+                    checked={selectedVenue.includes(venue.name)}
+                    onChange={(event) => {
+                      if (event.target.checked) {
+                        setSelectedVenue(venue.name);
+                      }
+                    }}
+                  />
+                  {venue.name}
+                </label>
+              ))}
+            </div>
+            <label className={styles.center}>
+              <Checkbox onClick={handleArchived} />
+              {t(KEY.archived_events)}
+            </label>
+          </div>
+
+          <div className={styles.center}>
+            <Button className={styles.buttonClass} onClick={handleClick}>
+              Søk
+            </Button>
+          </div>
+        </div>
+      ) : null}
       <EventsList events={events} />
     </Page>
   );

frontend/src/api.ts

@@ -17,7 +17,7 @@ import {
   UserPreferenceDto,
   VenueDto,
 } from '~/dto';
-import { reverse } from '~/named-urls';
+import { Params, reverse } from '~/named-urls';
 import { ROUTES } from '~/routes';
 import { BACKEND_DOMAIN } from './constants';
 
@@ -122,6 +122,13 @@ export async function getEventsPerDay(): Promise<EventDto[]> {
   return response.data;
 }
 
+export async function getEventsFilter(query: Params): Promise<EventDto[]> {
+  const url = BACKEND_DOMAIN + reverse({ pattern: ROUTES.backend.samfundet__eventsperday, queryParams: query });
+  const response = await axios.get<EventDto[]>(url, { withCredentials: true });
+
+  return response.data;
+}
+
 export async function getEventsUpcomming(): Promise<EventDto[]> {
   const url = BACKEND_DOMAIN + reverse({ pattern: ROUTES.backend.samfundet__eventsupcomming });
   const response = await axios.get<EventDto[]>(url, { withCredentials: true });

frontend/src/i18n/constants.ts

@@ -118,6 +118,10 @@ export const KEY = {
   publication: 'publication',
   closed_period: 'closed_period',
   saksdokument: 'saksdokument',
+  select_event: 'select_event',
+  all_venues: 'all_venues',
+  search_all: 'search_all',
+  archived_events: 'archived_events',
 } as const;
 
 /**

frontend/src/i18n/translations.ts

@@ -118,6 +118,10 @@ export const nb: Record<KeyValues, string> = {
   [KEY.publication]: 'Publisering',
   [KEY.closed_period]: 'Stengt periode',
   [KEY.saksdokument]: 'Saksdokument',
+  [KEY.select_event]: 'Velg lokale',
+  [KEY.all_venues]: 'Alle',
+  [KEY.search_all]: 'Søk på alle arrangemanger!',
+  [KEY.archived_events]: 'Vis arkiverte arrangemanger',
 };
 
 export const en: Record<KeyValues, string> = {
@@ -235,4 +239,8 @@ export const en: Record<KeyValues, string> = {
   [KEY.publication]: 'Publication',
   [KEY.closed_period]: 'Closed period',
   [KEY.saksdokument]: 'case document',
+  [KEY.select_event]: 'Choose venue',
+  [KEY.all_venues]: 'All',
+  [KEY.search_all]: 'Search every event!',
+  [KEY.archived_events]: 'Show archived events',
 };