Merge pull request #133 from PLADI-ALM/fix/PDW-87-user-list

[PDW-87/fix] 직원 목록 조회(총 인원수, 소속, 소속 필터링) 추가
PLADI-ALM · Nov 15, 2023 · 9572b3f · 9572b3f
2 parents 9d6ec44 + 5578d29
commit 9572b3f
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 45 deletions.
diff --git a/src/components/capsule/DropBox.js b/src/components/capsule/DropBox.js
@@ -20,6 +20,10 @@ const Select = styled.select`
   appearance: none;
 `
 
+const ManagerSelect = styled(Select)`
+  margin-right: 10px;
+`
+
 const NoBorderSelect = styled(Select)`
   border: none;
 `
@@ -51,6 +55,14 @@ export function DropBox(props) {
     );
 }
 
+export function ManagerDropBox(props) {
+    return (
+        <ManagerSelect onChange={props.change} imgUrl={SelectArrow} height={props.height}>
+            {props.items}
+        </ManagerSelect>
+    );
+}
+
 export function TimeDropBox(props) {
     const timeOptionList = TimeList.map((time) => (<option>{time}</option>))
     return (

diff --git a/src/components/searchBar/ManageSearchBar.js b/src/components/searchBar/ManageSearchBar.js
@@ -2,7 +2,8 @@ import React from "react";
 import styled from "styled-components";
 import SearchInputImage from "../../assets/images/SearchInput.svg"
 import SearchButtonImage from "../../assets/images/SearchPlus.svg"
-import {DropBox} from "../capsule/DropBox";
+import {DropBox, ManagerDropBox} from "../capsule/DropBox";
+import {options} from "axios";
 
 const Container = styled.div`
   background: none;
@@ -11,7 +12,7 @@ const Container = styled.div`
   display: inline-flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
 `
 
 const ManageSearchContainer = styled.div`
@@ -43,7 +44,6 @@ const ManageSearchText = styled.input`
 export const ManageAddButton = styled.button`
   height: 100%;
   padding: 10px 15px;
-  margin-left: 10px;
   border: none;
   border-radius: 8px;
   background: #8741CB;
@@ -71,15 +71,23 @@ function ManageSearchBar(props) {
         props.onEnter(e) // Enter 입력이 되면 클릭 이벤트 실행
     };
 
+    function makeDropBox() {
+        let dropBoxes = [];
+        if (props.selectOptions !== null)
+            props.selectOptions.forEach((option, index) =>
+                dropBoxes.push(<ManagerDropBox height={"40px"} items={option} change={props.onSelectedChange[index]}/>)
+            )
+        return dropBoxes
+    }
+
     return (
         <Container>
             <ManageSearchContainer>
                 <ManageSearchImage src={SearchInputImage}/>
                 <ManageSearchText onChange={handleOnKeyPress} placeholder="이름 검색"/>
             </ManageSearchContainer>
             {
-                props.selectOptions !== null ?
-                    <DropBox height={"40px"} items={props.selectOptions} change={props.onSelectedChange}/> : null
+                makeDropBox()
             }
             <ManageAddButton onClick={props.btnClick}>
                 <ManageAddButtonImage src={SearchButtonImage}/>

diff --git a/src/constants/ToggleList.js b/src/constants/ToggleList.js
@@ -6,5 +6,9 @@ export const TimeList = [
 ]
 
 export const BookingCategoryList = [
-    "회의실", "장비"
+    "회의실", "장비", "차량"
+]
+
+export const AffiliationList = [
+    "플래디", "스튜디오아이", "피디룸"
 ]
diff --git a/src/pages/admin/user/UserManage.js b/src/pages/admin/user/UserManage.js
@@ -1,36 +1,50 @@
-import React, {useRef} from "react";
-import { useState, useEffect } from "react";
-import { RightContainer, TitleText, WhiteContainer } from "components/rightContainer/RightContainer";
+import React, {useEffect, useRef, useState} from "react";
+import {RightContainer, TitleText, WhiteContainer} from "components/rightContainer/RightContainer";
 import {Bar, BookedTable, BookedThead, NoLineTr, TableContainer} from "../../basic/myBookings/BookedList";
 import UserManageLine from "pages/admin/user/UserManageLine"
 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 {AdminUsersAxios} from "api/AxiosApi";
+import {basicError} from "utils/ErrorHandlerUtil";
+import {getToken} from "utils/IsLoginUtil";
+import {UserModal} from "./UserModal";
+import {AffiliationList} from "../../../constants/ToggleList";
+import styled from "styled-components";
+
+const UserNumDiv = styled.div`
+  text-align: left;
+  margin-bottom: 10px;
+  margin-left: 5px;
+`
 
 function UserManage(props) {
     const [isOpen, setIsOpen] = useState(false)
     const [users, setUserList] = useState([])
+    const [userNum, setUserNum] = useState(0)
     const [departmentOptionList, setDepartmentOptionList] = useState([]);
+    const [affiliationOptionList, setAffiliationOptionList] = useState([]);
+    const currentAffiliation = useRef("");
     const currentDepartment = useRef("");
     const currentSearchWord = useRef("");
     let departments;
 
     // 유저 목록 조회
-    const getUserList = (word, department) => {
-        AdminUsersAxios.get(`?name=${word}&department=${department}`, {
+    const getUserList = (word, affiliation, department) => {
+        AdminUsersAxios.get(`?name=${word}&affiliation=${affiliation}&department=${department}`, {
             headers: {
                 Authorization: getToken()
             }
         })
-            .then((response) => { setUserList(response.data.data.content) })
+            .then((response) => {
+                setUserList(response.data.data.content);
+                setUserNum(response.data.data.totalElements)
+            })
             .catch((error) => {
                 basicError(error)
             })
     }
 
-    function getDpNPsList() {
+    // 부서 리스트
+    function getDepartmentList() {
         AdminUsersAxios.get("/departments", {
             headers: {
                 Authorization: getToken()
@@ -50,21 +64,34 @@ function UserManage(props) {
     }
 
     useEffect(() => {
-        getUserList("", "")
+        getUserList("", "", "")
     }, [])
 
     useEffect(() => {
-        getDpNPsList()
-    },[])
+        getDepartmentList()
+        // 소속 드롭박스 초기 구성
+        if (affiliationOptionList.length === 0) {
+            affiliationOptionList.push(<option value="">소속</option>)
+            AffiliationList.map((affiliation) =>
+                affiliationOptionList.push(<option value={affiliation}>{affiliation}</option>))
+        }
+    }, [])
 
     const searchUsers = (e) => {
         currentSearchWord.current = e.target.value
-        getUserList(currentSearchWord.current, currentDepartment.current)
+        getUserList(currentSearchWord.current, currentAffiliation.current, currentDepartment.current)
     }
 
-    const onSelectedChange = (e) => {
+    // 소속 드롭박스 변경
+    const onSelectedAffiliationChange = (e) => {
+        currentAffiliation.current = e.target.value
+        getUserList(currentSearchWord.current, currentAffiliation.current, currentDepartment.current)
+    }
+
+    // 부서 드롭박스 변경
+    const onSelectedDepartmentChange = (e) => {
         currentDepartment.current = e.target.value
-        getUserList(currentSearchWord.current, currentDepartment.current)
+        getUserList(currentSearchWord.current, currentAffiliation.current, currentDepartment.current)
     }
 
     // 모달 핸들러
@@ -79,38 +106,42 @@ function UserManage(props) {
                 : null
             }
             <TitleText>직원 관리</TitleText>
-            <ManageSearchBar selectOptions={departmentOptionList} onSelectedChange={onSelectedChange}
-                             btnClick={openModalHandler} onEnter={searchUsers} buttonTitle="신규 직원 등록" />
-
+            <ManageSearchBar selectOptions={[affiliationOptionList, departmentOptionList]} onSelectedChange={[onSelectedAffiliationChange, onSelectedDepartmentChange]}
+                             btnClick={openModalHandler} onEnter={searchUsers} buttonTitle="신규 직원 등록"/>
+            <UserNumDiv>검색 인원: {userNum}명</UserNumDiv>
             <WhiteContainer>
-                <Bar />
+                <Bar/>
                 <TableContainer>
                     <BookedTable>
                         <BookedThead>
                             <tr>
-                                <th width="10%">성명</th>
+                                <th width="7%">성명</th>
                                 <th width="17%">이메일</th>
-                                <th width="15%">연락처</th>
+                                <th width="10%">연락처</th>
+                                <th width="10%">부여자산</th>
+                                <th width="10%">소속</th>
                                 <th width="10%">부서</th>
                                 <th width="5%">권한</th>
                                 <th width="3%"></th>
                             </tr>
                         </BookedThead>
                         <tbody>
-                            {users.length === 0 ?
-                                <NoLineTr>
-                                    <td colSpan={6}>직원이 없습니다.</td>
-                                </NoLineTr>
-                                : users.map((user) =>
-                                    <UserManageLine
-                                        key={user.id}
-                                        id={user.userId}
-                                        name={user.name}
-                                        email={user.email}
-                                        phone={user.phone}
-                                        department={user.department}
-                                        role={user.role}
-                                    />)}
+                        {users.length === 0 ?
+                            <NoLineTr>
+                                <td colSpan={8}>직원이 없습니다.</td>
+                            </NoLineTr>
+                            : users.map((user) =>
+                                <UserManageLine
+                                    key={user.userId}
+                                    id={user.userId}
+                                    name={user.name}
+                                    email={user.email}
+                                    asset={user.asserts}
+                                    phone={user.phone}
+                                    affiliation={user.affiliation}
+                                    department={user.department}
+                                    role={user.role}
+                                />)}
                         </tbody>
                     </BookedTable>
                 </TableContainer>

diff --git a/src/pages/admin/user/UserManageLine.js b/src/pages/admin/user/UserManageLine.js
@@ -15,9 +15,11 @@ function UserManageLine(props) {
 
     return (
         <BookedLineTr>
-            <td width="10%">{props.name}</td>
+            <td width="7%">{props.name}</td>
             <td width="17%">{props.email}</td>
-            <td width="15%">{props.phone}</td>
+            <td width="10%">{props.phone}</td>
+            <td width="10%">{props.asset}</td>
+            <td width="10%">{props.affiliation}</td>
             <td width="10%">{props.department}</td>
             <td width="5%"><RoleCapsule role={props.role}/></td>
             <td width="3%"><MoreBtn src={MoreIcon} onClick={openMoreModalHandler}/>