New feature : See all your notifications and delete them!

Pull Request feat/list notification Feature

assets/js/listNotification.js

@@ -0,0 +1,9 @@
+import '../scss/listNotification.scss'
+import Vue from "vue";
+import ListNotification from "../vue/ListNotification";
+
+new Vue({
+    components: { ListNotification },
+    template: "<list-notification/>",
+    // router
+}).$mount("#app-list-notification");

assets/scss/listNotification.scss

@@ -0,0 +1,31 @@
+@import "variables";
+
+.notification-wrapper {
+  color: $label-color;
+  background: white;
+  height: 80px;
+  border: 2px solid $grey-light;
+  border-radius: 3px;
+  line-height: 78px;
+
+  &:hover {
+    border: 2px solid $main-green;
+    -webkit-box-shadow: 0px 10px 10px -8px rgba(70,176,75,0.5);
+    -moz-box-shadow: 0px 10px 10px -8px rgba(70,176,75,0.5);
+    box-shadow: 0px 10px 10px -8px rgba(70,176,75,0.5);
+    transition-duration: 0.2s;
+
+    .title-notification {
+      color: $main-green;
+    }
+  }
+
+  i {
+    color: $label-color;
+    cursor: pointer;
+
+    &:hover {
+      color: darken($label-color, 10%);
+    }
+  }
+}

assets/vue/ListNotification.vue

@@ -0,0 +1,79 @@
+<template>
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-md-1 text-center">
+                ID
+            </div>
+            <div class="col-md-4 text-center">
+                Titre
+            </div>
+            <div class="col-md-4 text-center">
+                Contenu de la notification
+            </div>
+            <div class="col-md-2 text-center">
+                Date d'émission
+            </div>
+            <div class="col-md-1 text-center">
+                Actions
+            </div>
+        </div>
+        <div class="row notification-wrapper mb-2" v-for="notification in notifications" :key="notification.id">
+            <div class="col-md-1 text-center">
+                {{ notification.id }}
+            </div>
+            <div class="col-md-4 text-center">
+                <span class="title-notification">{{ notification.notifTitle }}</span>
+            </div>
+            <div class="col-md-4 text-center overflow-hidden">
+                {{ notification.notifText }}
+            </div>
+            <div class="col-md-2 text-center overflow-hidden">
+                {{ notification.notifDate }}
+            </div>
+            <div class="col-md-1 text-center">
+                <i class="fas fa-trash" v-on:click="removeElement(notification)"></i>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import axios from "axios";
+
+    export default {
+        name: "ListNotification",
+        data: function(){
+            return {
+                notifications: []
+            }
+        },
+        mounted() {
+            // Lorsque le composant est monté, lance un appel vers l'API pour récuperer les entrées
+            this.fetchNotifications()
+        },
+        methods: {
+            fetchNotifications: function(){
+                axios.get('/api/notifications?page=1')
+                    .then((response) => {
+                        this.notifications = response.data['hydra:member']
+                    })
+                    .catch(function () {
+                        console.log('Erreur dans le chargement!')
+                    });
+            },
+            removeElement: function(notification){
+                axios.delete(`/api/notifications/${notification.id}`)
+                    .then(() => {
+                        this.notifications.splice(this.notifications.indexOf(notification), 1);
+                    })
+                    .catch(function () {
+                        console.log('Erreur : Notification non supprimée !');
+                    });
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/Controller/AdminController.php

@@ -60,6 +60,15 @@ public function newNotification(Request $request)
         ]);
     }
 
+    /**
+     * @Route("/admin/notifications", name="admin.notifications")
+     * @return Response
+     */
+    public function listNotification()
+    {
+        return $this->render('admin/notification/list.html.twig');
+    }
+
    /**
      * @Route("/admin/new-food", name="admin.newFood")
      * @param Request $request

templates/admin/notification/list.html.twig

@@ -0,0 +1,26 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Youngfood - Notifications{% endblock %}
+
+{% block stylesheets %}
+    {{ encore_entry_link_tags('dashboard') }}
+    {{ encore_entry_link_tags('listNotification') }}
+{% endblock %}
+
+{% use 'partials/menu.html.twig' %}
+
+{% block second_title %}
+    Consulter mes <span class="inner-green">notifications</span>
+{% endblock %}
+
+{% block main_content %}
+
+    <div id="app-list-notification"></div>
+
+{% endblock %}
+
+{% block javascripts %}
+    {{ encore_entry_script_tags('dashboard') }}
+    {{ encore_entry_script_tags('listNotification') }}
+{% endblock %}
+

webpack.config.js

@@ -54,6 +54,9 @@ Encore
     // New Meal 
     .addEntry('newMeal', './assets/js/newMeal.js')
 
+    // Home Notifications
+    .addEntry('listNotification', './assets/js/listNotification.js')
+
     // New Booking
     .addEntry('newBooking', './assets/js/newBooking.js')