286 add filtering to events #415

tiniuspre · 2023-03-14T14:49:31Z

No description provided.

…o-events

frontend/src/api.ts

frontend/src/Pages/EventsPage/EventsPage.tsx

emilte · 2023-03-14T15:31:52Z

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

+  -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: 26px;
+      -moz-column-gap: 26px;
+      column-gap: 26px;
+      -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);
+  }
+
+}


Trenger du alpha på disse?

Finnes det ikke en ekvivalent i hex? Alpha er litt ulempe å bruke med mindre det er nødvendig nemlig. Det er fordi universell utforming-verktøy ikke klarer å avgjøre om kontrast er akseptabelt eller ikke da fargen er gjennomsiktig. Med andre ord avhenger fargene av bakgrunnen.

emilte · 2023-03-14T15:33:43Z

backend/samfundet/views.py

+    def url_args(self, query_word: str) -> str:
+        query = self.request.GET.get(query_word, None)
+        if query is None:
+            return ''
+        return query.split(',')[0]
+
+    def general_search(self, events_query: QuerySet, search_term: str) -> QuerySet:
+        fields = [f for f in Event._meta.fields if (isinstance(f, CharField) or isinstance(f, TextField))]
+        queries = [Q(**{f.name + '__contains': search_term}) for f in fields]
+        qs = Q()
+        for query in queries:
+            qs = qs | query
+
+        return events_query.filter(qs)
+
+    def statusGroup(self) -> str:
+        if self.request.GET.get('archived', None) == 'true':
+            return 'active'
+        return 'archived'
+
    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 = self.general_search(events_query, self.url_args('search')).filter(
+                Q(location__contains=self.url_args('location')), Q(status_group=self.statusGroup())
+            )
+
+        for event in events_query.all().order_by('start_dt').values():


Jeg tror dette kan gjøres lettere med query params

Eller hvis du kan legge til docstring så kanskje jeg henger mer med

emilte · 2023-03-14T15:44:54Z

backend/samfundet/views.py

+    def general_search(self, events_query: QuerySet, search_term: str) -> QuerySet:
+        fields = [f for f in Event._meta.fields if (isinstance(f, CharField) or isinstance(f, TextField))]
+        queries = [Q(**{f.name + '__contains': search_term}) for f in fields]
+        qs = Q()
+        for query in queries:
+            qs = qs | query
+
+        return events_query.filter(qs)


Trenger vi så generisk filter for bare ett view? Kan kanskje skjønne det hvis det var universalt.

Ja, er enklest sånn for å søke etter ord i alle tekst felter, kunne evt laget en egen funksjon ett sted som alle kan ha nytte av

Hva om man ikke ønsker å søke i alle tekstfelt?

Fjerne if setningen så er det alle felter

Kanskje man kan ta inn en liste med felter man ønsker å filtrere på?

backend/samfundet/views.py

emilte · 2023-03-15T00:07:41Z

frontend/src/Pages/EventsPage/EventsPage.tsx

+
+            <div className={styles.filterColumn}>
+              <label className={styles.container} key={t(KEY.all_venues)}>
+                <RadioButton name="venues" value="" onChange={() => setSelectedVenue(all_venues)} />


Trenger den ikke value?

emilte · 2023-03-15T00:08:45Z

frontend/src/Pages/EventsPage/EventsPage.tsx

+            </Button>
+          </div>
+        </div>
+      ) : null}


Dette er en stor ternary. Det kan gjøres enklere. Vurder subkomponent også

emilte · 2023-03-15T19:15:37Z

frontend/src/Pages/EventsPage/EventsPage.tsx


 export function EventsPage() {
+  const all_venues = 'all';


emilte · 2023-03-15T19:18:00Z

frontend/src/Pages/EventsPage/EventsPage.tsx

+    getVenues().then((data) => {
+      setVenues(data);
+    });
+    setShowSpinner(false);


nå stopper den uansett om ting lastes eller ikke

backend/samfundet/views.py

emilte · 2023-03-16T19:04:12Z

backend/samfundet/views.py

+
+        if '?' in self.request.build_absolute_uri():
+            events_query = general_search(events_query, self.url_args('search'))
+            events_query = events_query.filter(location__contains=self.url_args('location'))


Suggested change

events_query = events_query.filter(location__contains=self.url_args('location'))

location = request.query_params.get('location', '')

events_query = events_query.filter(location__contains=self.url_args('location'))

Hva skjer dersom location ikke er der, da blir filteret rart?

Hva med spørsmålet?

emilte · 2023-03-16T19:05:03Z

backend/samfundet/views.py

+            events_query = general_search(events_query, self.url_args('search'))
+            events_query = events_query.filter(location__contains=self.url_args('location'))
+
+        for event in events_query.order_by('start_dt').values():


Trenger du .values()

Håndterer det som et dict når jeg sorterer den, da trenger jeg .values() for å gjøre det om

Ser ikke ut som du trenger det. Du henter jo bare ut et felt.

Som data i responsen kanskje vi kan bruke serializer i stedet slik at det blir likt som resten av api-et.

emilte · 2023-04-13T23:26:43Z

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

+    justify-content: center;
+    align-items: center;
+    background: #a03033;


emilte · 2023-04-13T23:27:40Z

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

+  -moz-column-rule: 1px solid rgba(28, 110, 164, 0.39);
+  column-rule: 2px 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);


Litt skeptisk til alpha. Tror du bør finne absolutt-farge for å garantere god kontrast.

emilte · 2023-04-13T23:28:40Z

frontend/src/Pages/EventsPage/EventsPage.tsx

+  const [venues, setVenues] = useState<VenueDto[]>([]);
+  const [filterToggle, setFilterToggle] = useState<boolean>(false);
+  const [eventsOptions, setEventsOption] = useState<EventOptionsDto | null>(null);
+  const handleClick = () => {


emilte · 2023-04-13T23:30:01Z

frontend/src/Pages/EventsPage/EventsPage.tsx

      .catch((error) => {
        toast.error(t(KEY.common_something_went_wrong));
        console.error(error);
      });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps;


litt rar plassering

emilte · 2023-04-13T23:30:42Z

frontend/src/Pages/EventsPage/EventsPage.tsx

  }, []);

+  const handleFilterToggle = () => {


emilte · 2023-04-13T23:32:25Z

frontend/src/Pages/EventsPage/components/FilterRow.tsx

+};
+
+export function FilterRow({ label, name, property, urlArgs }: FilterRowProps) {
+  const { t } = useTranslation<string>();


hvorfor typer du denne?

emilte · 2023-04-13T23:33:10Z

frontend/src/Pages/EventsPage/components/FilterRow.tsx

Prøv å følge komponent strukturen definert i docs.

emilte · 2023-04-13T23:33:57Z

frontend/src/Pages/EventsPage/components/FilterRow.tsx

+          {t(KEY.all)}
+        </label>
+        {Object.keys(property).map((option, key) => (
+          <label key={key} className={styles.container}>


Hvorfor label? RadioButton har det

emilte · 2023-04-13T23:36:08Z

frontend/src/dto.ts

+export type EventOptionsDto = {
+  name?: string;
+  description?: string;
+  renders?: object;
+  actions: { POST: EventOptionsPostDto };
+};
+
+export type EventOptionsPostDto = {
+  id?: EventOptionsPostKeysDto;
+  end_dt?: EventOptionsPostKeysDto;
+  image_url?: EventOptionsPostKeysDto;
+  title_nb: EventOptionsPostKeysDto;
+  title_en?: EventOptionsPostKeysDto;
+  description_long_nb?: EventOptionsPostKeysDto;
+  description_long_en?: EventOptionsPostKeysDto;
+  description_short_nb?: EventOptionsPostKeysDto;
+  description_short_en?: EventOptionsPostKeysDto;
+  location?: EventOptionsPostKeysDto;
+  codeword?: EventOptionsPostKeysDto;
+  created_at?: EventOptionsPostKeysDto;
+  updated_at?: EventOptionsPostKeysDto;
+  start_dt?: EventOptionsPostKeysDto;
+  duration?: EventOptionsPostKeysDto;
+  publish_dt?: EventOptionsPostKeysDto;
+  host?: EventOptionsPostKeysDto;
+  status_group: EventOptionsPostKeysChoisesDto;
+  age_group: EventOptionsPostKeysChoisesDto;
+  category: EventOptionsPostKeysChoisesDto;
+  price_group: EventOptionsPostKeysChoisesDto;
+  capacity?: EventOptionsPostKeysDto;
+  event_group?: EventOptionsPostKeysDto;
+};
+
+export type EventOptionsPostKeysDto = {
+  actions?: object;
+  type?: string;
+  required?: boolean;
+  read_only?: boolean;
+  label: string;
+};
+
+export type EventOptionsPostKeysChoisesDto = {
+  type: string;
+  required: boolean;
+  read_only: boolean;
+  label: string;
+  choices: EventOptionsChoises_Dto;
+};
+
+export type EventOptionsChoises_Dto = [
+  {
+    value: string;
+    display_name: string;
+  },
+];
+
+
 // ==================== //
 //        Event         //
 // ==================== //


@evgiz kan du ta en titt?

emilte · 2023-04-13T23:37:11Z

frontend/src/i18n/constants.ts

  form_confirm: 'form_confirm',
+  duration: 'duration',
+  publication: 'publication',
+  closed_period: 'closed_period',
+  saksdokument: 'saksdokument',
+  select_event: 'select_event',
+  all: 'all',
+  search_all: 'search_all',
+  archived_events: 'archived_events',
+  event_category: 'event_category',
+  choose_age: 'choose_age',
+  choose_status: 'choose_status',
+  photos: 'photos',
+  nybygg: 'nybygg',
+  common_sulten: 'common_sulten',
+  sulten_page_book_table: 'sulten_page_book_table',
+  sulten_page_kitchen: 'sulten_page_kitchen',
+  sulten_page_see_menu: 'sulten_page_see_menu',
+  sulten_page_about_us: 'sulten_page_about_us',
+  sulten_page_more_about_us: 'sulten_page_more_about_us',
+  admin_saksdokumenter_title: 'admin_saksdokumenter_title',
+  back_to_samfundet: 'back_to_samfundet',
+  no_file_selected: 'no_file_selected',
+  category: 'category',
+  choose_a_file: 'choose_a_file',
  control_panel_faq: 'control_panel_faq',


Så du ikke hvor fin filen var?

Veldig tydelig mønster

Les docstring øverst om navn

emilte · 2023-04-13T23:38:35Z

frontend/src/i18n/translations.ts

+  [KEY.duration]: 'Varighet',
+  [KEY.publication]: 'Publisering',
+  [KEY.closed_period]: 'Stengt periode',
+  [KEY.saksdokument]: 'Saksdokument',
+  [KEY.select_event]: 'Velg lokale',
+  [KEY.all]: 'Alle',
+  [KEY.search_all]: 'Søk på alle arrangemanger!',
+  [KEY.archived_events]: 'Vis arkiverte arrangemanger',
+  [KEY.event]: '',
+  [KEY.event_category]: 'Velg type arrangemang',
+  [KEY.choose_age]: 'Aldersgrense',
+  [KEY.choose_status]: 'Status',
+  [KEY.photos]: 'Foto',
+  [KEY.nybygg]: 'Nybygg',
+  [KEY.common_sulten]: 'Lyche',
+  [KEY.sulten_page_book_table]: 'Bestill bord',
+  [KEY.sulten_page_kitchen]: 'Kjøkken',
  [KEY.navbar_photos]: 'Foto',
  [KEY.navbar_nybygg]: 'Nybygg',
  [KEY.control_panel_faq]: 'Hjelp/spørsmål',


tiniuspre added 9 commits March 7, 2023 21:58

Events page, not finnished

400894b

Merge remote-tracking branch 'origin/master' into 286-add-filtering-t…

9752844

…o-events

Events page, styling, better filtering

7a1a063

Events page, language update

f35b55f

Only active events

f303b3d

Archived events filter

f571179

linter fix

f4ec638

cleanup events filter

8bbcf30

Translation archived

e6831e1

tiniuspre requested a review from emilte as a code owner March 14, 2023 14:49

tiniuspre self-assigned this Mar 14, 2023

tiniuspre linked an issue Mar 14, 2023 that may be closed by this pull request

Add filtering to events #286

Open

tiniuspre added 4 commits March 14, 2023 15:53

Linting events filter

458bb57

linting events filter

28d134c

linting events filter

12944ea

linting events filter

e087d44

emilte reviewed Mar 14, 2023

View reviewed changes

frontend/src/api.ts Outdated Show resolved Hide resolved

emilte reviewed Mar 14, 2023

View reviewed changes

frontend/src/Pages/EventsPage/EventsPage.tsx Outdated Show resolved Hide resolved

emilte reviewed Mar 14, 2023

View reviewed changes

General search, moved & scss cleanup

7aa68e6

emilte reviewed Mar 14, 2023

View reviewed changes

backend/samfundet/views.py Outdated Show resolved Hide resolved

tiniuspre and others added 7 commits March 14, 2023 20:07

General search, easy read

ffe5276

linter event filter

70c40d4

Merge branch 'master' into 286-add-filtering-to-events

d39e11d

Fixes events filtering

4bb8676

Linter events filter

d65a8d5

Removed unused import

ba6f459

snake case fix

a39ce7b

emilte reviewed Mar 15, 2023

View reviewed changes

tiniuspre added 2 commits March 15, 2023 02:20

Docstring, cleaner code events filter

5c8bcbf

Double quote fix

4ac9d31

emilte reviewed Mar 15, 2023

View reviewed changes

Merge branch 'master' into 286-add-filtering-to-events

4dc6e71

emilte reviewed Mar 16, 2023

View reviewed changes

backend/samfundet/views.py Outdated Show resolved Hide resolved

emilte reviewed Mar 16, 2023

View reviewed changes

tiniuspre and others added 5 commits March 17, 2023 04:13

Events filter

01f3b97

Events filter dto lint

e56e3c0

Merge branch 'master' into 286-add-filtering-to-events

dd3f80c

Merge branch 'master' into 286-add-filtering-to-events

1581ae6

Merge branch 'master' into 286-add-filtering-to-events

58413a0

emilte reviewed Apr 13, 2023

View reviewed changes

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

justify-content: center;

align-items: center;

background: #a03033;

Copy link

Member

emilte Apr 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const

emilte reviewed Apr 13, 2023

View reviewed changes

frontend/src/Pages/EventsPage/EventsPage.tsx

}, []);

const handleFilterToggle = () => {

Copy link

Member

emilte Apr 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.

emilte reviewed Apr 13, 2023

View reviewed changes

frontend/src/Pages/EventsPage/components/FilterRow.tsx

Copy link

Member

emilte Apr 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prøv å følge komponent strukturen definert i docs.

emilte reviewed Apr 13, 2023

View reviewed changes

emilte marked this pull request as draft April 18, 2023 23:03

Merge branch 'master' into 286-add-filtering-to-events

b726a4c

tiniuspre closed this Feb 8, 2024

tiniuspre deleted the 286-add-filtering-to-events branch February 8, 2024 17:50

	events_query = events_query.filter(location__contains=self.url_args('location'))
	location = request.query_params.get('location', '')
	events_query = events_query.filter(location__contains=self.url_args('location'))

286 add filtering to events #415

286 add filtering to events #415

Conversation

tiniuspre commented Mar 14, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment