adjust Create, Update logic, add permission

BACKEND/Modules/Admin/app/Http/Controllers/DocumentController.php

@@ -46,42 +46,48 @@ class DocumentController extends Controller
     public function create(Request $request)
     {
         $request->validate([
-            'title' => 'required|string|max:255',
             'type' => 'required|in:file,link',
-            'uri'   => 'nullable|array',
-            'uri.*' => 'nullable|url',
             'files' => 'nullable|array',
-            'files.*' => 'file|mimes:doc,docx,xls,xlsx,pdf|max:20480',
+            'files.*.title' => 'required|string|max:255',
+            'files.*.file' => 'required|file|mimes:doc,docx,xls,xlsx,pdf|max:20480',
+            'links' => 'nullable|array',
+            'links.*.title' => 'required|string|max:255',
+            'links.*.uri' => 'required|string|url',
             'is_active' => 'required|boolean',
         ]);
 
-        if($request->type == "file") {
+        $documents = [];
-            $uploadedFiles = [];
+        
-            if ($request->hasFile('files')) {
+        if ($request->type === "file") {
-                foreach ($request->file('files') as $file) {
+            foreach ($request->file('files') as $index => $file) {
-                    $path = $file->store('uploads', options: 'public');
+                $path = $file['file']->store('uploads', 'public');
-                    $uploadedFiles[] = "storage/{$path}";
+                $documents[] = [
-                }
+                    'title' => $request->input("files.$index.title"),
+                    'type' => 'file',
+                    'uri' => "storage/{$path}",
+                    'is_active' => $request->is_active,
+                    'created_at' => now(),
+                    'updated_at' => now(),
+                ];
+            }
+        } else {
+            foreach ($request->links as $link) {
+                $documents[] = [
+                    'title' => $link['title'],
+                    'type' => 'link',
+                    'uri' => $link['uri'],
+                    'is_active' => $request->is_active,
+                    'created_at' => now(),
+                    'updated_at' => now(),
+                ];
             }
-
-            $document = Document::create([
-                'title' => $request->title,
-                'type' => $request->type,
-                'uri' =>  implode(',', $uploadedFiles),
-                'is_active' => $request->is_active,
-            ]);
-
-            return AbstractController::ResultSuccess($document, "Document created successfully!");
         }
 
-        $document = Document::create([
+        if (!empty($documents)) {
-            'title' => $request->title,
+            Document::insert($documents);
-            'type' => $request->type,
+        }
-            'uri' =>  implode(',', $request->uri),
-            'is_active' => $request->is_active,
-        ]);
 
-        return AbstractController::ResultSuccess($document, "Document created successfully!");
+        return AbstractController::ResultSuccess($documents, "Documents created successfully!");
     }
 
     public function update(Request $request)
@@ -90,11 +96,9 @@ class DocumentController extends Controller
             'id' => 'required|exists:documents,id',
             'title' => 'required|string|max:255',
             'type' => 'required|in:file,link',
-            'uri'   => 'nullable|array',
+            'uri'   => 'nullable|url',
-            'uri.*' => 'nullable|url',
+            'file' => 'nullable|file|mimes:doc,docx,xls,xlsx,pdf|max:20480',
-            'files' => 'nullable|array',
+            'existing_file' => 'nullable|string',
-            'files.*' => 'file|mimes:doc,docx,xls,xlsx,pdf|max:20480',
-            'existing_files' => 'nullable|array',
             'is_active' => 'required|boolean',
         ]);
 
@@ -104,29 +108,22 @@ class DocumentController extends Controller
         }
 
         if ($request->type === "file") {
-            $existingFiles = explode(',', $document->uri);
+            $uri = $request->existing_file;
-            $selectedExistingFiles = $request->existing_files ?? [];
 
-            $filesToDelete = array_diff($existingFiles, $selectedExistingFiles);
+            if ($request->hasFile('file')) {
-            foreach ($filesToDelete as $file) {
+                $filePath = str_replace('storage/', 'public/', $request->existing_file);
-                $filePath = str_replace('storage/', 'public/', $file);
                 if (Storage::exists($filePath)) {
                     Storage::delete($filePath);
                 }
-            }
 
-            $uploadedFiles = $selectedExistingFiles;
+                $path = $request->file('file')->store('uploads', 'public');
-            if ($request->hasFile('files')) {
+                $uri = "storage/{$path}";
-                foreach ($request->file('files') as $file) {
-                    $path = $file->store('uploads', 'public');
-                    $uploadedFiles[] = "storage/{$path}";
-                }
             }
 
             $document->update([
                 'title' => $request->title,
                 'type' => $request->type,
-                'uri' => implode(',', $uploadedFiles),
+                'uri' => $uri,
                 'is_active' => $request->is_active,
             ]);
 
@@ -136,7 +133,7 @@ class DocumentController extends Controller
         $document->update([
             'title' => $request->title,
             'type' => $request->type,
-            'uri' =>  implode(',', $request->uri),
+            'uri' =>  $request->uri,
             'is_active' => $request->is_active,
         ]);
 
@@ -152,12 +149,9 @@ class DocumentController extends Controller
         }
 
         if ($document->type === "file") {
-            $existingFiles = explode(',', $document->uri);
+            $filePath = str_replace('storage/', 'public/', $document->uri);
-            foreach ($existingFiles as $file) {
+            if (Storage::exists($filePath)) {
-                $filePath = str_replace('storage/', 'public/', $file);
+                Storage::delete($filePath);
-                if (Storage::exists($filePath)) {
-                    Storage::delete($filePath);
-                }
             }
         }
 

FRONTEND/src/pages/Document/Document.tsx

@@ -3,24 +3,24 @@ import { get } from '@/rtk/helpers/apiService'
 import { deleteDocument, listDocument } from '@/api/Admin'
 import { Xdelete } from '@/rtk/helpers/CRUD'
 
-import {
+import { Anchor, Box, Button, Dialog, Group, Loader, Text } from '@mantine/core'
-  Anchor,
-  Badge,
-  Box,
-  Button,
-  Dialog,
-  Group,
-  Loader,
-  Text,
-} from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
 import { notifications } from '@mantine/notifications'
-import { IconEdit, IconX } from '@tabler/icons-react'
+import {
+  IconEdit,
+  IconFileTypeDoc,
+  IconFileTypePdf,
+  IconFileTypeXls,
+  IconLink,
+  IconX,
+} from '@tabler/icons-react'
 import DataTableAll from '@/components/DataTable/DataTable'
-import ModalAddEditDocument from './ModalAddEditDocument'
 import ModalFileDocument from './ModalFileDocument'
 
 import classes from './Document.module.css'
+import ModalAddDocument from './ModalAddDocument'
+import ModalEditDocument from './ModalEditDocument'
+import { checkPermissions } from '@/utils/checkRoles'
 
 interface TDocument {
   id: number
@@ -39,17 +39,16 @@ type RequestPagination = {
 
 const Document = () => {
   const [loader, setLoader] = useState<boolean>(false)
-  const [action, setAction] = useState<string>('')
   const [rows, setRows] = useState<RequestPagination>({
     data: [],
     status: true,
   })
   const [selectDataRow, setSelectDataRow] = useState<any>({})
 
-  const [
+  const [openedModalAdd, { open: openModalAdd, close: closeModalAdd }] =
-    openedModalAddEdit,
+    useDisclosure(false)
-    { open: openModalAddEdit, close: closeModalAddEdit },
+  const [openedModalEdit, { open: openModalEdit, close: closeModalEdit }] =
-  ] = useDisclosure(false)
+    useDisclosure(false)
   const [openedModalFile, { open: openModalFile, close: closeModalFile }] =
     useDisclosure(false)
 
@@ -92,6 +91,22 @@ const Document = () => {
     }
   }
 
+  const getFileTypeIcon = (uri: string) => {
+    if (!uri) return null
+
+    const extension = uri.split('.').pop()?.toLowerCase()
+
+    if (['doc', 'docx'].includes(extension!)) {
+      return <IconFileTypeDoc style={{ color: '#1e62c1' }} />
+    }
+
+    if (['xls', 'xlsx'].includes(extension!)) {
+      return <IconFileTypeXls style={{ color: '#0e864b' }} />
+    }
+
+    return <IconFileTypePdf style={{ color: '#ff1b0e' }} />
+  }
+
   const columns = [
     {
       name: 'id',
@@ -103,7 +118,7 @@ const Document = () => {
     },
     {
       name: 'title',
-      size: '30%',
+      size: '50%',
       header: 'Title',
       render: (row: TDocument) => {
         return <Text ta="start">{row?.title}</Text>
@@ -111,44 +126,35 @@ const Document = () => {
     },
     {
       name: 'uri',
-      size: '60%',
+      size: '40%',
       header: 'URI',
       render: (row: TDocument) => {
         return (
           <Box>
             {row.type === 'file' ? (
-              <Group gap={5}>
+              <Box
-                {row?.uri &&
+                w="fit-content"
-                  row?.uri.split(',')?.map((uriItem) => (
+                style={{ cursor: 'pointer' }}
-                    <Badge
+                onClick={() => {
-                      style={{ cursor: 'pointer' }}
+                  setSelectDataRow(row)
-                      tt="initial"
+                  openModalFile()
-                      onClick={() => {
+                }}
-                        setSelectDataRow({ ...row, uri: uriItem })
+                title={`File ${row?.uri
-                        openModalFile()
+                  .split('.')
-                      }}
+                  .pop()
-                      color="orange"
+                  ?.toLowerCase()} detail`}
-                    >
+              >
-                      {uriItem.replace('storage/uploads/', '')}
+                {getFileTypeIcon(row?.uri)}
-                    </Badge>
+              </Box>
-                  ))}
-              </Group>
             ) : (
-              <Group gap={5}>
+              <Anchor
-                {row?.uri &&
+                ta="start"
-                  row?.uri.split(',')?.map((uriItem) => (
+                href={row?.uri}
-                    <Anchor
+                target="_blank"
-                      ta="start"
+                title={row?.uri}
-                      href={uriItem}
+              >
-                      target="_blank"
+                <IconLink />
-                      title={uriItem}
+              </Anchor>
-                    >
-                      <Badge style={{ cursor: 'pointer' }} tt="initial">
-                        {uriItem}
-                      </Badge>
-                    </Anchor>
-                  ))}
-              </Group>
             )}
           </Box>
         )
@@ -159,29 +165,32 @@ const Document = () => {
       size: '5%',
       header: 'Action',
       render: (row: TDocument) => {
-        return (
+        if (checkPermissions('admin')) {
-          <Box className={classes.optionIcon}>
+          return (
-            <IconEdit
+            <Box className={classes.optionIcon}>
-              className={classes.editIcon}
+              <IconEdit
-              onClick={() => {
+                className={classes.editIcon}
-                setAction('edit')
+                onClick={() => {
-                setSelectDataRow(row)
+                  setSelectDataRow(row)
-                openModalAddEdit()
+                  openModalEdit()
-              }}
+                }}
-              width={20}
+                width={20}
-              height={20}
+                height={20}
-            />
+              />
-            <IconX
+              <IconX
-              className={classes.deleteIcon}
+                className={classes.deleteIcon}
-              onClick={() => {
+                onClick={() => {
-                setOpenedDialogDelete(true)
+                  setOpenedDialogDelete(true)
-                setSelectDataRow(row)
+                  setSelectDataRow(row)
-              }}
+                }}
-              width={20}
+                width={20}
-              height={20}
+                height={20}
-            />
+              />
-          </Box>
+            </Box>
-        )
+          )
+        }
+
+        return <Box></Box>
       },
     },
   ]
@@ -193,30 +202,17 @@ const Document = () => {
           <Text>Admin/</Text>
           Documents
         </h3>
-        <Button
+
-          onClick={() => {
+        {checkPermissions('admin') ? (
-            setAction('add')
+          <Button onClick={() => openModalAdd()} disabled={loader}>
-            openModalAddEdit()
+            + Add
-          }}
+          </Button>
-          disabled={loader}
+        ) : (
-        >
+          ''
-          + Add
+        )}
-        </Button>
       </div>
 
       <Box mt={'md'}>
-        <Group wrap="wrap" mb={'md'} px={16}>
-          <Text fw={500}>Note: </Text>
-
-          <Badge style={{ cursor: 'pointer' }} tt="initial">
-            Links
-          </Badge>
-
-          <Badge style={{ cursor: 'pointer' }} tt="initial" color="orange">
-            Files
-          </Badge>
-        </Group>
-
         {loader ? (
           <Box ta={'center'}>
             <Loader size={40} mt={'15%'} />
@@ -240,12 +236,18 @@ const Document = () => {
         />
       )}
 
-      {openedModalAddEdit && (
+      {openedModalAdd && (
-        <ModalAddEditDocument
+        <ModalAddDocument
-          opened={openedModalAddEdit}
+          opened={openedModalAdd}
-          close={closeModalAddEdit}
+          close={closeModalAdd}
-          action={action}
+          getAllData={getAllData}
-          setAction={setAction}
+        />
+      )}
+
+      {openedModalEdit && (
+        <ModalEditDocument
+          opened={openedModalEdit}
+          close={closeModalEdit}
           selectDataRow={selectDataRow}
           setSelectDataRow={setSelectDataRow}
           getAllData={getAllData}

FRONTEND/src/pages/Document/ModalAddDocument.tsx

@@ -0,0 +1,254 @@
+import { useEffect, useState } from 'react'
+import { useForm } from '@mantine/form'
+import {
+  Modal,
+  Button,
+  Text,
+  Box,
+  Switch,
+  Checkbox,
+  FileInput,
+  TextInput,
+  Group,
+  ActionIcon,
+} from '@mantine/core'
+import { IconPlus, IconTrash } from '@tabler/icons-react'
+
+import { create } from '@/rtk/helpers/CRUD'
+import { createDocument } from '@/api/Admin'
+import { getHeaderInfo } from '@/rtk/helpers/tokenCreator'
+import { notifications } from '@mantine/notifications'
+
+type MProps = {
+  opened: boolean
+  close: () => void
+  getAllData: () => void
+}
+
+const ModalAddDocument = ({ opened, close, getAllData }: MProps) => {
+  const [loadingSubmit, setLoadingSubmit] = useState(false)
+
+  const form = useForm({
+    initialValues: {
+      type: 'file',
+      files: [] as { title: string; file: File }[],
+      links: [] as { title: string; uri: string }[],
+      is_active: true,
+    },
+  })
+
+  useEffect(() => {
+    form.reset()
+  }, [])
+
+  const handleCreate = async (values: any) => {
+    try {
+      if (values.type === 'file' && values.files.length === 0) {
+        notifications.show({
+          title: 'Error',
+          message: 'No files uploaded!!!',
+          color: 'red',
+        })
+        return
+      }
+
+      if (values.type === 'link' && values.links.length === 0) {
+        notifications.show({
+          title: 'Error',
+          message: 'No links provided!!!',
+          color: 'red',
+        })
+        return
+      }
+
+      setLoadingSubmit(true)
+      const header = await getHeaderInfo()
+      const formData = new FormData()
+      header.headers['Content-Type'] = 'multipart/form-data'
+
+      formData.append('type', values.type)
+      formData.append('is_active', values.is_active ? '1' : '0')
+
+      if (values.type === 'file') {
+        values.files.forEach((item: any, index: number) => {
+          formData.append(`files[${index}][title]`, item.title)
+          formData.append(`files[${index}][file]`, item.file)
+        })
+      } else {
+        values.links.forEach((item: any, index: number) => {
+          formData.append(`links[${index}][title]`, item.title)
+          formData.append(`links[${index}][uri]`, item.uri)
+        })
+      }
+
+      const res = await create(createDocument, formData, getAllData, header)
+      if (res === true) {
+        resetForm()
+      }
+    } catch (error) {
+      console.error(error)
+    } finally {
+      setLoadingSubmit(false)
+    }
+  }
+
+  const resetForm = () => {
+    close()
+    form.reset()
+  }
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={resetForm}
+      size="lg"
+      title={
+        <Text fw={700} fz={'lg'}>
+          Add Document
+        </Text>
+      }
+    >
+      <form onSubmit={form.onSubmit(handleCreate)}>
+        <Switch
+          style={{ width: 'fit-content' }}
+          label={form.values.type === 'file' ? 'Upload files' : 'Enter links'}
+          checked={form.values.type === 'file'}
+          onChange={(event) =>
+            form.setFieldValue(
+              'type',
+              event.currentTarget.checked ? 'file' : 'link',
+            )
+          }
+          mb={'md'}
+          disabled={loadingSubmit}
+        />
+
+        {form.values.type === 'file' ? (
+          <Box>
+            <FileInput
+              accept=".doc,.docx,.xls,.xlsx,.pdf"
+              label="Upload Doc, Excel, PDF files"
+              multiple
+              mb="md"
+              value={form.values.files.map((file) => file.file)}
+              onChange={(files) => {
+                if (files) {
+                  const newFiles = files.map((file) => ({
+                    title: file.name.split('.')[0],
+                    file,
+                  }))
+                  form.setFieldValue('files', newFiles)
+                }
+              }}
+              disabled={loadingSubmit}
+              required
+            />
+
+            {form.values.files.map((item, index) => (
+              <Group key={index} mb={'md'}>
+                <TextInput
+                  w="50%"
+                  label="Title"
+                  value={form.values.files[index].title}
+                  onChange={(event) =>
+                    form.setFieldValue(
+                      `files.${index}.title`,
+                      event.currentTarget.value,
+                    )
+                  }
+                  maxLength={255}
+                  disabled={loadingSubmit}
+                  required
+                />
+                <Text mt={24} w="30%">
+                  {item.file?.name}
+                </Text>
+              </Group>
+            ))}
+          </Box>
+        ) : (
+          <Box>
+            {form.values.links.map((_, index) => (
+              <Group key={index} mb={'md'}>
+                <TextInput
+                  w="35%"
+                  label="Title"
+                  value={form.values.links[index].title}
+                  onChange={(event) =>
+                    form.setFieldValue(
+                      `links.${index}.title`,
+                      event.currentTarget.value,
+                    )
+                  }
+                  maxLength={255}
+                  disabled={loadingSubmit}
+                  required
+                />
+                <TextInput
+                  w="50%"
+                  label="URL"
+                  value={form.values.links[index].uri}
+                  onChange={(event) =>
+                    form.setFieldValue(
+                      `links.${index}.uri`,
+                      event.currentTarget.value,
+                    )
+                  }
+                  disabled={loadingSubmit}
+                  required
+                />
+                <ActionIcon
+                  color="red"
+                  variant="light"
+                  onClick={() =>
+                    form.setFieldValue(
+                      'links',
+                      form.values.links.filter((_, i) => i !== index),
+                    )
+                  }
+                  disabled={loadingSubmit}
+                  mt={24}
+                >
+                  <IconTrash size={16} />
+                </ActionIcon>
+              </Group>
+            ))}
+
+            <Button
+              leftSection={<IconPlus size={16} />}
+              variant="light"
+              onClick={() =>
+                form.setFieldValue('links', [
+                  ...form.values.links,
+                  { title: '', uri: '' },
+                ])
+              }
+              disabled={loadingSubmit}
+              mb="md"
+            >
+              Add Link
+            </Button>
+          </Box>
+        )}
+
+        <Checkbox
+          label="Is Active"
+          mb={'md'}
+          checked={form.values.is_active}
+          onChange={(event) =>
+            form.setFieldValue('is_active', event.currentTarget.checked)
+          }
+          disabled={loadingSubmit}
+        />
+
+        <Box ta="center" mt="lg">
+          <Button color="green" type="submit" loading={loadingSubmit}>
+            Create
+          </Button>
+        </Box>
+      </form>
+    </Modal>
+  )
+}
+
+export default ModalAddDocument

FRONTEND/src/pages/Document/ModalAddEditDocument.tsx

@@ -1,299 +0,0 @@
-import { useEffect, useState } from 'react'
-import { useForm } from '@mantine/form'
-import {
-  Modal,
-  Button,
-  TextInput,
-  Text,
-  Box,
-  Switch,
-  Checkbox,
-  FileInput,
-  TagsInput,
-  Group,
-} from '@mantine/core'
-
-import { create, update } from '@/rtk/helpers/CRUD'
-import { createDocument, updateDocument } from '@/api/Admin'
-import { getHeaderInfo } from '@/rtk/helpers/tokenCreator'
-import { notifications } from '@mantine/notifications'
-
-type MProps = {
-  opened: boolean
-  close: () => void
-  setAction: (arg0: any) => void
-  selectDataRow: any
-  setSelectDataRow: any
-  action: string
-  getAllData: () => void
-}
-
-const ModalAddEditDocument = ({
-  opened,
-  close,
-  setAction,
-  selectDataRow,
-  setSelectDataRow,
-  action,
-  getAllData,
-}: MProps) => {
-  const [loadingSubmit, setLoadingSubmit] = useState(false)
-
-  const form = useForm({
-    initialValues: {
-      title: '',
-      type: true,
-      files: [] as File[],
-      uri: [],
-      is_active: true,
-    },
-  })
-
-  useEffect(() => {
-    form.setValues({
-      title: selectDataRow?.title ?? '',
-      type: selectDataRow?.type ? selectDataRow?.type === 'file' : true,
-      files: [],
-      uri: selectDataRow?.uri?.split(',') ?? [],
-      is_active: selectDataRow?.is_active ?? true,
-    })
-  }, [selectDataRow])
-
-  const handleCreate = async (data: any) => {
-    try {
-      setLoadingSubmit(true)
-
-      let formdata = {}
-      const header = await getHeaderInfo()
-
-      if (data.type) {
-        if (data.files.length < 1) {
-          notifications.show({
-            title: 'Error',
-            message: 'Upload at least 1 file',
-            color: 'red',
-          })
-
-          return
-        }
-
-        header.headers['Content-Type'] = 'multipart/form-data'
-        const tmpFormData = new FormData()
-
-        tmpFormData.append('title', data.title)
-        tmpFormData.append('type', data.type ? 'file' : 'link')
-        tmpFormData.append('is_active', data.is_active ? '1' : '0')
-        for (let i = 0; i < data.files.length; i++) {
-          tmpFormData.append('files[]', data.files[i])
-        }
-
-        formdata = tmpFormData
-      } else {
-        const { files, ...rest } = data
-        formdata = {
-          ...rest,
-          type: rest.type ? 'file' : 'link',
-        }
-      }
-
-      const res = await create(createDocument, formdata, getAllData, header)
-      if (res === true) {
-        setAction('')
-        close()
-        form.reset()
-        setSelectDataRow({})
-      }
-    } catch (error: any) {
-      console.log(error)
-    } finally {
-      setLoadingSubmit(false)
-    }
-  }
-
-  const handleUpdate = async (data: any) => {
-    try {
-      setLoadingSubmit(true)
-
-      let formdata = {}
-      const header = await getHeaderInfo()
-
-      if (data.type) {
-        if (data.files.length < 1 && data.uri.length < 1) {
-          notifications.show({
-            title: 'Error',
-            message: 'Upload at least 1 file',
-            color: 'red',
-          })
-
-          return
-        }
-
-        header.headers['Content-Type'] = 'multipart/form-data'
-        const tmpFormData = new FormData()
-
-        tmpFormData.append('title', data.title)
-        tmpFormData.append('type', data.type ? 'file' : 'link')
-        tmpFormData.append('is_active', data.is_active ? '1' : '0')
-        for (let i = 0; i < data.files.length; i++) {
-          tmpFormData.append('files[]', data.files[i])
-        }
-
-        data.uri.forEach((fileUri: string) => {
-          tmpFormData.append('existing_files[]', fileUri)
-        })
-
-        formdata = tmpFormData
-      } else {
-        const { files, ...rest } = data
-        formdata = {
-          ...rest,
-          type: rest.type ? 'file' : 'link',
-        }
-      }
-
-      const res = await update(
-        updateDocument + `?id=${selectDataRow?.id}`,
-        formdata,
-        getAllData,
-        header,
-      )
-      if (res === true) {
-        setAction('')
-        close()
-        form.reset()
-        setSelectDataRow({})
-      }
-    } catch (error: any) {
-      throw new Error(error)
-    } finally {
-      setLoadingSubmit(false)
-    }
-  }
-
-  return (
-    <Modal
-      opened={opened}
-      onClose={() => {
-        setAction('')
-        close()
-        form.reset()
-        setSelectDataRow({})
-      }}
-      size="lg"
-      title={
-        <Text fw={700} fz={'lg'}>
-          {action === 'add' ? 'Add Document' : 'Update Document'}
-        </Text>
-      }
-    >
-      <form
-        onSubmit={form.onSubmit((values) => {
-          if (action === 'add') {
-            handleCreate(values)
-          } else {
-            handleUpdate(values)
-          }
-        })}
-      >
-        <TextInput
-          label="Title"
-          maxLength={255}
-          key={'title'}
-          mb={'md'}
-          {...form.getInputProps('title')}
-          disabled={loadingSubmit}
-          required
-        />
-
-        {selectDataRow?.id ? (
-          ''
-        ) : (
-          <Switch
-            style={{ width: 'fit-content' }}
-            label={form.values.type ? 'Upload files' : 'Enter links'}
-            checked={form.values.type}
-            onChange={(event) =>
-              form.setFieldValue('type', event.currentTarget.checked)
-            }
-            mb={'md'}
-            disabled={loadingSubmit}
-          />
-        )}
-
-        <Box mb={'md'}>
-          {form.values.type ? (
-            <Box>
-              <FileInput
-                accept=".doc,.docx,.xls,.xlsx,.pdf"
-                label="Upload Doc, Excel, PDF files"
-                multiple
-                mb="md"
-                value={form.values.files}
-                onChange={(files) => {
-                  form.setFieldValue('files', files || [])
-                }}
-                disabled={loadingSubmit}
-                required
-              />
-
-              {selectDataRow?.uri && form.values.uri.length > 0 && (
-                <Box>
-                  <Text fw={500}>Existing Files:</Text>
-                  {form.values.uri.map((fileUri: string, index) => (
-                    <Group key={index} justify="space-between" mb="sm">
-                      <Text size="sm">
-                        {fileUri.replace('storage/uploads/', '')}
-                      </Text>
-                      <Button
-                        color="red"
-                        size="xs"
-                        ml="md"
-                        onClick={() =>
-                          form.setFieldValue(
-                            'uri',
-                            form.values.uri.filter((_, i) => i !== index),
-                          )
-                        }
-                      >
-                        Remove
-                      </Button>
-                    </Group>
-                  ))}
-                </Box>
-              )}
-            </Box>
-          ) : (
-            <Box>
-              <TagsInput
-                label="Enter uri"
-                key={'uri'}
-                mb={'md'}
-                {...form.getInputProps('uri')}
-                disabled={loadingSubmit}
-                required
-              />
-            </Box>
-          )}
-        </Box>
-
-        <Checkbox
-          label="Is Active"
-          mb={'md'}
-          checked={form.values.is_active}
-          onChange={(event) =>
-            form.setFieldValue('is_active', event.currentTarget.checked)
-          }
-          disabled={loadingSubmit}
-        />
-
-        <Box ta="center" mt="lg">
-          <Button color="green" type="submit" loading={loadingSubmit}>
-            {action === 'add' ? 'Create' : 'Update'}
-          </Button>
-        </Box>
-      </form>
-    </Modal>
-  )
-}
-
-export default ModalAddEditDocument

FRONTEND/src/pages/Document/ModalEditDocument.tsx

@@ -0,0 +1,250 @@
+import { useEffect, useState } from 'react'
+import { useForm } from '@mantine/form'
+import {
+  Modal,
+  Button,
+  Text,
+  Box,
+  Checkbox,
+  FileInput,
+  Badge,
+  TextInput,
+} from '@mantine/core'
+
+import { update } from '@/rtk/helpers/CRUD'
+import { updateDocument } from '@/api/Admin'
+import { getHeaderInfo } from '@/rtk/helpers/tokenCreator'
+import {
+  IconFileTypeDoc,
+  IconFileTypePdf,
+  IconFileTypeXls,
+} from '@tabler/icons-react'
+import ModalFileDocument from './ModalFileDocument'
+import { useDisclosure } from '@mantine/hooks'
+
+type MProps = {
+  opened: boolean
+  close: () => void
+  selectDataRow: any
+  setSelectDataRow: any
+  getAllData: () => void
+}
+
+const ModalEditDocument = ({
+  opened,
+  close,
+  selectDataRow,
+  setSelectDataRow,
+  getAllData,
+}: MProps) => {
+  const [loadingSubmit, setLoadingSubmit] = useState(false)
+  const [selectDataFileRow, setSelectDataFileRow] = useState<any>({})
+
+  const [openedModalFile, { open: openModalFile, close: closeModalFile }] =
+    useDisclosure(false)
+
+  const form = useForm({
+    initialValues: {
+      title: '',
+      type: true,
+      file: null as File | null,
+      uri: '',
+      is_active: true,
+    },
+  })
+
+  useEffect(() => {
+    form.setValues({
+      title: selectDataRow?.title || '',
+      type: selectDataRow?.type === 'file',
+      uri: selectDataRow?.uri || '',
+      is_active: selectDataRow?.is_active || true,
+    })
+  }, [selectDataRow])
+
+  const handleUpdate = async (data: any) => {
+    try {
+      setLoadingSubmit(true)
+
+      let formData: any = {}
+      const header = await getHeaderInfo()
+
+      if (data.type) {
+        header.headers['Content-Type'] = 'multipart/form-data'
+        const tmpFormData = new FormData()
+
+        tmpFormData.append('title', data.title)
+        tmpFormData.append('type', 'file')
+        tmpFormData.append('is_active', data.is_active ? '1' : '0')
+        tmpFormData.append('existing_file', data.uri)
+
+        if (data.file) {
+          tmpFormData.append('file', data.file)
+        }
+
+        formData = tmpFormData
+      } else {
+        formData = {
+          title: data.title,
+          type: 'link',
+          uri: data.uri,
+          is_active: data.is_active ? '1' : '0',
+        }
+      }
+
+      const res = await update(
+        updateDocument + `?id=${selectDataRow?.id}`,
+        formData,
+        getAllData,
+        header,
+      )
+      if (res === true) {
+        resetForm()
+      }
+    } catch (error: any) {
+      console.error(error)
+    } finally {
+      setLoadingSubmit(false)
+    }
+  }
+
+  const getFileTypeIcon = (uri: string) => {
+    if (!uri) return null
+
+    const extension = uri.split('.').pop()?.toLowerCase()
+
+    if (['doc', 'docx'].includes(extension!)) {
+      return <IconFileTypeDoc style={{ color: '#1e62c1' }} />
+    }
+
+    if (['xls', 'xlsx'].includes(extension!)) {
+      return <IconFileTypeXls style={{ color: '#0e864b' }} />
+    }
+
+    return <IconFileTypePdf style={{ color: '#ff1b0e' }} />
+  }
+
+  const resetForm = () => {
+    close()
+    form.reset()
+    setSelectDataRow({})
+  }
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={resetForm}
+      size="lg"
+      title={
+        <Text fw={700} fz={'lg'}>
+          Update Document
+        </Text>
+      }
+    >
+      <form
+        onSubmit={form.onSubmit((values) => {
+          handleUpdate(values)
+        })}
+      >
+        {form.values.type ? (
+          <Badge tt="initial" color="orange" mb="md">
+            Files
+          </Badge>
+        ) : (
+          <Badge tt="initial" mb="md">
+            Links
+          </Badge>
+        )}
+
+        {form.values.type ? (
+          <Box>
+            <TextInput
+              label="Title"
+              key={'title'}
+              {...form.getInputProps('title')}
+              maxLength={255}
+              disabled={loadingSubmit}
+              required
+              mb={'md'}
+            />
+            <FileInput
+              accept=".doc,.docx,.xls,.xlsx,.pdf"
+              label="Upload Doc, Excel, PDF file"
+              value={form.values.file}
+              onChange={(file) => form.setFieldValue('file', file || null)}
+              disabled={loadingSubmit}
+              mb={'md'}
+            />
+
+            {form.values.file ? (
+              ''
+            ) : (
+              <Box
+                w="fit-content"
+                style={{ cursor: 'pointer' }}
+                mb={'md'}
+                title={`File ${form.values.uri
+                  .split('.')
+                  .pop()
+                  ?.toLowerCase()} detail`}
+                onClick={() => {
+                  openModalFile()
+                  setSelectDataFileRow(selectDataRow)
+                }}
+              >
+                {getFileTypeIcon(form.values.uri)}
+              </Box>
+            )}
+          </Box>
+        ) : (
+          <Box>
+            <TextInput
+              label="Title"
+              key={'title'}
+              {...form.getInputProps('title')}
+              maxLength={255}
+              disabled={loadingSubmit}
+              required
+              mb={'md'}
+            />
+            <TextInput
+              label="Enter URI"
+              key={'uri'}
+              {...form.getInputProps('uri')}
+              disabled={loadingSubmit}
+              required
+              mb={'md'}
+            />
+          </Box>
+        )}
+
+        <Checkbox
+          label="Is Active"
+          mb={'md'}
+          checked={form.values.is_active}
+          onChange={(event) =>
+            form.setFieldValue('is_active', event.currentTarget.checked)
+          }
+          disabled={loadingSubmit}
+        />
+
+        <Box ta="center" mt="lg">
+          <Button color="green" type="submit" loading={loadingSubmit}>
+            Update
+          </Button>
+        </Box>
+      </form>
+
+      {openedModalFile && (
+        <ModalFileDocument
+          opened={openedModalFile}
+          close={closeModalFile}
+          selectDataRow={selectDataFileRow}
+          setSelectDataRow={setSelectDataFileRow}
+        />
+      )}
+    </Modal>
+  )
+}
+
+export default ModalEditDocument