From 74957154b1bebf26f34e50ab0adf266651c21e57 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Mon, 23 Aug 2021 09:11:08 +0200
Subject: [PATCH 01/24] rdv: pages by User

---
 .../Controller/CalendarController.php         | 43 ++++++++++---------
 ...firm_deleteByAccompanyingCourse.html.twig} |  0
 .../Calendar/confirm_deleteByUser.html.twig   | 18 ++++++++
 .../Calendar/confirm_deletePerson.html.twig   | 17 --------
 .../Resources/views/Calendar/edit.html.twig   |  8 ++--
 ...wig => editByAccompanyingCourse.html.twig} |  2 +-
 .../views/Calendar/editByUser.html.twig       | 36 ++++++++++++++++
 .../Resources/views/Calendar/list.html.twig   |  7 ++-
 .../views/Calendar/listByUser.html.twig       |  9 ++++
 .../Resources/views/Calendar/show.html.twig   | 19 ++++++--
 ...wig => showByAccompanyingCourse.html.twig} |  0
 .../views/Calendar/showByUser.html.twig       | 13 ++++++
 .../translations/messages.fr.yml              |  1 +
 13 files changed, 127 insertions(+), 46 deletions(-)
 rename src/Bundle/ChillCalendarBundle/Resources/views/Calendar/{confirm_deleteAccompanyingCourse.html.twig => confirm_deleteByAccompanyingCourse.html.twig} (100%)
 create mode 100644 src/Bundle/ChillCalendarBundle/Resources/views/Calendar/confirm_deleteByUser.html.twig
 delete mode 100644 src/Bundle/ChillCalendarBundle/Resources/views/Calendar/confirm_deletePerson.html.twig
 rename src/Bundle/ChillCalendarBundle/Resources/views/Calendar/{editAccompanyingCourse.html.twig => editByAccompanyingCourse.html.twig} (97%)
 create mode 100644 src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editByUser.html.twig
 create mode 100644 src/Bundle/ChillCalendarBundle/Resources/views/Calendar/listByUser.html.twig
 rename src/Bundle/ChillCalendarBundle/Resources/views/Calendar/{showAccompanyingCourse.html.twig => showByAccompanyingCourse.html.twig} (100%)
 create mode 100644 src/Bundle/ChillCalendarBundle/Resources/views/Calendar/showByUser.html.twig

diff --git a/src/Bundle/ChillCalendarBundle/Controller/CalendarController.php b/src/Bundle/ChillCalendarBundle/Controller/CalendarController.php
index a894099e4..6e8dc624c 100644
--- a/src/Bundle/ChillCalendarBundle/Controller/CalendarController.php
+++ b/src/Bundle/ChillCalendarBundle/Controller/CalendarController.php
@@ -80,11 +80,10 @@ class CalendarController extends AbstractController
 
         if ($user instanceof User) {
 
-            // $calendar = $em->getRepository(Calendar::class)
-            //     ->findByUser($user)
-            //     ;
-
-            // $view = 'ChillCalendarBundle:Calendar:listByUser.html.twig';
+            $calendarItems = $em->getRepository(Calendar::class)
+                ->findByUser($user)
+                ;
+            $view = 'ChillCalendarBundle:Calendar:listByUser.html.twig';
         } elseif ($accompanyingPeriod instanceof AccompanyingPeriod) {
             $calendarItems = $em->getRepository(Calendar::class)->findBy(
                 ['accompanyingPeriod' => $accompanyingPeriod],
@@ -174,11 +173,11 @@ class CalendarController extends AbstractController
         [$user, $accompanyingPeriod] = $this->getEntity($request);
 
         if ($accompanyingPeriod instanceof AccompanyingPeriod) {
-            $view = 'ChillCalendarBundle:Calendar:showAccompanyingCourse.html.twig';
+            $view = 'ChillCalendarBundle:Calendar:showByAccompanyingCourse.html.twig';
         } 
-        // elseif ($person instanceof Person) {
-        //     $view = 'ChillCalendarBundle:Calendar:showPerson.html.twig';
-        // }
+        elseif ($user instanceof User) {
+            $view = 'ChillCalendarBundle:Calendar:showByUser.html.twig';
+        }
 
         $entity = $em->getRepository('ChillCalendarBundle:Calendar')->find($id);
 
@@ -198,9 +197,9 @@ class CalendarController extends AbstractController
         }
 
         return $this->render($view, [
-            //'person'      => $person,
             'accompanyingCourse' => $accompanyingPeriod,
             'entity'      => $entity,
+            'user' => $user
             //'delete_form' => $deleteForm->createView(),
         ]);
     }
@@ -218,11 +217,11 @@ class CalendarController extends AbstractController
         [$user, $accompanyingPeriod] = $this->getEntity($request);
 
         if ($accompanyingPeriod instanceof AccompanyingPeriod) {
-            $view = 'ChillCalendarBundle:Calendar:editAccompanyingCourse.html.twig';
+            $view = 'ChillCalendarBundle:Calendar:editByAccompanyingCourse.html.twig';
+        }
+         elseif ($user instanceof User) {
+            $view = 'ChillCalendarBundle:Calendar:editByUser.html.twig';
         }
-        //  elseif ($person instanceof Person) {
-        //     $view = 'ChillCalendarBundle:Calendar:editPerson.html.twig';
-        // }
 
         $entity = $em->getRepository('ChillCalendarBundle:Calendar')->find($id);
 
@@ -259,6 +258,7 @@ class CalendarController extends AbstractController
             'form' => $form->createView(),
             'delete_form' => $deleteForm->createView(),
             'accompanyingCourse' => $accompanyingPeriod,
+            'user' => $user,
             'entity_json' => $entity_array
         ]);
     }
@@ -274,11 +274,11 @@ class CalendarController extends AbstractController
         [$user, $accompanyingPeriod] = $this->getEntity($request);
 
         if ($accompanyingPeriod instanceof AccompanyingPeriod) {
-            $view = 'ChillCalendarBundle:Calendar:confirm_deleteAccompanyingCourse.html.twig';
+            $view = 'ChillCalendarBundle:Calendar:confirm_deleteByAccompanyingCourse.html.twig';
         } 
-        // elseif ($person instanceof Person) {
-        //     $view = 'ChillCalendarBundle:Calendar:confirm_deletePerson.html.twig';
-        // }
+        elseif ($user instanceof User) {
+            $view = 'ChillCalendarBundle:Calendar:confirm_deleteByUser.html.twig';
+        }
 
         /* @var $entity Calendar */
         $entity = $em->getRepository('ChillCalendarBundle:Calendar')->find($id);
@@ -324,9 +324,9 @@ class CalendarController extends AbstractController
     /**
      * Creates a form to delete a Calendar entity by id.
      */
-    private function createDeleteForm(int $id, ?Person $person, ?AccompanyingPeriod $accompanyingPeriod): Form
+    private function createDeleteForm(int $id, ?User $user, ?AccompanyingPeriod $accompanyingPeriod): Form
     {
-        $params = $this->buildParamsToUrl($person, $accompanyingPeriod);
+        $params = $this->buildParamsToUrl($user, $accompanyingPeriod);
         $params['id'] = $id;
 
         return $this->createFormBuilder()
@@ -350,7 +350,8 @@ class CalendarController extends AbstractController
                 throw $this->createNotFoundException('User not found');
             }
 
-            $this->denyAccessUnlessGranted('CHILL_PERSON_SEE', $user);
+            // TODO Add permission
+            // $this->denyAccessUnlessGranted('CHILL_PERSON_SEE', $user);
         } elseif ($request->query->has('accompanying_period_id')) {
             $accompanying_period_id = $request->get('accompanying_period_id');
             $accompanyingPeriod = $em->getRepository(AccompanyingPeriod::class)->find($accompanying_period_id);
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/confirm_deleteAccompanyingCourse.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/confirm_deleteByAccompanyingCourse.html.twig
similarity index 100%
rename from src/Bundle/ChillCalendarBundle/Resources/views/Calendar/confirm_deleteAccompanyingCourse.html.twig
rename to src/Bundle/ChillCalendarBundle/Resources/views/Calendar/confirm_deleteByAccompanyingCourse.html.twig
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/confirm_deleteByUser.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/confirm_deleteByUser.html.twig
new file mode 100644
index 000000000..4f1ad45e5
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/confirm_deleteByUser.html.twig
@@ -0,0 +1,18 @@
+{% extends "@ChillMain/layout.html.twig" %}
+
+{% set user = calendar.user %}
+
+{% set activeRouteKey = 'chill_calendar_calendar' %}
+
+{% block title  'Remove activity'|trans %}
+
+{% block content %}
+{{ include('@ChillMain/Util/confirmation_template.html.twig',
+    {
+        'title'             : 'Remove calendar item'|trans,
+        'confirm_question'  : 'Are you sure you want to remove the calendar item?'|trans,
+        'cancel_route'      : 'chill_calendar_calendar',
+        'cancel_parameters' : { 'user_id' : calendar.user.id, 'id' : calendar.id },
+        'form'              : delete_form
+    } ) }}
+{% endblock %}
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/confirm_deletePerson.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/confirm_deletePerson.html.twig
deleted file mode 100644
index 9f8172bb4..000000000
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/confirm_deletePerson.html.twig
+++ /dev/null
@@ -1,17 +0,0 @@
-{% extends "@ChillPerson/Person/layout.html.twig"  %}
-
-{% set activeRouteKey = 'chill_activity_activity_list' %}
-{% set person = activity.person %}
-
-{% block title  'Remove activity'|trans %}
-
-{% block personcontent %}
-{{ include('@ChillMain/Util/confirmation_template.html.twig',
-    {
-        'title'             : 'Remove activity'|trans,
-        'confirm_question'  : 'Are you sure you want to remove the activity about "%name%" ?'|trans({ '%name%' : person.firstname ~ ' ' ~ person.lastname } ),
-        'cancel_route'      : 'chill_activity_activity_list',
-        'cancel_parameters' : { 'person_id' : activity.person.id, 'id' : activity.id },
-        'form'              : delete_form
-    } ) }}
-{% endblock %}
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/edit.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/edit.html.twig
index f64e22353..4b4dca59b 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/edit.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/edit.html.twig
@@ -48,15 +48,17 @@
     {{ form_row(form.sendSMS) }}
 {% endif %}
 
+<div id="calendarControls"></div>
+
 <div id="fullCalendar"></div>
 
 <ul class="record_actions sticky-form-buttons">
   <li class="cancel">
     <a 
       class="btn btn-cancel"
-      {%- if context == 'person' -%} 
-      href="{{ chill_return_path_or('chill_calendar_calendar', { 'person_id': person.id } )}}"
-      {%- else -%}
+      {%- if context == 'user' -%}
+      href="{{ chill_return_path_or('chill_calendar_calendar', { 'user_id': user.id } )}}"
+      {%- elseif context == 'accompanyingCourse' -%}
       href="{{ chill_return_path_or('chill_calendar_calendar', { 'accompanying_period_id': accompanyingCourse.id } )}}"
       {%- endif -%}
       >
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editAccompanyingCourse.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editByAccompanyingCourse.html.twig
similarity index 97%
rename from src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editAccompanyingCourse.html.twig
rename to src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editByAccompanyingCourse.html.twig
index f41939f62..1d506cb48 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editAccompanyingCourse.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editByAccompanyingCourse.html.twig
@@ -2,7 +2,7 @@
 
 {% set activeRouteKey = 'chill_calendar_calendar_list' %}
 
-{% block title  'Update calendar'|trans %}
+{% block title 'Update calendar'|trans %}
 
 {% block content %}
 <div class="calendar-edit">
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editByUser.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editByUser.html.twig
new file mode 100644
index 000000000..b2368ca76
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editByUser.html.twig
@@ -0,0 +1,36 @@
+{% extends "@ChillMain/layout.html.twig" %}
+
+{% block title 'Update calendar'|trans %}
+
+{% block content %}
+<div class="calendar-edit">
+    <div class="row justify-content-center">
+        <div class="col-md-10 col-xxl">
+            
+            <div id="calendar"></div> {# <=== vue component #}
+            {% include 'ChillCalendarBundle:Calendar:edit.html.twig' with {'context': 'user'} %}
+            
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block js %}
+    {{ parent() }}
+    <script type="text/javascript">
+        window.addEventListener('DOMContentLoaded', function (e) {
+            chill.displayAlertWhenLeavingModifiedForm('form[name="{{ form.vars.form.vars.name }}"]', 
+            '{{ "You are going to leave a page with unsubmitted data. Are you sure you want to leave ?"|trans }}');
+        });
+        window.entity = {{ entity_json|json_encode|raw }};
+        window.startDate = {{ entity.startDate|date('Y-m-d H:i:s')|json_encode|raw }};
+        window.endDate = {{ entity.endDate|date('Y-m-d H:i:s')|json_encode|raw }};
+        window.mainUser = {{ entity.mainUser.id }};
+    </script>
+    {{ encore_entry_script_tags('vue_calendar') }}
+{% endblock %}
+
+{% block css %}
+    {{ parent() }}
+    {{ encore_entry_link_tags('vue_calendar') }}
+{% endblock %}
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig
index d5ea0e172..33ea5d1b8 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig
@@ -8,7 +8,11 @@
     {% set accompanying_course_id = accompanyingCourse.id %}
 {% endif %}
 
-<h2>{{ 'Calendar list' |trans }}</h2>
+{% if user %}
+    <h2>{{ 'My calendar list' |trans }}</h2>
+{% else %}
+    <h2>{{ 'Calendar list' |trans }}</h2>
+{% endif %}
 
 {% if calendarItems|length == 0 %}
     <p class="chill-no-data-statement">
@@ -54,6 +58,7 @@
                         </a>
                     {% endif %}
 
+                    
                 </div>
                 <div class="item-col">
                     <ul class="list-content">
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/listByUser.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/listByUser.html.twig
new file mode 100644
index 000000000..ce4a8843c
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/listByUser.html.twig
@@ -0,0 +1,9 @@
+{% extends "@ChillMain/layout.html.twig" %}
+
+{% set activeRouteKey = 'chill_calendar_calendar_list' %}
+
+{% block title %}{{ 'My calendar list' |trans }}{% endblock title %}
+
+{% block content %}
+    {% include 'ChillCalendarBundle:Calendar:list.html.twig' with {'context': 'user'} %}
+{% endblock %}
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/show.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/show.html.twig
index efab85442..d450d2ab8 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/show.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/show.html.twig
@@ -58,24 +58,37 @@
     {% set accompanying_course_id = accompanyingCourse.id %}
 {% endif %}
 
+{% set user_id = null %}
+{% if user %}
+    {% set user_id = user.id %}
+{% endif %}
+
 <ul class="record_actions sticky-form-buttons">
     <li class="cancel">
-        <a class="btn btn-cancel" href="{{ path('chill_calendar_calendar', { 'accompanying_period_id': accompanying_course_id } ) }}">
+        <a class="btn btn-cancel" href="{{ path('chill_calendar_calendar', { 'accompanying_period_id': accompanying_course_id, 'user_id': user_id } ) }}">
             {{ 'Back to the list'|trans }}
         </a>
     </li>
+    {% if accompanyingCourse %}
     <li>
         <a class="btn btn-update" href="{{ path('chill_calendar_calendar_edit', { 'id': entity.id, 'accompanying_period_id': accompanying_course_id }) }}">
             {{ 'Edit'|trans }}
         </a>
     </li>
-    
+    {% endif %}
+    {% if user %}
+    <li>
+        <a class="btn btn-update" href="{{ path('chill_calendar_calendar_edit', { 'id': entity.id, 'user_id': user_id }) }}">
+            {{ 'Edit'|trans }}
+        </a>
+    </li>
+    {% endif %}
     {# TODO
     {% if is_granted('CHILL_ACTIVITY_DELETE', entity) %}
     #}
     
     <li>
-        <a href="{{ path('chill_calendar_calendar_delete', { 'id': entity.id, 'accompanying_period_id': accompanying_course_id } ) }}" class="btn btn-delete">
+        <a href="{{ path('chill_calendar_calendar_delete', { 'id': entity.id, 'accompanying_period_id': accompanying_course_id, 'user_id': user_id } ) }}" class="btn btn-delete">
             {{ 'Delete'|trans }}
         </a>
     </li>
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/showAccompanyingCourse.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/showByAccompanyingCourse.html.twig
similarity index 100%
rename from src/Bundle/ChillCalendarBundle/Resources/views/Calendar/showAccompanyingCourse.html.twig
rename to src/Bundle/ChillCalendarBundle/Resources/views/Calendar/showByAccompanyingCourse.html.twig
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/showByUser.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/showByUser.html.twig
new file mode 100644
index 000000000..8fa216fa4
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/showByUser.html.twig
@@ -0,0 +1,13 @@
+{% extends "@ChillMain/layout.html.twig" %}
+
+{% block title 'Calendar'|trans %}
+
+{% block content -%}
+<div class="calendar-show">
+    <div class="row justify-content-center">
+        <div class="col-md-10 col-xxl">           
+            {% include 'ChillCalendarBundle:Calendar:show.html.twig' with {'context': 'user'} %}
+        </div>
+    </div>
+</div> 
+{% endblock content %}
diff --git a/src/Bundle/ChillCalendarBundle/translations/messages.fr.yml b/src/Bundle/ChillCalendarBundle/translations/messages.fr.yml
index e5e5c636a..0eb7349a4 100644
--- a/src/Bundle/ChillCalendarBundle/translations/messages.fr.yml
+++ b/src/Bundle/ChillCalendarBundle/translations/messages.fr.yml
@@ -1,5 +1,6 @@
 Calendar: Rendez-vous
 Calendar list: Liste des rendez-vous
+My calendar list: Mes rendez-vous
 There is no calendar items.: Il n'y a pas de rendez-vous
 Remove calendar item: Supprimer le rendez-vous
 Are you sure you want to remove the calendar item?: Êtes-vous sûr de vouloir supprimer le rendez-vous?

From 68538f0e85a1d40ae5aa575ad90b478f9c2ec3aa Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Mon, 23 Aug 2021 09:21:47 +0200
Subject: [PATCH 02/24] rdv: add user menu entry for my calendar list

---
 src/Bundle/ChillTaskBundle/Menu/UserMenuBuilder.php | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/Bundle/ChillTaskBundle/Menu/UserMenuBuilder.php b/src/Bundle/ChillTaskBundle/Menu/UserMenuBuilder.php
index 33e84949f..f4dc4391e 100644
--- a/src/Bundle/ChillTaskBundle/Menu/UserMenuBuilder.php
+++ b/src/Bundle/ChillTaskBundle/Menu/UserMenuBuilder.php
@@ -115,6 +115,17 @@ class UserMenuBuilder implements LocalMenuBuilderInterface
                 'icon' => 'tasks'
             ]);
 
+        $menu->addChild("My calendar list", [
+                'route' => 'chill_calendar_calendar',
+                'routeParameters' => [
+                    'user_id' => $user->getId(),
+                ]
+            ])
+            ->setExtras([
+                'order' => -9,
+                'icon' => 'tasks'
+            ]);
+
         /*
         $menu->addChild("My aside activities", [
                 'route' => 'chill_crud_aside_activity_index'

From 864f84fededa3db5a8cc4e2f5e0a656b9eccedb2 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Mon, 23 Aug 2021 09:36:53 +0200
Subject: [PATCH 03/24] rdv: change entrypoint for calendar css + correct
 calendar controls as a function of context

---
 .../CalendarUserSelector/CalendarUserSelector.vue     | 11 +----------
 .../Resources/views/Calendar/edit.html.twig           |  4 +++-
 .../views/Calendar/editByAccompanyingCourse.html.twig |  1 +
 .../ChillCalendarBundle/chill.webpack.config.js       |  4 ++--
 4 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
index 758b7bae8..bf359f49b 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="calendar__controls">
+  <div>
      <h2 class="chill-red">{{ $t('choose_your_calendar_user') }}</h2>
     <VueMultiselect
         name="field"
@@ -201,12 +201,3 @@ export default {
 
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
 
-<style lang="scss" scoped>
-  div.calendar__controls {
-    background-color: 'black';
-    height: 50%;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-  }
-</style>
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/edit.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/edit.html.twig
index 4b4dca59b..f47727b9c 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/edit.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/edit.html.twig
@@ -48,7 +48,9 @@
     {{ form_row(form.sendSMS) }}
 {% endif %}
 
-<div id="calendarControls"></div>
+{% if context == 'user' %}
+    <div id="calendarControls"></div>
+{% endif %}
 
 <div id="fullCalendar"></div>
 
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editByAccompanyingCourse.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editByAccompanyingCourse.html.twig
index 1d506cb48..1db9b9223 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editByAccompanyingCourse.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editByAccompanyingCourse.html.twig
@@ -35,6 +35,7 @@
 {% block css %}
     {{ parent() }}
     {{ encore_entry_link_tags('vue_calendar') }}
+    {{ encore_entry_link_tags('page_calendar') }}
 {% endblock %}
 
 {% block block_post_menu %}
diff --git a/src/Bundle/ChillCalendarBundle/chill.webpack.config.js b/src/Bundle/ChillCalendarBundle/chill.webpack.config.js
index b4b42d2fe..258e43089 100644
--- a/src/Bundle/ChillCalendarBundle/chill.webpack.config.js
+++ b/src/Bundle/ChillCalendarBundle/chill.webpack.config.js
@@ -1,10 +1,10 @@
 // this file loads all assets from the Chill calendar bundle
 module.exports = function(encore, entries) {
-    entries.push(__dirname + '/Resources/public/chill/index.js');
-    
+
     encore.addAliases({
         ChillCalendarAssets: __dirname + '/Resources/public'
     });
 
     encore.addEntry('vue_calendar', __dirname + '/Resources/public/vuejs/Calendar/index.js');
+    encore.addEntry('page_calendar', __dirname + '/Resources/public/chill/index.js');
 };

From 54ea954a5aa159876cfd3cdf9819429015c87770 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Mon, 23 Aug 2021 10:47:26 +0200
Subject: [PATCH 04/24] rdv: init unit tests

---
 .../Controller/CalendarControllerTest.php     | 66 +++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 src/Bundle/ChillCalendarBundle/Tests/Controller/CalendarControllerTest.php

diff --git a/src/Bundle/ChillCalendarBundle/Tests/Controller/CalendarControllerTest.php b/src/Bundle/ChillCalendarBundle/Tests/Controller/CalendarControllerTest.php
new file mode 100644
index 000000000..c94238a51
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Tests/Controller/CalendarControllerTest.php
@@ -0,0 +1,66 @@
+<?php
+
+namespace Chill\CalendarBundle\Tests\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Test\WebTestCase;
+use Symfony\Component\HttpFoundation\Request;
+use Chill\PersonBundle\Entity\AccompanyingPeriod;
+
+class CalendarControllerTest extends WebTestCase
+{
+    
+    /**
+     * Setup before the first test of this class (see phpunit doc)
+     */
+    public static function setUpBeforeClass()
+    {
+        static::bootKernel();
+    }
+
+    /**
+     * Setup before each test method (see phpunit doc)
+     */
+    public function setUp()
+    {
+        $this->client = static::createClient(array(), array(
+           'PHP_AUTH_USER' => 'center a_social',
+           'PHP_AUTH_PW'   => 'password',
+        ));
+    }
+    
+    private function getAccompanyingPeriodFromFixtures(): AccompanyingPeriod
+    {
+        $em = static::$kernel->getContainer()
+              ->get('doctrine.orm.entity_manager');
+
+        $accompanying_period = $em->getRepository('ChillPersonBundle:AccompanyingPeriod')->find(1);
+
+        if ($accompanying_period === NULL) {
+            throw new \RuntimeException("We need an accompanying course with id = 1. Did you add fixtures ?");
+        }
+
+        return $accompanying_period;
+    }
+
+    public function testList()
+    {
+        $this->client->request(
+            Request::METHOD_GET, 
+            sprintf('/fr/calendar/?accompanying_period_id=%d', $this->getAccompanyingPeriodFromFixtures()->getId())
+        );
+
+        $this->assertEquals(200, $this->client->getResponse()->getStatusCode());
+    }
+
+
+    public function testNew()
+    {
+        $this->client->request(
+            Request::METHOD_GET, 
+            sprintf('/fr/calendar/new?accompanying_period_id=%d', $this->getAccompanyingPeriodFromFixtures()->getId())
+        );
+
+        $this->assertEquals(200, $this->client->getResponse()->getStatusCode());
+    }
+
+}

From ee4d23ff82aeeea1e95451b8df9c67b3f16e418d Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Fri, 27 Aug 2021 17:14:33 +0200
Subject: [PATCH 05/24] rdv: init vue component for calendar range editing +
 refactor vue calendar code

---
 .../public/vuejs/MyCalendarRange/App.vue      | 107 ++++++++++++++++++
 .../public/vuejs/MyCalendarRange/i18n.js      |   8 ++
 .../public/vuejs/MyCalendarRange/index.js     |  16 +++
 .../CalendarUserSelector/js => _api}/api.js   |   0
 .../CalendarUserSelector.vue                  |   2 +-
 .../Resources/views/Calendar/list.html.twig   |   7 +-
 .../views/Calendar/listByUser.html.twig       |  13 +++
 .../chill.webpack.config.js                   |   1 +
 8 files changed, 152 insertions(+), 2 deletions(-)
 create mode 100644 src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
 create mode 100644 src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js
 create mode 100644 src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index.js
 rename src/Bundle/ChillCalendarBundle/Resources/public/vuejs/{_components/CalendarUserSelector/js => _api}/api.js (100%)

diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
new file mode 100644
index 000000000..1eaf04335
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <h2 class="chill-red">{{ $t('edit_your_calendar_range') }}</h2>
+    <FullCalendar ref="fullCalendar" :options="calendarOptions">
+      <template v-slot:eventContent='arg'>
+        <b>{{ arg.timeText }}</b>
+        <i>&nbsp;{{ arg.event.title }}</i>
+      </template>
+    </FullCalendar>
+  </div>
+</template>
+
+<script>
+import '@fullcalendar/core/vdom'; // solves problem with Vite
+import frLocale from '@fullcalendar/core/locales/fr';
+import FullCalendar from '@fullcalendar/vue3';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import interactionPlugin from '@fullcalendar/interaction';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import { fetchCalendar } from '../_api/api';
+
+export default {
+  name: "App",
+  components: {
+    FullCalendar
+  },
+  data() {
+    return {
+      errorMsg: [],
+      userId: window.userId,
+      showMyCalendar: true,
+      calendarEvents: {
+         user: [],
+      },
+      calendarOptions: {
+        locale: frLocale,
+        plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin ],
+        initialView: 'timeGridWeek',
+        initialDate: window.startDate !== undefined ? window.startDate : new Date(),
+        eventSource: [],
+        selectable: true,
+        select: this.onDateSelect,
+        eventChange: this.onEventChange,
+        eventClick: this.onEventClick,
+        selectMirror: true,
+        editable: true,
+        weekends: false,
+        headerToolbar: {
+          left: 'prev,next today',
+          center: 'title',
+          right: 'dayGridMonth,timeGridWeek,timeGridDay'
+        },
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.fetchData()
+    },
+    fetchData() {
+      console.log(this.userId);
+      fetchCalendar(this.userId).then(calendar => new Promise((resolve, reject) => {
+        let results = calendar.results;
+        let events = results.map(i => 
+          ({
+            start: i.startDate.datetime,
+            end: i.endDate.datetime,
+          })
+        );
+        let calendarEventsCurrentUser = {
+            events: events,
+            color: 'darkblue',
+            id: 1000,
+            editable: false
+        };
+        this.calendarEvents.user = calendarEventsCurrentUser;
+        this.updateEventsSource()
+        resolve();
+      }));
+    },
+    updateEventsSource() {
+      this.calendarOptions.eventSources = [];
+      if (this.showMyCalendar) {
+          this.calendarOptions.eventSources.push(this.calendarEvents.user);
+      }
+    },
+    toggleMyCalendar(value) {
+      this.showMyCalendar = value;
+    },
+    toggleWeekends: function() {
+      this.calendarOptions.weekends = !this.calendarOptions.weekends;
+    },
+    onDateSelect(payload) {
+      console.log(payload)
+    },
+    onEventChange(payload) {
+      //this.$store.dispatch('updateEvent', payload);
+    },
+    onEventClick(payload) {
+    },
+  },
+  mounted() {
+    this.init();
+  }
+}
+</script>
+
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js
new file mode 100644
index 000000000..2f3f698ce
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js
@@ -0,0 +1,8 @@
+const appMessages = {
+   fr: {
+   }
+}
+
+export {
+   appMessages
+};
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index.js
new file mode 100644
index 000000000..ca338a3be
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index.js
@@ -0,0 +1,16 @@
+import { createApp } from 'vue';
+import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
+import { appMessages } from './i18n'
+//import store from './store'
+
+import App from './App.vue';
+
+const i18n = _createI18n(appMessages);
+
+const app = createApp({
+   template: `<app></app>`,
+})
+//.use(store)
+.use(i18n)
+.component('app', App)
+.mount('#myCalendar');
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/js/api.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js
similarity index 100%
rename from src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/js/api.js
rename to src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
index bf359f49b..da9a9eaf8 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
@@ -31,7 +31,7 @@
 </template>
 <script>
 
-import { fetchCalendarRanges, fetchCalendar } from './js/api'
+import { fetchCalendarRanges, fetchCalendar } from '../../_api/api'
 import VueMultiselect from 'vue-multiselect';
 import { whoami } from 'ChillPersonAssets/vuejs/AccompanyingCourse/api';
 
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig
index 33ea5d1b8..71b2e98a6 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig
@@ -8,12 +8,17 @@
     {% set accompanying_course_id = accompanyingCourse.id %}
 {% endif %}
 
-{% if user %}
+{% if context == 'user' %}
     <h2>{{ 'My calendar list' |trans }}</h2>
 {% else %}
     <h2>{{ 'Calendar list' |trans }}</h2>
 {% endif %}
 
+{% if context == 'user' %}
+    <div id="myCalendar"></div>
+{% endif %}
+
+
 {% if calendarItems|length == 0 %}
     <p class="chill-no-data-statement">
         {{ "There is no calendar items."|trans }}
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/listByUser.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/listByUser.html.twig
index ce4a8843c..f33e73851 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/listByUser.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/listByUser.html.twig
@@ -7,3 +7,16 @@
 {% block content %}
     {% include 'ChillCalendarBundle:Calendar:list.html.twig' with {'context': 'user'} %}
 {% endblock %}
+ 
+{% block js %}
+    {{ parent() }}
+    <script type="text/javascript">
+        window.userId = {{ user.id }};
+    </script>
+    {{ encore_entry_script_tags('vue_mycalendarrange') }}
+{% endblock %}
+
+{% block css %}
+    {{ parent() }}
+    {{ encore_entry_link_tags('vue_calendar') }}
+{% endblock %}
diff --git a/src/Bundle/ChillCalendarBundle/chill.webpack.config.js b/src/Bundle/ChillCalendarBundle/chill.webpack.config.js
index 258e43089..f91b30268 100644
--- a/src/Bundle/ChillCalendarBundle/chill.webpack.config.js
+++ b/src/Bundle/ChillCalendarBundle/chill.webpack.config.js
@@ -6,5 +6,6 @@ module.exports = function(encore, entries) {
     });
 
     encore.addEntry('vue_calendar', __dirname + '/Resources/public/vuejs/Calendar/index.js');
+    encore.addEntry('vue_mycalendarrange', __dirname + '/Resources/public/vuejs/MyCalendarRange/index.js');
     encore.addEntry('page_calendar', __dirname + '/Resources/public/chill/index.js');
 };

From 329d3cc3d8b793403042340dbe3f4e490cdb9743 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Mon, 30 Aug 2021 11:02:53 +0200
Subject: [PATCH 06/24] rdv: add API entry point for POSTing calendar range

---
 .../Controller/CalendarRangeAPIController.php | 19 ++++---
 .../ChillCalendarExtension.php                |  3 +-
 .../Entity/CalendarRange.php                  |  6 +--
 .../ChillCalendarBundle/chill.api.specs.yaml  | 50 +++++++++++++++++++
 4 files changed, 66 insertions(+), 12 deletions(-)

diff --git a/src/Bundle/ChillCalendarBundle/Controller/CalendarRangeAPIController.php b/src/Bundle/ChillCalendarBundle/Controller/CalendarRangeAPIController.php
index be279ed36..672e9527c 100644
--- a/src/Bundle/ChillCalendarBundle/Controller/CalendarRangeAPIController.php
+++ b/src/Bundle/ChillCalendarBundle/Controller/CalendarRangeAPIController.php
@@ -18,16 +18,19 @@ class CalendarRangeAPIController extends ApiController
      */
     public function availableRanges(Request $request, string $_format): JsonResponse
     {
-        if ($request->query->has('user')) {
-            $user = $request->query->get('user');
-        }
-
         $em = $this->getDoctrine()->getManager();
 
-        $query = $em->createQuery(
-            'SELECT c FROM ChillCalendarBundle:CalendarRange c 
-            WHERE NOT EXISTS (SELECT cal.id FROM ChillCalendarBundle:Calendar cal WHERE cal.calendarRange = c.id)')
-        ;
+        $sql = 'SELECT c FROM ChillCalendarBundle:CalendarRange c 
+        WHERE NOT EXISTS (SELECT cal.id FROM ChillCalendarBundle:Calendar cal WHERE cal.calendarRange = c.id)';
+
+        if ($request->query->has('user')) {
+            $user = $request->query->get('user');
+            $sql = $sql . ' AND c.user = :user';
+            $query = $em->createQuery($sql)
+                ->setParameter('user', $user);
+        } else {
+            $query = $em->createQuery($sql);
+        }
 
         $results = $query->getResult();
 
diff --git a/src/Bundle/ChillCalendarBundle/DependencyInjection/ChillCalendarExtension.php b/src/Bundle/ChillCalendarBundle/DependencyInjection/ChillCalendarExtension.php
index 2927d4910..5f20f5968 100644
--- a/src/Bundle/ChillCalendarBundle/DependencyInjection/ChillCalendarExtension.php
+++ b/src/Bundle/ChillCalendarBundle/DependencyInjection/ChillCalendarExtension.php
@@ -72,7 +72,8 @@ class ChillCalendarExtension extends Extension implements PrependExtensionInterf
                         '_entity' => [
                             'methods' => [
                                 Request::METHOD_GET => true,
-                                Request::METHOD_HEAD => true
+                                Request::METHOD_HEAD => true,
+                                Request::METHOD_POST => true,
                             ]
                         ],
                     ]
diff --git a/src/Bundle/ChillCalendarBundle/Entity/CalendarRange.php b/src/Bundle/ChillCalendarBundle/Entity/CalendarRange.php
index f9582c8c2..b83684a7c 100644
--- a/src/Bundle/ChillCalendarBundle/Entity/CalendarRange.php
+++ b/src/Bundle/ChillCalendarBundle/Entity/CalendarRange.php
@@ -25,19 +25,19 @@ class CalendarRange
 
     /**
      * @ORM\ManyToOne(targetEntity="Chill\MainBundle\Entity\User")
-     * @Groups({"read"})
+     * @groups({"read", "write"})
      */
     private User $user;
 
     /**
      * @ORM\Column(type="datetimetz_immutable")
-     * @groups({"read"})
+     * @groups({"read", "write"})
      */
     private \DateTimeImmutable $startDate;
 
     /**
      * @ORM\Column(type="datetimetz_immutable")
-     * @groups({"read"})
+     * @groups({"read", "write"})
      */
     private \DateTimeImmutable $endDate;
 
diff --git a/src/Bundle/ChillCalendarBundle/chill.api.specs.yaml b/src/Bundle/ChillCalendarBundle/chill.api.specs.yaml
index 8da280b36..1ca66375d 100644
--- a/src/Bundle/ChillCalendarBundle/chill.api.specs.yaml
+++ b/src/Bundle/ChillCalendarBundle/chill.api.specs.yaml
@@ -8,6 +8,28 @@ servers:
   - url: "/api"
     description: "Your current dev server"
 
+components:
+  schemas:
+    Date:
+      type: object
+      properties:
+        datetime:
+          type: string
+          format: date-time
+    User:
+      type: object
+      properties:
+        id:
+          type: integer
+        type:
+          type: string
+          enum:
+            - user
+        username:
+          type: string
+        text:
+          type: string
+
 paths:
   /1.0/calendar/calendar.json:
     get:
@@ -48,6 +70,34 @@ paths:
       responses:
         200:
           description: "ok"
+    post:
+      tags:
+        - calendar
+      summary: create a new calendar range
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                user:
+                  $ref: '#/components/schemas/User'
+                startDate:
+                  $ref: '#/components/schemas/Date'
+                endDate:
+                  $ref: '#/components/schemas/Date'
+      responses:
+        401:
+          description: "Unauthorized"
+        404:
+          description: "Not found"
+        200:
+          description: "OK"
+        422:
+          description: "Unprocessable entity (validation errors)"
+        400:
+          description: "transition cannot be applyed"
 
   /1.0/calendar/calendar-range/{id}.json:
     get:

From 0fe6d7d00b3a9ae4e3f4a0993dabba19b0d6948a Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Mon, 30 Aug 2021 11:57:15 +0200
Subject: [PATCH 07/24] rdv: add calendar range events in myCalendar

---
 .../public/vuejs/MyCalendarRange/App.vue      | 54 +++++++++++++------
 .../public/vuejs/MyCalendarRange/index.js     |  4 +-
 .../public/vuejs/MyCalendarRange/store.js     | 38 +++++++++++++
 .../Resources/public/vuejs/_api/api.js        | 12 ++++-
 4 files changed, 90 insertions(+), 18 deletions(-)
 create mode 100644 src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js

diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
index 1eaf04335..ace1ec5f4 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
@@ -7,6 +7,7 @@
         <i>&nbsp;{{ arg.event.title }}</i>
       </template>
     </FullCalendar>
+
   </div>
 </template>
 
@@ -17,7 +18,7 @@ import FullCalendar from '@fullcalendar/vue3';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import timeGridPlugin from '@fullcalendar/timegrid';
-import { fetchCalendar } from '../_api/api';
+import { fetchCalendar, fetchCalendarRangesByUser } from '../_api/api';
 
 export default {
   name: "App",
@@ -30,7 +31,8 @@ export default {
       userId: window.userId,
       showMyCalendar: true,
       calendarEvents: {
-         user: [],
+         userCalendar: [],
+         userCalendarRange: []
       },
       calendarOptions: {
         locale: frLocale,
@@ -59,30 +61,49 @@ export default {
     },
     fetchData() {
       console.log(this.userId);
-      fetchCalendar(this.userId).then(calendar => new Promise((resolve, reject) => {
-        let results = calendar.results;
-        let events = results.map(i => 
+
+      fetchCalendarRangesByUser(this.userId).then(calendarRanges => new Promise((resolve, reject) => {
+        let events = calendarRanges.results.map(i =>
           ({
             start: i.startDate.datetime,
             end: i.endDate.datetime,
           })
         );
-        let calendarEventsCurrentUser = {
-            events: events,
-            color: 'darkblue',
-            id: 1000,
-            editable: false
+        let calendarRangeEvents = {
+              events: events,
+              color: 'orange',
+              textColor: '#444444'
         };
-        this.calendarEvents.user = calendarEventsCurrentUser;
-        this.updateEventsSource()
-        resolve();
+        this.calendarEvents.userCalendarRange = calendarRangeEvents;
+
+        fetchCalendar(this.userId).then(calendar => new Promise((resolve, reject) => {
+          let events = calendar.results.map(i =>
+            ({
+              start: i.startDate.datetime,
+              end: i.endDate.datetime,
+            })
+          );
+          let calendarEventsCurrentUser = {
+              events: events,
+              color: 'darkblue',
+              id: 1000,
+              editable: false
+          };
+          this.calendarEvents.userCalendar = calendarEventsCurrentUser;
+          this.updateEventsSource();
+          resolve();
+        }));
+
+      resolve();
       }));
     },
     updateEventsSource() {
       this.calendarOptions.eventSources = [];
+      this.calendarOptions.eventSources.push(this.calendarEvents.userCalendarRange);
       if (this.showMyCalendar) {
-          this.calendarOptions.eventSources.push(this.calendarEvents.user);
+          this.calendarOptions.eventSources.push(this.calendarEvents.userCalendar);
       }
+      console.log(this.calendarOptions.eventSources);
     },
     toggleMyCalendar(value) {
       this.showMyCalendar = value;
@@ -92,11 +113,14 @@ export default {
     },
     onDateSelect(payload) {
       console.log(payload)
+      this.$store.dispatch('createRange', payload);
     },
     onEventChange(payload) {
-      //this.$store.dispatch('updateEvent', payload);
+      console.log(payload)
+      this.$store.dispatch('updateRange', payload);
     },
     onEventClick(payload) {
+      console.log(payload)
     },
   },
   mounted() {
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index.js
index ca338a3be..a10a16601 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index.js
@@ -1,7 +1,7 @@
 import { createApp } from 'vue';
 import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
 import { appMessages } from './i18n'
-//import store from './store'
+import store from './store'
 
 import App from './App.vue';
 
@@ -10,7 +10,7 @@ const i18n = _createI18n(appMessages);
 const app = createApp({
    template: `<app></app>`,
 })
-//.use(store)
+.use(store)
 .use(i18n)
 .component('app', App)
 .mount('#myCalendar');
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
new file mode 100644
index 000000000..457069de7
--- /dev/null
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
@@ -0,0 +1,38 @@
+import 'es6-promise/auto';
+import { createStore } from 'vuex';
+
+const debug = process.env.NODE_ENV !== 'production';
+
+const store = createStore({
+   strict: debug,
+   state: {
+     newCalendarRanges: [],
+     updateCalendarRanges: [],
+     deleteCalendarRanges: []
+   },
+   mutations: {
+      updateRange(state, payload) {
+         state.updateCalendarRanges.push({start: payload.start, end: payload.end});
+      },
+      addRange(state, payload) {
+         state.newCalendarRanges.push({start: payload.start, end: payload.end});
+      }
+   },
+   actions: {
+      createRange({ commit }, payload) {
+         console.log('### action createRange', payload);
+         commit('addRange', payload);
+      },
+      updateRange({ commit }, payload) {
+         console.log('### action updateRange', payload);
+         commit('updateRange', payload);
+      },
+      saveRanges({ commit }, payload) {
+         console.log('### action saveRange', payload);
+         postRange()
+      },
+
+  }
+});
+
+export default store;
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js
index a11ca8498..2c08068fd 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js
@@ -12,6 +12,15 @@ const fetchCalendarRanges = () => {
       });
 };
 
+const fetchCalendarRangesByUser = (userId) => {
+   const url = `/api/1.0/calendar/calendar-range-available.json?user=${userId}`;
+   return fetch(url)
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response');
+      });
+};
+
 /*
 * Endpoint chill_api_single_calendar
 * method GET, get Calendar events, can be filtered by mainUser
@@ -28,5 +37,6 @@ const fetchCalendar = (mainUserId) => {
 
 export {
    fetchCalendarRanges,
-   fetchCalendar
+   fetchCalendar,
+   fetchCalendarRangesByUser
 };

From 6d607e3939ecab641daff95b912192b80b964f85 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Mon, 30 Aug 2021 17:44:52 +0200
Subject: [PATCH 08/24] rdv: edit calendar ranges: create and update calendar
 ranges

---
 .../ChillCalendarExtension.php                |  2 +
 .../public/vuejs/MyCalendarRange/App.vue      | 31 ++++++++--
 .../public/vuejs/MyCalendarRange/store.js     | 60 ++++++++++++++++++-
 .../Resources/public/vuejs/_api/api.js        | 43 ++++++++++++-
 4 files changed, 127 insertions(+), 9 deletions(-)

diff --git a/src/Bundle/ChillCalendarBundle/DependencyInjection/ChillCalendarExtension.php b/src/Bundle/ChillCalendarBundle/DependencyInjection/ChillCalendarExtension.php
index 5f20f5968..f4c5411f8 100644
--- a/src/Bundle/ChillCalendarBundle/DependencyInjection/ChillCalendarExtension.php
+++ b/src/Bundle/ChillCalendarBundle/DependencyInjection/ChillCalendarExtension.php
@@ -74,6 +74,8 @@ class ChillCalendarExtension extends Extension implements PrependExtensionInterf
                                 Request::METHOD_GET => true,
                                 Request::METHOD_HEAD => true,
                                 Request::METHOD_POST => true,
+                                Request::METHOD_PATCH => true,
+                                Request::METHOD_DELETE => true,
                             ]
                         ],
                     ]
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
index ace1ec5f4..e28655ab4 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
@@ -7,7 +7,10 @@
         <i>&nbsp;{{ arg.event.title }}</i>
       </template>
     </FullCalendar>
-
+    <button class="btn btn-save"
+        @click.prevent="onClickSave">
+        {{ $t('action.save')}}
+    </button>
   </div>
 </template>
 
@@ -32,7 +35,11 @@ export default {
       showMyCalendar: true,
       calendarEvents: {
          userCalendar: [],
-         userCalendarRange: []
+         userCalendarRange: [],
+         new: {
+           events: [],
+           color: "red"
+         }
       },
       calendarOptions: {
         locale: frLocale,
@@ -43,7 +50,7 @@ export default {
         selectable: true,
         select: this.onDateSelect,
         eventChange: this.onEventChange,
-        eventClick: this.onEventClick,
+        // eventClick: this.onEventClick,
         selectMirror: true,
         editable: true,
         weekends: false,
@@ -67,6 +74,7 @@ export default {
           ({
             start: i.startDate.datetime,
             end: i.endDate.datetime,
+            calendarRangeId: i.id
           })
         );
         let calendarRangeEvents = {
@@ -100,6 +108,7 @@ export default {
     updateEventsSource() {
       this.calendarOptions.eventSources = [];
       this.calendarOptions.eventSources.push(this.calendarEvents.userCalendarRange);
+      this.calendarOptions.eventSources.push(this.calendarEvents.new);
       if (this.showMyCalendar) {
           this.calendarOptions.eventSources.push(this.calendarEvents.userCalendar);
       }
@@ -113,15 +122,25 @@ export default {
     },
     onDateSelect(payload) {
       console.log(payload)
+      this.calendarEvents.new.events.push({ //TODO does not work
+          start: payload.startStr,
+          end: payload.endStr,
+      });
+      this.updateEventsSource();
       this.$store.dispatch('createRange', payload);
     },
     onEventChange(payload) {
       console.log(payload)
       this.$store.dispatch('updateRange', payload);
+      //TODO update the eventsSource with payload, or use the store for updating the eventsSource
     },
-    onEventClick(payload) {
-      console.log(payload)
-    },
+    // onEventClick(payload) {
+    //   console.log(payload)
+    //   //TODO update the eventsSource with payload, or use the store for updating the eventsSource
+    // },
+    onClickSave(payload){
+      this.$store.dispatch('saveRanges', payload);
+    }
   },
   mounted() {
     this.init();
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
index 457069de7..cec206661 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
@@ -1,5 +1,6 @@
 import 'es6-promise/auto';
 import { createStore } from 'vuex';
+import { postCalendarRange, patchCalendarRange } from '../_api/api';
 
 const debug = process.env.NODE_ENV !== 'production';
 
@@ -12,10 +13,23 @@ const store = createStore({
    },
    mutations: {
       updateRange(state, payload) {
-         state.updateCalendarRanges.push({start: payload.start, end: payload.end});
+         state.updateCalendarRanges.push({
+            id: payload.event.extendedProps.calendarRangeId,
+            start: payload.event.start,
+            end: payload.event.end
+         });
       },
       addRange(state, payload) {
          state.newCalendarRanges.push({start: payload.start, end: payload.end});
+      },
+      clearNewCalendarRanges(state) {
+         state.newCalendarRanges = [];
+      },
+      clearUpdateCalendarRanges(state) {
+         state.updateCalendarRanges = [];
+      },
+      deleteUpdateCalendarRanges(state) {
+         state.deleteCalendarRanges = [];
       }
    },
    actions: {
@@ -29,10 +43,52 @@ const store = createStore({
       },
       saveRanges({ commit }, payload) {
          console.log('### action saveRange', payload);
-         postRange()
+         console.log(this.state)
+         //TODO: if smthg new in newCalendarRange, postRange(), if smthg to update in updateCalendarRanges, update...
+         if (this.state.newCalendarRanges.length > 0){
+            this.state.newCalendarRanges.map(cr => {
+               postCalendarRange({
+                  user: {
+                     type: 'user',
+                     id: window.userId,
+                  },
+                  startDate: {
+                     datetime: `${cr.start.toISOString().split('.')[0]}+0000`, //should be like "2021-08-20T15:00:00+0200",
+                  },
+                  endDate: {
+                     datetime: `${cr.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
+                  },
+               }, 'POST');
+            })
+            commit('clearNewCalendarRanges');
+         }
+         if (this.state.updateCalendarRanges.length > 0){
+            this.state.updateCalendarRanges.map(cr => {
+               console.log(cr)
+               patchCalendarRange(cr.id,
+                  {
+                  startDate: {
+                     datetime: `${cr.start.toISOString().split('.')[0]}+0000`, //should be like "2021-08-20T15:00:00+0200",
+                  },
+                  endDate: {
+                     datetime: `${cr.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
+                  },
+               });
+            })
+            commit('clearUpdateCalendarRanges');
+         }
+         if (this.state.deleteCalendarRanges.length > 0){
+            this.state.deleteCalendarRanges.map(cr => {
+               postCalendarRange({
+                  id: cr.id //TODO check functionning
+               }, 'DELETE');
+            })
+            commit('deleteUpdateCalendarRanges');
+         }
       },
 
   }
 });
 
+
 export default store;
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js
index 2c08068fd..c062d0d6e 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js
@@ -35,8 +35,49 @@ const fetchCalendar = (mainUserId) => {
       });
 };
 
+
+/*
+* Endpoint chill_api_single_calendar_range__entity_create
+* method POST or DELETE, post CalendarRange entity
+*/
+const postCalendarRange = (body, method) => {
+   const url = `/api/1.0/calendar/calendar-range.json?`;
+   return fetch(url, {
+      method: method,
+      headers: {
+         'Content-Type': 'application/json;charset=utf-8'
+      },
+      body: JSON.stringify(body)
+   }).then(response => {
+      if (response.ok) { return response.json(); }
+      throw Error('Error with request resource response');
+   });
+};
+
+/*
+* Endpoint chill_api_single_calendar_range__entity
+* method PATCH, patch CalendarRange entity
+*/
+const patchCalendarRange = (id, body) => {
+   console.log(body)
+   const url = `/api/1.0/calendar/calendar-range/${id}.json`;
+   return fetch(url, {
+      method: 'PATCH',
+      headers: {
+         'Content-Type': 'application/json;charset=utf-8'
+      },
+      body: JSON.stringify(body)
+   }).then(response => {
+      if (response.ok) { return response.json(); }
+      throw Error('Error with request resource response');
+   });
+};
+
+
 export {
    fetchCalendarRanges,
    fetchCalendar,
-   fetchCalendarRangesByUser
+   fetchCalendarRangesByUser,
+   postCalendarRange,
+   patchCalendarRange
 };

From bcb36ddc112476f16f1db559bd21bfbe0c2d48b1 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Tue, 31 Aug 2021 09:03:12 +0200
Subject: [PATCH 09/24] rdv: edit calendar range: fix display of new calendar
 ranges

---
 .../public/vuejs/MyCalendarRange/App.vue      | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
index e28655ab4..5f6ed3c0d 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
@@ -34,11 +34,11 @@ export default {
       userId: window.userId,
       showMyCalendar: true,
       calendarEvents: {
-         userCalendar: [],
-         userCalendarRange: [],
+         userCalendar: null,
+         userCalendarRange: null,
          new: {
            events: [],
-           color: "red"
+           color: "#3788d8"
          }
       },
       calendarOptions: {
@@ -50,6 +50,8 @@ export default {
         selectable: true,
         select: this.onDateSelect,
         eventChange: this.onEventChange,
+        eventDrop: this.onEventDropOrResize,
+        eventResize: this.onEventDropOrResize,
         // eventClick: this.onEventClick,
         selectMirror: true,
         editable: true,
@@ -79,7 +81,7 @@ export default {
         );
         let calendarRangeEvents = {
               events: events,
-              color: 'orange',
+              color: '#79bafc',
               textColor: '#444444'
         };
         this.calendarEvents.userCalendarRange = calendarRangeEvents;
@@ -107,8 +109,8 @@ export default {
     },
     updateEventsSource() {
       this.calendarOptions.eventSources = [];
-      this.calendarOptions.eventSources.push(this.calendarEvents.userCalendarRange);
       this.calendarOptions.eventSources.push(this.calendarEvents.new);
+      this.calendarOptions.eventSources.push(this.calendarEvents.userCalendarRange);
       if (this.showMyCalendar) {
           this.calendarOptions.eventSources.push(this.calendarEvents.userCalendar);
       }
@@ -122,17 +124,24 @@ export default {
     },
     onDateSelect(payload) {
       console.log(payload)
-      this.calendarEvents.new.events.push({ //TODO does not work
+      let events = this.calendarEvents.new.events;
+      events.push({
           start: payload.startStr,
-          end: payload.endStr,
+          end: payload.endStr
       });
+      this.calendarEvents.new = {
+        events: events,
+        color: "#3788d8"
+      };
       this.updateEventsSource();
       this.$store.dispatch('createRange', payload);
     },
     onEventChange(payload) {
       console.log(payload)
       this.$store.dispatch('updateRange', payload);
-      //TODO update the eventsSource with payload, or use the store for updating the eventsSource
+    },
+    onEventDropOrResize(payload) {
+      payload.event.setProp('color', '#3788d8');
     },
     // onEventClick(payload) {
     //   console.log(payload)

From 25b85fcc6816fdfa8a45b36349a81415f634dc4c Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Tue, 31 Aug 2021 14:16:42 +0200
Subject: [PATCH 10/24] rdv: edit calendar ranges: add delete + doc swagger

---
 .../Controller/CalendarRangeAPIController.php |  6 +++
 .../ChillCalendarExtension.php                |  2 +-
 .../Resources/public/chill/scss/calendar.scss | 10 ++++
 .../public/vuejs/MyCalendarRange/App.vue      | 29 ++++++-----
 .../public/vuejs/MyCalendarRange/store.js     | 26 +++++++---
 .../Resources/public/vuejs/_api/api.js        | 41 +++++++++++++--
 .../views/Calendar/listByUser.html.twig       |  1 +
 .../ChillCalendarBundle/chill.api.specs.yaml  | 50 +++++++++++++++++++
 8 files changed, 137 insertions(+), 28 deletions(-)

diff --git a/src/Bundle/ChillCalendarBundle/Controller/CalendarRangeAPIController.php b/src/Bundle/ChillCalendarBundle/Controller/CalendarRangeAPIController.php
index 672e9527c..a60eb98b3 100644
--- a/src/Bundle/ChillCalendarBundle/Controller/CalendarRangeAPIController.php
+++ b/src/Bundle/ChillCalendarBundle/Controller/CalendarRangeAPIController.php
@@ -38,4 +38,10 @@ class CalendarRangeAPIController extends ApiController
         //TODO use also the paginator, eg return $this->serializeCollection('get', $request, $_format, $paginator, $results);
     }
 
+    // public function calendarRangeApi($id, Request $request, string $_format): Response
+    // {
+    //     return $this->addRemoveSomething('calendarRange', $id, $request, $_format, 'calendarRange', CalendarRange::class, [ 'groups' => [ 'read' ] ]);
+    // }
+
+
 }
\ No newline at end of file
diff --git a/src/Bundle/ChillCalendarBundle/DependencyInjection/ChillCalendarExtension.php b/src/Bundle/ChillCalendarBundle/DependencyInjection/ChillCalendarExtension.php
index f4c5411f8..8660fac52 100644
--- a/src/Bundle/ChillCalendarBundle/DependencyInjection/ChillCalendarExtension.php
+++ b/src/Bundle/ChillCalendarBundle/DependencyInjection/ChillCalendarExtension.php
@@ -66,7 +66,7 @@ class ChillCalendarExtension extends Extension implements PrependExtensionInterf
                         '_index' => [
                             'methods' => [
                                 Request::METHOD_GET => true,
-                                Request::METHOD_HEAD => true
+                                Request::METHOD_HEAD => true,
                             ],
                         ],
                         '_entity' => [
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/chill/scss/calendar.scss b/src/Bundle/ChillCalendarBundle/Resources/public/chill/scss/calendar.scss
index b224125f1..a2c0c4b89 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/chill/scss/calendar.scss
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/chill/scss/calendar.scss
@@ -7,4 +7,14 @@ div#calendarControls {
 
 div#fullCalendar{
 
+}
+
+span.calendarRangeItems {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    a {
+        text-decoration: none;
+        padding: 3px;
+    }
 }
\ No newline at end of file
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
index 5f6ed3c0d..320b5a978 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
@@ -2,14 +2,19 @@
   <div>
     <h2 class="chill-red">{{ $t('edit_your_calendar_range') }}</h2>
     <FullCalendar ref="fullCalendar" :options="calendarOptions">
-      <template v-slot:eventContent='arg'>
+      <template v-slot:eventContent='arg' >
+        <span class='calendarRangeItems'>
         <b>{{ arg.timeText }}</b>
-        <i>&nbsp;{{ arg.event.title }}</i>
+          <i>&nbsp;{{ arg.event.title }}</i>
+          <a class="fa fa-fw fa-times"
+            @click.prevent="onDelete(arg.event)">
+          </a>
+        </span>
       </template>
     </FullCalendar>
     <button class="btn btn-save"
-        @click.prevent="onClickSave">
-        {{ $t('action.save')}}
+      @click.prevent="onClickSave">
+      {{ $t('action.save')}}
     </button>
   </div>
 </template>
@@ -52,7 +57,6 @@ export default {
         eventChange: this.onEventChange,
         eventDrop: this.onEventDropOrResize,
         eventResize: this.onEventDropOrResize,
-        // eventClick: this.onEventClick,
         selectMirror: true,
         editable: true,
         weekends: false,
@@ -69,8 +73,6 @@ export default {
       this.fetchData()
     },
     fetchData() {
-      console.log(this.userId);
-
       fetchCalendarRangesByUser(this.userId).then(calendarRanges => new Promise((resolve, reject) => {
         let events = calendarRanges.results.map(i =>
           ({
@@ -123,7 +125,6 @@ export default {
       this.calendarOptions.weekends = !this.calendarOptions.weekends;
     },
     onDateSelect(payload) {
-      console.log(payload)
       let events = this.calendarEvents.new.events;
       events.push({
           start: payload.startStr,
@@ -137,18 +138,17 @@ export default {
       this.$store.dispatch('createRange', payload);
     },
     onEventChange(payload) {
-      console.log(payload)
-      this.$store.dispatch('updateRange', payload);
     },
     onEventDropOrResize(payload) {
       payload.event.setProp('color', '#3788d8');
+      this.$store.dispatch('updateRange', payload);
     },
-    // onEventClick(payload) {
-    //   console.log(payload)
-    //   //TODO update the eventsSource with payload, or use the store for updating the eventsSource
-    // },
     onClickSave(payload){
       this.$store.dispatch('saveRanges', payload);
+    },
+    onDelete(payload){
+      payload.setProp('color', '#dddddd');
+      this.$store.dispatch('deleteRange', payload);
     }
   },
   mounted() {
@@ -156,4 +156,3 @@ export default {
   }
 }
 </script>
-
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
index cec206661..319514fd1 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
@@ -1,6 +1,6 @@
 import 'es6-promise/auto';
 import { createStore } from 'vuex';
-import { postCalendarRange, patchCalendarRange } from '../_api/api';
+import { postCalendarRange, patchCalendarRange, deleteCalendarRange } from '../_api/api';
 
 const debug = process.env.NODE_ENV !== 'production';
 
@@ -20,7 +20,17 @@ const store = createStore({
          });
       },
       addRange(state, payload) {
-         state.newCalendarRanges.push({start: payload.start, end: payload.end});
+         state.newCalendarRanges.push({
+            start: payload.start,
+            end: payload.end
+         });
+      },
+      deleteRange(state, payload) {
+         state.deleteCalendarRanges.push({
+            id: payload.extendedProps.calendarRangeId,
+            start: payload.start,
+            end: payload.end
+         });
       },
       clearNewCalendarRanges(state) {
          state.newCalendarRanges = [];
@@ -41,10 +51,13 @@ const store = createStore({
          console.log('### action updateRange', payload);
          commit('updateRange', payload);
       },
+      deleteRange({ commit }, payload) {
+         console.log('### action deleteRange', payload);
+         commit('deleteRange', payload);
+      },
       saveRanges({ commit }, payload) {
          console.log('### action saveRange', payload);
          console.log(this.state)
-         //TODO: if smthg new in newCalendarRange, postRange(), if smthg to update in updateCalendarRanges, update...
          if (this.state.newCalendarRanges.length > 0){
             this.state.newCalendarRanges.map(cr => {
                postCalendarRange({
@@ -58,13 +71,12 @@ const store = createStore({
                   endDate: {
                      datetime: `${cr.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
                   },
-               }, 'POST');
+               });
             })
             commit('clearNewCalendarRanges');
          }
          if (this.state.updateCalendarRanges.length > 0){
             this.state.updateCalendarRanges.map(cr => {
-               console.log(cr)
                patchCalendarRange(cr.id,
                   {
                   startDate: {
@@ -79,9 +91,7 @@ const store = createStore({
          }
          if (this.state.deleteCalendarRanges.length > 0){
             this.state.deleteCalendarRanges.map(cr => {
-               postCalendarRange({
-                  id: cr.id //TODO check functionning
-               }, 'DELETE');
+               deleteCalendarRange(cr.id);
             })
             commit('deleteUpdateCalendarRanges');
          }
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js
index c062d0d6e..aa3d12f8d 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js
@@ -38,12 +38,12 @@ const fetchCalendar = (mainUserId) => {
 
 /*
 * Endpoint chill_api_single_calendar_range__entity_create
-* method POST or DELETE, post CalendarRange entity
+* method POST, post CalendarRange entity
 */
-const postCalendarRange = (body, method) => {
+const postCalendarRange = (body) => {
    const url = `/api/1.0/calendar/calendar-range.json?`;
    return fetch(url, {
-      method: method,
+      method: 'POST',
       headers: {
          'Content-Type': 'application/json;charset=utf-8'
       },
@@ -73,11 +73,44 @@ const patchCalendarRange = (id, body) => {
    });
 };
 
+/*
+* Endpoint chill_api_single_calendar_range__entity
+* method DELETE, delete CalendarRange entity
+*/
+const deleteCalendarRange = (id) => {
+   const url = `/api/1.0/calendar/calendar-range/${id}.json`;
+   return fetch(url, {
+      method: 'DELETE',
+      headers: {
+         'Content-Type': 'application/json;charset=utf-8'
+      },
+   }).then(response => {
+      if (response.ok) { return response.json(); }
+      throw Error('Error with request resource response');
+   });
+};
+
+// const deleteCalendarRange = (id) => {
+//    const url = `/api/1.0/calendar/calendar-range.json`;
+//    return fetch(url, {
+//       method: 'DELETE',
+//       headers: {
+//          'Content-Type': 'application/json;charset=utf-8'
+//       },
+//       body: JSON.stringify({
+//          id: id
+//       })
+//    }).then(response => {
+//       if (response.ok) { return response.json(); }
+//       throw Error('Error with request resource response');
+//    });
+// };
 
 export {
    fetchCalendarRanges,
    fetchCalendar,
    fetchCalendarRangesByUser,
    postCalendarRange,
-   patchCalendarRange
+   patchCalendarRange,
+   deleteCalendarRange
 };
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/listByUser.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/listByUser.html.twig
index f33e73851..004000fc6 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/listByUser.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/listByUser.html.twig
@@ -19,4 +19,5 @@
 {% block css %}
     {{ parent() }}
     {{ encore_entry_link_tags('vue_calendar') }}
+    {{ encore_entry_link_tags('page_calendar') }}
 {% endblock %}
diff --git a/src/Bundle/ChillCalendarBundle/chill.api.specs.yaml b/src/Bundle/ChillCalendarBundle/chill.api.specs.yaml
index 1ca66375d..ebe0de88d 100644
--- a/src/Bundle/ChillCalendarBundle/chill.api.specs.yaml
+++ b/src/Bundle/ChillCalendarBundle/chill.api.specs.yaml
@@ -120,6 +120,56 @@ paths:
           description: "not found"
         401:
           description: "Unauthorized"
+    patch:
+      tags:
+        - calendar
+      summary: update a calendar range
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                user:
+                  $ref: '#/components/schemas/User'
+                startDate:
+                  $ref: '#/components/schemas/Date'
+                endDate:
+                  $ref: '#/components/schemas/Date'
+      responses:
+        401:
+          description: "Unauthorized"
+        404:
+          description: "Not found"
+        200:
+          description: "OK"
+        422:
+          description: "Unprocessable entity (validation errors)"
+        400:
+          description: "transition cannot be applyed"
+    delete:
+      tags:
+        - calendar
+      summary: "Remove a calendar range"
+      parameters:
+        - name: id
+          in: path
+          required: true
+          description: The calendar range id
+          schema:
+            type: integer
+            format: integer
+            minimum: 1
+      responses:
+        401:
+          description: "Unauthorized"
+        404:
+          description: "Not found"
+        200:
+          description: "OK"
+        422:
+          description: "object with validation errors"
   
   /1.0/calendar/calendar-range-available.json:
     get:

From e1ccc8aba55c02e444d088cd9c5a19d8a7e418a0 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Sun, 5 Sep 2021 11:06:39 +0200
Subject: [PATCH 11/24] =?UTF-8?q?rdv:=20edition=20plage=20de=20disponibili?=
 =?UTF-8?q?t=C3=A9s:=20copy=20events=20to=20next=20day=20(WIP)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../public/vuejs/MyCalendarRange/App.vue      | 65 ++++++++++++++++++-
 .../public/vuejs/MyCalendarRange/i18n.js      |  5 ++
 2 files changed, 68 insertions(+), 2 deletions(-)

diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
index 320b5a978..48d07a74c 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
@@ -16,6 +16,18 @@
       @click.prevent="onClickSave">
       {{ $t('action.save')}}
     </button>
+    <div class="form-check">
+      <input type="checkbox" id="myCalendar" class="form-check-input" v-model="showMyCalendarWidget" />
+      <label class="form-check-label" for="myCalendar">{{ $t('show_my_calendar') }}</label>
+    </div>
+    <div class="form-check">
+      <input type="checkbox" id="weekends" class="form-check-input" @click="toggleWeekends" />
+      <label class="form-check-label" for="weekends">{{ $t('show_weekends') }}</label>
+    </div>
+    <button class="btn btn-action"
+      @click.prevent="copyDay">
+      {{ $t('copy_range_to_next_day')}}
+    </button>
   </div>
 </template>
 
@@ -68,6 +80,17 @@ export default {
       }
     }
   },
+  computed: {
+    showMyCalendarWidget: {
+      set(value) {
+        this.toggleMyCalendar(value);
+        this.updateEventsSource();
+      },
+      get() {
+        return this.showMyCalendar;
+      }
+    }
+   },
   methods: {
     init() {
       this.fetchData()
@@ -143,12 +166,50 @@ export default {
       payload.event.setProp('color', '#3788d8');
       this.$store.dispatch('updateRange', payload);
     },
-    onClickSave(payload){
+    onClickSave(payload) {
       this.$store.dispatch('saveRanges', payload);
     },
-    onDelete(payload){
+    onDelete(payload) {
       payload.setProp('color', '#dddddd');
       this.$store.dispatch('deleteRange', payload);
+    },
+    copyDay(payload) {
+      console.log(payload);
+      // TODO get current day, or get current new events
+      console.log(this.calendarEvents.new);
+      if (this.calendarEvents.new.events) {
+        // TODO copy all events of the **LAST** day and create a array of events for the next day
+        // TODO if showWeekends, copy on the next day always, else, skip weekends
+        let events = this.calendarEvents.new.events.map(i => {
+          let startDate = new Date(new Date(i.start).getTime() + 24*60*60*1000);
+          let endDate = new Date(new Date(i.end).getTime() + 24*60*60*1000);
+          return ({
+            start: startDate.toISOString(),
+            end: endDate.toISOString()
+          })
+        }
+         
+        );
+        let copiedEvents = {
+          events: events,
+          color: "#3788d8"
+        };
+        console.log(copiedEvents)
+        //TODO in a loop : this.$store.dispatch('createRange', payload);
+        
+        let newEvents = this.calendarEvents.new.events;
+        newEvents.push(...copiedEvents.events);
+        this.calendarEvents.new = {
+          events: newEvents,
+          color: "#3788d8"
+        };
+
+        console.log(this.calendarEvents.new.events)
+        this.updateEventsSource();
+      } else {
+        console.log('no new events to copy-paste!')
+      }
+
     }
   },
   mounted() {
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js
index 2f3f698ce..2d7513327 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js
@@ -1,5 +1,10 @@
 const appMessages = {
    fr: {
+      edit_your_calendar_range: "Planifiez vos plages de disponibilités",
+      show_my_calendar: "Afficher mon calendrier",
+      show_weekends: "Afficher les week-ends",
+      copy_range_to_next_day: "Copier les plages du jour au jour suivant",
+      copy_range_to_next_week: "Copier les plages de la semaine à la semaine suivante"
    }
 }
 

From 6bfc180951b5a257968c0dc22877604038f2ab89 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Sun, 5 Sep 2021 22:29:56 +0200
Subject: [PATCH 12/24] rdv: plages de disponibilites: copy the next day +
 refresh after save

---
 .../public/vuejs/MyCalendarRange/App.vue      | 128 ++++++++++++++----
 .../public/vuejs/MyCalendarRange/i18n.js      |   3 +-
 .../public/vuejs/MyCalendarRange/store.js     |  49 ++-----
 3 files changed, 109 insertions(+), 71 deletions(-)

diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
index 48d07a74c..06dcec898 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
@@ -24,10 +24,13 @@
       <input type="checkbox" id="weekends" class="form-check-input" @click="toggleWeekends" />
       <label class="form-check-label" for="weekends">{{ $t('show_weekends') }}</label>
     </div>
-    <button class="btn btn-action"
+    <div>
+    <button class="btn btn-action" 
       @click.prevent="copyDay">
       {{ $t('copy_range_to_next_day')}}
     </button>
+    <p>{{ $t('copy_range_how_to')}}</p>
+    </div>
   </div>
 </template>
 
@@ -38,7 +41,7 @@ import FullCalendar from '@fullcalendar/vue3';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import timeGridPlugin from '@fullcalendar/timegrid';
-import { fetchCalendar, fetchCalendarRangesByUser } from '../_api/api';
+import { deleteCalendarRange, fetchCalendar, fetchCalendarRangesByUser, patchCalendarRange, postCalendarRange } from '../_api/api';
 
 export default {
   name: "App",
@@ -77,7 +80,8 @@ export default {
           center: 'title',
           right: 'dayGridMonth,timeGridWeek,timeGridDay'
         },
-      }
+      },
+      
     }
   },
   computed: {
@@ -89,11 +93,19 @@ export default {
       get() {
         return this.showMyCalendar;
       }
-    }
-   },
+    },
+  },
   methods: {
     init() {
-      this.fetchData()
+      this.fetchData();
+    },
+    resetCalendar() {
+      this.fetchData();
+      this.calendarEvents.new = {
+        events: [],
+        color: "#3788d8"
+      };
+      this.updateEventsSource();
     },
     fetchData() {
       fetchCalendarRangesByUser(this.userId).then(calendarRanges => new Promise((resolve, reject) => {
@@ -157,6 +169,7 @@ export default {
         events: events,
         color: "#3788d8"
       };
+      this.lastNewDate = new Date(payload.startStr);
       this.updateEventsSource();
       this.$store.dispatch('createRange', payload);
     },
@@ -166,50 +179,107 @@ export default {
       payload.event.setProp('color', '#3788d8');
       this.$store.dispatch('updateRange', payload);
     },
-    onClickSave(payload) {
-      this.$store.dispatch('saveRanges', payload);
+    onClickSave(payload) { 
+      if (this.$store.state.newCalendarRanges.length > 0){
+        this.$store.state.newCalendarRanges.map(cr => {
+            postCalendarRange({
+              user: {
+                  type: 'user',
+                  id: window.userId,
+              },
+              startDate: {
+                  datetime: `${cr.start.toISOString().split('.')[0]}+0000`, //should be like "2021-08-20T15:00:00+0200",
+              },
+              endDate: {
+                  datetime: `${cr.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
+              },
+            }).then((_r) => this.resetCalendar());
+        });
+        this.$store.dispatch('clearNewCalendarRanges', payload);
+      }
+      if (this.$store.state.updateCalendarRanges.length > 0){
+        this.$store.state.updateCalendarRanges.map(cr => {
+            patchCalendarRange(cr.id,
+              {
+              startDate: {
+                  datetime: `${cr.start.toISOString().split('.')[0]}+0000`, //should be like "2021-08-20T15:00:00+0200",
+              },
+              endDate: {
+                  datetime: `${cr.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
+              },
+            }).then((_r) => this.resetCalendar());
+        })
+        this.$store.dispatch('clearUpdateCalendarRanges', payload);
+      }
+      if (this.$store.state.deleteCalendarRanges.length > 0){
+        this.$store.state.deleteCalendarRanges.map(cr => {
+            deleteCalendarRange(cr.id).then((_r) => this.resetCalendar());;
+        })
+        this.$store.dispatch('deleteUpdateCalendarRanges', payload);
+      }
+
     },
     onDelete(payload) {
       payload.setProp('color', '#dddddd');
       this.$store.dispatch('deleteRange', payload);
     },
-    copyDay(payload) {
-      console.log(payload);
-      // TODO get current day, or get current new events
+    isSameDay(date1, date2) {
+      return date1.getFullYear() === date2.getFullYear() &&
+          date1.getMonth() === date2.getMonth() &&
+          date1.getDate() === date2.getDate();
+    },
+    isFriday(date) {
+      return date.getDay() === 5
+    },
+    // disableCopyDayButton() { //TODO does not update!
+    //   return this.calendarEvents.new.events.length === 0
+    // },
+    copyDay(_payload) {
       console.log(this.calendarEvents.new);
-      if (this.calendarEvents.new.events) {
-        // TODO copy all events of the **LAST** day and create a array of events for the next day
-        // TODO if showWeekends, copy on the next day always, else, skip weekends
-        let events = this.calendarEvents.new.events.map(i => {
-          let startDate = new Date(new Date(i.start).getTime() + 24*60*60*1000);
-          let endDate = new Date(new Date(i.end).getTime() + 24*60*60*1000);
-          return ({
-            start: startDate.toISOString(),
-            end: endDate.toISOString()
-          })
-        }
-         
+      if (this.calendarEvents.new.events.length > 0) {
+        // Create the copied events
+        let increment = !this.calendarOptions.weekends && this.isFriday(this.lastNewDate) ? 24*60*60*1000*3 : 24*60*60*1000;
+        let events = this.calendarEvents.new.events.filter(
+          i => this.isSameDay(new Date(i.start), this.lastNewDate)).map(
+            i => {
+              let startDate = new Date(new Date(i.start).getTime() + increment);
+              let endDate = new Date(new Date(i.end).getTime() + increment);
+              return ({
+                start: startDate.toISOString(),
+                end: endDate.toISOString()
+              })
+            }
         );
         let copiedEvents = {
           events: events,
           color: "#3788d8"
         };
-        console.log(copiedEvents)
-        //TODO in a loop : this.$store.dispatch('createRange', payload);
-        
+        console.log(copiedEvents);
+ 
+        // Add to the calendar
         let newEvents = this.calendarEvents.new.events;
         newEvents.push(...copiedEvents.events);
         this.calendarEvents.new = {
           events: newEvents,
           color: "#3788d8"
         };
-
-        console.log(this.calendarEvents.new.events)
         this.updateEventsSource();
+        
+        // Set the last new date
+        this.lastNewDate = new Date(copiedEvents.events[copiedEvents.events.length - 1].start);
+
+        // Dispatch in store for saving
+        for (let i = 0; i < copiedEvents.events.length; i++) {
+          let eventObj = {
+            start: new Date(copiedEvents.events[i].start),
+            end: new Date(copiedEvents.events[i].end)
+          }
+          this.$store.dispatch('createRange', eventObj);
+        }
+
       } else {
         console.log('no new events to copy-paste!')
       }
-
     }
   },
   mounted() {
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js
index 2d7513327..8353a0a1f 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js
@@ -4,7 +4,8 @@ const appMessages = {
       show_my_calendar: "Afficher mon calendrier",
       show_weekends: "Afficher les week-ends",
       copy_range_to_next_day: "Copier les plages du jour au jour suivant",
-      copy_range_to_next_week: "Copier les plages de la semaine à la semaine suivante"
+      copy_range_to_next_week: "Copier les plages de la semaine à la semaine suivante",
+      copy_range_how_to: "Créez les plages de disponibilités durant une journée et copiez-les facilement au jour suivant avec ce bouton. Si les week-ends sont cachés, le jour suivant un vendredi sera le lundi."
    }
 }
 
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
index 319514fd1..63130e06f 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
@@ -55,48 +55,15 @@ const store = createStore({
          console.log('### action deleteRange', payload);
          commit('deleteRange', payload);
       },
-      saveRanges({ commit }, payload) {
-         console.log('### action saveRange', payload);
-         console.log(this.state)
-         if (this.state.newCalendarRanges.length > 0){
-            this.state.newCalendarRanges.map(cr => {
-               postCalendarRange({
-                  user: {
-                     type: 'user',
-                     id: window.userId,
-                  },
-                  startDate: {
-                     datetime: `${cr.start.toISOString().split('.')[0]}+0000`, //should be like "2021-08-20T15:00:00+0200",
-                  },
-                  endDate: {
-                     datetime: `${cr.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
-                  },
-               });
-            })
-            commit('clearNewCalendarRanges');
-         }
-         if (this.state.updateCalendarRanges.length > 0){
-            this.state.updateCalendarRanges.map(cr => {
-               patchCalendarRange(cr.id,
-                  {
-                  startDate: {
-                     datetime: `${cr.start.toISOString().split('.')[0]}+0000`, //should be like "2021-08-20T15:00:00+0200",
-                  },
-                  endDate: {
-                     datetime: `${cr.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
-                  },
-               });
-            })
-            commit('clearUpdateCalendarRanges');
-         }
-         if (this.state.deleteCalendarRanges.length > 0){
-            this.state.deleteCalendarRanges.map(cr => {
-               deleteCalendarRange(cr.id);
-            })
-            commit('deleteUpdateCalendarRanges');
-         }
+      clearNewCalendarRanges({ commit }, payload) {
+         commit('clearNewCalendarRanges', payload);
       },
-
+      clearUpdateCalendarRanges({ commit }, payload) {
+         commit('clearUpdateCalendarRanges', payload);
+      },
+      deleteUpdateCalendarRanges({ commit }, payload) {
+         commit('deleteUpdateCalendarRanges', payload);
+      }
   }
 });
 

From 0a274eb2a4bd33d2de8a6521be27f3de69ded9e8 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Mon, 6 Sep 2021 13:28:39 +0200
Subject: [PATCH 13/24] Enable DELETE in the ApiController

---
 .../Controller/CalendarRangeAPIController.php |  6 ---
 .../CRUD/Controller/ApiController.php         | 50 +++++++++++++++++++
 2 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/src/Bundle/ChillCalendarBundle/Controller/CalendarRangeAPIController.php b/src/Bundle/ChillCalendarBundle/Controller/CalendarRangeAPIController.php
index a60eb98b3..672e9527c 100644
--- a/src/Bundle/ChillCalendarBundle/Controller/CalendarRangeAPIController.php
+++ b/src/Bundle/ChillCalendarBundle/Controller/CalendarRangeAPIController.php
@@ -38,10 +38,4 @@ class CalendarRangeAPIController extends ApiController
         //TODO use also the paginator, eg return $this->serializeCollection('get', $request, $_format, $paginator, $results);
     }
 
-    // public function calendarRangeApi($id, Request $request, string $_format): Response
-    // {
-    //     return $this->addRemoveSomething('calendarRange', $id, $request, $_format, 'calendarRange', CalendarRange::class, [ 'groups' => [ 'read' ] ]);
-    // }
-
-
 }
\ No newline at end of file
diff --git a/src/Bundle/ChillMainBundle/CRUD/Controller/ApiController.php b/src/Bundle/ChillMainBundle/CRUD/Controller/ApiController.php
index cab0bcdcb..359ff0384 100644
--- a/src/Bundle/ChillMainBundle/CRUD/Controller/ApiController.php
+++ b/src/Bundle/ChillMainBundle/CRUD/Controller/ApiController.php
@@ -87,6 +87,8 @@ class ApiController extends AbstractCRUDController
                 return $this->entityPut('_entity', $request, $id, $_format);
             case Request::METHOD_POST:
                 return $this->entityPostAction('_entity', $request, $id, $_format);
+            case Request::METHOD_DELETE:
+                return $this->entityDelete('_entity', $request, $id, $_format);
             default:
                 throw new \Symfony\Component\HttpFoundation\Exception\BadRequestException("This method is not implemented");
         }
@@ -217,6 +219,54 @@ class ApiController extends AbstractCRUDController
             $this->getContextForSerializationPostAlter($action, $request, $_format, $entity)
         );
     }
+    public function entityDelete($action, Request $request, $id, string $_format): Response
+    {
+        $entity = $this->getEntity($action, $id, $request, $_format);
+
+        if (NULL === $entity) {
+            throw $this->createNotFoundException(sprintf("The %s with id %s "
+                . "is not found", $this->getCrudName(), $id));
+        }
+
+        $response = $this->checkACL($action, $request, $_format, $entity);
+        if ($response instanceof Response) {
+            return $response;
+        }
+
+        $response = $this->onPostCheckACL($action, $request, $_format, $entity);
+        if ($response instanceof Response) {
+            return $response;
+        }
+
+        $response = $this->onBeforeSerialize($action, $request, $_format, $entity);
+        if ($response instanceof Response) {
+            return $response;
+        }
+
+        $errors = $this->validate($action, $request, $_format, $entity);
+
+        $response = $this->onAfterValidation($action, $request, $_format, $entity, $errors);
+        if ($response instanceof Response) {
+            return $response;
+        }
+
+        if ($errors->count() > 0) {
+            $response = $this->json($errors);
+            $response->setStatusCode(Response::HTTP_UNPROCESSABLE_ENTITY);
+
+            return $response;
+        }
+
+        $this->getDoctrine()->getManager()->remove($entity);
+        $this->getDoctrine()->getManager()->flush();
+
+        $response = $this->onAfterFlush($action, $request, $_format, $entity, $errors);
+        if ($response instanceof Response) {
+            return $response;
+        }
+
+        return $this->json(Response::HTTP_OK);
+    }
 
     protected function onAfterValidation(string $action, Request $request, string $_format, $entity, ConstraintViolationListInterface $errors, array $more = []): ?Response
     {

From 82e76d7d5a208a93df8887d85f22223ef16d76a9 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Mon, 6 Sep 2021 14:50:48 +0200
Subject: [PATCH 14/24] =?UTF-8?q?rdv:=20plages=20de=20disponibilit=C3=A9s:?=
 =?UTF-8?q?=20various=20UX/UI=20improvements?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../public/vuejs/MyCalendarRange/App.vue      | 91 +++++++++++++++----
 .../public/vuejs/MyCalendarRange/i18n.js      |  7 +-
 .../Resources/public/vuejs/_api/api.js        | 16 ----
 3 files changed, 77 insertions(+), 37 deletions(-)

diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
index 06dcec898..1c0e7c4b4 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
@@ -1,6 +1,16 @@
 <template>
   <div>
     <h2 class="chill-red">{{ $t('edit_your_calendar_range') }}</h2>
+
+    <div class="form-check">
+      <input type="checkbox" id="myCalendar" class="form-check-input" v-model="showMyCalendarWidget" />
+      <label class="form-check-label" for="myCalendar">{{ $t('show_my_calendar') }}</label>
+    </div>
+    <div class="form-check">
+      <input type="checkbox" id="weekends" class="form-check-input" @click="toggleWeekends" />
+      <label class="form-check-label" for="weekends">{{ $t('show_weekends') }}</label>
+    </div>
+
     <FullCalendar ref="fullCalendar" :options="calendarOptions">
       <template v-slot:eventContent='arg' >
         <span class='calendarRangeItems'>
@@ -12,24 +22,52 @@
         </span>
       </template>
     </FullCalendar>
-    <button class="btn btn-save"
-      @click.prevent="onClickSave">
-      {{ $t('action.save')}}
-    </button>
-    <div class="form-check">
-      <input type="checkbox" id="myCalendar" class="form-check-input" v-model="showMyCalendarWidget" />
-      <label class="form-check-label" for="myCalendar">{{ $t('show_my_calendar') }}</label>
-    </div>
-    <div class="form-check">
-      <input type="checkbox" id="weekends" class="form-check-input" @click="toggleWeekends" />
-      <label class="form-check-label" for="weekends">{{ $t('show_weekends') }}</label>
+    <div>
+      <button class="btn btn-save" :disabled="!dirty"
+        @click.prevent="onClickSave">
+        {{ $t('action.save')}}
+      </button>
+      <span v-if="flag.loading" class="loading">
+        <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
+        <span class="sr-only">{{ $t('loading') }}</span>
+      </span>
     </div>
     <div>
-    <button class="btn btn-action" 
-      @click.prevent="copyDay">
-      {{ $t('copy_range_to_next_day')}}
-    </button>
-    <p>{{ $t('copy_range_how_to')}}</p>
+      <button v-if="disableCopyDayButton" class="btn btn-action" disabled>
+        {{ $t('copy_range_to_next_day')}}
+      </button>
+      <button v-if="!disableCopyDayButton" class="btn btn-action" 
+        @click.prevent="copyDay">
+        {{ $t('copy_range_from_day')}} {{this.lastNewDate.toLocaleDateString()}} {{ $t('to_the_next_day')}}
+      </button>
+      <p>{{ $t('copy_range_how_to')}}</p>
+    </div>
+
+    <div>
+      <div v-if="newCalendarRanges.length > 0">
+        <h4>{{ $t('new_range_to_save') }}</h4>
+        <ul>
+          <li v-for="i in newCalendarRanges" :key="i.start">
+            {{ i.start.toLocaleString() }} - {{ i.end.toLocaleString() }}
+          </li>
+        </ul>
+      </div>
+      <div v-if="updateCalendarRanges.length > 0">
+        <h4>{{ $t('update_range_to_save') }}</h4>
+        <ul>
+          <li v-for="i in updateCalendarRanges" :key="i.start">
+            {{ i.start.toLocaleString() }} - {{ i.end.toLocaleString() }}
+          </li>
+        </ul>
+      </div>
+      <div v-if="deleteCalendarRanges.length > 0">
+        <h4>{{ $t('delete_range_to_save') }}</h4>
+        <ul>
+          <li v-for="i in deleteCalendarRanges" :key="i.start">
+            {{ i.start.toLocaleString() }} - {{ i.end.toLocaleString() }}
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </template>
@@ -42,6 +80,7 @@ import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import { deleteCalendarRange, fetchCalendar, fetchCalendarRangesByUser, patchCalendarRange, postCalendarRange } from '../_api/api';
+import { mapState } from 'vuex';
 
 export default {
   name: "App",
@@ -51,6 +90,9 @@ export default {
   data() {
     return {
       errorMsg: [],
+      flag: {
+        loading: false
+      },
       userId: window.userId,
       showMyCalendar: true,
       calendarEvents: {
@@ -61,6 +103,8 @@ export default {
            color: "#3788d8"
          }
       },
+      lastNewDate: null,
+      disableCopyDayButton: true,
       calendarOptions: {
         locale: frLocale,
         plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin ],
@@ -85,6 +129,12 @@ export default {
     }
   },
   computed: {
+    ...mapState({
+      newCalendarRanges: state => state.newCalendarRanges,
+      updateCalendarRanges: state => state.updateCalendarRanges,
+      deleteCalendarRanges: state => state.deleteCalendarRanges,
+      dirty: state => state.newCalendarRanges.length > 0 || state.updateCalendarRanges.length > 0 || state.deleteCalendarRanges.length > 0 
+    }),
     showMyCalendarWidget: {
       set(value) {
         this.toggleMyCalendar(value);
@@ -108,6 +158,7 @@ export default {
       this.updateEventsSource();
     },
     fetchData() {
+      this.flag.loading = true;
       fetchCalendarRangesByUser(this.userId).then(calendarRanges => new Promise((resolve, reject) => {
         let events = calendarRanges.results.map(i =>
           ({
@@ -138,6 +189,7 @@ export default {
           };
           this.calendarEvents.userCalendar = calendarEventsCurrentUser;
           this.updateEventsSource();
+          this.flag.loading = false;
           resolve();
         }));
 
@@ -169,6 +221,7 @@ export default {
         events: events,
         color: "#3788d8"
       };
+      this.disableCopyDayButton = false;
       this.lastNewDate = new Date(payload.startStr);
       this.updateEventsSource();
       this.$store.dispatch('createRange', payload);
@@ -179,7 +232,8 @@ export default {
       payload.event.setProp('color', '#3788d8');
       this.$store.dispatch('updateRange', payload);
     },
-    onClickSave(payload) { 
+    onClickSave(payload) {
+      this.flag.loading = true;
       if (this.$store.state.newCalendarRanges.length > 0){
         this.$store.state.newCalendarRanges.map(cr => {
             postCalendarRange({
@@ -231,9 +285,6 @@ export default {
     isFriday(date) {
       return date.getDay() === 5
     },
-    // disableCopyDayButton() { //TODO does not update!
-    //   return this.calendarEvents.new.events.length === 0
-    // },
     copyDay(_payload) {
       console.log(this.calendarEvents.new);
       if (this.calendarEvents.new.events.length > 0) {
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js
index 8353a0a1f..96eca1d6a 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js
@@ -4,8 +4,13 @@ const appMessages = {
       show_my_calendar: "Afficher mon calendrier",
       show_weekends: "Afficher les week-ends",
       copy_range_to_next_day: "Copier les plages du jour au jour suivant",
+      copy_range_from_day: "Copier les plages du ",
+      to_the_next_day: " au jour suivant",
       copy_range_to_next_week: "Copier les plages de la semaine à la semaine suivante",
-      copy_range_how_to: "Créez les plages de disponibilités durant une journée et copiez-les facilement au jour suivant avec ce bouton. Si les week-ends sont cachés, le jour suivant un vendredi sera le lundi."
+      copy_range_how_to: "Créez les plages de disponibilités durant une journée et copiez-les facilement au jour suivant avec ce bouton. Si les week-ends sont cachés, le jour suivant un vendredi sera le lundi.",
+      new_range_to_save: "Nouvelles plages à enregistrer",
+      update_range_to_save: "Plages à modifier",
+      delete_range_to_save: "Plages à supprimer"
    }
 }
 
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js
index aa3d12f8d..7aad8ace2 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_api/api.js
@@ -90,22 +90,6 @@ const deleteCalendarRange = (id) => {
    });
 };
 
-// const deleteCalendarRange = (id) => {
-//    const url = `/api/1.0/calendar/calendar-range.json`;
-//    return fetch(url, {
-//       method: 'DELETE',
-//       headers: {
-//          'Content-Type': 'application/json;charset=utf-8'
-//       },
-//       body: JSON.stringify({
-//          id: id
-//       })
-//    }).then(response => {
-//       if (response.ok) { return response.json(); }
-//       throw Error('Error with request resource response');
-//    });
-// };
-
 export {
    fetchCalendarRanges,
    fetchCalendar,

From c42ec1d49353530f34a8b999f548561c0f13895a Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Mon, 6 Sep 2021 15:37:54 +0200
Subject: [PATCH 15/24] rdv: plages de disponibilites: remove new events before
 it was saved

---
 .../public/vuejs/MyCalendarRange/App.vue      | 24 +++++++++++++++----
 .../public/vuejs/MyCalendarRange/store.js     | 15 +++++++++---
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
index 1c0e7c4b4..8572ff4fa 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
@@ -133,7 +133,7 @@ export default {
       newCalendarRanges: state => state.newCalendarRanges,
       updateCalendarRanges: state => state.updateCalendarRanges,
       deleteCalendarRanges: state => state.deleteCalendarRanges,
-      dirty: state => state.newCalendarRanges.length > 0 || state.updateCalendarRanges.length > 0 || state.deleteCalendarRanges.length > 0 
+      dirty: state => state.newCalendarRanges.length > 0 || state.updateCalendarRanges.length > 0 || state.deleteCalendarRanges.length > 0
     }),
     showMyCalendarWidget: {
       set(value) {
@@ -269,13 +269,29 @@ export default {
         this.$store.state.deleteCalendarRanges.map(cr => {
             deleteCalendarRange(cr.id).then((_r) => this.resetCalendar());;
         })
-        this.$store.dispatch('deleteUpdateCalendarRanges', payload);
+        this.$store.dispatch('clearDeleteCalendarRanges', payload);
       }
 
     },
     onDelete(payload) {
-      payload.setProp('color', '#dddddd');
-      this.$store.dispatch('deleteRange', payload);
+      if (payload.extendedProps.hasOwnProperty("calendarRangeId")) {
+        payload.setProp('color', '#dddddd');
+        this.$store.dispatch('deleteRange', payload);
+      } else {
+        let newEvents = this.calendarEvents.new.events;
+        let filterEvents = newEvents.filter((e) => 
+          e.start !== payload.startStr && e.end !== payload.endStr
+        );
+        this.calendarEvents.new = {
+          events: filterEvents,
+          color: "#3788d8"
+        };
+
+        this.$store.dispatch('removeNewCalendarRanges', payload);
+
+        this.updateEventsSource();
+      }
+
     },
     isSameDay(date1, date2) {
       return date1.getFullYear() === date2.getFullYear() &&
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
index 63130e06f..7db701a0d 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
@@ -38,8 +38,14 @@ const store = createStore({
       clearUpdateCalendarRanges(state) {
          state.updateCalendarRanges = [];
       },
-      deleteUpdateCalendarRanges(state) {
+      clearDeleteCalendarRanges(state) {
          state.deleteCalendarRanges = [];
+      },
+      removeNewCalendarRanges(state, payload) {
+         let filteredCollection = state.newCalendarRanges.filter(
+            (e) => e.start.toString() !== payload.start.toString() && e.end.toString() !== payload.end.toString()
+         )
+         state.newCalendarRanges = filteredCollection;
       }
    },
    actions: {
@@ -61,8 +67,11 @@ const store = createStore({
       clearUpdateCalendarRanges({ commit }, payload) {
          commit('clearUpdateCalendarRanges', payload);
       },
-      deleteUpdateCalendarRanges({ commit }, payload) {
-         commit('deleteUpdateCalendarRanges', payload);
+      clearDeleteCalendarRanges({ commit }, payload) {
+         commit('clearDeleteCalendarRanges', payload);
+      },
+      removeNewCalendarRanges({ commit }, payload) {
+         commit('removeNewCalendarRanges', payload);
       }
   }
 });

From 0ab53f465955e5c0809202212aaaff939c4d1ac0 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Fri, 10 Sep 2021 09:16:02 +0200
Subject: [PATCH 16/24] rdv: add header

---
 .../Resources/views/Calendar/list.html.twig                    | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig
index 71b2e98a6..331544854 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig
@@ -18,6 +18,9 @@
     <div id="myCalendar"></div>
 {% endif %}
 
+{% if context == 'user' %}
+    <h2 class="chill-red">{{ 'My calendar list' |trans }}</h2>
+{% endif %}
 
 {% if calendarItems|length == 0 %}
     <p class="chill-no-data-statement">

From 29c148f92457ac64f8ac8ba8d2d2eedc1c384eb9 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Fri, 10 Sep 2021 13:38:13 +0200
Subject: [PATCH 17/24] rdv: can remove from delete calendar ranges

---
 .../public/vuejs/MyCalendarRange/App.vue       | 18 +++++++++++++-----
 .../public/vuejs/MyCalendarRange/store.js      | 13 +++++++++++--
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
index 8572ff4fa..0a7d83db6 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
@@ -17,7 +17,7 @@
         <b>{{ arg.timeText }}</b>
           <i>&nbsp;{{ arg.event.title }}</i>
           <a class="fa fa-fw fa-times"
-            @click.prevent="onDelete(arg.event)">
+            @click.prevent="onClickDelete(arg.event)">
           </a>
         </span>
       </template>
@@ -164,7 +164,8 @@ export default {
           ({
             start: i.startDate.datetime,
             end: i.endDate.datetime,
-            calendarRangeId: i.id
+            calendarRangeId: i.id,
+            toDelete: 0
           })
         );
         let calendarRangeEvents = {
@@ -273,10 +274,17 @@ export default {
       }
 
     },
-    onDelete(payload) {
+    onClickDelete(payload) {
       if (payload.extendedProps.hasOwnProperty("calendarRangeId")) {
-        payload.setProp('color', '#dddddd');
-        this.$store.dispatch('deleteRange', payload);
+        if (payload.extendedProps.toDelete === 1) {
+          payload.setExtendedProp('toDelete', 0)
+          payload.setProp('color', '#79bafc');
+          this.$store.dispatch('removeFromDeleteRange', payload);
+        } else {
+          payload.setExtendedProp('toDelete', 1)
+          payload.setProp('color', '#dddddd');
+          this.$store.dispatch('deleteRange', payload);
+        }
       } else {
         let newEvents = this.calendarEvents.new.events;
         let filterEvents = newEvents.filter((e) => 
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
index 7db701a0d..997f95b11 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
@@ -46,7 +46,13 @@ const store = createStore({
             (e) => e.start.toString() !== payload.start.toString() && e.end.toString() !== payload.end.toString()
          )
          state.newCalendarRanges = filteredCollection;
-      }
+      },
+      removeFromDeleteRange(state, payload) {
+         let filteredCollection = state.deleteCalendarRanges.filter(
+            (e) => e.start.toString() !== payload.start.toString() && e.end.toString() !== payload.end.toString()
+         )
+         state.deleteCalendarRanges = filteredCollection;
+      },
    },
    actions: {
       createRange({ commit }, payload) {
@@ -72,7 +78,10 @@ const store = createStore({
       },
       removeNewCalendarRanges({ commit }, payload) {
          commit('removeNewCalendarRanges', payload);
-      }
+      },
+      removeFromDeleteRange({ commit }, payload) {
+         commit('removeFromDeleteRange', payload);
+      },
   }
 });
 

From f6f24d0bebe4225322332e79ca72d376ada01ef7 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Fri, 10 Sep 2021 14:06:35 +0200
Subject: [PATCH 18/24] rdv: style my calendar

---
 .../public/vuejs/MyCalendarRange/App.vue      | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
index 0a7d83db6..56d914b95 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
@@ -169,9 +169,10 @@ export default {
           })
         );
         let calendarRangeEvents = {
-              events: events,
-              color: '#79bafc',
-              textColor: '#444444'
+          events: events,
+          borderColor: "#3788d8",
+          backgroundColor: '#ffffff',
+          textColor: '#444444',
         };
         this.calendarEvents.userCalendarRange = calendarRangeEvents;
 
@@ -220,7 +221,9 @@ export default {
       });
       this.calendarEvents.new = {
         events: events,
-        color: "#3788d8"
+        borderColor: "#3788d8",
+        backgroundColor: '#fffadf ',
+        textColor: '#444444',
       };
       this.disableCopyDayButton = false;
       this.lastNewDate = new Date(payload.startStr);
@@ -230,7 +233,9 @@ export default {
     onEventChange(payload) {
     },
     onEventDropOrResize(payload) {
-      payload.event.setProp('color', '#3788d8');
+      payload.event.setProp('borderColor', '#3788d8');
+      payload.event.setProp('backgroundColor', '#fffadf');
+      payload.event.setProp('textColor', '#444444');
       this.$store.dispatch('updateRange', payload);
     },
     onClickSave(payload) {
@@ -278,11 +283,11 @@ export default {
       if (payload.extendedProps.hasOwnProperty("calendarRangeId")) {
         if (payload.extendedProps.toDelete === 1) {
           payload.setExtendedProp('toDelete', 0)
-          payload.setProp('color', '#79bafc');
+          payload.setProp('borderColor', '#79bafc');
           this.$store.dispatch('removeFromDeleteRange', payload);
         } else {
           payload.setExtendedProp('toDelete', 1)
-          payload.setProp('color', '#dddddd');
+          payload.setProp('borderColor', '#dddddd');
           this.$store.dispatch('deleteRange', payload);
         }
       } else {

From 855686c0bad80d08886cdb593a1945fb87ca821f Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Fri, 10 Sep 2021 17:31:19 +0200
Subject: [PATCH 19/24] rdv: add content of calendar item in a modal

---
 .../ChillCalendarBundle/Entity/Calendar.php   |   5 +
 .../public/vuejs/MyCalendarRange/App.vue      |  94 ++++++-
 .../public/vuejs/MyCalendarRange/i18n.js      |   4 +-
 .../Resources/views/Calendar/list.html.twig   | 231 +++++++++---------
 4 files changed, 210 insertions(+), 124 deletions(-)

diff --git a/src/Bundle/ChillCalendarBundle/Entity/Calendar.php b/src/Bundle/ChillCalendarBundle/Entity/Calendar.php
index 0663ca08b..fbde03af2 100644
--- a/src/Bundle/ChillCalendarBundle/Entity/Calendar.php
+++ b/src/Bundle/ChillCalendarBundle/Entity/Calendar.php
@@ -37,12 +37,14 @@ class Calendar
      * @ORM\Id
      * @ORM\GeneratedValue
      * @ORM\Column(type="integer")
+     * @Serializer\Groups({"calendar:read"})
      */
     private ?int $id;
 
     /**
      * @ORM\ManyToOne(targetEntity="Chill\MainBundle\Entity\User")
      * @Groups({"read"})
+     * @Serializer\Groups({"calendar:read"})
      */
     private User $user;
 
@@ -64,6 +66,7 @@ class Calendar
      *     cascade={"persist", "remove", "merge", "detach"})
      * @ORM\JoinTable(name="chill_calendar.calendar_to_persons")
      * @Groups({"read"})
+     * @Serializer\Groups({"calendar:read"})
      */
     private Collection $persons;
 
@@ -74,6 +77,7 @@ class Calendar
      *     cascade={"persist", "remove", "merge", "detach"})
      * @ORM\JoinTable(name="chill_calendar.calendar_to_thirdparties")
      * @Groups({"read"})
+     * @Serializer\Groups({"calendar:read"})
      */
     private Collection $professionals;
 
@@ -89,6 +93,7 @@ class Calendar
 
     /**
      * @ORM\Embedded(class=CommentEmbeddable::class, columnPrefix="comment_")
+     * @Serializer\Groups({"calendar:read"})
      */
     private CommentEmbeddable $comment;
 
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
index 56d914b95..214b8d941 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
@@ -14,9 +14,9 @@
     <FullCalendar ref="fullCalendar" :options="calendarOptions">
       <template v-slot:eventContent='arg' >
         <span class='calendarRangeItems'>
-        <b>{{ arg.timeText }}</b>
+          <b>{{ arg.timeText }}</b>
           <i>&nbsp;{{ arg.event.title }}</i>
-          <a class="fa fa-fw fa-times"
+          <a v-if=!arg.event.extendedProps.myCalendar class="fa fa-fw fa-times"
             @click.prevent="onClickDelete(arg.event)">
           </a>
         </span>
@@ -70,6 +70,47 @@
       </div>
     </div>
   </div>
+
+  <teleport to="body">
+    <modal v-if="modal.showModal"
+      :modalDialogClass="modal.modalDialogClass"
+      @close="modal.showModal = false">
+
+        <template v-slot:header>
+          <h2 class="modal-title"> {{ this.myCalendarClickedEvent.start.toLocaleString() }} - {{ this.myCalendarClickedEvent.end.toLocaleString() }}</h2>
+        </template>
+
+        <template v-slot:body>
+          <p>{{ $t('by')}} {{this.myCalendarClickedEvent.user.username }}</p>
+          <p>{{ $t('main_user_concerned') }} : {{ this.myCalendarClickedEvent.mainUser.username }}</p>
+          <p v-if="myCalendarClickedEvent.comment.length > 0" >{{ this.myCalendarClickedEvent.comment }}</p>
+        </template>
+
+        <template v-slot:footer>
+          <ul class="record_actions">
+            <li>
+              <a
+                class="btn btn-show"
+                :href=myCalendarEventShowLink() >
+              </a>
+            </li>
+            <li>
+              <a
+                class="btn btn-update"
+                :href=myCalendarEventUpdateLink() >
+              </a>
+            </li>
+            <li>
+              <a
+                class="btn btn-delete"
+                :href=myCalendarEventDeleteLink() >
+              </a>
+            </li>
+          </ul>
+        </template>
+
+      </modal>
+   </teleport>
 </template>
 
 <script>
@@ -79,22 +120,29 @@ import FullCalendar from '@fullcalendar/vue3';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import timeGridPlugin from '@fullcalendar/timegrid';
+import Modal from 'ChillMainAssets/vuejs/_components/Modal';
 import { deleteCalendarRange, fetchCalendar, fetchCalendarRangesByUser, patchCalendarRange, postCalendarRange } from '../_api/api';
 import { mapState } from 'vuex';
 
 export default {
   name: "App",
   components: {
-    FullCalendar
+    FullCalendar,
+    Modal
   },
   data() {
     return {
       errorMsg: [],
+      modal: {
+        showModal: false,
+        modalDialogClass: "modal-dialog-scrollable modal-m"
+      },
       flag: {
         loading: false
       },
       userId: window.userId,
       showMyCalendar: true,
+      myCalendarClickedEvent: null,
       calendarEvents: {
          userCalendar: null,
          userCalendarRange: null,
@@ -116,6 +164,7 @@ export default {
         eventChange: this.onEventChange,
         eventDrop: this.onEventDropOrResize,
         eventResize: this.onEventDropOrResize,
+        eventClick: this.onEventClick,
         selectMirror: true,
         editable: true,
         weekends: false,
@@ -149,6 +198,18 @@ export default {
     init() {
       this.fetchData();
     },
+    openModal() {
+      this.modal.showModal = true;
+    },
+    myCalendarEventShowLink() {
+      return `/fr/calendar/ ${this.myCalendarClickedEvent.id}/show?user_id=${ this.userId }`
+    },
+    myCalendarEventUpdateLink() {
+      return `/fr/calendar/ ${this.myCalendarClickedEvent.id}/edit?user_id=${ this.userId }`
+    },
+    myCalendarEventDeleteLink() {
+      return `/fr/calendar/ ${this.myCalendarClickedEvent.id}/delete?user_id=${ this.userId }`
+    },
     resetCalendar() {
       this.fetchData();
       this.calendarEvents.new = {
@@ -179,8 +240,15 @@ export default {
         fetchCalendar(this.userId).then(calendar => new Promise((resolve, reject) => {
           let events = calendar.results.map(i =>
             ({
+              myCalendar: true,
+              calendarId: i.id,
               start: i.startDate.datetime,
               end: i.endDate.datetime,
+              user: i.user,
+              mainUser: i.mainUser,
+              persons: i.persons,
+              professionals: i.professionals,
+              comment: i.comment
             })
           );
           let calendarEventsCurrentUser = {
@@ -238,6 +306,26 @@ export default {
       payload.event.setProp('textColor', '#444444');
       this.$store.dispatch('updateRange', payload);
     },
+    onEventClick(payload) {
+      console.log(payload)
+      console.log(payload.event)
+      console.log(payload.event.extendedProps)
+
+      if (payload.event.extendedProps.myCalendar) {
+        this.myCalendarClickedEvent = {
+          id: payload.event.extendedProps.calendarId,
+          start: payload.event.start,
+          end: payload.event.end,
+          user: payload.event.extendedProps.user,
+          mainUser: payload.event.extendedProps.mainUser,
+          persons: payload.event.extendedProps.persons,
+          professionals: payload.event.extendedProps.professionals,
+          comment: payload.event.extendedProps.comment
+        };
+        console.log(this.myCalendarClickedEvent)
+        this.openModal();
+      }
+    },
     onClickSave(payload) {
       this.flag.loading = true;
       if (this.$store.state.newCalendarRanges.length > 0){
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js
index 96eca1d6a..2305b307b 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js
@@ -10,7 +10,9 @@ const appMessages = {
       copy_range_how_to: "Créez les plages de disponibilités durant une journée et copiez-les facilement au jour suivant avec ce bouton. Si les week-ends sont cachés, le jour suivant un vendredi sera le lundi.",
       new_range_to_save: "Nouvelles plages à enregistrer",
       update_range_to_save: "Plages à modifier",
-      delete_range_to_save: "Plages à supprimer"
+      delete_range_to_save: "Plages à supprimer",
+      by: "Par",
+      main_user_concerned: "Utilisateur concerné"
    }
 }
 
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig
index 331544854..80aba0d0c 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig
@@ -16,139 +16,130 @@
 
 {% if context == 'user' %}
     <div id="myCalendar"></div>
-{% endif %}
-
-{% if context == 'user' %}
-    <h2 class="chill-red">{{ 'My calendar list' |trans }}</h2>
-{% endif %}
-
-{% if calendarItems|length == 0 %}
-    <p class="chill-no-data-statement">
-        {{ "There is no calendar items."|trans }}
-        <a href="{{ path('chill_calendar_calendar_new', {'user_id': user_id, 'accompanying_period_id': accompanying_course_id}) }}" class="btn btn-create button-small"></a>
-    </p>
 {% else %}
 
-<div class="flex-table list-records context-{{ context }}">
+    {% if calendarItems|length == 0 %}
+        <p class="chill-no-data-statement">
+            {{ "There is no calendar items."|trans }}
+            <a href="{{ path('chill_calendar_calendar_new', {'user_id': user_id, 'accompanying_period_id': accompanying_course_id}) }}" class="btn btn-create button-small"></a>
+        </p>
+    {% else %}
 
-    {% for calendar in calendarItems %}
+    <div class="flex-table list-records context-{{ context }}">
 
-        <div class="item-bloc">
-            <div class="item-row main">
-                <div class="item-col">
+        {% for calendar in calendarItems %}
+
+            <div class="item-bloc">
+                <div class="item-row main">
+                    <div class="item-col">
 
 
-                    {% if calendar.startDate and calendar.endDate %}
-                        {% if calendar.endDate.diff(calendar.startDate).days >= 1 %}
-                            <h3>{{ "From the day"|trans }} {{ calendar.startDate|format_datetime('medium', 'short') }} </h3>
-                            <h3>{{ "to the day"|trans }} {{ calendar.endDate|format_datetime('medium', 'short') }}</h3>
-                        {% else %}
-                            <h3>{{ calendar.startDate|format_date('full') }} </h3>
-                            <h3>{{ calendar.startDate|format_datetime('none', 'short', locale='fr') }} - {{ calendar.endDate|format_datetime('none', 'short', locale='fr') }}</h3>
+                        {% if calendar.startDate and calendar.endDate %}
+                            {% if calendar.endDate.diff(calendar.startDate).days >= 1 %}
+                                <h3>{{ "From the day"|trans }} {{ calendar.startDate|format_datetime('medium', 'short') }} </h3>
+                                <h3>{{ "to the day"|trans }} {{ calendar.endDate|format_datetime('medium', 'short') }}</h3>
+                            {% else %}
+                                <h3>{{ calendar.startDate|format_date('full') }} </h3>
+                                <h3>{{ calendar.startDate|format_datetime('none', 'short', locale='fr') }} - {{ calendar.endDate|format_datetime('none', 'short', locale='fr') }}</h3>
+
+                                <div class="duration">
+                                    <p>
+                                        <i class="fa fa-fw fa-hourglass-end"></i>
+                                        {{ calendar.endDate.diff(calendar.startDate)|date("%H:%M")}}
+                                    </p>
+                                </div>
+                            {% endif %}
 
-                            <div class="duration">
-                                <p>
-                                    <i class="fa fa-fw fa-hourglass-end"></i>
-                                    {{ calendar.endDate.diff(calendar.startDate)|date("%H:%M")}}
-                                </p>
-                            </div>
                         {% endif %}
 
+                        
+                    </div>
+                    <div class="item-col">
+                        <ul class="list-content">
+                            {% if calendar.user %}
+                            <li>
+                                <b>{{ 'by'|trans }}{{ calendar.user.usernameCanonical }}</b>
+                            </li>
+                            {% endif %}
+
+                            {% if calendar.mainUser is not empty %}
+                            <li>
+                                <b>{{ 'main user concerned'|trans }}: {{ calendar.mainUser.usernameCanonical }}</b>
+                            </li>
+                            {% endif %}
+
+
+                            <li>
+                                {%- if calendar.comment.isEmpty -%}
+                                    <span class="chill-no-data-statement">{{ 'No comments'|trans }}</span>
+                                {%- else -%}
+                                    {{ calendar.comment|chill_entity_render_box }}
+                                {%- endif -%}
+                            </li>
+
+
+                        </ul>
+                        <ul class="record_actions">
+                            <li>
+                                <a href="{{ path('chill_calendar_calendar_show', { 'id': calendar.id, 'user_id': user_id, 'accompanying_period_id': accompanying_course_id }) }}" class="btn btn-show "></a>
+                            </li>
+                            {# TOOD
+                            {% if is_granted('CHILL_ACTIVITY_UPDATE', calendar) %}
+                            #}
+                            <li>
+                                <a href="{{ path('chill_calendar_calendar_edit', { 'id': calendar.id, 'user_id': user_id, 'accompanying_period_id': accompanying_course_id }) }}" class="btn btn-update "></a>
+                            </li>
+                            {# TOOD
+                            {% endif %}
+                            {% if is_granted('CHILL_ACTIVITY_DELETE', calendar) %}
+                            #}
+                            <li>
+                                <a href="{{ path('chill_calendar_calendar_delete', { 'id': calendar.id, 'user_id' : user_id, 'accompanying_period_id': accompanying_course_id } ) }}" class="btn btn-delete "></a>
+                            </li>
+                            {#
+                            {% endif %}
+                            #}
+                        </ul>
+                    </div>
+                </div>
+
+                {%
+                    if calendar.comment.comment is not empty
+                    or calendar.users|length > 0
+                    or calendar.thirdParties|length > 0
+                    or calendar.users|length > 0
+                %}
+                <div class="item-row details">
+                    <div class="item-col">
+
+                        {% include 'ChillActivityBundle:Activity:concernedGroups.html.twig' with {'context': context, 'with_display': 'row', 'entity': calendar } %}
+                    </div>
+
+                    {% if calendar.comment.comment is not empty %}
+                    <div class="item-col comment">
+                        {{ calendar.comment|chill_entity_render_box( { 'limit_lines': 3, 'metadata': false } ) }}
+                    </div>
                     {% endif %}
-
-                    {% if context == 'user' and calendar.accompanyingPeriod is not empty %}
-                        <a class="btn btn-sm btn-outline-primary"
-                            title="{{ 'Period number %number%'|trans({'%number%': calendar.accompanyingPeriod.id}) }}"
-                            href="{{ chill_path_add_return_path(
-                                "chill_user_accompanying_course_index",
-                                { 'accompanying_period_id': calendar.accompanyingPeriod.id }
-                            ) }}"><i class="fa fa-random"></i>
-                        </a>
-                    {% endif %}
-
-                    
-                </div>
-                <div class="item-col">
-                    <ul class="list-content">
-                        {% if calendar.user %}
-                        <li>
-                            <b>{{ 'by'|trans }}{{ calendar.user.usernameCanonical }}</b>
-                        </li>
-                        {% endif %}
-
-                        {% if calendar.mainUser is not empty %}
-                        <li>
-                            <b>{{ 'main user concerned'|trans }}: {{ calendar.mainUser.usernameCanonical }}</b>
-                        </li>
-                        {% endif %}
-
-
-                        <li>
-                            {%- if calendar.comment.isEmpty -%}
-                                <span class="chill-no-data-statement">{{ 'No comments'|trans }}</span>
-                            {%- else -%}
-                                {{ calendar.comment|chill_entity_render_box }}
-                            {%- endif -%}
-                        </li>
-
-
-                    </ul>
-                    <ul class="record_actions">
-                        <li>
-                            <a href="{{ path('chill_calendar_calendar_show', { 'id': calendar.id, 'user_id': user_id, 'accompanying_period_id': accompanying_course_id }) }}" class="btn btn-show "></a>
-                        </li>
-                        {# TOOD
-                        {% if is_granted('CHILL_ACTIVITY_UPDATE', calendar) %}
-                        #}
-                        <li>
-                            <a href="{{ path('chill_calendar_calendar_edit', { 'id': calendar.id, 'user_id': user_id, 'accompanying_period_id': accompanying_course_id }) }}" class="btn btn-update "></a>
-                        </li>
-                        {# TOOD
-                        {% endif %}
-                        {% if is_granted('CHILL_ACTIVITY_DELETE', calendar) %}
-                        #}
-                        <li>
-                            <a href="{{ path('chill_calendar_calendar_delete', { 'id': calendar.id, 'user_id' : user_id, 'accompanying_period_id': accompanying_course_id } ) }}" class="btn btn-delete "></a>
-                        </li>
-                        {#
-                        {% endif %}
-                        #}
-                    </ul>
-                </div>
-            </div>
-
-            {%
-                if calendar.comment.comment is not empty
-                or calendar.users|length > 0
-                or calendar.thirdParties|length > 0
-                or calendar.users|length > 0
-            %}
-            <div class="item-row details">
-                <div class="item-col">
-
-                    {% include 'ChillActivityBundle:Activity:concernedGroups.html.twig' with {'context': context, 'with_display': 'row', 'entity': calendar } %}
-                </div>
-
-                {% if calendar.comment.comment is not empty %}
-                <div class="item-col comment">
-                    {{ calendar.comment|chill_entity_render_box( { 'limit_lines': 3, 'metadata': false } ) }}
                 </div>
                 {% endif %}
+
             </div>
-            {% endif %}
+        {% endfor %}
+    </div>
+    {% endif %}
+
+    {% if context != 'user' %}
+    {# TODO set this condition in configuration #}
+    <ul class="record_actions">
+        <li>
+            <a href="{{ path('chill_calendar_calendar_new', {'user_id': user_id, 'accompanying_period_id': accompanying_course_id}) }}" class="btn btn-create">
+                {{ 'Add a new calendar' | trans }}
+            </a>
+        </li>
+    </ul>
+    {% endif %}
+
+
 
-        </div>
-    {% endfor %}
-</div>
 {% endif %}
 
-{% if context != 'user' %}
-{# TODO set this condition in configuration #}
-  <ul class="record_actions">
-      <li>
-          <a href="{{ path('chill_calendar_calendar_new', {'user_id': user_id, 'accompanying_period_id': accompanying_course_id}) }}" class="btn btn-create">
-              {{ 'Add a new calendar' | trans }}
-          </a>
-      </li>
-  </ul>
-{% endif %}

From 5dc430ed31d7aaa4534b9e982795534acaa5c2f3 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Fri, 10 Sep 2021 22:00:24 +0200
Subject: [PATCH 20/24] rdv: various UI improvements on my calendar

---
 .../public/vuejs/MyCalendarRange/App.vue      | 64 +++++++++++--------
 1 file changed, 38 insertions(+), 26 deletions(-)

diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
index 214b8d941..118ac51e8 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
@@ -14,7 +14,9 @@
     <FullCalendar ref="fullCalendar" :options="calendarOptions">
       <template v-slot:eventContent='arg' >
         <span class='calendarRangeItems'>
-          <b>{{ arg.timeText }}</b>
+          <b v-if="arg.event.extendedProps.myCalendar" style="text-decoration: underline" >{{ arg.timeText }}</b>
+          <b v-else-if="!arg.event.extendedProps.myCalendar && arg.event.extendedProps.toDelete" style="text-decoration: line-through red" >{{ arg.timeText }}</b>
+          <b v-else >{{ arg.timeText }}</b>
           <i>&nbsp;{{ arg.event.title }}</i>
           <a v-if=!arg.event.extendedProps.myCalendar class="fa fa-fw fa-times"
             @click.prevent="onClickDelete(arg.event)">
@@ -23,24 +25,31 @@
       </template>
     </FullCalendar>
     <div>
-      <button class="btn btn-save" :disabled="!dirty"
-        @click.prevent="onClickSave">
-        {{ $t('action.save')}}
-      </button>
-      <span v-if="flag.loading" class="loading">
-        <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
-        <span class="sr-only">{{ $t('loading') }}</span>
-      </span>
+      <ul class="record_actions">
+        <li>
+          <button class="btn btn-save" :disabled="!dirty"
+            @click.prevent="onClickSave">
+            {{ $t('action.save')}}
+          </button>
+          <span v-if="flag.loading" class="loading">
+            <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
+            <span class="sr-only">{{ $t('loading') }}</span>
+          </span>
+        </li>
+        <li>
+          <button v-if="disableCopyDayButton" class="btn btn-action" disabled>
+            {{ $t('copy_range_to_next_day')}}
+          </button>
+          <button v-else class="btn btn-action"
+            @click.prevent="copyDay">
+            {{ $t('copy_range_from_day')}} {{this.lastNewDate.toLocaleDateString()}} {{ $t('to_the_next_day')}}
+          </button>
+        </li>
+      </ul>
     </div>
     <div>
-      <button v-if="disableCopyDayButton" class="btn btn-action" disabled>
-        {{ $t('copy_range_to_next_day')}}
-      </button>
-      <button v-if="!disableCopyDayButton" class="btn btn-action" 
-        @click.prevent="copyDay">
-        {{ $t('copy_range_from_day')}} {{this.lastNewDate.toLocaleDateString()}} {{ $t('to_the_next_day')}}
-      </button>
       <p>{{ $t('copy_range_how_to')}}</p>
+
     </div>
 
     <div>
@@ -77,7 +86,7 @@
       @close="modal.showModal = false">
 
         <template v-slot:header>
-          <h2 class="modal-title"> {{ this.myCalendarClickedEvent.start.toLocaleString() }} - {{ this.myCalendarClickedEvent.end.toLocaleString() }}</h2>
+          <h2 class="modal-title">{{ this.renderEventDate() }}</h2>
         </template>
 
         <template v-slot:body>
@@ -165,7 +174,7 @@ export default {
         eventDrop: this.onEventDropOrResize,
         eventResize: this.onEventDropOrResize,
         eventClick: this.onEventClick,
-        selectMirror: true,
+        selectMirror: false,
         editable: true,
         weekends: false,
         headerToolbar: {
@@ -226,7 +235,7 @@ export default {
             start: i.startDate.datetime,
             end: i.endDate.datetime,
             calendarRangeId: i.id,
-            toDelete: 0
+            toDelete: false
           })
         );
         let calendarRangeEvents = {
@@ -307,10 +316,6 @@ export default {
       this.$store.dispatch('updateRange', payload);
     },
     onEventClick(payload) {
-      console.log(payload)
-      console.log(payload.event)
-      console.log(payload.event.extendedProps)
-
       if (payload.event.extendedProps.myCalendar) {
         this.myCalendarClickedEvent = {
           id: payload.event.extendedProps.calendarId,
@@ -369,12 +374,12 @@ export default {
     },
     onClickDelete(payload) {
       if (payload.extendedProps.hasOwnProperty("calendarRangeId")) {
-        if (payload.extendedProps.toDelete === 1) {
-          payload.setExtendedProp('toDelete', 0)
+        if (payload.extendedProps.toDelete) {
+          payload.setExtendedProp('toDelete', false)
           payload.setProp('borderColor', '#79bafc');
           this.$store.dispatch('removeFromDeleteRange', payload);
         } else {
-          payload.setExtendedProp('toDelete', 1)
+          payload.setExtendedProp('toDelete', true)
           payload.setProp('borderColor', '#dddddd');
           this.$store.dispatch('deleteRange', payload);
         }
@@ -448,6 +453,13 @@ export default {
       } else {
         console.log('no new events to copy-paste!')
       }
+    },
+    renderEventDate() {
+      let start = this.myCalendarClickedEvent.start;
+      let end = this.myCalendarClickedEvent.end;
+      return start.getDate() === end.getDate() ?
+          `${start.toLocaleDateString()}, ${start.toLocaleTimeString()} - ${end.toLocaleTimeString()}` :
+          `${start.toLocaleString()} - ${end.toLocaleString()}`;
     }
   },
   mounted() {

From 503c97d8c67e62d4d72ca7d613b9c3a8064eb094 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Mon, 13 Sep 2021 10:01:52 +0200
Subject: [PATCH 21/24] rdv: remove duplicate comment in rdv list

---
 .../Resources/views/Calendar/list.html.twig            | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig
index 80aba0d0c..44295e192 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/list.html.twig
@@ -68,16 +68,6 @@
                             </li>
                             {% endif %}
 
-
-                            <li>
-                                {%- if calendar.comment.isEmpty -%}
-                                    <span class="chill-no-data-statement">{{ 'No comments'|trans }}</span>
-                                {%- else -%}
-                                    {{ calendar.comment|chill_entity_render_box }}
-                                {%- endif -%}
-                            </li>
-
-
                         </ul>
                         <ul class="record_actions">
                             <li>

From c82efc4fd5092a33f221c765f7c7f3002214aa06 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Mon, 13 Sep 2021 11:58:48 +0200
Subject: [PATCH 22/24] rdv MR review: change name of routes + others
 modifications

---
 .../Controller/CalendarController.php         | 34 +++++++++----------
 .../ChillCalendarBundle/Entity/Calendar.php   | 10 +++---
 .../Entity/CalendarRange.php                  |  6 ++--
 .../Menu/AccompanyingCourseMenuBuilder.php    |  2 +-
 .../public/vuejs/MyCalendarRange/App.vue      |  6 ++--
 ...nfirm_deleteByAccompanyingCourse.html.twig |  6 ++--
 .../Calendar/confirm_deleteByUser.html.twig   |  4 +--
 .../Resources/views/Calendar/edit.html.twig   |  4 +--
 .../Resources/views/Calendar/new.html.twig    |  4 +--
 .../Resources/views/Calendar/show.html.twig   |  2 +-
 .../ChillTaskBundle/Menu/UserMenuBuilder.php  |  2 +-
 11 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/src/Bundle/ChillCalendarBundle/Controller/CalendarController.php b/src/Bundle/ChillCalendarBundle/Controller/CalendarController.php
index 6e8dc624c..fff20940a 100644
--- a/src/Bundle/ChillCalendarBundle/Controller/CalendarController.php
+++ b/src/Bundle/ChillCalendarBundle/Controller/CalendarController.php
@@ -69,7 +69,7 @@ class CalendarController extends AbstractController
 
     /**
      * Lists all Calendar entities.
-     * @Route("/{_locale}/calendar/", name="chill_calendar_calendar")
+     * @Route("/{_locale}/calendar/calendar/", name="chill_calendar_calendar_list")
      */
     public function listAction(Request $request): Response
     {
@@ -83,14 +83,14 @@ class CalendarController extends AbstractController
             $calendarItems = $em->getRepository(Calendar::class)
                 ->findByUser($user)
                 ;
-            $view = 'ChillCalendarBundle:Calendar:listByUser.html.twig';
+            $view = '@ChillCalendar/Calendar/listByUser.html.twig';
         } elseif ($accompanyingPeriod instanceof AccompanyingPeriod) {
             $calendarItems = $em->getRepository(Calendar::class)->findBy(
                 ['accompanyingPeriod' => $accompanyingPeriod],
                 ['startDate' => 'DESC']
             );
 
-            $view = 'ChillCalendarBundle:Calendar:listByAccompanyingCourse.html.twig';
+            $view = '@ChillCalendar/Calendar/listByAccompanyingCourse.html.twig';
         }
 
         return $this->render($view, [
@@ -102,7 +102,7 @@ class CalendarController extends AbstractController
 
     /**
      * Create a new calendar item
-     * @Route("/{_locale}/calendar/new", name="chill_calendar_calendar_new")
+     * @Route("/{_locale}/calendar/calendar/new", name="chill_calendar_calendar_new")
      */
     public function newAction(Request $request): Response
     {
@@ -111,10 +111,10 @@ class CalendarController extends AbstractController
         [$user, $accompanyingPeriod] = $this->getEntity($request);
 
         if ($accompanyingPeriod instanceof AccompanyingPeriod) {
-            $view = 'ChillCalendarBundle:Calendar:newAccompanyingCourse.html.twig';
+            $view = '@ChillCalendar/Calendar/newAccompanyingCourse.html.twig';
         } 
         // elseif ($user instanceof User) {
-        //     $view = 'ChillCalendarBundle:Calendar:newUser.html.twig';
+        //     $view = '@ChillCalendar/Calendar/newUser.html.twig';
         // }
 
         $entity = new Calendar();
@@ -141,7 +141,7 @@ class CalendarController extends AbstractController
 
             $params = $this->buildParamsToUrl($user, $accompanyingPeriod);
 
-            return $this->redirectToRoute('chill_calendar_calendar', $params);
+            return $this->redirectToRoute('chill_calendar_calendar_list', $params);
         } elseif ($form->isSubmitted() and !$form->isValid()) {
             $this->addFlash('error', $this->get('translator')->trans('This form contains errors'));
         }
@@ -164,7 +164,7 @@ class CalendarController extends AbstractController
 
     /**
      * Show a calendar item
-     * @Route("/{_locale}/calendar/{id}/show", name="chill_calendar_calendar_show")
+     * @Route("/{_locale}/calendar/calendar/{id}/show", name="chill_calendar_calendar_show")
      */
     public function showAction(Request $request, $id): Response
     {
@@ -173,10 +173,10 @@ class CalendarController extends AbstractController
         [$user, $accompanyingPeriod] = $this->getEntity($request);
 
         if ($accompanyingPeriod instanceof AccompanyingPeriod) {
-            $view = 'ChillCalendarBundle:Calendar:showByAccompanyingCourse.html.twig';
+            $view = '@ChillCalendar/Calendar/showByAccompanyingCourse.html.twig';
         } 
         elseif ($user instanceof User) {
-            $view = 'ChillCalendarBundle:Calendar:showByUser.html.twig';
+            $view = '@ChillCalendar/Calendar/showByUser.html.twig';
         }
 
         $entity = $em->getRepository('ChillCalendarBundle:Calendar')->find($id);
@@ -208,7 +208,7 @@ class CalendarController extends AbstractController
 
      /**
      * Edit a calendar item
-     * @Route("/{_locale}/calendar/{id}/edit", name="chill_calendar_calendar_edit")
+     * @Route("/{_locale}/calendar/calendar/{id}/edit", name="chill_calendar_calendar_edit")
      */
     public function editAction($id, Request $request): Response
     {
@@ -217,10 +217,10 @@ class CalendarController extends AbstractController
         [$user, $accompanyingPeriod] = $this->getEntity($request);
 
         if ($accompanyingPeriod instanceof AccompanyingPeriod) {
-            $view = 'ChillCalendarBundle:Calendar:editByAccompanyingCourse.html.twig';
+            $view = '@ChillCalendar/Calendar/editByAccompanyingCourse.html.twig';
         }
          elseif ($user instanceof User) {
-            $view = 'ChillCalendarBundle:Calendar:editByUser.html.twig';
+            $view = '@ChillCalendar/Calendar/editByUser.html.twig';
         }
 
         $entity = $em->getRepository('ChillCalendarBundle:Calendar')->find($id);
@@ -240,7 +240,7 @@ class CalendarController extends AbstractController
             $this->addFlash('success', $this->get('translator')->trans('Success : calendar item updated!'));
 
             $params = $this->buildParamsToUrl($user, $accompanyingPeriod);
-            return $this->redirectToRoute('chill_calendar_calendar', $params);
+            return $this->redirectToRoute('chill_calendar_calendar_list', $params);
         } elseif ($form->isSubmitted() and !$form->isValid()) {
             $this->addFlash('error', $this->get('translator')->trans('This form contains errors'));
         }
@@ -274,10 +274,10 @@ class CalendarController extends AbstractController
         [$user, $accompanyingPeriod] = $this->getEntity($request);
 
         if ($accompanyingPeriod instanceof AccompanyingPeriod) {
-            $view = 'ChillCalendarBundle:Calendar:confirm_deleteByAccompanyingCourse.html.twig';
+            $view = '@ChillCalendar/Calendar/confirm_deleteByAccompanyingCourse.html.twig';
         } 
         elseif ($user instanceof User) {
-            $view = 'ChillCalendarBundle:Calendar:confirm_deleteByUser.html.twig';
+            $view = '@ChillCalendar/Calendar/confirm_deleteByUser.html.twig';
         }
 
         /* @var $entity Calendar */
@@ -306,7 +306,7 @@ class CalendarController extends AbstractController
                       ->trans("The calendar item has been successfully removed."));
 
                 $params = $this->buildParamsToUrl($user, $accompanyingPeriod);
-                return $this->redirectToRoute('chill_calendar_calendar', $params);
+                return $this->redirectToRoute('chill_calendar_calendar_list', $params);
             }
         }
 
diff --git a/src/Bundle/ChillCalendarBundle/Entity/Calendar.php b/src/Bundle/ChillCalendarBundle/Entity/Calendar.php
index fbde03af2..b3e5971bd 100644
--- a/src/Bundle/ChillCalendarBundle/Entity/Calendar.php
+++ b/src/Bundle/ChillCalendarBundle/Entity/Calendar.php
@@ -46,7 +46,7 @@ class Calendar
      * @Groups({"read"})
      * @Serializer\Groups({"calendar:read"})
      */
-    private User $user;
+    private ?User $user = null;
 
     /**
      * @ORM\ManyToOne(targetEntity="Chill\PersonBundle\Entity\AccompanyingPeriod")
@@ -101,20 +101,20 @@ class Calendar
      * @ORM\Column(type="datetimetz_immutable")
      * @Serializer\Groups({"calendar:read"})
      */
-    private \DateTimeImmutable $startDate;
+    private ?\DateTimeImmutable $startDate = null;
 
     /**
      * @ORM\Column(type="datetimetz_immutable")
      * @Serializer\Groups({"calendar:read"})
      */
-    private \DateTimeImmutable $endDate;
+    private ?\DateTimeImmutable $endDate = null;
 
     //TODO Lieu
 
     /**
      * @ORM\Column(type="string", length=255)
      */
-    private string $status;
+    private ?string $status = null;
 
     /**
      * @ORM\ManyToOne(targetEntity="CancelReason")
@@ -129,7 +129,7 @@ class Calendar
     /**
      * @ORM\ManyToOne(targetEntity="Chill\ActivityBundle\Entity\Activity")
      */
-    private Activity $activity;
+    private ?Activity $activity = null;
 
     /**
      * @ORM\Column(type="boolean", nullable=true)
diff --git a/src/Bundle/ChillCalendarBundle/Entity/CalendarRange.php b/src/Bundle/ChillCalendarBundle/Entity/CalendarRange.php
index b83684a7c..312e4bb41 100644
--- a/src/Bundle/ChillCalendarBundle/Entity/CalendarRange.php
+++ b/src/Bundle/ChillCalendarBundle/Entity/CalendarRange.php
@@ -27,19 +27,19 @@ class CalendarRange
      * @ORM\ManyToOne(targetEntity="Chill\MainBundle\Entity\User")
      * @groups({"read", "write"})
      */
-    private User $user;
+    private ?User $user = null;
 
     /**
      * @ORM\Column(type="datetimetz_immutable")
      * @groups({"read", "write"})
      */
-    private \DateTimeImmutable $startDate;
+    private ?\DateTimeImmutable $startDate = null;
 
     /**
      * @ORM\Column(type="datetimetz_immutable")
      * @groups({"read", "write"})
      */
-    private \DateTimeImmutable $endDate;
+    private ?\DateTimeImmutable $endDate = null;
 
     /**
      * @ORM\OneToMany(targetEntity=Calendar::class,
diff --git a/src/Bundle/ChillCalendarBundle/Menu/AccompanyingCourseMenuBuilder.php b/src/Bundle/ChillCalendarBundle/Menu/AccompanyingCourseMenuBuilder.php
index 2e06d9d2e..244d7db78 100644
--- a/src/Bundle/ChillCalendarBundle/Menu/AccompanyingCourseMenuBuilder.php
+++ b/src/Bundle/ChillCalendarBundle/Menu/AccompanyingCourseMenuBuilder.php
@@ -37,7 +37,7 @@ class AccompanyingCourseMenuBuilder implements LocalMenuBuilderInterface
 
         if (AccompanyingPeriod::STEP_DRAFT !== $period->getStep()) {
             $menu->addChild($this->translator->trans('Calendar'), [
-                'route' => 'chill_calendar_calendar',
+                'route' => 'chill_calendar_calendar_list',
                 'routeParameters' => [
                     'accompanying_period_id' => $period->getId(),
                 ]])
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
index 118ac51e8..329f8a0f6 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
@@ -211,13 +211,13 @@ export default {
       this.modal.showModal = true;
     },
     myCalendarEventShowLink() {
-      return `/fr/calendar/ ${this.myCalendarClickedEvent.id}/show?user_id=${ this.userId }`
+      return `/fr/calendar/calendar/${this.myCalendarClickedEvent.id}/show?user_id=${ this.userId }`
     },
     myCalendarEventUpdateLink() {
-      return `/fr/calendar/ ${this.myCalendarClickedEvent.id}/edit?user_id=${ this.userId }`
+      return `/fr/calendar/calendar/${this.myCalendarClickedEvent.id}/edit?user_id=${ this.userId }`
     },
     myCalendarEventDeleteLink() {
-      return `/fr/calendar/ ${this.myCalendarClickedEvent.id}/delete?user_id=${ this.userId }`
+      return `/fr/calendar/calendar/${this.myCalendarClickedEvent.id}/delete?user_id=${ this.userId }`
     },
     resetCalendar() {
       this.fetchData();
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/confirm_deleteByAccompanyingCourse.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/confirm_deleteByAccompanyingCourse.html.twig
index d957293b2..26818bb6c 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/confirm_deleteByAccompanyingCourse.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/confirm_deleteByAccompanyingCourse.html.twig
@@ -1,6 +1,6 @@
 {% extends "@ChillPerson/AccompanyingCourse/layout.html.twig" %}
 
-{% set activeRouteKey = 'chill_calendar_calendar' %}
+{% set activeRouteKey = 'chill_calendar_calendar_list' %}
 
 {% block title  'Remove calendar item'|trans %}
 
@@ -9,8 +9,8 @@
         {
             'title'             : 'Remove calendar item'|trans,
             'confirm_question'  : 'Are you sure you want to remove the calendar item?'|trans,
-            'cancel_route'      : 'chill_calendar_calendar',
-            'cancel_parameters' : { 'accompanying_course_id' : accompanyingCourse.id, 'id' : calendar.id },
+            'cancel_route'      : 'chill_calendar_calendar_list',
+            'cancel_parameters' : { 'accompanying_period_id' : accompanyingCourse.id, 'id' : calendar.id },
             'form'              : delete_form
         } ) }}
 {% endblock %}
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/confirm_deleteByUser.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/confirm_deleteByUser.html.twig
index 4f1ad45e5..6617f1da4 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/confirm_deleteByUser.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/confirm_deleteByUser.html.twig
@@ -2,7 +2,7 @@
 
 {% set user = calendar.user %}
 
-{% set activeRouteKey = 'chill_calendar_calendar' %}
+{% set activeRouteKey = 'chill_calendar_calendar_list' %}
 
 {% block title  'Remove activity'|trans %}
 
@@ -11,7 +11,7 @@
     {
         'title'             : 'Remove calendar item'|trans,
         'confirm_question'  : 'Are you sure you want to remove the calendar item?'|trans,
-        'cancel_route'      : 'chill_calendar_calendar',
+        'cancel_route'      : 'chill_calendar_calendar_list',
         'cancel_parameters' : { 'user_id' : calendar.user.id, 'id' : calendar.id },
         'form'              : delete_form
     } ) }}
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/edit.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/edit.html.twig
index f47727b9c..c4b33e82e 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/edit.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/edit.html.twig
@@ -59,9 +59,9 @@
     <a 
       class="btn btn-cancel"
       {%- if context == 'user' -%}
-      href="{{ chill_return_path_or('chill_calendar_calendar', { 'user_id': user.id } )}}"
+      href="{{ chill_return_path_or('chill_calendar_calendar_list', { 'user_id': user.id } )}}"
       {%- elseif context == 'accompanyingCourse' -%}
-      href="{{ chill_return_path_or('chill_calendar_calendar', { 'accompanying_period_id': accompanyingCourse.id } )}}"
+      href="{{ chill_return_path_or('chill_calendar_calendar_list', { 'accompanying_period_id': accompanyingCourse.id } )}}"
       {%- endif -%}
       >
       {{ 'Cancel'|trans|chill_return_path_label }}
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/new.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/new.html.twig
index 1bbdc53ca..5d65a049d 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/new.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/new.html.twig
@@ -51,9 +51,9 @@
     <a 
       class="btn btn-cancel"
       {%- if context == 'person' -%} 
-      href="{{ chill_return_path_or('chill_calendar_calendar', { 'person_id': person.id } )}}"
+      href="{{ chill_return_path_or('chill_calendar_calendar_list', { 'person_id': person.id } )}}"
       {%- else -%}
-      href="{{ chill_return_path_or('chill_calendar_calendar', { 'accompanying_period_id': accompanyingCourse.id } )}}"
+      href="{{ chill_return_path_or('chill_calendar_calendar_list', { 'accompanying_period_id': accompanyingCourse.id } )}}"
       {%- endif -%}
       >
       {{ 'Cancel'|trans|chill_return_path_label }}
diff --git a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/show.html.twig b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/show.html.twig
index d450d2ab8..971abe67d 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/show.html.twig
+++ b/src/Bundle/ChillCalendarBundle/Resources/views/Calendar/show.html.twig
@@ -65,7 +65,7 @@
 
 <ul class="record_actions sticky-form-buttons">
     <li class="cancel">
-        <a class="btn btn-cancel" href="{{ path('chill_calendar_calendar', { 'accompanying_period_id': accompanying_course_id, 'user_id': user_id } ) }}">
+        <a class="btn btn-cancel" href="{{ path('chill_calendar_calendar_list', { 'accompanying_period_id': accompanying_course_id, 'user_id': user_id } ) }}">
             {{ 'Back to the list'|trans }}
         </a>
     </li>
diff --git a/src/Bundle/ChillTaskBundle/Menu/UserMenuBuilder.php b/src/Bundle/ChillTaskBundle/Menu/UserMenuBuilder.php
index f4dc4391e..632961953 100644
--- a/src/Bundle/ChillTaskBundle/Menu/UserMenuBuilder.php
+++ b/src/Bundle/ChillTaskBundle/Menu/UserMenuBuilder.php
@@ -116,7 +116,7 @@ class UserMenuBuilder implements LocalMenuBuilderInterface
             ]);
 
         $menu->addChild("My calendar list", [
-                'route' => 'chill_calendar_calendar',
+                'route' => 'chill_calendar_calendar_list',
                 'routeParameters' => [
                     'user_id' => $user->getId(),
                 ]

From 813da1f9e022bbd73c383b005180a99b3cbd3ed5 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Mon, 13 Sep 2021 13:43:39 +0200
Subject: [PATCH 23/24] rdv: reset calendar after all promises are done

---
 .../public/vuejs/MyCalendarRange/App.vue      | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
index 329f8a0f6..a30dd2000 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
@@ -47,11 +47,6 @@
         </li>
       </ul>
     </div>
-    <div>
-      <p>{{ $t('copy_range_how_to')}}</p>
-
-    </div>
-
     <div>
       <div v-if="newCalendarRanges.length > 0">
         <h4>{{ $t('new_range_to_save') }}</h4>
@@ -334,7 +329,7 @@ export default {
     onClickSave(payload) {
       this.flag.loading = true;
       if (this.$store.state.newCalendarRanges.length > 0){
-        this.$store.state.newCalendarRanges.map(cr => {
+        Promise.all(this.$store.state.newCalendarRanges.map(cr => {
             postCalendarRange({
               user: {
                   type: 'user',
@@ -346,12 +341,14 @@ export default {
               endDate: {
                   datetime: `${cr.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
               },
-            }).then((_r) => this.resetCalendar());
-        });
+            })
+          })
+        ).then((_r) => this.resetCalendar());
+
         this.$store.dispatch('clearNewCalendarRanges', payload);
       }
       if (this.$store.state.updateCalendarRanges.length > 0){
-        this.$store.state.updateCalendarRanges.map(cr => {
+        Promise.all(this.$store.state.updateCalendarRanges.map(cr => {
             patchCalendarRange(cr.id,
               {
               startDate: {
@@ -360,14 +357,16 @@ export default {
               endDate: {
                   datetime: `${cr.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
               },
-            }).then((_r) => this.resetCalendar());
-        })
+            })
+          })
+        ).then((_r) => this.resetCalendar());
         this.$store.dispatch('clearUpdateCalendarRanges', payload);
       }
       if (this.$store.state.deleteCalendarRanges.length > 0){
-        this.$store.state.deleteCalendarRanges.map(cr => {
-            deleteCalendarRange(cr.id).then((_r) => this.resetCalendar());;
-        })
+        Promise.all(this.$store.state.deleteCalendarRanges.map(cr => {
+            deleteCalendarRange(cr.id)
+          })
+        ).then((_r) => this.resetCalendar());
         this.$store.dispatch('clearDeleteCalendarRanges', payload);
       }
 

From ee01020ae64833481e250244c418f3e9d2258351 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Mon, 13 Sep 2021 16:38:43 +0200
Subject: [PATCH 24/24] fix multiselect calendarUserSelector badge appearance

---
 .../public/vuejs/AccompanyingCourse/components/SocialIssue.vue  | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
index 32ee00b71..a73872953 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
@@ -78,6 +78,7 @@ export default {
 @import 'ChillMainAssets/module/bootstrap/shared';
 @import 'ChillPersonAssets/chill/scss/mixins';
 
+div#accompanying-course {
    span.multiselect__tag {
       @include badge_social_issue;
       background: $chill-l-gray;
@@ -93,6 +94,7 @@ export default {
          }
       }
    }
+}
 </style>