@sumaris-net/ngx-components 1.21.0-beta12 → 1.21.0-beta15

package/bundles/sumaris-net.ngx-components.umd.js

@@ -24749,7 +24749,7 @@
     MenuComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-menu',
-                    template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" contentId=\"menu-content\">\n    <ion-header>\n\n      <ion-toolbar @fadeInAnimation *ngIf=\"isLogin; else notLogin\" class=\"ion-toolbar-top\">\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <button type=\"button\" mat-flat-button\n                      class=\"user-avatar\" [class.primary]=\"!accountAvatar\"\n                      [style.background-image]=\"'url('+(accountAvatar||'./assets/img/person.png')+')'\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\">\n              </button>\n            </ion-col>\n            <ion-col size=\"8\" class=\"user-logo\">\n              <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px;\"/>\n              <span *ngIf=\"!logo\" width=\"108px;\">{{appName}}</span>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n\n            <button mat-button type=\"button\"\n                    [routerLink]=\"['/account']\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"ion-color-primary\"\n                    (click)=\"close()\">\n              <ion-label color=\"primary\" class=\"ion-text-wrap ion-text-start\">\n                <h3 class=\"no-margin username\">\n                  <b>{{accountName}}</b>\n                </h3>\n                <h4>{{accountEmail}}</h4>\n              </ion-label>\n            </button>\n\n<!--            todo ajouter ici les 2 composants du module social -->\n\n          </ion-row>\n        </ion-grid>\n\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar class=\"ion-padding\" @fadeInAnimation\n                     style=\"height: unset; display: block; margin: auto; text-align: center;\">\n          <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"150px;\">\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n\n      <ion-list lines=\"none\">\n        <ion-menu-toggle auto-hide=\"false\"\n                         [class.flex-spacer]=\"item.cssClass == 'flex-spacer'\"\n                         *ngFor=\"let item of $items | async\">\n\n          <!-- link -->\n          <ion-item *ngIf=\"!loading && item.path\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    [routerLink]=\"item.path\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"selected\"\n                    [routerLinkActiveOptions]=\"{exact: (item.path === '/')}\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- action -->\n          <ion-item *ngIf=\"!loading && item.action\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    (click)=\"doAction(item.action, $event)\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- divider -->\n          <ion-item-divider @fadeInAnimation\n                            class=\"{{item.cssClass}} {{item.color}}\"\n                            *ngIf=\"!loading && !item.path && !item.action\">\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item-divider>\n\n        </ion-menu-toggle>\n      </ion-list>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xs hidden-sm\">\n      <ion-toolbar>\n\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"openAboutModal($event)\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"openAboutModal($event)\" color=\"medium\">\n          {{'MENU.FOOTER_VERSION_ABOUT'| translate: {version: appVersion} }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button mat-icon-button color=\"accent\" (click)=\"toggleSplitPaneShow($event)\"\n                  class=\"hidden-xs hidden-sm hidden-md\"\n                  [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') |translate\">\n            <mat-icon><span>{{splitPane.when ? '&#xab;' : '&#xbb;'}}</span></mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n\n  </ion-menu>\n\n  <ng-content></ng-content>\n\n</ion-split-pane>\n",
+                    template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" contentId=\"menu-content\">\n    <ion-header>\n\n      <ion-toolbar @fadeInAnimation *ngIf=\"isLogin; else notLogin\" class=\"ion-toolbar-top\">\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <button type=\"button\" mat-flat-button\n                      class=\"user-avatar\" [class.primary]=\"!accountAvatar\"\n                      [style.background-image]=\"'url('+(accountAvatar||'./assets/img/person.png')+')'\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\">\n              </button>\n            </ion-col>\n            <ion-col size=\"8\" class=\"user-logo\">\n              <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px;\"/>\n              <span *ngIf=\"!logo\" width=\"108px;\">{{appName}}</span>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n\n            <button mat-button type=\"button\"\n                    [routerLink]=\"['/account']\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"ion-color-primary\"\n                    (click)=\"close()\">\n              <ion-label color=\"primary\" class=\"ion-text-wrap ion-text-start\">\n                <h3 class=\"no-margin username\">\n                  <b>{{accountName}}</b>\n                </h3>\n                <h4>{{accountEmail}}</h4>\n              </ion-label>\n            </button>\n\n<!--            todo ajouter ici les 2 composants du module social ??? -->\n\n          </ion-row>\n        </ion-grid>\n\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar class=\"ion-padding\" @fadeInAnimation\n                     style=\"height: unset; display: block; margin: auto; text-align: center;\">\n          <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"150px;\">\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n\n      <ion-list lines=\"none\">\n        <ion-menu-toggle auto-hide=\"false\"\n                         [class.flex-spacer]=\"item.cssClass == 'flex-spacer'\"\n                         *ngFor=\"let item of $items | async\">\n\n          <!-- link -->\n          <ion-item *ngIf=\"!loading && item.path\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    [routerLink]=\"item.path\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"selected\"\n                    [routerLinkActiveOptions]=\"{exact: (item.path === '/')}\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- action -->\n          <ion-item *ngIf=\"!loading && item.action\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    (click)=\"doAction(item.action, $event)\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- divider -->\n          <ion-item-divider @fadeInAnimation\n                            class=\"{{item.cssClass}} {{item.color}}\"\n                            *ngIf=\"!loading && !item.path && !item.action\">\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item-divider>\n\n        </ion-menu-toggle>\n      </ion-list>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xs hidden-sm\">\n      <ion-toolbar>\n\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"openAboutModal($event)\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"openAboutModal($event)\" color=\"medium\">\n          {{'MENU.FOOTER_VERSION_ABOUT'| translate: {version: appVersion} }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button mat-icon-button color=\"accent\" (click)=\"toggleSplitPaneShow($event)\"\n                  class=\"hidden-xs hidden-sm hidden-md\"\n                  [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') |translate\">\n            <mat-icon><span>{{splitPane.when ? '&#xab;' : '&#xbb;'}}</span></mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n\n  </ion-menu>\n\n  <ng-content></ng-content>\n\n</ion-split-pane>\n",
                     animations: [fadeInAnimation],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: ["ion-menu{--ion-item-background:transparent;--ion-item-divider-background:transparent;--ion-item-icon-color:var(--ion-color-primary-tint);--ion-item-text-color:var(--ion-color-primary-tint);--ion-item-background-selected:var(--ion-color-secondary100);--ion-item-text-color-selected:var(--ion-color-primary);--ion-item-icon-color-selected:var(--ion-color-primary);--ion-item-text-color-disable:var(--ion-color-medium);--ion-item-icon-color-disable:var(--ion-color-medium)}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header .user-avatar{background-size:cover;background-repeat:no-repeat;background-position:50%;background-color:var(--ion-color-secondary);border:1px solid var(--ion-color-primary);overflow:hidden!important;font-size:var(--avatar-size,60px)!important;line-height:var(--avatar-size,60px);height:var(--avatar-size,60px)!important;width:var(--avatar-size,60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size,60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;text-align:start!important;width:100%}ion-menu .scroll-content{margin-top:79px!important}ion-menu .has-user-header .scroll-content{margin-top:188px!important}ion-menu ion-content.has-profile-header{--offset-top:188px}ion-menu ion-content.no-profile-header{--offset-top:79px}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color:var(--ion-color-primary-tint);--ion-item-text-color:var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color:var(--ion-color-secondary-tint);--ion-item-text-color:var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color:var(--ion-color-tertiary-tint);--ion-item-text-color:var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color:var(--ion-color-danger-tint);--ion-item-text-color:var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color:var(--ion-color-medium-shade);--ion-item-text-color:var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color:var(--ion-color-dark-tint);--ion-item-text-color:var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item ion-icon,ion-menu ion-content ion-list ion-item mat-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-label,ion-menu ion-content ion-list ion-item ion-text{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover:var(--ion-item-background-selected)!important}ion-menu ion-content ion-list ion-item.selected ion-icon,ion-menu ion-content ion-list ion-item.selected mat-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-label,ion-menu ion-content ion-list ion-item.selected ion-text{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover:var(--ion-item-background-selected)!important;--ion-item-icon-color-selected:var(--ion-item-icon-color)!important;--ion-item-text-color-selected:var(--ion-item-text-color)!important}ion-menu ion-footer{display:block!important}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width:40px}@media screen and (max-width:767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width:768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size,80px)!important;line-height:var(--avatar-size,80px);height:var(--avatar-size,80px)!important;width:var(--avatar-size,80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size,80px)}}"]
@@ -30188,22 +30188,6 @@
             _this._logPrefix = '[user-event-service] ';
             // For DEV only
             _this._debug = !(environment === null || environment === void 0 ? void 0 : environment.production);
-            // listen login/logout
-            _this._subscriptions.add(accountService.onLogin.subscribe(function () { return __awaiter(_this, void 0, void 0, function () {
-                var count;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0: return [4 /*yield*/, this.count(undefined)];
-                        case 1:
-                            count = _b.sent();
-                            if (count && this._debug) {
-                                console.debug(this._logPrefix + "Received " + count + " unread notifications");
-                            }
-                            this._count$.next(count);
-                            return [2 /*return*/];
-                    }
-                });
-            }); }));
             return _this;
         }
         Object.defineProperty(AbstractUserEventService.prototype, "userEventCount", {
@@ -30257,11 +30241,13 @@
                     console.debug("" + _this._logPrefix + data.length + " user events loaded in " + (Date.now() - now) + "ms");
                     now = null;
                 }
-                var unreadCount = _this.unreadEvents(data);
-                _this._count$.next(unreadCount);
+                // const unreadCount = this.unreadEvents(data);
+                // this._count$.next(unreadCount);
+                // Must re-order because of listenChanges result will add new event at the end
+                data = EntityUtils.sort(data, page.sortBy, page.sortDirection);
                 return {
                     data: data,
-                    total: toNumber(res === null || res === void 0 ? void 0 : res.total, unreadCount)
+                    total: toNumber(res === null || res === void 0 ? void 0 : res.total, data.length)
                 };
             }));
         };
@@ -30280,7 +30266,7 @@
         AbstractUserEventService.prototype.count = function (filter, options) {
             var _a;
             return __awaiter(this, void 0, void 0, function () {
-                var res;
+                var res, total;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
@@ -30303,11 +30289,42 @@
                                 })];
                         case 1:
                             res = _b.sent();
-                            return [2 /*return*/, res.total];
+                            total = res.total;
+                            // update count
+                            this._count$.next(total);
+                            return [2 /*return*/, total];
                     }
                 });
             });
         };
+        AbstractUserEventService.prototype.listenCountChanges = function (filter, options) {
+            var _this = this;
+            if (!this.subscriptions.listenCountChanges) {
+                console.warn(this._logPrefix + "Subscription query 'listenCountChanges' not provided, skip.");
+                return rxjs.of();
+            }
+            if (!filter)
+                filter = this.defaultFilter();
+            filter = this.asFilter(filter);
+            if (this._debug)
+                console.debug(this._logPrefix + "[WS] Listening count changes for user events with filter:", filter);
+            return this.graphql.subscribe({
+                query: this.subscriptions.listenCountChanges,
+                fetchPolicy: options === null || options === void 0 ? void 0 : options.fetchPolicy,
+                variables: { filter: filter.asPodObject(), interval: toNumber(options === null || options === void 0 ? void 0 : options.interval, 10) },
+                error: {
+                    code: SocialErrorCodes.SUBSCRIBE_USER_EVENTS_ERROR,
+                    message: 'SOCIAL.ERROR.SUBSCRIBE_USER_EVENTS_ERROR'
+                }
+            }).pipe(operators.map(function (_b) {
+                var total = _b.total;
+                if (total && _this._debug)
+                    console.debug(_this._logPrefix + "Received new user events count:", total);
+                // update count
+                _this._count$.next(total);
+                return total;
+            }));
+        };
         AbstractUserEventService.prototype.listenChanges = function (filter, options) {
             var _this = this;
             var _a;
@@ -30340,7 +30357,7 @@
                     data: updatedData
                 });
                 // update count
-                _this._count$.next(_this.unreadEvents(updatedData));
+                // this._count$.next(this.unreadEvents(updatedData));
                 return updatedData;
             }));
         };
@@ -30930,10 +30947,34 @@
     };
 
     var UserEventNotificationList = /** @class */ (function () {
-        function UserEventNotificationList(popoverController) {
+        function UserEventNotificationList(cd, popoverController, userEventService) {
+            this.cd = cd;
             this.popoverController = popoverController;
+            this.userEventService = userEventService;
+            this.debug = false;
+            this.userEvents = new rxjs.BehaviorSubject(undefined);
+            this.subscriptions = new rxjs.Subscription();
         }
         UserEventNotificationList.prototype.ngOnInit = function () {
+            var _this = this;
+            // Watch all user events
+            this.subscriptions.add(this.userEventService
+                .watchAll(0, 10, 'creationDate', "desc", undefined)
+                .subscribe(function (result) {
+                if (_this.debug)
+                    console.debug("[user-event-notification-list] receiving " + result.total + " user events", result.data);
+                _this.userEvents.next(result.data);
+                _this.markForCheck();
+            }));
+            // Listen changes
+            this.subscriptions.add(this.userEventService.listenChanges(undefined)
+                .subscribe(function (data) {
+                if (_this.debug)
+                    console.debug("[user-event-notification-list] receiving " + data.length + " new user events", data);
+            }));
+        };
+        UserEventNotificationList.prototype.ngOnDestroy = function () {
+            this.subscriptions.unsubscribe();
         };
         UserEventNotificationList.prototype.read = function ($event, userEvent) {
             var _a;
@@ -30949,21 +30990,27 @@
         UserEventNotificationList.prototype.dismiss = function () {
             this.popoverController.dismiss();
         };
+        UserEventNotificationList.prototype.markForCheck = function () {
+            this.cd.markForCheck();
+        };
         return UserEventNotificationList;
     }());
     UserEventNotificationList.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-user-event-notification-list',
                     template: "\n<ion-list class=\"ion-list-popover\">\n\n  <ion-row class=\"ion-list-header column\">\n    <ion-col>\n      <ion-label>{{titleI18n | translate}}</ion-label>\n    </ion-col>\n  </ion-row>\n\n  <ion-item *ngIf=\"!(userEvents | async)?.length\">\n    {{'SOCIAL.USER_EVENT.NOTIFICATION.EMPTY' | translate}}\n  </ion-item>\n  <ion-item\n    *ngFor=\"let userEvent of userEvents | async\"\n    (click)=\"read($event, userEvent)\"\n  >\n\n    <ion-avatar slot=\"start\">\n\n      <img *ngIf=\"userEvent.avatar; else avatarIcon\" src=\"{{ userEvent.avatar }}\">\n\n      <ng-template #avatarIcon>\n        <app-icon\n          *ngIf=\"userEvent.avatarIcon\"\n          [ref]=\"userEvent.avatarIcon\"\n          height=\"40\"\n          width=\"40\"\n        ></app-icon>\n      </ng-template>\n\n    </ion-avatar>\n\n    <ion-grid class=\"ion-no-margin ion-no-padding\">\n      <ion-row>\n        <ion-col>\n          <p [class.unread]=\"!userEvent.readDate\">\n            {{userEvent.message}}\n          </p>\n        </ion-col>\n      </ion-row>\n      <ion-row *ngIf=\"userEvent.actions?.length\">\n        <ion-col>\n          <p>\n            <span *ngFor=\"let action of userEvent.actions\">\n              <a\n                [style.margin-right.px]=\"8\"\n                [style.cursor]=\"'pointer'\"\n                (click)=\"executeAction(action, userEvent)\"\n              >\n                {{ '&#10142;&nbsp;' + action.name}}\n              </a>\n            </span>\n          </p>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <app-icon\n            *ngIf=\"userEvent.icon\"\n            [ref]=\"userEvent.icon\"\n            height=\"16\"\n            width=\"16\"\n            [style.vertical-align]=\"'sub'\"\n          ></app-icon>\n          <small>\n            <span>{{userEvent.creationDate|dateFromNow}}</span>\n            <span [style.color]=\"'gray'\">{{ ' | ' + (userEvent.creationDate|dateFormat:{time:true}) }}</span>\n          </small>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </ion-item>\n\n</ion-list>\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [":host(.popover-viewport){overflow-y:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none}.unread{font-weight:700}"]
                 },] }
     ];
     UserEventNotificationList.ctorParameters = function () { return [
-        { type: i1$5.PopoverController }
+        { type: i0.ChangeDetectorRef },
+        { type: i1$5.PopoverController },
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [UserEventServiceToken,] }] }
     ]; };
     UserEventNotificationList.propDecorators = {
+        debug: [{ type: i0.Input }],
         titleI18n: [{ type: i0.Input }],
-        userEvents: [{ type: i0.Input }],
         readEvent: [{ type: i0.Output }]
     };
 
@@ -30976,7 +31023,6 @@
             this.debug = false;
             this.titleI18n = 'SOCIAL.USER_EVENT.NOTIFICATION.TITLE';
             this.disabled = false;
-            this.userEventsSubject = new rxjs.BehaviorSubject(undefined);
             this._subscriptions = new rxjs.Subscription();
             this._logPrefix = '[user-event-notification] ';
             this._readEvent = new i0.EventEmitter();
@@ -30990,28 +31036,53 @@
             configurable: true
         });
         UserEventNotificationComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            if (isNil(this.userEventService)) {
-                console.warn(this._logPrefix + "No service injected");
-                this.disabled = true;
-                return;
-            }
-            // Watch first
-            this._subscriptions.add(this.userEventService.watchAll(0, 10, 'creationDate', 'desc').subscribe(function (value) {
-                var data = value.data;
-                if (_this.debug) {
-                    console.debug(_this._logPrefix + "Receiving user events", data);
-                }
-                _this.userEventsSubject.next(data);
-            }));
-            // Then listen changes
-            this._subscriptions.add(this.userEventService.listenChanges(undefined).subscribe(function (data) {
-                if (_this.debug) {
-                    console.debug(_this._logPrefix + "Receiving new user events", data);
-                }
-            }));
-            this._readEvent.subscribe(function (value) {
-                _this.userEventService.markAsRead(value);
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (isNil(this.userEventService)) {
+                                console.warn(this._logPrefix + "No service injected");
+                                this.disabled = true;
+                                return [2 /*return*/];
+                            }
+                            return [4 /*yield*/, this.accountService.ready()];
+                        case 1:
+                            _b.sent();
+                            // listen login/logout
+                            this._loginSubscription = this.accountService.onLogin.subscribe(function () { return __awaiter(_this, void 0, void 0, function () {
+                                var count;
+                                var _this = this;
+                                return __generator(this, function (_b) {
+                                    switch (_b.label) {
+                                        case 0: return [4 /*yield*/, this.userEventService.count(undefined)];
+                                        case 1:
+                                            count = _b.sent();
+                                            if (this.debug)
+                                                console.debug(this._logPrefix + "Receiving user events count", count);
+                                            this.markForCheck();
+                                            // Then listen changes
+                                            return [2 /*return*/, this.userEventService.listenCountChanges(undefined).subscribe(function (count) {
+                                                    if (_this.debug)
+                                                        console.debug(_this._logPrefix + "Receiving new user events count", count);
+                                                    _this.markForCheck();
+                                                })];
+                                    }
+                                });
+                            }); });
+                            this._subscriptions.add(this._loginSubscription);
+                            this._subscriptions.add(this.accountService.onLogout.subscribe(function () {
+                                if (_this._loginSubscription)
+                                    _this._subscriptions.remove(_this._loginSubscription);
+                            }));
+                            // Subscribe to read event
+                            this._readEvent.subscribe(function (value) {
+                                // default: mark event as read
+                                _this.userEventService.markAsRead(value);
+                            });
+                            return [2 /*return*/];
+                    }
+                });
             });
         };
         UserEventNotificationComponent.prototype.showList = function (event) {
@@ -31022,8 +31093,8 @@
                         case 0: return [4 /*yield*/, this.popoverController.create({
                                 component: UserEventNotificationList,
                                 componentProps: {
+                                    debug: this.debug,
                                     titleI18n: this.titleI18n,
-                                    userEvents: this.userEventsSubject,
                                     readEvent: this._readEvent
                                 },
                                 backdropDismiss: true,
@@ -31073,6 +31144,75 @@
         disabled: [{ type: i0.Input }]
     };
 
+    var UserEventTestService = /** @class */ (function (_super) {
+        __extends(UserEventTestService, _super);
+        function UserEventTestService(graphql, accountService, network, translate, environment) {
+            var _this = _super.call(this, graphql, accountService, network, translate, undefined, undefined, undefined, environment) || this;
+            _this.graphql = graphql;
+            _this.accountService = accountService;
+            _this.network = network;
+            _this.translate = translate;
+            _this.environment = environment;
+            _this.userEvents = [];
+            _this.count$ = new rxjs.BehaviorSubject(0);
+            return _this;
+        }
+        UserEventTestService.prototype.fromObject = function (source) {
+            return exports.UserEvent.fromObject(source);
+        };
+        UserEventTestService.prototype.add = function (entity) {
+            entity = this.processUserEvent(entity);
+            entity.id = this.userEvents.length + 1;
+            this.userEvents.push(entity);
+            this.count$.next(this.userEvents.length);
+        };
+        Object.defineProperty(UserEventTestService.prototype, "userEventCount", {
+            get: function () {
+                return this.count$.asObservable();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        UserEventTestService.prototype.asFilter = function (filter) {
+            return filter;
+        };
+        UserEventTestService.prototype.count = function (filter, options) {
+            return Promise.resolve(this.userEvents.length);
+        };
+        UserEventTestService.prototype.delete = function (entity) {
+            return Promise.resolve(undefined);
+        };
+        UserEventTestService.prototype.deleteAll = function (data, opts) {
+            return Promise.resolve(undefined);
+        };
+        UserEventTestService.prototype.listenChanges = function (filter, options) {
+            return rxjs.of();
+        };
+        UserEventTestService.prototype.save = function (entity, options) {
+            var _a;
+            var toSave = (_a = this.userEvents) === null || _a === void 0 ? void 0 : _a.find(function (value) { return value.id == (entity === null || entity === void 0 ? void 0 : entity.id); });
+            Object.assign(toSave, entity);
+            return entity;
+        };
+        UserEventTestService.prototype.saveAll = function (data, opts) {
+            return Promise.resolve([]);
+        };
+        UserEventTestService.prototype.watchAll = function (offset, size, sortBy, sortDirection, filter, options) {
+            return rxjs.of({ data: this.userEvents });
+        };
+        return UserEventTestService;
+    }(AbstractUserEventService));
+    UserEventTestService.decorators = [
+        { type: i0.Injectable }
+    ];
+    UserEventTestService.ctorParameters = function () { return [
+        { type: GraphqlService },
+        { type: AccountService },
+        { type: NetworkService },
+        { type: i1$2.TranslateService },
+        { type: Environment, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [ENVIRONMENT,] }] }
+    ]; };
+
     var UserEventModule = /** @class */ (function () {
         function UserEventModule() {
         }
@@ -31093,6 +31233,9 @@
                     exports: [
                         UserEventsTable,
                         UserEventNotificationComponent
+                    ],
+                    providers: [
+                        { provide: UserEventServiceToken, useClass: UserEventTestService }
                     ]
                 },] }
     ];
@@ -34255,12 +34398,13 @@
     exports.ɵi = AppUpdateOfflineModeCard;
     exports.ɵj = AppIconComponent;
     exports.ɵk = UserEventNotificationList;
-    exports.ɵl = JobProgressionList;
-    exports.ɵm = DateTestPage;
-    exports.ɵn = NumpadTestPage;
-    exports.ɵo = MatBadgeIconTestPage;
-    exports.ɵp = ToastTestingModule;
-    exports.ɵq = ToastTestingPage;
+    exports.ɵl = UserEventTestService;
+    exports.ɵm = JobProgressionList;
+    exports.ɵn = DateTestPage;
+    exports.ɵo = NumpadTestPage;
+    exports.ɵp = MatBadgeIconTestPage;
+    exports.ɵq = ToastTestingModule;
+    exports.ɵr = ToastTestingPage;
 
     Object.defineProperty(exports, '__esModule', { value: true });