Add 'articles' collection to create operation

components/konstitisyon/create/create-form.js

@@ -1,6 +1,6 @@
 'use client'
 
-import {useRef} from 'react'
+import {useRef, useState, useEffect} from 'react'
 import PropTypes from 'prop-types'
 import Button from '@mui/material/Button'
 import TextField from '@mui/material/TextField'
@@ -10,6 +10,7 @@ import DialogContent from '@mui/material/DialogContent'
 import DialogContentText from '@mui/material/DialogContentText'
 import DialogTitle from '@mui/material/DialogTitle'
 import LogoutCountdown from '../../session/logout-countdown.js'
+import ListItems from './list-items.js'
 import {handleSubmit} from '@/lib/directus.js'
 import {formatFormContent} from '@/lib/format.js'
 
@@ -26,9 +27,17 @@ export default function CreateForm({
   collection,
   title,
   label,
-  hasMultiline = true
+  hasMultiline = true,
+  listItems
 }) {
   const countdownRef = useRef()
+  const [selectValue, setSelectValue] = useState('')
+
+  useEffect(() => {
+    if (listItems && listItems.length > 0) {
+      setSelectValue(listItems[0].id)
+    }
+  }, [listItems])
 
   const handleClose = () => {
     setIsOpen(false)
@@ -40,17 +49,36 @@ export default function CreateForm({
 
     const formattedContent = formatFormContent(e.currentTarget)
 
-    if (collection === 'commentaires') {
-      requestObject = {
-        text: formattedContent,
-        titre: selectedTitre,
-        status: 'draft',
+    switch (collection) {
+      case 'commentaires': {
+        requestObject = {
+          text: formattedContent,
+          titre: selectedTitre,
+          status: 'draft',
+        }
+
+        break
       }
-    } else if (collection === 'titres') {
-      requestObject = {
-        contenu: formattedContent,
-        status: 'draft',
+
+      case 'titres': {
+        requestObject = {
+          contenu: formattedContent,
+          status: 'draft',
+        }
+
+        break
       }
+
+      case 'articles': {
+        requestObject = {
+          contenu: formattedContent,
+          titre: selectValue,
+          status: 'draft',
+        }
+
+        break
+      }
+    // No default
     }
 
     await handleSubmit({
@@ -83,6 +111,13 @@ export default function CreateForm({
           <DialogContentText sx={{color: 'white'}}>
             {dialogText}
           </DialogContentText>
+          {listItems && listItems.length > 0 && (
+            <ListItems
+              items={listItems}
+              selectLabel='Titre associé *'
+              setSelectValue={setSelectValue}
+            />
+          )}
           <TextField
             autoFocus
             required
@@ -118,5 +153,6 @@ CreateForm.propTypes = {
   collection: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
-  hasMultiline: PropTypes.bool
+  hasMultiline: PropTypes.bool,
+  listItems: PropTypes.array.isRequired
 }