affichage de la période et de l'offre, commun pour aside ou pour les lettre-header

src/PotageBundle/Repository/InfoRepository.php

@@ -90,7 +90,7 @@ class InfoRepository extends \Doctrine\ORM\EntityRepository
     public function findAllForLettreReadInfosSorted($id, $sorted)
     {
         $qb = $this->createQueryBuilder('i')
-            ->select('i.id', 'i.title', 'i.subtitle', 'i.text', 'i.color', 'i.status')
+            ->select('i.id', 'i.title', 'i.subtitle', 'i.text', 'i.color', 'i.status', 'i.postedAt')
             ->join('i.lettres', 'l')
             ->addSelect('l.id id_lettre')
             ->where('l.id = :id')
@@ -111,7 +111,7 @@ class InfoRepository extends \Doctrine\ORM\EntityRepository
     public function findAllForLettreReadInfos($id)
     {
         $qb = $this->createQueryBuilder('i')
-            ->select('i.id', 'i.title', 'i.subtitle', 'i.text', 'i.color', 'i.status')
+            ->select('i.id', 'i.title', 'i.subtitle', 'i.text', 'i.color', 'i.status', 'i.postedAt')
             ->join('i.lettres', 'l')
             ->addSelect('l.id id_lettre')
             ->where('l.id = :id')

src/PotageBundle/Resources/views/Lettre/ajaxDisplay.js

@@ -72,34 +72,8 @@ function buildRowLettre(jsonRow)
     }
     tr.appendChild(td2);
 
-    let offreLink = Routing.generate('potage_offre_legumes_ajax_display', {'id': jsonRow.offre.id });
-    let abonnes = jsonRow.groupe.utilisateurs.length + ' abonné' + (jsonRow.groupe.utilisateurs.length > 1 ? 's' : '');
-    let legumes = jsonRow.offre.offre_legumes.length + ' légume' + (jsonRow.offre.offre_legumes.length > 1 ? 's' : '');
-
-
     let td3 = document.createElement('td');
-    td3.innerHTML = `<dl>
-        <dt>Pour:</dt>
-        <dd>
-            groupe ${jsonRow.groupe.nom}
-            <span class="details parenth">${abonnes}</span>
-        </dd>
-        <dt>Sujet:</dt>
-        <dd>
-            ${jsonRow.subject}
-        </dd> 
-        <dt>Période:</dt>
-        <dd>
-            ${formatStringDate(jsonRow.started_at, true, true, false, false)} → 
-            ${formatStringDate(jsonRow.ended_at, true, true, false, false)}
-        </dd> 
-        <dt>Offre:</dt>
-        <dd>
-            <a href="${offreLink}" title="Voir l'offre" class="btn btn-outline-dark btn-sm">
-            <i class="fas fa-paperclip fa-fw"></i> ${jsonRow.offre.reference}</a>
-            <span class="details parenth">${legumes}</span>
-        </dd>
-    </dl>`;
+    td3.innerHTML = displayHeaderLettre(jsonRow);
     tr.appendChild(td3);
 
     let td4 = document.createElement('td');

src/PotageBundle/Resources/views/LettreInfos/ajaxDisplay.html.twig

@@ -46,22 +46,12 @@
                     </dl>
                 </li>
                 <li class="list-group-item">
-                    <dl>
-                        <dt>Pour:</dt>
-                        <dd class="field-lettre field2">Groupe {{ lettre.groupe.nom }}</dd>
-                        <dt>Sujet:</dt>
-                        <dd class="field-lettre field3">{{ lettre.subject }}</dd>
-                        <dt>Période:</dt>
-                        <dd>
-                            <span class="field-lettre field4">{{ lettre.startedAt.format('d/m/Y') }}</span> →
-                            <span class="field-lettre field5">{{ lettre.endedAt.format('d/m/Y') }}</span>
-                        </dd>
-                    </dl>
+                    <dl class="field-lettre field2"></dl>
                 </li>
                 <li class="list-group-item border-bottom-0">
                     <dl>
                         <dt>Statut:</dt>
-                        <dd class="field-lettre field6">{{ lettre.status }}</dd>
+                        <dd class="field-lettre field3">{{ lettre.status }}</dd>
                     </dl>
                 </li>
             </ul>
@@ -106,6 +96,7 @@
         </div>
 
         <div id="maingrid" class="grid lettre-infos {{ lettre.status }}">
+            <div id="lettre-header" class="border-bottom mb-4"></div>
             <div id="sortable"></div>
             <div class="clearfix"></div>
         </div>

src/PotageBundle/Resources/views/LettreInfos/ajaxDisplay.js

@@ -113,6 +113,8 @@ if (sortForm)
 function reloadBlocLettre()
 {
     let fieldsLettre = document.querySelectorAll('.field-lettre');
+    let headerLettre = document.querySelector('#lettre-header');
+
     AJAX('GET',
         Routing.generate('api_lettre_read_one', {'id': id_lettre}),
         function(request) {
@@ -122,11 +124,10 @@ function reloadBlocLettre()
             let colors = {'draft': 'warning', 'current': 'info', 'sent': 'success', 'closed': 'secondary', 'trash': 'danger'};
             fieldsLettre[0].textContent = formatStringDateTime(json.created_at, true, true, false, false);
             fieldsLettre[1].textContent = json.updated_at ? formatStringDateTime(json.updated_at, true, true, false, false) : null;
-            fieldsLettre[2].textContent = 'Groupe ' + json.groupe.nom;
-            fieldsLettre[3].textContent = json.subject;
-            fieldsLettre[4].textContent = formatStringDate(json.started_at, true, true, false, false);
-            fieldsLettre[5].textContent = formatStringDate(json.ended_at, true, true, false, false);
-            fieldsLettre[6].innerHTML = buildColorSquare(json.status, colors) + listStatus[json.status];
+            fieldsLettre[2].innerHTML = displayPeriodAndOffre(json);
+            fieldsLettre[3].innerHTML = buildColorSquare(json.status, colors) + listStatus[json.status];
+
+            headerLettre.innerHTML = displayHeaderLettre(json, true);
         }
     );
 }

web/css/style.css

@@ -129,7 +129,7 @@ dd {
 aside.col-3 dd {
     padding-left: 0;
 }
-table.lettres dd {
+.lettre-header dd {
     margin-top: -1.5em; /* nécessaire template Lettre */
 }
 
@@ -190,7 +190,7 @@ span#rebours {
 table#maintab td {
     max-width: 400px;
 }
-table span.details { /*
+span.details { /*
     font-style: italic; */
     font-size: 10pt;
     color: #6f6f6f;
@@ -215,7 +215,7 @@ table span.details { /*
 }
 
 /*
-#offre_legumes_ajax_display
+# maingrid
 */
 #maingrid.draft,
 #maingrid.current,
@@ -229,6 +229,10 @@ table span.details { /*
     border: 6px dashed #d8d8d8;
     padding: 2em;
 }
+#lettre_infos_ajax_display #maingrid.current #sortable div.info:hover,
+#maingrid.draft #sortable div.info:hover {
+    background-color: #e8e8e8;
+}
 #lettre_infos_ajax_display #maingrid.current:after,
 #maingrid.draft:after {
     content: "Glisser les éléments avec la souris pour les repositionner";
@@ -258,9 +262,16 @@ table span.details { /*
     margin-top: -1em; */
     background-color: white;
 }
-#sortable div.info:hover {
-    background-color: #e8e8e8;
+#sortable div.info h2 {
+    font-size: 150%;
+}
+#sortable div.info h4 {
+    font-size: 120%;
 }
+#sortable div.info p {
+    font-size: 90%;
+}
+
 #sortable div.ui-state-default {
     margin: 1em 1em 0 0;
     padding: 0;
@@ -306,4 +317,3 @@ span.posted:first-letter {
     text-transform: uppercase;
 }
 
-

web/js/ajax_functions.js

@@ -246,12 +246,13 @@ function boolTriggerHideTarget(trigger, target)
 
 /*
 *   Affiche une Actualité
+*   @param info json
 */
 function displayBodyOneInfo(body, info)
 {
     let subtitle = info.subtitle ? '<h4>' + info.subtitle + '</h4>' : '';
-    let publiDate = (typeof info.posted_at !== 'undefined') ?
-        '<span class="posted">' + formatStringDateTime(info.posted_at, true, true, false, false) + '</span>' :
+    let publiDate = (typeof info.postedAt !== 'undefined') ?
+        '<span class="posted">' + formatStringDate(info.postedAt, true, true, false, false) + '</span>' :
         '';
     let color = info.color ? ' style="color: ' + info.color + ';"' : '';
     body.innerHTML = '<div class="info"'
@@ -264,6 +265,48 @@ function displayBodyOneInfo(body, info)
     ;
 }
 
+/*
+*   Affiche l'entête d'une lettre
+*   @param lettre json
+*/
+function displayPeriodAndOffre(lettre)
+{
+    let offreLink = Routing.generate('potage_offre_legumes_ajax_display', {'id': lettre.offre.id });
+    let legumes = lettre.offre.offre_legumes.length + ' légume' + (lettre.offre.offre_legumes.length > 1 ? 's' : '');
+
+    return `<dt>Période:</dt>
+        <dd>
+            ${formatStringDate(lettre.started_at, true, true, false, false)} → 
+            ${formatStringDate(lettre.ended_at, true, true, false, false)}
+        </dd> 
+        <dt>Offre:</dt>
+        <dd>
+            <a href="${offreLink}" title="Voir l'offre" class="btn btn-outline-dark btn-sm">
+            <i class="fas fa-paperclip fa-fw"></i> ${lettre.offre.reference}</a>
+            <span class="details parenth">${legumes}</span>
+        </dd>
+        `;
+}
+function displayHeaderLettre(lettre, facultatif = false)
+{
+    let abonnes = lettre.groupe.utilisateurs.length + ' abonné' + (lettre.groupe.utilisateurs.length > 1 ? 's' : '');
+    let periode = facultatif ? '' : displayPeriodAndOffre(lettre);
+
+    return `<div class="lettre-header"><dl>
+        <dt>Pour:</dt>
+        <dd>
+            groupe ${lettre.groupe.nom}
+            <span class="details parenth">${abonnes}</span>
+        </dd>
+        <dt>Sujet:</dt>
+        <dd>
+            ${lettre.subject}
+        </dd> 
+        ${periode}
+    </dl></div>`;
+}
+
+
 
 /*
 *  F O N C T I O N S   A J A X