Merge branch 'master' into 488-mathjax

package.json

@@ -20,6 +20,7 @@
     "@emotion/styled": "^11.13.5",
     "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.16.7",
+    "@mui/utils": "^5",
     "@tanstack/react-query": "5.61.0",
     "@tanstack/react-query-devtools": "5.61.0",
     "@testing-library/jest-dom": "^5.17.0",

src/components/Admin/Admin.tsx

@@ -1,13 +1,14 @@
+import {deepmerge} from '@mui/utils'
 import {FC} from 'react'
-import {Admin as ReactAdmin, Resource} from 'react-admin'
+import {Admin as ReactAdmin, defaultDarkTheme, defaultLightTheme, RaThemeOptions, Resource} from 'react-admin'
 
 import {AdminLayout} from './AdminLayout'
 import {dataProvider} from './dataProvider'
 import {myI18nProvider} from './i18nProvider'
-import {FlatpageCreate} from './resources/base/flat-page/FlatpageCreate'
-import {FlatpageEdit} from './resources/base/flat-page/FlatpageEdit'
-import {FlatpageList} from './resources/base/flat-page/FlatpageList'
-import {FlatpageShow} from './resources/base/flat-page/FlatpageShow'
+import {FlatpageCreate} from './resources/cms/flat-page/FlatpageCreate'
+import {FlatpageEdit} from './resources/cms/flat-page/FlatpageEdit'
+import {FlatpageList} from './resources/cms/flat-page/FlatpageList'
+import {FlatpageShow} from './resources/cms/flat-page/FlatpageShow'
 import {PostCreate} from './resources/cms/post/PostCreate'
 import {PostEdit} from './resources/cms/post/PostEdit'
 import {PostList} from './resources/cms/post/PostList'
@@ -48,15 +49,30 @@ import {SchoolList} from './resources/personal/schools/SchoolList'
 import {SchoolShow} from './resources/personal/schools/SchoolShow'
 import {useAuthProvider} from './useAuthProvider'
 
+const themeOverrides: RaThemeOptions = {
+  components: {
+    RaButton: {
+      defaultProps: {
+        size: 'medium',
+      },
+    },
+  },
+}
+
+const lightTheme = deepmerge(defaultLightTheme, themeOverrides)
+const darkTheme = deepmerge(defaultDarkTheme, themeOverrides)
+
 export const Admin: FC = () => {
   const authProvider = useAuthProvider()
 
   return (
     <ReactAdmin
       authProvider={authProvider}
       dataProvider={dataProvider}
-      layout={AdminLayout}
       i18nProvider={myI18nProvider}
+      layout={AdminLayout}
+      theme={lightTheme}
+      darkTheme={darkTheme}
     >
       <Resource name="cms/post" list={PostList} edit={PostEdit} show={PostShow} create={PostCreate} />
       <Resource

src/components/Admin/AdminLayout.tsx

@@ -2,7 +2,7 @@ import {Home, Logout} from '@mui/icons-material/'
 import {Button, Stack, Typography} from '@mui/material'
 import {useRouter} from 'next/router'
 import {FC, PropsWithChildren} from 'react'
-import {AppBar, Layout, useLogout, useTranslate} from 'react-admin'
+import {AppBar, Layout, ToggleThemeButton, useLogout, useTranslate} from 'react-admin'
 
 const AppMenuBar = () => {
   const router = useRouter()
@@ -21,6 +21,8 @@ const AppMenuBar = () => {
             </Stack>
           </Button>
 
+          <ToggleThemeButton />
+
           <Button color="inherit" onClick={() => logout()}>
             <Stack gap={1} direction="row">
               <Logout />

src/components/Admin/custom/PostPreview.tsx

@@ -1,22 +1,20 @@
 import {Stack} from '@mui/material'
 import {ThemeProvider} from '@mui/material/styles'
 import Grid from '@mui/material/Unstable_Grid2'
-import {FC, useState} from 'react'
+import {FC} from 'react'
 import {FormDataConsumer} from 'react-admin'
 
 import {Post} from '@/components/Posts/Post'
-import {PostDetail} from '@/components/Posts/PostDetail'
 import {theme} from '@/theme'
 
 export const PostPreview: FC = () => {
-  const [isDetailOpen, openDetail] = useState<boolean>(false)
   return (
     <ThemeProvider theme={theme}>
       <FormDataConsumer>
         {({formData}) => (
           <Grid container columnSpacing={5} sx={{width: '100%'}}>
-            <Grid xs={4}>
-              <Stack gap={5}>
+            <Grid xs={12} md={4}>
+              <Stack gap={5} sx={{color: 'black', background: 'white', p: '10px'}}>
                 <Post
                   id={0}
                   links={formData?.links ?? []}
@@ -27,19 +25,9 @@ export const PostPreview: FC = () => {
                   visible_after={formData?.visible_after ?? ''}
                   visible_until={formData?.visible_until ?? ''}
                   sites={formData?.sites ?? []}
-                  openDetail={() => openDetail(true)}
                 />
               </Stack>
             </Grid>
-            <Grid xs={5}>
-              {isDetailOpen && (
-                <PostDetail
-                  closeDetail={() => openDetail(false)}
-                  caption={formData?.caption ?? ''}
-                  details={formData?.details ?? ''}
-                />
-              )}
-            </Grid>
           </Grid>
         )}
       </FormDataConsumer>

src/components/Admin/custom/list-filtering/CompetitionFilterSection.tsx

@@ -0,0 +1,14 @@
+import {FC} from 'react'
+import {AutocompleteInput, FilterListSection, FilterLiveForm, ReferenceInput} from 'react-admin'
+
+export const CompetitionFilterSection: FC = () => {
+  return (
+    <FilterListSection label="Competition" icon={null}>
+      <FilterLiveForm>
+        <ReferenceInput source="competition" reference="competition/competition" filter={{competition_type: 0}}>
+          <AutocompleteInput helperText={false} />
+        </ReferenceInput>
+      </FilterLiveForm>
+    </FilterListSection>
+  )
+}

src/components/Admin/custom/list-filtering/FilterSidebar.tsx

@@ -0,0 +1,31 @@
+import {FilterList as FilterListIcon} from '@mui/icons-material'
+import {Button, Card, CardContent, Stack} from '@mui/material'
+import {FC, PropsWithChildren, useState} from 'react'
+import {FilterLiveSearch} from 'react-admin'
+
+export const FilterSidebar: FC<PropsWithChildren> = ({children}) => {
+  const [filterOpen, setFilterOpen] = useState(true)
+  const toggleFilter = () => setFilterOpen((prev) => !prev)
+
+  return (
+    <Stack
+      sx={{
+        order: -1,
+        position: 'relative',
+        overflow: 'visible',
+      }}
+    >
+      <Button onClick={toggleFilter} sx={{mt: 0.5, position: 'absolute', width: 'max-content', gap: 1}}>
+        <FilterListIcon />
+        Filters
+      </Button>
+
+      <Card sx={{mt: 8, mr: filterOpen ? 2 : 0, width: filterOpen ? 200 : 0, transition: 'width 0.2s'}}>
+        <CardContent>
+          <FilterLiveSearch />
+          {children}
+        </CardContent>
+      </Card>
+    </Stack>
+  )
+}

src/components/Admin/custom/list-filtering/SemesterFilterSection.tsx

@@ -0,0 +1,20 @@
+import {FC} from 'react'
+import {AutocompleteInput, FilterListSection, FilterLiveForm, ReferenceInput, useListContext} from 'react-admin'
+
+export const SemesterFilterSection: FC = () => {
+  const {filterValues} = useListContext()
+
+  return (
+    <FilterListSection label="Semester" icon={null}>
+      <FilterLiveForm>
+        <ReferenceInput
+          source="semester"
+          reference="competition/semester"
+          filter={{competition: filterValues.competition}}
+        >
+          <AutocompleteInput helperText={false} />
+        </ReferenceInput>
+      </FilterLiveForm>
+    </FilterListSection>
+  )
+}

src/components/Admin/custom/list-filtering/SeriesFilterSection.tsx

@@ -0,0 +1,20 @@
+import {FC} from 'react'
+import {AutocompleteInput, FilterListSection, FilterLiveForm, ReferenceInput, useListContext} from 'react-admin'
+
+export const SeriesFilterSection: FC = () => {
+  const {filterValues} = useListContext()
+
+  return (
+    <FilterListSection label="Séria" icon={null}>
+      <FilterLiveForm>
+        <ReferenceInput
+          source="series"
+          reference="competition/series"
+          filter={{competition: filterValues.competition, semester: filterValues.semester}}
+        >
+          <AutocompleteInput helperText={false} />
+        </ReferenceInput>
+      </FilterLiveForm>
+    </FilterListSection>
+  )
+}