React Admin - Flatpage management

src/components/Admin/Admin.tsx

@@ -2,6 +2,10 @@ import {FC} from 'react'
 import {Admin as ReactAdmin, Resource} from 'react-admin'
 
 import {dataProvider} from './dataProvider'
+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 {PostCreate} from './resources/cms/post/PostCreate'
 import {PostEdit} from './resources/cms/post/PostEdit'
 import {PostList} from './resources/cms/post/PostList'
@@ -34,6 +38,13 @@ export const Admin: FC = () => {
         show={CompetitionShow}
         create={CompetitionCreate}
       />
+      <Resource
+        name="base/flat-page"
+        list={FlatpageList}
+        edit={FlatpageEdit}
+        show={FlatpageShow}
+        create={FlatpageCreate}
+      />
     </ReactAdmin>
   )
 }

src/components/Admin/custom/TruncatedTextField.tsx

@@ -1,16 +1,33 @@
-import {FC} from 'react'
+import {Typography} from '@mui/material'
+import {FC, useState} from 'react'
 import {FieldProps, useRecordContext} from 'react-admin'
 
 type TruncatedTextFieldProps = FieldProps & {
   maxTextWidth: number
+  expandable?: boolean
 }
 
-export const TruncatedTextField: FC<TruncatedTextFieldProps> = ({source, maxTextWidth}) => {
+export const TruncatedTextField: FC<TruncatedTextFieldProps> = ({source, maxTextWidth, expandable = false}) => {
+  const [truncate, setTruncate] = useState(true)
+
   const record = useRecordContext()
   if (!record || !source) return null
 
   const text = record[source]
   const isString = typeof text === 'string'
+  const isOverLimit = isString && text.length > maxTextWidth
+
+  const expandableProps =
+    expandable && isOverLimit
+      ? {
+          onClick: () => setTruncate((prev) => !prev),
+          sx: {cursor: 'pointer'},
+        }
+      : {}
 
-  return <span>{isString && text.length > maxTextWidth ? text.slice(0, maxTextWidth - 3) + '...' : text}</span>
+  return (
+    <Typography variant="body2" {...expandableProps}>
+      {isOverLimit && truncate ? text.slice(0, maxTextWidth - 3) + '...' : text}
+    </Typography>
+  )
 }

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

@@ -0,0 +1,17 @@
+import {FC} from 'react'
+import {NumberInput, required, SimpleForm, TextInput} from 'react-admin'
+
+import {MyCreate} from '@/components/Admin/custom/MyCreate'
+import {SitesCheckboxInput} from '@/components/Admin/custom/SitesCheckboxInput'
+
+export const FlatpageCreate: FC = () => (
+  <MyCreate>
+    <SimpleForm>
+      <NumberInput source="id" fullWidth disabled />
+      <TextInput source="url" fullWidth validate={required()} />
+      <TextInput source="title" fullWidth validate={required()} />
+      <TextInput source="content" multiline fullWidth validate={required()} />
+      <SitesCheckboxInput source="sites" validate={required()} />
+    </SimpleForm>
+  </MyCreate>
+)

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

@@ -0,0 +1,17 @@
+import {FC} from 'react'
+import {NumberInput, required, SimpleForm, TextInput} from 'react-admin'
+
+import {MyEdit} from '@/components/Admin/custom/MyEdit'
+import {SitesCheckboxInput} from '@/components/Admin/custom/SitesCheckboxInput'
+
+export const FlatpageEdit: FC = () => (
+  <MyEdit>
+    <SimpleForm>
+      <NumberInput source="id" fullWidth disabled />
+      <TextInput source="url" fullWidth validate={required()} />
+      <TextInput source="title" fullWidth validate={required()} />
+      <TextInput source="content" multiline fullWidth validate={required()} />
+      <SitesCheckboxInput source="sites" validate={required()} />
+    </SimpleForm>
+  </MyEdit>
+)

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

@@ -0,0 +1,19 @@
+import {FC} from 'react'
+import {BooleanField, Datagrid, List, NumberField, TextField} from 'react-admin'
+
+import {SitesArrayField} from '@/components/Admin/custom/SitesArrayField'
+import {TruncatedTextField} from '@/components/Admin/custom/TruncatedTextField'
+
+export const FlatpageList: FC = () => (
+  <List>
+    <Datagrid rowClick="show">
+      <NumberField source="id" />
+      <TextField source="url" />
+      <TextField source="title" />
+      <TruncatedTextField source="content" maxTextWidth={30} />
+      <BooleanField source="enable_comments" />
+      <BooleanField source="registration_required" />
+      <SitesArrayField source="sites" />
+    </Datagrid>
+  </List>
+)

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

@@ -0,0 +1,20 @@
+import {FC} from 'react'
+import {BooleanField, NumberField, Show, SimpleShowLayout, TextField} from 'react-admin'
+
+import {MyShowActions} from '@/components/Admin/custom/MyShowActions'
+import {SitesArrayField} from '@/components/Admin/custom/SitesArrayField'
+import {TruncatedTextField} from '@/components/Admin/custom/TruncatedTextField'
+
+export const FlatpageShow: FC = () => (
+  <Show actions={<MyShowActions />}>
+    <SimpleShowLayout>
+      <NumberField source="id" />
+      <TextField source="url" />
+      <TextField source="title" />
+      <TruncatedTextField source="content" maxTextWidth={200} expandable />
+      <BooleanField source="enable_comments" />
+      <BooleanField source="registration_required" />
+      <SitesArrayField source="sites" />
+    </SimpleShowLayout>
+  </Show>
+)

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

@@ -20,7 +20,7 @@ export const PostCreate: FC = () => (
         <NumberInput source="id" fullWidth disabled />
         <TextInput source="caption" fullWidth validate={required()} />
         <TextInput source="short_text" fullWidth validate={required()} />
-        <TextInput source="details" fullWidth />
+        <TextInput source="details" multiline fullWidth />
         <DateTimeInput source="added_at" fullWidth disabled />
         <DateTimeInput source="visible_after" fullWidth validate={required()} />
         <DateTimeInput source="visible_until" fullWidth validate={required()} />

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

@@ -20,7 +20,7 @@ export const PostEdit: FC = () => (
         <NumberInput source="id" fullWidth disabled />
         <TextInput source="caption" fullWidth validate={required()} />
         <TextInput source="short_text" fullWidth validate={required()} />
-        <TextInput source="details" fullWidth />
+        <TextInput source="details" multiline fullWidth />
         <DateTimeInput source="added_at" fullWidth disabled />
         <DateTimeInput source="visible_after" fullWidth validate={required()} />
         <DateTimeInput source="visible_until" fullWidth validate={required()} />

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

@@ -25,8 +25,8 @@ export const CompetitionShow: FC = () => (
           <TextField source="name" />
           <TextField source="slug" />
           <NumberField source="start_year" />
-          <TextField source="description" />
-          <TruncatedTextField source="rules" maxTextWidth={200} />
+          <TruncatedTextField source="description" maxTextWidth={100} expandable />
+          <TruncatedTextField source="rules" maxTextWidth={200} expandable />
           <NumberField source="competition_type.id" />
           <TextField source="competition_type.name" />
           <SitesArrayField source="sites" />

src/components/Admin/resources/competition/series/SeriesShow.tsx

@@ -33,7 +33,7 @@ export const SeriesShow: FC = () => (
           <ArrayField source="problems">
             <Datagrid>
               <TextField source="id" />
-              <TruncatedTextField source="text" maxTextWidth={50} />
+              <TruncatedTextField source="text" maxTextWidth={100} expandable />
             </Datagrid>
           </ArrayField>
         </SimpleShowLayout>