joseph
/
ManagementSystem
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'adjust Create, Update logic, add permission' (#117) from vi.document into dev 

Reviewed-on: #117
This commit is contained in:
joseph 2025-03-14 14:47:05 +11:00
parent 008c335b79 4896461838
commit 8b9e18bdcb
5 changed files with 652 additions and 451 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
BACKEND/Modules/Admin/app/Http/Controllers/DocumentController.php
View File

@ -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") {
$uploadedFiles = [];
if ($request->hasFile('files')) {
foreach ($request->file('files') as $file) {
$path = $file->store('uploads', options: 'public');
$uploadedFiles[] = "storage/{$path}";
}
$documents = [];
if ($request->type === "file") {
foreach ($request->file('files') as $index => $file) {
$path = $file['file']->store('uploads', 'public');
$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([
'title' => $request->title,
'type' => $request->type,
'uri' => implode(',', $request->uri),
'is_active' => $request->is_active,
]);
if (!empty($documents)) {
Document::insert($documents);
}
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',
'files' => 'nullable|array',
'files.*' => 'file|mimes:doc,docx,xls,xlsx,pdf|max:20480',
'existing_files' => 'nullable|array',
'uri' => 'nullable|url',
'file' => 'nullable|file|mimes:doc,docx,xls,xlsx,pdf|max:20480',
'existing_file' => 'nullable|string',
'is_active' => 'required|boolean',
]);
@ -104,29 +108,22 @@ class DocumentController extends Controller
}
if ($request->type === "file") {
$existingFiles = explode(',', $document->uri);
$selectedExistingFiles = $request->existing_files ?? [];
$uri = $request->existing_file;
$filesToDelete = array_diff($existingFiles, $selectedExistingFiles);
foreach ($filesToDelete as $file) {
$filePath = str_replace('storage/', 'public/', $file);
if ($request->hasFile('file')) {
$filePath = str_replace('storage/', 'public/', $request->existing_file);
if (Storage::exists($filePath)) {
Storage::delete($filePath);
}
}
$uploadedFiles = $selectedExistingFiles;
if ($request->hasFile('files')) {
foreach ($request->file('files') as $file) {
$path = $file->store('uploads', 'public');
$uploadedFiles[] = "storage/{$path}";
}
$path = $request->file('file')->store('uploads', 'public');
$uri = "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);
foreach ($existingFiles as $file) {
$filePath = str_replace('storage/', 'public/', $file);
if (Storage::exists($filePath)) {
Storage::delete($filePath);
}
$filePath = str_replace('storage/', 'public/', $document->uri);
if (Storage::exists($filePath)) {
Storage::delete($filePath);
}
}

202
FRONTEND/src/pages/Document/Document.tsx
View File

@ -3,24 +3,24 @@ import { get } from '@/rtk/helpers/apiService'
import { deleteDocument, listDocument } from '@/api/Admin'
import { Xdelete } from '@/rtk/helpers/CRUD'
import {
Anchor,
Badge,
Box,
Button,
Dialog,
Group,
Loader,
Text,
} from '@mantine/core'
import { Anchor, 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 [
openedModalAddEdit,
{ open: openModalAddEdit, close: closeModalAddEdit },
] = useDisclosure(false)
const [openedModalAdd, { open: openModalAdd, close: closeModalAdd }] =
useDisclosure(false)
const [openedModalEdit, { open: openModalEdit, close: closeModalEdit }] =
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}>
{row?.uri &&
row?.uri.split(',')?.map((uriItem) => (
<Badge
style={{ cursor: 'pointer' }}
tt="initial"
onClick={() => {
setSelectDataRow({ ...row, uri: uriItem })
openModalFile()
}}
color="orange"
>
{uriItem.replace('storage/uploads/', '')}
</Badge>
))}
</Group>
<Box
w="fit-content"
style={{ cursor: 'pointer' }}
onClick={() => {
setSelectDataRow(row)
openModalFile()
}}
title={`File ${row?.uri
.split('.')
.pop()
?.toLowerCase()} detail`}
>
{getFileTypeIcon(row?.uri)}
</Box>
) : (
<Group gap={5}>
{row?.uri &&
row?.uri.split(',')?.map((uriItem) => (
<Anchor
ta="start"
href={uriItem}
target="_blank"
title={uriItem}
>
<Badge style={{ cursor: 'pointer' }} tt="initial">
{uriItem}
</Badge>
</Anchor>
))}
</Group>
<Anchor
ta="start"
href={row?.uri}
target="_blank"
title={row?.uri}
>
<IconLink />
</Anchor>
)}
</Box>
)
@ -159,29 +165,32 @@ const Document = () => {
size: '5%',
header: 'Action',
render: (row: TDocument) => {
return (
<Box className={classes.optionIcon}>
<IconEdit
className={classes.editIcon}
onClick={() => {
setAction('edit')
setSelectDataRow(row)
openModalAddEdit()
}}
width={20}
height={20}
/>
<IconX
className={classes.deleteIcon}
onClick={() => {
setOpenedDialogDelete(true)
setSelectDataRow(row)
}}
width={20}
height={20}
/>
</Box>
)
if (checkPermissions('admin')) {
return (
<Box className={classes.optionIcon}>
<IconEdit
className={classes.editIcon}
onClick={() => {
setSelectDataRow(row)
openModalEdit()
}}
width={20}
height={20}
/>
<IconX
className={classes.deleteIcon}
onClick={() => {
setOpenedDialogDelete(true)
setSelectDataRow(row)
}}
width={20}
height={20}
/>
</Box>
)
}
return <Box></Box>
},
},
]
@ -193,30 +202,17 @@ const Document = () => {
<Text>Admin/</Text>
Documents
</h3>
<Button
onClick={() => {
setAction('add')
openModalAddEdit()
}}
disabled={loader}
>
+ Add
</Button>
{checkPermissions('admin') ? (
<Button onClick={() => openModalAdd()} 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 && (
<ModalAddEditDocument
opened={openedModalAddEdit}
close={closeModalAddEdit}
action={action}
setAction={setAction}
{openedModalAdd && (
<ModalAddDocument
opened={openedModalAdd}
close={closeModalAdd}
getAllData={getAllData}
/>
)}
{openedModalEdit && (
<ModalEditDocument
opened={openedModalEdit}
close={closeModalEdit}
selectDataRow={selectDataRow}
setSelectDataRow={setSelectDataRow}
getAllData={getAllData}

254
FRONTEND/src/pages/Document/ModalAddDocument.tsx Normal file
View File

@ -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

299
FRONTEND/src/pages/Document/ModalAddEditDocument.tsx
View File

@ -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

250
FRONTEND/src/pages/Document/ModalEditDocument.tsx Normal file
View File

@ -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