React Admin - sprava prispevkov (cms/post)

src/components/Admin/custom/SitesCheckboxInput.tsx

@@ -1,14 +1,9 @@
-import {CheckboxGroupInput, required} from 'react-admin'
+import {CheckboxGroupInput} from 'react-admin'
+
+import {seminarIdToName} from '@/utils/useSeminarInfo'
+
+const choices = Object.entries(seminarIdToName).map(([id, name]) => ({id, name}))
 
 export const SitesCheckboxInput: typeof CheckboxGroupInput = (props) => (
-  <CheckboxGroupInput
-    choices={[
-      {id: 1, name: 'Strom'},
-      {id: 2, name: 'Matik'},
-      {id: 3, name: 'Malynar'},
-      {id: 4, name: 'Zdruzenie'},
-    ]}
-    validate={required()}
-    {...props}
-  />
+  <CheckboxGroupInput choices={choices} {...props} />
 )

src/components/Admin/custom/TruncatedTextField.tsx

@@ -0,0 +1,16 @@
+import {FC} from 'react'
+import {FieldProps, useRecordContext} from 'react-admin'
+
+type TruncatedTextFieldProps = FieldProps & {
+  maxTextWidth: number
+}
+
+export const TruncatedTextField: FC<TruncatedTextFieldProps> = ({source, maxTextWidth}) => {
+  const record = useRecordContext()
+  if (!record || !source) return null
+
+  const text = record[source]
+  const isString = typeof text === 'string'
+
+  return <span>{isString && text.length > maxTextWidth ? text.slice(0, maxTextWidth - 3) + '...' : text}</span>
+}

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

@@ -1,26 +1,35 @@
 import {FC} from 'react'
-import {ArrayInput, Create, FormTab, required, SimpleFormIterator, TabbedForm, TextInput} from 'react-admin'
+import {
+  ArrayInput,
+  Create,
+  DateTimeInput,
+  FormTab,
+  NumberInput,
+  required,
+  SimpleFormIterator,
+  TabbedForm,
+  TextInput,
+} from 'react-admin'
 
-import {MyDateInput} from '@/components/Admin/custom/MyDateInput'
 import {SitesCheckboxInput} from '@/components/Admin/custom/SitesCheckboxInput'
 
 export const PostCreate: FC = () => (
   <Create redirect="show">
     <TabbedForm>
       <FormTab label="general">
-        {/* <NumberInput source="id" fullWidth disabled /> */}
+        <NumberInput source="id" fullWidth disabled />
         <TextInput source="caption" fullWidth validate={required()} />
         <TextInput source="short_text" fullWidth validate={required()} />
         <TextInput source="details" fullWidth />
-        {/* <MyDateInput source="added_at" fullWidth disabled /> */}
-        <MyDateInput source="visible_after" fullWidth validate={required()} />
-        <MyDateInput source="visible_until" fullWidth validate={required()} />
-        <SitesCheckboxInput source="sites" />
+        <DateTimeInput source="added_at" fullWidth disabled />
+        <DateTimeInput source="visible_after" fullWidth validate={required()} />
+        <DateTimeInput source="visible_until" fullWidth validate={required()} />
+        <SitesCheckboxInput source="sites" validate={required()} />
       </FormTab>
       <FormTab label="links">
         <ArrayInput source="links" defaultValue={[]}>
           <SimpleFormIterator>
-            {/* <NumberInput source="id" fullWidth disabled /> */}
+            <NumberInput source="id" fullWidth disabled />
             <TextInput source="caption" fullWidth validate={required()} />
             <TextInput source="url" fullWidth validate={required()} />
           </SimpleFormIterator>

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

@@ -1,7 +1,16 @@
 import {FC} from 'react'
-import {ArrayInput, Edit, FormTab, NumberInput, required, SimpleFormIterator, TabbedForm, TextInput} from 'react-admin'
+import {
+  ArrayInput,
+  DateTimeInput,
+  Edit,
+  FormTab,
+  NumberInput,
+  required,
+  SimpleFormIterator,
+  TabbedForm,
+  TextInput,
+} from 'react-admin'
 
-import {MyDateInput} from '@/components/Admin/custom/MyDateInput'
 import {MyEditActions} from '@/components/Admin/custom/MyEditActions'
 import {SitesCheckboxInput} from '@/components/Admin/custom/SitesCheckboxInput'
 
@@ -13,10 +22,10 @@ export const PostEdit: FC = () => (
         <TextInput source="caption" fullWidth validate={required()} />
         <TextInput source="short_text" fullWidth validate={required()} />
         <TextInput source="details" fullWidth />
-        <MyDateInput source="added_at" fullWidth disabled />
-        <MyDateInput source="visible_after" fullWidth validate={required()} />
-        <MyDateInput source="visible_until" fullWidth validate={required()} />
-        <SitesCheckboxInput source="sites" />
+        <DateTimeInput source="added_at" fullWidth disabled />
+        <DateTimeInput source="visible_after" fullWidth validate={required()} />
+        <DateTimeInput source="visible_until" fullWidth validate={required()} />
+        <SitesCheckboxInput source="sites" validate={required()} />
       </FormTab>
       <FormTab label="links">
         <ArrayInput source="links" defaultValue={[]}>

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

@@ -1,18 +1,25 @@
 import {FC} from 'react'
-import {Datagrid, DateField, List, NumberField, TextField} from 'react-admin'
+import {Datagrid, DateField, FunctionField, List, NumberField, RaRecord, TextField} from 'react-admin'
+
+import {SitesArrayField} from '@/components/Admin/custom/SitesArrayField'
+import {TruncatedTextField} from '@/components/Admin/custom/TruncatedTextField'
 
 export const PostList: FC = () => (
   <List>
     <Datagrid rowClick="show">
       <NumberField source="id" />
       <TextField source="caption" />
-      <TextField source="short_text" />
-      <TextField source="details" />
+      <TruncatedTextField source="short_text" maxTextWidth={50} />
+      <TruncatedTextField source="details" maxTextWidth={50} />
       <DateField source="added_at" />
       <DateField source="visible_after" />
       <DateField source="visible_until" />
-      {/* <ArrayField source="links" /> */}
-      {/* <ArrayField source="sites" /> */}
+      <SitesArrayField source="sites" />
+      <FunctionField<RaRecord>
+        source="links"
+        label="Link count"
+        render={(record) => record && <span>{record['links'].length}</span>}
+      />
     </Datagrid>
   </List>
 )