@sumaris-net/ngx-components 1.21.0-beta3 → 1.21.0-beta30

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

@@ -2328,17 +2328,21 @@
                 return '';
             var startDate = this.dateAdapter.parse(value.startValue, DATE_ISO_PATTERN);
             var endDate = this.dateAdapter.parse(value.endValue, DATE_ISO_PATTERN);
-            return this.format(startDate, endDate);
+            return this.format(startDate, endDate, args);
         };
-        DateDiffDurationPipe.prototype.format = function (startDate, endDate) {
+        DateDiffDurationPipe.prototype.format = function (startDate, endDate, args) {
             var duration = moment.duration(endDate.diff(startDate));
             if (duration.asMinutes() < 0)
                 return '';
+            var withSeconds = args === null || args === void 0 ? void 0 : args.seconds;
             var timeDuration = moment(0)
                 .hour(duration.hours())
                 .minute(duration.minutes());
+            if (withSeconds) {
+                timeDuration.second(duration.seconds());
+            }
             var days = Math.floor(duration.asDays());
-            return (days > 0 ? days.toString() + (this.dayUnit + ' ') : '') + timeDuration.format('HH:mm');
+            return (days > 0 ? days.toString() + (this.dayUnit + ' ') : '') + timeDuration.format(withSeconds ? 'HH:mm:ss' : 'HH:mm');
         };
         return DateDiffDurationPipe;
     }());
@@ -24749,7 +24753,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)}}"]
@@ -30172,48 +30176,63 @@
     var UserEventServiceToken = new i0.InjectionToken('UserEventService');
     var AbstractUserEventService = /** @class */ (function (_super) {
         __extends(AbstractUserEventService, _super);
-        function AbstractUserEventService(graphql, accountService, network, translate, toastController, queries, mutations, subscriptions, environment) {
+        function AbstractUserEventService(graphql, accountService, network, translate, queries, mutations, subscriptions, environment) {
             var _this = _super.call(this, graphql, environment) || this;
             _this.graphql = graphql;
             _this.accountService = accountService;
             _this.network = network;
             _this.translate = translate;
-            _this.toastController = toastController;
             _this.queries = queries;
             _this.mutations = mutations;
             _this.subscriptions = subscriptions;
             _this.environment = environment;
-            _this._count$ = new rxjs.BehaviorSubject(0);
-            _this._subscriptions = new rxjs.Subscription();
+            _this.count$ = new rxjs.BehaviorSubject(0);
             _this.listeners = [];
+            _this._subscriptions = new rxjs.Subscription();
             _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(this.defaultFilter())];
-                        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", {
             get: function () {
-                return this._count$.asObservable();
+                return this.count$.asObservable();
             },
             enumerable: false,
             configurable: true
         });
+        AbstractUserEventService.prototype.ngOnStart = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            // Update component when refresh is need (=login events)
+                            this._subscriptions.add(rxjs.merge(this.accountService.onLogin, this.accountService.onLogout)
+                                .pipe(
+                            // Wait account service ready (can be restarted)
+                            operators.mergeMap(function () { return _this.accountService.ready(); }), operators.map(function () { return _this.accountService.isLogin(); }), operators.distinctUntilChanged())
+                                .subscribe(function (login) {
+                                if (login) {
+                                    _this.onLogin();
+                                }
+                                else {
+                                    _this.onLogout();
+                                }
+                            }));
+                            // First attempt if account is ready
+                            return [4 /*yield*/, this.accountService.ready()];
+                        case 1:
+                            // First attempt if account is ready
+                            _b.sent();
+                            if (this.accountService.isLogin()) {
+                                setTimeout(function () { return _this.onLogin(); });
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
         AbstractUserEventService.prototype.ngOnDestroy = function () {
             this._subscriptions.unsubscribe();
         };
@@ -30224,13 +30243,15 @@
             var _this = this;
             var _a;
             var now = this._debug && Date.now();
-            //if (this._debug)
+            if (!filter) {
+                filter = this.defaultFilter();
+            }
             console.debug(this._logPrefix + "Loading user events...", filter);
             filter = this.asFilter(filter);
             // Force recipient to current issuer, if not admin and not specified
-            if (isEmptyArray(filter.recipients) || !this.accountService.isAdmin()) {
+            if (isEmptyArray(filter === null || filter === void 0 ? void 0 : filter.recipients) || !this.accountService.isAdmin()) {
                 var recipient = this.defaultRecipient();
-                if (!((_a = filter.recipients) === null || _a === void 0 ? void 0 : _a.includes(recipient))) {
+                if (!((_a = filter === null || filter === void 0 ? void 0 : filter.recipients) === null || _a === void 0 ? void 0 : _a.includes(recipient))) {
                     console.warn('[user-events-service] Force user event filter.recipient=' + recipient);
                     filter.recipients = [recipient];
                 }
@@ -30240,23 +30261,27 @@
                 queryName: withContent ? 'LoadAllWithContent' : 'LoadAll',
                 query: withContent ? this.queries.loadAllWithContent : this.queries.loadAll,
                 variables: {
-                    page: Object.assign({ sortBy: 'updateDate', sortDirection: 'desc' }, page),
+                    page: Object.assign(Object.assign({ sortBy: 'creationDate' }, page), {
+                        // @ts-ignore
+                        sortDirection: (page.sortDirection || 'desc').toUpperCase()
+                    }),
                     filter: filter && filter.asPodObject()
                 },
                 arrayFieldName: 'data',
                 error: { code: SocialErrorCodes.LOAD_USER_EVENTS_ERROR, message: 'SOCIAL.ERROR.LOAD_USER_EVENTS_ERROR' },
-                fetchPolicy: (options === null || options === void 0 ? void 0 : options.fetchPolicy) || "cache-first"
+                fetchPolicy: (options === null || options === void 0 ? void 0 : options.fetchPolicy) || 'cache-first'
             })
                 .pipe(operators.map(function (res) {
-                var data = ((res === null || res === void 0 ? void 0 : res.data) || []).map(_this.processUserEvent);
+                var data = ((res === null || res === void 0 ? void 0 : res.data) || []).map(function (value) { return _this.processUserEvent(value, _this); });
                 if (now) {
                     console.debug("" + _this._logPrefix + data.length + " user events loaded in " + (Date.now() - now) + "ms");
                     now = null;
                 }
-                var unreadCount = _this.unreadEvents(data);
+                // 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)
                 };
             }));
         };
@@ -30270,7 +30295,7 @@
                 data: entity
             });
             // Update count
-            this._count$.next(this._count$.value + 1);
+            this.count$.next(this.count$.value + 1);
         };
         AbstractUserEventService.prototype.count = function (filter, options) {
             var _a;
@@ -30284,7 +30309,9 @@
                                 return [2 /*return*/, undefined];
                             }
                             if (!filter)
-                                throw new Error("Missing argument 'filter'");
+                                filter = this.defaultFilter();
+                            // Apply last reset date as start date
+                            filter.startDate = this.resetCountDate;
                             filter = this.asFilter(filter);
                             if (this._debug)
                                 console.debug(this._logPrefix + "Counting user events with filter:", filter);
@@ -30303,6 +30330,37 @@
                 });
             });
         };
+        AbstractUserEventService.prototype.listenCountChanges = function (filter, options) {
+            var _this = this;
+            var _a;
+            if (!((_a = this.subscriptions) === null || _a === void 0 ? void 0 : _a.listenCountChanges)) {
+                console.warn(this._logPrefix + "Subscription query 'listenCountChanges' not provided, skip.");
+                return rxjs.of();
+            }
+            if (!filter)
+                filter = this.defaultFilter();
+            // Apply last reset date as start date
+            filter.startDate = this.resetCountDate;
+            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;
@@ -30311,7 +30369,7 @@
                 return rxjs.of();
             }
             if (!filter)
-                throw new Error("Missing argument 'filter'");
+                filter = this.defaultFilter();
             filter = this.asFilter(filter);
             var withContent = (options === null || options === void 0 ? void 0 : options.withContent) === true;
             if (this._debug)
@@ -30328,14 +30386,12 @@
                 var data = _b.data;
                 if (data && _this._debug)
                     console.debug(_this._logPrefix + "Received new user events:", data);
-                var updatedData = data === null || data === void 0 ? void 0 : data.map(_this.processUserEvent);
+                var updatedData = data === null || data === void 0 ? void 0 : data.map(function (value) { return _this.processUserEvent(value, _this); });
                 // Update cache
                 _this.insertIntoMutableCachedQueries(_this.graphql.cache, {
                     query: withContent ? _this.queries.loadAllWithContent : _this.queries.loadAll,
                     data: updatedData
                 });
-                // update count
-                _this._count$.next(_this.unreadEvents(updatedData));
                 return updatedData;
             }));
         };
@@ -30396,13 +30452,13 @@
         };
         AbstractUserEventService.prototype.save = function (entity, options) {
             return __awaiter(this, void 0, void 0, function () {
-                var isNew, json, now;
+                var withContent, json, now;
                 var _this = this;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
                             this.fillDefaultProperties(entity);
-                            isNew = isNil(entity.id);
+                            withContent = !!entity.content;
                             json = entity.asObject();
                             now = Date.now();
                             if (this._debug)
@@ -30422,16 +30478,18 @@
                                                 console.debug(_this._logPrefix + "User event saved in " + (Date.now() - now) + "ms", entity);
                                             _this.copyIdAndUpdateDate(savedEntity, entity);
                                             // Add to cache
-                                            if (isNew) {
-                                                _this.insertIntoMutableCachedQueries(proxy, {
-                                                    query: _this.queries.loadAll,
-                                                    data: Object.assign(Object.assign({}, savedEntity), { content: null })
-                                                });
+                                            if (withContent) {
                                                 _this.insertIntoMutableCachedQueries(proxy, {
                                                     query: _this.queries.loadAllWithContent,
                                                     data: savedEntity
                                                 });
                                             }
+                                            else {
+                                                _this.insertIntoMutableCachedQueries(proxy, {
+                                                    query: _this.queries.loadAll,
+                                                    data: Object.assign(Object.assign({}, savedEntity), { content: null })
+                                                });
+                                            }
                                         }
                                     }
                                 })];
@@ -30442,55 +30500,100 @@
                 });
             });
         };
-        AbstractUserEventService.prototype.saveAll = function (data, opts) {
-            var _this = this;
-            return Promise.all(data
-                .map(function (entity) { return _this.save(entity, opts); }));
+        AbstractUserEventService.prototype.saveAll = function (entities, opts) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_b) {
+                    return [2 /*return*/, Promise.all(entities
+                            .map(function (entity) { return _this.save(entity, opts); }))];
+                });
+            });
         };
-        AbstractUserEventService.prototype.markAsRead = function (entity) {
+        AbstractUserEventService.prototype.markAsRead = function (entities) {
             return __awaiter(this, void 0, void 0, function () {
-                var onReadListeners, onReadListeners_1, onReadListeners_1_1, listener, e_1_1;
-                var e_1, _b;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                var userEventWithoutReadListeners, _loop_1, this_1, _b, _c, entity, e_1_1;
+                var e_1, _d;
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
                         case 0:
-                            onReadListeners = (this.listeners || []).filter(function (listener) { return !!listener.onRead; }).filter(function (listener) { return listener.accept(entity); });
-                            if (!onReadListeners.length) return [3 /*break*/, 9];
-                            _c.label = 1;
+                            userEventWithoutReadListeners = [];
+                            _loop_1 = function (entity) {
+                                var onReadListeners, onReadListeners_1, onReadListeners_1_1, listener, e_2_1;
+                                var e_2, _b;
+                                return __generator(this, function (_c) {
+                                    switch (_c.label) {
+                                        case 0:
+                                            onReadListeners = (this_1.listeners || []).filter(function (listener) { return !!listener.onRead; }).filter(function (listener) { return listener.accept(entity); });
+                                            if (!onReadListeners.length) return [3 /*break*/, 9];
+                                            _c.label = 1;
+                                        case 1:
+                                            _c.trys.push([1, 6, 7, 8]);
+                                            onReadListeners_1 = (e_2 = void 0, __values(onReadListeners)), onReadListeners_1_1 = onReadListeners_1.next();
+                                            _c.label = 2;
+                                        case 2:
+                                            if (!!onReadListeners_1_1.done) return [3 /*break*/, 5];
+                                            listener = onReadListeners_1_1.value;
+                                            return [4 /*yield*/, listener.onRead(entity)];
+                                        case 3:
+                                            _c.sent();
+                                            _c.label = 4;
+                                        case 4:
+                                            onReadListeners_1_1 = onReadListeners_1.next();
+                                            return [3 /*break*/, 2];
+                                        case 5: return [3 /*break*/, 8];
+                                        case 6:
+                                            e_2_1 = _c.sent();
+                                            e_2 = { error: e_2_1 };
+                                            return [3 /*break*/, 8];
+                                        case 7:
+                                            try {
+                                                if (onReadListeners_1_1 && !onReadListeners_1_1.done && (_b = onReadListeners_1.return)) _b.call(onReadListeners_1);
+                                            }
+                                            finally { if (e_2) throw e_2.error; }
+                                            return [7 /*endfinally*/];
+                                        case 8: return [3 /*break*/, 10];
+                                        case 9:
+                                            // Add to this list for default operation
+                                            userEventWithoutReadListeners.push(entity);
+                                            _c.label = 10;
+                                        case 10: return [2 /*return*/];
+                                    }
+                                });
+                            };
+                            this_1 = this;
+                            _e.label = 1;
                         case 1:
-                            _c.trys.push([1, 6, 7, 8]);
-                            onReadListeners_1 = __values(onReadListeners), onReadListeners_1_1 = onReadListeners_1.next();
-                            _c.label = 2;
+                            _e.trys.push([1, 6, 7, 8]);
+                            _b = __values((entities || [])), _c = _b.next();
+                            _e.label = 2;
                         case 2:
-                            if (!!onReadListeners_1_1.done) return [3 /*break*/, 5];
-                            listener = onReadListeners_1_1.value;
-                            return [4 /*yield*/, listener.onRead(entity)];
+                            if (!!_c.done) return [3 /*break*/, 5];
+                            entity = _c.value;
+                            return [5 /*yield**/, _loop_1(entity)];
                         case 3:
-                            _c.sent();
-                            _c.label = 4;
+                            _e.sent();
+                            _e.label = 4;
                         case 4:
-                            onReadListeners_1_1 = onReadListeners_1.next();
+                            _c = _b.next();
                             return [3 /*break*/, 2];
                         case 5: return [3 /*break*/, 8];
                         case 6:
-                            e_1_1 = _c.sent();
+                            e_1_1 = _e.sent();
                             e_1 = { error: e_1_1 };
                             return [3 /*break*/, 8];
                         case 7:
                             try {
-                                if (onReadListeners_1_1 && !onReadListeners_1_1.done && (_b = onReadListeners_1.return)) _b.call(onReadListeners_1);
+                                if (_c && !_c.done && (_d = _b.return)) _d.call(_b);
                             }
                             finally { if (e_1) throw e_1.error; }
                             return [7 /*endfinally*/];
-                        case 8: return [3 /*break*/, 11];
-                        case 9: 
+                        case 8: 
                         // Use default
-                        return [4 /*yield*/, this.defaultMarkAsRead(entity)];
-                        case 10:
+                        return [4 /*yield*/, this.defaultMarkAsRead(userEventWithoutReadListeners)];
+                        case 9:
                             // Use default
-                            _c.sent();
-                            _c.label = 11;
-                        case 11: return [2 /*return*/];
+                            _e.sent();
+                            return [2 /*return*/];
                     }
                 });
             });
@@ -30500,13 +30603,51 @@
                 this.listeners = [];
             this.listeners.push(listener);
         };
+        AbstractUserEventService.prototype.resetCount = function () {
+            this.count$.next(undefined);
+            this.resetCountDate = moment$6();
+            // restart listening count changes
+            this.startListenCountChanges();
+        };
         /* -- protected methods -- */
-        AbstractUserEventService.prototype.processUserEvent = function (source) {
-            var e_2, _b;
+        AbstractUserEventService.prototype.onLogin = 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 (this._debug)
+                                console.debug(this._logPrefix + "Receiving user events count", count);
+                            // Update count
+                            this.count$.next(count);
+                            // Then listen changes
+                            this.startListenCountChanges();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        AbstractUserEventService.prototype.onLogout = function () {
+            this.stopListenCountChanges();
+        };
+        AbstractUserEventService.prototype.startListenCountChanges = function () {
+            this.stopListenCountChanges();
+            this._listenSubscription = this.listenCountChanges(undefined).subscribe();
+        };
+        AbstractUserEventService.prototype.stopListenCountChanges = function () {
+            var _a;
+            (_a = this._listenSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+            this._listenSubscription = undefined;
+        };
+        AbstractUserEventService.prototype.processUserEvent = function (source, that) {
+            var e_3, _b;
+            that = that || this;
             // Convert json source to IUserEvent
-            var target = this.fromObject(source);
+            var target = that.fromObject(source);
             // Get listeners
-            var listeners = (this.listeners || []).filter(function (listener) { return listener.onReceived; }).filter(function (listener) { return listener.accept(target); });
+            var listeners = (that.listeners || []).filter(function (listener) { return listener.onReceived; }).filter(function (listener) { return listener.accept(target); });
             try {
                 for (var listeners_1 = __values(listeners), listeners_1_1 = listeners_1.next(); !listeners_1_1.done; listeners_1_1 = listeners_1.next()) {
                     var listener = listeners_1_1.value;
@@ -30514,39 +30655,64 @@
                         target = listener.onReceived(target);
                     }
                     else {
-                        if (this._debug)
-                            console.debug(this._logPrefix + "Event has been rejected by a listener", source);
+                        if (that._debug)
+                            console.debug(that._logPrefix + "Event has been rejected by a listener", source);
                         break;
                     }
                 }
             }
-            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
             finally {
                 try {
                     if (listeners_1_1 && !listeners_1_1.done && (_b = listeners_1.return)) _b.call(listeners_1);
                 }
-                finally { if (e_2) throw e_2.error; }
+                finally { if (e_3) throw e_3.error; }
             }
             return target;
         };
-        AbstractUserEventService.prototype.defaultMarkAsRead = function (userEvent) {
+        AbstractUserEventService.prototype.defaultMarkAsRead = function (userEvents) {
+            var _a;
             return __awaiter(this, void 0, void 0, function () {
+                var localEntities, remoteEntities, ids, now;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
-                            if (!userEvent)
+                            if (!userEvents)
                                 throw new Error(this._logPrefix + "Invalid event to save");
+                            if (!userEvents.length)
+                                return [2 /*return*/];
                             // set read date
-                            userEvent.readDate = moment$6();
-                            if (!(!userEvent.id || userEvent.id < 0)) return [3 /*break*/, 1];
+                            userEvents.forEach(function (userEvent) { return userEvent.readDate = moment$6(); });
+                            localEntities = userEvents.filter(function (userEvent) { return !userEvent.id || userEvent.id < 0; });
+                            remoteEntities = userEvents.filter(function (userEvent) { return userEvent.id > 0; });
+                            // save local entities
+                            if (localEntities.length) {
+                                if (this._debug)
+                                    console.debug(this._logPrefix + "Save local user event");
+                                // TODO !!!!!!!!!!!!!
+                            }
+                            if (!remoteEntities.length) return [3 /*break*/, 2];
+                            if (!((_a = this.mutations) === null || _a === void 0 ? void 0 : _a.markAsRead)) {
+                                console.warn(this._logPrefix + "Mutation query 'markAsRead' not provided, skip.");
+                                return [2 /*return*/];
+                            }
+                            ids = remoteEntities.map(function (value) { return value.id; });
+                            now = Date.now();
                             if (this._debug)
-                                console.debug(this._logPrefix + "Save local user event");
-                            return [3 /*break*/, 3];
-                        case 1: return [4 /*yield*/, this.save(userEvent)];
-                        case 2:
+                                console.debug(this._logPrefix + "Mark user events as read...", ids);
+                            return [4 /*yield*/, this.graphql.mutate({
+                                    mutation: this.mutations.markAsRead,
+                                    variables: {
+                                        ids: ids
+                                    },
+                                    error: { code: SocialErrorCodes.SAVE_USER_EVENT_ERROR, message: 'SOCIAL.ERROR.SAVE_USER_EVENT_ERROR' },
+                                })];
+                        case 1:
                             _b.sent();
-                            _b.label = 3;
-                        case 3: return [2 /*return*/];
+                            if (this._debug)
+                                console.debug(this._logPrefix + "User events marked as read in " + (Date.now() - now) + "ms", ids);
+                            _b.label = 2;
+                        case 2: return [2 /*return*/];
                     }
                 });
             });
@@ -30585,7 +30751,6 @@
         { type: AccountService },
         { type: NetworkService },
         { type: i1$2.TranslateService },
-        { type: i1$5.ToastController },
         { type: undefined },
         { type: undefined },
         { type: undefined },
@@ -30602,7 +30767,7 @@
     var UserEventService = /** @class */ (function (_super) {
         __extends(UserEventService, _super);
         function UserEventService(graphql, accountService, network, translate, toastController, environment) {
-            var _this = _super.call(this, graphql, accountService, network, translate, toastController, userEventQueries, userEventMutations, undefined, environment) || this;
+            var _this = _super.call(this, graphql, accountService, network, translate, userEventQueries, userEventMutations, undefined, environment) || this;
             _this.graphql = graphql;
             _this.accountService = accountService;
             _this.network = network;
@@ -30899,7 +31064,7 @@
     UserEventsTable.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-user-events-table',
-                    template: "\n<!-- Type = options menu -->\n<mat-menu #optionsMenu=\"matMenu\" xPosition=\"after\">\n\n  <!-- display columns -->\n  <button mat-menu-item\n          (click)=\"openSelectColumnsModal($event)\">\n    <mat-icon>view_column</mat-icon>\n    <ion-label translate>COMMON.DISPLAYED_COLUMNS_DOTS</ion-label>\n  </button>\n\n</mat-menu>\n\n<!-- top header -->\n<mat-toolbar>\n\n  <ng-container *ngIf=\"!selection.hasValue(); else hasSelection\">\n\n    <button mat-icon-button [title]=\"'COMMON.BTN_REFRESH'|translate\" (click)=\"onRefresh.emit()\">\n      <mat-icon>refresh</mat-icon>\n    </button>\n\n  </ng-container>\n\n  <!-- if row selection -->\n  <ng-template #hasSelection>\n\n    <!-- delete -->\n    <button mat-icon-button class=\"hidden-xs hidden-sm\" *ngIf=\"canDelete\"\n            [title]=\"'COMMON.BTN_DELETE'|translate\" (click)=\"deleteSelection($event)\">\n      <mat-icon>delete</mat-icon>\n    </button>\n  </ng-template>\n\n  <!-- error -->\n  <ion-item *ngIf=\"error\" hidden-xs hidden-sm hidden-mobile lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <div class=\"toolbar-spacer\"></div>\n\n  <button mat-icon-button\n          [title]=\"'COMMON.BTN_OPTIONS'|translate\"\n          [matMenuTriggerFor]=\"optionsMenu\">\n    <mat-icon>more_vert</mat-icon>\n  </button>\n</mat-toolbar>\n\n\n<mat-table [dataSource]=\"dataSource\" matSort\n           [matSortActive]=\"defaultSortBy\"\n           [matSortDirection]=\"defaultSortDirection\"\n           matSortDisableClear [trackBy]=\"trackByFn\">\n\n  <!-- select -->\n  <ng-container matColumnDef=\"select\">\n    <mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\">\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\n                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n      </mat-checkbox>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!canEdit\">\n      <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(row) : null\" [checked]=\"selection.isSelected(row)\">\n      </mat-checkbox>\n    </mat-cell>\n  </ng-container>\n\n  <!-- id -->\n  <ng-container matColumnDef=\"id\">\n    <mat-header-cell *matHeaderCellDef mat-sort-header [class.cdk-visually-hidden]=\"!isAdmin\">\n      <app-loading-spinner [loading]=\"loadingSubject|async\"><ion-label>#</ion-label></app-loading-spinner>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!isAdmin\">{{ row.currentData.id | mathAbs }}</mat-cell>\n  </ng-container>\n\n  <!-- creationDate -->\n  <ng-container matColumnDef=\"creationDate\">\n    <mat-header-cell *matHeaderCellDef mat-sort-header>\n      <ion-label translate>SOCIAL.USER_EVENT.CREATION_DATE</ion-label>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row\">\n      <ion-text>\n        {{row.currentData.creationDate | dateFromNow }}<br/>\n        <ion-text color=\"medium\"><small>{{row.currentData.creationDate | dateFormat: {time: true} }}</small></ion-text>\n      </ion-text>\n    </mat-cell>\n  </ng-container>\n\n  <!-- icon -->\n  <ng-container matColumnDef=\"icon\">\n    <mat-header-cell *matHeaderCellDef>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row;\">\n      <ng-container *ngIf=\"getIcon(row.currentData); let details\">\n        <ion-icon slot=\"start\" *ngIf=\"details.icon\" [name]=\"details.icon\"></ion-icon>\n        <mat-icon slot=\"start\" *ngIf=\"details.matIcon\">{{details.matIcon}}</mat-icon>\n      </ng-container>\n    </mat-cell>\n  </ng-container>\n\n  <!-- event type -->\n  <ng-container matColumnDef=\"eventType\">\n    <mat-header-cell *matHeaderCellDef mat-sort-header>\n      <ion-label translate>SOCIAL.USER_EVENT.EVENT_TYPE</ion-label>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row;\">\n      <span>{{'SOCIAL.USER_EVENT.TYPE_ENUM.' + row.currentData.eventType | translate}}</span>\n    </mat-cell>\n  </ng-container>\n\n  <!-- message -->\n  <ng-container matColumnDef=\"message\">\n    <mat-header-cell *matHeaderCellDef>\n      <ion-label translate>SOCIAL.USER_EVENT.MESSAGE</ion-label>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row;\">\n      <ng-container *ngIf=\"getDetail(row.currentData); let details\">\n        <ion-text [innerHTML]=\"details.title|translate\">\n        </ion-text>\n      </ng-container>\n    </mat-cell>\n  </ng-container>\n\n  <!-- Actions buttons column -->\n  <ng-container matColumnDef=\"actions\">\n    <mat-header-cell *matHeaderCellDef>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row\">\n      <ng-container *ngIf=\"getDetail(row.currentData); let details\">\n        <button mat-icon-button color=\"light\"\n                *ngFor=\"let action of details.actions\"\n                [title]=\"action.title |translate\"\n                [color]=\"action.color\"\n                (click)=\"doAction(action, row)\">\n          <ion-icon slot=\"start\" *ngIf=\"action.icon\" [name]=\"action.icon\"></ion-icon>\n          <mat-icon slot=\"start\" *ngIf=\"action.matIcon\">{{action.matIcon}}</mat-icon>\n        </button>\n      </ng-container>\n    </mat-cell>\n  </ng-container>\n\n  <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n  <mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n           class=\"mat-row-disabled\"\n           (click)=\"clickRow($event, row)\"></mat-row>\n\n</mat-table>\n\n<ion-row class=\"ion-no-padding\">\n  <ion-col></ion-col>\n  <ion-col class=\"ion-no-padding\" size=\"auto\">\n    <mat-paginator [length]=\"totalRowCount\" [pageSize]=\"defaultPageSize\" [pageSizeOptions]=\"defaultPageSizeOptions\" showFirstLastButtons>\n    </mat-paginator>\n  </ion-col>\n</ion-row>\n",
+                    template: "\n<!-- Type = options menu -->\n<mat-menu #optionsMenu=\"matMenu\" xPosition=\"after\">\n\n  <!-- display columns -->\n  <button mat-menu-item\n          (click)=\"openSelectColumnsModal($event)\">\n    <mat-icon>view_column</mat-icon>\n    <ion-label translate>COMMON.DISPLAYED_COLUMNS_DOTS</ion-label>\n  </button>\n\n</mat-menu>\n\n<!-- top header -->\n<mat-toolbar>\n\n  <ng-container *ngIf=\"!selection.hasValue(); else hasSelection\">\n\n    <button mat-icon-button [title]=\"'COMMON.BTN_REFRESH'|translate\" (click)=\"onRefresh.emit()\">\n      <mat-icon>refresh</mat-icon>\n    </button>\n\n  </ng-container>\n\n  <!-- if row selection -->\n  <ng-template #hasSelection>\n\n    <!-- delete -->\n    <button mat-icon-button class=\"hidden-xs hidden-sm\" *ngIf=\"canDelete\"\n            [title]=\"'COMMON.BTN_DELETE'|translate\" (click)=\"deleteSelection($event)\">\n      <mat-icon>delete</mat-icon>\n    </button>\n  </ng-template>\n\n  <!-- error -->\n  <ion-item *ngIf=\"error\" hidden-xs hidden-sm hidden-mobile lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <div class=\"toolbar-spacer\"></div>\n\n  <button mat-icon-button\n          [title]=\"'COMMON.BTN_OPTIONS'|translate\"\n          [matMenuTriggerFor]=\"optionsMenu\">\n    <mat-icon>more_vert</mat-icon>\n  </button>\n</mat-toolbar>\n\n\n<mat-table [dataSource]=\"dataSource\" matSort\n           [matSortActive]=\"defaultSortBy\"\n           [matSortDirection]=\"defaultSortDirection\"\n           matSortDisableClear [trackBy]=\"trackByFn\">\n\n  <!-- select -->\n  <ng-container matColumnDef=\"select\">\n    <mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\">\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\n                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n      </mat-checkbox>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!canEdit\">\n      <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(row) : null\" [checked]=\"selection.isSelected(row)\">\n      </mat-checkbox>\n    </mat-cell>\n  </ng-container>\n\n  <!-- id -->\n  <ng-container matColumnDef=\"id\">\n    <mat-header-cell *matHeaderCellDef mat-sort-header [class.cdk-visually-hidden]=\"!isAdmin\">\n      <app-loading-spinner [loading]=\"loadingSubject|async\"><ion-label>#</ion-label></app-loading-spinner>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!isAdmin\">{{ row.currentData.id | mathAbs }}</mat-cell>\n  </ng-container>\n\n  <!-- creationDate -->\n  <ng-container matColumnDef=\"creationDate\">\n    <mat-header-cell *matHeaderCellDef mat-sort-header>\n      <ion-label translate>SOCIAL.USER_EVENT.CREATION_DATE</ion-label>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row\">\n      <ion-text>\n        {{row.currentData.creationDate | dateFromNow }}<br/>\n        <ion-text color=\"medium\"><small>{{row.currentData.creationDate | dateFormat: {time: true} }}</small></ion-text>\n      </ion-text>\n    </mat-cell>\n  </ng-container>\n\n  <!-- icon -->\n  <ng-container matColumnDef=\"icon\">\n    <mat-header-cell *matHeaderCellDef>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row;\">\n      <ng-container *ngIf=\"getIcon(row.currentData); let details\">\n        <ion-icon slot=\"start\" *ngIf=\"details.icon\" [name]=\"details.icon\"></ion-icon>\n        <mat-icon slot=\"start\" *ngIf=\"details.matIcon\">{{details.matIcon}}</mat-icon>\n      </ng-container>\n    </mat-cell>\n  </ng-container>\n\n  <!-- event type -->\n  <ng-container matColumnDef=\"eventType\">\n    <mat-header-cell *matHeaderCellDef mat-sort-header>\n      <ion-label translate>SOCIAL.USER_EVENT.EVENT_TYPE</ion-label>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row;\">\n      <span>{{'SOCIAL.USER_EVENT.TYPE_ENUM.' + row.currentData.eventType | translate}}</span>\n    </mat-cell>\n  </ng-container>\n\n  <!-- message -->\n  <ng-container matColumnDef=\"message\">\n    <mat-header-cell *matHeaderCellDef>\n      <ion-label translate>SOCIAL.USER_EVENT.MESSAGE</ion-label>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row;\">\n      <ng-container *ngIf=\"getDetail(row.currentData); let details\">\n        <ion-text [innerHTML]=\"details.title|translate\">\n        </ion-text>\n      </ng-container>\n    </mat-cell>\n  </ng-container>\n\n  <!-- Actions buttons column -->\n  <ng-container matColumnDef=\"actions\">\n    <mat-header-cell *matHeaderCellDef>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row\">\n      <ng-container *ngIf=\"getDetail(row.currentData); let details\">\n        <button mat-icon-button color=\"light\"\n                *ngFor=\"let action of details.actions\"\n                [title]=\"action.title |translate\"\n                [color]=\"action.color\"\n                (click)=\"doAction(action, row)\">\n          <app-icon slot=\"start\" *ngIf=\"action.iconRef\" [ref]=\"action.iconRef\"></app-icon>\n        </button>\n      </ng-container>\n    </mat-cell>\n  </ng-container>\n\n  <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n  <mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n           class=\"mat-row-disabled\"\n           (click)=\"clickRow($event, row)\"></mat-row>\n\n</mat-table>\n\n<ion-row class=\"ion-no-padding\">\n  <ion-col></ion-col>\n  <ion-col class=\"ion-no-padding\" size=\"auto\">\n    <mat-paginator [length]=\"totalRowCount\" [pageSize]=\"defaultPageSize\" [pageSizeOptions]=\"defaultPageSizeOptions\" showFirstLastButtons>\n    </mat-paginator>\n  </ion-col>\n</ion-row>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     providers: [
                         {
@@ -30925,17 +31090,48 @@
     };
 
     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) {
+        UserEventNotificationList.prototype.read = function (event, userEvent) {
             var _a;
             if (userEvent === null || userEvent === void 0 ? void 0 : userEvent.readDate)
                 return;
             (_a = this.readEvent) === null || _a === void 0 ? void 0 : _a.emit(userEvent);
         };
+        UserEventNotificationList.prototype.readAll = function (event) {
+            var _a;
+            var unreadUserEvents = (this.userEvents.value || []).filter(function (value) { return !value.readDate; });
+            if (!unreadUserEvents.length)
+                return;
+            (_a = this.readEvents) === null || _a === void 0 ? void 0 : _a.emit(unreadUserEvents);
+        };
         UserEventNotificationList.prototype.executeAction = function (action, userEvent) {
             // Execute then close popover
             action.executeAction(userEvent);
@@ -30944,37 +31140,42 @@
         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",
-                    styles: [":host(.popover-viewport){overflow-y:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none}.unread{font-weight:700}"]
+                    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-col class=\"top-action\">\n      <a (click)=\"readAll($event)\">{{'SOCIAL.USER_EVENT.NOTIFICATION.READ_ALL' | translate}}</a>\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 message\">\n      <ion-row>\n        <ion-col>\n          <p [class.unread]=\"!userEvent.readDate\" [innerHTML]=\"userEvent.message\"></p>\n        </ion-col>\n      </ion-row>\n      <ion-row *ngIf=\"userEvent.actions?.length\">\n        <ion-col>\n          <span *ngFor=\"let action of userEvent.actions\" class=\"action\">\n            <a (click)=\"executeAction(action, userEvent)\">\n              <app-icon *ngIf=\"action.iconRef\" slot=\"start\" height=\"20\" width=\"20\" [ref]=\"action.iconRef\"></app-icon>\n              {{ action.name }}\n            </a>\n          </span>\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; margin-right: 3px\"\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-row class=\"ion-list-footer column\">\n  </ion-row>\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}.message{font-size:.9em}.message p{margin-top:5px;margin-bottom:5px}.top-action{text-align:end;margin-right:8px}.top-action a{cursor:pointer;color:#f5f5f5;font-style:italic}.action a{margin-right:10px;cursor:pointer}.action app-icon{vertical-align:middle}"]
                 },] }
     ];
     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 }]
+        readEvent: [{ type: i0.Output }],
+        readEvents: [{ type: i0.Output }]
     };
 
     var UserEventNotificationComponent = /** @class */ (function () {
-        function UserEventNotificationComponent(userEventService, accountService, popoverController, cd) {
+        function UserEventNotificationComponent(userEventService, accountService, popoverController) {
             this.userEventService = userEventService;
             this.accountService = accountService;
             this.popoverController = popoverController;
-            this.cd = cd;
             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();
+            this._readEvents = new i0.EventEmitter();
         }
         Object.defineProperty(UserEventNotificationComponent.prototype, "count", {
             get: function () {
@@ -30985,24 +31186,24 @@
             configurable: true
         });
         UserEventNotificationComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            var _a;
-            if (isNil(this.userEventService)) {
-                console.warn(this._logPrefix + "No service injected");
-                this.disabled = true;
-                return;
-            }
-            this._subscriptions.add(this.userEventService.watchAll(0, 10, 'creationDate', "desc", {
-                recipients: [(_a = this.accountService.person) === null || _a === void 0 ? void 0 : _a.pubkey]
-            }).subscribe(function (value) {
-                var data = value.data;
-                if (_this.debug) {
-                    console.debug(_this._logPrefix + "Receiving user events", data);
-                }
-                _this.userEventsSubject.next(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) {
+                    if (isNil(this.userEventService)) {
+                        console.warn(this._logPrefix + "No service injected");
+                        this.disabled = true;
+                        return [2 /*return*/];
+                    }
+                    // Subscribe to read event
+                    this._readEvent.subscribe(function (value) {
+                        // default: mark event as read
+                        _this.userEventService.markAsRead([value]);
+                    });
+                    this._readEvents.subscribe(function (value) {
+                        _this.userEventService.markAsRead(value);
+                    });
+                    return [2 /*return*/];
+                });
             });
         };
         UserEventNotificationComponent.prototype.showList = function (event) {
@@ -31010,19 +31211,23 @@
                 var popover;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
-                        case 0: return [4 /*yield*/, this.popoverController.create({
-                                component: UserEventNotificationList,
-                                componentProps: {
-                                    titleI18n: this.titleI18n,
-                                    userEvents: this.userEventsSubject,
-                                    readEvent: this._readEvent
-                                },
-                                backdropDismiss: true,
-                                keyboardClose: true,
-                                event: event,
-                                translucent: true,
-                                cssClass: 'popover-large'
-                            })];
+                        case 0:
+                            // Reset count
+                            this.userEventService.resetCount();
+                            return [4 /*yield*/, this.popoverController.create({
+                                    component: UserEventNotificationList,
+                                    componentProps: {
+                                        debug: this.debug,
+                                        titleI18n: this.titleI18n,
+                                        readEvent: this._readEvent,
+                                        readEvents: this._readEvents
+                                    },
+                                    backdropDismiss: true,
+                                    keyboardClose: true,
+                                    event: event,
+                                    translucent: true,
+                                    cssClass: 'popover-large'
+                                })];
                         case 1:
                             popover = _b.sent();
                             return [4 /*yield*/, popover.present()];
@@ -31033,14 +31238,10 @@
                 });
             });
         };
-        UserEventNotificationComponent.prototype.markForCheck = function () {
-            this.cd.markForCheck();
-        };
         UserEventNotificationComponent.prototype.ngOnDestroy = function () {
             if (this.debug) {
                 console.debug(this._logPrefix + "Destroying");
             }
-            this._subscriptions.unsubscribe();
         };
         return UserEventNotificationComponent;
     }());
@@ -31055,8 +31256,7 @@
     UserEventNotificationComponent.ctorParameters = function () { return [
         { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [UserEventServiceToken,] }] },
         { type: AccountService },
-        { type: i1$5.PopoverController },
-        { type: i0.ChangeDetectorRef }
+        { type: i1$5.PopoverController }
     ]; };
     UserEventNotificationComponent.propDecorators = {
         debug: [{ type: i0.Input }],
@@ -31064,6 +31264,100 @@
         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 = [];
+            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);
+        };
+        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 __awaiter(this, void 0, void 0, function () {
+                var _b, _c, entity, e_1_1;
+                var e_1, _d;
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
+                        case 0:
+                            _e.trys.push([0, 5, 6, 7]);
+                            _b = __values((data || [])), _c = _b.next();
+                            _e.label = 1;
+                        case 1:
+                            if (!!_c.done) return [3 /*break*/, 4];
+                            entity = _c.value;
+                            return [4 /*yield*/, this.save(entity)];
+                        case 2:
+                            _e.sent();
+                            _e.label = 3;
+                        case 3:
+                            _c = _b.next();
+                            return [3 /*break*/, 1];
+                        case 4: return [3 /*break*/, 7];
+                        case 5:
+                            e_1_1 = _e.sent();
+                            e_1 = { error: e_1_1 };
+                            return [3 /*break*/, 7];
+                        case 6:
+                            try {
+                                if (_c && !_c.done && (_d = _b.return)) _d.call(_b);
+                            }
+                            finally { if (e_1) throw e_1.error; }
+                            return [7 /*endfinally*/];
+                        case 7: return [2 /*return*/, Promise.resolve(this.userEvents)];
+                    }
+                });
+            });
+        };
+        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() {
         }
@@ -31084,6 +31378,9 @@
                     exports: [
                         UserEventsTable,
                         UserEventNotificationComponent
+                    ],
+                    providers: [
+                        { provide: UserEventServiceToken, useClass: UserEventTestService }
                     ]
                 },] }
     ];
@@ -31353,11 +31650,14 @@
     // @dynamic
     exports.JobProgression = JobProgression_1 = /** @class */ (function (_super) {
         __extends(JobProgression, _super);
-        function JobProgression() {
-            return _super.call(this, JobProgression_1.TYPENAME) || this;
+        function JobProgression(id) {
+            var _this = _super.call(this, JobProgression_1.TYPENAME) || this;
+            _this.id = id;
+            return _this;
         }
         JobProgression.prototype.fromObject = function (source) {
             _super.prototype.fromObject.call(this, source);
+            this.name = source.name;
             this.message = source.message;
             this.current = source.current;
             this.total = source.total;
@@ -31369,7 +31669,7 @@
     ], exports.JobProgression);
 
     var JobProgressionServiceToken = new i0.InjectionToken('JobProgressionService');
-    var jobProgressionSubscription = core.gql(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["subscription UpdateJobProgression($id: Int!, $interval: Int){\n  data: updateJobProgression(id: $id, interval: $interval) {\n    id\n    message\n    current\n    total\n    updateDate\n  }\n}"], ["subscription UpdateJobProgression($id: Int!, $interval: Int){\n  data: updateJobProgression(id: $id, interval: $interval) {\n    id\n    message\n    current\n    total\n    updateDate\n  }\n}"])));
+    var jobProgressionSubscription = core.gql(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["subscription UpdateJobProgression($id: Int!, $interval: Int){\n  data: updateJobProgression(id: $id, interval: $interval) {\n    id\n    name\n    message\n    current\n    total\n  }\n}"], ["subscription UpdateJobProgression($id: Int!, $interval: Int){\n  data: updateJobProgression(id: $id, interval: $interval) {\n    id\n    name\n    message\n    current\n    total\n  }\n}"])));
     var JobProgressionService = /** @class */ (function (_super) {
         __extends(JobProgressionService, _super);
         function JobProgressionService(graphql, environment) {
@@ -31421,8 +31721,8 @@
     JobProgressionList.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-job-progression-list',
-                    template: "<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=\"!jobProgressions?.length\">\n    {{'SOCIAL.JOB.PROGRESSION.EMPTY' | translate}}\n  </ion-item>\n  <ion-item *ngFor=\"let jobProgression of jobProgressions\">\n    <ion-grid class=\"ion-no-margin\">\n      <ion-row>\n        <ion-col>\n          {{jobProgression.message}}\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <ion-progress-bar\n            [value]=\"jobProgression.total > 0 ? jobProgression.current / jobProgression.total : undefined\"\n            [type]=\"jobProgression.total > 0 ? 'determinate' : 'indeterminate'\">\n          </ion-progress-bar>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </ion-item>\n\n</ion-list>\n",
-                    styles: [":host(.popover-viewport){overflow-y:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none}"]
+                    template: "<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=\"!jobProgressions?.length\">\n    {{'SOCIAL.JOB.PROGRESSION.EMPTY' | translate}}\n  </ion-item>\n  <ion-item *ngFor=\"let jobProgression of jobProgressions\" class=\"ion-item-job-progression\">\n    <ion-grid class=\"ion-no-margin\">\n      <ion-row class=\"name\">\n        <ion-col>\n          {{jobProgression.name}}\n        </ion-col>\n      </ion-row>\n      <ion-row class=\"message\">\n        <ion-col>\n          {{jobProgression.message}}\n        </ion-col>\n      </ion-row>\n      <ion-row class=\"progress-bar\">\n        <ion-col>\n          <ion-progress-bar\n            [value]=\"jobProgression.total > 0 ? jobProgression.current / jobProgression.total : undefined\"\n            [type]=\"jobProgression.total > 0 ? 'determinate' : 'indeterminate'\">\n          </ion-progress-bar>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </ion-item>\n\n</ion-list>\n",
+                    styles: [":host(.popover-viewport){overflow-y:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ion-item-job-progression{font-size:.9em}.ion-item-job-progression .message{font-style:italic}.ion-item-job-progression .progress-bar{margin-top:5px;margin-bottom:5px}"]
                 },] }
     ];
     JobProgressionList.ctorParameters = function () { return []; };
@@ -31466,13 +31766,16 @@
                 console.warn(this._logPrefix + "No service injected. Can't add a job");
                 return;
             }
-            if (this.debug) {
-                console.debug(this._logPrefix + "Add job id=" + id);
-            }
             if (!!this.getProgression(id)) {
                 console.warn(this._logPrefix + "Job (id=" + id + ") already present");
                 return;
             }
+            if (this.debug) {
+                console.debug(this._logPrefix + "Add job id=" + id);
+            }
+            // Adding empty job progression
+            var progression = new exports.JobProgression(id);
+            this.jobProgressions.push(progression);
             this.disabled = false;
             var sub = this.jobProgressionService.listenChanges(id)
                 .pipe(operators.filter(function (progression) {
@@ -31487,7 +31790,7 @@
                 // Get current progression object
                 var currentProgression = _this.getProgression(id);
                 if (!currentProgression) {
-                    // add it
+                    // add it if absent
                     _this.jobProgressions.push(progression);
                     if (_this.debug) {
                         console.debug(_this._logPrefix + "Progression added id=" + id, progression);
@@ -34246,12 +34549,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 });