#625 add show and hide radio button to calendars list

src/esn.calendar.libs/app/app.constants.js

@@ -157,6 +157,7 @@
     .constant('CAL_ATTENDEE_LIST_LIMIT', 5)
 
     .constant('CAL_AVAILABLE_VIEWS', ['agendaWeek', 'agendaDay', 'month', 'agendaThreeDays', 'basicDay'])
+    .constant('TOGGLE_TRANSITION', 200)
 
     .constant('CAL_CALENDAR_SHARED_RIGHT', {
       NONE: '0',

src/esn.calendar.libs/app/services/calendar-visibility-service.js

@@ -1,3 +1,4 @@
+/* eslint-disable space-before-blocks */
 require('../app.constants.js');
 
 (function(angular) {
@@ -11,8 +12,10 @@ require('../app.constants.js');
 
     return {
       getHiddenCalendars: getHiddenCalendars,
-      isHidden: isHidden,
-      toggle: toggle
+      isHidden,
+      toggle,
+      showAndHideCalendars,
+      getHiddenCalendarsByType
     };
 
     ////////////
@@ -23,18 +26,62 @@ require('../app.constants.js');
       });
     }
 
-    function toggle(calendar) {
+    function showAndHideCalendars(calendar, status, calendarType) {
       var calId = calendar.getUniqueId();
 
-      storage.getItem(calId).then(function(hiddenBefore) {
-        return storage.setItem(calId, !hiddenBefore);
+      storage.getItem(calendarType + calId).then(function(hiddenBefore) {
+        return storage.setItem(calendarType + calId, hiddenBefore);
       }).then(function(hidden) {
         $rootScope.$broadcast(CAL_EVENTS.CALENDARS.TOGGLE_VIEW, {
           calendarUniqueId: calId,
+          calendarType: calendarType,
+          hidden: status ? true : hidden
+        });
+      });
+    }
+
+    function toggle(calendar, calendarType, lengthCalendars) {
+
+      var calId = calendar.getUniqueId();
+
+      storage.getItem(calendarType + calId).then(function(hiddenBefore) {
+
+        return storage.setItem(calendarType + calId, !hiddenBefore);
+      }).then(function(hidden) {
+        $rootScope.$broadcast(CAL_EVENTS.CALENDARS.TOGGLE_VIEW, {
+          calendarUniqueId: calId,
+          calendarType: calendarType,
           hidden: hidden
         });
 
-        return hidden;
+      }).then(function(){
+        return getHiddenCalendarsByType(calendarType);
+      })
+        .then(function(hiddenCal) {
+          let hidden = false;
+
+          if (hiddenCal.length === lengthCalendars) {
+            hidden = true;
+          }
+
+          $rootScope.$broadcast('calendarsAreHidden', {
+            calendarType: calendarType,
+            hidden: hidden
+          });
+
+        });
+    }
+
+    function getHiddenCalendarsByType(calendarType) {
+      var result = [];
+
+      return storage.iterate(function(hidden, id) {
+
+        if (id.startsWith(calendarType) && hidden) {
+          result.push(id);
+        }
+      }).then(function() {
+        return result;
       });
     }
 

src/esn.calendar.libs/app/services/calendar-visibility.spec.js

@@ -116,6 +116,46 @@ describe('The calendarVisibilityService', function() {
     });
   });
 
+
+
+  describe('the showAndHideCalendars function', function() {
+    it('should broadcast the calendar and it new display status', function() {
+      var cal = this.getCalendar(42);
+
+      this.$rootScope.$broadcast = sinon.spy(this.$rootScope.$broadcast);
+
+      this.calendarVisibilityService.toggle(cal);
+      this.$rootScope.$digest();
+      expect(this.$rootScope.$broadcast).to.have.been.calledWith(
+        this.CAL_EVENTS.CALENDARS.TOGGLE_VIEW,
+        { calendarUniqueId: cal.uniqueId, hidden: true }
+      );
+
+      this.$rootScope.$broadcast.reset();
+
+      this.calendarVisibilityService.toggle(cal);
+      this.$rootScope.$digest();
+      expect(this.$rootScope.$broadcast).to.have.been.calledWith(
+        this.CAL_EVENTS.CALENDARS.TOGGLE_VIEW,
+        { calendarUniqueId: cal.uniqueId, hidden: false }
+      );
+    });
+
+    it('should correctly record hidden calendar in localforage', function() {
+      var id1 = '1';
+      var id2 = '2';
+      var hiddenCalendars = [this.getCalendar(id1), this.getCalendar(id2)];
+      var thenSpy = sinon.spy();
+
+      hiddenCalendars.map(this.calendarVisibilityService.toggle);
+      this.$rootScope.$digest();
+      this.calendarVisibilityService.getHiddenCalendars().then(thenSpy);
+      this.$rootScope.$digest();
+
+      expect(thenSpy).to.have.been.calledWith([id1, id2]);
+    });
+  });
+
   describe('The isHidden function', function() {
     it('should return true if and only if the calendar is hidden', function() {
       var cal = this.getCalendar(42);

src/linagora.esn.calendar/app/app.js

@@ -132,6 +132,7 @@ require('./components/calendar-today-button/calendar-today-button.controller.js'
 require('./components/calendar/calendar.component.js');
 require('./components/calendar/calendar.controller.js');
 require('./components/calendars-list/calendars-list.component.js');
+require('./components/calendars-list/calendar-list-toggle.directive.js');
 require('./components/calendars-list/calendars-list.controller.js');
 require('./components/calendars-list/external/external-calendars-list.component.js');
 require('./components/calendars-list/items/calendars-list-items.component.js');
@@ -141,6 +142,8 @@ require('./components/calendars-list/items/item/calendars-list-item.controller.j
 require('./components/calendars-list/items/item/configuration/calendars-list-item-configuration.component.js');
 require('./components/calendars-list/items/item/configuration/calendars-list-item-configuration.controller.js');
 require('./components/calendars-list/user/user-calendars-list.component.js');
+require('./components/calendars-list/user/user-calendars-list.controller.js');
+
 require('./components/event-alarm-consultation/event-alarm-consultation.component.js');
 require('./components/event-alarm-consultation/event-alarm-consultation.controller.js');
 require('./components/event-create-button/event-create-button.component.js');

src/linagora.esn.calendar/app/components/calendars-list/calendar-list-toggle.directive.js

@@ -0,0 +1,25 @@
+
+'use strict';
+
+angular.module('esn.calendar')
+
+  .directive('calendarListToggle', function(TOGGLE_TRANSITION) {
+
+    return {
+      restrict: 'A',
+      link: function(scope, element, attrs) {
+        if (attrs.toggled === 'true') {
+          _toggle(0);
+        }
+
+        element.click(function() {
+          _toggle(TOGGLE_TRANSITION);
+        });
+
+        function _toggle(toggleTransistion) {
+          element.parent().parent().parent().toggleClass('toggled');
+          element.parent().parent().parent().find('ul:not(".not-toggled")').stop(true, false).slideToggle(toggleTransistion);
+        }
+      }
+    };
+  });

src/linagora.esn.calendar/app/components/calendars-list/calendars-list.controller.js

@@ -1,3 +1,4 @@
+/* eslint-disable space-before-blocks */
 const _ = require('lodash');
 
 (function(angular) {
@@ -6,7 +7,7 @@ const _ = require('lodash');
   angular.module('esn.calendar')
     .controller('CalendarsListController', CalendarsListController);
 
-  function CalendarsListController(
+  function CalendarsListController (
     $rootScope,
     $scope,
     $q,
@@ -15,6 +16,7 @@ const _ = require('lodash');
     session,
     userAndExternalCalendars,
     CAL_EVENTS
+
   ) {
     var self = this;
 
@@ -30,6 +32,10 @@ const _ = require('lodash');
       self.sharedCalendars = [];
       self.hiddenCalendars = {};
       self.toggleCalendar = calendarVisibilityService.toggle;
+      self.selectAllCalendars = selectAllCalendars;
+      self.calendarsToggled = false;
+      self.sharedCalendarsLength = 0;
+      self.userCalendarsLength = 0;
 
       self.activate();
     }
@@ -42,16 +48,25 @@ const _ = require('lodash');
           var destroyCalRemoveEvent = $rootScope.$on(CAL_EVENTS.CALENDARS.REMOVE, onCalendarRemoved);
           var destroyCalUpdateEvent = $rootScope.$on(CAL_EVENTS.CALENDARS.UPDATE, onCalendarUpdated);
           var deregister = $rootScope.$on(CAL_EVENTS.CALENDARS.TOGGLE_VIEW, function(event, data) {
-            self.hiddenCalendars[data.calendarUniqueId] = data.hidden;
+            self.hiddenCalendars[data.calendarType + data.calendarUniqueId] = data.hidden;
           });
 
           $scope.$on('$destroy', destroyCalAddEvent);
           $scope.$on('$destroy', destroyCalRemoveEvent);
           $scope.$on('$destroy', destroyCalUpdateEvent);
           $scope.$on('$destroy', deregister);
+
         });
     }
 
+    function selectAllCalendars(calendarType, status) {
+      const calendars = userAndExternalCalendars(self.calendars);
+
+      calendars[calendarType].forEach(function (calendar) {
+        calendarVisibilityService.showAndHideCalendars(calendar, status, calendarType);
+      });
+    }
+
     function listCalendars() {
       return calendarService.listPersonalAndAcceptedDelegationCalendars(session.user._id).then(function(calendars) {
         self.calendars = _.clone(calendars);
@@ -100,6 +115,8 @@ const _ = require('lodash');
       self.userCalendars = calendars.userCalendars;
       self.sharedCalendars = calendars.sharedCalendars;
       self.publicCalendars = calendars.publicCalendars;
+      self.sharedCalendarsLength = self.sharedCalendars.length;
+      self.userCalendarsLength = self.userCalendars.length;
     }
   }
 })(angular);

src/linagora.esn.calendar/app/components/calendars-list/calendars-list.less

@@ -79,7 +79,7 @@
 
           .mdi {
             font-size: 24px;
-            color: @primaryColor;
+            color: grey;
           }
         }
 

src/linagora.esn.calendar/app/components/calendars-list/calendars-list.pug

@@ -2,13 +2,18 @@
   cal-user-calendars-list(
     user-calendars="$ctrl.userCalendars",
     toggle-calendar="$ctrl.toggleCalendar",
-    hidden-calendars="$ctrl.hiddenCalendars"
+    hidden-calendars="$ctrl.hiddenCalendars",
+    select-all-calendars="$ctrl.selectAllCalendars",
+    length-user-calendars="$ctrl.userCalendarsLength"
+
   )
 
   cal-external-calendars-list(
     feature-flag="linagora.esn.calendar.features.isSharingCalendarEnabled",
     shared-calendars="$ctrl.sharedCalendars",
     public-calendars="$ctrl.publicCalendars",
     toggle-calendar="$ctrl.toggleCalendar",
-    hidden-calendars="$ctrl.hiddenCalendars"
+    hidden-calendars="$ctrl.hiddenCalendars",
+    select-all-calendars="$ctrl.selectAllCalendars",
+    length-user-calendars="$ctrl.sharedCalendarsLength"
   )

src/linagora.esn.calendar/app/components/calendars-list/external/external-calendars-list.component.js

@@ -8,7 +8,10 @@
         sharedCalendars: '=',
         publicCalendars: '=',
         toggleCalendar: '=',
-        hiddenCalendars: '='
+        hiddenCalendars: '=',
+        selectAllCalendars: '=',
+        calendarType: '=',
+        lengthUserCalendars: '='
       }
     });
 })(angular);

src/linagora.esn.calendar/app/components/calendars-list/external/external-calendars-list.pug

@@ -2,16 +2,16 @@
   .lv-item.calendar-item.calendar-header-title.hidden-md
     .media
       .pull-left
-        i.mdi.mdi-calendar
+        i.mdi.mdi-checkbox-multiple-blank-circle.all-calendars-selected
       .media-body
         .lv-title {{ 'Shared calendars' | translate }}
-  .lv-item.calendar-item.calendar-header-title-desktop.visible-md.clickable.toggle-submenu.waves-classic(esn-toggle)
+  .lv-item.calendar-item.calendar-header-title-desktop.visible-md.clickable.toggle-submenu.waves-classic
     .media
-      .badge-container
+      .badge-container(calendar-list-toggle)
         .caret-submenu
           i.mdi.mdi-menu-down
       .calendar-item-left
-        i.mdi.mdi-calendar
+        i.mdi(ng-class="!$ctrl.calendarsToggled? 'mdi-checkbox-multiple-blank-circle' : 'mdi-checkbox-multiple-blank-circle-outline'",ng-click="$ctrl.selectAllCalendars('sharedCalendars',$ctrl.calendarsToggled=!$ctrl.calendarsToggled)")
       .media-body
         .lv-title {{ 'Shared calendars' | translate }}
 
@@ -21,13 +21,19 @@
       toggle-calendar="$ctrl.toggleCalendar",
       hidden-calendars="$ctrl.hiddenCalendars",
       state-to-go="'calendar.external.shared'",
-      show-details="true"
+      show-details="true",
+      calendar-type="'sharedCalendars'",
+      length-user-calendars="$ctrl.lengthUserCalendars"
+
     )
 
     calendars-list-items(
       calendars="$ctrl.publicCalendars",
       toggle-calendar="$ctrl.toggleCalendar",
       hidden-calendars="$ctrl.hiddenCalendars",
       state-to-go="'calendar.external.shared'",
-      show-details="true"
+      show-details="true",
+      calendar-type="'sharedCalendars'",
+      length-user-calendars="$ctrl.lengthUserCalendars"
+
     )

src/linagora.esn.calendar/app/components/calendars-list/items/calendars-list-items.component.js

@@ -6,10 +6,12 @@
       template: require('./calendars-list-items.pug'),
       controller: 'CalendarsListItemsController',
       bindings: {
-        calendars: '=?',
+        calendars: '=',
         toggleCalendar: '=?',
         hiddenCalendars: '=?',
-        showDetails: '=?'
+        showDetails: '=?',
+        calendarType: '=',
+        lengthUserCalendars: '='
       }
     });
 })(angular);

src/linagora.esn.calendar/app/components/calendars-list/items/calendars-list-items.pug

@@ -1,7 +1,10 @@
 .calendar-list-items(ng-repeat="calendar in $ctrl.calendars track by calendar.uniqueId")
   cal-calendars-list-item(
+    calendars="$ctrl.calendars"
     calendar="calendar",
-    on-show-hide-toggle="$ctrl.toggleCalendar(calendar)",
-    selected="!$ctrl.hiddenCalendars[calendar.getUniqueId()]",
+    on-show-hide-toggle="$ctrl.toggleCalendar(calendar , $ctrl.calendarType , $ctrl.lengthUserCalendars)",
+    selected="!$ctrl.hiddenCalendars[$ctrl.calendarType+calendar.getUniqueId()]",
     show-details="$ctrl.showDetails"
+    calendar-type="$ctrl.calendarType",
+
   )

src/linagora.esn.calendar/app/components/calendars-list/items/item/calendars-list-item.component.js

@@ -6,10 +6,12 @@
       template: require('./calendars-list-item.pug'),
       controller: 'CalendarsListItemController',
       bindings: {
+        calendars: '=',
         calendar: '<',
         onShowHideToggle: '&',
         selected: '<',
-        showDetails: '<'
+        showDetails: '<',
+        calendarType: '<'
       }
     });
 })(angular);

src/linagora.esn.calendar/app/components/calendars-list/items/item/calendars-list-item.pug

@@ -10,4 +10,4 @@
             .details(ng-if="$ctrl.details")
               span.ellipsis {{ ::$ctrl.details }}
       settings-overlay.settings(ng-click="$event.stopImmediatePropagation(); hideAside();", ui-sref-active-eq="selected")
-        cal-calendars-list-item-configuration(calendar-id="$ctrl.calendar.uniqueId")
+        cal-calendars-list-item-configuration(calendar-id="$ctrl.calendar.uniqueId",calendars="$ctrl.calendars")    

src/linagora.esn.calendar/app/components/calendars-list/items/item/configuration/calendars-list-item-configuration.component.js

@@ -6,7 +6,8 @@
       template: require('./configuration-list.pug'),
       controller: 'CalendarsListItemConfigurationController',
       bindings: {
-        calendarId: '='
+        calendarId: '=',
+        calendars: '='
       }
     });
 })(angular);