place, equip table sort

PoApper · Mar 9, 2024 · a1e3191 · a1e3191
1 parent 380fdbf
commit a1e3191
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 16 deletions.
diff --git a/components/equipment/equipment.table.jsx b/components/equipment/equipment.table.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import Link from "next/link";
 import { Table } from 'semantic-ui-react'
+import _ from 'lodash'
 
 const ownerNames = {
   'chonghak': '총학생회',
@@ -10,23 +11,77 @@ const ownerNames = {
   'others': '그 외',
 }
 const EquipmentTable = ({ equipmentList }) => {
+  const [state, dispatch] = React.useReducer(exampleReducer, {
+    column: null,
+    data: equipmentList,
+    direction: null,
+  })
+  const { column, data, direction } = state
+
+  function exampleReducer(state, action) {
+    switch (action.type) {
+      case 'CHANGE_SORT':
+        if (state.column === action.column) {
+          return {
+            ...state,
+            data: state.data.slice().reverse(),
+            direction:
+              state.direction === 'ascending' ? 'descending' : 'ascending',
+          }
+        }
+
+        return {
+          column: action.column,
+          data: _.sortBy(state.data, [action.column]),
+          direction: 'ascending',
+        }
+      default:
+        throw new Error()
+    }
+  }
+
   return (
     <Table
-      celled selectable
+      celled selectable sortable
       textAlign={'center'}>
       <Table.Header>
         <Table.Row>
           <Table.HeaderCell>idx.</Table.HeaderCell>
-          <Table.HeaderCell>장비명</Table.HeaderCell>
-          <Table.HeaderCell>장비 소속</Table.HeaderCell>
-          <Table.HeaderCell>대여비</Table.HeaderCell>
-          <Table.HeaderCell>일일 한도 (분)</Table.HeaderCell>
-          <Table.HeaderCell>총 예약 갯수</Table.HeaderCell>
+          <Table.HeaderCell
+            sorted={column === 'name' ? direction : null}
+            onClick={() => dispatch({ type: 'CHANGE_SORT', column: 'name' })}
+          >
+            장비명
+          </Table.HeaderCell>
+          <Table.HeaderCell
+            sorted={column === 'equip_owner' ? direction : null}
+            onClick={() => dispatch({ type: 'CHANGE_SORT', column: 'equip_owner' })}
+          >
+            장비 소속
+          </Table.HeaderCell>
+          <Table.HeaderCell
+            sorted={column === 'fee' ? direction : null}
+            onClick={() => dispatch({ type: 'CHANGE_SORT', column: 'fee' })}
+          >
+            대여비
+          </Table.HeaderCell>
+          <Table.HeaderCell
+            sorted={column === 'max_minutes' ? direction : null}
+            onClick={() => dispatch({ type: 'CHANGE_SORT', column: 'max_minutes' })}
+          >
+            일일 한도 (분)
+          </Table.HeaderCell>
+          <Table.HeaderCell
+            sorted={column === 'total_reservation_count' ? direction : null}
+            onClick={() => dispatch({ type: 'CHANGE_SORT', column: 'total_reservation_count' })}
+          >
+            총 예약 갯수
+          </Table.HeaderCell>
         </Table.Row>
       </Table.Header>
       <Table.Body>
         {
-          equipmentList.map((equipment, idx) => (
+          data.map((equipment, idx) => (
             <Link href={`/equipment/update/${equipment.uuid}`} key={equipment.uuid}>
               <Table.Row>
                 <Table.Cell>{idx + 1}</Table.Cell>

diff --git a/components/place/place.table.jsx b/components/place/place.table.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import Link from "next/link";
 import { Table } from 'semantic-ui-react'
+import _ from 'lodash'
 
 const regionNames = {
   'STUDENT_HALL': '학생 회관',
@@ -11,24 +12,77 @@ const regionNames = {
 }
 
 const PlaceTable = ({ placeList }) => {
+  const [state, dispatch] = React.useReducer(exampleReducer, {
+    column: null,
+    data: placeList,
+    direction: null,
+  })
+  const { column, data, direction } = state
+
+  function exampleReducer(state, action) {
+    switch (action.type) {
+      case 'CHANGE_SORT':
+        if (state.column === action.column) {
+          return {
+            ...state,
+            data: state.data.slice().reverse(),
+            direction:
+              state.direction === 'ascending' ? 'descending' : 'ascending',
+          }
+        }
+
+        return {
+          column: action.column,
+          data: _.sortBy(state.data, [action.column]),
+          direction: 'ascending',
+        }
+      default:
+        throw new Error()
+    }
+  }
 
   return (
     <Table
-      celled selectable
+      celled selectable sortable
       textAlign={'center'}>
       <Table.Header>
         <Table.Row>
           <Table.HeaderCell>idx.</Table.HeaderCell>
-          <Table.HeaderCell>장소명</Table.HeaderCell>
-          <Table.HeaderCell>위치</Table.HeaderCell>
-          <Table.HeaderCell>지역</Table.HeaderCell>
-          <Table.HeaderCell>일일 한도 (분)</Table.HeaderCell>
-          <Table.HeaderCell>총 예약 갯수</Table.HeaderCell>
+          <Table.HeaderCell
+            sorted={column === 'name' ? direction : null}
+            onClick={() => dispatch({ type: 'CHANGE_SORT', column: 'name' })}
+          >
+            장소명
+          </Table.HeaderCell>
+          <Table.HeaderCell
+            sorted={column === 'location' ? direction : null}
+            onClick={() => dispatch({ type: 'CHANGE_SORT', column: 'location' })}
+          >
+            위치
+          </Table.HeaderCell>
+          <Table.HeaderCell
+            sorted={column === 'region' ? direction : null}
+            onClick={() => dispatch({ type: 'CHANGE_SORT', column: 'region' })}
+          >
+            지역
+          </Table.HeaderCell>
+          <Table.HeaderCell
+            sorted={column === 'max_minutes' ? direction : null}
+            onClick={() => dispatch({ type: 'CHANGE_SORT', column: 'max_minutes' })}
+          >
+            일일 한도 (분)
+          </Table.HeaderCell>
+          <Table.HeaderCell
+            sorted={column === 'total_reservation_count' ? direction : null}
+            onClick={() => dispatch({ type: 'CHANGE_SORT', column: 'total_reservation_count' })}
+          >
+            총 예약 갯수
+          </Table.HeaderCell>
         </Table.Row>
       </Table.Header>
       <Table.Body>
         {
-          placeList.map((place, idx) => (
+          data.map((place, idx) => (
             <Link href={`place/update/${place.uuid}`} key={place.uuid}>
               <Table.Row>
                 <Table.Cell>{idx + 1}</Table.Cell>

diff --git a/pages/equipment/index.jsx b/pages/equipment/index.jsx
@@ -38,7 +38,8 @@ const EquipmentPage = ({ equipmentList }) => {
         </div>
       </div>
       <p>
-        장비는 마지막 수정일 순서로 정렬되어 표시됩니다!
+        예약은 생성일 순서로 정렬되어 표시됩니다!<br/>
+        예약 내용을 수정하는 건 <b>불가능</b>합니다. 예약 승인/거절/삭제만 가능합니다.
       </p>
       <div>
         <EquipmentTable equipmentList={filteredEquipmentList}/>

diff --git a/pages/place/index.jsx b/pages/place/index.jsx
@@ -38,7 +38,8 @@ const PlacePage = ({ placeList }) => {
         </div>
       </div>
       <p>
-        장소는 마지막 수정일 순서로 정렬되어 표시됩니다!
+        퍼블릭 페이지에는 마지막 수정일 순서로 정렬되어 표시됩니다.<br/>
+        테이블 헤더를 클릭하여 정렬된 결과를 확인할 수 있습니다.
       </p>
       <div>
         <PlaceTable placeList={filteredPlaceList}/>