rooty/fab-manager
1
0
Fork 0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2024-12-01 12:24:28 +01:00
Code Issues Releases Activity

(feat) do not show passed slots in futur reservations if it has mixed slots

Browse Source
This commit is contained in:
Sylvain 2022-06-29 10:18:16 +02:00
parent 9b601bc438
commit 2ad842a93b
1 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/frontend/src/javascript/components/dashboard/reservations/reservations-panel.tsx
View File

@ -1,6 +1,6 @@
import React, { ReactNode, useEffect, useState } from 'react';
import { FabPanel } from '../../base/fab-panel';
import { Reservation } from '../../../models/reservation';
import { Reservation, ReservationSlot } from '../../../models/reservation';
import ReservationAPI from '../../../api/reservation';
import { useTranslation } from 'react-i18next';
import moment from 'moment';
@ -35,13 +35,18 @@ const ReservationsPanel: React.FC<SpaceReservationsProps> = ({ userId, onError,
*/
const reservationsByDate = (state: 'passed' | 'futur'): Array<Reservation> => {
return reservations.filter(r => {
return !!r.slots_attributes.find(s => {
return (state === 'passed' && moment(s.start_at).isBefore()) ||
(state === 'futur' && moment(s.start_at).isAfter());
});
return !!r.slots_attributes.find(s => filterSlot(s, state));
});
};
/**
* Check if the given slot if passed of futur
*/
const filterSlot = (slot: ReservationSlot, state: 'passed' | 'futur'): boolean => {
return (state === 'passed' && moment(slot.start_at).isBefore()) ||
(state === 'futur' && moment(slot.start_at).isAfter());
};
/**
* Panel title
*/
@ -67,13 +72,13 @@ const ReservationsPanel: React.FC<SpaceReservationsProps> = ({ userId, onError,
/**
* Render the reservation in a user-friendly way
*/
const renderReservation = (reservation: Reservation): ReactNode => {
const renderReservation = (reservation: Reservation, state: 'passed' | 'futur'): ReactNode => {
return (
<li key={reservation.id} className="reservation">
<a className={`reservation-title ${details[reservation.id] ? 'clicked' : ''}`} onClick={toggleDetails(reservation.id)}>{reservation.reservable.name}</a>
{details[reservation.id] && <FabPopover title={t('app.logged.dashboard.reservations.reservations_panel.slots_details')}>
{reservation.slots_attributes.map(
(slot) => <span key={slot.id} className="slot-details">
{reservation.slots_attributes.filter(s => filterSlot(s, state)).map(
slot => <span key={slot.id} className="slot-details">
{FormatLib.date(slot.start_at)}, {FormatLib.time(slot.start_at)} - {FormatLib.time(slot.end_at)}
</span>
)}
@ -86,11 +91,11 @@ const ReservationsPanel: React.FC<SpaceReservationsProps> = ({ userId, onError,
<FabPanel className="reservations-panel" header={header()}>
<h4>{t('app.logged.dashboard.reservations.reservations_panel.upcoming')}</h4>
<ul>
{reservationsByDate('futur').map(r => renderReservation(r))}
{reservationsByDate('futur').map(r => renderReservation(r, 'futur'))}
</ul>
<h4>{t('app.logged.dashboard.reservations.reservations_panel.passed')}</h4>
<ul>
{reservationsByDate('passed').map(r => renderReservation(r))}
{reservationsByDate('passed').reverse().map(r => renderReservation(r, 'passed'))}
</ul>
</FabPanel>
);