add planning on benevole editor

src/components/EditeurBenevole.vue

@@ -12,6 +12,9 @@
       >
         <i class="material-icons">delete_forever</i>Supprimer
       </button>
+      <button class="btn small secondary" :disabled="benevole === undefined" @click="toggleModal">
+        <i class="material-icons">event</i>Voir planning
+      </button>
     </div>
     <div class="empty" v-if="benevole === undefined">
       Veuillez selectioner une ligne du tableau.
@@ -83,6 +86,12 @@
       ></chips-input>
     </div>
   </div>
+  <div v-if="showModal" class="modal" @click="toggleModal">
+    <div class="modal-content" @click="(e) => e.stopPropagation()" style="min-width: 600px">
+      <h2>Planning de {{ benevole.fullname }}</h2>
+      <planning :benevoleId="benevole.id" />
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -91,6 +100,8 @@ import Competence from "@/models/Competence";
 import styledInput from "@/components/Form/Input.vue";
 import chipsInput from "@/components/Form/SelectChipInput.vue";
 import checkbox from "@/components/Form/CheckBox.vue";
+import Planning from "@/views/PlanningPersonnel.vue";
+
 import { defineComponent, PropType } from "vue";
 import { MutationTypes } from "@/store/Mutations";
 import AutocompleteOptions from "@/models/AutocompleteOptions";
@@ -98,12 +109,13 @@ import { ActionTypes } from "@/store/Actions";
 
 export default defineComponent({
   name: "EditeurBenevole",
-  components: { styledInput, chipsInput, checkbox },
+  components: { styledInput, chipsInput, checkbox, Planning },
   props: { benevole: { type: Object as PropType<Benevole> } },
   data: function () {
     return {
       refreshFrom: null,
       competenceIdList: [] as Array<string>,
+      showModal: false,
     };
   },
   watch: {
@@ -158,6 +170,9 @@ export default defineComponent({
     emitDeleteOrder: function () {
       this.$emit("delete", this.benevole);
     },
+    toggleModal() {
+      this.showModal = !this.showModal;
+    },
   },
 });
 </script>