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

bugfix menu tree dnd update

Browse Source
This commit is contained in:
shinmj
2021-11-19 17:09:08 +09:00
parent 5068dca753
commit d289bc883d
20 changed files with 726 additions and 656 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
frontend/admin/src/components/DraggableTreeMenu/TreeJson.ts Normal file
View File

@@ -0,0 +1,81 @@
import {
ItemId,
TreeData,
TreeDestinationPosition,
TreeItem,
TreeSourcePosition,
} from '@atlaskit/tree'
import { IMenuTree } from '@service'
import produce from 'immer'
export class TreeJson {
private readonly treeJson: IMenuTree[]
private readonly treeData: Record<ItemId, TreeItem>
private readonly source: TreeSourcePosition
private readonly destination: TreeDestinationPosition
constructor(
tree: TreeData,
source: TreeSourcePosition,
destination: TreeDestinationPosition,
) {
this.treeJson = []
this.treeData = tree.items
this.source = source
this.destination = destination
}
convert(): IMenuTree[] {
if (this.source.parentId === this.destination.parentId) {
if (this.source.parentId === '0') {
this.updateTopLevel()
return this.treeJson
}
this.update(this.source.parentId)
return this.treeJson
}
this.update(this.source.parentId)
this.update(this.destination.parentId)
return this.treeJson
}
private updateTopLevel() {
const children = this.treeData['0'].children
children.map((item, idx) => {
let toplevel = this.treeData[item]
this.treeJson.push(
produce(toplevel.data as IMenuTree, draft => {
draft.sortSeq = idx + 1
}),
)
})
}
private update(parentId: ItemId) {
let parent = this.treeData[parentId]
let children: IMenuTree[] = []
const menuId = parent.data?.menuId
parent.children.map((item, idx) => {
let data = this.treeData[item].data as IMenuTree
let child = produce(data, draft => {
draft.sortSeq = idx + 1
draft.parentId = menuId
})
children.push(child)
})
if (parent.data) {
this.treeJson.push(
produce(parent.data as IMenuTree, draft => {
draft.children = children
}),
)
}
}
}

92
frontend/admin/src/components/DraggableTreeMenu/TreeUtils.ts
View File

@@ -1,4 +1,3 @@
import { TreeData, TreeItem } from '@atlaskit/tree'
import { IMenuTree } from '@service'
import produce from 'immer'
import DraggableTreeBuilder from './DraaggableTreeBuilder'
@@ -28,97 +27,6 @@ export const convertJsonToTreeData = (data: IMenuTree[]) => {
return root.build()
}
/**
* atlaskit flat tree data -> hierarchy json data
*
* @param tree
* @returns
*/
export const convertTreeDataToJson = (tree: TreeData) => {
let newTreeItem: TreeItem[] = []
const arrTree = Object.values(tree.items)
const root = arrTree.shift()
root.children.map((itemId, index) => {
const data = arrTree.splice(
arrTree.findIndex(item => item.id === itemId),
1,
)
data.map(item => {
item.data = produce(item.data, draft => {
draft.sortSeq = index + 1
draft.parentId = null
})
newTreeItem.push(item)
})
})
const convert = (target: TreeItem[], source: TreeItem[]) => {
while (source.length > 0) {
const data = source.shift()
if (data.hasChildren) {
target.push(
produce(data, draft => {
draft.hasChildren = false
}),
)
}
const idx = target.findIndex(item => item.children.includes(data.id))
if (idx > -1) {
const parent = produce(target[idx].data as IMenuTree, draft => {
const childIdx = draft.children.findIndex(
i => i.menuId === data.data.menuId,
)
const child = produce(data.data as IMenuTree, childDraft => {
if (childIdx === -1) {
childDraft.sortSeq = draft.children.length + 1
}
childDraft.parentId = draft.menuId
})
if (childIdx > -1) {
draft.children[childIdx] = child
} else {
draft.children.push(child)
}
})
target[idx] = produce(target[idx], draft => {
draft.data = parent
})
}
}
return target
}
let target = newTreeItem.slice()
let source = arrTree.slice()
while (true) {
newTreeItem = convert(target, source).slice()
if (root.children.length === newTreeItem.length) {
break
}
target = newTreeItem.filter(item => root.children.includes(item.id))
source = newTreeItem.filter(item => !root.children.includes(item.id))
}
const newData: IMenuTree[] = []
newTreeItem.map(treeItem => {
newData.push(Object.assign(treeItem.data))
})
return newData
}
export interface IFindTree {
item: any
parent: any

16
frontend/admin/src/components/DraggableTreeMenu/index.tsx
View File

@@ -1,5 +1,3 @@
import React, { useEffect, useState } from 'react'
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
import Tree, {
ItemId,
moveItemOnTree,
@@ -9,11 +7,14 @@ import Tree, {
TreeDestinationPosition,
TreeSourcePosition,
} from '@atlaskit/tree'
import { convertTreeDataToJson, convertJsonToTreeData } from './TreeUtils'
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
import { IMenuTree } from '@service'
import DraaggableTreeMenuItem from './DraaggableTreeMenuItem'
import { useRecoilState, useRecoilValue } from 'recoil'
import { draggableTreeExpandedAtom, draggableTreeSelectedAtom } from '@stores'
import React, { useEffect, useState } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import DraaggableTreeMenuItem from './DraaggableTreeMenuItem'
import { TreeJson } from './TreeJson'
import { convertJsonToTreeData } from './TreeUtils'
const useStyles = makeStyles((theme: Theme) =>
createStyles({
@@ -126,8 +127,9 @@ function DraggableTreeMenu(props: DraggableTreeMenuProps) {
const newTree = moveItemOnTree(tree, source, destination)
const convert = await convertTreeDataToJson(newTree)
handleTreeDnD(convert)
const treeJson = new TreeJson(newTree, source, destination)
const convertTree = treeJson.convert()
handleTreeDnD(convertTree)
setTree(newTree)
}

7
frontend/admin/src/components/EditForm/MenuEditForm.tsx
View File

@@ -91,12 +91,6 @@ const MenuEditForm = (props: MenuEditFormProps) => {
menuTypes[0]?.codeId,
)
useEffect(() => {
if (errors) {
console.log(errors)
}
}, [errors])
const [connectIdState, setConnectIdState] = useState<IConnectId>({})
const [dialogOpen, setDialogOpen] = useState<boolean>(false)
@@ -189,7 +183,6 @@ const MenuEditForm = (props: MenuEditFormProps) => {
}
const handleSaveBefore = (formData: IMenuInfoForm) => {
console.log('before ', formData)
formData = produce(formData, draft => {
draft.menuType = menuTypeState
draft.menuTypeName = menuTypes.find(

58
frontend/admin/src/components/Layout/Bread.tsx
View File

@@ -1,12 +1,12 @@
import React, { useCallback } from 'react'
import { useRouter } from 'next/router'
import Typography from '@material-ui/core/Typography'
import Breadcrumbs from '@material-ui/core/Breadcrumbs'
import Link from '@material-ui/core/Link'
import { Theme, makeStyles } from '@material-ui/core/styles'
import { currentMenuStateAtom, flatMenusSelect } from '@stores'
import { useRecoilValue } from 'recoil'
import { makeStyles, Theme } from '@material-ui/core/styles'
import Typography from '@material-ui/core/Typography'
import { currentMenuStateAtom, ISideMenu, menuStateAtom } from '@stores'
import { useRouter } from 'next/router'
import React, { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import { useRecoilValue } from 'recoil'
const useStyles = makeStyles((theme: Theme) => ({
root: {
@@ -17,10 +17,33 @@ const useStyles = makeStyles((theme: Theme) => ({
const Bread: React.FC = () => {
const classes = useStyles()
const router = useRouter()
const flatMenus = useRecoilValue(flatMenusSelect)
const menus = useRecoilValue(menuStateAtom)
const current = useRecoilValue(currentMenuStateAtom)
const { i18n } = useTranslation()
const findParent = useCallback(
(menu: ISideMenu) => {
let parent: ISideMenu
const findItems = item => {
if (item.id === menu.parentId) {
parent = item
}
if (item.children) {
item.children.map(v => {
return findItems(v)
})
}
}
menus.map(item => {
findItems(item)
})
return parent
},
[menus, current],
)
const hierarchy = useCallback(() => {
if (!current) {
return
@@ -35,21 +58,16 @@ const Bread: React.FC = () => {
}
let trees = []
const arr = flatMenus.slice(
0,
flatMenus.findIndex(item => item.id === current.id) + 1,
)
trees.push(current)
arr.reverse().some(item => {
if (item.level < current.level) {
trees.push(item)
let findMenu = current
while (true) {
let parent = findParent(findMenu)
trees.push(parent)
findMenu = parent
if (parent.level === 1) {
break
}
if (item.level === 1) {
return true
}
})
}
let nodes = trees.reverse().map(item =>
item.id === current.id ? (

655
frontend/admin/src/pages/board/[id].tsx
View File

@@ -202,339 +202,338 @@ const BoardItem = ({
return (
<div className={classes.root}>
<FormProvider {...methods}>
<form>
<Grid container spacing={1}>
<Grid item xs={12} sm={6}>
<Box boxShadow={1}>
<Controller
name="boardName"
control={control}
rules={{ required: true, maxLength: 100 }}
render={({ field }) => (
<TextField
autoFocus
label={t('board.board_name')}
name="boardName"
required
inputProps={{ maxLength: 100 }}
id="outlined-full-width"
placeholder={format(t('msg.placeholder.format'), [
t('board.board_name'),
])}
fullWidth
variant="outlined"
{...field}
/>
)}
/>
{errors.boardName && (
<ValidationAlert
fieldError={errors.boardName}
target={[100]}
<Grid container spacing={1}>
<Grid item xs={12} sm={6}>
<Box boxShadow={1}>
<Controller
name="boardName"
control={control}
rules={{ required: true, maxLength: 100 }}
render={({ field }) => (
<TextField
autoFocus
label={t('board.board_name')}
name="boardName"
required
inputProps={{ maxLength: 100 }}
id="outlined-full-width"
placeholder={format(t('msg.placeholder.format'), [
t('board.board_name'),
])}
fullWidth
variant="outlined"
{...field}
/>
)}
</Box>
</Grid>
<Grid item xs={12} sm={6}>
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel id="skinTypeCode-label" required>
{t('board.skin_type_code')}
</InputLabel>
<Controller
name="skinTypeCode"
control={control}
defaultValue={initData?.skinTypeCode}
rules={{ required: true }}
render={({ field }) => (
<Select
variant="outlined"
name="skinTypeCode"
required
labelId="skinTypeCode-label"
label={t('board.skin_type_code')}
margin="dense"
{...field}
>
{skinTypeCodeList.map(option => (
<MenuItem key={option.codeId} value={option.codeId}>
{option.codeName}
</MenuItem>
))}
</Select>
)}
defaultValue={''}
/>
{errors.boardName && (
<ValidationAlert
fieldError={errors.boardName}
target={[100]}
label={t('board.board_name')}
/>
</FormControl>
</Grid>
<Grid item xs={12} sm={6}>
<Box boxShadow={1}>
<Controller
name="titleDisplayLength"
control={control}
rules={{ required: true, min: 1, max: 99999 }}
render={({ field }) => (
<TextField
label={t('board.title_display_length')}
name="titleDisplayLength"
required
type="number"
id="outlined-full-width"
placeholder={format(t('msg.placeholder.format'), [
t('board.title_display_length'),
])}
fullWidth
variant="outlined"
{...field}
/>
)}
/>
{errors.titleDisplayLength && (
<ValidationAlert
fieldError={errors.titleDisplayLength}
target={[1, 99999]}
label={t('board.title_display_length')}
/>
)}
</Box>
</Grid>
<Grid item xs={12} sm={6}>
<Box boxShadow={1}>
<Controller
name="postDisplayCount"
control={control}
rules={{ required: true, min: 1, max: 99999 }}
render={({ field }) => (
<TextField
label={t('board.post_display_count')}
name="postDisplayCount"
required
type="number"
id="outlined-full-width"
placeholder={format(t('msg.placeholder.format'), [
t('board.post_display_count'),
])}
fullWidth
variant="outlined"
{...field}
/>
)}
/>
{errors.postDisplayCount && (
<ValidationAlert
fieldError={errors.postDisplayCount}
target={[1, 99999]}
label={t('board.post_display_count')}
/>
)}
</Box>
</Grid>
<Grid item xs={12} sm={6}>
<Box boxShadow={1}>
<Controller
name="pageDisplayCount"
control={control}
rules={{ required: true, min: 1, max: 99999 }}
render={({ field }) => (
<TextField
label={t('board.page_display_count')}
name="pageDisplayCount"
required
type="number"
id="outlined-full-width"
placeholder={format(t('msg.placeholder.format'), [
t('board.page_display_count'),
])}
fullWidth
variant="outlined"
{...field}
/>
)}
/>
{errors.pageDisplayCount && (
<ValidationAlert
fieldError={errors.pageDisplayCount}
target={[1, 99999]}
label={t('board.page_display_count')}
/>
)}
</Box>
</Grid>
<Grid item xs={12} sm={6}>
<Box boxShadow={1}>
<Controller
name="newDisplayDayCount"
control={control}
rules={{ required: true, min: 1, max: 99999 }}
render={({ field }) => (
<TextField
label={t('board.new_display_day_count')}
name="newDisplayDayCount"
required
type="number"
id="outlined-full-width"
placeholder={format(t('msg.placeholder.format'), [
t('board.new_display_day_count'),
])}
fullWidth
variant="outlined"
{...field}
/>
)}
/>
{errors.newDisplayDayCount && (
<ValidationAlert
fieldError={errors.newDisplayDayCount}
target={[1, 99999]}
label={t('board.new_display_day_count')}
/>
)}
</Box>
</Grid>
<Grid item xs={12} sm={6}>
<Box boxShadow={1} className={classes.switchBox}>
<FormControlLabel
label={t('board.editor_use_at')}
labelPlacement="start"
control={
<Controller
name="editorUseAt"
control={control}
render={({ field: { onChange, ref, value } }) =>
getSwitch(onChange, ref, value)
}
/>
}
/>
</Box>
</Grid>
<Grid item xs={12} sm={6}>
<Box boxShadow={1} className={classes.switchBox}>
<FormControlLabel
label={t('board.user_write_at')}
labelPlacement="start"
control={
<Controller
name="userWriteAt"
control={control}
render={({ field: { onChange, ref, value } }) =>
getSwitch(onChange, ref, value)
}
/>
}
/>
</Box>
</Grid>
<Grid item xs={12} sm={6}>
<Box boxShadow={1} className={classes.switchBox}>
<FormControlLabel
label={t('board.upload_use_at')}
labelPlacement="start"
control={
<Controller
name="uploadUseAt"
control={control}
render={({ field: { onChange, ref, value } }) => (
<Switch
inputProps={{ 'aria-label': 'secondary checkbox' }}
onClick={handleChangeUploadUseAt}
onChange={onChange}
inputRef={ref}
checked={value}
/>
)}
/>
}
/>
</Box>
</Grid>
<Grid item xs={12} sm={6}>
<Box boxShadow={1} className={classes.switchBox}>
<FormControlLabel
label={t('board.comment_use_at')}
labelPlacement="start"
control={
<Controller
name="commentUseAt"
control={control}
render={({ field: { onChange, ref, value } }) =>
getSwitch(onChange, ref, value)
}
/>
}
/>
</Box>
</Grid>
<Grid item xs={12} sm={6} hidden={!uploadUseAt}>
<Box boxShadow={1}>
<Controller
name="uploadLimitCount"
control={control}
rules={{ required: uploadUseAt, min: 1, max: 99999 }}
render={({ field }) => (
<TextField
label={t('board.upload_limit_count')}
name="uploadLimitCount"
type="number"
id="outlined-full-width"
placeholder={format(t('msg.placeholder.format'), [
t('board.upload_limit_count'),
])}
fullWidth
variant="outlined"
{...field}
/>
)}
/>
{errors.uploadLimitCount && (
<ValidationAlert
fieldError={errors.uploadLimitCount}
target={[1, 99999]}
label={t('board.upload_limit_count')}
/>
)}
</Box>
</Grid>
<Grid item xs={12} sm={6} hidden={!uploadUseAt}>
<Box boxShadow={1}>
<Controller
name="uploadLimitSize"
control={control}
rules={{
required: uploadUseAt,
min: 1,
max: 99999999999999999999,
}}
render={({ field }) => (
<TextField
label={t('board.upload_limit_size')}
name="uploadLimitSize"
type="number"
id="outlined-full-width"
placeholder={format(t('msg.placeholder.format'), [
t('board.upload_limit_size'),
])}
fullWidth
variant="outlined"
{...field}
/>
)}
/>
{errors.uploadLimitSize && (
<ValidationAlert
fieldError={errors.uploadLimitSize}
target={[1, 99999]}
label={t('board.upload_limit_size')}
/>
)}
</Box>
</Grid>
)}
</Box>
</Grid>
</form>
<Grid item xs={12} sm={6}>
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel id="skinTypeCode-label" required>
{t('board.skin_type_code')}
</InputLabel>
<Controller
name="skinTypeCode"
control={control}
defaultValue={initData?.skinTypeCode}
rules={{ required: true }}
render={({ field }) => (
<Select
variant="outlined"
name="skinTypeCode"
required
labelId="skinTypeCode-label"
label={t('board.skin_type_code')}
margin="dense"
{...field}
>
{skinTypeCodeList.map(option => (
<MenuItem key={option.codeId} value={option.codeId}>
{option.codeName}
</MenuItem>
))}
</Select>
)}
/>
</FormControl>
</Grid>
<Grid item xs={12} sm={6}>
<Box boxShadow={1}>
<Controller
name="titleDisplayLength"
control={control}
rules={{ required: true, min: 1, max: 99999 }}
render={({ field }) => (
<TextField
label={t('board.title_display_length')}
name="titleDisplayLength"
required
type="number"
id="outlined-full-width"
placeholder={format(t('msg.placeholder.format'), [
t('board.title_display_length'),
])}
fullWidth
variant="outlined"
{...field}
/>
)}
/>
{errors.titleDisplayLength && (
<ValidationAlert
fieldError={errors.titleDisplayLength}
target={[1, 99999]}
label={t('board.title_display_length')}
/>
)}
</Box>
</Grid>
<Grid item xs={12} sm={6}>
<Box boxShadow={1}>
<Controller
name="postDisplayCount"
control={control}
rules={{ required: true, min: 1, max: 99999 }}
render={({ field }) => (
<TextField
label={t('board.post_display_count')}
name="postDisplayCount"
required
type="number"
id="outlined-full-width"
placeholder={format(t('msg.placeholder.format'), [
t('board.post_display_count'),
])}
fullWidth
variant="outlined"
{...field}
/>
)}
/>
{errors.postDisplayCount && (
<ValidationAlert
fieldError={errors.postDisplayCount}
target={[1, 99999]}
label={t('board.post_display_count')}
/>
)}
</Box>
</Grid>
<Grid item xs={12} sm={6}>
<Box boxShadow={1}>
<Controller
name="pageDisplayCount"
control={control}
rules={{ required: true, min: 1, max: 99999 }}
render={({ field }) => (
<TextField
label={t('board.page_display_count')}
name="pageDisplayCount"
required
type="number"
id="outlined-full-width"
placeholder={format(t('msg.placeholder.format'), [
t('board.page_display_count'),
])}
fullWidth
variant="outlined"
{...field}
/>
)}
/>
{errors.pageDisplayCount && (
<ValidationAlert
fieldError={errors.pageDisplayCount}
target={[1, 99999]}
label={t('board.page_display_count')}
/>
)}
</Box>
</Grid>
<Grid item xs={12} sm={6}>
<Box boxShadow={1}>
<Controller
name="newDisplayDayCount"
control={control}
rules={{ required: true, min: 1, max: 99999 }}
render={({ field }) => (
<TextField
label={t('board.new_display_day_count')}
name="newDisplayDayCount"
required
type="number"
id="outlined-full-width"
placeholder={format(t('msg.placeholder.format'), [
t('board.new_display_day_count'),
])}
fullWidth
variant="outlined"
{...field}
/>
)}
/>
{errors.newDisplayDayCount && (
<ValidationAlert
fieldError={errors.newDisplayDayCount}
target={[1, 99999]}
label={t('board.new_display_day_count')}
/>
)}
</Box>
</Grid>
<Grid item xs={12} sm={6}>
<Box boxShadow={1} className={classes.switchBox}>
<FormControlLabel
label={t('board.editor_use_at')}
labelPlacement="start"
control={
<Controller
name="editorUseAt"
control={control}
render={({ field: { onChange, ref, value } }) =>
getSwitch(onChange, ref, value)
}
/>
}
/>
</Box>
</Grid>
<Grid item xs={12} sm={6}>
<Box boxShadow={1} className={classes.switchBox}>
<FormControlLabel
label={t('board.user_write_at')}
labelPlacement="start"
control={
<Controller
name="userWriteAt"
control={control}
render={({ field: { onChange, ref, value } }) =>
getSwitch(onChange, ref, value)
}
/>
}
/>
</Box>
</Grid>
<Grid item xs={12} sm={6}>
<Box boxShadow={1} className={classes.switchBox}>
<FormControlLabel
label={t('board.upload_use_at')}
labelPlacement="start"
control={
<Controller
name="uploadUseAt"
control={control}
render={({ field: { onChange, ref, value } }) => (
<Switch
inputProps={{ 'aria-label': 'secondary checkbox' }}
onClick={handleChangeUploadUseAt}
onChange={onChange}
inputRef={ref}
checked={value}
/>
)}
/>
}
/>
</Box>
</Grid>
<Grid item xs={12} sm={6}>
<Box boxShadow={1} className={classes.switchBox}>
<FormControlLabel
label={t('board.comment_use_at')}
labelPlacement="start"
control={
<Controller
name="commentUseAt"
control={control}
render={({ field: { onChange, ref, value } }) =>
getSwitch(onChange, ref, value)
}
/>
}
/>
</Box>
</Grid>
<Grid item xs={12} sm={6} hidden={!uploadUseAt}>
<Box boxShadow={1}>
<Controller
name="uploadLimitCount"
control={control}
rules={{ required: uploadUseAt, min: 1, max: 99999 }}
render={({ field }) => (
<TextField
label={t('board.upload_limit_count')}
name="uploadLimitCount"
type="number"
id="outlined-full-width"
placeholder={format(t('msg.placeholder.format'), [
t('board.upload_limit_count'),
])}
fullWidth
variant="outlined"
{...field}
/>
)}
/>
{errors.uploadLimitCount && (
<ValidationAlert
fieldError={errors.uploadLimitCount}
target={[1, 99999]}
label={t('board.upload_limit_count')}
/>
)}
</Box>
</Grid>
<Grid item xs={12} sm={6} hidden={!uploadUseAt}>
<Box boxShadow={1}>
<Controller
name="uploadLimitSize"
control={control}
rules={{
required: uploadUseAt,
min: 1,
max: 99999999999999999999,
}}
render={({ field }) => (
<TextField
label={t('board.upload_limit_size')}
name="uploadLimitSize"
type="number"
id="outlined-full-width"
placeholder={format(t('msg.placeholder.format'), [
t('board.upload_limit_size'),
])}
fullWidth
variant="outlined"
{...field}
/>
)}
/>
{errors.uploadLimitSize && (
<ValidationAlert
fieldError={errors.uploadLimitSize}
target={[1, 99999]}
label={t('board.upload_limit_size')}
/>
)}
</Box>
</Grid>
</Grid>
</FormProvider>
<DetailButtons
handleList={() => {

112
frontend/admin/src/pages/board/index.tsx
View File

@@ -1,9 +1,14 @@
import React, { useCallback, useMemo } from 'react'
import { AxiosError } from 'axios'
import { NextPage } from 'next'
import { useRouter } from 'next/router'
import { TFunction, useTranslation } from 'next-i18next'
import { CustomButtons, IButtonProps } from '@components/Buttons'
import { ConfirmDialog } from '@components/Confirm'
import { PopupProps } from '@components/DialogPopup'
import Search, { IKeywordType } from '@components/Search'
import CustomDataGrid from '@components/Table/CustomDataGrid'
import { GRID_PAGE_SIZE } from '@constants'
import usePage from '@hooks/usePage'
import useSearchTypes from '@hooks/useSearchType'
// 내부 컴포넌트 및 custom hook, etc...
import { convertStringToDateFormat } from '@libs/date'
import Button from '@material-ui/core/Button'
// material-ui deps
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
import {
@@ -12,28 +17,21 @@ import {
GridValueFormatterParams,
GridValueGetterParams,
} from '@material-ui/data-grid'
// 내부 컴포넌트 및 custom hook, etc...
import { convertStringToDateFormat } from '@libs/date'
import CustomDataGrid from '@components/Table/CustomDataGrid'
import { CustomButtons, IButtonProps } from '@components/Buttons'
import { Page, rownum } from '@utils'
import Search, { IKeywordType } from '@components/Search'
// 상태관리 recoil
import { useRecoilValue, useSetRecoilState } from 'recoil'
// api
import { boardService } from '@service'
import {
conditionAtom,
detailButtonsSnackAtom,
errorStateSelector,
} from '@stores'
// api
import { boardService } from '@service'
import { PopupProps } from '@components/DialogPopup'
import Button from '@material-ui/core/Button'
import usePage from '@hooks/usePage'
import { GRID_PAGE_SIZE } from '@constants'
import { Page, rownum } from '@utils'
import { AxiosError } from 'axios'
import { NextPage } from 'next'
import { TFunction, useTranslation } from 'next-i18next'
import { useRouter } from 'next/router'
import React, { useCallback, useMemo, useState } from 'react'
// 상태관리 recoil
import { useRecoilValue, useSetRecoilState } from 'recoil'
// material-ui style
const useStyles = makeStyles((theme: Theme) =>
@@ -133,12 +131,12 @@ const Board: NextPage<BoardProps> = props => {
const setSuccessSnackBar = useSetRecoilState(detailButtonsSnackAtom)
// 조회조건 select items
const searchTypes: IKeywordType[] = [
const searchTypes: IKeywordType[] = useSearchTypes([
{
key: 'boardName',
label: t('board.board_name'),
},
]
])
/**
* 상태관리 필요한 훅
@@ -150,6 +148,14 @@ const Board: NextPage<BoardProps> = props => {
// 현 페이지내 필요한 hook
const { page, setPageValue } = usePage(conditionKey)
const [deleteConfirmState, setDeleteConfirmState] = useState<{
open: boolean
boardNo: number
}>({
open: false,
boardNo: null,
})
// 목록 데이터 조회 및 관리
const { data, mutate } = boardService.search({
keywordType: keywordState?.keywordType || 'boardName',
@@ -177,19 +183,17 @@ const Board: NextPage<BoardProps> = props => {
// 삭제
const handleDelete = useCallback(
(row: any) => {
const { boardNo } = row
const { boardNo, isPosts } = row
setSuccessSnackBar('loading')
if (isPosts) {
setDeleteConfirmState({
open: true,
boardNo,
})
return
}
boardService.delete({
boardNo,
callback: () => {
setSuccessSnackBar('success')
mutate()
},
errorCallback,
})
deleteBoard(boardNo)
},
[errorCallback, mutate, setSuccessSnackBar],
)
@@ -251,6 +255,36 @@ const Board: NextPage<BoardProps> = props => {
route.push('board/-1')
}
const handleConfirmClose = () => {
setDeleteConfirmState({
open: false,
boardNo: null,
})
}
const deleteBoard = (boardNo: number) => {
setSuccessSnackBar('loading')
boardService.delete({
boardNo,
callback: () => {
setSuccessSnackBar('success')
mutate()
},
errorCallback,
})
}
const handleConfirm = () => {
const { boardNo } = deleteConfirmState
deleteBoard(boardNo)
setDeleteConfirmState({
open: false,
boardNo: null,
})
}
return (
<div className={classes.root}>
<Search
@@ -270,6 +304,12 @@ const Board: NextPage<BoardProps> = props => {
onPageChange={handlePageChange}
getRowId={r => r.boardNo}
/>
<ConfirmDialog
open={deleteConfirmState.open}
contentText={'게시물이 존재합니다. 삭제하시겠습니까?'}
handleClose={handleConfirmClose}
handleConfirm={handleConfirm}
/>
</div>
)
}

1
frontend/admin/src/pages/menu/index.tsx
View File

@@ -166,7 +166,6 @@ const Menu = ({ sites, menuTypes }: MenuProps) => {
}
const handleSave = async (formData: IMenuInfoForm) => {
console.log(formData)
setSuccessSnackBar('loading')
try {
const result = await menuService.update(treeSelected.menuId, formData)

204
frontend/admin/src/pages/posts/[board]/edit/[id].tsx
View File

@@ -302,81 +302,119 @@ const PostsItem = ({ boardNo, postsNo, board, initData }: IPostsItemsProps) => {
return (
<div className={classes.root}>
<FormProvider {...methods}>
<form>
<Grid container spacing={1}>
<Grid item xs={12} sm={12}>
<Grid container spacing={1}>
<Grid item xs={12} sm={12}>
<Box boxShadow={1}>
<Controller
name="postsTitle"
render={({ field }) => (
<TextField
autoFocus
label={t('posts.posts_title')}
name="postsTitle"
required
inputProps={{ maxLength: 100 }}
id="outlined-full-width"
placeholder={format(t('msg.placeholder.format'), [
t('posts.posts_title'),
])}
fullWidth
variant="outlined"
{...field}
/>
)}
control={control}
rules={{ required: true, maxLength: 100 }}
/>
{errors.postsTitle && (
<ValidationAlert
fieldError={errors.postsTitle}
target={[100]}
label={t('posts.posts_title')}
/>
)}
</Box>
</Grid>
<Grid item xs={12} sm={12}>
<Box boxShadow={1} className={classes.switchBox}>
<FormControlLabel
label={t('posts.notice_at')}
labelPlacement="start"
control={
<Controller
name="noticeAt"
control={control}
render={({ field: { onChange, ref, value } }) => (
<Switch
inputProps={{ 'aria-label': 'secondary checkbox' }}
onChange={onChange}
inputRef={ref}
checked={value}
/>
)}
/>
}
/>
</Box>
</Grid>
<Grid item xs={12} sm={12}>
{board.editorUseAt && (
<Editor contents={postsContent} setContents={setPostsContent} />
)}
{!board.editorUseAt && (
<Box boxShadow={1}>
<Controller
name="postsTitle"
name="postsContent"
control={control}
rules={{ required: true }}
render={({ field }) => (
<TextField
autoFocus
label={t('posts.posts_title')}
name="postsTitle"
required
inputProps={{ maxLength: 100 }}
label={t('posts.posts_content')}
name="postsContent"
multiline
minRows={9.2}
id="outlined-full-width"
placeholder={format(t('msg.placeholder.format'), [
t('posts.posts_title'),
t('posts.posts_content'),
])}
fullWidth
variant="outlined"
{...field}
/>
)}
control={control}
rules={{ required: true, maxLength: 100 }}
/>
{errors.postsTitle && (
{errors.postsContent && (
<ValidationAlert
fieldError={errors.postsTitle}
target={[100]}
label={t('posts.posts_title')}
fieldError={errors.postsContent}
label={t('posts.posts_content')}
/>
)}
</Box>
</Grid>
<Grid item xs={12} sm={12}>
<Box boxShadow={1} className={classes.switchBox}>
<FormControlLabel
label={t('posts.notice_at')}
labelPlacement="start"
control={
<Controller
name="noticeAt"
control={control}
render={({ field: { onChange, ref, value } }) => (
<Switch
inputProps={{ 'aria-label': 'secondary checkbox' }}
onChange={onChange}
inputRef={ref}
checked={value}
/>
)}
/>
}
/>
</Box>
</Grid>
)}
</Grid>
{(board.skinTypeCode === SKINT_TYPE_CODE_FAQ ||
board.skinTypeCode === SKINT_TYPE_CODE_QNA) && (
<Grid item xs={12} sm={12}>
{board.editorUseAt && (
<Editor contents={postsContent} setContents={setPostsContent} />
<Editor
contents={postsAnswerContent}
setContents={setPostsAnswerContent}
/>
)}
{!board.editorUseAt && (
<Box boxShadow={1}>
<Controller
name="postsContent"
name="postsAnswerContent"
control={control}
rules={{ required: true }}
render={({ field }) => (
<TextField
label={t('posts.posts_content')}
name="postsContent"
label={t('posts.posts_answer_content')}
name="postsAnswerContent"
multiline
minRows={9.2}
id="outlined-full-width"
placeholder={format(t('msg.placeholder.format'), [
t('posts.posts_content'),
t('posts.posts_answer_content'),
])}
fullWidth
variant="outlined"
@@ -384,68 +422,28 @@ const PostsItem = ({ boardNo, postsNo, board, initData }: IPostsItemsProps) => {
/>
)}
/>
{errors.postsContent && (
<ValidationAlert
fieldError={errors.postsContent}
label={t('posts.posts_content')}
/>
)}
</Box>
)}
</Grid>
{(board.skinTypeCode === SKINT_TYPE_CODE_FAQ ||
board.skinTypeCode === SKINT_TYPE_CODE_QNA) && (
<Grid item xs={12} sm={12}>
{board.editorUseAt && (
<Editor
contents={postsAnswerContent}
setContents={setPostsAnswerContent}
/>
)}
{board.uploadUseAt && (
<Grid item xs={12} sm={12}>
<Box boxShadow={1}>
<Upload
ref={uploadRef}
multi
uploadLimitCount={board.uploadLimitCount}
uploadLimitSize={board.uploadLimitSize}
attachmentCode={initData.attachmentCode}
attachData={attachData}
/>
{attachData && (
<AttachList data={attachData} setData={setAttachData} />
)}
{!board.editorUseAt && (
<Box boxShadow={1}>
<Controller
name="postsAnswerContent"
control={control}
render={({ field }) => (
<TextField
label={t('posts.posts_answer_content')}
name="postsAnswerContent"
multiline
minRows={9.2}
id="outlined-full-width"
placeholder={format(t('msg.placeholder.format'), [
t('posts.posts_answer_content'),
])}
fullWidth
variant="outlined"
{...field}
/>
)}
/>
</Box>
)}
</Grid>
)}
{board.uploadUseAt && (
<Grid item xs={12} sm={12}>
<Box boxShadow={1}>
<Upload
ref={uploadRef}
multi
uploadLimitCount={board.uploadLimitCount}
uploadLimitSize={board.uploadLimitSize}
attachmentCode={initData.attachmentCode}
attachData={attachData}
/>
{attachData && (
<AttachList data={attachData} setData={setAttachData} />
)}
</Box>
</Grid>
)}
</Grid>
</form>
</Box>
</Grid>
)}
</Grid>
</FormProvider>
<CustomButtons buttons={[saveButton, prevButton]} />
<CustomAlert