Merge branch 'master' into 267-ra-all-vlastne-labels-na-resources-stl…

…pce-a-fieldy

.github/workflows/test.yml

@@ -12,7 +12,7 @@ jobs:
       - name: Check out branch code
         uses: actions/checkout@v4
       - name: Setup Node.js with Yarn cache
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
           cache: yarn

.yarnrc.yml

@@ -1,11 +1,11 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
 nodeLinker: node-modules
 
 plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
-  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
-    spec: "@yarnpkg/plugin-typescript"
   - path: .yarn/plugins/@yarnpkg/plugin-echo-execute.cjs
     spec: "https://yarnplugins.com/echo-execute"
 
-yarnPath: .yarn/releases/yarn-3.5.1.cjs
+yarnPath: .yarn/releases/yarn-4.5.3.cjs

package.json

@@ -35,7 +35,7 @@
     "ra-i18n-polyglot": "^5.4.0",
     "ra-language-slovak": "^3.6.2",
     "react": "19.0.0-rc-66855b96-20241106",
-    "react-admin": "^4.16.20",
+    "react-admin": "^5.4.0",
     "react-cookie": "^4.1.1",
     "react-dom": "19.0.0-rc-66855b96-20241106",
     "react-dropzone": "^14.3.5",
@@ -79,7 +79,7 @@
     "sass": "^1.81.0",
     "typed-scss-modules": "^8.0.1"
   },
-  "packageManager": "yarn@3.5.1",
+  "packageManager": "yarn@4.5.3",
   "resolutions": {
     "@types/react": "npm:[email protected]",
     "@types/react-dom": "npm:[email protected]"

src/components/Admin/Admin.tsx

@@ -60,7 +60,7 @@ export const Admin: FC = () => {
     >
       <Resource name="cms/post" list={PostList} edit={PostEdit} show={PostShow} create={PostCreate} />
       <Resource
-        name="base/flat-page"
+        name="cms/flat-page"
         list={FlatpageList}
         edit={FlatpageEdit}
         show={FlatpageShow}

src/components/Admin/AdminLayout.tsx

@@ -1,6 +1,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, LayoutProps, useLogout, useTranslate} from 'react-admin'
 
 const AppMenuBar = () => {
@@ -13,7 +14,7 @@ const AppMenuBar = () => {
       position="relative"
       toolbar={
         <Stack gap={2} direction="row">
-          <Button color="inherit" onClick={() => router.push('/')}>
+          <Button color="inherit" onClick={() => router.push('/strom')}>
             <Stack gap={1} direction="row">
               <Home />
               <Typography variant="body1">{translate('controls.back_home')}</Typography>
@@ -32,11 +33,12 @@ const AppMenuBar = () => {
   )
 }
 
-export const AdminLayout = (props: LayoutProps) => {
-  const translate = useTranslate()
+export const AdminLayout: FC<PropsWithChildren> = ({children}) => {
+    const translate = useTranslate()
+
   return (
     <>
-      <Layout {...props} appBar={AppMenuBar} />
+      <Layout appBar={AppMenuBar}>{children}</Layout>
       <Stack
         style={{
           position: 'fixed',

src/components/Admin/custom/MyEditActions.tsx

@@ -1,5 +1,5 @@
 import {FC} from 'react'
-import {ListButton, ShowButton, TopToolbar, useRecordContext, useResourceContext} from 'react-admin'
+import {ListButton, ShowButton, TopToolbar, useCreatePath, useRecordContext, useResourceContext} from 'react-admin'
 // eslint-disable-next-line node/no-extraneous-import
 import {useLocation} from 'react-router-dom'
 
@@ -8,19 +8,20 @@ export const MyEditActions: FC = () => {
 
   const resource = useResourceContext()
   const record = useRecordContext()
+  const createPath = useCreatePath()
+
   // needed, undefined on first load
   if (!record) return null
 
-  const currentPathWithoutTab = `/${resource}/${record.id}` // '/cms/post/123'
-  let to = `${currentPathWithoutTab}/show` // '/cms/post/123/show'
+  const currentPathWithoutTab = createPath({type: 'edit', resource, id: record.id}) // '/cms/post/123'
   const tabPart = pathname.slice(currentPathWithoutTab.length) // bud '' alebo '/1'
-  if (tabPart) to = `${to}${tabPart}` // '/cms/post/123/show' alebo '/cms/post/123/show/1'
+  const path = createPath({type: 'show', resource, id: record.id}) // '/cms/post/123/show'
+  const to = `${path}${tabPart}` // '/cms/post/123/show' alebo '/cms/post/123/show/1'
 
   return (
     <TopToolbar>
-      {/* the `to` prop was omitted from ShowButton in recent RA version, but it's still working
-            and RA doesn't provide better way to do this 
-            TODO: try again after RA upgrade */}
+      {/* the `to` prop is omitted from ShowButtonProps, but it's still being spread to underlying button.
+          we want to link to the specific show tab, not just resource show */}
       {/* @ts-ignore */}
       <ShowButton to={to} />
       <ListButton label="content.labels.back_to_list" />

src/components/Admin/custom/MyFileField.tsx

@@ -8,7 +8,7 @@ export const MyFileField: FC = () => {
 
   return (
     <RecordContextProvider value={myRecord}>
-      <FileField source="src" title={myRecord.title} />
+      <FileField source="src" title={myRecord?.title} />
     </RecordContextProvider>
   )
 }

src/components/Admin/custom/MyShowActions.tsx

@@ -1,5 +1,5 @@
 import {FC} from 'react'
-import {EditButton, ListButton, TopToolbar, useRecordContext, useResourceContext} from 'react-admin'
+import {EditButton, ListButton, TopToolbar, useCreatePath, useRecordContext, useResourceContext} from 'react-admin'
 // eslint-disable-next-line node/no-extraneous-import
 import {useLocation} from 'react-router-dom'
 
@@ -8,13 +8,15 @@ export const MyShowActions: FC = () => {
 
   const resource = useResourceContext()
   const record = useRecordContext()
+  const createPath = useCreatePath()
+
   // needed, undefined on first load
   if (!record) return null
 
-  const currentPathWithoutTab = `/${resource}/${record.id}/show` // '/cms/post/123/show'
-  let to = `/${resource}/${record.id}` // '/cms/post/123'
+  const currentPathWithoutTab = createPath({type: 'show', resource, id: record.id}) // '/cms/post/123/show'
   const tabPart = pathname.slice(currentPathWithoutTab.length) // bud '' alebo '/1'
-  if (tabPart) to = `${to}${tabPart}` // '/cms/post/123' alebo '/cms/post/123/1'
+  const path = createPath({type: 'edit', resource, id: record.id}) // '/cms/post/123'
+  const to = `${path}${tabPart}` // '/cms/post/123' alebo '/cms/post/123/1'
 
   return (
     <TopToolbar>

src/components/Admin/custom/SeasonCodeField.tsx

@@ -0,0 +1,16 @@
+import {FC} from 'react'
+import {FunctionField, FunctionFieldProps} from 'react-admin'
+
+import {seasonCodeStrings} from '../seasonCodeStrings'
+
+export const SeasonCodeField: FC<Omit<FunctionFieldProps, 'render'>> = ({source, ...rest}) => {
+  return (
+    <FunctionField
+      source={source}
+      render={(record) => {
+        return `${seasonCodeStrings[record.season_code].name ?? ''}`
+      }}
+      {...rest}
+    />
+  )
+}

src/components/Admin/dataProvider.ts

@@ -1,15 +1,13 @@
 import axios from 'axios'
 import {stringify} from 'querystring'
 import {DataProvider, RaRecord} from 'react-admin'
-
-// potencialne TODO: ak BE bude mat pagination, filter alebo sort, upravime a pouzijeme tento kod.
-// zatial je pagination aj sort rieseny client-side a len pre getList, filter/search nemame.
-
+// TODO: BE chysta search, filter, pagination a sort. ked to bude ready,
+// postupne odkomentujeme tento kod a zmazeme client-side handling nizsie
 // import {FilterPayload, PaginationPayload, SortPayload} from 'react-admin'
 
 // const getPaginationQuery = ({page, perPage}: PaginationPayload) => ({
-//   page,
-//   page_size: perPage,
+//   offset: page,
+//   limit: perPage,
 // })
 // const getFilterQuery = ({q, ...otherSearchParams}: FilterPayload) => ({
 //   ...otherSearchParams,
@@ -40,30 +38,46 @@ export const dataProvider: DataProvider = {
       // ...getOrderingQuery(params.sort),
     }
     const stringifiedQuery = stringify(query)
-    const {data} = await axios.get(`${apiUrl}/${resource}${stringifiedQuery ? `/?${stringifiedQuery}` : ''}`)
+    const {data} = await axios.get<any[]>(`${apiUrl}/${resource}${stringifiedQuery ? `/?${stringifiedQuery}` : ''}`)
 
     // client-side filter
-    const filter = params.filter.q
     let filteredData = data
-    if (filter) {
-      // v podstate vygenerovane Copilotom :D
-      // vyhladava to filter string vo vsetkych fieldoch kazdeho recordu
-      filteredData = data.filter((record: RaRecord) => {
-        return Object.keys(record).some((key) => {
-          const value = record[key]
-          return value && value.toString().toLowerCase().includes(filter.toLowerCase())
+    if (params.filter) {
+      const {q: search, ...rest} = params.filter
+      if (search) {
+        // vyhladava to filter string vo vsetkych fieldoch kazdeho recordu
+        // - bohuzial tie fieldy su casto len IDcka inych modelov, tak nic moc :D
+        filteredData = data.filter((record: RaRecord) => {
+          const matches = Object.values(record).some((value) => {
+            return value && JSON.stringify(value).toLowerCase().includes(search.toLowerCase())
+          })
+          return matches
+        })
+      }
+
+      if (rest) {
+        filteredData = filteredData.filter((record: RaRecord) => {
+          return Object.entries(rest).every(([key, value]) => {
+            if (!value) return true
+            return record[key] === value
+          })
         })
-      })
+      }
     }
 
     // client-side sort
-    const {field, order} = params.sort
+    if (params.sort) {
+      const {field, order} = params.sort
 
-    filteredData.sort(dynamicSort(field, order))
+      filteredData.sort(dynamicSort(field, order))
+    }
 
     // client-side pagination
-    const {page, perPage} = params.pagination
-    const pagedData = filteredData.slice((page - 1) * perPage, page * perPage)
+    let pagedData = filteredData
+    if (params.pagination) {
+      const {page, perPage} = params.pagination
+      pagedData = filteredData.slice((page - 1) * perPage, page * perPage)
+    }
 
     return {
       data: pagedData,

src/components/Admin/resources/base/flat-page/FlatpageList.tsx

@@ -6,7 +6,7 @@ import {TruncatedTextField} from '@/components/Admin/custom/TruncatedTextField'
 
 export const FlatpageList: FC = () => (
   <List>
-    <Datagrid rowClick="show">
+    <Datagrid>
       <NumberField source="id" />
       <TextField source="url" />
       <TextField source="title" />

src/components/Admin/resources/cms/post/PostCreate.tsx

@@ -14,7 +14,7 @@ export const PostCreate: FC = () => {
           <TextInput source="caption" fullWidth validate={required()} />
           <TextInput source="short_text" fullWidth validate={maxLength(200, 'Text musí mať najviac 200 znakov.')} />
           <TextInput source="details" multiline fullWidth />
-          <MyDateTimeInput source="added_at" fullWidth disabled defaultValue={new Date().toISOString()} />
+          {/* <MyDateTimeInput source="added_at" fullWidth disabled /> */}
           <MyDateTimeInput source="visible_after" fullWidth validate={required()} />
           <MyDateTimeInput source="visible_until" fullWidth validate={required()} />
           <SitesCheckboxInput source="sites" validate={required()} />

src/components/Admin/resources/cms/post/PostList.tsx

@@ -7,7 +7,7 @@ import {TruncatedTextField} from '@/components/Admin/custom/TruncatedTextField'
 
 export const PostList: FC = () => (
   <List>
-    <Datagrid rowClick="show">
+    <Datagrid>
       <TextField source="caption" />
       <TruncatedTextField source="short_text" maxTextWidth={50} />
       <TruncatedTextField source="details" maxTextWidth={50} />

src/components/Admin/resources/cms/post/PostShow.tsx

@@ -22,7 +22,7 @@ export const PostShow: FC = () => (
       <Tab label="content.labels.links">
         <SimpleShowLayout>
           <ArrayField source="links">
-            <Datagrid>
+            <Datagrid rowClick={false}>
               <TextField source="caption" />
               <TextField source="url" />
             </Datagrid>

src/components/Admin/resources/competition/competition/CompetitionList.tsx

@@ -6,7 +6,7 @@ import {TruncatedTextField} from '@/components/Admin/custom/TruncatedTextField'
 
 export const CompetitionList: FC = () => (
   <List>
-    <Datagrid rowClick="show">
+    <Datagrid>
       <TextField source="name" />
       <TextField source="slug" />
       <TextField source="start_year" />

src/components/Admin/resources/competition/competition/UpcomingOrCurrentEvent.tsx

@@ -16,6 +16,8 @@ export const UpcomingOrCurrentEvent: FC = () => {
   const record = useRecordContext()
   const redirect = useRedirect()
 
+  if (!record) return null
+
   return (
     <Labeled
       label="content.labels.next_event"

src/components/Admin/resources/competition/event-registration/EventRegistrationList.tsx

@@ -5,7 +5,7 @@ import {EventRegistration} from '@/types/api/competition'
 
 export const EventRegistrationList: FC = () => (
   <List>
-    <Datagrid rowClick="show">
+    <Datagrid>
       <FunctionField
         source="profile.last_name"
         label="content.labels.name"

src/components/Admin/resources/competition/event/EventList.tsx

@@ -2,13 +2,14 @@ import {FC} from 'react'
 import {Datagrid, FunctionField, List, NumberField, RaRecord, ReferenceField, TextField} from 'react-admin'
 
 import {DateTimeField} from '@/components/Admin/custom/DateTimeField'
+import {SeasonCodeField} from '@/components/Admin/custom/SeasonCodeField'
 
 export const EventList: FC = () => (
   <List>
-    <Datagrid rowClick="show">
+    <Datagrid>
       <ReferenceField source="competition" reference="competition/competition" link={false} />
       <NumberField source="year" />
-      <NumberField source="season_code" />
+      <SeasonCodeField source="season_code" />
       <TextField source="school_year" />
       <DateTimeField source="start" />
       <DateTimeField source="end" />

src/components/Admin/resources/competition/event/EventShow.tsx

@@ -12,6 +12,7 @@ import {
 
 import {DateTimeField} from '@/components/Admin/custom/DateTimeField'
 import {MyShow} from '@/components/Admin/custom/MyShow'
+import {SeasonCodeField} from '@/components/Admin/custom/SeasonCodeField'
 
 export const EventShow: FC = () => (
   <MyShow>
@@ -20,7 +21,7 @@ export const EventShow: FC = () => (
         <SimpleShowLayout>
           <ReferenceField source="competition" reference="competition/competition" link="show" />
           <NumberField source="year" />
-          <NumberField source="season_code" />
+          <SeasonCodeField source="season_code" />
           <TextField source="school_year" />
           <DateTimeField source="start" />
           <DateTimeField source="end" />
@@ -36,7 +37,7 @@ export const EventShow: FC = () => (
       <Tab label="content.labels.publications">
         <SimpleShowLayout>
           <ArrayField source="publication_set">
-            <Datagrid>
+            <Datagrid rowClick={false}>
               <TextField source="name" />
               <TextField source="file" />
               <ReferenceField source="publication_type" reference="competition/publication-type" link="show">

src/components/Admin/resources/competition/problems/ProblemCreate.tsx

@@ -5,6 +5,7 @@ import {LatexPreview} from '@/components/Admin/custom/LatexPreview'
 import {MyCreate} from '@/components/Admin/custom/MyCreate'
 import {MyFileField} from '@/components/Admin/custom/MyFileField'
 import {MyImageField} from '@/components/Admin/custom/MyImageField'
+import {Accept} from '@/utils/dropzone-accept'
 
 import {createProblemFormData} from './createProblemFormData'
 
@@ -23,10 +24,10 @@ export const ProblemCreate: FC = () => (
         <TextInput source="text" multiline fullWidth validate={required()} />
         <LatexPreview source="text" />
         <TextInput source="order" fullWidth validate={required()} />
-        <ImageInput source="image" accept="image/*">
+        <ImageInput source="image" accept={Accept.Image}>
           <MyImageField />
         </ImageInput>
-        <FileInput source="solution_pdf" accept="application/pdf">
+        <FileInput source="solution_pdf" accept={Accept.Pdf}>
           <MyFileField />
         </FileInput>
       </FormTab>