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

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          </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,13 +30172,12 @@
     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;
@@ -30194,7 +30193,7 @@
                 var count;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
-                        case 0: return [4 /*yield*/, this.count(this.defaultFilter())];
+                        case 0: return [4 /*yield*/, this.count(undefined)];
                         case 1:
                             count = _b.sent();
                             if (count && this._debug) {
@@ -30224,13 +30223,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,7 +30241,10 @@
                 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',
@@ -30248,12 +30252,13 @@
                 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);
+                _this._count$.next(unreadCount);
                 return {
                     data: data,
                     total: toNumber(res === null || res === void 0 ? void 0 : res.total, unreadCount)
@@ -30284,7 +30289,7 @@
                                 return [2 /*return*/, undefined];
                             }
                             if (!filter)
-                                throw new Error("Missing argument 'filter'");
+                                filter = this.defaultFilter();
                             filter = this.asFilter(filter);
                             if (this._debug)
                                 console.debug(this._logPrefix + "Counting user events with filter:", filter);
@@ -30311,7 +30316,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,7 +30333,7 @@
                 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,
@@ -30501,12 +30506,13 @@
             this.listeners.push(listener);
         };
         /* -- protected methods -- */
-        AbstractUserEventService.prototype.processUserEvent = function (source) {
+        AbstractUserEventService.prototype.processUserEvent = function (source, that) {
             var e_2, _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,8 +30520,8 @@
                         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;
                     }
                 }
@@ -30585,7 +30591,6 @@
         { type: AccountService },
         { type: NetworkService },
         { type: i1$2.TranslateService },
-        { type: i1$5.ToastController },
         { type: undefined },
         { type: undefined },
         { type: undefined },
@@ -30602,7 +30607,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;
@@ -30949,7 +30954,7 @@
     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    {{'COMMON.NO_RESULT' | 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",
+                    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}"]
                 },] }
     ];
@@ -30969,7 +30974,7 @@
             this.popoverController = popoverController;
             this.cd = cd;
             this.debug = false;
-            this.titleI18n = 'SOCIAL.USER_EVENT.TITLE';
+            this.titleI18n = 'SOCIAL.USER_EVENT.NOTIFICATION.TITLE';
             this.disabled = false;
             this.userEventsSubject = new rxjs.BehaviorSubject(undefined);
             this._subscriptions = new rxjs.Subscription();
@@ -30978,23 +30983,33 @@
         }
         Object.defineProperty(UserEventNotificationComponent.prototype, "count", {
             get: function () {
-                return this.userEventService.userEventCount.pipe(operators.map(function (value) { return value === 0 ? undefined : value; }));
+                var _a;
+                return (_a = this.userEventService) === null || _a === void 0 ? void 0 : _a.userEventCount.pipe(operators.map(function (value) { return value === 0 ? undefined : value; }));
             },
             enumerable: false,
             configurable: true
         });
         UserEventNotificationComponent.prototype.ngOnInit = function () {
             var _this = this;
-            var _a;
-            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) {
+            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);
             });
@@ -31047,7 +31062,7 @@
                 },] }
     ];
     UserEventNotificationComponent.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: i0.Inject, args: [UserEventServiceToken,] }] },
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [UserEventServiceToken,] }] },
         { type: AccountService },
         { type: i1$5.PopoverController },
         { type: i0.ChangeDetectorRef }
@@ -31363,7 +31378,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    message\n    current\n    total\n  }\n}"], ["subscription UpdateJobProgression($id: Int!, $interval: Int){\n  data: updateJobProgression(id: $id, interval: $interval) {\n    id\n    message\n    current\n    total\n  }\n}"])));
     var JobProgressionService = /** @class */ (function (_super) {
         __extends(JobProgressionService, _super);
         function JobProgressionService(graphql, environment) {
@@ -31415,7 +31430,7 @@
     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    {{'COMMON.NO_RESULT' | 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",
+                    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}"]
                 },] }
     ];
@@ -31431,10 +31446,7 @@
             this.popoverController = popoverController;
             this.cd = cd;
             this.debug = false;
-            this.titleI18n = 'SOCIAL.JOB_PROGRESSION.TITLE';
-            this.autoRemove = true;
-            this.autoHide = false;
-            this.autoHideDelay = 1000; // millisecond
+            this.titleI18n = 'SOCIAL.JOB.PROGRESSION.TITLE';
             this.jobFinished = new i0.EventEmitter();
             this.disabled = true;
             this.color = 'accent';
@@ -31446,9 +31458,23 @@
             this._logPrefix = '[job-progression] ';
         }
         JobProgressionComponent.prototype.ngOnInit = function () {
+            var _a, _b, _c, _d;
+            if (isNil(this.jobProgressionService)) {
+                console.warn(this._logPrefix + "No service injected");
+            }
+            // parse options
+            this.autoHide = toBoolean((_a = this.options) === null || _a === void 0 ? void 0 : _a.autoHide, false);
+            this.visible = !this.autoHide;
+            this.autoHideDelay = toNumber((_b = this.options) === null || _b === void 0 ? void 0 : _b.autoHideDelay, 1000);
+            this.autoRemove = toBoolean((_c = this.options) === null || _c === void 0 ? void 0 : _c.autoRemove, true);
+            this.autoRemoveDelay = toNumber((_d = this.options) === null || _d === void 0 ? void 0 : _d.autoRemoveDelay, 1000);
         };
         JobProgressionComponent.prototype.addJob = function (id) {
             var _this = this;
+            if (isNil(this.jobProgressionService)) {
+                console.warn(this._logPrefix + "No service injected. Can't add a job");
+                return;
+            }
             if (this.debug) {
                 console.debug(this._logPrefix + "Add job id=" + id);
             }
@@ -31465,6 +31491,8 @@
                 }
                 return true;
             }), operators.map(function (progression) {
+                // Ensure visible
+                _this.visible = true;
                 // Get current progression object
                 var currentProgression = _this.getProgression(id);
                 if (!currentProgression) {
@@ -31494,7 +31522,17 @@
                     // emit event
                     _this.jobFinished.emit(progression.id);
                     if (_this.autoRemove) {
-                        setTimeout(function () { return _this.removeJob(progression.id); }, 1000);
+                        setTimeout(function () {
+                            var _a;
+                            _this.removeJob(progression.id);
+                            // If last job
+                            if (_this.autoHide && !((_a = _this.jobProgressions) === null || _a === void 0 ? void 0 : _a.length)) {
+                                setTimeout(function () {
+                                    _this.visible = false;
+                                    _this.markForCheck();
+                                }, _this.autoHideDelay);
+                            }
+                        }, _this.autoRemoveDelay);
                     }
                 }
             });
@@ -31543,8 +31581,8 @@
         JobProgressionComponent.prototype.showList = function (event) {
             return __awaiter(this, void 0, void 0, function () {
                 var popover;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
                         case 0: return [4 /*yield*/, this.popoverController.create({
                                 component: JobProgressionList,
                                 componentProps: {
@@ -31558,10 +31596,10 @@
                                 cssClass: 'popover-large'
                             })];
                         case 1:
-                            popover = _a.sent();
+                            popover = _e.sent();
                             return [4 /*yield*/, popover.present()];
                         case 2:
-                            _a.sent();
+                            _e.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -31581,22 +31619,20 @@
     JobProgressionComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-job-progression',
-                    template: "<button\n  #button\n  mat-icon-button\n  [title]=\"titleI18n | translate\"\n  [disabled]=\"disabled\"\n  *ngIf=\"!autoHide || jobProgressions?.length\"\n  (click)=\"showList($event)\"\n>\n  <mat-icon\n    [matBadge]=\"jobProgressions?.length\"\n    [matBadgeHidden]=\"!jobProgressions?.length\"\n    matBadgeColor=\"accent\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"above after\"\n  >{{ disabled || jobProgressions?.length ? 'schedule' : 'task_alt' }}\n  </mat-icon>\n  <mat-spinner\n    #spinner\n    *ngIf=\"jobProgressions?.length\"\n    class=\"floating-spinner\"\n    [color]=\"color\"\n    [mode]=\"mode\"\n    [value]=\"value\"\n    diameter=\"30\"\n    strokeWidth=\"3\"\n  ></mat-spinner>\n</button>\n\n",
+                    template: "<button\n  #button\n  mat-icon-button\n  [title]=\"titleI18n | translate\"\n  [disabled]=\"disabled\"\n  *ngIf=\"visible\"\n  (click)=\"showList($event)\"\n>\n  <mat-icon\n    [matBadge]=\"jobProgressions?.length\"\n    [matBadgeHidden]=\"!jobProgressions?.length\"\n    matBadgeColor=\"accent\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"above after\"\n  >{{ disabled || jobProgressions?.length ? 'schedule' : 'task_alt' }}\n  </mat-icon>\n  <mat-spinner\n    #spinner\n    *ngIf=\"jobProgressions?.length\"\n    class=\"floating-spinner\"\n    [color]=\"color\"\n    [mode]=\"mode\"\n    [value]=\"value\"\n    diameter=\"30\"\n    strokeWidth=\"3\"\n  ></mat-spinner>\n</button>\n\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [".floating-spinner{position:absolute;top:6px;left:5px}"]
                 },] }
     ];
     JobProgressionComponent.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: i0.Inject, args: [JobProgressionServiceToken,] }] },
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [JobProgressionServiceToken,] }] },
         { type: i1$5.PopoverController },
         { type: i0.ChangeDetectorRef }
     ]; };
     JobProgressionComponent.propDecorators = {
         debug: [{ type: i0.Input }],
         titleI18n: [{ type: i0.Input }],
-        autoRemove: [{ type: i0.Input }],
-        autoHide: [{ type: i0.Input }],
-        autoHideDelay: [{ type: i0.Input }],
+        options: [{ type: i0.Input }],
         jobFinished: [{ type: i0.Output }]
     };
 
@@ -31622,6 +31658,7 @@
                 },] }
     ];
 
+    var SocialModuleOptionsToken = new i0.InjectionToken("SocialModuleOptions");
     var SocialModule = /** @class */ (function () {
         function SocialModule() {
         }
@@ -33911,6 +33948,7 @@
     exports.IsNotOnFieldModePipe = IsNotOnFieldModePipe;
     exports.IsOnFieldModePipe = IsOnFieldModePipe;
     exports.Job = Job;
+    exports.JobModule = JobModule;
     exports.JobProgressionComponent = JobProgressionComponent;
     exports.JobProgressionService = JobProgressionService;
     exports.JobProgressionServiceToken = JobProgressionServiceToken;
@@ -33951,6 +33989,7 @@
     exports.MenuService = MenuService;
     exports.MessageForm = MessageForm;
     exports.MessageModal = MessageModal;
+    exports.MessageModule = MessageModule;
     exports.MessageService = MessageService;
     exports.MessageTypeList = MessageTypeList;
     exports.MessageTypes = MessageTypes;
@@ -34018,6 +34057,7 @@
     exports.SharedValidators = SharedValidators;
     exports.SocialErrorCodes = SocialErrorCodes;
     exports.SocialModule = SocialModule;
+    exports.SocialModuleOptionsToken = SocialModuleOptionsToken;
     exports.StartableService = StartableService;
     exports.StatusById = StatusById;
     exports.StatusIds = StatusIds;
@@ -34046,6 +34086,7 @@
     exports.UploadFileTestingPage = UploadFileTestingPage;
     exports.UriUtils = UriUtils;
     exports.UserEventFragments = UserEventFragments;
+    exports.UserEventModule = UserEventModule;
     exports.UserEventNotificationComponent = UserEventNotificationComponent;
     exports.UserEventService = UserEventService;
     exports.UserEventServiceToken = UserEventServiceToken;
@@ -34213,16 +34254,13 @@
     exports.ɵh = LocalSettingsValidatorService;
     exports.ɵi = AppUpdateOfflineModeCard;
     exports.ɵj = AppIconComponent;
-    exports.ɵk = UserEventModule;
-    exports.ɵl = UserEventNotificationList;
-    exports.ɵm = JobModule;
-    exports.ɵn = JobProgressionList;
-    exports.ɵo = MessageModule;
-    exports.ɵp = DateTestPage;
-    exports.ɵq = NumpadTestPage;
-    exports.ɵr = MatBadgeIconTestPage;
-    exports.ɵs = ToastTestingModule;
-    exports.ɵt = ToastTestingPage;
+    exports.ɵk = UserEventNotificationList;
+    exports.ɵl = JobProgressionList;
+    exports.ɵm = DateTestPage;
+    exports.ɵn = NumpadTestPage;
+    exports.ɵo = MatBadgeIconTestPage;
+    exports.ɵp = ToastTestingModule;
+    exports.ɵq = ToastTestingPage;
 
     Object.defineProperty(exports, '__esModule', { value: true });