add modal to confirm delete action + delete button changed

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue

@@ -32,7 +32,6 @@
                   </li>
                   </ul>
                </dd>
-
             </template>
 
          </dl>
@@ -50,6 +49,9 @@
             <li>
                <a class="btn btn-sm btn-update" @click="toggleEditEvaluation(e)">{{ $t('action.edit') }}</a>
             </li>
+            <li>
+               <a class="btn btn-sm btn-delete" @click="modal.showModal = true">{{ $t('action.delete') }}</a>
+            </li>
          </ul>
       </div>
       <div v-if="evaluation.editEvaluation">
@@ -60,11 +62,28 @@
             </li>
          </ul>
       </div>
+
+      <teleport to="body">
+         <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
+            <template v-slot:header>
+               <h2 class="modal-title">{{ $t('delete.sure') }}</h2>
+            </template>
+            <template v-slot:body>
+               <p>{{ $t('delete.sure_description') }}</p>
+            </template>
+            <template v-slot:footer>
+               <button class="btn btn-danger" @click="removeEvaluation(evaluation)">
+                  {{ $t('delete.ok') }}
+               </button>
+            </template>
+         </modal>
+      </teleport>
    </div>
 </template>
 
 <script>
 import FormEvaluation from './FormEvaluation.vue';
+import Modal from 'ChillMainAssets/vuejs/_components/Modal';
 
 const i18n = {
    messages: {
@@ -78,6 +97,11 @@ const i18n = {
          warningInterval: "Rappel (jours)",
          comment: "Note publique",
          documents: "Documents",
+         delete: {
+            sure: "Êtes-vous sûr?",
+            sure_description: "Cette évaluation sera supprimée de cette action d'accompagnement",
+            ok: "Supprimer"
+         }
       }
    }
 };
@@ -85,12 +109,18 @@ const i18n = {
 export default {
    name: "AddEvaluation",
    components: {
-      FormEvaluation
+      FormEvaluation,
+      Modal
    },
    props: ['evaluation'],
    i18n,
    data() {
-      return {};
+      return {
+         modal: {
+            showModal: false,
+            modalDialogClass: "modal-dialog-centered modal-md"
+         }
+      };
    },
    computed: {
       pickedEvaluations() {
@@ -99,7 +129,6 @@ export default {
    },
    methods: {
       removeEvaluation(e) {
-         console.log(e);
          this.$store.commit('removeEvaluation', e);
          return;
       },