From c77e6c8a6515efbf92347fbccd130c5e7f50a10a Mon Sep 17 00:00:00 2001
From: Sylvain <sylvain@sleede.com>
Date: Tue, 12 Apr 2022 17:22:47 +0200
Subject: [PATCH] (front) add is-empty class to the calendar-admin-info side
 panel if no events are selected

---
 .../src/javascript/controllers/admin/calendar.js     |  6 ++++++
 app/frontend/templates/admin/calendar/calendar.html  | 12 ++++++------
 config/locales/app.admin.en.yml                      |  1 +
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/app/frontend/src/javascript/controllers/admin/calendar.js b/app/frontend/src/javascript/controllers/admin/calendar.js
index 76d8702bc..cadc96119 100644
--- a/app/frontend/src/javascript/controllers/admin/calendar.js
+++ b/app/frontend/src/javascript/controllers/admin/calendar.js
@@ -494,6 +494,9 @@ Application.Controllers.controller('AdminCalendarController', ['$scope', '$state
       $scope.availability = event;
       $scope.availability.plans = availabilityPlans();
 
+      // mark the side panel as available to be opened
+      $('label.calendar-admin-info').removeClass('is-empty');
+
       if ($scope.availabilityDom) {
         $scope.availabilityDom.classList.remove('fc-selected');
       }
@@ -546,6 +549,9 @@ Application.Controllers.controller('AdminCalendarController', ['$scope', '$state
       // we unselect the current event to keep consistency
       $scope.availability = null;
       $scope.availabilityDom = null;
+
+      // mark the side panel as available to hide because no event is selected anymore
+      $('label.calendar-admin-info').addClass('is-empty');
     };
 
     // !!! MUST BE CALLED AT THE END of the controller
diff --git a/app/frontend/templates/admin/calendar/calendar.html b/app/frontend/templates/admin/calendar/calendar.html
index 41a68eb78..ad3ed6b2a 100644
--- a/app/frontend/templates/admin/calendar/calendar.html
+++ b/app/frontend/templates/admin/calendar/calendar.html
@@ -58,10 +58,10 @@
     <div ui-calendar="calendarConfig" ng-model="eventSources" calendar="calendar" class="wrapper-lg"></div>
   </div>
 
-  <label class="calendar-admin-info">
+  <label class="calendar-admin-info is-empty">
     <input type="checkbox">
     <div class="content">
-      <p class="placeholder">Veuillez sélectionner un créneau</p>
+      <p class="placeholder" translate>{{ 'app.admin.calendar.select_a_slot' }}</p>
       <div class="widget panel b-a" ng-if="availability" ng-show="(availability.slot_duration || availability.tags.length > 0) && availability.available_type !== 'event'">
         <div class="panel-heading b-b small">
           <h3><i class="fa fa-info-circle m-r" aria-hidden="true"></i><span translate>{{ 'app.admin.calendar.info' }}</span></h3>
@@ -76,7 +76,7 @@
           </div>
         </div>
       </div>
-  
+
       <div class="widget panel b-a m-t-lg" ng-if="availability" ng-hide="availability.available_type == 'event'">
         <div class="panel-heading b-b small">
           <h3 translate>{{ 'app.admin.calendar.ongoing_reservations' }}</h3>
@@ -94,7 +94,7 @@
           <div class="m-t" ng-show="availability.lock"><i class="fa fa-ban"></i> <span class="m-l-xs" translate>{{ 'app.admin.calendar.reservations_locked' }}</span></div>
         </div>
       </div>
-  
+
       <div class="widget panel b-a m-t-lg" ng-if="availability.machine_ids.length > 0">
         <div class="panel-heading b-b small">
           <h3 translate>{{ 'app.admin.calendar.machines' }}</h3>
@@ -108,7 +108,7 @@
           </ul>
         </div>
       </div>
-  
+
       <div class="widget panel b-a m-t-lg" ng-if="availability.plan_ids.length > 0">
         <div class="panel-heading b-b small">
           <h3 translate>{{ 'app.admin.calendar.plans' }}</h3>
@@ -127,7 +127,7 @@
           </ul>
         </div>
       </div>
-  
+
       <div class="widget panel b-a m-t-lg" ng-if="availability" >
         <div class="panel-heading b-b small">
           <h3 translate>{{ 'app.admin.calendar.actions' }}</h3>
diff --git a/config/locales/app.admin.en.yml b/config/locales/app.admin.en.yml
index 10b2f3c34..90f3e2879 100644
--- a/config/locales/app.admin.en.yml
+++ b/config/locales/app.admin.en.yml
@@ -18,6 +18,7 @@ en:
         events: "Events"
         availabilities: "Availabilities"
         availabilities_notice: "Export to an Excel workbook every slots available for reservation, and their occupancy rate."
+        select_a_slot: "Please select a slot"
         info: "Info"
         tags: "Tags"
         slot_duration: "Slot duration: {DURATION} minutes"