nuxeo-development-framework 4.1.4 → 4.1.6

package/src/lib/components/notifications/containers/notifications-list-container/notifications-list-container.component.html

@@ -0,0 +1,133 @@
+<div class="notifications-container {{ styleClass }}">
+  <div class="notifications-container__header">
+    <span class="notifications-container__title">
+      <span *ngIf="options.title"> {{ options.title | translate }}</span>
+    </span>
+    <div class="notifications-container__filters" *ngIf="showFilters">
+      <app-notification-source-select
+        *ngIf="options?.filters?.type"
+        (typeChanged)="typeChanged($event)"
+      ></app-notification-source-select>
+      <app-notifications-date-select
+        *ngIf="options?.filters?.date"
+        (dateChanged)="dateChanged($event)"
+      ></app-notifications-date-select>
+      <app-notification-status-toggle
+        *ngIf="options?.filters?.state"
+        (statusChanged)="statusChanged($event)"
+      ></app-notification-status-toggle>
+    </div>
+  </div>
+
+  <ng-container *ngIf="response$ | async as response">
+    <ng-container
+      [ngTemplateOutlet]="
+        paginationMode == paginationModeEnum.scroll
+          ? scrollModeTemplate
+          : paginationModeTemplate
+      "
+      [ngTemplateOutletContext]="{ $implicit: response }"
+    ></ng-container>
+  </ng-container>
+
+  <ng-template #scrollModeTemplate let-response>
+    <div
+      class="notifications-container__body"
+      infiniteScroll
+      [scrollWindow]="options.scroll?.scrollWindow"
+      [infiniteScrollDistance]="options.scroll?.distance || 2"
+      [infiniteScrollThrottle]="options.scroll?.throttle || 300"
+      (scrolled)="onScrollDown()"
+    >
+      <ng-container *ngIf="response.data?.length; else noData">
+        <ng-container
+          *ngFor="let item of response.data; trackBy: trackByFn"
+          [ngTemplateOutlet]="customItemTemplate || defaultItemTemplate"
+          [ngTemplateOutletContext]="{
+            $implicit: item,
+            markAsUnread: markAsUnread,
+            markAsRead: markAsRead,
+            markAsDeleted: markAsDeleted
+          }"
+        >
+        </ng-container>
+      </ng-container>
+
+      <mat-spinner
+        [diameter]="48"
+        class="notifications-container__loader mt-2 mx-auto"
+        *ngIf="isLoadingResult"
+      ></mat-spinner>
+    </div>
+  </ng-template>
+
+  <ng-template #paginationModeTemplate let-response>
+    <div
+      class="notifications-container__body--pagination mb-3"
+      *ngIf="response.data?.length; else noData"
+    >
+      <ng-container
+        *ngFor="let item of response.data; trackBy: trackByFn"
+        [ngTemplateOutlet]="customItemTemplate || defaultItemTemplate"
+        [ngTemplateOutletContext]="{
+          $implicit: item,
+          markAsUnread: markAsUnread,
+          markAsRead: markAsRead,
+          markAsDeleted: markAsDeleted
+        }"
+      >
+      </ng-container>
+      <div class="notifications-container__pagination-loader" *ngIf="isLoadingResult">
+        <mat-spinner [diameter]="48"></mat-spinner>
+      </div>
+    </div>
+
+    <cts-pagination
+      [page]="selectedPage + 1"
+      (change)="changePage($event - 1)"
+      [size]="options.pageSize"
+      [count]="response.totalItems"
+    >
+    </cts-pagination>
+  </ng-template>
+</div>
+
+<ng-template #filters>
+  <button
+    (click)="$event.stopPropagation()"
+    class="type-filter-trigger"
+    [matMenuTriggerFor]="filterTypeMenu"
+    #filterTypeMenuTrigger="matMenuTrigger"
+  >
+    {{ 'notifications.all' | translate }}
+    <span class="icon icon-chevron-down"></span>
+  </button>
+  <mat-menu class="new-menu-design" #filterTypeMenu="matMenu">
+    <div (click)="$event.stopPropagation()">
+      <div class="single-menu-action notification-filter-menu-item">
+        {{ 'notifications.' + type.name | translate }}
+      </div>
+    </div>
+  </mat-menu>
+</ng-template>
+
+<ng-template #noData>
+  <div class="no-notifications text-center p-3">
+    <p>
+      {{ 'notifications.noNotifications' | translate }}
+    </p>
+  </div>
+</ng-template>
+
+<ng-template #defaultItemTemplate let-item>
+  <app-notification-item
+    [iconOptions]="options?.icons"
+    [notification]="item"
+    [currentLang]="currentLang"
+    [class.cursor-pointer]="item.properties?.['notf_nt:isClickable']"
+    (click)="onItemClick(item)"
+    (markAsUnread)="markAsUnread(item)"
+    (markAsRead)="markAsRead(item)"
+    (markAsDeleted)="markAsDeleted(item)"
+  ></app-notification-item>
+</ng-template>

package/src/lib/components/notifications/containers/notifications-list-container/notifications-list-container.component.scss

@@ -0,0 +1,56 @@
+.notifications-container {
+  padding: var(--nto-container-padding, 0);
+
+  &__header {
+    padding: var(--nto-container-header-padding, 0.5rem);
+    display: var(--nto-container-header-display, flex);
+    justify-content: var(--nto-container-header-justify, space-between);
+    align-items: var(--nto-container-header-align-items, center);
+    box-sizing: border-box;
+  }
+
+  &__title {
+    color: var(--nto-container-title-color, #2f258a);
+    font-size: var(--nto-container-title-size, 1.1rem);
+    font-weight: var(--nto-container-title-weight, normal);
+  }
+
+  &__filters {
+    display: var(--nto-container-filters-display, flex);
+    gap: var(--nto-container-filters-gap, 0.5rem);
+  }
+
+  &__body {
+    position: relative;
+    height: var(--nto-container-height, 74vh);
+    overflow-y: auto;
+    &--pagination {
+      --nto-container-height: var(--nto-container-pagination-height, auto);
+    }
+  }
+
+  &__loader {
+    display: grid;
+    place-items: center;
+  }
+
+  &__pagination-loader {
+    display: grid;
+    place-items: center;
+    position: absolute;
+    inset: 0 0;
+    width: 100%;
+    height: 100%;
+    background: var(--nto-pagination-background, rgba(255, 255, 255, 0.4));
+  }
+}
+
+.no-notifications {
+  min-height: var(--no-notifications-min-height, 0);
+  display: var(--no-notifications-display, flex);
+  flex-direction: var(--no-notifications-direction, column);
+  justify-content: var(--no-notifications-justify, center);
+  align-items: var(--no-notifications-items, center);
+  color: var(--no-notifications-color, #b4bac6);
+  font-size: var(--no-notifications-size, 1rem);
+}

package/src/lib/components/notifications/containers/notifications-list-container/notifications-list-container.component.ts

@@ -0,0 +1,116 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  Inject,
+  Injector,
+  Input,
+  OnInit,
+  Optional,
+  TemplateRef,
+} from '@angular/core';
+
+import _ from 'lodash';
+import { switchMap } from 'rxjs/operators';
+import { BaseListNotifications } from '../../components/base-list-notfications.component';
+import { NOTIFICATION_STATUS, PAGINATION_MODE } from '../../constants';
+import { NOTIFICATION_ITEM } from '../../directives';
+import { NOTIFICATIONS_LIST_OPTIONS, NotificationsListOptions } from '../../models';
+import { ParamsService } from '../../services/params.service';
+import { ResponseService } from '../../services/response.service';
+import { DEFAULT_CONTAINER_OPTIONS } from './options';
+
+@Component({
+  selector: 'app-notifications-list-container',
+  templateUrl: './notifications-list-container.component.html',
+  styleUrls: ['./notifications-list-container.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [ParamsService, ResponseService],
+})
+export class NotificationsListContainerComponent
+  extends BaseListNotifications
+  implements OnInit
+{
+  @Input() styleClass: string = '';
+
+  private _showFilters: boolean | undefined;
+
+  @Input() set showFilters(value: boolean) {
+    this._showFilters = value;
+  }
+
+  get showFilters() {
+    if (typeof this._showFilters === 'boolean') {
+      return this._showFilters;
+    }
+    return this.options?.filters?.active;
+  }
+
+  @Input() set criteria(query: Record<string, any>) {
+    if (query) {
+      this._applyFilter({
+        currentPageIndex: 0,
+        ...query,
+      });
+    }
+  }
+
+  paginationMode: NotificationsListOptions['paginationMode'] = PAGINATION_MODE.navigator;
+
+  get selectedPage() {
+    return this._responseService.selectedPage;
+  }
+
+  @ContentChild(NOTIFICATION_ITEM, { read: TemplateRef, static: true })
+  customItemTemplate: TemplateRef<any> | undefined;
+
+  constructor(
+    protected inject: Injector,
+    @Optional()
+    @Inject(NOTIFICATIONS_LIST_OPTIONS)
+    _options?: NotificationsListOptions
+  ) {
+    super(inject);
+    this.options = _.merge(DEFAULT_CONTAINER_OPTIONS, _options ? _options : {});
+    this.paginationMode = this.options?.paginationMode || 'navigator';
+    this._paramsService.setDefaultParams({
+      pageSize: this.options.pageSize || 20,
+      sortBy: 'dc:created',
+      sortOrder: 'desc',
+    });
+  }
+
+  ngOnInit(): void {
+    this._prepareLanguage();
+    this._prepareData();
+    this._paramsService.applyParams();
+  }
+
+  typeChanged(event: string) {
+    this._applyFilter({
+      currentPageIndex: 0,
+      ...(event ? { notf_notification_sourceTypee: event } : {}),
+      ...(this.criteria ? this.criteria : {}),
+    });
+  }
+
+  statusChanged({ checked }) {
+    this._applyFilter({
+      currentPageIndex: 0,
+      ...(checked ? { notfnotificationcontent_status: NOTIFICATION_STATUS.read } : {}),
+      ...(this.criteria ? this.criteria : {}),
+    });
+  }
+
+  dateChanged(date: { min: string; max: string } | null) {
+    const payload_date = date
+      ? { dublincore_created_min: date.min, dublincore_created_max: date.max }
+      : {};
+
+    this._applyFilter({
+      currentPageIndex: 0,
+      ...payload_date,
+      ...(this.criteria ? this.criteria : {}),
+    });
+  }
+}

package/src/lib/components/notifications/containers/notifications-list-container/options.ts

@@ -0,0 +1,19 @@
+import { PAGINATION_MODE } from '../../constants';
+import { NotificationsListOptions } from '../../models';
+
+export const DEFAULT_CONTAINER_OPTIONS: NotificationsListOptions = {
+  title: 'notifications.list',
+  pageSize: 20,
+  paginationMode: PAGINATION_MODE.navigator,
+  filters: {
+    active: true,
+    state: true,
+    date: true,
+    type: true,
+  },
+  scroll: {
+    scrollWindow: false,
+    distance: 2,
+    throttle: 300,
+  },
+};

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

@@ -0,0 +1,45 @@
+<div class="notifications-settings">
+  <nav
+    mat-tab-nav-bar
+    *ngIf="channels$ | async as channels"
+    class="notifications-settings__links"
+  >
+    <a
+      *ngFor="let channel of channels"
+      mat-tab-link
+      (click)="selectChannel(channel)"
+      [active]="selectedChannel?.id == channel.id"
+      class="notifications-settings__link"
+    >
+      {{
+        'vocabulary.VOC_Notf_NotificationChannels.' + channel.properties.label | translate
+      }}
+    </a>
+  </nav>
+
+  <app-notifications-settings
+    *ngIf="selectedChannel"
+    [channel]="selectedChannel"
+    (onSubscribe)="onSubscribe.emit($event)"
+    (onUnsubscribe)="onUnsubscribe.emit($event)"
+  ></app-notifications-settings>
+
+  <div class="notifications-reset">
+    <h6 class="notifications-reset__title">
+      <mat-icon> restore </mat-icon>
+      <strong>{{ 'notifications.resetToDefault.title' | translate }}</strong>
+    </h6>
+    <span class="notifications-reset__container">
+      <p class="notifications-reset__description">
+        {{ 'notifications.resetToDefault.description' | translate }}
+      </p>
+      <button
+        mat-stroked-button
+        class="notifications-reset__button"
+        (click)="resetSubscriptions()"
+      >
+        <span class="px-4"> {{ 'notifications.resetToDefault.reset' | translate }}</span>
+      </button>
+    </span>
+  </div>
+</div>

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

@@ -0,0 +1,56 @@
+.notifications-settings {
+  --setting-primary-color: #2f258a;
+  &__links {
+    background: var(--set-links-background, transparent);
+    border: var(--set-links-border, solid rgba(0, 0, 0, 0.12));
+    border-width: var(--set-links-border-width, 0 0 1px 0);
+  }
+
+  ::ng-deep {
+    .mat-ink-bar {
+      height: var(--mat-ink-bar-height, 2px);
+      display: var(--mat-ink-bar-display, unset);
+      background-color: var(
+        --mat-ink-bar-background,
+        var(--setting-primary-color)
+      ) !important;
+    }
+  }
+
+  &__link {
+    background: var(--set-link-background, transparent);
+    color: var(--set-link-color, rgba(0, 0, 0, 0.87));
+    border-radius: var(--set-link-radius, 6px);
+    opacity: 1;
+    &:hover {
+      --set-link-color: var(--set-link-hover-color, var(--setting-primary-color));
+      --set-link-background: var(--set-link-hover-background, rgba(221, 221, 221, 0.301));
+    }
+    &.mat-tab-label-active {
+      --set-link-color: var(--set-link-active-color, var(--setting-primary-color));
+      --set-link-background: var(--set-link-active-background, transparent);
+    }
+  }
+}
+
+.notifications-reset {
+  --border: var(--setting-section-border, 1px solid #f0f0f0);
+  border: var(--border);
+  border-radius: var(--setting-section-radius, 6px);
+  padding: var(--settings-section-padding, 1rem);
+  &__title {
+    color: var(--setting-section-title-color, var(--setting-primary-color));
+    display: flex;
+    align-items: center;
+    border-bottom: var(--border);
+    gap: 0.5rem;
+    padding-bottom: 1rem;
+  }
+  &__container {
+    padding-block: 1rem;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+}

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

@@ -0,0 +1,74 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Injector,
+  Output
+} from '@angular/core';
+
+import { MatDialog } from '@angular/material/dialog';
+import { ToastrService } from 'ngx-toastr';
+import { filter, switchMap, take, tap } from 'rxjs/operators';
+import { TranslationService } from '../../../../core/services/translation/translation.service';
+import { ConfirmationDialogComponent } from '../../../confirmation-dialog/confirmation-dialog/confirmation-dialog.component';
+import { BaseNotification } from '../../components/base-notifications.component';
+import { NotificationDefinitionPresenter, VocabularyType } from '../../models';
+
+@Component({
+  selector: 'app-notifications-settings-container',
+  templateUrl: './notifications-settings-container.component.html',
+  styleUrls: ['./notifications-settings-container.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NotificationsSettingsContainerComponent extends BaseNotification {
+  @Output() onSubscribe = new EventEmitter<NotificationDefinitionPresenter>();
+  @Output() onUnsubscribe = new EventEmitter<Record<string, any>>();
+
+  constructor(
+    protected inject: Injector,
+    private _translateService: TranslationService,
+    private _toastrService: ToastrService,
+    private _matDialog: MatDialog
+  ) {
+    super(inject);
+  }
+
+  channels$ = this.notificationsService.getChannels().pipe(
+    tap((res) => {
+      if (Array.isArray(res) && !this.selectedChannel) {
+        this.selectChannel(res[0]);
+      }
+    })
+  );
+
+  selectedChannel: VocabularyType | null;
+  selectChannel(channel: VocabularyType) {
+    this.selectedChannel = channel;
+  }
+
+  resetSubscriptions() {
+    this._matDialog
+      .open(ConfirmationDialogComponent, {
+        data: {
+          title: 'notifications.resetToDefault.resetConfirm',
+          message: 'notifications.resetToDefault.resetConfirmMessage',
+          cancelButton: 'BUTTONS.CANCEL',
+          confirmButton: 'notifications.resetToDefault.reset',
+        },
+        restoreFocus: false,
+      })
+      .afterClosed()
+      .pipe(
+        filter(Boolean),
+        switchMap(() => this.notificationsService.resetSubscriptions()),
+        take(1)
+      )
+      .subscribe((res) => {
+        this.selectChannel({ ...this.selectedChannel } as VocabularyType);
+        this._toastrService.success(
+          this._translateService.instant('notifications.resetToDefault.resetDone'),
+          this._translateService.instant('notifications.notifications')
+        );
+      });
+  }
+}

package/src/lib/components/notifications/directives/button.directive.ts

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

package/src/lib/components/notifications/directives/notification.directive.ts

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

package/src/lib/components/notifications/models/common.ts

@@ -0,0 +1,69 @@
+import { SchemaModel } from '../../../core/models';
+import { FILTER_DATES_TYPE } from '../constants';
+
+export type TranslatedKey = string;
+
+export type FilterDateType = (typeof FILTER_DATES_TYPE)[keyof typeof FILTER_DATES_TYPE];
+
+export interface BaseNotificationEntry {
+  'entity-type': string;
+  repository: string;
+  uid: string;
+  path: string;
+  type: string;
+  state: string;
+  parentRef: string;
+  isCheckedOut: boolean;
+  isRecord: boolean;
+  retainUntil: any;
+  hasLegalHold: boolean;
+  isUnderRetentionOrLegalHold: boolean;
+  isVersion: boolean;
+  isProxy: boolean;
+  changeToken: string;
+  isTrashed: boolean;
+  title: string;
+  lastModified: string;
+  facets: any[];
+  schemas: SchemaModel[];
+}
+
+export interface BaseNotificationProperties {
+  'notf_nt:category': string;
+  'notf_nt:isClickable': boolean;
+  'notf_nt:sourceTypee': string;
+  'notf_nt:key': string;
+  'dc:description': any;
+  'dc:language': any;
+  'dc:coverage': any;
+  'dc:valid': any;
+  'dc:creator': string;
+  'dc:modified': string;
+  'dc:lastContributor': string;
+  'dc:rights': any;
+  'dc:expired': any;
+  'dc:format': any;
+  'dc:created': string;
+  'dc:title': string;
+  'dc:issued': any;
+  'dc:nature': any;
+  'dc:subjects': any[];
+  'dc:contributors': string[];
+  'dc:source': any;
+  'dc:publisher': any;
+  'uid:uid': any;
+  'uid:major_version': number;
+  'uid:minor_version': number;
+  'common:icon-expanded': any;
+  'common:icon': any;
+}
+
+export interface NotificationBaseOptions {
+  schemas: any[];
+  enrichers: Record<string, any>;
+  fetchProperties: Record<string, any>;
+  translateProperties: Record<string, any>;
+  headers: Headers;
+  timeout: number;
+  httpTimeout: number;
+}

package/src/lib/components/notifications/models/notification-definition.model.ts

@@ -0,0 +1,19 @@
+import { BaseNotificationEntry, BaseNotificationProperties } from './common';
+
+export interface NotificationDefinitionModel extends BaseNotificationEntry {
+  properties: DefinitionProperties;
+}
+
+export interface DefinitionProperties extends BaseNotificationProperties {
+  'notif_def:arDescription': any;
+  'notif_def:arTemplate': string;
+  'notif_def:autoSubscription': boolean;
+  'notif_def:enDescription': any;
+  'notif_def:applicationKey': string;
+  'notif_def:enTemplate': string;
+  'notif_def:channel': string;
+  'notif_def:arTitle': string;
+  'notif_def:sentByDefault': boolean;
+  'notif_def:enTitle': string;
+  'notif_def:isActive': boolean;
+}

package/src/lib/components/notifications/models/notification-message.mode.ts

@@ -0,0 +1,13 @@
+export interface NotificationMessageModel {
+  sourceDocumentId: string;
+  sourceDocumentType: string;
+  arabicMessage: string;
+  englishMessage: string;
+  data: string;
+  notificationKey: string;
+  status: string;
+  recipientUser: string;
+  applicationKey: string;
+  company: string;
+  clickable: boolean;
+}

package/src/lib/components/notifications/models/notification-options.ts

@@ -0,0 +1,8 @@
+import { MatBadgePosition, MatBadgeSize } from "@angular/material/badge";
+import { ThemePalette } from "@angular/material/core";
+
+export type BadgeOptions = {
+  size: MatBadgeSize;
+  color: ThemePalette;
+  position: MatBadgePosition;
+};

package/src/lib/components/notifications/models/notification-setting.presenter.ts

@@ -0,0 +1,26 @@
+import { SUBSCRIPTION_STATE } from "../constants";
+
+export interface NotificationDefinitionPresenter {
+  uid: string;
+  sourceType: string;
+  autoSubscription: boolean;
+  isActive: boolean;
+  sentByDefault: boolean;
+  applicationKey: string;
+  channel: string;
+  title: string;
+  arTitle: string;
+  enTitle: string;
+  notificationKey: string;
+  arDescription : string;
+  enDescription : string;
+}
+
+export interface NotificationSubscriptionPresenter {
+  uid: string;
+  applicationKey: string;
+  channel: string;
+  title: string;
+  notificationKey: string;
+  state: (typeof SUBSCRIPTION_STATE)[keyof typeof SUBSCRIPTION_STATE];
+}