nuxeo-development-framework 4.1.4 → 4.1.6

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

@@ -0,0 +1,41 @@
+.notification-button {
+  font-size: var(--not-btn-font-size, 1.5rem);
+  width: var(--not-btn-width, 40px);
+}
+
+.notification-list-panel {
+  --width: var(--nos-panel-width, min(80vw, 450px));
+  width: var(--width);
+  border-radius: var(--nos-panel-radius, 5px);
+  overflow: hidden;
+  -webkit-overflow-scrolling: touch;
+  outline: 0;
+  background: var(--nos-panel-background, #fff);
+  &.mat-menu-panel {
+    max-width: var(--width);
+    max-height: var(--nos-panel-max-height, var(--height));
+  }
+  &__navigate-btn {
+    background: var(--not-btn-background, transparent);
+    border-radius: var(--not-btn-radius, 5px);
+    padding: var(--not-btn-padding, 0.5rem 1rem);
+    margin: var(--not-btn-margin, 0.5rem 0);
+    color: var(--not-btn-color, currentColor);
+    width: var(--not-btn-width,90%);
+    &:hover {
+      --not-btn-background: var(--not-btn-hover-background, #f0f0f0);
+      --not-btn-color: var(--not-btn-hover-color);
+      text-decoration: var(--not-btn-decoration, none);
+    }
+    &:active {
+      --not-btn-background: var(--not-btn-active-background, #e2e2e2);
+      --not-btn-color: var(--not-btn-active-color);
+    }
+  }
+}
+
+
+.notifications-sidebar{
+  --nto-list-header-padding : var(--sidebar-list-header-padding , 1rem);
+  --nto-list-height : var(--sidebar-list-height , calc(100vh - 100px));
+}

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

@@ -0,0 +1,143 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChild,
+  EventEmitter,
+  Inject,
+  Injector,
+  Input,
+  Optional,
+  Output,
+  TemplateRef,
+  ViewEncapsulation,
+} from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { map, switchMap, takeUntil } from 'rxjs/operators';
+import { TranslationService } from '../../../../core/services/translation/translation.service';
+import { CustomToastrService } from '../../../custom-toastr/services/custom-toastr.service';
+import { PANEL_MODE } from '../../constants';
+import { NOTIFICATION_ICON } from '../../directives';
+import {
+  BadgeOptions,
+  NotificationMessageModel,
+  NotificationModel,
+  NotificationPanelMode,
+  NOTIFICATIONS_LIST_OPTIONS,
+  NotificationsListOptions,
+} from '../../models';
+import { BaseNotification } from '../base-notifications.component';
+
+@Component({
+  selector: 'app-notifications-button',
+  templateUrl: './notifications-button.component.html',
+  styleUrls: ['./notifications-button.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: 'inline-flex justify-center items-center notification-button',
+  },
+})
+export class NotificationsButtonComponent extends BaseNotification {
+  private readonly _getCountSub = new BehaviorSubject(null);
+  private readonly _showBadgeSub = new BehaviorSubject(false);
+  readonly showBadge$ = this._showBadgeSub.asObservable();
+
+  isSidebarOpened = false;
+
+  @Input() styleClass: string = '';
+
+  @Input() badgeOptions: BadgeOptions = {
+    size: 'small',
+    color: 'warn',
+    position: 'before',
+  };
+
+  direction$ = this._translationService.isArabic$.pipe(
+    map((isArabic) => (isArabic ? 'rtl' : 'ltr'))
+  );
+
+  sidebarPosition$ = this._translationService.isArabic$.pipe(
+    map((isArabic) => (isArabic ? 'left' : 'right'))
+  );
+
+  @Output() listItemClick = new EventEmitter<NotificationModel>();
+  @Output() openSettings = new EventEmitter<Event>();
+  @Output() openNotifications = new EventEmitter<Event>();
+  @Output() onNotification = new EventEmitter<NotificationMessageModel>();
+
+  @ContentChild(NOTIFICATION_ICON, { read: TemplateRef, static: true })
+  customIconTemplate: TemplateRef<any> | undefined;
+
+  readonly newNotificationCount$ = this._getCountSub.asObservable();
+
+  panelMode: NotificationPanelMode = PANEL_MODE.sidebar;
+  panelModeEnum = PANEL_MODE;
+  constructor(
+    protected inject: Injector,
+    private _translationService: TranslationService,
+    private _toasterService: CustomToastrService,
+    private _cdr: ChangeDetectorRef,
+    @Optional()
+    @Inject(NOTIFICATIONS_LIST_OPTIONS)
+    _options?: NotificationsListOptions
+  ) {
+    super(inject);
+    if (_options?.panelMode) {
+      this.panelMode = _options.panelMode;
+    }
+    this._socketListener();
+    this.refreshUnreadCount();
+  }
+
+  hideBadgeCount() {
+    this._showBadgeSub.next(false);
+  }
+
+  markAllAsUnread() {
+    this.notificationsService
+      .markAllNewAsUnread()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((res) => {
+        this.refreshUnreadCount();
+      });
+  }
+
+  toggleSideBar(value = !this.isSidebarOpened) {
+    this.isSidebarOpened = value;
+  }
+
+  refreshUnreadCount() {
+    this.notificationsService
+      .getUnReadCount()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((count) => {
+        this._showBadgeSub.next(count > 0);
+        this._getCountSub.next(count >= 100 ? '99+' : count);
+        this._cdr.detectChanges();
+      });
+  }
+
+  private _socketListener() {
+    this.notificationsService.listenerObserver
+      .pipe(
+        switchMap((res) => {
+          const isAr = this._translationService.isArabic.getValue();
+          return this._toasterService
+            .showToast({
+              type: 'info',
+              title: 'notifications.newNotification',
+              customContent: isAr ? res.arabicMessage : res.englishMessage,
+            })
+            .onTap.pipe(map(() => res));
+        }),
+        takeUntil(this.destroy$)
+      )
+      .subscribe((res) => {
+        this.refreshUnreadCount();
+        if (res?.clickable) {
+          this.onNotification.emit(res);
+        }
+      });
+  }
+}

package/src/lib/components/notifications/components/notifications-date-select/notifications-date-select.component.html

@@ -0,0 +1,38 @@
+<span [dir]="direction$ | async">
+  <button
+    (click)="$event.stopPropagation()"
+    class="date-select-button"
+    mat-stroked-button
+    [matMenuTriggerFor]="datesMenu"
+    #filterTypeMenuTrigger="matMenuTrigger"
+  >
+    <span>
+      {{
+        (selectedDate
+          ? 'notifications.dates.' + selectedDate.key
+          : 'notifications.dates.all'
+        ) | translate
+      }}
+    </span>
+    <span class="icon icon-chevron-down"></span>
+  </button>
+  <mat-menu class="dates-select-menu" #datesMenu="matMenu">
+    <span (click)="$event.stopPropagation()">
+      <button
+        mat-menu-item
+        class="dates-select-menu__option"
+        (click)="selectDate(null); datesMenu.closed.emit()"
+      >
+        <span>{{ 'notifications.dates.all' | translate }}</span>
+      </button>
+      <button
+        mat-menu-item
+        *ngFor="let date of dates"
+        class="dates-select-menu__option"
+        (click)="selectDate(date); datesMenu.closed.emit()"
+      >
+        <span>{{ 'notifications.dates.' + date.key | translate }}</span>
+      </button>
+    </span>
+  </mat-menu>
+</span>

package/src/lib/components/notifications/components/notifications-date-select/notifications-date-select.component.scss

@@ -0,0 +1,24 @@
+ .dates-select-menu {
+  box-shadow: var(--dates-select-menu-shadow, 0px 1px 4px -1px rgba(28, 52, 84, 0.26));
+
+  .mat-menu-content {
+    &:not(:empty) {
+      padding: var(--dates-select-menu-padding, 0.5rem);
+    }
+  }
+  &__option {
+    background: var(--dates-select-option-background, transparent) !important;
+    border-radius: var(--dates-select-option-radius, 4px);
+    font-size: var(--dates-select-option-size, 14px);
+    color: var(--dates-select-option-color, #28282d);
+    height: var(--dates-select-option-height, 38px);
+    line-height: var(--dates-select-option-line-height, 38px);
+    &:hover {
+      --dates-select-option-background: var(--dates-select-option-hover-background, #e6f7ff);
+      --dates-select-option-color: var(--dates-select-option-hover-color, #005fdb);
+    }
+    .mat-icon{
+      color: currentColor;
+    }
+  }
+}

package/src/lib/components/notifications/components/notifications-date-select/notifications-date-select.component.ts

@@ -0,0 +1,69 @@
+import { KeyValue } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Output,
+  ViewEncapsulation,
+} from '@angular/core';
+import * as moment from 'moment';
+import { map } from 'rxjs/operators';
+import { TranslationService } from '../../../../core/services/translation/translation.service';
+import { FILTER_DATES_TYPE } from '../../constants';
+import { FilterDateType } from '../../models';
+import { BaseNotification } from '../base-notifications.component';
+@Component({
+  selector: 'app-notifications-date-select',
+  templateUrl: './notifications-date-select.component.html',
+  styleUrls: ['./notifications-date-select.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NotificationsDateSelectComponent extends BaseNotification {
+  protected readonly _translationService = this.inject.get(TranslationService);
+
+  readonly direction$ = this._translationService.isArabic$.pipe(
+    map((isArabic) => (isArabic ? 'rtl' : 'ltr'))
+  );
+
+  @Output() dateChanged = new EventEmitter<{ min: string; max: string }>();
+
+  dates = this._prepareDateList();
+
+  selectedDate: KeyValue<string, FilterDateType>;
+
+  private _prepareDateList(): KeyValue<string, FilterDateType>[] {
+    return Object.entries(FILTER_DATES_TYPE).map(([key, value]) => ({ key, value }));
+  }
+
+  selectDate(date: KeyValue<keyof typeof FILTER_DATES_TYPE, FilterDateType>) {
+    this.selectedDate = date;
+    moment.locale('en');
+    this.dateChanged.emit(
+      date
+        ? {
+            min: this._getMinDate(date.key),
+            max: moment().format(),
+          }
+        : null
+    );
+  }
+
+  private _getMinDate(date: keyof typeof FILTER_DATES_TYPE) {
+    if (!date) {
+      return;
+    }
+    const dates: Record<
+      keyof typeof FILTER_DATES_TYPE,
+      [number, moment.DurationInputArg2]
+    > = {
+      lastDay: [1, 'days'],
+      lastWeek: [1, 'weeks'],
+      lastMonth: [1, 'months'],
+      lastHalfYear: [6, 'months'],
+      lastYear: [1, 'years'],
+    };
+    const [amount, unit] = dates[date];
+    return moment().subtract(amount, unit).startOf('day').format();
+  }
+}

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

@@ -0,0 +1,94 @@
+<div class="notifications-list">
+  <div class="notifications-list__header">
+    <span *ngIf="options.title">
+      <strong class="notifications-list__title">{{ options.title | translate }}</strong>
+    </span>
+    <div class="notifications-list__actions">
+      <ng-container *ngIf="options?.filters?.active">
+        <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>
+      </ng-container>
+
+      <app-notifications-list-actions
+        [options]="options.actions"
+        [direction]="direction$ | async"
+        (markAllAsRead)="markAllAsRead($event)"
+        (openNotifications)="openNotifications.emit($event)"
+        (openSettings)="openSettings.emit($event)"
+      ></app-notifications-list-actions>
+    </div>
+  </div>
+  <div
+    *ngIf="response$ | async as response; else loading"
+    class="notifications-list__body"
+    infiniteScroll
+    [scrollWindow]="false"
+    [infiniteScrollDistance]="options.scroll?.distance || 2"
+    [infiniteScrollThrottle]="options.scroll?.throttle || 300"
+    (scrolled)="onScrollDown()"
+  >
+    <ng-container *ngIf="response.data?.length; else noData">
+      <app-notification-item
+        *ngFor="let item of response.data; trackBy: trackByFn"
+        [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-container>
+    <mat-spinner
+      *ngIf="isLoadingResult"
+      class="notifications-list__loader mt-2 mx-auto"
+      [diameter]="48"
+    ></mat-spinner>
+  </div>
+</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 #loading>
+  <div class="no-notifications text-center p-3">
+    <p>{{ 'notifications.loading_notification' | translate }}</p>
+  </div>
+</ng-template>

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

@@ -0,0 +1,38 @@
+.notifications-list {
+  padding: var(--nto-list-padding, 0);
+  &__header {
+    padding: var(--nto-list-header-padding, 0.5rem);
+    display: var(--nto-list-header-display, flex);
+    justify-content: var(--nto-list-header-justify, space-between);
+    align-items: var(--nto-list-header-align-items, center);
+    box-sizing: border-box;
+    background:var(--nto-list-header-background, transparent); ;
+    color:var(--nto-list-header-color, currentColor); ;
+  }
+
+  &__title {
+    color: var(--nto-list-title-color, #234990);
+    font-size: var(--nto-list-title-size, 1rem);
+    font-weight: var(--nto-list-title-weight, 600);
+  }
+
+  &__actions {
+    display: var(--nto-container-filters-display, flex);
+    gap: var(--nto-container-filters-gap, 0.5rem);
+  }
+
+  &__loader {
+    display: grid;
+    place-items: center;
+  }
+
+  &__body {
+    height: var(--nto-list-height, 60vh);
+    overflow-y: auto;
+  }
+}
+
+.no-notifications {
+  color: var(--no-notifications-color, #b4bac6);
+  font-size: var(--no-notifications-size, 1rem);
+}

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

@@ -0,0 +1,76 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Inject,
+  Injector,
+  OnInit,
+  Optional,
+  Output,
+} from '@angular/core';
+import _ from 'lodash';
+import { NOTIFICATION_STATUS } from '../../constants';
+import {
+  FilterDateType,
+  NOTIFICATIONS_LIST_OPTIONS,
+  NotificationsListOptions,
+} from '../../models';
+
+import { ParamsService } from '../../services/params.service';
+import { ResponseService } from '../../services/response.service';
+import { BaseListNotifications } from '../base-list-notfications.component';
+import { DEFAULT_LIST_OPTIONS } from './options';
+
+@Component({
+  selector: 'app-notifications-list',
+  templateUrl: './notifications-list.component.html',
+  styleUrls: ['./notifications-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [ParamsService, ResponseService],
+})
+export class NotificationsListComponent extends BaseListNotifications implements OnInit {
+  @Output() openSettings = new EventEmitter<Event>();
+  @Output() openNotifications = new EventEmitter<Event>();
+
+  constructor(
+    protected inject: Injector,
+    @Optional()
+    @Inject(NOTIFICATIONS_LIST_OPTIONS)
+    _options?: NotificationsListOptions
+  ) {
+    super(inject);
+    this.options = _.merge(DEFAULT_LIST_OPTIONS, _options ? _options : {});
+    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 } : {}),
+    });
+  }
+
+  statusChanged({ checked }) {
+    this._applyFilter({
+      currentPageIndex: 0,
+      ...(checked ? { notfnotificationcontent_status: NOTIFICATION_STATUS.read } : {}),
+    });
+  }
+
+  dateChanged(date: FilterDateType | null) {
+    this._applyFilter({
+      currentPageIndex: 0,
+      ...(date ? { dublincore_created_agg: [date] } : {}),
+    });
+  }
+}

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

@@ -0,0 +1,25 @@
+import { PAGINATION_MODE, PANEL_MODE } from '../../constants';
+import { NotificationsListOptions } from '../../models';
+
+export const DEFAULT_LIST_OPTIONS: NotificationsListOptions = {
+  title: 'notifications.notifications',
+  pageSize: 20,
+  panelMode: PANEL_MODE.sidebar,
+  paginationMode : PAGINATION_MODE.scroll,
+  filters: {
+    active: true,
+    state: false,
+    date: false,
+    type: true,
+  },
+  actions: {
+    active: true,
+    openNotification: true,
+    openSetting: true,
+    updateState: true,
+  },
+  scroll: {
+    distance: 2,
+    throttle: 300,
+  },
+};

package/src/lib/components/notifications/components/notifications-list-actions/notifications-list-actions.component.html

@@ -0,0 +1,40 @@
+<span [dir]="direction" *ngIf="options?.active">
+  <button
+    [matMenuTriggerFor]="actions"
+    mat-icon-button
+    (click)="$event.stopPropagation()"
+  >
+    <mat-icon>more_horiz</mat-icon>
+  </button>
+  <mat-menu #actions="matMenu" class="notifications-actions-menu">
+    <span (click)="closeMenu($event, actions)">
+      <button
+        *ngIf="options.updateState"
+        mat-menu-item
+        class="notifications-actions-menu__action"
+        (click)="markAllAsRead.emit($event)"
+      >
+        <mat-icon>done_all</mat-icon>
+        <span>{{ 'notifications.markAllAsRead' | translate }}</span>
+      </button>
+      <button
+        *ngIf="options.openSetting"
+        mat-menu-item
+        class="notifications-actions-menu__action"
+        (click)="openSettings.emit($event)"
+      >
+        <mat-icon>tune</mat-icon>
+        <span>{{ 'notifications.notificationSettings' | translate }}</span>
+      </button>
+      <button
+        *ngIf="options.openNotification"
+        mat-menu-item
+        class="notifications-actions-menu__action"
+        (click)="openNotifications.emit($event)"
+      >
+        <mat-icon>open_in_browser</mat-icon>
+        <span>{{ 'notifications.openNotifications' | translate }}</span>
+      </button>
+    </span>
+  </mat-menu>
+</span>

package/src/lib/components/notifications/components/notifications-list-actions/notifications-list-actions.component.scss

@@ -0,0 +1,24 @@
+.notifications-actions-menu {
+  box-shadow: var(--n-actions-menu-shadow, 0px 1px 4px -1px rgba(28, 52, 84, 0.26));
+
+  .mat-menu-content {
+    &:not(:empty) {
+      padding: var(--n-actions-menu-padding, 0.5rem);
+    }
+  }
+  &__action {
+    background: var(--n-menu-action-background, transparent) !important;
+    border-radius: var(--n-menu-action-radius, 4px);
+    font-size: var(--n-menu-action-size, 14px);
+    color: var(--n-menu-action-color, #28282d);
+    height: var(--n-menu-action-height, 40px);
+    line-height: var(--n-menu-action-line-height, 40px);
+    &:hover {
+      --n-menu-action-background: var(--n-menu-action-hover-background, #e6f7ff);
+      --n-menu-action-color: var(--n-menu-action-hover-color, #005fdb);
+    }
+    .mat-icon{
+      color: currentColor;
+    }
+  }
+}

package/src/lib/components/notifications/components/notifications-list-actions/notifications-list-actions.component.ts

@@ -0,0 +1,31 @@
+import { Direction } from '@angular/cdk/bidi';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewEncapsulation,
+} from '@angular/core';
+import { MatMenu } from '@angular/material/menu';
+import { NotificationsListOptions } from '../../models';
+
+@Component({
+  selector: 'app-notifications-list-actions',
+  templateUrl: './notifications-list-actions.component.html',
+  styleUrls: ['./notifications-list-actions.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NotificationsListActionsComponent {
+  @Input() options: NotificationsListOptions['actions'];
+  @Input() direction: Direction = 'rtl';
+  @Output() markAllAsRead = new EventEmitter<Event>();
+  @Output() openSettings = new EventEmitter<Event>();
+  @Output() openNotifications = new EventEmitter<Event>();
+
+  closeMenu(event: Event, menu: MatMenu) {
+    event.stopPropagation();
+    menu.closed.emit();
+  }
+}

package/src/lib/components/notifications/components/notifications-settings/check-if-subscribed.pipe.ts

@@ -0,0 +1,39 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { SUBSCRIPTION_STATE } from '../../constants';
+import {
+  NotificationDefinitionPresenter,
+  NotificationSubscriptionPresenter,
+} from '../../models';
+
+@Pipe({
+  name: 'checkIfSubscribed',
+})
+export class CheckIfSubscribedPipe implements PipeTransform {
+  transform(
+    definition: NotificationDefinitionPresenter,
+    subscriptions: NotificationSubscriptionPresenter[]
+  ): boolean {
+    if (!definition || !Array.isArray(subscriptions)) {
+      return false;
+    }
+
+    const _subscription = subscriptions.find((sub) => {
+      return (
+        sub.channel == definition.channel &&
+        sub.applicationKey == definition.applicationKey &&
+        sub.notificationKey == definition.notificationKey
+      );
+    });
+
+    if (
+      _subscription &&
+      Object.values(SUBSCRIPTION_STATE).includes(_subscription?.state)
+    ) {
+      return _subscription.state === SUBSCRIPTION_STATE.subscribed;
+    }
+
+
+
+    return !!definition?.sentByDefault;
+  }
+}