improve planning output layout

src/components/Footer.vue

@@ -57,4 +57,9 @@ export default defineComponent({
   text-decoration: none;
   color: var(--color-primary-400);
 }
+@media print {
+  .footer {
+    display: none !important;
+  }
+}
 </style>

src/components/Header.vue

@@ -175,4 +175,9 @@ export default defineComponent({
   background-color: var(--color-accent-400);
   border-radius: 0 4px 4px 0;
 }
+@media print {
+  .header {
+    display: none !important;
+  }
+}
 </style>

src/views/PlanningOutput.vue

@@ -1,7 +1,18 @@
 <template>
   <navigation-panel v-model="show" :options="navOption">
-    <planning v-if="show == 'benevole'" />
-    <div v-if="show == 'card'" class="benevole-container">
+    <div v-if="show == 'benevole'" class="benevole-container">
+      <h3 class="benevole-title">{{ benevoleName }}</h3>
+      <div class="benevole-change">
+        <button class="btn icon small ghost" @click="prev">
+          <i class="material-icons">chevron_left</i></button
+        >{{ pagination
+        }}<button class="btn icon small ghost" @click="next">
+          <i class="material-icons">chevron_right</i>
+        </button>
+      </div>
+      <planning :benevoleId="benevoleId" />
+    </div>
+    <div v-if="show == 'card'" class="printable-container">
       <span v-if="benevoles.length == 0">Pas de bénévole</span>
       <benevole-card v-else v-for="(b, idx) in benevoles" :benevole="b" :key="idx" />
     </div>
@@ -23,7 +34,7 @@ const navOption: Array<NavigationOption> = [
 export default defineComponent({
   components: { Planning, NavigationPanel, BenevoleCard },
   data() {
-    return { navOption, show: "card" };
+    return { navOption, show: "benevole", benevoleIdx: 0 };
   },
   computed: {
     benevoles(): Array<Benevole> {
@@ -31,12 +42,50 @@ export default defineComponent({
         a.shortame.localeCompare(b.shortame)
       );
     },
+    benevoleId(): number {
+      return this.benevoles[this.benevoleIdx].id;
+    },
+    benevoleName(): string {
+      return (
+        this.$store.getters.getBenevoleById(this.benevoleId)?.fullname ??
+        "Pas de benevole à afficher"
+      );
+    },
+    pageSize(): number {
+      return this.benevoles.length.toString().length;
+    },
+    pagination(): string {
+      return ("    " + (this.benevoleIdx + 1)).slice(-this.pageSize) + "/" + this.benevoles.length;
+    },
+  },
+  methods: {
+    prev() {
+      this.benevoleIdx--;
+      if (this.benevoleIdx == -1) this.benevoleIdx = this.benevoles.length - 1;
+    },
+    next() {
+      this.benevoleIdx++;
+      if (this.benevoleIdx == this.benevoles.length) this.benevoleIdx = 0;
+    },
   },
 });
 </script>
 
 <style>
 .benevole-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.benevole-change {
+  margin-bottom: 8px;
+  font-family: "Roboto Mono", "Courier New", Courier, monospace;
+}
+.benevole-change > .btn {
+  margin: 0 8px;
+}
+.printable-container {
   break-inside: auto;
   display: block;
   border-collapse: collapse;
@@ -46,9 +95,7 @@ export default defineComponent({
     -webkit-print-color-adjust: exact; /*chrome & webkit browsers*/
     color-adjust: exact; /*firefox & IE */
   }
-  .panel,
-  header,
-  footer {
+  .panel {
     display: none !important;
   }
   .panel-container-main {