test new printable layout

src/components/BenevoleCard.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="benevole-card">
     <div class="benevole-card--title">{{ benevole.name }}</div>
-    <div class="benevole-card--content" v-for="creneau in creneaux" :key="creneau.id">
-      <creneau-viewer :creneau="creneau" />
+    <div v-for="(thisDayCreneauList, day) in personalCreneauListPerDay" :key="day">
+      <div class="benevole-card--day">{{ day }}</div>
+      <creneau-viewer v-for="creneau in thisDayCreneauList" :key="creneau.id" :creneau="creneau" />
     </div>
   </div>
 </template>
@@ -12,6 +13,8 @@ import Benevole from "@/models/Benevole";
 import Creneau from "@/models/Creneau";
 import creneauViewer from "@/components/PrintableCreneauViewer.vue";
 import { defineComponent, PropType } from "vue";
+import { Dictionary } from "lodash";
+import dayjs from "dayjs";
 
 export default defineComponent({
   components: { creneauViewer },
@@ -27,6 +30,29 @@ export default defineComponent({
             .sort((a, b) => a.start.getTime() - b.start.getTime())
         : [];
     },
+    personalCreneauListPerDay(): Dictionary<Array<Creneau>> {
+      if (this.benevole !== undefined) {
+        const benevole = this.benevole;
+        return (
+          this.$store.state.creneauList
+            // filter creneau for this benevole
+            .filter((o) => o.benevoleIdList.indexOf(benevole.id) > -1)
+            // sort by date
+            .sort((a, b) => a.start.getTime() - b.start.getTime())
+            // Groupe créneau by day
+            .reduce((acc: Dictionary<Array<Creneau>>, creneau: Creneau) => {
+              const day = dayjs(creneau.start).format("dddd D MMMM");
+              if (!(day in acc)) {
+                acc[day] = [];
+              }
+              acc[day].push(creneau);
+              return acc;
+            }, {})
+        );
+      } else {
+        return {};
+      }
+    },
   },
 });
 </script>
@@ -34,15 +60,22 @@ export default defineComponent({
 <style>
 .benevole-card {
   border: #000 solid 1px;
+  display: inline-block;
+  width: 100%;
+  vertical-align: top;
+  break-inside: avoid !important;
+  break-before: always;
+  -webkit-break-before: always;
 }
 .benevole-card--title {
   color: #fff;
   background: #000;
   font-weight: bold;
-  padding: 4px;
+  padding: 6px;
 }
-.benevole-card--content {
-  padding: 4px;
-  border-bottom: #000 1px solid;
+.benevole-card--day {
+  color: #fff;
+  background: #333;
+  padding: 6px;
 }
 </style>

src/components/PrintableCreneauViewer.vue

@@ -1,13 +1,21 @@
 <template>
-  <div>
-    <strong>{{ creneau.title }}</strong> {{ creneau.fromTo }}
-  </div>
-  <div v-if="creneau.description"><u>Description:</u> {{ creneau.description }}</div>
-  <div v-if="nextCreneauBenevoleList.length > 0">
-    <span>Qui te remplacera? </span>
-    <span v-for="benevole in nextCreneauBenevoleList" :key="benevole.id">
-      {{ benevole.shortame }},
-    </span>
+  <div class="creneau">
+    <div class="creneau-title">
+      {{ creneau.horaire }} <strong>{{ creneau.title }}</strong>
+    </div>
+    <div class="creneau-content">
+      <div v-if="creneau.description"><u>Description:</u> {{ creneau.description }}</div>
+      <div v-if="creneau.location"><u>Lieu:</u> {{ creneau.location }}</div>
+      <div v-if="responsable">
+        <u>Responsable:</u> {{ responsable.fullname }} (tel: {{ responsable.phone }})
+      </div>
+      <div v-if="nextCreneauBenevoleList.length > 0">
+        <span>Qui te remplacera? </span>
+        <span v-for="benevole in nextCreneauBenevoleList" :key="benevole.id">
+          {{ benevole.shortame }},
+        </span>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -15,9 +23,39 @@
 import { defineComponent } from "vue";
 
 import CreneauView from "@/mixins/creneauView";
+import Benevole from "@/models/Benevole";
 export default defineComponent({
   mixins: [CreneauView],
+  computed: {
+    responsable(): Benevole | null {
+      return this.creneau?.responsableId != undefined
+        ? this.$store.getters.getBenevoleById(this.creneau?.responsableId) ?? null
+        : null;
+    },
+  },
 });
 </script>
 
-<style></style>
+<style>
+.creneau {
+  border-bottom: #000 1px solid;
+}
+.creneau-title,
+.creneau-content {
+  padding: 6px;
+}
+/*
+@media (min-width: 20cm) {
+  .creneau-content > div {
+    width: 50%;
+    display: inline-block;
+  }
+}*/
+.creneau-title {
+  background: #ccc;
+  color: #000;
+}
+.creneau-title > strong {
+  margin-left: 8px;
+}
+</style>

src/views/PlanningOutput.vue

@@ -88,7 +88,7 @@ export default defineComponent({
 .printable-container {
   break-inside: auto;
   display: block;
-  border-collapse: collapse;
+  justify-content: baseline;
 }
 @media print {
   body {
@@ -101,13 +101,9 @@ export default defineComponent({
   .panel-container-main {
     margin-left: auto !important;
   }
-
-  .benevole-card {
-    display: block;
-    max-width: 100%;
-    break-inside: avoid !important;
-    break-before: always;
-    -webkit-break-before: always;
+}
+@media print and (min-width: 14.8cm) {
+  .printable-container {
   }
 }
 </style>