nuxeo-development-framework 4.1.4 → 4.1.6

package/src/lib/components/notifications/components/notifications-settings/notifications-settings.adapter.ts

@@ -0,0 +1,41 @@
+import {
+  NotificationDefinitionModel,
+  NotificationDefinitionPresenter,
+  NotificationSubscriptionModel,
+  NotificationSubscriptionPresenter,
+} from '../../models';
+
+export const mapDefinitionToPresenter: (
+  definition: NotificationDefinitionModel
+) => NotificationDefinitionPresenter = (definition) => {
+  const _properties = definition.properties;
+  return {
+    uid: definition.uid,
+    sourceType: _properties['notf_nt:sourceTypee'],
+    isActive: _properties['notif_def:isActive'],
+    autoSubscription: _properties['notif_def:autoSubscription'],
+    sentByDefault: _properties['notif_def:sentByDefault'],
+    applicationKey: _properties['notif_def:applicationKey'],
+    channel: _properties['notif_def:channel'],
+    title: definition.title,
+    arTitle: _properties['notif_def:arTitle'],
+    enTitle: _properties['notif_def:enTitle'],
+    notificationKey: _properties['notf_nt:key'],
+    arDescription: _properties['notif_def:arDescription'],
+    enDescription: _properties['notif_def:enDescription'],
+  };
+};
+
+export const mapSubscriptionToPresenter: (
+  subscription: NotificationSubscriptionModel
+) => NotificationSubscriptionPresenter = (subscription) => {
+  const _properties = subscription.properties;
+  return {
+    uid: subscription.uid,
+    applicationKey: _properties['notfsub:applicationKey'],
+    channel: _properties['notfsub:channel'],
+    title: subscription.title,
+    notificationKey: _properties['notfsub:notificationKey'],
+    state: subscription.state as NotificationSubscriptionPresenter['state'],
+  };
+};

package/src/lib/components/notifications/components/notifications-settings/notifications-settings.component.html

@@ -0,0 +1,42 @@
+<mat-spinner *ngIf="isLoadingResult" class="mt-4 mx-auto" [diameter]="48"></mat-spinner>
+<div *ngIf="settings$ | async as settings" class="notifications-settings">
+  <ng-container *ngIf="!isLoadingResult && settings.definitions">
+    <div
+      *ngFor="let group of settings.definitions | keyvalue"
+      class="notifications-settings__section notifications-settings__section--{{
+        group.key
+      }}"
+    >
+      <div class="notifications-settings__section__title">
+        <mat-icon> tune </mat-icon>
+        <strong> {{ 'vocabulary.VOC_Notf_SourceTypes.' + group.key | translate }}</strong>
+      </div>
+      <div class="notifications-settings__section__content">
+        <div *ngFor="let definition of group.value" class="notifications-settings__group">
+          <mat-slide-toggle
+            [name]="definition.title"
+            [checked]="
+              definition.autoSubscription
+                ? true
+                : (definition | checkIfSubscribed : settings.subscriptions)
+            "
+            class="notifications-settings__group__toggle"
+            [class.is-loading]="changingItemId === definition.uid"
+            [disabled]="definition.autoSubscription"
+            (change)="settingChanged(definition, $event)"
+          >
+          </mat-slide-toggle>
+          <span class="notifications-settings__group__title"
+            >{{ currentLang == 'ar' ? definition?.arTitle : definition?.enTitle }}
+          </span>
+
+          <p class="notifications-settings__group__description">
+            {{
+              currentLang == 'ar' ? definition?.arDescription : definition?.enDescription
+            }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+</div>

package/src/lib/components/notifications/components/notifications-settings/notifications-settings.component.scss

@@ -0,0 +1,75 @@
+.notifications-settings {
+  padding: var(--notifications-settings-padding, 1rem 0);
+  &__section {
+    border: var(--setting-section-border, 1px solid #f0f0f0);
+    border-radius: var(--setting-section-radius, 6px);
+    padding: var(--settings-section-padding, 1rem);
+    margin-block: var(--settings-section-margin-block, 0 1.5rem);
+    margin-inline: var(--settings-section-margin-inline, 0);
+    &__title {
+      display: var(--setting-section-title-display, flex);
+      align-items: var(--setting-section-title-items, center);
+      gap: var(--setting-section-title-gap, 0.5rem);
+      padding-block: var(--setting-section-title-padding-block, 0.5rem);
+      border-bottom: var(--setting-section-title-border-bottom, 1px solid #f0f0f0);
+      background: var(--setting-section-title-background, transparent);
+      color: var(--setting-section-title-color, #2f258a);
+    }
+    &__content {
+      padding-block: var(--setting-section-content-padding-block, 1rem 0);
+      display: var(--setting-section-content-display, grid);
+      grid-template-columns: var(
+        --setting-section-content-columns,
+        repeat(auto-fit, minmax(490px, 1fr))
+      );
+      gap: var(--setting-section-content-gap, 1rem);
+    }
+  }
+  &__group {
+    display: var(--setting-group-display, grid);
+    grid-template-columns: var(--setting-group-columns, auto 1fr);
+    background: var(--setting-group-background, transparent);
+    padding: var(--setting-group-padding, 0.2rem 0);
+    gap: var(--setting-group-gap, 0.1rem 1rem);
+
+    &__toggle {
+      order: var(--setting-toggle-order);
+      &.is-loading {
+        --loading-color: var(--setting-toggle-loader-color, #9189dd36);
+        opacity: 0.5;
+        ::ng-deep {
+          pointer-events: none;
+          .mat-slide-toggle-thumb {
+            animation: animateLoader 1.5s linear infinite;
+          }
+          label {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+    &__title {
+    }
+    &__description {
+      color: var(--setting-option-description-color, #666);
+      font-size: var(--setting-option-description-size, 0.8rem);
+      grid-column: var(--setting-option-description-column, 2);
+    }
+  }
+}
+
+@keyframes animateLoader {
+  0% {
+    box-shadow: 0 0 0 2px var(--loading-color), 0 0 0 4px var(--loading-color),
+      0 0 0 6px var(--loading-color), 0 0 0 8px var(--loading-color);
+  }
+  50% {
+    box-shadow: 0 0 0 1px var(--loading-color), 0 0 0 3px var(--loading-color),
+      0 0 0 4px var(--loading-color), 0 0 0 5px var(--loading-color),
+      0 0 0 6px var(--loading-color);
+  }
+  100% {
+    box-shadow: 0 0 0 2px var(--loading-color), 0 0 0 4px var(--loading-color),
+      0 0 0 6px var(--loading-color), 0 0 0 8px var(--loading-color);
+  }
+}

package/src/lib/components/notifications/components/notifications-settings/notifications-settings.component.ts

@@ -0,0 +1,222 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Inject,
+  Injector,
+  Input,
+  Output,
+} from '@angular/core';
+import { MatSlideToggleChange } from '@angular/material/slide-toggle';
+import { BehaviorSubject, combineLatest, ReplaySubject } from 'rxjs';
+import { finalize, map, switchMap, takeUntil, tap } from 'rxjs/operators';
+import { TranslationService } from '../../../../core/services/translation/translation.service';
+import { CustomToastrService } from '../../../custom-toastr/services/custom-toastr.service';
+import {
+  NotificationDefinitionModel,
+  NotificationDefinitionPresenter,
+  NotificationSubscriptionPresenter,
+  VocabularyType,
+} from '../../models';
+import { BaseNotification } from '../base-notifications.component';
+import {
+  mapDefinitionToPresenter,
+  mapSubscriptionToPresenter,
+} from './notifications-settings.adapter';
+
+@Component({
+  selector: 'app-notifications-settings',
+  templateUrl: './notifications-settings.component.html',
+  styleUrls: ['./notifications-settings.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NotificationsSettingsComponent extends BaseNotification {
+  @Output() onSubscribe = new EventEmitter<NotificationDefinitionPresenter>();
+  @Output() onUnsubscribe = new EventEmitter<Record<string, any>>();
+
+  private readonly _channelSub = new ReplaySubject<VocabularyType>();
+
+  changingItemId: string;
+  isLoadingResult = false;
+  private _channel: VocabularyType;
+  @Input() set channel(value: VocabularyType) {
+    this._channel = value;
+    if (value) {
+      this._channelSub.next(value);
+    }
+  }
+
+  get currentLang() {
+    return this._translateService.userLang;
+  }
+  private get _appKey() {
+    return this._environment?.appKey;
+  }
+
+  private readonly _subscriptionsSub = new BehaviorSubject<
+    NotificationSubscriptionPresenter[]
+  >([]);
+
+  readonly settings$ = this._prepareSettings();
+
+  constructor(
+    protected inject: Injector,
+    private _translateService: TranslationService,
+    private _cdr: ChangeDetectorRef,
+    private _toastrService: CustomToastrService,
+    @Inject('environment') private _environment: Record<string, any>
+  ) {
+    super(inject);
+  }
+
+  getSubscriptionsByChannel(channel: string) {
+    return this.notificationsService
+      .getSubscriptions({
+        notfsubscription_channel: channel,
+      })
+      .pipe(map((data) => data.map(mapSubscriptionToPresenter)));
+  }
+
+  getDefinitionsByChannel(channel: string) {
+    return this.notificationsService
+      .getDefinitions({
+        notfnotificationdef_channel: channel,
+      })
+      .pipe(
+        map((response) => {
+          return response.reduce((group, item) => {
+            if (!this._matchItem(item, channel)) {
+              return group;
+            }
+            const _data = mapDefinitionToPresenter(item);
+            return this._groupBy(group, _data);
+          }, {} as Record<string, NotificationDefinitionPresenter[]>);
+        })
+      );
+  }
+
+  settingChanged(
+    definition: NotificationDefinitionPresenter,
+    state: MatSlideToggleChange
+  ) {
+    if (state.checked) {
+      this._handleSubscribe(definition);
+    } else {
+      this._handleUnsubscribe(definition);
+    }
+  }
+
+  private _prepareSettings() {
+    return this._channelSub.pipe(
+      tap(() => {
+        this.isLoadingResult = true;
+      }),
+      switchMap((channel) => {
+        const definition = this.getDefinitionsByChannel(channel.id);
+        const subscriptions = this.getSubscriptionsByChannel(channel.id).pipe(
+          switchMap((data) => {
+            this._subscriptionsSub.next(data);
+            return this._subscriptionsSub.asObservable();
+          })
+        );
+        return combineLatest([definition, subscriptions]).pipe(
+          map(([definitions, subscriptions]) => ({ definitions, subscriptions })),
+          tap(() => {
+            this.isLoadingResult = false;
+            this._cdr.detectChanges();
+          })
+        );
+      })
+    );
+  }
+
+  private _handleSubscribe(definition: NotificationDefinitionPresenter) {
+    this.changingItemId = definition.uid;
+    this.notificationsService
+      .subscribe(definition.uid)
+      .pipe(
+        switchMap(() =>
+          this.getSubscriptionsByChannel(this._channel.id).pipe(
+            finalize(() => {
+              this.changingItemId = null;
+              this._cdr.detectChanges();
+            })
+          )
+        ),
+        takeUntil(this.destroy$)
+      )
+      .subscribe((res) => {
+        this.onSubscribe.emit(definition);
+        this._subscriptionsSub.next(res);
+        this._toastrService.show(
+          'success',
+          'notifications.notifications',
+          'notifications.subscribedDone'
+        );
+      });
+  }
+
+  private _handleUnsubscribe(definition: NotificationDefinitionPresenter) {
+    const subscriptions = this._subscriptionsSub.getValue();
+    const _subscription = this._findSubscription(subscriptions, definition);
+    if (!_subscription) {
+      return;
+    }
+
+    this.changingItemId = definition.uid;
+    this.notificationsService
+      .unsubscribe(_subscription.uid)
+      .pipe(
+        switchMap(() =>
+          this.getSubscriptionsByChannel(this._channel.id).pipe(
+            finalize(() => {
+              this.changingItemId = null;
+              this._cdr.detectChanges();
+            })
+          )
+        ),
+        finalize(() => {
+          this.changingItemId = null;
+          this._cdr.detectChanges();
+        }),
+        takeUntil(this.destroy$)
+      )
+      .subscribe((res) => {
+        this._subscriptionsSub.next(res);
+        this.onUnsubscribe.emit(_subscription);
+        this._toastrService.show(
+          'success',
+          'notifications.notifications',
+          'notifications.unsubscribedDone'
+        );
+      });
+  }
+
+  private _findSubscription(
+    subscriptions: NotificationSubscriptionPresenter[],
+    definition: NotificationDefinitionPresenter
+  ) {
+    return subscriptions.find((sub) => {
+      return (
+        sub.channel == definition.channel &&
+        sub.applicationKey == definition.applicationKey &&
+        sub.notificationKey == definition.notificationKey
+      );
+    });
+  }
+
+  private _matchItem(def: NotificationDefinitionModel, channel: string) {
+    return (
+      def.properties['notif_def:applicationKey'] == this._appKey &&
+      def.properties['notif_def:channel'] == channel
+    );
+  }
+
+  private _groupBy(group: Record<string, any>, item: NotificationDefinitionPresenter) {
+    const key = item['sourceType'];
+    group[key] = group[key] ?? [];
+    group[key].push(item);
+    return group;
+  }
+}

package/src/lib/components/notifications/components/notifications-sidebar/notifications-sidebar-content.ts

@@ -0,0 +1,17 @@
+import { Directive, InjectionToken, TemplateRef } from '@angular/core';
+
+export const NOTIFICATION_SIDEBAR_CONTENT =
+  new InjectionToken<NotificationSidebarContentDirective>('NotificationItemDirective');
+
+@Directive({
+  selector: '[appNotificationSidebarContent]',
+  providers: [
+    {
+      provide: NOTIFICATION_SIDEBAR_CONTENT,
+      useExisting: NotificationSidebarContentDirective,
+    },
+  ],
+})
+export class NotificationSidebarContentDirective {
+  constructor(public template: TemplateRef<any>) {}
+}

package/src/lib/components/notifications/components/notifications-sidebar/notifications-sidebar.component.html

@@ -0,0 +1,21 @@
+<div
+  #container
+  *ngIf="visible"
+  class="notification-sidebar"
+  [class.notification-sidebar__left]="position === 'left'"
+  [class.notification-sidebar__right]="position === 'right'"
+  [@panelState]="{
+    value: 'visible',
+    params: { transform: transformOptions, transition: transitionOptions }
+  }"
+  (@panelState.start)="onAnimationStart($event)"
+  (@panelState.done)="onAnimationEnd($event)"
+  role="complementary"
+  [attr.data-pc-name]="'sidebar'"
+  [attr.data-pc-section]="'root'"
+>
+  <div class="notification-sidebar__content">
+    <ng-content></ng-content>
+    <ng-container [ngTemplateOutlet]="contentTemplate"></ng-container>
+  </div>
+</div>

package/src/lib/components/notifications/components/notifications-sidebar/notifications-sidebar.component.scss

@@ -0,0 +1,40 @@
+.notification-sidebar {
+  position: fixed;
+  transition: transform 0.3s;
+  display: flex;
+  flex-direction: column;
+  width: var(--n-sidebar-width, min(80vw, 30rem));
+  height: var(--n-sidebar-height, 100%);
+  background: var(--n-sidebar-background, #fff);
+  border-radius: var(--n-sidebar-radius);
+  box-shadow: var(--n-sidebar-shadow, 0 0 25px #8b8b8b);
+  z-index: var(--notification-sidebar-z-index, 1050);
+
+
+  &__content {
+    position: relative;
+    overflow-y: auto;
+    flex-grow: 1;
+  }
+  &__left {
+    top: 0;
+    left: 0;
+    --n-sidebar-radius: var(--n-sidebar-right-radius, 0 16px 16px 0);
+  }
+
+  &__right {
+    top: 0;
+    right: 0;
+    --n-sidebar-radius: var(--n-sidebar-left-radius, 16px 0 0 16px);
+  }
+
+  &__overlay {
+    position: fixed;
+    transition: transform 0.3s;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--n-sidebar-overlay-background, rgba(0, 0, 0, 0.05));
+  }
+}

package/src/lib/components/notifications/components/notifications-sidebar/notifications-sidebar.component.ts

@@ -0,0 +1,179 @@
+import {
+  animate,
+  animation,
+  style,
+  transition,
+  trigger,
+  useAnimation,
+} from '@angular/animations';
+import { DOCUMENT } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChild,
+  ElementRef,
+  EventEmitter,
+  Inject,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  Renderer2,
+  TemplateRef,
+  ViewEncapsulation,
+} from '@angular/core';
+import { NOTIFICATION_SIDEBAR_CONTENT } from './notifications-sidebar-content';
+
+const showAnimation = animation([
+  style({ transform: '{{transform}}', opacity: 0 }),
+  animate('{{transition}}'),
+]);
+
+const hideAnimation = animation([
+  animate('{{transition}}', style({ transform: '{{transform}}', opacity: 0 })),
+]);
+
+@Component({
+  selector: 'app-notifications-sidebar',
+  templateUrl: './notifications-sidebar.component.html',
+  styleUrls: ['./notifications-sidebar.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  animations: [
+    trigger('panelState', [
+      transition('void => visible', [useAnimation(showAnimation)]),
+      transition('visible => void', [useAnimation(hideAnimation)]),
+    ]),
+  ],
+})
+export class NotificationsSidebarComponent implements OnInit, OnDestroy {
+  transformOptions: any = 'translate3d(-100%, 0px, 0px)';
+  transitionOptions: string = '150ms cubic-bezier(0, 0, 0.2, 1)';
+  private _mask: HTMLDivElement | null | undefined;
+  private _container: HTMLDivElement | null | undefined;
+  private _maskClickListener: VoidFunction | null | undefined;
+
+  @Input() appendToBody = true;
+  @Input() clearOnCLose = true;
+
+  private _visible: boolean | undefined;
+  @Input() set visible(val: boolean) {
+    this._visible = val;
+  }
+
+  get visible(): boolean {
+    return this._visible as boolean;
+  }
+
+  private _position: string = 'left';
+  get position(): string {
+    return this._position;
+  }
+
+  @Input() set position(value: string) {
+    this._position = value;
+    switch (value) {
+      case 'left':
+        this.transformOptions = 'translate3d(-100%, 0px, 0px)';
+        break;
+      case 'right':
+        this.transformOptions = 'translate3d(100%, 0px, 0px)';
+        break;
+    }
+  }
+
+  @Output() visibleChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @Output() onShow: EventEmitter<any> = new EventEmitter<any>();
+  @Output() onHide: EventEmitter<any> = new EventEmitter<any>();
+
+  @ContentChild(NOTIFICATION_SIDEBAR_CONTENT, { read: TemplateRef, static: true })
+  contentTemplate: TemplateRef<any> | undefined;
+
+  constructor(
+    @Inject(DOCUMENT) private document: Document,
+    public el: ElementRef,
+    public renderer: Renderer2,
+    public cd: ChangeDetectorRef
+  ) {}
+
+  ngOnInit(): void {}
+
+  onAnimationStart({ toState, element }) {
+    if (toState === 'visible') {
+      this._container = element;
+      this.appendContainer();
+      this.show();
+    }
+  }
+
+  onAnimationEnd({ toState }) {
+    if (toState === 'void') {
+      this.hide(false);
+    }
+  }
+
+  appendContainer() {
+    if (this.appendToBody) {
+      this.renderer.appendChild(this.document.body, this._container);
+    }
+  }
+
+  close(event: Event) {
+    event.preventDefault();
+    this.hide();
+    this.visible = false;
+    this.visibleChange.emit(false);
+    if (this.clearOnCLose) {
+      this._container = null;
+    }
+  }
+
+  show() {
+    this.enableOverLay();
+    this.onShow.emit(null);
+    this.visibleChange.emit(true);
+  }
+
+  hide(emit: boolean = true) {
+    if (emit) {
+      this.onHide.emit(null);
+    }
+
+    this.disableOverlay();
+  }
+
+  enableOverLay() {
+    if (!this._mask) {
+      this._mask = this.renderer.createElement('div');
+      this.renderer.setStyle(
+        this._mask,
+        'zIndex',
+        'calc(var(--notification-sidebar-z-index, 1050) - 1)'
+      );
+      this.renderer.addClass(this._mask, 'notification-sidebar__overlay');
+      this._maskClickListener = this.renderer.listen(this._mask, 'click', (event: any) => {
+        this.close(event);
+      });
+      this.renderer.appendChild(this.document.body, this._mask);
+    }
+  }
+
+  disableOverlay() {
+    if (this._mask) {
+      this.renderer.removeChild(this.document.body, this._mask);
+      this._mask = null;
+    }
+    if (this._maskClickListener) {
+      this._maskClickListener();
+      this._maskClickListener = null;
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.visible) {
+      this.disableOverlay();
+    }
+    this._container = null;
+  }
+}

package/src/lib/components/notifications/constants/date.ts

@@ -0,0 +1,7 @@
+export const FILTER_DATES_TYPE = {
+  lastDay: 'from_now-24H_to_now',
+  lastWeek: 'from_now-7d_to_now',
+  lastMonth: 'from_now-1M_to_now',
+  lastHalfYear: 'from_now-6M_to_now',
+  lastYear: 'from_now-1y_to_now',
+} as const;

package/src/lib/components/notifications/constants/pagination.ts

@@ -0,0 +1,4 @@
+export const PAGINATION_MODE = {
+  scroll: 'scroll',
+  navigator: 'navigator',
+} as const;

package/src/lib/components/notifications/constants/panel.ts

@@ -0,0 +1,4 @@
+export const PANEL_MODE = {
+  panel: 'panel',
+  sidebar: 'sidebar',
+} as const;

package/src/lib/components/notifications/constants/status.ts

@@ -0,0 +1,10 @@
+export const NOTIFICATION_STATUS = {
+  new: 'New',
+  read: 'Read',
+  unRead: 'UnRead',
+} as const;
+
+export const SUBSCRIPTION_STATE = {
+  subscribed: 'Subscribed',
+  unsubscribed: 'Unsubscribed',
+} as const;

package/src/lib/components/notifications/containers/index.ts

@@ -0,0 +1,2 @@
+export * from './notifications-list-container/notifications-list-container.component'
+export * from './notifications-settings-container/notifications-settings-container.component'