@@ -14,8 +14,10 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle';
1414import CancelIcon from '@mui/icons-material/Cancel' ;
1515import axios from 'axios' ;
1616import { waitings , res } from './Waiting' ;
17+ import { useEffect , useState } from "react" ;
1718
1819import { Console } from 'console' ;
20+ import { tokenToString } from 'typescript' ;
1921
2022interface Column {
2123 id : 'waiting_id' | 'name' | 'people' | 'phone_num' ;
@@ -25,15 +27,18 @@ interface Column {
2527 format ?: ( value : number ) => string ;
2628}
2729
30+
2831const columns : readonly Column [ ] = [
29- { id : 'waiting_id' , label : '순번' , minWidth : 30 } ,
30- { id : 'name' , label : '예약자' , minWidth : 30 } ,
32+
33+ { id : 'waiting_id' , label : '순번' , minWidth : 30 , align : 'center' , } , //(count++).toString()
34+ { id : 'name' , label : '예약자' , minWidth : 30 , align : 'center' } ,
3135 {
3236 id : 'people' ,
3337 label : '인원 수' ,
3438 minWidth : 30 ,
3539 align : 'center' ,
3640 } ,
41+
3742 {
3843 id : 'phone_num' ,
3944 label : '휴대폰 번호' ,
@@ -42,46 +47,78 @@ const columns: readonly Column[] = [
4247 } ,
4348] ;
4449
45- export default function ListTable ( { waiting} :{ waiting :waitings [ ] } ) {
50+ export default function ListTable ( { waiting , setTemp} :{ waiting :waitings [ ] | undefined ; setTemp :React . Dispatch < React . SetStateAction < res | undefined > > } ) {
51+ let abc : number ;
4652 const [ page , setPage ] = React . useState ( 0 ) ;
47- const [ rowsPerPage , setRowsPerPage ] = React . useState ( 100 ) ;
48- const [ rows , setRows ] = React . useState < waitings [ ] > ( waiting ) ;
53+ const [ rowsPerPage , setRowsPerPage ] = React . useState ( 5 ) ;
54+
4955 const handleChangePage = ( event : unknown , newPage : number ) => {
5056 setPage ( newPage )
51- console . log ( rows )
57+ console . log ( waiting )
5258 } ;
5359
54- function setrowData ( ) {
55- setRows ( rows )
56- }
57-
5860 const handleChangeRowsPerPage = ( event : React . ChangeEvent < HTMLInputElement > ) => {
5961 setRowsPerPage ( + event . target . value ) ;
6062 setPage ( 0 ) ;
6163 } ;
62-
64+
65+ //대기목록 MUI 안에 있는 호출 버튼
66+ const Call = ( index : number ) => {
67+ if ( waiting !== undefined ) {
68+ axios . post ( 'http://15.164.28.246:8000/api/v1/stores/notifications/' , {
69+ waiting_id : waiting [ index ] . waiting_id
70+ } ,
71+ {
72+ headers : { Authorization : localStorage . getItem ( 'accessToken' ) }
73+ } )
74+ . then ( ( response ) => {
75+ console . log ( '성공' )
76+ } )
77+ . catch ( ( error ) => {
78+ console . log ( '호출 실패' ) ;
79+ } ) ;
80+ } }
81+
6382 //대기목록 MUI 안에 있는 입장완료 버튼
6483 const Start = ( index : number ) => {
65- axios . patch ( 'http://localhost:8000/api/v1/stores/waitings/' , {
66- waiting_id : rows [ index ] . waiting_id
67- } )
68- . then ( ( res ) => setRows ( res . data . waiting ) ) //55행 이용, res로 넘어온 정보저장 해야대, 그렇기에 setRows가
69- . catch ( ( error ) => {
70- console . log ( 'Error!' ) ;
71- } ) ;
72- }
73-
74- //대기목록 MUI 안에 있는 대기취소 버튼
75- const waitingCancel = ( index : number ) => {
76- axios . patch < res > ( 'http://localhost:8000/api/v1//stores/cancellations/' , {
77- waiting_id : rows [ index ] . waiting_id
78- } )
79- . then ( ( res ) => setRows ( res . data . waiting ) )
84+ if ( waiting !== undefined ) {
85+ axios . patch ( 'http://15.164.28.246:8000/api/v1/stores/waitings/' , {
86+ waiting_id : waiting [ index ] . waiting_id
87+ } ,
88+ {
89+ headers : { Authorization : localStorage . getItem ( 'accessToken' ) }
90+ }
91+ )
92+ . then ( ( response ) => {
93+ console . log ( '[입장완료]' + localStorage . getItem ( 'accessToken' ) )
94+ } )
8095 . catch ( ( error ) => {
8196 console . log ( 'Error!' ) ;
8297 } ) ;
83- }
84-
98+ } }
99+
100+ //대기목록 MUI 안에 있는 대기취소 버튼
101+ const waitingCancel = ( index : number ) => {
102+ if ( waiting != undefined ) {
103+ axios . patch < res > ( 'http://15.164.28.246:8000/api/v1/stores/cancellations/' , {
104+ waiting_id : waiting [ index ] . waiting_id
105+ } ,
106+ {
107+ headers : { Authorization : localStorage . getItem ( 'accessToken' ) }
108+ }
109+ )
110+ . then ( ( response ) => {
111+ //민아) 행 삭제 시도
112+ // setTemp(pre => ({...pre,waiting:[...response.data.waiting]}));
113+ console . log ( '[대기강제취소]' + localStorage . getItem ( 'accessToken' ) )
114+ } )
115+ . catch ( ( error ) => {
116+ console . log ( 'Error!' ) ;
117+ } ) ;
118+ } }
119+
120+
121+
85122 return (
86123 < Paper className = 'tableStyle' >
87124 < TableContainer sx = { { maxHeight : 500 } } >
@@ -104,26 +141,33 @@ export default function ListTable({waiting}:{waiting:waitings[]}) {
104141 </ TableHead >
105142 < TableBody >
106143
107- { rows
108- . slice ( page * rowsPerPage , page * rowsPerPage + rowsPerPage )
109- . map ( ( row :any ) => {
144+
145+ { waiting ?. slice ( page * rowsPerPage , page * rowsPerPage + rowsPerPage )
146+ . map ( ( row :any , index :number ) => {
147+
148+ if ( waiting != undefined ) {
149+ abc = waiting . length
150+ }
151+
110152 return (
111153 < TableRow hover role = "checkbox" tabIndex = { - 1 } key = { row . waiting_id } >
112- { columns . map ( ( column :any ) => {
113- console . log ( rows )
154+ { columns . map ( ( column :any , i : number ) => {
155+ // console.log(waiting )
114156 const value = row [ column . id ] ;
115-
157+
116158 return (
117159 < TableCell key = { column . id } align = { column . align } >
118- { column . format && typeof value === 'number'
119- ? column . format ( value )
120- : value }
160+
161+ { column ?. id === 'waiting_id'
162+ ? ( page * rowsPerPage ) + ( index + 1 ) : value }
163+
164+
121165 </ TableCell >
122166 ) ;
123167 } ) }
124- < TableCell align = "center" > < IconButton > < NotificationsActiveIcon color = "warning" /> </ IconButton > </ TableCell >
125- < TableCell onClick = { ( ) => Start ( row . waiting_id ) } align = "center" > < IconButton > < CheckCircleIcon color = "success" /> </ IconButton > </ TableCell >
126- < TableCell onClick = { ( ) => waitingCancel ( row . waiting_id ) } align = "center" > < IconButton > < CancelIcon color = "error" /> </ IconButton > </ TableCell >
168+ < TableCell onClick = { ( ) => Call ( index ) } align = "center" > < IconButton > < NotificationsActiveIcon color = "warning" /> </ IconButton > </ TableCell >
169+ < TableCell onClick = { ( ) => Start ( index ) } align = "center" > < IconButton > < CheckCircleIcon color = "success" /> </ IconButton > </ TableCell >
170+ < TableCell onClick = { ( ) => waitingCancel ( index ) } align = "center" > < IconButton > < CancelIcon color = "error" /> </ IconButton > </ TableCell >
127171 </ TableRow >
128172 ) ;
129173 } ) }
@@ -134,12 +178,17 @@ export default function ListTable({waiting}:{waiting:waitings[]}) {
134178 < TablePagination
135179 rowsPerPageOptions = { [ 5 , 10 , 25 ] }
136180 component = "div"
137- count = { rows . length }
181+ count = { waiting ? .length as number }
138182 rowsPerPage = { rowsPerPage }
139183 page = { page }
140184 onPageChange = { handleChangePage }
141185 onRowsPerPageChange = { handleChangeRowsPerPage }
142186 />
143187 </ Paper >
144188 ) ;
145- }
189+ }
190+
191+ ListTable . defaultProps = {
192+ waiting :[ ]
193+ }
194+
0 commit comments