nuxeo-development-framework 3.1.1 → 3.1.2

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

@@ -0,0 +1,161 @@
+import { ChangeDetectorRef, Component, EventEmitter, OnDestroy, Output, ViewEncapsulation } from "@angular/core";
+import { DatePipe } from "@angular/common";
+import { NotificationsService } from "../../notifications.service";
+import { TranslationService } from "../../../../Core/services/translation/translation.service";
+
+/**
+ * Notifications Modal Component
+ */
+@Component({
+  selector: "app-notifications-list",
+  templateUrl: "./notifications-list.component.html",
+  styleUrls: ["./notifications-list.component.scss"],
+  host: { class: "notification-list" },
+  encapsulation : ViewEncapsulation.None
+})
+export class NotificationsListComponent implements OnDestroy {
+  @Output()
+  listItemClick = new EventEmitter();
+  get notifications() {
+    return this.notificationsService.notifications;
+  }
+  _itemHeight = 79;
+  get itemHeight(): number {
+    return this._itemHeight;
+  }
+  set itemHeight(value: number) {
+    this._itemHeight = value;
+  }
+  _divider = true;
+  get divider(): boolean {
+    return this._divider;
+  }
+  set divider(value: boolean) {
+    this._divider = value;
+  }
+  _all = true;
+  get all(): boolean {
+    return this._all;
+  }
+  set all(value: boolean) {
+    this._all = value;
+  }
+  _title = "notifications.title";
+  get title(): string {
+    return this._title;
+  }
+  set title(value: string) {
+    this._title = value;
+  }
+  isArabic;
+  throttle = 300;
+  scrollDistance = 7;
+  scrollUpDistance = 2;
+  loading = false;
+  hasMore = true;
+  constructor(
+    public notificationsService: NotificationsService,
+    private ref: ChangeDetectorRef,
+    public datePipe: DatePipe,
+    private translationService: TranslationService
+  ) {}
+  ngOnInit(): void {
+    this.changeContentBasedOnUserLang();
+  }
+  markAllAsRead() {
+    this.notificationsService.markAllAsRead();
+  }
+
+  openNotification(notification) {
+    if (notification.status === "UN_READ" || notification.status === "NEW") {
+      this.notificationsService.updateStatus(notification, true);
+    }
+    this.listItemClick.next(notification);
+    // do something when notification clicked
+  }
+  onUpdate(data) {
+    if (data.notification) {
+      switch (data.action) {
+        case "delete":
+          this.notificationsService.deleteNotification(data.notification);
+          break;
+        case "status":
+          this.notificationsService.updateStatus(data.notification);
+          break;
+      }
+    }
+  }
+  trackBy(index, item) {
+    return item.id;
+  }
+  handleOpen(item) {
+    // this.modalController.dismiss();
+    this.notificationsService.updateStatus(item, true);
+  }
+
+  compareDate = (item, itemIndex, items) => {
+    if (!this.divider) {
+      return null;
+    }
+    const today = new Date();
+    const itemDate = new Date(item.sendDate);
+    const isToday =
+      itemDate.getDate() === today.getDate() &&
+      itemDate.getMonth() === today.getMonth() &&
+      itemDate.getFullYear() === today.getFullYear();
+    const prevItem = items[itemIndex - 1];
+    let isPrevToday = 0;
+    if (prevItem) {
+      const NextItemDate = new Date(prevItem.sendDate);
+      isPrevToday =
+        NextItemDate.getDate() === today.getDate() &&
+        NextItemDate.getMonth() === today.getMonth() &&
+        NextItemDate.getFullYear() === today.getFullYear()
+          ? 2
+          : 1;
+    }
+    if (!isToday && (isPrevToday === 0 || isPrevToday === 2)) {
+      return "notifications.earlier";
+    }
+    if (isToday && (isPrevToday === 0 || isPrevToday === 1)) {
+      return "notifications.new";
+    }
+    return null;
+  };
+
+  getItemHeight = () => {
+    return this.itemHeight;
+  };
+
+  goToDetails(notification) {}
+
+  onScrollDown() {
+    if (this.hasMore) {
+      this.fetchMore();
+    }
+  }
+  fetchMore() {
+    this.loading = true;
+    this.notificationsService.fetchNotifications().subscribe((data) => {
+      this.loading = false;
+      if (
+        data["items"].length === 0 ||
+        data["items"].length < this.notificationsService.pageSize
+      ) {
+        this.hasMore = false;
+      }
+      this.ref.markForCheck();
+    });
+  }
+  ngOnDestroy() {
+    this.notificationsService.reset();
+  }
+  close() {
+    //  this.modalController.dismiss();
+  }
+  changeContentBasedOnUserLang() {
+    this.translationService.isArabic.subscribe((ar) => {
+      this.isArabic = ar;
+    });
+  }
+}

package/src/lib/components/notifications/interceptors/token.interceptor.ts

@@ -0,0 +1,37 @@
+import {
+  HttpInterceptor,
+  HttpRequest,
+  HttpHandler,
+  HttpEvent,
+  HttpResponse,
+} from '@angular/common/http';
+import { Inject, Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
+
+@Injectable()
+export class TokenInterceptor implements HttpInterceptor {
+  constructor( @Inject('environment') private environment) {}
+  intercept(
+    request: HttpRequest<any>,
+    next: HttpHandler
+  ): Observable<HttpEvent<any>> {
+    const token: string =
+      'eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJvZlRkU01GWVpTWWxQdFhickN3QklsNFBxQkY4U1pxQXZuQWt2b29YLWlnIn0.eyJleHAiOjE2MTkzODU0NDMsImlhdCI6MTYxOTM0OTc0OSwiYXV0aF90aW1lIjoxNjE5MzQ5NDQzLCJqdGkiOiI0MDVjZjc5NC1jNGExLTQ1MzQtYjgyNC05MGJkYjcyNTQwZTMiLCJpc3MiOiJodHRwOi8vMy4yMzguMjMwLjM3OjgwODEvYXV0aC9yZWFsbXMvbnV4ZW8iLCJhdWQiOiJhY2NvdW50Iiwic3ViIjoiMGE1NGZiMmYtOGY2ZS00ZjA2LWI1MTYtNWFkNjY3ODBkMGJiIiwidHlwIjoiQmVhcmVyIiwiYXpwIjoibWVldGluZy13ZWIiLCJub25jZSI6IjA3MjZkMTFlLThmODEtNDRkMS04MGE4LTM1NjJkNjE2M2ZjZCIsInNlc3Npb25fc3RhdGUiOiJhMjUxZTBmNy1lOTI3LTQyMDktYjk5OS0wOWQyYmIxMTk3MGUiLCJhY3IiOiIwIiwiYWxsb3dlZC1vcmlnaW5zIjpbIioiXSwicmVhbG1fYWNjZXNzIjp7InJvbGVzIjpbIm9mZmxpbmVfYWNjZXNzIiwiYm1zX3JvbGVfc3lzX1VzZXIiLCJ1bWFfYXV0aG9yaXphdGlvbiJdfSwicmVzb3VyY2VfYWNjZXNzIjp7ImFjY291bnQiOnsicm9sZXMiOlsibWFuYWdlLWFjY291bnQiLCJtYW5hZ2UtYWNjb3VudC1saW5rcyIsInZpZXctcHJvZmlsZSJdfX0sInNjb3BlIjoib3BlbmlkIGVtYWlsIHByb2ZpbGUiLCJlbWFpbF92ZXJpZmllZCI6ZmFsc2UsIm5hbWUiOiJUZGYgU2VjIiwicHJlZmVycmVkX3VzZXJuYW1lIjoidGRmX3NlYyIsImdpdmVuX25hbWUiOiJUZGYiLCJmYW1pbHlfbmFtZSI6IlNlYyIsImVtYWlsIjoidGRmQHRkZGRmLmNvbSJ9.uXD38uUqCYYaaJvcy0BwrQIh_3rUgLAmDEhraD1uZJ0tK0zLdbZl7UnxVBTiu1r2ssQFUhYEEVnJwI4AnOXfq9_O-MieqKVrLqnIqFptHCLpsvE9Xv3VDMhDTJIEEKN55Df5mE35ekZTDEEQ-1xIQ3r8PXiYJI5BsyNvg3XdDCptyToAn_-NumacKK8Hy4ZyQmgbHDFAKCAIfaAazmP_cHJcjMoIEtoH_5Zo91eUNNyEDoCEVyj3urBjp3Y90kuAtILW09HAdZEUmLsF2eCt1ufzySDO7bGF5rS8Pz0YXT8sndrMz59RTuQCwcOdtfR8fvHo9fqmEWwJijBXUWlk2A';
+
+    if (request.url.includes(this.environment.notifications)) {
+      if (token) {
+        request = request.clone({
+          headers: request.headers.set('Authorization', 'Bearer ' + token),
+        });
+      }
+    }
+    return next.handle(request).pipe(
+      map((event: HttpEvent<any>) => {
+        if (event instanceof HttpResponse) {
+        }
+        return event;
+      })
+    );
+  }
+}

package/src/lib/components/notifications/notifications.module.ts

@@ -0,0 +1,67 @@
+import { CommonModule, DatePipe } from '@angular/common';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { NotificationItemComponent } from './components/notification-item/notification-item.component';
+import { NotificationOptionsComponent } from './components/notification-options/notification-options.component';
+import { NotificationsButtonComponent } from './components/notifications-button/notifications-button.component';
+import { NotificationsListComponent } from './components/notifications-list/notifications-list.component';
+import { NotificationsService } from './notifications.service';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
+import {
+  MatProgressSpinner,
+  MatProgressSpinnerModule,
+} from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { NotificationToastComponent } from './components/notification-toast/notification-toast.component';
+import { PipesModule } from '../../pipes/pipes.module';
+
+/** @ignore */
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule,
+    InfiniteScrollModule,
+    MatListModule,
+    PipesModule,
+    MatMenuModule,
+    MatIconModule,
+    TranslateModule,
+    MatProgressSpinnerModule,
+    MatTooltipModule,
+    InfiniteScrollModule,
+    MatBadgeModule,
+    TranslateModule,
+    MatToolbarModule
+  ],
+  declarations: [
+    NotificationsListComponent,
+    NotificationsButtonComponent,
+    NotificationItemComponent,
+    NotificationOptionsComponent,
+    NotificationToastComponent,
+  ],
+  exports: [
+    NotificationsListComponent,
+    NotificationsButtonComponent,
+    NotificationItemComponent,
+    NotificationOptionsComponent,
+  ],
+  providers: [
+    DatePipe,
+    NotificationsService,
+  ],
+  entryComponents: [
+    NotificationsListComponent,
+    NotificationsButtonComponent,
+    NotificationItemComponent,
+    NotificationOptionsComponent,
+  ],
+})
+export class NotificationsModule {}

package/src/lib/components/notifications/notifications.service.ts

@@ -0,0 +1,300 @@
+import { HttpClient } from "@angular/common/http";
+import { EventEmitter, Inject, Injectable } from "@angular/core";
+import { Router } from "@angular/router";
+import { KeycloakService } from "keycloak-angular";
+import { from, Observable, of, ReplaySubject } from "rxjs";
+import { catchError, map, publishReplay, refCount } from "rxjs/operators";
+import * as SockJS from "sockjs-client";
+import { NuxeoService } from "../../Core/services/nuxeo/nuxeo.service";
+import * as Stomp from "webstomp-client";
+import { TranslationService } from "../../Core/services/translation/translation.service";
+
+@Injectable()
+export class NotificationsService {
+  stompClient = null;
+  subscriber = null;
+  connection: Promise<any>;
+  connectedPromise: any = null;
+  listenerObserver: EventEmitter<any> = new EventEmitter();
+  update: ReplaySubject<any> = new ReplaySubject(1);
+  alreadyConnectedOnce = false;
+  pageSize = 15;
+
+  private subscription: Stomp.Subscription;
+
+  private _notifications = [];
+  get notifications(): any {
+    return this._notifications;
+  }
+  private _notificationsCount = 0;
+  get notificationsCount(): number {
+    return this._notificationsCount;
+  }
+  base = "";
+  profile = { id: this.nuxeoService.nuxeoClient.user.id };
+  systemLang = "";
+  langChanged: boolean;
+  constructor(
+    private http: HttpClient,
+    public router: Router,
+    public nuxeoService: NuxeoService,
+    private keycloak: KeycloakService,
+    private translationService: TranslationService,
+    @Inject("environment") private environment
+  ) {
+    if (this.profile.id) {
+      this.getCount().subscribe(() => {
+        this.connect();
+        this.subscribe();
+      });
+    }
+    this.translationService.isArabic.subscribe((res) => {
+      this.resetNotifications();
+    });
+  }
+  getCount() {
+    return this.doCountNew(this.profile.id).pipe(
+      map((data) => {
+        this._notificationsCount = data;
+        this.update.next();
+        return data;
+      })
+    );
+  }
+  reset() {
+    this._notifications = [];
+    this._notificationsCount = 0;
+  }
+  resetNotifications() {
+    this._notifications = [];
+  }
+  fetchNotifications() {
+    return this.getNotifications(this.profile.id, {
+      page:
+        this._notifications.length > 0
+          ? Math.ceil(this._notifications.length / this.pageSize)
+          : 0,
+      size: this.pageSize,
+      paged: true,
+      sort: "sendDate,desc",
+      sorted: true,
+      lang: this.translationService.userLang.toUpperCase(),
+    }).pipe(
+      map((notifications: any) => {
+        if (notifications.items) {
+          this._notifications = this._notifications.concat(notifications.items);
+          return notifications;
+        } else {
+          this._notifications = [];
+          return [];
+        }
+      }),
+      catchError(() => {
+        this._notifications = [];
+        return [];
+      })
+    );
+  }
+  resetCount() {
+    this._notificationsCount = 0;
+  }
+  markAllAsRead() {
+    this.doMarkAllAsRead(this.profile.id).subscribe(() => {
+      this._notifications.forEach((item) => (item.status = "READ"));
+    });
+  }
+  updateStatus(notification, onOpen = false) {
+    const bool =
+      notification.status === "UN_READ" ||
+      notification.status === "NEW" ||
+      onOpen;
+    if (bool) {
+      this.doMarkAsRead(notification.id).subscribe(() => {
+        notification.status = "READ";
+        this.getCount().subscribe(() => {});
+      });
+    } else {
+      this.doMarkAsUnread(notification.id).subscribe(() => {
+        notification.status = "UN_READ";
+        this.getCount().subscribe(() => {});
+      });
+    }
+  }
+  deleteNotification(notification) {
+    this.doDeleteNotification(notification.id).subscribe(() => {
+      this._notifications.filter((item, index) => {
+        if (item.id === notification.id) {
+          this._notifications.splice(index, 1);
+          return;
+        }
+      });
+      this.update.next();
+    });
+  }
+  getNotifications(userId, queryParams = {}) {
+    const endpoint = `${this.environment.notifications}/api/system-notifications/all/${userId}`;
+    return this.http
+      .get<any>(endpoint, { observe: "response", params: queryParams })
+      .pipe(
+        map((resp) => ({
+          totalCount: resp.headers.get("x-total-count"),
+          items: resp.body.map((item) => item),
+        })),
+        catchError(this.handleError("getNotifications", [])),
+        publishReplay(1),
+        refCount()
+      );
+  }
+  doCountNew(userId, queryParams = {}) {
+    const endpoint = `${this.environment.notifications}/api/system-notifications/countNew/${userId}`;
+    return this.http
+      .get<any>(endpoint, { params: queryParams })
+      .pipe(catchError(this.handleError("countNew", [])));
+  }
+  doResetCountNew(userId, queryParams = {}) {
+    const endpoint = `${this.environment.notifications}/api/system-notifications/resetCount/${userId}`;
+    return this.http
+      .put<any>(endpoint, { params: queryParams })
+      .pipe(catchError(this.handleError("resetCountNew", [])));
+  }
+  doCountUnread(userId, queryParams = {}) {
+    const endpoint = `${this.environment.notifications}/api/system-notifications/countUnRead/${userId}`;
+    return this.http
+      .get<any>(endpoint, { params: queryParams })
+      .pipe(catchError(this.handleError("countUnread", [])));
+  }
+  doMarkAllAsRead(userId, queryParams = {}) {
+    const endpoint = `${this.environment.notifications}/api/system-notifications/markAllAsRead/${userId}`;
+    return this.http
+      .put<any>(endpoint, { params: queryParams })
+      .pipe(catchError(this.handleError("markAllAsRead", [])));
+  }
+  doMarkAsRead(notificationId, queryParams = {}) {
+    const endpoint = `${this.environment.notifications}/api/system-notifications/markAsRead/${notificationId}`;
+    return this.http
+      .put<any>(endpoint, { params: queryParams })
+      .pipe(catchError(this.handleError("markAsRead", [])));
+  }
+  doMarkAsUnread(notificationId, queryParams = {}) {
+    const endpoint = `${this.environment.notifications}/api/system-notifications/markAsUnRead/${notificationId}`;
+    return this.http
+      .put<any>(endpoint, { params: queryParams })
+      .pipe(catchError(this.handleError("markAsUnread", [])));
+  }
+  doDeleteNotification(notificationId, queryParams = {}) {
+    const endpoint = `${this.environment.notifications}/api/system-notifications/${notificationId}`;
+    return this.http
+      .delete<any>(endpoint, { params: queryParams })
+      .pipe(catchError(this.handleError("deleteNotification", [])));
+  }
+  private handleError<T>(operation = "operation", result?: T) {
+    return (error: any): Observable<T> => {
+      // TODO: send the error to remote logging infrastructure
+      console.error(error); // log to console instead
+
+      // TODO: better job of transforming error for user consumption
+      console.log(`${operation} failed: ${error.message}`);
+
+      // Let the app keep running by returning an empty result.
+      result["status"] = error.status;
+      if (error.error.hasOwnProperty("message")) {
+        result["message"] = error.error.message;
+        result["type"] = error.error.type;
+      }
+
+      return of(result as T);
+    };
+  }
+  async connect() {
+    if (this.connectedPromise === null) {
+      this.connection = this.createConnection();
+    }
+    // building absolute path so that websocket doesn't fail when deploying with a context path
+    let url;
+    url = `${this.environment.notifications}/websocket/ekhaa`; //url
+    const socket = new SockJS(url);
+    this.stompClient = Stomp.over(socket);
+    const headers = {
+      // Upgrade: 'websocket',
+      // Connection: 'Upgrade',
+      token: `${await this.keycloak.getToken()}`,
+    };
+    if (!this.alreadyConnectedOnce) {
+      this.stompClient.connect(headers, () => {
+        this.alreadyConnectedOnce = true;
+        this.connectedPromise("success");
+        this.connectedPromise = null;
+      });
+    }
+  }
+
+  disconnect() {
+    if (this.stompClient !== null && this.alreadyConnectedOnce) {
+      this.stompClient.disconnect();
+      this.stompClient = null;
+      if (this.subscription) {
+        this.subscription.unsubscribe();
+        this.subscription = null;
+      }
+      this.alreadyConnectedOnce = false;
+    } else if (this.connectedPromise) {
+      this.connection.then(() => {
+        this.disconnect();
+      });
+    }
+  }
+
+  subscribe() {
+    if (this.connection) {
+      this.connection.then(() => {
+        if (this.stompClient) {
+          this.subscriber = this.stompClient.subscribe(
+            "/user/topic/notification",
+            (data) => {
+              const notification = JSON.parse(data.body);
+              this._notifications.unshift(notification);
+              this.getCount().subscribe(() => {});
+              this.listenerObserver.emit(notification);
+            }
+          );
+        }
+      });
+    }
+  }
+
+  unsubscribe() {
+    if (this.subscriber !== null) {
+      this.subscriber.unsubscribe();
+    }
+    this.disconnect();
+  }
+
+  private createConnection(): Promise<any> {
+    return new Promise((resolve, reject) => (this.connectedPromise = resolve));
+  }
+
+  testNotification(): Observable<any> {
+    return from(
+      this.nuxeoService.nuxeoClient
+        .operation("System.Notification", {
+          url: `${this.environment.nuxeo}${this.environment.customAutomation}`,
+        })
+        .params({
+          applicationKey: "ctsn",
+          notificationKey: "NotificationWhenOutgoingCorrespondneceApprove",
+          apiData:
+            '{"id": "a7ed629e-c8ea-4e84-8b83-329009515878","schema": "Correspondence"}',
+          data: "{}",
+          groupsId: [],
+          usersId: ["cts_sec"],
+        })
+        .input("a7ed629e-c8ea-4e84-8b83-329009515878")
+        .execute()
+    ).pipe(
+      catchError((err) => {
+        console.log(err);
+        throw err;
+      })
+    );
+  }
+}

package/src/lib/components/pagination/pagination/pagination.component.html

@@ -0,0 +1,33 @@
+<ul class="pagination" SetRtl *ngIf="pages.length > 1">
+  <li class="rotat-icon" [class.disabled]="!canPrevious()">
+    <a
+      role="button"
+      aria-label="go to previous page"
+      href="javascript:void(0)"
+      (click)="prevPage()"
+    >
+      <i class="bi bi-caret-left"></i>
+    </a>
+  </li>
+  <li
+    role="button"
+    [attr.aria-label]="'page ' + pg.number"
+    class="pages"
+    *ngFor="let pg of pages"
+    [class.active]="pg.number === page"
+  >
+    <a href="javascript:void(0)" (click)="selectPage(pg.number)">
+      {{ pg.text }}
+    </a>
+  </li>
+  <li class="rotat-icon" [class.disabled]="!canNext()">
+    <a
+      role="button"
+      aria-label="go to next page"
+      href="javascript:void(0)"
+      (click)="nextPage()"
+    >
+      <i class="bi bi-caret-right"></i>
+    </a>
+  </li>
+</ul>

package/src/lib/components/pagination/pagination/pagination.component.scss

@@ -0,0 +1,46 @@
+.pagination{
+  padding: 0;
+  margin: 0;
+  display: inline-block;
+  list-style: none;
+  li{
+    padding: 0;
+    margin: 0;
+    display: inline-block;
+    list-style: none;
+    a{
+      height: 22px;
+    min-width: 24px;
+    line-height: 22px;
+    padding: 0 6px;
+    border-radius: 5px;
+    margin: 6px 3px;
+    text-align: center;
+    vertical-align: top;
+    color: rgba(0,0,0,0.54);
+    text-decoration: none;
+    vertical-align: bottom;
+    i{
+      font-size: 20px;
+      line-height: 20px;
+      padding: 0 3px;
+    }
+    }
+    &.disabled{
+      a{
+        color: rgba(0,0,0,0.26) !important;
+        background-color: transparent !important;
+        cursor: not-allowed;
+      }
+    }
+    &.active{
+      background-color: rgba(158,158,158,0.2);
+      font-weight: bold;
+    }
+  }
+  &.rtl{
+   .rotat-icon{
+    transform: rotate(180deg);
+   }
+  }
+}

package/src/lib/components/pagination/pagination/pagination.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PaginationComponent } from './pagination.component';
+
+describe('PaginationComponent', () => {
+  let component: PaginationComponent;
+  let fixture: ComponentFixture<PaginationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PaginationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PaginationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});