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

fix search, show file

This commit is contained in:
dbdbd9 2025-03-14 14:26:57 +07:00
parent 4896461838
commit 60925a83af
2 changed files with 119 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,8 @@ import { useEffect, useState } from 'react'
import { get } from '@/rtk/helpers/apiService'
import { deleteDocument, listDocument } from '@/api/Admin'
import { Xdelete } from '@/rtk/helpers/CRUD'
import { useSelector } from 'react-redux'
import { RootState } from '@/rtk/store'
import { Anchor, Box, Button, Dialog, Group, Loader, Text } from '@mantine/core'
import { useDisclosure } from '@mantine/hooks'
@ -20,7 +22,6 @@ 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
@ -38,6 +39,8 @@ type RequestPagination = {
}
const Document = () => {
const user = useSelector((state: RootState) => state.authentication)
const [loader, setLoader] = useState<boolean>(false)
const [rows, setRows] = useState<RequestPagination>({
data: [],
@ -91,42 +94,68 @@ const Document = () => {
}
}
const getFileTypeIcon = (uri: string) => {
const getFileTypeIcon = (row: TDocument) => {
const uri = row?.uri
if (!uri) return null
const extension = uri.split('.').pop()?.toLowerCase()
if (['doc', 'docx'].includes(extension!)) {
return <IconFileTypeDoc style={{ color: '#1e62c1' }} />
if (['doc'].includes(extension!)) {
return (
<a
href={`${import.meta.env.VITE_BACKEND_URL}${uri}`}
download="Document Download"
target="_self"
>
<IconFileTypeDoc style={{ color: '#1e62c1' }} />
</a>
)
}
if (['xls', 'xlsx'].includes(extension!)) {
return <IconFileTypeXls style={{ color: '#0e864b' }} />
return (
<a
href={`${import.meta.env.VITE_BACKEND_URL}${uri}`}
download="Document Download"
target="_self"
>
<IconFileTypeXls style={{ color: '#0e864b' }} />
</a>
)
}
return <IconFileTypePdf style={{ color: '#ff1b0e' }} />
if (['docx'].includes(extension!)) {
return (
<IconFileTypeDoc
onClick={() => {
openModalFile()
setSelectDataRow(row)
}}
style={{ color: '#1e62c1' }}
/>
)
}
return (
<IconFileTypePdf
onClick={() => {
openModalFile()
setSelectDataRow(row)
}}
style={{ color: '#ff1b0e' }}
/>
)
}
const columns = [
{
name: 'id',
size: '5%',
header: 'ID',
render: (row: TDocument) => {
return <Box>{row?.id ? row.id : ''}</Box>
},
},
{
name: 'title',
size: '50%',
header: 'Title',
render: (row: TDocument) => {
return <Text ta="start">{row?.title}</Text>
},
},
{
name: 'uri',
size: '40%',
size: '45%',
header: 'URI',
render: (row: TDocument) => {
return (
@ -135,16 +164,12 @@ const Document = () => {
<Box
w="fit-content"
style={{ cursor: 'pointer' }}
onClick={() => {
setSelectDataRow(row)
openModalFile()
}}
title={`File ${row?.uri
title={`File .${row?.uri
.split('.')
.pop()
?.toLowerCase()} detail`}
>
{getFileTypeIcon(row?.uri)}
{getFileTypeIcon(row)}
</Box>
) : (
<Anchor
@ -165,32 +190,32 @@ const Document = () => {
size: '5%',
header: 'Action',
render: (row: TDocument) => {
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>
)
if (!user.user.user.permission.includes('admin')) {
return ''
}
return <Box></Box>
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>
)
},
},
]
@ -203,7 +228,7 @@ const Document = () => {
Documents
</h3>
{checkPermissions('admin') ? (
{user.user.user.permission.includes('admin') ? (
<Button onClick={() => openModalAdd()} disabled={loader}>
+ Add
</Button>

55
FRONTEND/src/pages/Document/ModalEditDocument.tsx
View File

@ -9,6 +9,7 @@ import {
FileInput,
Badge,
TextInput,
Group,
} from '@mantine/core'
import { update } from '@/rtk/helpers/CRUD'
@ -113,15 +114,51 @@ const ModalEditDocument = ({
const extension = uri.split('.').pop()?.toLowerCase()
if (['doc', 'docx'].includes(extension!)) {
return <IconFileTypeDoc style={{ color: '#1e62c1' }} />
if (['doc'].includes(extension!)) {
return (
<a
href={`${import.meta.env.VITE_BACKEND_URL}${uri}`}
download="Document Download"
target="_self"
>
<IconFileTypeDoc style={{ color: '#1e62c1' }} />
</a>
)
}
if (['xls', 'xlsx'].includes(extension!)) {
return <IconFileTypeXls style={{ color: '#0e864b' }} />
return (
<a
href={`${import.meta.env.VITE_BACKEND_URL}${uri}`}
download="Document Download"
target="_self"
>
<IconFileTypeXls style={{ color: '#0e864b' }} />
</a>
)
}
return <IconFileTypePdf style={{ color: '#ff1b0e' }} />
if (['docx'].includes(extension!)) {
return (
<IconFileTypeDoc
onClick={() => {
openModalFile()
setSelectDataFileRow(selectDataRow)
}}
style={{ color: '#1e62c1' }}
/>
)
}
return (
<IconFileTypePdf
onClick={() => {
openModalFile()
setSelectDataFileRow(selectDataRow)
}}
style={{ color: '#ff1b0e' }}
/>
)
}
const resetForm = () => {
@ -179,7 +216,7 @@ const ModalEditDocument = ({
{form.values.file ? (
''
) : (
<Box
<Group
w="fit-content"
style={{ cursor: 'pointer' }}
mb={'md'}
@ -187,13 +224,11 @@ const ModalEditDocument = ({
.split('.')
.pop()
?.toLowerCase()} detail`}
onClick={() => {
openModalFile()
setSelectDataFileRow(selectDataRow)
}}
>
{getFileTypeIcon(form.values.uri)}
</Box>
<Text>.{form.values.uri.split('.').pop()?.toLowerCase()}</Text>
</Group>
)}
</Box>
) : (