adjust Create, Update logic, add permission
This commit is contained in:
dbdbd9
parent
20745381db
commit
88870e075c
|
|
@ -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 = [];
|
||||
|
||||
$document = Document::create([
|
||||
'title' => $request->title,
|
||||
'type' => $request->type,
|
||||
'uri' => implode(',', $uploadedFiles),
|
||||
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,
|
||||
]);
|
||||
|
||||
return AbstractController::ResultSuccess($document, "Document created successfully!");
|
||||
'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(',', $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,14 +149,11 @@ class DocumentController extends Controller
|
|||
}
|
||||
|
||||
if ($document->type === "file") {
|
||||
$existingFiles = explode(',', $document->uri);
|
||||
foreach ($existingFiles as $file) {
|
||||
$filePath = str_replace('storage/', 'public/', $file);
|
||||
$filePath = str_replace('storage/', 'public/', $document->uri);
|
||||
if (Storage::exists($filePath)) {
|
||||
Storage::delete($filePath);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$document->delete();
|
||||
return AbstractController::ResultSuccess("Document deleted successfully!");
|
||||
|
|
|
|||
|
|
@ -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
|
||||
<Box
|
||||
w="fit-content"
|
||||
style={{ cursor: 'pointer' }}
|
||||
tt="initial"
|
||||
onClick={() => {
|
||||
setSelectDataRow({ ...row, uri: uriItem })
|
||||
setSelectDataRow(row)
|
||||
openModalFile()
|
||||
}}
|
||||
color="orange"
|
||||
title={`File ${row?.uri
|
||||
.split('.')
|
||||
.pop()
|
||||
?.toLowerCase()} detail`}
|
||||
>
|
||||
{uriItem.replace('storage/uploads/', '')}
|
||||
</Badge>
|
||||
))}
|
||||
</Group>
|
||||
{getFileTypeIcon(row?.uri)}
|
||||
</Box>
|
||||
) : (
|
||||
<Group gap={5}>
|
||||
{row?.uri &&
|
||||
row?.uri.split(',')?.map((uriItem) => (
|
||||
<Anchor
|
||||
ta="start"
|
||||
href={uriItem}
|
||||
href={row?.uri}
|
||||
target="_blank"
|
||||
title={uriItem}
|
||||
title={row?.uri}
|
||||
>
|
||||
<Badge style={{ cursor: 'pointer' }} tt="initial">
|
||||
{uriItem}
|
||||
</Badge>
|
||||
<IconLink />
|
||||
</Anchor>
|
||||
))}
|
||||
</Group>
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
|
|
@ -159,14 +165,14 @@ const Document = () => {
|
|||
size: '5%',
|
||||
header: 'Action',
|
||||
render: (row: TDocument) => {
|
||||
if (checkPermissions('admin')) {
|
||||
return (
|
||||
<Box className={classes.optionIcon}>
|
||||
<IconEdit
|
||||
className={classes.editIcon}
|
||||
onClick={() => {
|
||||
setAction('edit')
|
||||
setSelectDataRow(row)
|
||||
openModalAddEdit()
|
||||
openModalEdit()
|
||||
}}
|
||||
width={20}
|
||||
height={20}
|
||||
|
|
@ -182,6 +188,9 @@ const Document = () => {
|
|||
/>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
return <Box></Box>
|
||||
},
|
||||
},
|
||||
]
|
||||
|
|
@ -193,30 +202,17 @@ const Document = () => {
|
|||
<Text>Admin/</Text>
|
||||
Documents
|
||||
</h3>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setAction('add')
|
||||
openModalAddEdit()
|
||||
}}
|
||||
disabled={loader}
|
||||
>
|
||||
|
||||
{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}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
Loading…
Reference in New Issue