(feat) re-make event reservation item view

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

@@ -0,0 +1,97 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { react2angular } from 'react2angular';
+import { Reservation } from '../../models/reservation';
+import FormatLib from '../../lib/format';
+import { IApplication } from '../../models/application';
+
+declare const Application: IApplication;
+
+interface EventReservationItemProps {
+  reservation: Reservation;
+}
+
+/**
+ * event reservation item component
+ */
+export const EventReservationItem: React.FC<EventReservationItemProps> = ({ reservation }) => {
+  const { t } = useTranslation('logged');
+
+  /**
+   * Return the formatted localized date of the event
+   */
+  const formatDate = (): string => {
+    return `${FormatLib.date(reservation.start_at)} ${FormatLib.time(reservation.start_at)} - ${FormatLib.time(reservation.end_at)}`;
+  };
+
+  /**
+   * Build the ticket for event price category user reservation
+   */
+  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>
+        {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>
+          );
+        })}
+      </>
+    );
+  };
+
+  /**
+   * Return the pre-registration status
+   */
+  const preRegistrationStatus = () => {
+    if (!reservation.validated_at && !reservation.canceled_at && !reservation.is_paid) {
+      return t('app.logged.event_reservation_item.in_the_process_of_validation');
+    } else if (reservation.validated_at && !reservation.canceled_at && !reservation.is_paid) {
+      return t('app.logged.event_reservation_item.settle_your_payment');
+    } else if (reservation.is_paid && !reservation.canceled_at) {
+      return t('app.logged.event_reservation_item.paid');
+    } else if (reservation.canceled_at) {
+      return t('app.logged.event_reservation_item.paid');
+    }
+  };
+
+  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>
+      <div className="event-reservation-item__reservation">
+        <div>
+          <div>{t('app.logged.event_reservation_item.NUMBER_normal_places_reserved', { NUMBER: reservation.nb_reserve_places })}</div>
+          {reservation.booking_users_attributes.filter(u => !u.event_price_category_id).map(u => {
+            return (
+              <div key={u.id}>{u.name}</div>
+            );
+          })}
+          {reservation.tickets.map(ticket => {
+            return buildTicket(ticket);
+          })}
+        </div>
+        {reservation.event_pre_registration &&
+          <div>
+            <div>{t('app.logged.event_reservation_item.tracking_your_reservation')}</div>
+            {preRegistrationStatus()}
+          </div>
+        }
+      </div>
+    </div>
+  );
+};
+
+Application.Components.component('eventReservationItem', react2angular(EventReservationItem, ['reservation']));

app/frontend/src/javascript/models/reservation.ts

@@ -30,7 +30,7 @@ export interface Reservation {
     name: string
   },
   nb_reserve_places?: number,
-  tickets_attributes?: {
+  tickets_attributes?: Array<{
     event_price_category_id: number,
     event_price_category?: {
       id: number,
@@ -40,18 +40,38 @@ export interface Reservation {
         name: string
       }
     },
-    booked: boolean,
+    booked: number,
     created_at?: TDateISO
+  }>,
+  tickets?: Array<{
+    event_price_category_id: number,
+    event_price_category?: {
+      id: number,
+      price_category_id: number,
+      price_category: {
+        id: number,
+        name: string
+      }
     },
+    booked: number,
+    created_at?: TDateISO
+  }>,
   total_booked_seats?: number,
   created_at?: TDateISO,
-  booking_users_attributes?: {
+  booking_users_attributes?: Array<{
     id: number,
     name: string,
     event_price_category_id: number,
     booked_id: number,
     booked_type: string,
-  }
+  }>,
+  start_at: TDateISO,
+  end_at: TDateISO,
+  event_type?: string,
+  event_title?: string,
+  event_pre_registration?: boolean
+  validated_at?: TDateISO,
+  is_paid?: boolean,
 }
 
 export interface ReservationIndexFilter extends ApiFilter {

app/frontend/templates/admin/members/edit.html

@@ -207,29 +207,11 @@
                 <h4 class="text-u-c"><i class="fa fa-tag m-r-xs"></i> {{ 'app.admin.members_edit.next_events' | translate }}</h4>
               </div>
               <div class="widget-content bg-light wrapper r-b">
-                <ul class="list-unstyled" ng-if="user.events_reservations.length > 0">
-                  <li ng-repeat="r in user.events_reservations | eventsReservationsFilter:'future'" class="m-b">
-                    <a class="font-sbold" ui-sref="app.public.events_show({id: r.reservable.id})">{{r.reservable.title}}</a> - <span class="label label-warning wrapper-sm">{{ r.start_at | amDateFormat:'LLL' }} - {{ r.end_at | amDateFormat:'LT' }}</span>
-                    <span ng-if="r.nb_reserve_places > 0">
-                      <br/>
-                      <span translate translate-values="{ NUMBER: r.nb_reserve_places }">{{ 'app.admin.members_edit.NUMBER_full_price_tickets_reserved' }}</span>
-                      <span ng-repeat="bu in r.booking_users_attributes | filter:{event_price_category_id:null}">
-                        <br/>
-                        <span ng-if="bu.booked_type !== 'User'">{{bu.name}}</span>
-                        <a ui-sref="app.logged.members_show({id: bu.booked_id})" ng-if="bu.booked_type === 'User'">{{bu.name}}</a>
-                      </span>
-                    </span>
-                    <span ng-repeat="ticket in r.tickets">
-                      <br/>
-                      <span translate translate-values="{ NUMBER: ticket.booked, NAME: ticket.price_category.name }">{{ 'app.admin.members_edit.NUMBER_NAME_tickets_reserved' }}</span>
-                      <span ng-repeat="bu in r.booking_users_attributes | filter:{event_price_category_id:ticket.event_price_category_id}">
-                        <br/>
-                        <span ng-if="bu.booked_type !== 'User'">{{bu.name}}</span>
-                        <a ui-sref="app.logged.members_show({id: bu.booked_id})" ng-if="bu.booked_type === 'User'">{{bu.name}}</a>
-                      </span>
-                    </span>
-                  </li>
-                </ul>
+                <div class="list-unstyled" ng-if="user.events_reservations.length > 0">
+                  <div ng-repeat="r in user.events_reservations | eventsReservationsFilter:'future'" class="m-b">
+                    <event-reservation-item reservation="r"></event-reservation-item>
+                  </div>
+                </div>
                 <div ng-if="(user.events_reservations | eventsReservationsFilter:'future').length == 0" translate>{{ 'app.admin.members_edit.no_upcoming_events' }}</div>
               </div>
             </div>
@@ -240,11 +222,11 @@
                 <h4 class="text-u-c"><i class="fa fa-tag m-r-xs"></i> {{ 'app.admin.members_edit.passed_events' | translate }}</h4>
               </div>
               <div class="widget-content bg-light auto wrapper r-b">
-                <ul class="list-unstyled" ng-if="user.events_reservations.length > 0">
-                  <li ng-repeat="r in user.events_reservations | eventsReservationsFilter:'passed'" class="m-b">
-                    <span class="font-sbold">{{r.reservable.title}}</span> - <span class="label label-info text-white wrapper-sm">{{ r.start_at | amDateFormat:'LLL' }} - {{ r.end_at | amDateFormat:'LT' }}</span>
-                  </li>
-                </ul>
+                <div class="list-unstyled" ng-if="user.events_reservations.length > 0">
+                  <div ng-repeat="r in user.events_reservations | eventsReservationsFilter:'passed'" class="m-b">
+                    <event-reservation-item reservation="r"></event-reservation-item>
+                  </div>
+                </div>
                 <div ng-if="(user.events_reservations | eventsReservationsFilter:'passed').length == 0" translate>{{ 'app.admin.members_edit.no_passed_events' }}</div>
               </div>
             </div>

app/frontend/templates/dashboard/events.html

@@ -16,33 +16,11 @@
           <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">
-          <ul class="list-unstyled" ng-if="user.events_reservations.length > 0">
-            <li ng-repeat="r in user.events_reservations | eventsReservationsFilter:'future'" class="m-b">
-              <a class="font-sbold" ui-sref="app.public.events_show({id: r.reservable.id})">{{r.reservable.title}}</a>
-              -
-              <span class="label label-warning wrapper-sm">{{ r.start_at | amDateFormat:'LLL' }} - {{ r.end_at | amDateFormat:'LT' }}</span>
-              <br/>
-              <span translate
-                    translate-values="{NUMBER: r.nb_reserve_places}">
-                {{ 'app.logged.dashboard.events.NUMBER_normal_places_reserved' }}
-              </span>
-              <span ng-repeat="bu in r.booking_users_attributes | filter:{event_price_category_id:null}">
-                <br/>
-                <span>{{bu.name}}</span>
-              </span>
-              <span ng-repeat="ticket in r.tickets">
-                <br/>
-                <span translate
-                      translate-values="{NUMBER: ticket.booked, NAME: ticket.price_category.name}">
-                  {{ 'app.logged.dashboard.events.NUMBER_of_NAME_places_reserved' }}
-                </span>
-                <span ng-repeat="bu in r.booking_users_attributes | filter:{event_price_category_id:ticket.event_price_category_id}">
-                  <br/>
-                  <span>{{bu.name}}</span>
-                </span>
-              </span>
-            </li>
-          </ul>
+          <div class="list-unstyled" ng-if="user.events_reservations.length > 0">
+            <div ng-repeat="r in user.events_reservations | eventsReservationsFilter:'future'" class="m-b">
+              <event-reservation-item reservation="r"></event-reservation-item>
+            </div>
+          </div>
           <div ng-if="(user.events_reservations | eventsReservationsFilter:'future').length == 0" translate>{{ 'app.logged.dashboard.events.no_events_to_come' }}</div>
         </div>
       </div>
@@ -53,11 +31,11 @@
           <h4 class="text-u-c"><i class="fa fa-tag m-r-xs"></i> {{ 'app.logged.dashboard.events.your_previous_events' | translate }}</h4>
         </div>
         <div class="widget-content bg-light auto wrapper r-b">
-          <ul class="list-unstyled" ng-if="user.events_reservations.length > 0">
-            <li ng-repeat="r in user.events_reservations | eventsReservationsFilter:'passed'" class="m-b">
-              <span class="font-sbold">{{r.reservable.title}}</span> - <span class="label label-info text-white wrapper-sm">{{ r.start_at | amDateFormat:'LLL' }} - {{ r.end_at | amDateFormat:'LT' }}</span>
-            </li>
-          </ul>
+          <div class="list-unstyled" ng-if="user.events_reservations.length > 0">
+            <div ng-repeat="r in user.events_reservations | eventsReservationsFilter:'passed'" class="m-b">
+              <event-reservation-item reservation="r"></event-reservation-item>
+            </div>
+          </div>
           <div ng-if="(user.events_reservations | eventsReservationsFilter:'passed').length == 0" translate>{{ 'app.logged.dashboard.events.no_passed_events' }}</div>
         </div>
       </div>

app/views/api/members/show.json.jbuilder

@@ -85,6 +85,10 @@ json.events_reservations @member.reservations.where(reservable_type: 'Event').jo
   json.reservable sr.reservation.reservable
   json.reservable_type 'Event'
   json.event_type sr.reservation.reservable.event_type
+  json.event_title sr.reservation.reservable.title
+  json.event_pre_registration sr.reservation.reservable.pre_registration
+  json.validated_at sr.validated_at
+  json.is_paid sr.reservation.invoice_items.count.positive?
   json.canceled_at sr.canceled_at
   json.booking_users_attributes sr.reservation.booking_users.order(booked_type: :desc) do |bu|
     json.id bu.id

config/locales/app.logged.en.yml

@@ -37,6 +37,18 @@ en:
           edit_profile: "Change my data"
           after_edition_info_html: "Once your data are up to date, <strong>click on the synchronization button below</strong>, or <strong>disconnect then reconnect</strong> for your changes to take effect."
           sync_profile: "Sync my profile"
+      event_reservation_item:
+        event: "Event"
+        family: "Family"
+        nominative: "Nominative"
+        pre_registration: "Pre-registration"
+        NUMBER_normal_places_reserved: "{NUMBER} {NUMBER, plural, =0{} =1{normal place reserved} other{normal places reserved}}"
+        NUMBER_of_NAME_places_reserved: "{NUMBER} {NUMBER, plural, =0{} =1{of {NAME} place reserved} other{of {NAME} places reserved}}"
+        tracking_your_reservation: "Tracking your reservation"
+        in_the_process_of_validation: "In the process of validation"
+        settle_your_payment: "Come to the reception desk to settle"
+        paid: "Paid"
+        canceled: "Canceled"
       dashboard:
         #dashboard: public profile
         profile:

config/locales/app.logged.fr.yml

@@ -37,6 +37,18 @@ fr:
           edit_profile: "Modifier mes données"
           after_edition_info_html: "Une fois que vos données sont à jour, <strong>cliquez sur le bouton de synchronisation ci-dessous</strong>, ou <strong>déconnectez-vous puis reconnectez-vous</strong> pour que vos changements prennent effet."
           sync_profile: "Synchroniser mon profil"
+      event_reservation_item:
+        event: 'Événement'
+        family: 'Famille'
+        nominative: 'Nominatif'
+        pre_registration: 'Pré-inscription'
+        NUMBER_normal_places_reserved: "{NUMBER} {NUMBER, plural, =0{} =1{place normale réservée} other{places normales réservées}}"
+        NUMBER_of_NAME_places_reserved: "{NUMBER} {NUMBER, plural, =0{} =1{place {NAME} réservée} other{places {NAME} réservées}}"
+        tracking_your_reservation: "Suivi de votre réservation"
+        in_the_process_of_validation: "En cours de validation"
+        settle_your_payment: "Venez régler à l'accueil"
+        paid: "Payé"
+        canceled: "Annulé"
       dashboard:
         #dashboard: public profile
         profile: