nuxeo-development-framework 4.1.6 → 4.1.7

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

@@ -1,41 +0,0 @@
-.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

@@ -1,143 +0,0 @@
-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

@@ -1,38 +0,0 @@
-<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

@@ -1,24 +0,0 @@
- .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

@@ -1,69 +0,0 @@
-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

@@ -1,94 +0,0 @@
-<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

@@ -1,38 +0,0 @@
-.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

@@ -1,76 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,40 +0,0 @@
-<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

@@ -1,24 +0,0 @@
-.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

@@ -1,31 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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;
-  }
-}