nuxeo-development-framework 3.0.9 → 3.1.2

package/src/lib/components/notifications/components/notification-toast/notification-toast.component.scss

@@ -0,0 +1,62 @@
+@import "../../../../assets/scss/myApp.scss";
+
+.toast-container {
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  margin-left: 16px;
+  margin-right: 16px;
+  position: relative;
+  width: 400px;
+  height: 80px;
+  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.23);
+  background-color: white;
+  border-radius: 5px;
+  .icon-container {
+    background-color: $cyan-100;
+    grid-column: span 1 / span 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .toast-content-container {
+    grid-column: span 3 / span 3;
+    display: flex;
+    flex-direction: column;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    padding-inline-start: 8px;
+    overflow: hidden;
+    .toast-content {
+      font-size: 15px;
+      color: $gray-400;
+      overflow: hidden;
+    }
+    .message {
+      color: $cyan-100;
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+  .remove {
+    grid-column: span 1 / span 1;
+    cursor: pointer;
+    display: flex;
+    justify-content: flex-end;
+    padding-inline-end: 8px;
+    mat-icon {
+      color: $gray-300;
+      font-size: 20px;
+      line-height: 28px;
+    }
+  }
+}
+.rounded-s-md {
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+
+[dir="rtl"] .rounded-s-md {
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}

package/src/lib/components/notifications/components/notification-toast/notification-toast.component.spec.ts

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

package/src/lib/components/notifications/components/notification-toast/notification-toast.component.ts

@@ -0,0 +1,55 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Router } from '@angular/router';
+import { Toast, ToastPackage, ToastrService } from 'ngx-toastr';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import {
+  UserPreferencesService,
+  UserPreferenceValues,
+} from '../../../../Core/services/user/user-preferences.service';
+
+@Component({
+  selector: 'app-notification-toast',
+  templateUrl: './notification-toast.component.html',
+  styleUrls: ['./notification-toast.component.scss'],
+  // encapsulation: ViewEncapsulation.None,
+})
+export class NotificationToastComponent extends Toast implements OnInit {
+  id;
+  lang;
+  private onDestroy$ = new Subject<boolean>();
+  constructor(
+    protected toastrService: ToastrService,
+    public toastPackage: ToastPackage,
+    private router: Router,
+    public userPreferenceService?: UserPreferencesService
+  ) {
+    super(toastrService, toastPackage);
+  }
+  ngOnInit(): void {
+    this.id = this.toastPackage.toastRef.componentInstance.id;
+    if (this.userPreferenceService) {
+      this.userPreferenceService
+        .select(UserPreferenceValues.Locale)
+        .pipe(takeUntil(this.onDestroy$))
+        .subscribe((locale) => {
+          this.lang = locale === 'ar' ? 'rtl' : 'ltr';
+        });
+    }
+  }
+  navigateToDetais() {
+    // this.router.navigate(
+    //   [
+    //     {
+    //       outlets: { viewer: ['view', this.id] },
+    //     },
+    //   ],
+    //   {
+    //     queryParams: { location: this.router.url },
+    //   }
+    // );
+  }
+}
+// <div class="col-span-1 cursor-pointer text-lg text-gray-300 flex justify-end">
+// X
+// </div>

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

@@ -0,0 +1,7 @@
+<div [matMenuTriggerFor]="langMenu" class="notification" (click)="getNotifications()" class="search-wrapper">
+  <span matBadgeSize="small" matBadge="{{ notificationsCount }}" matBadgeColor="warn" matbadgeposition="before"
+    class="bi bi-bell bell"></span>
+</div>
+<mat-menu class="mat-menu-panel myMenu notification-list" #langMenu="matMenu">
+  <app-notifications-list (listItemClick)="onListItemClick($event)"></app-notifications-list>
+</mat-menu>

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

@@ -0,0 +1,90 @@
+.notifications-count {
+  background-color: #eee;
+  border-radius: 5px;
+  color: #333;
+  font-size: 11px;
+  padding: 0px 6px;
+  box-sizing: border-box;
+}
+.notification-list {
+  max-width: 450px !important;
+  width: 450px;
+  height: 66vh;
+  .mat-menu-content {
+    padding: 0px !important;
+    position: relative;
+    height: calc(100% - 29px);
+    .mat-toolbar {
+      margin: 0px 0 -10px 0;
+    }
+  }
+}
+.mat-menu-panel.myMenu {
+  border-radius: 5px !important;
+  overflow: hidden;
+}
+.notification {
+  .mat-icon {
+    margin-right: 0px !important;
+    vertical-align: middle;
+  }
+}
+.notification-toast {
+}
+.toast-container {
+  right: 12px !important;
+  bottom: 12px !important;
+  pointer-events: all;
+  .ngx-toastr {
+    padding: 25px !important;
+    background-position: 263px center;
+    border-radius: 5px !important;
+    box-shadow: none !important;
+  }
+  .toast-title {
+    font-weight: normal;
+  }
+}
+.wrap {
+  white-space: normal !important;
+  font-size: 14px !important;
+  margin-bottom: 8px !important;
+}
+.mat-menu-content:not(:empty) {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+[dir="rtl"] {
+  .toast-container {
+    left: 12px !important;
+    right: auto !important;
+    direction: rtl;
+    text-align: right;
+    .ngx-toastr {
+      background-position: 10px center;
+    }
+    .toast-close-button {
+      float: left;
+    }
+  }
+}
+
+.mat-badge-content{
+  // width: 15px !important;
+  //   height: 15px !important;
+    right: -4px !important;
+    top: -1px !important;
+  //   display: flex;
+  //   justify-content: center;
+  //   align-items: center;
+  //   /* line-height: 10px; */
+  //   font-size: 10px;
+  //   text-align: center;
+}
+.rtl {
+  .mat-badge-content {
+    font-weight: 600;
+    right: -6px !important;
+    top: -5px !important;
+  }
+}

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

@@ -0,0 +1,190 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewEncapsulation,
+} from "@angular/core";
+import { Router } from "@angular/router";
+import { TranslateService } from "@ngx-translate/core";
+import { ActiveToast, ToastrService } from "ngx-toastr";
+import { take } from "rxjs/internal/operators/take";
+import { TimeAgoPipe } from "../../../../pipes/time-ago.pipe";
+import { NotificationsService } from "../../notifications.service";
+import { NotificationToastComponent } from "../notification-toast/notification-toast.component";
+import { TranslationService } from "../../../../Core/services/translation/translation.service";
+import { first } from "rxjs/operators";
+
+
+@Component({
+  selector: "app-notifications-button",
+  templateUrl: "./notifications-button.component.html",
+  styleUrls: ["./notifications-button.component.scss"],
+  encapsulation: ViewEncapsulation.None,
+})
+export class NotificationsButtonComponent implements OnInit, OnDestroy {
+  get notificationsCount() {
+    return this.notificationsService.notificationsCount;
+  }
+
+  subscription;
+  updater;
+  @Output()
+  toastrClick = new EventEmitter();
+  @Output()
+  listItemClick = new EventEmitter();
+  constructor(
+    public notificationsService: NotificationsService,
+    public translate: TranslateService,
+    public toastr: ToastrService,
+    public TimeAgo: TimeAgoPipe,
+    public router: Router,
+    private ref: ChangeDetectorRef,
+    private translationService: TranslationService
+  ) {}
+  /*
+  async openNotifications(event) {
+    const dir = this.translate.instant('dir');
+    const notificationsModal = await this.modalController.create({
+      cssClass: 'side-modal notifications',
+      enterAnimation: dir === 'rtl' ? slideInRtl : slideIn,
+      leaveAnimation: dir === 'rtl' ? slideOutRtl : slideOut,
+      component: NotificationsModalComponent,
+      showBackdrop: false
+    });
+    return await notificationsModal.present().then(() => {
+      this.notificationsService.resetCount();
+
+    });
+  }
+  */
+  getNotifications() {
+    this.notificationsService.resetNotifications()
+    this.notificationsService.fetchNotifications().subscribe(() => {
+      this.notificationsService.resetCount();
+    });
+  }
+  ngOnInit() {
+    this.subscription = this.notificationsService.listenerObserver.subscribe(
+      async (activity) => {
+        let ar = await this.translationService.isArabic
+          .pipe(first())
+          .toPromise();
+        let sourceType = activity.sourceType;
+        const isAssignmentOrApproval: boolean =
+          sourceType === "approval" || sourceType === "assignment";
+        const correspondence = sourceType === "correspondence";
+        const assignment = sourceType === "assignment";
+        const approval = sourceType === "approval";
+        const memo = sourceType === "memo";
+        const general = sourceType === "general";
+        const id = memo ? activity.sourceId : activity.data.correspondenceId;
+
+        this.showToastr(activity, ar)
+          .onTap.pipe(take(1))
+          .subscribe(() => {
+            this.notificationsService.updateStatus(activity, true);
+            if (activity.data?.correspondenceId) {
+              this.router.navigate(
+                [
+                  {
+                    outlets: {
+                      viewer: ["view", id],
+                    },
+                  },
+                ],
+                {
+                  queryParams: {
+                    location: this.router.url,
+                    ...(isAssignmentOrApproval && { approvalMode: true }),
+                    ...(assignment && {
+                      assignmentId: activity.data.assignmentId,
+                    }),
+                  },
+                }
+              );
+            }
+            if (memo) {
+              this.router.navigate([{ outlets: { viewer: ["memo", id] } }], {
+                queryParams: { location: this.router.url },
+              });
+            }
+            this.toastrClick.next(activity);
+          });
+        this.ref.markForCheck();
+      }
+    );
+
+    this.updater = this.notificationsService.update.subscribe((data) => {
+      this.ref.detectChanges();
+    });
+    // setTimeout(() => {
+    //   this.showToastr({
+    //     sendDate:"111",
+    //     content:"test",
+    //     data:{
+    //       correspondenceId:"f9c36fe1-7054-4f81-a89b-096ad24a03b5"
+    //     }
+    //   }).onTap.pipe(take(1)).subscribe(() => {
+    //     // this.notificationsService.updateStatus(activity, true);
+    //     console.log("here")
+    //   })
+    // }, 1000);
+  }
+  onListItemClick(event){
+    this.listItemClick.next(event);
+  }
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+    this.updater.unsubscribe();
+    this.notificationsService.unsubscribe();
+  }
+  // test() {
+  //   this.toastr.show(`dsssdsds`, 'here is the content of the notification ', {
+  //     toastComponent: NotificationToastComponent,
+  //     closeButton: true,
+  //     // extendedTimeOut: 0,
+  //     timeOut: 10000,
+  //     // tapToDismiss: false,
+  //     enableHtml: true,
+  //     positionClass:
+  //       this.translate.instant('dir') === 'rtl'
+  //         ? 'toast-bottom-left'
+  //         : 'toast-bottom-right',
+  //     toastClass: 'notification-toast',
+  //   });
+  // }
+
+  showToastr(activity, ar): ActiveToast<any> {
+    let arContent;
+    let enContent;
+    activity.notificationContents.forEach((res) => {
+      if (res.lang === "AR") {
+        arContent = res.message;
+      }
+      if (res.lang === "EN") {
+        enContent = res.message;
+      }
+    });
+    const activeToast = this.toastr.show(
+      `${this.TimeAgo.transform(activity.sendDate)}`,
+      ar ? arContent : enContent,
+      {
+        toastComponent: NotificationToastComponent,
+        closeButton: true,
+        timeOut: 10000,
+        enableHtml: true,
+        positionClass:
+          this.translate.instant("dir") === "rtl"
+            ? "toast-bottom-left"
+            : "toast-bottom-right",
+        toastClass: "notification-toast",
+      }
+    );
+    activeToast.toastRef.componentInstance.id = activity.data.correspondenceId;
+
+    return activeToast;
+  }
+}

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

@@ -0,0 +1,55 @@
+<div class="toolbar">
+  <div class="title">
+    <div>{{ "notifications.notifications" | translate }}</div>
+  </div>
+  <div class="flex justify-end">
+    <button
+      mat-button
+      (click)="markAllAsRead()"
+      size="small"
+      fill="none"
+      class="markAllAsRead-btn"
+    >
+      {{ "notifications.markAllAsRead" | translate }}
+    </button>
+  </div>
+</div>
+<!-- [matTooltip]="'notifications.markAllAsRead' | translate"
+      [matTooltipPosition]="'before'" -->
+<div *ngIf="!notifications?.length" class="no-notifications">
+  <p>
+    {{ "notifications.noNotifications" | translate }}
+  </p>
+</div>
+<div
+  infiniteScroll
+  [scrollWindow]="false"
+  [infiniteScrollDistance]="scrollDistance"
+  [infiniteScrollThrottle]="throttle"
+  (scrolled)="onScrollDown()"
+  class="notifications-container scroll"
+>
+  <mat-list class="">
+    <ng-container
+      *ngFor="
+        let notification of notifications;
+        let i = index;
+        trackBy: trackBy
+      "
+    >
+      <!-- <mat-divider class="marginize"></mat-divider> -->
+      <app-notification-item
+        (click)="openNotification(notification)"
+        (update)="onUpdate($event)"
+        [notification]="notification"
+        [isArabic]="isArabic"
+      ></app-notification-item>
+    </ng-container>
+    <div
+      *ngIf="loading"
+      style="display: grid; place-items: center; margin-top: 10px"
+    >
+      <mat-spinner [diameter]="48" style="margin: 0 auto"></mat-spinner>
+    </div>
+  </mat-list>
+</div>

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

@@ -0,0 +1,108 @@
+@import "../../../../assets/scss/myApp.scss";
+
+:host {
+  height: 100%;
+  position: relative;
+}
+.toolbar {
+  background-image: $wrapper-gradient;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: white;
+  font-weight: 700;
+  padding-top: 0.25rem /* 4px */;
+  padding-bottom: 0.25rem /* 4px */;
+  padding-left: 1.5rem /* 24px */;
+  padding-right: 1.5rem /* 24px */;
+  .title {
+    font-size: 1.125rem /* 18px */;
+    line-height: 1.75rem /* 28px */;
+    display: flex;
+    align-items: center;
+  }
+  .markAllAsRead-btn {
+    background: none;
+    border: none;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    font-size: 0.75rem /* 12px */;
+    line-height: 1rem /* 16px */;
+    display: flex;
+    align-items: center;
+    color: white;
+  }
+}
+.no-notifications {
+  margin-top: 1.25rem /* 20px */;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.no-notifications p {
+  text-align: center;
+  color: $gray-200;
+}
+.notifications-container {
+  height: 100%;
+  overflow: scroll;
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+  mat-list {
+    padding: 16px;
+    display: grid;
+    row-gap: 8px;
+  }
+}
+
+.scroll::-webkit-scrollbar-thumb {
+  background-color: $gray-100;
+}
+div[scrollx="true"],
+div[scrolly="true"] {
+  position: relative;
+  overflow: hidden;
+  max-height: 80vh;
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+div[scrollx="true"] {
+  overflow-x: auto;
+}
+
+div[scrolly="true"] {
+  overflow-y: auto;
+}
+ion-toolbar {
+  min-height: 40px;
+  height: 40px;
+  --min-height: 40px;
+  box-shadow: 0px 0px 1px 1px #cbcbcb;
+  ion-title {
+    height: 14px;
+    font-size: 13px;
+    font-weight: bold;
+  }
+
+  ion-button {
+    font-size: 12px;
+    letter-spacing: 0px;
+  }
+}
+
+ion-item-divider {
+  --background: rgba(var(--ion-color-light-rgb), 1);
+  color: #666;
+}
+
+// .right-gradient {
+//   @apply bg-gradient-to-r from-cyan-50 to-cyan-100 h-10px w-full;
+// }
+// .left-gradient {
+//   @apply bg-gradient-to-l from-cyan-50 to-cyan-100 h-10px w-full;
+// }