Merge branch 'master' into 232_resources_comment

src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss

@@ -25,6 +25,8 @@
 // Chill flex responsive table/block presentation
 @import './scss/flex_table';
 
+// Specific templates
+@import './scss/notification';
 
 /*
  *    BASE LAYOUT POSITION

src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss

@@ -20,6 +20,7 @@ $chill-theme-buttons: (
    "misc":          $gray-300,
    "cancel":        $gray-300,
    "choose":        $gray-300,
+   "notify":        $gray-300,
    "unlink":        $chill-red,
 );
 
@@ -73,6 +74,7 @@ $chill-theme-buttons: (
    &.btn-delete::before,
    &.btn-remove::before,
    &.btn-choose::before,
+   &.btn-notify::before,
    &.btn-cancel::before {
       font: normal normal normal 14px/1 ForkAwesome;
       margin-right: 0.5em;
@@ -98,6 +100,7 @@ $chill-theme-buttons: (
    &.btn-cancel::before    { content: "\f060"; } // fa-arrow-left
    &.btn-choose::before    { content: "\f00c"; } // fa-check  // f046 fa-check-square-o
    &.btn-unlink::before    { content: "\f127"; } // fa-chain-broken
+   &.btn-notify::before    { content: "\f1d8"; } // fa-paper-plane
 }
 
 

src/Bundle/ChillMainBundle/Resources/public/chill/scss/notification.scss

@@ -0,0 +1,62 @@
+div.notification {
+    h2.notification-title,
+    h6.notification-title {
+        a {
+            text-decoration: none;
+        }
+        &::before {
+            font-family: "ForkAwesome";
+            font-size: 80%;
+            margin-right: 0.3em;
+        }
+    }
+    div.read {
+        h2.notification-title,
+        h6.notification-title {
+            font-weight: 500;
+            &::before {
+                content: "\f2b7";  //envelope-open-o
+            }
+        }
+    }
+    div.unread {
+        h2.notification-title,
+        h6.notification-title {
+            &::before {
+                content: "\f003";  //envelope-o
+            }
+        }
+    }
+}
+
+/*
+ * Notifications List
+*/
+
+div.notification-list,
+div.notification-show {
+    div.item-bloc {
+        div.item-row.header {
+
+            div.item-col {
+                &:first-child {
+                    flex-grow: 1;
+
+                }
+                &:last-child {
+                    flex-grow: 0;
+                }
+            }
+
+            ul.small_in_title {
+                list-style-type: circle;
+                li {
+                    span.item-key {
+                        display: inline-block;
+                        width: 3em;
+                    }
+                }
+            }
+        }
+    }
+}

src/Bundle/ChillMainBundle/Resources/public/module/notification/toggle_read.js

@@ -0,0 +1,43 @@
+import {createApp} from "vue";
+import NotificationReadToggle from "ChillMainAssets/vuejs/_components/Notification/NotificationReadToggle.vue";
+import { _createI18n } from "ChillMainAssets/vuejs/_js/i18n";
+
+const i18n = _createI18n({});
+
+window.addEventListener('DOMContentLoaded', function (e) {
+    document.querySelectorAll('.notification_toggle_read_status')
+        .forEach(function (el) {
+            createApp({
+                template: '<notification-read-toggle ' +
+                    ':notificationId="notificationId" ' +
+                    ':buttonClass="buttonClass" ' +
+                    ':buttonNoText="buttonNoText" ' +
+                    ':showUrl="showUrl" ' +
+                    ':isRead="isRead"' +
+                    '@markRead="onMarkRead" @markUnread="onMarkUnread"' +
+                    '></notification-read-toggle>',
+                components: {
+                    NotificationReadToggle,
+                },
+                data() {
+                    return {
+                        notificationId: +el.dataset.notificationId,
+                        buttonClass: el.dataset.buttonClass,
+                        buttonNoText: 'false' === el.dataset.buttonText,
+                        showUrl: el.dataset.showButtonUrl,
+                        isRead: 1 === +el.dataset.notificationCurrentIsRead,
+                    }
+                },
+                methods: {
+                    onMarkRead() {
+                        this.isRead = false;
+                    },
+                    onMarkUnread() {
+                        this.isRead = true;
+                    },
+                }
+            })
+            .use(i18n)
+            .mount(el);
+        });
+})

src/Bundle/ChillMainBundle/Resources/public/module/pick-entity/index.js

@@ -0,0 +1,69 @@
+import { createApp } from 'vue';
+import PickEntity from 'ChillMainAssets/vuejs/PickEntity/PickEntity.vue';
+import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
+import { appMessages } from 'ChillMainAssets/vuejs/PickEntity/i18n';
+
+const i18n = _createI18n(appMessages);
+
+window.addEventListener('DOMContentLoaded', function(e) {
+
+    let apps = document.querySelectorAll('[data-module="pick-dynamic"]');
+
+    apps.forEach(function(el) {
+
+        const
+            isMultiple = parseInt(el.dataset.multiple) === 1,
+            input = document.querySelector('[data-input-uniqid="'+ el.dataset.uniqid +'"]'),
+            picked = isMultiple ? JSON.parse(input.value) : [JSON.parse(input.value)];
+
+        createApp({
+            template: '<pick-entity ' +
+                ':multiple="multiple" ' +
+                ':types="types" ' +
+                ':picked="picked" ' +
+                ':uniqid="uniqid" ' +
+                '@addNewEntity="addNewEntity" ' +
+                '@removeEntity="removeEntity"></pick-entity>',
+            components: {
+                PickEntity,
+            },
+            data() {
+                return {
+                    multiple: isMultiple,
+                    types: JSON.parse(el.dataset.types),
+                    picked,
+                    uniqid: el.dataset.uniqid,
+                }
+            },
+            methods: {
+                addNewEntity(entity) {
+                    console.log('addNewEntity', entity);
+                    if (this.multiple) {
+                        console.log('adding multiple');
+                        if (!this.picked.some(el => {
+                            return el.type === entity.type && el.id === entity.id;
+                        })) {
+                            this.picked.push(entity);
+                            input.value = JSON.stringify(this.picked);
+                        }
+                    } else {
+                        if (!this.picked.some(el => {
+                            return el.type === entity.type && el.id === entity.id;
+                        })) {
+                            this.picked.splice(0, this.picked.length);
+                            this.picked.push(entity);
+                            input.value = JSON.stringify(this.picked[0]);
+                        }
+                    }
+                },
+                removeEntity(entity) {
+                    console.log('removeEntity', entity);
+                    this.picked = this.picked.filter(e => !(e.type === entity.type && e.id === entity.id));
+                    input.value = JSON.stringify(this.picked);
+                },
+            }
+        })
+        .use(i18n)
+        .mount(el);
+    });
+});

src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue

@@ -0,0 +1,89 @@
+<template>
+    <ul class="list-suggest remove-items">
+        <li v-for="p in picked" @click="removeEntity(p)" :key="p.type+p.id">
+            <span class="chill_denomination">{{ p.text }}</span>
+        </li>
+    </ul>
+    <ul class="record_actions">
+        <li>
+            <AddPersons
+                :options="addPersonsOptions"
+                :key="uniqid"
+                :buttonTitle="translatedListOfTypes"
+                :modalTitle="translatedListOfTypes"
+                ref="addPersons"
+                @addNewPersons="addNewEntity"
+            >
+            </AddPersons>
+        </li>
+    </ul>
+</template>
+
+<script>
+import AddPersons from "ChillPersonAssets/vuejs/_components/AddPersons.vue";
+import { appMessages } from "./i18n";
+
+export default {
+    name: "PickEntity",
+    props: {
+        multiple: {
+            type: Boolean,
+            required: true,
+        },
+        types: {
+            type: Array,
+            required: true,
+        },
+        picked: {
+            required: true,
+        },
+        uniqid: {
+            type: String,
+            required: true,
+        }
+    },
+    emits: ['addNewEntity', 'removeEntity'],
+    components: {
+        AddPersons,
+    },
+    data() {
+        return {
+            key: ''
+        };
+    },
+    computed: {
+        addPersonsOptions() {
+            return {
+                uniq: !this.multiple,
+                type: this.types,
+                priority: null,
+                button: {
+                    size: 'btn-sm',
+                    class: 'btn-submit',
+                },
+            };
+        },
+        translatedListOfTypes() {
+            let trans = [];
+            this.types.forEach(t => {
+                trans.push(appMessages.fr.pick_entity[t].toLowerCase());
+            })
+            return appMessages.fr.pick_entity.modal_title + trans.join(', ');
+        }
+    },
+    methods: {
+        addNewEntity({ selected, modal }) {
+            selected.forEach((item) => {
+                    this.$emit('addNewEntity', item.result);
+                }, this
+            );
+            this.$refs.addPersons.resetSearch(); // to cast child method
+            modal.showModal = false;
+        },
+        removeEntity(entity) {
+            console.log('remove entity', entity);
+            this.$emit('removeEntity', entity);
+        }
+    },
+}
+</script>

src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/i18n.js

@@ -0,0 +1,17 @@
+import { personMessages } from 'ChillPersonAssets/vuejs/_js/i18n';
+
+const appMessages = {
+    fr: {
+        pick_entity: {
+            add: 'Ajouter',
+            modal_title: 'Ajouter des ',
+            user: 'Utilisateurs',
+            person: 'Usagers',
+            thirdparty: 'Tiers',
+        }
+    }
+}
+
+Object.assign(appMessages.fr, personMessages.fr);
+
+export { appMessages };

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue

@@ -0,0 +1,112 @@
+<template>
+    <div :class="{'btn-group btn-group-sm float-end': isButtonGroup }"
+         role="group" aria-label="Notification actions">
+
+        <button v-if="isRead"
+                class="btn"
+                :class="overrideClass"
+                type="button"
+                :title="$t('markAsUnread')"
+                @click="markAsUnread"
+                >
+            <i class="fa fa-sm fa-envelope-o"></i>
+            <span v-if="!buttonNoText" class="ps-2">
+                {{ $t('markAsUnread') }}
+            </span>
+        </button>
+
+        <button v-if="!isRead"
+                class="btn"
+                :class="overrideClass"
+                type="button"
+                :title="$t('markAsRead')"
+                @click="markAsRead"
+                >
+            <i class="fa fa-sm fa-envelope-open-o"></i>
+            <span v-if="!buttonNoText" class="ps-2">
+                {{ $t('markAsRead') }}
+            </span>
+        </button>
+
+        <a v-if="isButtonGroup"
+            type="button"
+            class="btn btn-outline-primary"
+            :href="showUrl"
+            :title="$t('action.show')"
+            >
+            <i class="fa fa-sm fa-eye"></i>
+        </a>
+
+    </div>
+</template>
+
+<script>
+import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods.js';
+
+export default {
+    name: "NotificationReadToggle",
+    props: {
+        isRead: {
+            required: true,
+            type: Boolean,
+        },
+        notificationId: {
+            required: true,
+            type: Number,
+        },
+        // Optional
+        buttonClass: {
+            required: false,
+            type: String
+        },
+        buttonNoText: {
+            required: false,
+            type: Boolean,
+        },
+        showUrl: {
+            required: false,
+            type: String
+        }
+    },
+    emits: ['markRead', 'markUnread'],
+    computed: {
+        /// [Option] override default button appearance (btn-misc)
+        overrideClass() {
+            return this.buttonClass ? this.buttonClass : 'btn-misc'
+        },
+        /// [Option] don't display text on button
+        buttonHideText() {
+            return this.buttonNoText;
+        },
+        /// [Option] showUrl is href for show page second button.
+        //  When passed, the component return a button-group with 2 buttons.
+        isButtonGroup() {
+            return !!this.showUrl
+        }
+    },
+    methods: {
+        markAsUnread() {
+           makeFetch('POST', `/api/1.0/main/notification/${this.notificationId}/mark/unread`, []).then(response => {
+               this.$emit('markRead', { notificationId: this.notificationId });
+           })
+        },
+        markAsRead() {
+            makeFetch('POST', `/api/1.0/main/notification/${this.notificationId}/mark/read`, []).then(response => {
+                this.$emit('markUnread', { notificationId: this.notificationId });
+            })
+        },
+    },
+    i18n: {
+        messages: {
+            fr: {
+                markAsUnread: 'Marquer comme non-lu',
+                markAsRead: 'Marquer comme lu'
+            }
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+
+</style>

src/Bundle/ChillMainBundle/Resources/views/Form/fields.html.twig

@@ -215,3 +215,8 @@
         {{ form_widget(form.center) }}
     {% endif %}
 {% endblock %}
+
+{% block pick_user_dynamic_widget %}
+    <input type="hidden" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %} data-input-uniqid="{{ form.vars['uniqid'] }}"/>
+    <div data-module="pick-dynamic" data-types="{{ form.vars['types']|json_encode }}" data-multiple="{{ form.vars['multiple'] }}" data-uniqid="{{ form.vars['uniqid'] }}"></div>
+{% endblock %}

src/Bundle/ChillMainBundle/Resources/views/Notification/_list_item.html.twig

@@ -0,0 +1,88 @@
+<div class="item-bloc {% if not notification.isReadBy(app.user) %}unread{% else %}read{% endif %}">
+    <div class="item-row title">
+        <h2 class="notification-title">
+            <a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}">
+                {{ notification.title }}
+            </a>
+        </h2>
+    </div>
+    <div class="item-row mt-2 header">
+
+        <div class="item-col">
+            <ul class="small_in_title">
+                {% if step is not defined or step == 'inbox' %}
+                    <li class="notification-from">
+                        <span class="item-key">
+                            <abbr title="{{ 'notification.received_from'|trans }}">
+                                {{ 'notification.from'|trans }} :
+                            </abbr>
+                        </span>
+                        {% if not notification.isSystem %}
+                            <span class="badge-user">
+                                {{ notification.sender|chill_entity_render_string }}
+                            </span>
+                        {% else %}
+                            <span class="badge-user system">{{ 'notification.is_system'|trans }}</span>
+                        {% endif %}
+                    </li>
+                {% endif %}
+                {% if notification.addressees|length > 0 %}
+                    <li class="notification-to">
+                        <span class="item-key">
+                            <abbr title="{{ 'notification.sent_to'|trans }}">
+                                {{ 'notification.to'|trans }} :
+                            </abbr>
+                        </span>
+                        {% for a in notification.addressees %}
+                            <span class="badge-user">
+                                {{ a|chill_entity_render_string }}
+                            </span>
+                        {% endfor %}
+                    </li>
+                {% endif %}
+            </ul>
+        </div>
+
+        <div class="item-col">
+            {{ notification.date|format_datetime('long', 'short') }}
+        </div>
+
+    </div>
+    <div class="item-row separator">
+        <div class="mx-3 flex-grow-1">
+            {% include data.template with data.template_data %}
+        </div>
+    </div>
+    <div class="item-row row">
+        <div>
+            <blockquote class="chill-user-quote">
+                {{ notification.message|u.truncate(250, '…', false)|chill_markdown_to_html }}
+            </blockquote>
+        </div>
+    </div>
+    {% if action_button is not defined or action_button != 'false' %}
+        <div class="item-row separator">
+            <ul class="record_actions">
+                <li>
+                    {# Vue component #}
+                    <span class="notification_toggle_read_status"
+                          data-notification-id="{{ notification.id }}"
+                          data-notification-current-is-read="{{ notification.isReadBy(app.user) }}"
+                    ></span>
+                </li>
+                {% if is_granted('CHILL_MAIN_NOTIFICATION_UPDATE', notification) %}
+                    <li>
+                        <a href="{{ chill_path_add_return_path('chill_main_notification_edit', {'id': notification.id}) }}"
+                           class="btn btn-edit" title="{{ 'Edit'|trans }}"></a>
+                    </li>
+                {% endif %}
+                {% if is_granted('CHILL_MAIN_NOTIFICATION_SEE', notification) %}
+                    <li>
+                        <a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}"
+                           class="btn btn-show" title="{{ 'Show'|trans }}"></a>
+                    </li>
+                {% endif %}
+            </ul>
+        </div>
+    {% endif %}
+</div>

src/Bundle/ChillMainBundle/Resources/views/Notification/create.html.twig

@@ -0,0 +1,46 @@
+{% extends "@ChillMain/layout.html.twig"  %}
+
+{% block title 'notification.Notify'|trans %}
+
+{% block js %}
+    {{ parent() }}
+    {{ encore_entry_script_tags('mod_pickentity_type') }}
+{% endblock %}
+
+{% block css %}
+    {{ parent() }}
+    {{ encore_entry_link_tags('mod_pickentity_type') }}
+{% endblock %}
+
+{% block content %}
+<div class="col-8 notification notification-new">
+    <h1 class="mb-5">{{ block('title') }}</h1>
+
+    {{ form_start(form, { 'attr': { 'id': 'notification' }}) }}
+
+    {{ form_row(form.title, { 'label': 'notification.subject'|trans }) }}
+    {{ form_row(form.addressees, { 'label': 'notification.sent_to'|trans }) }}
+
+    {% include handler.template(notification) with handler.templateData(notification) %}
+
+    <div class="mb-3 row">
+        <label class="col-form-label col-sm-4" for="notification_message">{{ form_label(form.message) }}</label>
+        <div class="col-12">
+            {{ form_widget(form.message) }}
+        </div>
+    </div>
+
+    {{ form_end(form) }}
+
+    <ul class="record_actions sticky-form-buttons">
+        <li class="cancel">
+            <a href="{{ chill_return_path_or('chill_main_homepage') }}" class="btn btn-cancel">{{ 'Cancel'|trans|chill_return_path_label }}</a>
+        </li>
+        <li>
+            <button type="submit" form="notification" class="btn btn-save change-icon">
+                <i class="fa fa-paper-plane fa-fw"></i> {{ 'notification.Send'|trans }}
+            </button>
+        </li>
+    </ul>
+</div>
+{% endblock %}

src/Bundle/ChillMainBundle/Resources/views/Notification/edit.html.twig

@@ -0,0 +1,44 @@
+{% extends "@ChillMain/layout.html.twig"  %}
+
+{% block title 'notification.Edit notification'|trans %}
+
+{% block js %}
+    {{ parent() }}
+    {{ encore_entry_script_tags('mod_pickentity_type') }}
+{% endblock %}
+
+{% block css %}
+    {{ parent() }}
+    {{ encore_entry_link_tags('mod_pickentity_type') }}
+{% endblock %}
+
+{% block content %}
+<div class="col-8 notification notification-edit">
+    <h1 class="mb-5">{{ block('title') }}</h1>
+
+    {{ form_start(form, { 'attr': { 'id': 'notification' }}) }}
+
+    {{ form_row(form.title, { 'label': 'notification.subject'|trans }) }}
+    {{ form_row(form.addressees, { 'label': 'notification.sent_to'|trans }) }}
+
+    {% include handler.template(notification) with handler.templateData(notification) %}
+
+    <div class="mb-3 row">
+        <label class="col-form-label col-sm-4" for="notification_message">{{ form_label(form.message) }}</label>
+        <div class="col-12">
+            {{ form_widget(form.message) }}
+        </div>
+    </div>
+
+    {{ form_end(form) }}
+
+    <ul class="record_actions sticky-form-buttons">
+        <li class="cancel">
+            <a href="{{ chill_return_path_or('chill_main_homepage') }}" class="btn btn-cancel">{{ 'Cancel'|trans|chill_return_path_label }}</a>
+        </li>
+        <li>
+            <button type="submit" form="notification" class="btn btn-save">{{ 'Save'|trans }}</button>
+        </li>
+    </ul>
+</div>
+{% endblock %}

src/Bundle/ChillMainBundle/Resources/views/Notification/email_non_system_notification_content.fr.md.twig

@@ -0,0 +1,20 @@
+{{ dest.label }},
+
+{{ notification.sender.label }} a créé une notification pour vous:
+
+> {{ notification.title }}
+>
+>
+{%- for line in notification.message|split("\n") %}
+> {{ line }}
+{%- if not loop.last %}
+>
+{%- endif %}
+{%- endfor %}
+
+Vous pouvez visualiser la notification et y répondre ici:
+
+{{ absolute_url(path('chill_main_notification_show', {'_locale': 'fr', 'id': notification.id }, false)) }}
+
+--
+Le logiciel Chill

src/Bundle/ChillMainBundle/Resources/views/Notification/email_notification_comment_persist.fr.md.twig

@@ -0,0 +1,19 @@
+{{ dest.label }},
+
+{{ comment.createdBy.label }} a créé un commentaire sur la notification "{{ comment.notification.title }}".
+
+Commentaire:
+
+{% for line in comment.content|split("\n") %}
+> {{ line }}
+{%- if not loop.last %}
+>
+{%- endif %}
+{%- endfor %}
+
+Vous pouvez visualiser la notification et y répondre ici:
+
+{{ absolute_url(path('chill_main_notification_show', {'_locale': 'fr', 'id': comment.notification.id }, false)) }}
+
+--
+Le logiciel Chill

src/Bundle/ChillMainBundle/Resources/views/Notification/extension_list_notifications_for.html.twig

@@ -0,0 +1,45 @@
+<div class="list-group my-2 notification notification-box">
+    <div class="list-group-item">
+        <h4>{{ 'notification.Sent'|trans }}</h4>
+    </div>
+    {# TODO pagination or limit #}
+    {% for notification in notifications %}
+        <div class="list-group-item {% if notification.isReadBy(app.user) %}read{% else %}unread{% endif %}">
+
+            {% if not notification.isSystem %}
+                {% if notification.sender == app.user %}
+
+                    <h6 class="notification-title">
+                        <abbr title="{{ 'Le ' ~ notification.date|format_date('long') ~ '\n' ~ notification.title }}">
+                            {{ notification.date|format_datetime('short','short') }}
+                        </abbr>
+                        {# Vue component #}
+                        <span class="notification_toggle_read_status"
+                            data-notification-id="{{ notification.id }}"
+                            data-notification-current-is-read="{{ notification.isReadBy(app.user) }}"
+                            data-show-button-url="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}"
+                            data-button-class="btn-outline-primary"
+                            data-button-text="false"
+                        ></span>
+                    </h6>
+
+                    {% if notification.addressees|length > 0 %}
+                        <abbr title="{{ 'notification.sent_to'|trans }}">{{ 'notification.to'|trans }}:</abbr>
+                    {% endif %}
+
+                    {% for a in notification.addressees %}
+                        <span class="badge-user">
+                            {{ a|chill_entity_render_string }}
+                        </span>
+                    {% endfor %}
+
+                {% else %}
+                    <div>{{ 'notification.you were notified by %sender%'|trans({'%sender%': notification.sender|chill_entity_render_string }) }}</div>
+                {% endif %}
+            {% else %}
+                <div>{{ 'notification.you were notified by system'|trans }}</div>
+            {% endif %}
+
+        </div>
+    {% endfor %}
+</div>

src/Bundle/ChillMainBundle/Resources/views/Notification/list.html.twig

@@ -0,0 +1,57 @@
+{% extends "@ChillMain/layout.html.twig"  %}
+
+{% block title 'notification.My own notifications'|trans %}
+
+{% block js %}
+  {{ parent() }}
+  {{ encore_entry_script_tags('mod_notification_toggle_read_status') }}
+{% endblock %}
+
+{% block css %}
+    {{ parent() }}
+    {{ encore_entry_link_tags('mod_notification_toggle_read_status') }}
+{% endblock %}
+
+{% block content %}
+<div class="col-10 notification notification-list">
+    <h1>{{ block('title') }}</h1>
+
+    <ul class="nav nav-pills justify-content-center">
+        <li class="nav-item">
+            <a class="nav-link {% if step == 'inbox' %}active{% endif %}" href="{{ path('chill_main_notification_my') }}">
+                {{ 'notification.Notifications received'|trans }}
+                {% if unreads['inbox'] > 0 %}
+                    <span class="badge rounded-pill bg-danger">
+                        {{ unreads['inbox'] }}
+                    </span>
+                {% endif %}
+            </a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link {% if step == 'sent' %}active{% endif %}" href="{{ path('chill_main_notification_sent') }}">
+                {{ 'notification.Notifications sent'|trans }}
+                {% if unreads['sent'] > 0 %}
+                    <span class="badge rounded-pill bg-danger">
+                        {{ unreads['sent'] }}
+                    </span>
+                {% endif %}
+            </a>
+        </li>
+    </ul>
+
+    {% if datas|length == 0 %}
+        {% if step == 'inbox' %}
+            <p class="chill-no-data-statement">{{ 'notification.Any notification received'|trans }}</p>
+        {% else %}
+            <p class="chill-no-data-statement">{{ 'notification.Any notification sent'|trans }}</p>
+        {% endif %}
+    {% else %}
+        <div class="flex-table">
+            {% for data in datas %}
+                {% set notification = data.notification %}
+                {% include 'ChillMainBundle:Notification:_list_item.html.twig' %}
+            {% endfor %}
+        </div>
+    {% endif %}
+</div>
+{% endblock content %}

src/Bundle/ChillMainBundle/Resources/views/Notification/show.html.twig

@@ -1,42 +1,121 @@
 {% extends "@ChillMain/layout.html.twig"  %}
 
+{% block title 'notification.show notification from %sender%'|trans(
+    { '%sender%': notification.sender|chill_entity_render_string }
+) ~ ' ' ~ notification.title %}
+
+{% block js %}
+    {{ parent() }}
+    {{ encore_entry_script_tags('mod_notification_toggle_read_status') }}
+{% endblock %}
+
+{% block css %}
+    {{ parent() }}
+    {{ 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 id="container content">
-        <div class="grid-8 centered">
-            <h1>{{ "Notifications list" | trans }}</h1>
-            <!-- TODO : UNREAD & READ -->
+<div class="col-10 notification notification-show">
 
-            {%for data in datas %}
-                {% set notification = data.notification %}
+    <h1>{{ 'notification.Notification'|trans }}</h1>
 
-                <dl class="chill_view_data">
-                    <dt class="inline">{{ 'Message'|trans }}</dt>
-                    <dd>{{ notification.message }}</dd>
-                </dl>
+    <div class="flex-table">
+        {% include 'ChillMainBundle:Notification:_list_item.html.twig' with {
+            'data': {
+                 'template': handler.getTemplate(notification),
+                 'template_data': handler.getTemplateData(notification)
+            },
+            'action_button': 'false'
+        } %}
+    </div>
 
-                <dl class="chill_view_data">
-                    <dt class="inline">{{ 'Date'|trans }}</dt>
-                    <dd>{{ notification.date | date('long') }}</dd>
-                </dl>
+    <div class="notification-comment-list my-5">
+        <h2 class="chill-blue">{{ 'notification.comments_list'|trans }}</h2>
 
+        {% if notification.comments|length > 0 %}
+            <div class="flex-table">
+                {% for comment in notification.comments %}
 
-                <dl class="chill_view_data">
-                    <dt class="inline">{{ 'Sender'|trans }}</dt>
-                    <dd>{{ notification.sender }}</dd>
-                </dl>
+                    {% 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>
 
-                <dl class="chill_view_data">
-                    <dt class="inline">{{ 'Addressees'|trans }}</dt>
-                    <dd>{{ notification.addressees |join(', ')  }}</dd>
-                </dl>
+                                {{ 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) }}
+
+                            </div>
+                        </div>
+                    {% endif %}
+
+                {% 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) }}
 
-                <dl class="chill_view_data">
-                    <dt class="inline">{{ 'Entity'|trans }}</dt>
-                    <dd>
-                        {% include data.template with data.template_data %}
-                    </dd>
-                </dl>
-            {% endfor %}
         </div>
     </div>
+
+    <ul class="record_actions sticky-form-buttons">
+        <li class="cancel">
+            <a href="{{ chill_return_path_or('chill_main_notification_my') }}" class="btn btn-cancel">
+                {{ 'Cancel'|trans|chill_return_path_label }}
+            </a>
+        </li>
+        <li>
+            {# Vue component #}
+            <span class="notification_toggle_read_status"
+                data-notification-id="{{ notification.id }}"
+                data-notification-current-is-read="1"
+            ></span>
+        </li>
+    </ul>
+</div>
 {% endblock content %}

src/Bundle/ChillMainBundle/Resources/views/layout.html.twig

@@ -106,6 +106,6 @@
         });
     </script>
 
-    {% block js%}<!-- nothing added to js -->{% endblock %}
+    {% block js %}<!-- nothing added to js -->{% endblock %}
 </body>
 </html>