From c5989de12059b990c913ecd093d1dd32b3819cce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Mon, 24 Apr 2023 15:38:53 +0200
Subject: [PATCH] Feature: Adapt UI to show new steps

---
 .../public/vuejs/AccompanyingCourse/App.vue        |  2 +-
 .../vuejs/AccompanyingCourse/components/Banner.vue | 14 ++++++++++++--
 .../public/vuejs/AccompanyingCourse/js/i18n.js     |  4 +++-
 .../views/Person/list_with_period.html.twig        | 12 +++++++-----
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
index 51fc2c1d0..c66214b0b 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
@@ -14,7 +14,7 @@
    <scopes></scopes>
    <referrer></referrer>
    <resources></resources>
-   <start-date v-if="accompanyingCourse.step === 'CONFIRMED'"></start-date>
+   <start-date v-if="accompanyingCourse.step.startsWith('CONFIRMED')"></start-date>
    <comment v-if="accompanyingCourse.step === 'DRAFT'"></comment>
    <confirm v-if="accompanyingCourse.step === 'DRAFT'"></confirm>
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
index dcade7e0f..fb8a09784 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
@@ -11,12 +11,22 @@
             {{ $t('course.step.draft') }}
          </span>
       </span>
-      <span v-else-if="accompanyingCourse.step === 'CONFIRMED'" class="text-md-end">
-         <span class="d-md-block mb-md-3">
+      <span v-else-if="accompanyingCourse.step === 'CONFIRMED' || accompanyingCourse.step === 'CONFIRMED_INACTIVE_SHORT' || accompanyingCourse.step === 'CONFIRMED_INACTIVE_LONG'" class="text-md-end">
+         <span v-if="accompanyingCourse.step === 'CONFIRMED'" class="d-md-block mb-md-3">
             <span class="badge bg-primary">
                {{ $t('course.step.active') }}
             </span>
          </span>
+         <span v-else-if="accompanyingCourse.step === 'CONFIRMED_INACTIVE_SHORT'" class="d-md-block mb-md-3">
+            <span class="badge bg-chill-yellow text-primary">
+               {{ $t('course.step.inactive_short') }}
+            </span>
+         </span>
+         <span v-else-if="accompanyingCourse.step === 'CONFIRMED_INACTIVE_LONG'" class="d-md-block mb-md-3">
+            <span class="badge bg-chill-pink">
+               {{ $t('course.step.inactive_long') }}
+            </span>
+         </span>
          <span class="d-md-block">
             <span class="d-md-block ms-3 ms-md-0">
                <i>{{ $t('course.open_at') }}{{ $d(accompanyingCourse.openingDate.datetime, 'text') }}</i>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
index 8bbd5c4ca..1a46a79ca 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
@@ -21,7 +21,9 @@ const appMessages = {
          step: {
             draft: "Brouillon",
             active: "En file active",
-            closed: "Cloturé"
+            closed: "Cloturé",
+            inactive_short: "Hors file active",
+            inactive_long: "Pré-archivé",
          },
          open_at: "ouvert le ",
          by: "par ",
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig
index 4497b8226..4735fb5a3 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig
@@ -52,11 +52,13 @@
                             {% endif %}
 
                             {% if acp.step == 'DRAFT' %}
-                                <span class="badge bg-secondary" style="font-size: 85%;" title="{{ 'course.draft'|trans }}">{{ 'course.draft'|trans }}</span>
-                            {% endif %}
-
-                            {% if acp.step == 'CLOSED' %}
-                                <span class="badge bg-danger" style="font-size: 85%;" title="{{ 'course.closed'|trans }}">{{ 'course.closed'|trans }}</span>
+                                <span class="badge bg-secondary" style="font-size: 85%;" title="{{ 'course.draft'|trans|e('html_attr') }}">{{ 'course.draft'|trans }}</span>
+                            {% elseif acp.step == 'CLOSED' %}
+                                <span class="badge bg-danger" style="font-size: 85%;" title="{{ 'course.closed'|trans|e('html_attr') }}">{{ 'course.closed'|trans }}</span>
+                            {% elseif acp.step == 'CONFIRMED_INACTIVE_SHORT' %}
+                                <span class="badge bg-chill-yellow text-primary" style="font-size: 85%;" title="{{ 'course.inactive_short'|trans|e('html_attr') }}">{{ 'course.inactive_short'|trans }}</span>
+                            {% elseif acp.step == 'CONFIRMED_INACTIVE_LONG' %}
+                                <span class="badge bg-danger" style="font-size: 85%;" title="{{ 'course.inactive_long'|trans|e('html_attr') }}">{{ 'course.inactive_long'|trans }}</span>
                             {% endif %}
                         </div>
                     </div>