Add more filters to React Admin

ZdruzenieSTROM · Dec 14, 2024 · 7fc0208 · 7fc0208
1 parent 03818f6
commit 7fc0208
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 20 deletions.
diff --git a/src/components/Admin/custom/list-filtering/CompetitionFilterSection.tsx b/src/components/Admin/custom/list-filtering/CompetitionFilterSection.tsx
@@ -5,7 +5,7 @@ export const CompetitionFilterSection: FC = () => {
   return (
     <FilterListSection label="Competition" icon={null}>
       <FilterLiveForm>
-        <ReferenceInput source="competition" reference="competition/competition" filter={{competition_type: 0}}>
+        <ReferenceInput source="competition" reference="competition/competition">
           <AutocompleteInput helperText={false} />
         </ReferenceInput>
       </FilterLiveForm>

diff --git a/src/components/Admin/custom/list-filtering/CompetitionSeminarFilterSection.tsx b/src/components/Admin/custom/list-filtering/CompetitionSeminarFilterSection.tsx
@@ -0,0 +1,14 @@
+import {FC} from 'react'
+import {AutocompleteInput, FilterListSection, FilterLiveForm, ReferenceInput} from 'react-admin'
+
+export const CompetitionSeminarFilterSection: FC = () => {
+  return (
+    <FilterListSection label="Seminar" icon={null}>
+      <FilterLiveForm>
+        <ReferenceInput source="competition" reference="competition/competition" filter={{competition_type: 0}}>
+          <AutocompleteInput helperText={false} />
+        </ReferenceInput>
+      </FilterLiveForm>
+    </FilterListSection>
+  )
+}
diff --git a/src/components/Admin/custom/list-filtering/EventFilterSection.tsx b/src/components/Admin/custom/list-filtering/EventFilterSection.tsx
@@ -0,0 +1,14 @@
+import {FC} from 'react'
+import {AutocompleteInput, FilterListSection, FilterLiveForm, ReferenceInput} from 'react-admin'
+
+export const EventFilterSection: FC = () => {
+  return (
+    <FilterListSection label="Event" icon={null}>
+      <FilterLiveForm>
+        <ReferenceInput source="event" reference="competition/event">
+          <AutocompleteInput helperText={false} />
+        </ReferenceInput>
+      </FilterLiveForm>
+    </FilterListSection>
+  )
+}
diff --git a/src/components/Admin/custom/list-filtering/GradeFilterSection.tsx b/src/components/Admin/custom/list-filtering/GradeFilterSection.tsx
@@ -0,0 +1,14 @@
+import {FC} from 'react'
+import {AutocompleteInput, FilterListSection, FilterLiveForm, ReferenceInput} from 'react-admin'
+
+export const GradeFilterSection: FC = () => {
+  return (
+    <FilterListSection label="Grade" icon={null}>
+      <FilterLiveForm>
+        <ReferenceInput source="grade" reference="competition/grade">
+          <AutocompleteInput helperText={false} />
+        </ReferenceInput>
+      </FilterLiveForm>
+    </FilterListSection>
+  )
+}
diff --git a/src/components/Admin/custom/list-filtering/SeasonCodeFilterList.tsx b/src/components/Admin/custom/list-filtering/SeasonCodeFilterList.tsx
@@ -0,0 +1,14 @@
+import {FC} from 'react'
+import {FilterList, FilterListItem} from 'react-admin'
+
+import {seasonCodeStrings} from '../../seasonCodeStrings'
+
+export const SeasonCodeFilterList: FC = () => {
+  return (
+    <FilterList label="season_code" icon={null}>
+      {seasonCodeStrings.map((season) => (
+        <FilterListItem key={season.id} label={season.name} value={{season_code: season.id}} />
+      ))}
+    </FilterList>
+  )
+}
diff --git a/src/components/Admin/resources/competition/event-registration/EventRegistrationList.tsx b/src/components/Admin/resources/competition/event-registration/EventRegistrationList.tsx
@@ -1,21 +1,38 @@
 import {FC} from 'react'
 import {Datagrid, FunctionField, List, ReferenceField, TextField} from 'react-admin'
 
+import {EventFilterSection} from '@/components/Admin/custom/list-filtering/EventFilterSection'
+import {FilterSidebar} from '@/components/Admin/custom/list-filtering/FilterSidebar'
+import {GradeFilterSection} from '@/components/Admin/custom/list-filtering/GradeFilterSection'
 import {EventRegistration} from '@/types/api/competition'
 
 export const EventRegistrationList: FC = () => (
-  <List>
+  <List aside={<EventRegistrationListFilters />}>
     <Datagrid>
       <FunctionField
         source="profile.last_name"
         label="content.labels.name"
         render={(record: EventRegistration) => `${record.profile.first_name} ${record.profile.last_name}`}
+        sortable={false}
       />
-      <TextField source="school.abbreviation" />
-      <TextField source="grade.tag" />
-      <ReferenceField source="event" reference="competition/event" link={false} />
+      <TextField source="school.abbreviation" sortable={false} />
+      <TextField source="grade.tag" sortable={false} />
+      {/* TODO: malo by to byt raditelne podla sortBy="event__start",
+      ale akosi sa mi to nezda ze by fungovalo a navyse to zo zobrazenia nie je intuitivne */}
+      <ReferenceField source="event" reference="competition/event" link={false} sortable={false} />
     </Datagrid>
   </List>
 )
 
 // TODO: filtre a ordering podla  https://github.com/ZdruzenieSTROM/webstrom-backend/pull/460/files#diff-148e08b739e60a78edfc1e546340f501840b75f1646afa58ee524ff82cfc061eR905-R908
+const EventRegistrationListFilters: FC = () => (
+  <FilterSidebar>
+    <EventFilterSection />
+
+    <GradeFilterSection />
+
+    {/* TODO:
+      - school
+      - profile */}
+  </FilterSidebar>
+)
diff --git a/src/components/Admin/resources/competition/event/EventList.tsx b/src/components/Admin/resources/competition/event/EventList.tsx
@@ -2,26 +2,41 @@ import {FC} from 'react'
 import {Datagrid, FunctionField, List, NumberField, RaRecord, ReferenceField, TextField} from 'react-admin'
 
 import {DateTimeField} from '@/components/Admin/custom/DateTimeField'
+import {CompetitionFilterSection} from '@/components/Admin/custom/list-filtering/CompetitionFilterSection'
+import {FilterSidebar} from '@/components/Admin/custom/list-filtering/FilterSidebar'
+import {SeasonCodeFilterList} from '@/components/Admin/custom/list-filtering/SeasonCodeFilterList'
 import {SeasonCodeField} from '@/components/Admin/custom/SeasonCodeField'
 
 export const EventList: FC = () => (
-  <List>
+  <List aside={<EventListFilters />}>
     <Datagrid>
-      <ReferenceField source="competition" reference="competition/competition" link={false} />
+      <ReferenceField source="competition" reference="competition/competition" link={false} sortable={false} />
       <NumberField source="year" />
-      <SeasonCodeField source="season_code" />
-      <TextField source="school_year" />
+      <SeasonCodeField source="season_code" sortable={false} />
+      <TextField source="school_year" sortable={false} />
       <DateTimeField source="start" />
       <DateTimeField source="end" />
-      <TextField source="location" />
-      <TextField source="additional_name" />
-      <TextField source="registration_link.url" />
+      <TextField source="location" sortable={false} />
+      <TextField source="additional_name" sortable={false} />
+      <TextField source="registration_link.url" sortable={false} />
       <FunctionField<RaRecord>
         source="publication_set"
         render={(record) => record && <span>{record['publication_set'].length}</span>}
+        sortable={false}
       />
     </Datagrid>
   </List>
 )
 
 // TODO: filtre a ordering podla https://github.com/ZdruzenieSTROM/webstrom-backend/pull/460/files#diff-148e08b739e60a78edfc1e546340f501840b75f1646afa58ee524ff82cfc061eR832-R838
+const EventListFilters: FC = () => (
+  <FilterSidebar>
+    <CompetitionFilterSection />
+
+    <SeasonCodeFilterList />
+
+    {/* TODO:
+      - school_year
+      - location */}
+  </FilterSidebar>
+)
diff --git a/src/components/Admin/resources/competition/problems/ProblemList.tsx b/src/components/Admin/resources/competition/problems/ProblemList.tsx
@@ -12,7 +12,7 @@ import {
   ReferenceField,
 } from 'react-admin'
 
-import {CompetitionFilterSection} from '@/components/Admin/custom/list-filtering/CompetitionFilterSection'
+import {CompetitionSeminarFilterSection} from '@/components/Admin/custom/list-filtering/CompetitionSeminarFilterSection'
 import {FilterSidebar} from '@/components/Admin/custom/list-filtering/FilterSidebar'
 import {SemesterFilterSection} from '@/components/Admin/custom/list-filtering/SemesterFilterSection'
 import {SeriesFilterSection} from '@/components/Admin/custom/list-filtering/SeriesFilterSection'
@@ -37,7 +37,7 @@ export const ProblemList: FC = () => (
 
 const ProblemListFilters: FC = () => (
   <FilterSidebar>
-    <CompetitionFilterSection />
+    <CompetitionSeminarFilterSection />
 
     <SemesterFilterSection />
 

diff --git a/src/components/Admin/resources/competition/semester/SemesterList.tsx b/src/components/Admin/resources/competition/semester/SemesterList.tsx
@@ -11,8 +11,9 @@ import {
 } from 'react-admin'
 
 import {DateTimeField} from '@/components/Admin/custom/DateTimeField'
-import {CompetitionFilterSection} from '@/components/Admin/custom/list-filtering/CompetitionFilterSection'
+import {CompetitionSeminarFilterSection} from '@/components/Admin/custom/list-filtering/CompetitionSeminarFilterSection'
 import {FilterSidebar} from '@/components/Admin/custom/list-filtering/FilterSidebar'
+import {SeasonCodeFilterList} from '@/components/Admin/custom/list-filtering/SeasonCodeFilterList'
 import {SeasonCodeField} from '@/components/Admin/custom/SeasonCodeField'
 
 export const SemesterList: FC = () => (
@@ -48,10 +49,11 @@ export const SemesterList: FC = () => (
 
 const SemesterListFilters: FC = () => (
   <FilterSidebar>
-    <CompetitionFilterSection />
+    <CompetitionSeminarFilterSection />
+
+    <SeasonCodeFilterList />
 
     {/* TODO:
-        - school_year
-        - season_code */}
+        - school_year */}
   </FilterSidebar>
 )
diff --git a/src/components/Admin/resources/competition/series/SeriesList.tsx b/src/components/Admin/resources/competition/series/SeriesList.tsx
@@ -12,7 +12,7 @@ import {
 } from 'react-admin'
 
 import {DateTimeField} from '@/components/Admin/custom/DateTimeField'
-import {CompetitionFilterSection} from '@/components/Admin/custom/list-filtering/CompetitionFilterSection'
+import {CompetitionSeminarFilterSection} from '@/components/Admin/custom/list-filtering/CompetitionSeminarFilterSection'
 import {FilterSidebar} from '@/components/Admin/custom/list-filtering/FilterSidebar'
 import {SemesterFilterSection} from '@/components/Admin/custom/list-filtering/SemesterFilterSection'
 
@@ -34,7 +34,7 @@ export const SeriesList: FC = () => (
 
 const SeriesListFilters: FC = () => (
   <FilterSidebar>
-    <CompetitionFilterSection />
+    <CompetitionSeminarFilterSection />
 
     <SemesterFilterSection />