Merge pull request #67 from alexandrelam/add_notification

added notification when form is not complete
alexandrelam · May 3, 2021 · 29bb9fd · 29bb9fd
2 parents 6979d2b + fb2e471
commit 29bb9fd
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 14 deletions.
diff --git a/django/events/static/events/style.css b/django/events/static/events/style.css
@@ -487,6 +487,25 @@ a {
   line-height: 22px;
 }
 
+.error-msg{
+  position: fixed;
+  z-index: 10;
+  top: 2rem;
+  right: 2rem;
+  background-color: #fff2f0;
+  padding: 8px 15px;
+  border: solid #ffccc7 1px;
+  border-radius: 2px;
+}
+
+.error-msg svg{
+  margin-left: 10px;
+  cursor: pointer;
+}
+
+.error-msg .close-btn{
+    display: inline;
+}
 /*************************************/
 
 /*************************************/

diff --git a/django/events/templates/events/create_events.html b/django/events/templates/events/create_events.html
@@ -3,9 +3,17 @@
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/luxon"></script>
 <script src="https://unpkg.com/vue-datetime"></script>
-    
+
 <section class="create_events details" id="create_events_app">
     <div>
+        {% if errorMsg %}
+        <div class="error-msg" v-if="isDisplayed">
+            Veuillez remplir tous les champs du formulaire
+            <div class="close-btn" @click="isDisplayed = false">
+                <i class="fas fa-times"></i>
+            </div>
+        </div>
+        {% endif %}
         <div class="header">
             <div class="profile-picture" style="background-image : url('{{ adherent.picture.url }}')"></div>
             <div>
@@ -41,14 +49,16 @@ <h1 class="form-title">Proposer un événements</h1>
                             <label for="time-start">Date de début</label>
                             <div class="datetime-wrapper">
                                 <i class="far fa-calendar-plus"></i>
-                                <datetime type="datetime" v-model="datetime_start" format="yyyy-MM-dd HH:mm" name="time-start"></datetime> 
+                                <datetime type="datetime" v-model="datetime_start" format="yyyy-MM-dd HH:mm"
+                                    name="time-start"></datetime>
                             </div>
                         </div>
                         <div class="input-container">
                             <label for="time-end">Date de fin</label>
                             <div class="datetime-wrapper">
                                 <i class="far fa-calendar-plus"></i>
-                                <datetime type="datetime" v-model="datetime_end" format="yyyy-MM-dd HH:mm" name="time-end"></datetime> 
+                                <datetime type="datetime" v-model="datetime_end" format="yyyy-MM-dd HH:mm"
+                                    name="time-end"></datetime>
                             </div>
                         </div>
                     </div>
@@ -88,41 +98,42 @@ <h1 class="form-title">Proposer un événements</h1>
             page_index: 1,
             datetime_start: "",
             datetime_end: "",
+            isDisplayed: true
         },
     });
 </script>
 <style>
-    .vdatetime-popup .vdatetime-popup__header{
+    .vdatetime-popup .vdatetime-popup__header {
         background: var(--hover-highlight);
     }
 
-    .vdatetime-popup .vdatetime-calendar__month__day--selected>span>span{
+    .vdatetime-popup .vdatetime-calendar__month__day--selected>span>span {
         background: var(--hover-highlight);
     }
 
-    .vdatetime-popup__actions .vdatetime-popup__actions__button{
+    .vdatetime-popup__actions .vdatetime-popup__actions__button {
         color: var(--hover-highlight);
     }
 
-    .vdatetime-time-picker .vdatetime-time-picker__item--selected{
+    .vdatetime-time-picker .vdatetime-time-picker__item--selected {
         color: var(--hover-highlight);
     }
 
-    .datetime-wrapper{
+    .datetime-wrapper {
         position: relative;
     }
 
-    .datetime-wrapper input{
+    .datetime-wrapper input {
         cursor: pointer;
     }
 
-    .datetime-wrapper .fa-calendar-plus{
+    .datetime-wrapper .fa-calendar-plus {
         position: absolute;
         right: 10px;
         top: 50%;
         transform: translateY(-50%);
-        pointer-events: none; 
-      }
+        pointer-events: none;
+    }
 
     .form-title {
         margin-bottom: 54px;
@@ -134,7 +145,7 @@ <h1 class="form-title">Proposer un événements</h1>
         margin-bottom: 36px;
     }
 
-    .vdatetime .vdatetime-input{
+    .vdatetime .vdatetime-input {
         width: 500px;
     }
 
@@ -189,7 +200,7 @@ <h1 class="form-title">Proposer un événements</h1>
     }
 
     @media only screen and (max-width: 1250px) {
-        .vdatetime .vdatetime-input{
+        .vdatetime .vdatetime-input {
             width: 350px;
         }
     }

diff --git a/django/events/views.py b/django/events/views.py
@@ -44,6 +44,8 @@ def create_events(request):
     context["eventsList"] = Event.objects.filter(
         author_id=current_user.userId).order_by("date_begin")
 
+    context["errorMsg"] = False
+
     if request.method == 'POST':
         titre = request.POST["titre"]
         description = request.POST["description"]
@@ -75,6 +77,8 @@ def create_events(request):
                 event.image = img_couverture
 
             event.save()
+        else:
+            context["errorMsg"] = True
 
     return render(request, 'events/create_events.html', context)
 
@@ -123,6 +127,8 @@ def create_modify_event(request, id):
     context["eventsList"] = Event.objects.filter(
         author_id=current_user.userId).order_by("date_begin")
 
+    context["errorMsg"] = False
+
     if request.method == 'POST':
         titre = request.POST["titre"]
         description = request.POST["description"]
@@ -158,6 +164,8 @@ def create_modify_event(request, id):
                 event.image = img_couverture
             event.save()
             return redirect("/create/")
+        else:
+            context["errorMsg"] = True
 
     if request.user.userId == Event.objects.get(pk=id).author_id:
         return render(request, "events/create_events.html", context)