bugfix menu tree dnd update
This commit is contained in:
shinmj
81
frontend/admin/src/components/DraggableTreeMenu/TreeJson.ts
Normal file
81
frontend/admin/src/components/DraggableTreeMenu/TreeJson.ts
Normal 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
|
||||
}),
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
@@ -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(
|
||||
|
||||
@@ -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 ? (
|
||||
|
||||
@@ -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={() => {
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user