Changes

modules/worker/front/calendar/index.html

@@ -4,7 +4,10 @@
     auto-load="true">
 </vn-crud-model>
 <div class="vn-w-lg">
-    <vn-card class="vn-pa-sm calendars">
+    <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"
@@ -13,7 +16,7 @@
             display-controls="false"
             hide-contiguous="true"
             hide-year="true"
-        on-selection="$ctrl.onSelection($days)">
+            on-selection="$ctrl.onSelection($event, $days)">
         </vn-calendar>
     </vn-card>
 </div>

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,7 +131,6 @@ 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,
@@ -139,47 +138,51 @@ class Controller extends Section {
                 type: absenceType.code,
                 absenceId: newEvent.id
             };
-                this.refresh();
-            });
+
+            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(() => {
+        this.$http.patch(path, params).then(() => {
             event.color = absenceType.rgb;
             event.name = absenceType.name;
             event.code = absenceType.code;
-                this.refresh();
-            })
+
+            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(() => {
+        this.$http.delete(path, {params}).then(() => {
             delete this.events[day.getTime()];
-                this.refresh();
-            })
+
+            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));
     }
 }

modules/worker/front/calendar/locale/es.yml

@@ -3,3 +3,4 @@ Holidays: Vacaciones
 Used: Utilizados
 of: de
 days: días
+Choose an absence type from the right menu: Elige un tipo de ausencia desde el menú de la derecha