React Admin - Flatpage management (#251)

* expandable TruncatedTextField * flatpage management * multiline inputs * multiline inputs for posts * remove unnecessary boolean pages
ZdruzenieSTROM · Dec 9, 2023 · 3bc981e · 3bc981e
1 parent 72a0ba6
commit 3bc981e
Show file tree

Hide file tree

Showing 10 changed files with 105 additions and 8 deletions.
diff --git a/src/components/Admin/Admin.tsx b/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>
   )
 }
diff --git a/src/components/Admin/custom/TruncatedTextField.tsx b/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>
+  )
 }
diff --git a/src/components/Admin/resources/base/flat-page/FlatpageCreate.tsx b/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>
+)
diff --git a/src/components/Admin/resources/base/flat-page/FlatpageEdit.tsx b/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>
+)
diff --git a/src/components/Admin/resources/base/flat-page/FlatpageList.tsx b/src/components/Admin/resources/base/flat-page/FlatpageList.tsx
@@ -0,0 +1,17 @@
+import {FC} from 'react'
+import {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} />
+      <SitesArrayField source="sites" />
+    </Datagrid>
+  </List>
+)
diff --git a/src/components/Admin/resources/base/flat-page/FlatpageShow.tsx b/src/components/Admin/resources/base/flat-page/FlatpageShow.tsx
@@ -0,0 +1,18 @@
+import {FC} from 'react'
+import {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 />
+      <SitesArrayField source="sites" />
+    </SimpleShowLayout>
+  </Show>
+)
diff --git a/src/components/Admin/resources/cms/post/PostCreate.tsx b/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()} />

diff --git a/src/components/Admin/resources/cms/post/PostEdit.tsx b/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()} />

diff --git a/src/components/Admin/resources/competition/competition/CompetitionShow.tsx b/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" />

diff --git a/src/components/Admin/resources/competition/series/SeriesShow.tsx b/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>