nuxeo-development-framework 4.1.4 → 4.1.6

package/src/lib/components/custom-toastr/components/custom-toastr/custom-toastr.component.scss

@@ -0,0 +1,103 @@
+@import "../../../../assets/scss/myApp.scss";
+
+.toast-container {
+  // animation-name: opacity;
+  // animation-duration: 0.3s;
+  .error {
+    background-color: $red;
+  }
+  .success {
+    background-color: $green;
+  }
+  .warning {
+    background-color: $yellow-300;
+  }
+  .info {
+    background-color: $cyan-100;
+  }
+  .notification {
+    background-color: $cyan-100;
+  }
+  .toast-icon {
+    font-size: 40px;
+    color: white;
+    -webkit-text-stroke: 3px white;
+  }
+  .notification-icon {
+    font-size: 30px;
+    color: white;
+  }
+  .msg-error {
+    color: $red;
+  }
+  .msg-success {
+    color: $green;
+  }
+  .msg-warning {
+    color: $yellow-300;
+  }
+  .msg-info {
+    color: $cyan-100;
+  }
+  .msg-notification {
+    color: $cyan-100;
+  }
+  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 {
+    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: 18px;
+      color: $gray-300;
+    }
+    .message {
+      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-start-start-radius: 6px;
+  border-end-start-radius: 6px;
+}
+// @keyframes opacity {
+//   from {
+//     opacity: 0;
+//   }
+//   to {
+//     opacity: 1;
+//   }
+// }

package/src/lib/components/custom-toastr/components/custom-toastr/custom-toastr.component.spec.ts

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

package/src/lib/components/custom-toastr/components/custom-toastr/custom-toastr.component.ts

@@ -0,0 +1,88 @@
+import {
+  animate,
+  state,
+  style,
+  transition,
+  trigger,
+} from '@angular/animations';
+import { Component, OnInit } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+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';
+import { ToastType } from '../../interfaces/toast-type.interface';
+
+@Component({
+  selector: 'cts-custom-toastr',
+  templateUrl: './custom-toastr.component.html',
+  styleUrls: ['./custom-toastr.component.scss'],
+  animations: [
+    // the fade-in/fade-out animation.
+    trigger('simpleFadeAnimation', [
+      // the "in" style determines the "resting" state of the element when it is visible.
+      state('in', style({ opacity: 1 })),
+
+      // fade in when created. this could also be written as transition('void => *')
+      transition(':enter', [style({ opacity: 0 }), animate(200)]),
+
+      // fade out when destroyed. this could also be written as transition('void => *')
+      transition(':leave', animate(400, style({ opacity: 0 }))),
+    ]),
+  ],
+})
+export class CustomToastrComponent extends Toast implements OnInit {
+  lang;
+  type: ToastType;
+  value: any;
+  customContent: string;
+  private onDestroy$ = new Subject<boolean>();
+  constructor(
+    protected toastrService: ToastrService,
+    public toastPackage: ToastPackage,
+    private translate: TranslateService,
+    public userPreferenceService?: UserPreferencesService
+  ) {
+    super(toastrService, toastPackage);
+  }
+  ngOnInit(): void {
+    this.type = this.toastPackage.toastRef.componentInstance.type;
+    this.value = this.toastPackage.toastRef.componentInstance.customMsg;
+    this.customContent = this.toastPackage.toastRef.componentInstance.customContent;
+    if (this.userPreferenceService) {
+      this.userPreferenceService
+        .select(UserPreferenceValues.Locale)
+        .pipe(takeUntil(this.onDestroy$))
+        .subscribe((locale) => {
+          this.lang = this.translate.currentLang === 'ar' ? 'rtl' : 'ltr';
+        });
+    }
+  }
+  // setbBackgroundColor() {
+  //   this.toastrService.clear();
+  //   let classes = {
+  //     success: this.type === 'success',
+  //     error: this.type === 'error',
+  //     notification: this.type === 'notification',
+  //   };
+  //   console.log('back color function')
+  //   return classes;
+  // }
+  // setTextColor() {
+  //   let classes = {
+  //     'msg-success': this.type === 'success',
+  //     'msg-error': this.type === 'error',
+  //     'msg-notification': this.type === 'notification',
+  //   };
+  //   return classes;
+  // }
+
+  // remove(){
+  //   this.toastrService.clear();
+  //   console.log('clear function')
+
+  // }
+}

package/src/lib/components/custom-toastr/custom-toastr.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { CustomToastrComponent } from './components/custom-toastr/custom-toastr.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { ToastrModule} from 'ngx-toastr'
+/** @ignore */
+@NgModule({
+  declarations: [CustomToastrComponent],
+  imports: [
+    CommonModule, 
+    MatIconModule , 
+    TranslateModule , 
+    ToastrModule.forRoot({preventDuplicates: true})
+  ],
+  entryComponents: [CustomToastrComponent],
+  exports:[TranslateModule , ToastrModule]
+})
+export class CustomToastrModule {}

package/src/lib/components/custom-toastr/interfaces/toast-type.interface.ts

@@ -0,0 +1 @@
+export type ToastType = 'success' | 'error' | 'warning' | 'info' | 'notification';

package/src/lib/components/custom-toastr/services/custom-toastr.service.ts

@@ -0,0 +1,118 @@
+import { Injectable } from '@angular/core';
+import { ActiveToast, IndividualConfig, ToastrService } from 'ngx-toastr';
+import { Subject } from 'rxjs';
+import { TranslationService } from '../../../core/services/translation/translation.service';
+import { UserPreferencesService } from '../../../core/services/user/user-preferences.service';
+import { CustomToastrComponent } from '../components/custom-toastr/custom-toastr.component';
+import { ToastType } from '../interfaces/toast-type.interface';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CustomToastrService {
+  private onDestroy$ = new Subject<boolean>();
+  isArabic: boolean;
+  constructor(
+    private translation: TranslationService,
+    private toastr: ToastrService,
+    public userPreferenceService?: UserPreferencesService
+  ) {
+    this.setDirection();
+  }
+  setDirection(): void {
+    this.translation.isArabic.subscribe((arabic) => {
+      arabic
+        ? (this.toastr.toastrConfig.positionClass = 'toast-bottom-left')
+        : (this.toastr.toastrConfig.positionClass = 'toast-bottom-right');
+    });
+  }
+  show(
+    type: ToastType,
+    title,
+    message,
+    customOptions?: Partial<IndividualConfig>,
+    customMsg?: any,
+    customContent?: any
+  ): ActiveToast<any> {
+    const activeToast = this.toastr.show(message, title, {
+      toastComponent: CustomToastrComponent,
+      closeButton: true,
+      timeOut: 5000,
+      enableHtml: true,
+      toastClass: '',
+      ...customOptions,
+    });
+    activeToast.toastRef.componentInstance.type = type;
+    activeToast.toastRef.componentInstance.customMsg = customMsg;
+    activeToast.toastRef.componentInstance.customContent = customContent;
+    return activeToast;
+  }
+
+  showToast(options: {
+    type: ToastType;
+    title?: string;
+    message?: string;
+    customMsg?: any;
+    customContent?: string;
+    customOptions?: Partial<IndividualConfig>;
+  }) {
+    const {
+      message,
+      title,
+      customOptions = {},
+      type,
+      customMsg,
+      customContent,
+    } = options;
+    const activeToast = this.toastr.show(message, title, {
+      toastComponent: CustomToastrComponent,
+      closeButton: true,
+      timeOut: 5000,
+      enableHtml: true,
+      toastClass: '',
+      ...customOptions,
+    });
+    const instance = activeToast.toastRef.componentInstance;
+    instance.type = type;
+    instance.customMsg = customMsg;
+    instance.customContent = customContent;
+    return activeToast;
+  }
+
+  ngOnDestroy(): void {
+    this.onDestroy$.unsubscribe();
+  }
+
+  success(
+    message: string,
+    title: string = 'TOASTER.SUCCESS',
+    customOptions?: Partial<IndividualConfig>,
+    customMsg?: string
+  ) {
+    this.show('success', title, message, customOptions, customMsg);
+  }
+  error(
+    message: string,
+    title: string = 'TOASTER.ERROR',
+    customOptions?: Partial<IndividualConfig>,
+    customMsg?: string
+  ) {
+    this.show('error', title, message, customOptions, customMsg);
+  }
+  warning(
+    message: string,
+    title: string = 'TOASTER.WARNING',
+    customOptions?: Partial<IndividualConfig>,
+    customMsg?: string
+  ) {
+    this.show('warning', title, message, customOptions, customMsg);
+  }
+  info(
+    message: string,
+    title: string = 'TOASTER.INFO',
+    customOptions?: Partial<IndividualConfig>,
+    customMsg?: string
+  ) {
+    this.show('info', title, message, customOptions, customMsg);
+  }
+}

package/src/lib/components/diagrams/components/base-node.component.ts

@@ -0,0 +1,41 @@
+import { ChangeDetectorRef, Component, Input, OnDestroy } from '@angular/core';
+import { NodeComponent } from 'rete-angular-plugin';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { IN_OUT_DIRECTION, MESSAGE_TYPE, NODE_TYPE, NOTIFY_EVENT } from '../constants';
+import { BaseNodeClass, ContentNode } from '../models';
+import { MessageService } from '../services';
+
+@Component({
+  template: '',
+})
+export class BaseNodeComponent<TData extends BaseNodeClass = ContentNode>
+  extends NodeComponent
+  implements OnDestroy
+{
+  @Input() data!: TData;
+  _cdr: ChangeDetectorRef;
+  nodeTypes = NODE_TYPE;
+  directions = IN_OUT_DIRECTION;
+  destroy$ = new Subject<void>();
+
+  constructor(cdr: ChangeDetectorRef, private _messageService: MessageService) {
+    super(cdr);
+    this._cdr = cdr;
+    this._messageService
+      .onMessage(MESSAGE_TYPE.configUpdated)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((res) => {
+        this._cdr.detectChanges();
+      });
+  }
+
+  removeNode() {
+    this.data.notify(NOTIFY_EVENT.remove, { nodeId: this.data.id });
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}

package/src/lib/components/diagrams/components/circle-node/circle-node.component.html

@@ -0,0 +1,31 @@
+<div
+	class="da-node da-node--{{ data.type }} circle-node circle-node--{{
+		data.type
+	}} {{ data?.status ? ' da-node--' + data?.status : '' }} "
+	[style.--node-width]="data.width + 'px'"
+	[style.--node-height]="data.width + 'px'"
+>
+	<node-ports
+		[inputsDirection]="data.directions.inputs"
+		[outputsDirection]="data.directions.outputs"
+		[data]="data"
+		[seed]="seed"
+		[emit]="emit"
+		[sortByIndex]="sortByIndex"
+	></node-ports>
+
+	<div class="da-node__content circle-node__content">
+		<node-remove-button
+			(remove)="removeNode()"
+			*ngIf="data.config?.canRemove"
+		></node-remove-button>
+
+		<div
+			class="da-node__title circle-node__title"
+			[attr.tooltip]="data.content?.data?.tooltip"
+			[class.node-tooltip]="!!data.content?.data?.tooltip"
+		>
+			{{ 'diagram.' + data.name | translate }}
+		</div>
+	</div>
+</div>

package/src/lib/components/diagrams/components/circle-node/circle-node.component.scss

@@ -0,0 +1,31 @@
+.circle-node {
+  --node-radius: 50%;
+  &__title {
+    &.node-tooltip {
+      &:after {
+        content: attr(tooltip);
+        position: absolute;
+        left: 50%;
+        top: -6px;
+        transform: translateX(-50%) translateY(-100%);
+        background: rgba(0, 0, 0, 0.7);
+        text-align: center;
+        color: #fff;
+        padding: 4px 2px;
+        font-size: 12px;
+        min-width: 100px;
+        border-radius: 5px;
+        pointer-events: none;
+        display: var(--tooltip-display, none);
+      }
+    }
+  }
+
+  &:hover {
+    --tooltip-display: block;
+  }
+}
+
+.da-node--end {
+  border-width: 3px;
+}

package/src/lib/components/diagrams/components/circle-node/circle-node.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { CircleNode } from '../../models';
+import { BaseNodeComponent } from '../base-node.component';
+
+@Component({
+  templateUrl: './circle-node.component.html',
+  styleUrls: ['../../styles/node.scss', './circle-node.component.scss'],
+})
+export class CircleNodeComponent extends BaseNodeComponent<CircleNode> {}

package/src/lib/components/diagrams/components/connection-label.component.ts

@@ -0,0 +1,87 @@
+import {
+	AfterViewInit,
+	Component,
+	ElementRef,
+	Input,
+	NgZone,
+	OnDestroy,
+	ViewChild
+} from '@angular/core';
+import { ConnectionLabelType } from '../types';
+
+@Component({
+	selector: 'app-connection-label',
+	template: ` <div
+		#labelContainer
+		[ngStyle]="{
+			position: 'absolute',
+			top: '0',
+			left: '0',
+			zIndex: ' var(--label-z-index, -1)'
+		}"
+	>
+		<div [ngClass]="{ 'label-text': !!text }">{{ text }}</div>
+	</div>`,
+	styles: [
+		`
+			.label-text {
+				position: absolute;
+				transform: translate(-50%, -50%);
+				background: var(--c-label-background, #fff);
+				color: var(--c-label-color, #333);
+				border-radius: var(--c-label-radius, 2em);
+				padding: var(--c-label-padding, 0.2em 0.6em);
+				font-size: var(--c-label-size, 0.7rem);
+				border: var(--c-label-border, 1px solid var(--path-color, #1b3e7f));
+				z-index: var(--c-label-z-index, 0);
+				white-space: pre;
+			}
+		`
+	]
+})
+export class ConnectionLabelComponent implements AfterViewInit, OnDestroy {
+	@Input() path: SVGPathElement;
+	@Input() position: ConnectionLabelType['position'];
+	@Input() text: string;
+	observer: MutationObserver;
+	transformStyle = '';
+	@ViewChild('labelContainer', { static: true })
+	labelContainer!: ElementRef<HTMLDivElement>;
+	constructor(private _zone: NgZone) {
+		this.observer = new MutationObserver(() => {
+			this.calculatePosition();
+		});
+	}
+
+	ngAfterViewInit() {
+		if (!this.path) {
+			return;
+		}
+		this._zone.runOutsideAngular(() => {
+			this.observer.observe(this.path, {
+				attributes: true
+			});
+		});
+	}
+
+	ngOnDestroy(): void {
+		this.observer.disconnect();
+	}
+
+	calculatePosition(): void {
+		const positionPoint = this._getPositionPoint();
+
+		this.labelContainer.nativeElement.style.transform = `translate(${positionPoint.x}px, ${positionPoint.y}px)`;
+	}
+
+	private _getPositionPoint() {
+		const pathLength = this.path.getTotalLength();
+		const textWidth = 12 * `${this.text}`.length;
+		return this.position === 'center'
+			? this.path.getPointAtLength(pathLength / 2)
+			: this.path.getPointAtLength(
+					(this.position === 'start' ? 0 : pathLength) +
+						(this.position === 'end' ? -1 : 1) * (textWidth / 2 + 20)
+			  );
+	}
+}

package/src/lib/components/diagrams/components/content-node/content-node.component.html

@@ -0,0 +1,32 @@
+<div
+	class="da-node da-node--{{ data.type }} {{
+		data?.status ? ' da-node--' + data?.status : ''
+	}}  {{ data?.styleClass }}"
+	[style.--node-width]="data.width + 'px'"
+	[style.--node-height]="data.height + 'px'"
+>
+	<node-ports
+		[inputsDirection]="data.directions.inputs"
+		[outputsDirection]="data.directions.outputs"
+		[data]="data"
+		[seed]="seed"
+		[emit]="emit"
+		[sortByIndex]="sortByIndex"
+	></node-ports>
+
+	<div class="da-node__content">
+		<node-remove-button (remove)="removeNode()" *ngIf="data?.config?.canRemove">
+		</node-remove-button>
+		<status-icon [status]="data?.status" *ngIf="data?.status"></status-icon>
+
+		<node-icon
+			*ngIf="data.content?.icon"
+			[icon]="data.content?.icon"
+		></node-icon>
+
+		<div class="da-node__title">{{ data.name }}</div>
+		<div class="da-node__description" *ngIf="data.description">
+			{{ data.description }}
+		</div>
+	</div>
+</div>

package/src/lib/components/diagrams/components/content-node/content-node.component.ts

@@ -0,0 +1,11 @@
+import { Component, OnChanges } from '@angular/core';
+import { ContentNode } from '../../models';
+import { BaseNodeComponent } from '../base-node.component';
+
+@Component({
+  templateUrl: './content-node.component.html',
+  styleUrls: ['../../styles/node.scss'],
+})
+export class ContentNodeComponent
+  extends BaseNodeComponent<ContentNode<any>>
+  implements OnChanges {}

package/src/lib/components/diagrams/components/custom-connection.component.ts

@@ -0,0 +1,61 @@
+import { Component, ElementRef, Input, ViewChild } from '@angular/core';
+
+import { ConnectionComponent } from 'rete-angular-plugin';
+import { Connection } from '../models';
+
+@Component({
+	selector: 'connection',
+	styles: [
+		`
+			svg {
+				overflow: visible;
+				position: absolute;
+				pointer-events: none;
+				path {
+					fill: none;
+					stroke-width: 2px;
+					stroke: var(--path-color, #1b3e7f);
+					pointer-events: auto;
+				}
+			}
+		`
+	],
+	template: `
+		<svg
+			data-testid="connection"
+			style="z-index:-2"
+			class="{{ data?.status ? 'connection-status-' + data?.status : '' }} {{
+				data?.styleClass
+			}}"
+		>
+			<path [attr.d]="path" #pathElement />
+		</svg>
+		<app-connection-label
+			*ngIf="data?.label && pathNative"
+			[path]="pathNative"
+			[text]="labelText"
+			[position]="labelPosition"
+		></app-connection-label>
+	`
+})
+export class CustomConnectionComponent extends ConnectionComponent {
+	@ViewChild('pathElement', { static: true })
+	pathElement!: ElementRef<SVGPathElement>;
+	@Input() data: Connection;
+
+	get pathNative() {
+		return this.pathElement?.nativeElement;
+	}
+
+	get labelText() {
+		return typeof this.data?.label === 'string'
+			? this.data?.label
+			: this.data?.label.text;
+	}
+
+	get labelPosition() {
+		return typeof this.data.label === 'string'
+			? 'center'
+			: this.data.label.position;
+	}
+}