delete and edit functionnality

pom.xml

@@ -1,5 +1,4 @@
-<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
-         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
     <modelVersion>4.0.0</modelVersion>
 
     <groupId>fr.lirmm</groupId>
@@ -225,6 +224,14 @@
             <artifactId>jsoup</artifactId>
             <version>1.13.1</version>
         </dependency>
+
+        <dependency>
+            <groupId>org.apache.commons</groupId>
+            <artifactId>commons-digester3</artifactId>
+            <version>3.2</version>
+            <classifier>with-deps</classifier>
+        </dependency>
+
     </dependencies>
 
     <build>

src/main/webapp/assets/js/views/agenda.vue

@@ -3,33 +3,100 @@
     <base-layout id="testfunc">
       <template v-slot:title>
         <h1>Agenda</h1>
+        <div v-if="user.is('ADMIN') || user.is('SUPERADMIN')">
+          <button
+            class="edit-btn space-top"
+            v-if="!isEditMode"
+            @click="
+              () => {
+                isEditMode = true;
+                copyAgendaInfo();
+              }
+            "
+            title="Modifier l'agenda"
+          >
+            <img alt="edit" src="assets/img/edit.png" />
+          </button>
+          <button
+            class="edit-btn space-top"
+            v-if="isEditMode"
+            @click="
+              () => {
+                isEditMode = false;
+              }
+            "
+            title="Annuler la modification"
+          >
+            <img alt="edit" src="assets/img/cancel.png" />
+          </button>
+          <button
+            title="Supprimer l'agenda"
+            class="delete-btn space-top"
+            v-if="!isEditMode"
+            @click="
+              () => {
+                deleteAgenda();
+              }
+            "
+          >
+            <img alt="edit" src="assets/img/delete.png" />
+          </button>
+        </div>
       </template>
       <div class="space-top block">
         <label>
           <span>Titre</span>
         </label>
-        <span class="block">{{ program.title }}</span>
+        <span v-if="!isEditMode" class="block">{{ program.title }}</span>
+        <input
+          v-if="isEditMode"
+          class="block"
+          type="text"
+          v-model="editionProgram.title"
+        />
 
         <label class="block space-top">
           <span>Description</span>
         </label>
-        <span class="block">{{ program.description }}</span>
+        <span v-if="!isEditMode" class="block">{{ program.description }}</span>
+        <textarea
+          v-if="isEditMode"
+          class="block"
+          v-model="editionProgram.description"
+        ></textarea>
 
         <label class="block space-top">
           <span class="block">Date</span>
+          <v-date-picker
+            v-if="isEditMode"
+            v-model="editionProgram.date"
+            mode="dateTime"
+            :timezone="timezone"
+            :min-date="new Date()"
+            color="red"
+          />
         </label>
-        <span class="block">{{
+        <span v-if="!isEditMode" class="block">{{
           new Date(program.date).toLocaleString()
         }}</span>
+        <span v-if="isEditMode" class="block">{{
+          editionProgram.date.toISOString()
+        }}</span>
 
         <label class="block space-top">
           <span>URL</span>
         </label>
-        <span class="block"
+        <span v-if="!isEditMode" class="block">
-          ><a :href="program.url" target="_blank">{{ program.url }}</a></span
+          <a :href="program.url" target="_blank">{{ program.url }}</a>
-        >
+        </span>
+        <input v-if="isEditMode" type="text" v-model="editionProgram.url" />
       </div>
       <div class="space-top"></div>
+      <div v-if="isEditMode" class="space-top">
+        <button id="modifySondage" @click="()=>{modifyAgenda()}">
+          Modifier l' agenda
+        </button>
+      </div>
     </base-layout>
   </div>
 </template>
@@ -48,6 +115,51 @@
 .block {
   display: block;
 }
+
+#modifySondage {
+  background-color: #b84000;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  color: white;
+  border-color: transparent;
+  box-shadow: 0.1rem 0.1rem 1rem #b84000;
+  margin-bottom: 2rem;
+  cursor: pointer;
+}
+.edit-btn {
+  background-color: #808080;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  color: white;
+  border-color: transparent;
+  box-shadow: 0.1rem 0.1rem 1rem #808080;
+  margin-bottom: 2rem;
+  cursor: pointer;
+  width: 50px;
+  height: 50px;
+}
+.delete-btn {
+  background-color: #dd2034;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  color: white;
+  border-color: transparent;
+  box-shadow: 0.1rem 0.1rem 1rem #dd2034;
+  margin-bottom: 2rem;
+  cursor: pointer;
+  width: 50px;
+  height: 50px;
+}
+.cancel-btn {
+  background-color: #b84000;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  color: white;
+  border-color: transparent;
+  box-shadow: 0.1rem 0.1rem 1rem #b84000;
+  margin-bottom: 2rem;
+  cursor: pointer;
+}
 </style>
 
 <script>
@@ -57,11 +169,15 @@ const baseUrl =
 module.exports = {
   data() {
     return {
+      isEditMode: false,
       program: false,
+      editionProgram: false,
+      user: false,
     };
   },
   created() {
     this.fetchProgram();
+    this.getCurrentUser();
   },
   methods: {
     fetchProgram: async function () {
@@ -70,10 +186,54 @@ module.exports = {
           `${baseUrl}/ws/agenda/calendars/${this.$route.query.id}`
         );
         this.program = program.data;
+        this.editionProgram = { ...program.data };
       } catch (expetion) {
         console.error(expetion);
       }
     },
+    copyAgendaInfo() {
+      this.editionProgram = {
+        ...this.program,
+        date: new Date(this.program.date),
+      };
+    },
+    getCurrentUser: async function () {
+      ArenService.Users.getLoged({
+        onSuccess: (logedUser) => {
+          this.user = logedUser;
+
+          ArenService.NotificationListener.listen({
+            onMessage: (notif) => {
+              this.user.notifications.push(notif);
+              let message = this.$t(
+                "notification." + notif.content.message,
+                notif.content.details
+              );
+              this.$toast(message);
+              new BrowserNotification("AREN", {
+                body: message,
+              });
+            },
+          });
+        },
+        onError: (e) => {
+          this.logout();
+        },
+      });
+    },
+    modifyAgenda: function () {
+      new BrowserNotification("En cours de construction ....", {
+        body: "Modification de l'agenda",
+      });
+    },
+    deleteAgenda: async function () {
+      try {
+        let _= await axios.delete(`${baseUrl}/ws/agenda/calendars/${this.$route.query.id}`);
+        location.href = baseUrl;
+      } catch (error) {
+        console.log(error)
+      }
+    },
   },
 };
 </script>

src/main/webapp/assets/js/views/home.vue

@@ -56,7 +56,7 @@
               <img
                 alt="image"
                 class="category-picture"
-                v-bind:src="program.img"
+                src='assets/img/calendar.png'
               />
             </div>
             <div>

src/main/webapp/assets/js/views/sondage.vue

@@ -54,7 +54,7 @@
                 @click="vote(subtheme, `FOR`)"
                 v-if="checkVoteAvalaibility(subtheme.id)"
               >
-                <span>Intervenir | {{ subtheme.for }}</span>
+                <span>Participation certaine | {{ subtheme.for }}</span>
               </button>
             </td>
           </tr>
@@ -66,7 +66,7 @@
                 v-if="checkVoteAvalaibility(subtheme.id)"
               >
                 <span
-                  >Intervenir selon son évolution | {{ subtheme.neutral }}</span
+                  >Participation possible | {{ subtheme.neutral }}</span
                 >
               </button>
             </td>
@@ -78,7 +78,7 @@
                 @click="vote(subtheme, `AGAINST`)"
                 v-if="checkVoteAvalaibility(subtheme.id)"
               >
-                <span>Observer | {{ subtheme.against }}</span>
+                <span>Simple observateur | {{ subtheme.against }}</span>
               </button>
             </td>
           </tr>
@@ -88,7 +88,7 @@
               :key="subtheme.id"
               class="text-centered"
             >
-              <span class="nb-total-vote">{{ subtheme.for }}</span>
+              <span class="nb-total-vote">{{ subtheme.for }} participant(s) </span>
             </td>
           </tr>
         </table>