add modal to confirm delete action + delete button changed

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

@@ -21,18 +21,17 @@
             <dd v-if="evaluation.warningInterval">{{ evaluation.warningInterval }}</dd>
 
             <template v-if="evaluation.documents.length > 0">
-              <dt>{{ $t('documents') }} :</dt>
-              <dd>
-                <ul>
+               <dt>{{ $t('documents') }} :</dt>
+               <dd>
+                  <ul>
                   <li v-for="d in evaluation.documents">
-                    {{ d.template.name.fr }}
-                    <a :href="buildEditLink(d.storedObject)" class="btn btn-action btn-sm">
-                      <i class="fa fa-edit"></i>
-                    </a>
+                     {{ d.template.name.fr }}
+                     <a :href="buildEditLink(d.storedObject)" class="btn btn-action btn-sm">
+                        <i class="fa fa-edit"></i>
+                     </a>
                   </li>
-                </ul>
-              </dd>
-
+                  </ul>
+               </dd>
             </template>
 
          </dl>
@@ -40,9 +39,9 @@
 
             <dt v-if="evaluation.comment">{{ $t('comment') }} :</dt>
             <dd v-if="evaluation.comment">
-              <blockquote class="chill-user-quote">
-                {{ evaluation.comment }}
-              </blockquote>
+               <blockquote class="chill-user-quote">
+                  {{ evaluation.comment }}
+               </blockquote>
             </dd>
 
          </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;
       },