diff --git a/src/components/capsule/DropBox.js b/src/components/capsule/DropBox.js index cb2a823..10035c7 100644 --- a/src/components/capsule/DropBox.js +++ b/src/components/capsule/DropBox.js @@ -18,6 +18,9 @@ const Select = styled.select` -webkit-appearance: none; -moz-appearance: none; appearance: none; + &:disabled { + background: #FAFAFA; + } ` const ManagerSelect = styled(Select)` diff --git a/src/components/modal/BigModal.js b/src/components/modal/BigModal.js index 509d877..6503adc 100644 --- a/src/components/modal/BigModal.js +++ b/src/components/modal/BigModal.js @@ -82,6 +82,9 @@ export const AttrInput = styled.input` padding: 0 10px; outline: none; box-sizing: border-box; + &:disabled { + color: #9E9E9E; + } ` // 하단 버튼 컨테이너 diff --git a/src/pages/admin/user/UserModal.js b/src/components/modal/UserModal.js similarity index 78% rename from src/pages/admin/user/UserModal.js rename to src/components/modal/UserModal.js index 9de6752..7deac1b 100644 --- a/src/pages/admin/user/UserModal.js +++ b/src/components/modal/UserModal.js @@ -1,6 +1,6 @@ import {SelectToggleInModal} from 'components/capsule/DropBox'; import React, {useState, useEffect, useRef} from 'react'; -import {AdminUsersAxios} from 'api/AxiosApi'; +import {AdminUsersAxios, UsersAxios} from 'api/AxiosApi'; import {getToken} from 'utils/IsLoginUtil'; import {basicError} from 'utils/ErrorHandlerUtil'; import { @@ -21,7 +21,7 @@ import { BasicRadioInput } from 'components/capsule/RoleCapsule'; import BigSquareButton, {InputPurpleButton} from 'components/button/BigSquareButton'; -import {AffiliationList} from "../../../constants/ToggleList"; +import {AffiliationList} from "../../constants/ToggleList"; export function UserModal(props) { const [affiliationOptionList, setAffiliationOptionList] = useState([]); @@ -32,7 +32,8 @@ export function UserModal(props) { const [userInfo, setUserInfo] = useState(null); let departments; - function getUserInfo() { + // 관리자 직원 정보 조회 + function getUserInfoByAdmin() { if (props.id !== undefined) { AdminUsersAxios.get(`/${props.id}`, { headers: { @@ -56,6 +57,7 @@ export function UserModal(props) { } } + // 부서 목록 조회 function getDepartmentsList() { AdminUsersAxios.get("/departments", { headers: { @@ -81,8 +83,30 @@ export function UserModal(props) { value={affiliation}>{affiliation}))) } + // 내 정보 조회 + function getMyInfo() { + UsersAxios.get("", { + headers: { + Authorization: getToken() + } + }) + .then((response) => { + setUserInfo(response.data.data) + currentDepartment.current = response.data.data.department + currentAffiliation.current = response.data.data.affiliation + setDepartmentOptionList() + setAffiliationOptionList() + }) + .catch((error) => { + basicError(error) + }) + } + useEffect(() => { - getUserInfo() + if (props.my) getMyInfo() + else getUserInfoByAdmin() }, []) const handleRoleChange = (e) => { @@ -106,6 +130,7 @@ export function UserModal(props) { .replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`); } + // 관리자 직원 등록 const registerUser = (e) => { e.preventDefault() const inputName = e.target.name.value @@ -125,7 +150,7 @@ export function UserModal(props) { phone: inputPhone, affiliation: inputAffiliation, department: inputDepartment, - asserts: inputAsset, + assets: inputAsset, role: inputRole }, { headers: { @@ -141,6 +166,7 @@ export function UserModal(props) { }) }; + // 관리자 직원 수정 const editUser = (e) => { e.preventDefault() const inputName = e.target.name.value @@ -156,7 +182,7 @@ export function UserModal(props) { phone: inputPhone, affiliation: inputAffiliation, department: inputDepartment, - asserts: inputAsset, + assets: inputAsset, role: inputRole }, { headers: { @@ -172,6 +198,32 @@ export function UserModal(props) { }) }; + // 내 정보 수정 + const editMyInfo = (e) => { + e.preventDefault() + const inputName = e.target.name.value + const inputPhone = e.target.phone.value + const inputAsset = e.target.asset.value + // todo: 입력값 정규식 확인 + + UsersAxios.patch("", { + name: inputName, + phone: inputPhone, + assets: inputAsset, + }, { + headers: { + Authorization: getToken() + } + }) + .then((response) => { + alert("수정되었습니다.") + props.handler(); + }) + .catch((error) => { + basicError(error) + }) + }; + return ( @@ -179,7 +231,9 @@ export function UserModal(props) { {props.title} - + 성명 이메일 + disabled={userInfo !== null}/> 비밀번호 + disabled={userInfo !== null}/> 연락처 @@ -206,21 +260,22 @@ export function UserModal(props) { 소속 + onChange={handleAffiliationChange} + disabled={props.my}/> 부서 + onChange={handleDepartmentChange} + disabled={props.my}/> 부여자산 + defaultValue={userInfo !== null ? userInfo.assets : null}/> - {/**/} - + 권한 { + setIsOpen(!isOpen) + } // 이름 const getUserInfo = () => { @@ -159,10 +165,14 @@ function Sidebar() {
{/* 사원 정보 */} - {userName}관리 + {userName}관리 {/* 로그아웃 */} 로그아웃
+ {isOpen ? + + : null + } ) } diff --git a/src/pages/admin/user/UserManage.js b/src/pages/admin/user/UserManage.js index 8c0db2e..c9b1047 100644 --- a/src/pages/admin/user/UserManage.js +++ b/src/pages/admin/user/UserManage.js @@ -6,7 +6,7 @@ import ManageSearchBar from "components/searchBar/ManageSearchBar"; import {AdminUsersAxios} from "api/AxiosApi"; import {basicError} from "utils/ErrorHandlerUtil"; import {getToken} from "utils/IsLoginUtil"; -import {UserModal} from "./UserModal"; +import {UserModal} from "../../../components/modal/UserModal"; import {AffiliationList} from "../../../constants/ToggleList"; import styled from "styled-components"; diff --git a/src/pages/admin/user/UserMoreModal.js b/src/pages/admin/user/UserMoreModal.js index e6995c6..40eeb20 100644 --- a/src/pages/admin/user/UserMoreModal.js +++ b/src/pages/admin/user/UserMoreModal.js @@ -1,6 +1,6 @@ import React, {useState} from 'react'; import {MenuText, MoreModalView, NormalDiv, RedDiv} from "../../../components/modal/MoreModal"; -import {UserModal} from "./UserModal"; +import {UserModal} from "../../../components/modal/UserModal"; import {AdminUsersAxios} from "../../../api/AxiosApi"; import {getToken} from "../../../utils/IsLoginUtil"; import {basicError} from "../../../utils/ErrorHandlerUtil";