1 | import React, {useEffect, useState} from 'react'
|
---|
2 | import {Button, Modal, DatePicker, List, notification} from "antd";
|
---|
3 | import AddNewReservation from "./AddNewReservation";
|
---|
4 | import moment from 'moment'
|
---|
5 | import axios from "axios";
|
---|
6 | import env from '../env'
|
---|
7 |
|
---|
8 | const {RangePicker} = DatePicker
|
---|
9 |
|
---|
10 | const Reservations = ({}) => {
|
---|
11 | const [newReservationModal, setNewReservationModal] = useState(false);
|
---|
12 | const [saveModalLoading, setSaveModalLoading] = useState(false);
|
---|
13 | const [date, setDate] = useState([moment().startOf('day'), moment().add(24,'hours')]);
|
---|
14 | const [reservations, setReservations] = useState([])
|
---|
15 | const [loadingReservations, setLoadingReservations] = useState(true)
|
---|
16 |
|
---|
17 | useEffect(()=> {
|
---|
18 | getReservations()
|
---|
19 | },[])
|
---|
20 | const getReservations = () =>{
|
---|
21 | setLoadingReservations(true)
|
---|
22 | setDate(date => {
|
---|
23 | axios.get(env.api + 'Reservations', {
|
---|
24 | params: {
|
---|
25 | from: date[0].format('YYYY-MM-DDThh:mm:ss') + 'Z',
|
---|
26 | to: date[1].format('YYYY-MM-DDThh:mm:ss') + 'Z'
|
---|
27 | }, headers: {Authorization: sessionStorage.getItem('Auth')}
|
---|
28 | })
|
---|
29 | .then(res => {
|
---|
30 | setReservations(res.data);
|
---|
31 | console.log(res.data)
|
---|
32 | setLoadingReservations(false)
|
---|
33 | }).catch(er => {
|
---|
34 | setLoadingReservations(false)
|
---|
35 | notification['error']({
|
---|
36 | message: 'Се случи проблем при додавање резервација. Ве молиме пробајте повторно подоцна',
|
---|
37 | });
|
---|
38 |
|
---|
39 | console.log(er);
|
---|
40 | });
|
---|
41 | return date;
|
---|
42 | })
|
---|
43 | }
|
---|
44 | const dateChanged = (cng) => {
|
---|
45 | setDate(cng)
|
---|
46 | getReservations()
|
---|
47 | }
|
---|
48 | const changeReservationStatus = (id, newStatus) => {
|
---|
49 | console.log(id)
|
---|
50 | axios.put(env.api + 'Reservations/'+id,{}, {
|
---|
51 | params: {
|
---|
52 | status: newStatus
|
---|
53 | }, headers: {Authorization: sessionStorage.getItem('Auth')}
|
---|
54 | }).then(res => {
|
---|
55 | getReservations()
|
---|
56 | }).catch(er => {
|
---|
57 | notification['error']({
|
---|
58 | message: 'Се случи проблем при менување резервација. Ве молиме пробајте повторно подоцна',
|
---|
59 | });
|
---|
60 | console.log(er);
|
---|
61 | });
|
---|
62 | }
|
---|
63 | const ReservationType = [ 'Кратко', 'Долго', 'Настан' ];
|
---|
64 | const ReservationPlace = [ 'Внатре', 'Надвор' ];
|
---|
65 | const ReservationStatus = [ 'New', 'Confirmed', 'Cancelled' ];
|
---|
66 | return(
|
---|
67 | <div style={{padding:'20px'}}>
|
---|
68 | <div style={{
|
---|
69 | width: '100%',
|
---|
70 | backgroundColor: 'white',
|
---|
71 | padding: '20px',
|
---|
72 | height:'75px',
|
---|
73 | border: '1px solid lightgray'
|
---|
74 | }} id={'expandMain'}>
|
---|
75 | <h2 style={{float: 'left'}}>Резервации</h2>
|
---|
76 | <Button style={{float:'right'}} type={'primary'} onClick={()=>setNewReservationModal(true)}>Нова резервација</Button>
|
---|
77 | </div>
|
---|
78 | <div style={{marginTop:'20px', backgroundColor:'white'}}>
|
---|
79 | <div style={{
|
---|
80 | width: '100%',
|
---|
81 | height:'75px',
|
---|
82 | backgroundColor: 'white',
|
---|
83 | padding: '20px',
|
---|
84 | border: '1px solid lightgray'
|
---|
85 | }} >
|
---|
86 | <h3 style={{float: 'left'}}>Сите резервации</h3>
|
---|
87 | <RangePicker
|
---|
88 | onChange={dateChanged}
|
---|
89 | style={{float:'right'}}
|
---|
90 | ranges={{
|
---|
91 | 'Следни 24 часа': [moment().startOf('day'), moment().add(24,'hours')],
|
---|
92 | 'Овој месец': [moment().startOf('month'), moment().endOf('month')],
|
---|
93 | 'Последни 30 дена': [moment().subtract(30, 'days'), moment()],
|
---|
94 | }}
|
---|
95 | defaultValue={date}
|
---|
96 | />
|
---|
97 | </div>
|
---|
98 | <List loading={loadingReservations} dataSource={reservations} itemLayout={'horizontal'}
|
---|
99 | renderItem={item => (
|
---|
100 | <List.Item
|
---|
101 | actions={
|
---|
102 | item.reservationStatus == 0 ?
|
---|
103 | [<a onClick={()=>changeReservationStatus(item.id,ReservationStatus[1])}>Прифати</a>, <a style={{color:'red'}} onClick={()=>changeReservationStatus(item.id,ReservationStatus[2])}>Отфрли</a>]
|
---|
104 | : item.reservationStatus == 1 ? [<span style={{color:'green'}}>Прифатено</span>] : [<span style={{color:'red'}}>Отфрлено</span>]}>
|
---|
105 | <div style={{display:'flex',flexDirection:'row',justifyContent:'space-between',width:'100%', padding:'10px'}}>
|
---|
106 | <div style={{textAlign:'start', width:'200px'}}>
|
---|
107 | <div><b>Име:</b> {item.contactName}</div>
|
---|
108 | <div><b>Број:</b> {item.contactNumber}</div>
|
---|
109 | </div>
|
---|
110 | <div>
|
---|
111 | <div><b>Луѓе:</b> {item.persons}</div>
|
---|
112 | <div>{ReservationPlace[item.reservationPlace]}, {ReservationType[item.reservationType]}</div>
|
---|
113 | </div>
|
---|
114 | <div>
|
---|
115 | <div style={{marginTop:'10px'}}>{moment(item.startDate).format('hh:mm DD/MM/YY')}</div>
|
---|
116 | </div>
|
---|
117 | </div>
|
---|
118 | </List.Item>
|
---|
119 | )}/>
|
---|
120 | </div>
|
---|
121 | <Modal
|
---|
122 | style={{top: 20}}
|
---|
123 | width={'700px'}
|
---|
124 | title="Нова Резервација"
|
---|
125 | footer={[
|
---|
126 | <Button form="newResForm" key="submit" htmlType="submit" type={'primary'} loading={saveModalLoading}>
|
---|
127 | Прати
|
---|
128 | </Button>
|
---|
129 | ]}
|
---|
130 | onCancel={()=>setNewReservationModal(false)}
|
---|
131 | visible={newReservationModal}>
|
---|
132 | <AddNewReservation setModalSaveLoading={setSaveModalLoading} setModalVisible={setNewReservationModal} fetchData={getReservations}/>
|
---|
133 | </Modal>
|
---|
134 | </div>
|
---|
135 | )
|
---|
136 | }
|
---|
137 |
|
---|
138 | export default Reservations; |
---|