From b1cd85971a4555c1ebf3c39adc8c643ea39d2c6b Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 7 Jan 2022 15:30:00 +0100
Subject: [PATCH] notification show page: use macro to display thread comments

---
 .../views/Notification/show.html.twig         | 124 +++++++++---------
 .../translations/messages.fr.yml              |   2 +
 .../Comment/macro_showItem.html.twig          |   3 +
 3 files changed, 70 insertions(+), 59 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/views/Notification/show.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Notification/show.html.twig
index b4c2b0196..7d7af99fb 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/Notification/show.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Notification/show.html.twig
@@ -12,10 +12,25 @@
     {{ encore_entry_link_tags('mod_notification_toggle_read_status') }}
 {% endblock %}
 
+{% import '@ChillPerson/AccompanyingCourse/Comment/macro_showItem.html.twig' as m %}
+
+{% macro recordAction(comment) %}
+    {% if is_granted('CHILL_MAIN_NOTIFICATION_COMMENT_EDIT', comment) %}
+    <li>
+        <a href="{{ chill_path_forward_return_path('chill_main_notification_show', {
+            '_fragment': 'comment-' ~ comment.id,
+            'edit': comment.id,
+            'id': comment.notification.id
+        }) }}" class="btn btn-edit" title="{{ 'Edit'|trans }}"
+        ></a>
+    </li>
+    {% endif %}
+{% endmacro %}
+
 {% block content %}
 <div class="col-10 notification notification-show">
 
-    <h1 class="visually-hidden">{{ notification.title }}</h1>
+    <h1>{{ 'notification.Notification'|trans }}</h1>
 
     <div class="flex-table">
         {% include 'ChillMainBundle:Notification:_list_item.html.twig' with {
@@ -27,72 +42,63 @@
         } %}
     </div>
 
-    {#
-    {{ dump() }}
-    <div>
-        {% include handler.getTemplate(notification) with handler.getTemplateData(notification) %}
-    </div>
-    <div>
-        à remplacer par un commentEmbeddable
-        {{ notification.message|chill_markdown_to_html }}
-    </div>
-    #}
+    <div class="notification-comment-list my-5">
+        <h2 class="chill-blue">{{ 'notification.comments_list'|trans }}</h2>
 
-    <div class="comments thread m-5">
         {% if notification.comments|length > 0 %}
-            {% for comment in notification.comments %}
-                {% if editedCommentForm is null or editedCommentId != comment.id %}
-                    <div>
-                        <a id="comment-{{ comment.id }}"></a>
-                        <blockquote class="chill-user-quote">
-                            {{ comment.content|chill_markdown_to_html }}
-                        </blockquote>
+            <div class="flex-table">
+                {% for comment in notification.comments %}
 
-                        {% if is_granted('CHILL_MAIN_NOTIFICATION_COMMENT_EDIT', comment) %}
-                            <ul class="record_actions">
-                                <li>
-                                    <a href="{{ chill_path_forward_return_path('chill_main_notification_show', { '_fragment': 'comment-'~comment.id, 'edit': comment.id, 'id': notification.id }) }}" class="btn btn-edit"></a>
-                                </li>
-                            </ul>
-                        {% endif %}
-                    </div>
-                {% else %}
-                    <div>
-                        <a id="comment-{{ comment.id }}"></a>
-                        {{ form_start(editedCommentForm) }}
-                        {{ form_widget(editedCommentForm) }}
+                    {% if editedCommentForm is null or editedCommentId != comment.id %}
+                        {{ m.show_comment(comment, {
+                            'recordAction': _self.recordAction(comment)
+                        }) }}
+                    {% else %}
+                        <div class="item-bloc">
+                            <div class="item-row row">
+                                <a id="comment-{{ comment.id }}"></a>
 
-                        <input type="hidden" name="form" value="edit" />
+                                {{ form_start(editedCommentForm) }}
+                                {{ form_errors(editedCommentForm) }}
+                                {{ form_widget(editedCommentForm.content) }}
+                                <input type="hidden" name="form" value="edit" />
+                                <ul class="record_actions">
+                                    <li class="cancel">
+                                        <a href="{{ chill_path_forward_return_path('chill_main_notification_show', {
+                                            '_fragment': 'comment-' ~ comment.id,
+                                            'id': notification.id }) }}" class="btn btn-cancel">
+                                            {{ 'cancel'|trans }}
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <button class="btn btn-save" type="submit">{{ 'Save'|trans }}</button>
+                                    </li>
+                                </ul>
+                                {{ form_end(editedCommentForm) }}
 
-                        <ul class="record_actions">
-                            <li class="cancel">
-                                <a href="{{ chill_path_forward_return_path('chill_main_notification_show', { '_fragment': 'comment-'~comment.id, 'id': notification.id }) }}" class="btn btn-cancel"></a>
-                            </li>
-                            <li>
-                                <button type="submit" class="btn btn-save"></button>
-                            </li>
-                        </ul>
-                        {{ form_end(editedCommentForm) }}
-                    </div>
-                {% endif %}
-            {% endfor %}
-        {% endif %}
+                            </div>
+                        </div>
+                    {% endif %}
 
-        {% if appendCommentForm is not null %}
-            <div>
-                {{ form_start(appendCommentForm) }}
-                {{ form_widget(appendCommentForm) }}
-
-                <input type="hidden" name="form" value="append" />
-
-                <ul class="record_actions">
-                    <li>
-                        <button type="submit" class="btn btn-save">{{ 'notification.append_comment'|trans }}</button>
-                    </li>
-                </ul>
-                {{ form_end(appendCommentForm) }}
+                {% endfor %}
             </div>
         {% endif %}
+
+        <div class="new-comment my-5">
+            <h2 class="chill-blue">{{ 'Write a new comment'|trans }}</h2>
+
+            {{ form_start(appendCommentForm) }}
+            {{ form_errors(appendCommentForm) }}
+            {{ form_widget(appendCommentForm.content) }}
+            <input type="hidden" name="form" value="append" />
+            <ul class="record_actions">
+                <li>
+                    <button class="btn btn-create" type="submit">{{ 'notification.append_comment'|trans }}</button>
+                </li>
+            </ul>
+            {{ form_end(appendCommentForm) }}
+
+        </div>
     </div>
 
     <ul class="record_actions sticky-form-buttons">
diff --git a/src/Bundle/ChillMainBundle/translations/messages.fr.yml b/src/Bundle/ChillMainBundle/translations/messages.fr.yml
index 622042e20..73bbb5014 100644
--- a/src/Bundle/ChillMainBundle/translations/messages.fr.yml
+++ b/src/Bundle/ChillMainBundle/translations/messages.fr.yml
@@ -353,6 +353,7 @@ Created for: Créé pour
 Created by: Créé par
 
 notification:
+    Notification: Notification
     My own notifications: Mes notifications
     Notify: Envoyer une notification
     Notification created: Notification envoyée
@@ -363,6 +364,7 @@ notification:
     comment_appended: Commentaire ajouté
     append_comment: Ajouter un commentaire
     comment_updated: Commentaire mis à jour
+    comments_list: Fil de commentaires
     is_unread: Non-lue
     is_system: notification automatique
     list: Notifications
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/Comment/macro_showItem.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/Comment/macro_showItem.html.twig
index 8812dcdae..3bf4b98ff 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/Comment/macro_showItem.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/Comment/macro_showItem.html.twig
@@ -22,3 +22,6 @@
         </div>
     </div>
 {% endmacro %}
+{#
+    TODO if shared, move this file in Main, out of AccompanyingCourse
+#}