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

(ui) Events dashboard layout

Browse Source
This commit is contained in:
Vincent 2023-06-30 16:41:13 +02:00 committed by Du Peng
parent e15bbf0b15
commit 9cc6a8a552
5 changed files with 98 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
app/frontend/src/javascript/components/events/event-reservation-item.tsx
View File

@ -30,10 +30,10 @@ export const EventReservationItem: React.FC<EventReservationItemProps> = ({ rese
const buildTicket = (ticket) => {
return (
<>
<div>{t('app.logged.event_reservation_item.NUMBER_of_NAME_places_reserved', { NUMBER: ticket.booked, NAME: ticket.price_category.name })}</div>
<label>{t('app.logged.event_reservation_item.NUMBER_of_NAME_places_reserved', { NUMBER: ticket.booked, NAME: ticket.price_category.name })}</label>
{reservation.booking_users_attributes.filter(u => u.event_price_category_id === ticket.event_price_category_id).map(u => {
return (
<div key={u.id}>{u.name}</div>
<p key={u.id} className='name'>{u.name}</p>
);
})}
</>
@ -58,25 +58,30 @@ export const EventReservationItem: React.FC<EventReservationItemProps> = ({ rese
return (
<div className="event-reservation-item">
<div className="event-reservation-item__event">
<div className="event-reservation-item__event__label">{t('app.logged.event_reservation_item.event')}</div>
<div className="event-reservation-item__event__title">{reservation.event_title}</div>
{reservation.event_type === 'family' &&
<span className="">{t('app.logged.event_reservation_item.family')}</span>
}
{reservation.event_type === 'nominative' &&
<span className="">{t('app.logged.event_reservation_item.nominative')}</span>
}
{reservation.event_pre_registration &&
<span className="">{t('app.logged.event_reservation_item.pre_registration')}</span>
}
<span>{formatDate()}</span>
<div className="infos">
<label>{t('app.logged.event_reservation_item.event')}</label>
<p>{reservation.event_title}</p>
<span className='date'>{formatDate()}</span>
</div>
<div className="types">
{/* {reservation.event_type === 'family' &&
<span className="">{t('app.logged.event_reservation_item.family')}</span>
}
{reservation.event_type === 'nominative' &&
<span className="">{t('app.logged.event_reservation_item.nominative')}</span>
} */}
{reservation.event_pre_registration &&
// eslint-disable-next-line fabmanager/no-bootstrap, fabmanager/no-utilities
<span className="badge text-xs bg-info">{t('app.logged.event_reservation_item.pre_registration')}</span>
}
</div>
</div>
<div className="event-reservation-item__reservation">
<div>
<div>{t('app.logged.event_reservation_item.NUMBER_normal_places_reserved', { NUMBER: reservation.nb_reserve_places })}</div>
<div className='list'>
<label>{t('app.logged.event_reservation_item.NUMBER_normal_places_reserved', { NUMBER: reservation.nb_reserve_places })}</label>
{reservation.booking_users_attributes.filter(u => !u.event_price_category_id).map(u => {
return (
<div key={u.id}>{u.name}</div>
<p key={u.id} className='name'>{u.name}</p>
);
})}
{reservation.tickets.map(ticket => {
@ -84,9 +89,9 @@ export const EventReservationItem: React.FC<EventReservationItemProps> = ({ rese
})}
</div>
{reservation.event_pre_registration &&
<div>
<div>{t('app.logged.event_reservation_item.tracking_your_reservation')}</div>
{preRegistrationStatus()}
<div className='status'>
<label>{t('app.logged.event_reservation_item.tracking_your_reservation')}</label>
<p className="">{preRegistrationStatus()}</p>
</div>
}
</div>

8
app/frontend/src/stylesheets/application.scss
View File

@ -47,11 +47,13 @@
@import "modules/dashboard/reservations/prepaid-packs-panel";
@import "modules/dashboard/reservations/reservations-dashboard";
@import "modules/dashboard/reservations/reservations-panel";
@import "modules/events/event";
@import "modules/events/events";
@import "modules/events/event-form";
@import "modules/events/event-reservation";
@import "modules/events/event";
@import "modules/events/events-dashboard";
@import "modules/events/events-settings";
@import "modules/events/events";
@import "modules/events/update-recurrent-modal";
@import "modules/events/events-settings.scss";
@import "modules/family-account/child-form";
@import "modules/family-account/child-item";
@import "modules/family-account/children-dashboard";

60
app/frontend/src/stylesheets/modules/events/event-reservation.scss Normal file
View File

@ -0,0 +1,60 @@
.event-reservation {
display: flex;
flex-direction: column;
gap: 1.6rem;
&-item {
padding: 1.6rem 1.6rem 0;
display: flex;
flex-direction: column;
background-color: var(--gray-soft-lightest);
border-radius: var(--border-radius);
label {
margin: 0;
@include text-xs;
color: var(--gray-hard-light);
}
p {
margin: 0;
@include text-base(600);
}
.date { @include text-sm; }
&__event {
padding-bottom: 1.2rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.6rem;
border-bottom: 1px solid var(--gray-soft-dark);
}
&__reservation {
display: flex;
& > div {
padding: 1.2rem 1.6rem 1.2rem 0;
flex: 1;
}
.list {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
label:not(:first-of-type) {
margin-top: 1rem;
}
}
.name { @include text-sm(500); }
.status {
padding-left: 1.6rem;
display: flex;
flex-direction: column;
justify-content: center;
border-left: 1px solid var(--gray-soft-dark);
}
}
}
}

5
app/frontend/src/stylesheets/modules/events/events-dashboard.scss Normal file
View File

@ -0,0 +1,5 @@
.events-dashboard {
max-width: 1600px;
margin: 0 auto;
padding-bottom: 6rem;
}

6
app/frontend/templates/dashboard/events.html
View File

@ -8,7 +8,7 @@
</section>
<div class="row no-gutter">
<div class="row events-dashboard">
<div class="col-md-6">
<div class="widget panel b-a m m-t-lg">
@ -16,8 +16,8 @@
<h4 class="text-u-c"><i class="fa fa-tag m-r-xs"></i> {{ 'app.logged.dashboard.events.your_next_events' | translate }}</h4>
</div>
<div class="widget-content bg-light wrapper r-b">
<div class="list-unstyled" ng-if="user.events_reservations.length > 0">
<div ng-repeat="r in user.events_reservations | eventsReservationsFilter:'future'" class="m-b">
<div class="list-unstyled event-reservation" ng-if="user.events_reservations.length > 0">
<div ng-repeat="r in user.events_reservations | eventsReservationsFilter:'future'">
<event-reservation-item reservation="r"></event-reservation-item>
</div>
</div>