From 91e739547bdf96bb85ff296a4b153649bec78104 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joan=20S=C3=A1nchez?= <joan@verdnatura.es>
Date: Sat, 11 Jul 2020 18:30:27 +0200
Subject: [PATCH] Changes

---
 modules/worker/front/calendar/index.html    | 25 +++---
 modules/worker/front/calendar/index.js      | 87 +++++++++++----------
 modules/worker/front/calendar/locale/es.yml |  3 +-
 3 files changed, 61 insertions(+), 54 deletions(-)

diff --git a/modules/worker/front/calendar/index.html b/modules/worker/front/calendar/index.html
index b77366328..55f22a931 100644
--- a/modules/worker/front/calendar/index.html
+++ b/modules/worker/front/calendar/index.html
@@ -4,17 +4,20 @@
     auto-load="true">
 </vn-crud-model>
 <div class="vn-w-lg">
-    <vn-card class="vn-pa-sm calendars">
-    <vn-calendar
-        ng-repeat="month in $ctrl.months"
-        data="$ctrl.events"
-        default-date="month"
-        format-day="$ctrl.formatDay($day, $element)"
-        display-controls="false"
-        hide-contiguous="true"
-        hide-year="true"
-        on-selection="$ctrl.onSelection($days)">
-    </vn-calendar>
+    <vn-card class="vn-pa-sm calendars" style="position:relative" >
+        <vn-icon icon="info" color-marginal style="position: absolute; top: 16px;right: 16px"
+            vn-tooltip="To start adding absences, click an absence type from the right menu and then on the day you want to add an absence">
+        </vn-icon>
+        <vn-calendar
+            ng-repeat="month in $ctrl.months"
+            data="$ctrl.events"
+            default-date="month"
+            format-day="$ctrl.formatDay($day, $element)"
+            display-controls="false"
+            hide-contiguous="true"
+            hide-year="true"
+            on-selection="$ctrl.onSelection($event, $days)">
+        </vn-calendar>
     </vn-card>
 </div>
 <vn-side-menu side="right">
diff --git a/modules/worker/front/calendar/index.js b/modules/worker/front/calendar/index.js
index 0b43eefc0..5e83e561a 100644
--- a/modules/worker/front/calendar/index.js
+++ b/modules/worker/front/calendar/index.js
@@ -44,7 +44,8 @@ class Controller extends Section {
     set worker(value) {
         this._worker = value;
 
-        if (value) this.refresh();
+        if (value)
+            this.refresh().then(() => this.repaint());
     }
 
     onData(data) {
@@ -78,8 +79,6 @@ class Controller extends Section {
                 });
             });
         }
-
-        this.repaint();
     }
 
     repaint() {
@@ -105,24 +104,25 @@ class Controller extends Section {
         this.absenceType = absenceType;
     }
 
-    onSelection($days) {
+    onSelection($event, $days) {
         if (!this.absenceType)
-            return this.vnApp.showMessage(this.$t('Choose an absence type'));
+            return this.vnApp.showMessage(this.$t('Choose an absence type from the right menu'));
 
         const day = $days[0];
         const stamp = day.getTime();
         const event = this.events[stamp];
+        const calendar = $event.target.closest('vn-calendar').$ctrl;
 
         if (event) {
             if (event.type == this.absenceType.code)
-                this.delete(day, event);
+                this.delete(calendar, day, event);
             else
-                this.edit(event);
+                this.edit(calendar, event);
         } else
-            this.create(day);
+            this.create(calendar, day);
     }
 
-    create(dated) {
+    create(calendar, dated) {
         const absenceType = this.absenceType;
         const params = {
             dated: dated,
@@ -131,55 +131,58 @@ class Controller extends Section {
 
         const path = `Workers/${this.$params.id}/createAbsence`;
         this.$http.post(path, params).then(res => {
-            this.responseHandler(() => {
-                const newEvent = res.data;
-                this.events[dated.getTime()] = {
-                    name: absenceType.name,
-                    color: absenceType.rgb,
-                    type: absenceType.code,
-                    absenceId: newEvent.id
-                };
-                this.refresh();
-            });
+            const newEvent = res.data;
+            this.events[dated.getTime()] = {
+                name: absenceType.name,
+                color: absenceType.rgb,
+                type: absenceType.code,
+                absenceId: newEvent.id
+            };
+
+            this.repaintCanceller(() =>
+                this.refresh().then(calendar.repaint())
+            );
         });
     }
 
-    edit(event) {
+    edit(calendar, event) {
         const absenceType = this.absenceType;
         const params = {
             absenceId: event.absenceId,
             absenceTypeId: absenceType.id
         };
         const path = `Workers/${this.$params.id}/updateAbsence`;
-        this.$http.patch(path, params).then(
-            this.responseHandler(() => {
-                event.color = absenceType.rgb;
-                event.name = absenceType.name;
-                event.code = absenceType.code;
-                this.refresh();
-            })
-        );
+        this.$http.patch(path, params).then(() => {
+            event.color = absenceType.rgb;
+            event.name = absenceType.name;
+            event.code = absenceType.code;
+
+            this.repaintCanceller(() =>
+                this.refresh().then(calendar.repaint())
+            );
+        });
     }
 
-    delete(day, event) {
+    delete(calendar, day, event) {
         const params = {absenceId: event.absenceId};
         const path = `Workers/${this.$params.id}/deleteAbsence`;
-        this.$http.delete(path, {params}).then(
-            this.responseHandler(() => {
-                delete this.events[day.getTime()];
-                this.refresh();
-            })
-        );
+        this.$http.delete(path, {params}).then(() => {
+            delete this.events[day.getTime()];
+
+            this.repaintCanceller(() =>
+                this.refresh().then(calendar.repaint())
+            );
+        });
     }
 
-    responseHandler(cb) {
-        if (this.repaintCanceller) {
-            clearTimeout(this.repaintCanceller);
-            this.repaintCanceller = null;
+    repaintCanceller(cb) {
+        if (this.canceller) {
+            clearTimeout(this.canceller);
+            this.canceller = null;
         }
 
-        this.repaintCanceller = setTimeout(
-            () => cb(), 650);
+        this.canceller = setTimeout(
+            () => cb(), 500);
     }
 
     refresh() {
@@ -188,7 +191,7 @@ class Controller extends Section {
             started: this.started,
             ended: this.ended
         };
-        this.$http.get(`WorkerCalendars/absences`, {params})
+        return this.$http.get(`WorkerCalendars/absences`, {params})
             .then(res => this.onData(res.data));
     }
 }
diff --git a/modules/worker/front/calendar/locale/es.yml b/modules/worker/front/calendar/locale/es.yml
index 82939ce91..85a2c5431 100644
--- a/modules/worker/front/calendar/locale/es.yml
+++ b/modules/worker/front/calendar/locale/es.yml
@@ -2,4 +2,5 @@ Calendar: Calendario
 Holidays: Vacaciones
 Used: Utilizados
 of: de
-days: días
\ No newline at end of file
+days: días
+Choose an absence type from the right menu: Elige un tipo de ausencia desde el menú de la derecha
\ No newline at end of file