@ -1,110 +1,188 @@
import { Text , Box , Heading , Image , Center , Button , Flex , VStack , Divider , useToast , FormControl , FormLabel , FormHelperText , Input , FormErrorMessage , HStack , Wrap , useMediaQuery , Avatar , Textarea , } from "@chakra-ui/react" import { Text , Box , Heading , Image , Center , Button , Flex , VStack , Divider , useToast , FormControl , FormLabel , FormHelperText , Input , FormErrorMessage , HStack , Wrap , useMediaQuery , Avatar , Textarea , Table , Thead , Tr , Th , Tbody , Td , IconButton , useDisclosure , Modal , ModalOverlay , ModalContent , ModalHeader , ModalBody , ModalFooter , Select , NumberInput , NumberInputField , NumberInputStepper , NumberIncrementStepper , NumberDecrementStepper } from "@chakra-ui/react"
import Card from "components/card" import Card from "components/card"
import Nav from "layouts/nav/nav"
import PageContainer from "layouts/page-container" import PageContainer from "layouts/page-container"
import Sidebar from "layouts/sidebar/sidebar" import Sidebar from "layouts/sidebar/sidebar"
import React , { useEffect , useState } from "react" import React , { useEffect , useState } from "react"
import { adminLinks, settingLinks } from "src/data/links" import { } from "src/data/links"
import { requestApi } from "utils/axios/request" import { requestApi } from "utils/axios/request"
import { useRouter } from "next/router"
import { Field , Form , Formik } from "formik"
import { config } from "configs/config" import { config } from "configs/config"
import Tags from "components/tags/tags" import { getSvgIcon } from "components/svg-icon"
var validator = require ( 'validator' ) ; import { Navbar , NavbarType } from "src/types/user"
import { cloneDeep } from "lodash"
import { IDType } from "src/types/id"
import { Story } from "src/types/story"
const UserNavbarPage = ( ) = > { const UserNavbarPage = ( ) = > {
const [ user , setUser ] = useState ( null )
const [ navbars , setNavbars ] : [ Navbar [ ] , any ] = useState ( [ ] )
const [ skills , setSkills ] = useState ( [ ] )
const [ series , setSeries ] : [ Story [ ] , any ] = useState ( [ ] )
const [ isLargerThan1280 ] = useMediaQuery ( "(min-width: 768px)" )
const [ currentNavbar , setCurrentNavbar ] : [ Navbar , any ] = useState ( null )
const { isOpen , onOpen , onClose } = useDisclosure ( )
const toast = useToast ( )
useEffect ( ( ) = > {
useEffect ( ( ) = > {
requestApi . get ( "/user/self" ) . then ( res = > setUser ( res . data ) )
getNavbars ( )
getSeries ( )
} , [ ] )
} , [ ] )
const router = useRouter ( )
const toast = useToast ( )
const submitUser = async ( values , _ ) = > {
const getNavbars = async ( ) = > {
await requestApi . post ( ` /user/update ` , values )
const res = await requestApi . get ( "/user/navbars/0" )
setUser ( values )
setNavbars ( res . data )
toast ( {
description : "更新成功" ,
status : "success" ,
duration : 2000 ,
isClosable : true ,
} )
}
}
function validateNickname ( value ) {
const getSeries = async ( ) = > {
let error
const res = await requestApi . get ( ` /story/posts/editor?type= ${ IDType . Series } ` )
if ( ! value ? . trim ( ) ) {
setSeries ( res . data )
error = "昵称不能为空"
}
const submitNavbar = async ( ) = > {
if ( ! currentNavbar . label || ! currentNavbar . value ) {
toast ( {
description : "值不能为空" ,
status : "error" ,
duration : 2000 ,
isClosable : true ,
} )
return
}
}
if ( value ? . length > config . user . nicknameMaxLen ) {
if ( currentNavbar . label . length > config . user . navbarMaxLen ) {
error = ` 长度不能超过 ${ config . user . nicknameMaxLen } `
toast ( {
description : ` Label长度不能超过 ${ config . user . navbarMaxLen } ` ,
status : "error" ,
duration : 2000 ,
isClosable : true ,
} )
return
}
}
return error
}
function validateEmail ( value ) {
await requestApi . post ( ` /user/navbar ` , currentNavbar )
let email = value ? . trim ( )
setCurrentNavbar ( null )
let error
onClose ( )
getNavbars ( )
}
if ( email ? . length > config . user . usernameMaxLen ) {
const onAddNavbar = ( ) = > {
error = ` 长度不能超过 ${ config . user . usernameMaxLen } `
setCurrentNavbar ( { weight : 0 , type : NavbarType . Link , label : "" , value : "https://" } )
return error
onOpen ( )
} }
if ( email ) {
const onEditNavbar = nav = > {
if ( ! validator . isEmail ( email ) ) {
setCurrentNavbar ( nav )
error = "Email格式不合法"
onOpen ( )
return error
}
}
return error
}
}
const onNavbarChange = ( ) = > {
const nv = cloneDeep ( currentNavbar )
setCurrentNavbar ( nv )
}
function validateUrl ( value , canBeEmpty = true ) {
const onNvTypeChange = v = > {
let url = value ? . trim ( )
const tp = parseInt ( v ) ;
let error
currentNavbar . type = tp
if ( ! canBeEmpty ) {
if ( tp === NavbarType . Link ) {
if ( ! url ) {
currentNavbar . value = ""
error = "url不能为空"
} else {
return error
currentNavbar . value = series [ 0 ] . id
}
}
}
onNavbarChange ( )
if ( url ) {
}
if ( ! validator . isURL ( value ) ) {
const getSeriesTitle = id = > {
error = "URL格式不合法"
for ( const s of series ) {
return error
if ( s . id === id ) {
return s . title
}
}
}
}
return error
return ""
}
}
function validateLen ( value ) {
const onDeleteNavbar = async id = > {
let error
requestApi . delete ( ` /user/navbar/ ${ id } ` )
if ( value ? . length > config . commonMaxlen ) {
getNavbars ( )
error = ` 长度不能超过 ${ config . commonMaxlen } `
}
return error
}
}
const Layout = isLargerThan1280 ? HStack : VStack
return (
return (
< >
< >
< PageContainer >
< PageContainer >
< Box display = "flex" >
< Box display = "flex" >
< Sidebar routes = { settingLinks } width = { [ "120px" , "120px" , "250px" , "250px" ] } height = "fit-content" title = "博客设置" / >
< Sidebar routes = { settingLinks } width = { [ "120px" , "120px" , "250px" , "250px" ] } height = "fit-content" title = "博客设置" / >
{ user && < Card ml = "4" width = "100%" >
< Card ml = "4" width = "100%" >
< Heading > < / Heading >
< Flex justifyContent = "space-between" alignItems = "center" >
< / Card > }
< Heading size = "sm" > 菜 单 设 置 < / Heading >
< Button colorScheme = "teal" size = "sm" onClick = { onAddNavbar } _focus = { null } > 新 建 菜 单 项 < / Button >
< / Flex >
< Table variant = "simple" mt = "4" >
< Thead >
< Tr >
< Th > Label < / Th >
< Th > Type < / Th >
< Th > Value < / Th >
< Th > Weight < / Th >
< Th > < / Th >
< / Tr >
< / Thead >
< Tbody >
{
navbars . map ( ( nv , i ) = > < Tr key = { i } >
< Td > { nv . label } < / Td >
< Td > { nv . type === NavbarType . Link ? "link" : "series" } < / Td >
< Td > { nv . type === NavbarType . Link ? nv.value : getSeriesTitle ( nv . value ) } < / Td >
< Td > { nv . weight } < / Td >
< Td >
< IconButton aria - label = "edit navbar" variant = "ghost" icon = { getSvgIcon ( 'edit' , ".95rem" ) } onClick = { ( ) = > onEditNavbar ( nv ) } / >
< IconButton aria - label = "delete navbar" variant = "ghost" icon = { getSvgIcon ( 'close' , "1rem" ) } onClick = { ( ) = > onDeleteNavbar ( nv . id ) } / >
< / Td >
< / Tr > )
}
< / Tbody >
< / Table >
< / Card >
< / Box >
< / Box >
< / PageContainer >
< / PageContainer >
< Modal isOpen = { isOpen } onClose = { onClose } >
< ModalOverlay / >
{ currentNavbar && < ModalContent >
< ModalHeader > { currentNavbar . label ? "编辑菜单项" : "新建菜单项" } < / ModalHeader >
< ModalBody mb = "2" >
< VStack spacing = "4" alignItems = "left" >
< HStack spacing = "4" >
< Heading size = "xs" > Label < / Heading >
< Input value = { currentNavbar . label } _focus = { null } variant = "flushed" onChange = { e = > { currentNavbar . label = e . currentTarget . value ; onNavbarChange ( ) } } > < / Input >
< / HStack >
< HStack spacing = "4" >
< Heading size = "xs" > Type < / Heading >
< Select value = { currentNavbar . type } onChange = { e = > onNvTypeChange ( e . currentTarget . value ) } variant = "flushed" _focus = { null } >
< option value = { NavbarType . Link } > Link < / option >
< option value = { NavbarType . Series } > Series < / option >
< / Select >
< / HStack >
< HStack spacing = "4" >
< Heading size = "xs" > Value < / Heading >
{ currentNavbar . type === NavbarType . Link ? < Input value = { currentNavbar . value } _focus = { null } variant = "flushed" onChange = { e = > { currentNavbar . value = e . currentTarget . value ; onNavbarChange ( ) } } / > :
< Select value = { currentNavbar . value } variant = "flushed" _focus = { null } onChange = { e = > { currentNavbar . value = e . currentTarget . value ; onNavbarChange ( ) } } >
{ series . map ( s = > < option key = { s . id } value = { s . id } > { s . title } < / option > ) }
< / Select > }
< / HStack >
< HStack spacing = "4" >
< Heading size = "xs" > Weight < / Heading >
< NumberInput min = { 0 } max = { 10 } value = { currentNavbar . weight } variant = "flushed" onChange = { e = > { currentNavbar . weight = parseInt ( e ) ; onNavbarChange ( ) } } >
< NumberInputField _focus = { null } / >
< NumberInputStepper >
< NumberIncrementStepper / >
< NumberDecrementStepper / >
< / NumberInputStepper >
< / NumberInput >
< / HStack >
< / VStack >
< Button colorScheme = "teal" variant = "outline" mt = "6" onClick = { submitNavbar } > 提 交 < / Button >
< / ModalBody >
< / ModalContent > }
< / Modal >
< / >
< / >
)
)
} }
codemystery
4 years ago