officer/egovframe-msa-edu
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update attachment & post

Browse Source
This commit is contained in:
jooho
2021-11-02 17:15:27 +09:00
parent 06975932b6
commit c50df972e9
13 changed files with 229 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/admin/src/components/AttachList/index.tsx
View File

@@ -35,10 +35,7 @@ const AttachList = (props: AttachListProps) => {
const classes = useStyles()
const handleClick = (item: IAttachmentResponse) => () => {
let a = document.createElement('a')
a.href = `${fileService.downloadUrl}/${item.id}`
a.download = item.originalFileName
a.click()
fileService.download(item.id)
}
const handleDelete = (item: IAttachmentResponse) => () => {

4
frontend/admin/src/pages/attachment/index.tsx
View File

@@ -100,6 +100,10 @@ const getColumns: ColumnType = (
href={`${fileService.downloadUrl}/${params.row.id}`}
download={params.value}
variant="body2"
onClick={(event) => {
event.preventDefault()
attachmentService.download(params.row.id)
}}
>
{params.value}
</Link>

18
frontend/admin/src/service/Attachment.ts
View File

@@ -55,4 +55,22 @@ export const attachmentService = {
errorCallback(error)
}
},
download: (id: string) => { // 첨부파일 다운로드 - 삭제 파일 가능
axios.get(`${ATTACHMENT_API}/download/${id}`, {
responseType: 'blob',
})
.then(response =>{
const downloadFileName = decodeURIComponent(response.headers['content-disposition'].replace('attachment; filename*=UTF-8\'\'', ''))
const url = window.URL.createObjectURL(new Blob([response.data], { type: response.headers['content-type'] }))
let link = document.createElement('a')
link.href = url
link.setAttribute('download', downloadFileName)
document.body.appendChild(link)
link.click()
const element = { link }
delete element.link
})
},
}

20
frontend/admin/src/service/File.ts
View File

@@ -38,7 +38,7 @@ export type UploadPayload = {
}
const UPLOAD_API = '/portal-service/api/v1/attachments'
const DOWNLOAD_API = `/server/portal-service/api/v1/download`
const DOWNLOAD_API = `/portal-service/api/v1/download`
let fileHeader = {
'Content-Type': 'multipart/form-data',
@@ -105,4 +105,22 @@ export const fileService = {
},
deleteAll: (attachmentCode: string) =>
axios.delete(`${UPLOAD_API}/${attachmentCode}/children`),
download: (id: string) => { // 첨부파일 다운로드 - 삭제 파일 불가
axios.get(`${DOWNLOAD_API}/${id}`, {
responseType: 'blob',
})
.then(response =>{
const downloadFileName = decodeURIComponent(response.headers['content-disposition'].replace('attachment; filename*=UTF-8\'\'', ''))
const url = window.URL.createObjectURL(new Blob([response.data], { type: response.headers['content-type'] }))
let link = document.createElement('a')
link.href = url
link.setAttribute('download', downloadFileName)
document.body.appendChild(link)
link.click()
const element = { link }
delete element.link
})
},
}

43
frontend/portal/src/components/EditForm/NormalEditForm.tsx
View File

@@ -8,11 +8,10 @@ import { EDITOR_MAX_LENGTH } from '@constants'
import Divider from '@material-ui/core/Divider'
import Hidden from '@material-ui/core/Hidden'
import { BoardFormContext } from '@pages/board/[skin]/[board]/edit/[id]'
import { IPostsForm, UploadInfoReqeust } from '@service'
import { IPostsForm } from '@service'
import { getTextLength } from '@utils'
import produce from 'immer'
import { useRouter } from 'next/router'
import React, { useContext, useMemo, useRef } from 'react'
import React, { useContext, useEffect, useMemo, useRef } from 'react'
import { Controller, useForm } from 'react-hook-form'
import { useTranslation } from 'react-i18next'
import { EditFormProps } from '.'
@@ -24,7 +23,7 @@ const NormalEditForm = (props: NormalEditFormProps) => {
const { t } = useTranslation()
const uploadRef = useRef<UploadType>()
const { post, board, attachList, setPostDataHandler, setAttachListHandler } =
const { post, board, attachList, setPostDataHandler, setAttachListHandler, setUploaderHandler } =
useContext(BoardFormContext)
// form hook
@@ -41,28 +40,11 @@ const NormalEditForm = (props: NormalEditFormProps) => {
formState: { errors },
} = methods
useEffect(() => {
setUploaderHandler(uploadRef)
}, [setUploaderHandler, uploadRef])
const handleFormSubmit = async (data: IPostsForm) => {
if (board.uploadUseAt) {
const isUpload = await uploadRef.current.isModified(attachList)
if (isUpload) {
const info: UploadInfoReqeust = {
entityName: 'posts',
entityId: board.boardNo?.toString(),
}
// 업로드 및 저장
const result = await uploadRef.current.upload(info, attachList)
if (result) {
if (result !== 'no attachments' && result !== 'no update list') {
data = produce(data, draft => {
draft.attachmentCode = result
})
}
}
}
}
setPostDataHandler(data)
}
@@ -71,17 +53,20 @@ const NormalEditForm = (props: NormalEditFormProps) => {
{
id: 'board-edit-save',
title: t('label.button.save'),
href: '',
href: '#',
className: 'blue',
handleClick: handleSubmit(handleFormSubmit),
},
{
id: 'board-edit-list',
title: t('label.button.list'),
href: `/board/${router.query.skin}/${router.query.board}`,
title: router.query.id === '-1' ? t('label.button.list') : t('label.button.cancel'),
href: '#',
handleClick: () => {
router.back()
},
},
],
[router.query.board, router.query.skin],
[router],
)
return (

2
frontend/portal/src/components/EditForm/QnAEditForm.tsx
View File

@@ -96,7 +96,7 @@ const QnAEditForm = (props: QnAEditFormProps) => {
ref={uploadRef}
multi
uploadLimitCount={board.uploadLimitCount}
uploadLimitSize={board.uploadLimitSize * 1024 * 1024}
uploadLimitSize={board.uploadLimitSize}
attachmentCode={post.attachmentCode}
attachData={attachList}
/>

81
frontend/portal/src/pages/board/[skin]/[board]/edit/[id].tsx
View File

@@ -8,7 +8,7 @@ import {
IPostsForm,
PostsReqPayload,
SKINT_TYPE_CODE_NORMAL,
SKINT_TYPE_CODE_QNA,
SKINT_TYPE_CODE_QNA, UploadInfoReqeust,
} from '@service'
import { errorStateSelector } from '@stores'
import { AxiosError } from 'axios'
@@ -17,6 +17,13 @@ import { useRouter } from 'next/router'
import React, { createContext, useCallback, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useSetRecoilState } from 'recoil'
import CustomAlert, { CustomAlertPrpps } from '@components/CustomAlert'
import { UploadType } from '@components/Upload'
import produce from 'immer'
interface AlertProps extends CustomAlertPrpps {
message: string
}
interface BoardEditProps {
post: IPosts
@@ -29,12 +36,14 @@ export const BoardFormContext = createContext<{
attachList: IAttachmentResponse[]
setPostDataHandler: (data: IPostsForm) => void
setAttachListHandler: (data: IAttachmentResponse[]) => void
setUploaderHandler: (uploadType: React.MutableRefObject<UploadType>) => void
}>({
post: undefined,
board: undefined,
attachList: undefined,
setPostDataHandler: () => {},
setAttachListHandler: () => {},
setUploaderHandler: () => {},
})
const BoardEdit = (props: BoardEditProps) => {
@@ -44,6 +53,12 @@ const BoardEdit = (props: BoardEditProps) => {
const { t } = useTranslation()
const setErrorState = useSetRecoilState(errorStateSelector)
const [customAlert, setCustomAlert] = useState<AlertProps | undefined>({
open: false,
message: '',
handleAlert: () => {},
})
const [postData, setPostData] = useState<IPostsForm>(undefined)
const setPostDataHandler = (data: IPostsForm) => {
setPostData(data)
@@ -52,6 +67,10 @@ const BoardEdit = (props: BoardEditProps) => {
const setAttachListHandler = (data: IAttachmentResponse[]) => {
setAttachList(data)
}
const [uploader, setUploader] = useState<React.MutableRefObject<UploadType>>(undefined)
const setUploaderHandler = (uploadType: React.MutableRefObject<UploadType>) => {
setUploader(uploadType)
}
// callback
const errorCallback = useCallback(
@@ -66,13 +85,23 @@ const BoardEdit = (props: BoardEditProps) => {
router.back()
}, [])
const save = useCallback(() => {
const data: IPosts = {
boardNo: post.boardNo,
postsNo: post.postsNo,
...postData,
useEffect(() => {
if (typeof post.postsNo === 'undefined') {
setCustomAlert({
open: true,
message: t('err.entity.not.found'),
handleAlert: () => {
setCustomAlert({
...customAlert,
open: false,
})
router.back()
},
})
}
}, [post])
const save = useCallback((data: IPosts) => {
if (post.postsNo === -1) {
boardService.savePost({
boardNo: post.boardNo,
@@ -90,11 +119,41 @@ const BoardEdit = (props: BoardEditProps) => {
})
}
// boardService.
}, [postData, post, successCallback, errorCallback])
}, [post, successCallback, errorCallback])
useEffect(() => {
if (postData) {
save()
let data: IPosts = {
boardNo: post.boardNo,
postsNo: post.postsNo,
...postData,
}
if (board.uploadUseAt) {
uploader.current.isModified(attachList)
.then(isUpload => {
if (isUpload === true) {
const info: UploadInfoReqeust = {
entityName: 'posts',
entityId: board.boardNo?.toString(),
}
// 업로드 및 저장
uploader.current.upload(info, attachList)
.then(result => {
if (result) {
if (result !== 'no attachments' && result !== 'no update list') {
data = produce(data, draft => {
draft.attachmentCode = result
})
}
}
})
}
})
}
save(data)
}
}, [postData, attachList])
@@ -130,6 +189,7 @@ const BoardEdit = (props: BoardEditProps) => {
attachList,
setPostDataHandler,
setAttachListHandler,
setUploaderHandler,
}}
>
{board.skinTypeCode === SKINT_TYPE_CODE_NORMAL && (
@@ -141,6 +201,11 @@ const BoardEdit = (props: BoardEditProps) => {
{/* <QnAEditForm /> */}
</BoardFormContext.Provider>
</div>
<CustomAlert
contentText={customAlert.message}
open={customAlert.open}
handleAlert={customAlert.handleAlert}
/>
</div>
)
}

33
frontend/portal/src/pages/board/[skin]/[board]/view/[id].tsx
View File

@@ -31,6 +31,11 @@ import React, {
} from 'react'
import { useTranslation } from 'react-i18next'
import { useRecoilValue, useSetRecoilState } from 'recoil'
import CustomAlert, { CustomAlertPrpps } from '@components/CustomAlert'
interface AlertProps extends CustomAlertPrpps {
message: string
}
interface BaordViewProps {
post: IPosts
@@ -48,6 +53,12 @@ const BoardView = (props: BaordViewProps) => {
const setErrorState = useSetRecoilState(errorStateSelector)
const [customAlert, setCustomAlert] = useState<AlertProps | undefined>({
open: false,
message: '',
handleAlert: () => {},
})
// 첨부파일
const [attachList, setAttachList] = useState<IAttachmentResponse[]>(undefined)
@@ -126,7 +137,20 @@ const BoardView = (props: BaordViewProps) => {
}
useEffect(() => {
if (post) {
if (typeof post.postsNo === 'undefined') {
setCustomAlert({
open: true,
message: t('err.entity.not.found'),
handleAlert: () => {
setCustomAlert({
...customAlert,
open: false,
})
router.back()
},
})
}
if (post.postsNo) {
getComments({
boardNo: post.boardNo,
postsNo: post.postsNo,
@@ -241,7 +265,7 @@ const BoardView = (props: BaordViewProps) => {
</dl>
<dl>
<dt>{t('common.written_date')}</dt>
<dd>{dateFormat(new Date(post.createdDate), 'yyyy-MM-dd')}</dd>
<dd>{post.createdDate && dateFormat(new Date(post.createdDate), 'yyyy-MM-dd')}</dd>
</dl>
<dl>
<dt>{t('common.read_count')}</dt>
@@ -361,6 +385,11 @@ const BoardView = (props: BaordViewProps) => {
</div>
)}
<BottomButtons handleButtons={bottomButtons} />
<CustomAlert
contentText={customAlert.message}
open={customAlert.open}
handleAlert={customAlert.handleAlert}
/>
</div>
)
}