[d76b7ee] | 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; |
---|