nuxeo-development-framework 4.1.4 → 4.1.6

package/src/lib/shared/components/item-list/item-list.component.ts

@@ -0,0 +1,69 @@
+import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { ViewerFilesService } from '../../../components/correspondence-relation/services/viewer-files.service';
+
+/**
+ * Reusable List item component with actions menu for listing a document or a version of a document
+ * @title
+ * List item component
+ * @example
+ *
+ * <cts-item-list
+ *   [item]="item"
+ *   [title]="item.title"
+ *   [iconname]="'link'"
+ *   [actions]="menu_actions"
+ *   (actionclicked)="handleAction($event)"
+ *   (itemClicked)='handleItem()'
+ *   [moreclasses]="'link-relation'"
+ * ></cts-item-list>
+ */
+@Component({
+  selector: 'cts-item-list',
+  templateUrl: './item-list.component.html',
+  styleUrls: ['./item-list.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class ItemListComponent implements OnInit {
+  selectedId;
+  /** Document Item  */
+  @Input()
+  item: any;
+  /** Icon to display */
+  @Input()
+  iconname: string;
+  /** title of the item */
+  @Input()
+  title: string;
+  /** array of actions to be shown in actions menu */
+  @Input()
+  actions?: string[];
+  /** highlight item if item is selected */
+  @Input()
+  isselected? = false;
+  /** provide more classes to be assigned to the item DOM */
+  @Input()
+  moreclasses?;
+  /** event Emitter that fires when item is clicked */
+  @Output()
+  itemClicked = new EventEmitter();
+  /** Action Clicked event Emitter, emits action name and item object when an action is clicked */
+  @Output()
+  actionclicked = new EventEmitter();
+
+  itemlistClick() {
+    // this.isselected = true;
+    this.itemClicked.next();
+  }
+
+  menuactionClicked(menu_item_name, item) {
+    this.actionclicked.next({ action: menu_item_name, item: item });
+  }
+
+  constructor(private viewerFilesService: ViewerFilesService) { }
+
+  ngOnInit(): void {
+    this.viewerFilesService.selectedFileId.subscribe((res) => {
+      this.selectedId = res;
+    });
+  }
+}

package/src/lib/shared/components/no-data/no-data.component.html

@@ -0,0 +1,6 @@
+<div class="container" [ngClass]="{'no-data-border':border}">
+  <img class="empty-state-img" [src]="img" *ngIf="img">
+  <div class="empty-state-test">
+    {{ message || "noData" | translate }}
+  </div>
+</div>

package/src/lib/shared/components/no-data/no-data.component.scss

@@ -0,0 +1,16 @@
+.container {
+  display: grid;
+  place-items: center;
+  height: 100%;
+  width: 100%;
+  font-size: 14px;
+  color: gray;
+  padding: 10px;
+  .empty-state-img{
+    display: none;
+  }
+}
+
+.no-data-border {
+  border: 1px solid #d9dce2;
+}

package/src/lib/shared/components/no-data/no-data.component.spec.ts

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

package/src/lib/shared/components/no-data/no-data.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+/**
+ * Reusable Component to be shown when no data is present
+ * @title
+ * No Data Component
+ * @example
+ *
+ * <cts-no-data
+ *   [message]="'PATH.TO.TRANSLATION'"
+ * ></cts-no-data>
+ */
+@Component({
+  selector: 'cts-no-data',
+  templateUrl: './no-data.component.html',
+  styleUrls: ['./no-data.component.scss'],
+  encapsulation : ViewEncapsulation.None
+})
+export class NoDataComponent implements OnInit {
+  /**  tralsnation path to the message to be shown */
+  @Input()
+  message? = 'noData';
+  @Input()
+  border = true;
+  @Input() img = '';
+  constructor() {}
+
+  ngOnInit(): void {}
+}

package/src/lib/shared/components/nuxeo-dialog/confirmation/ndf-confirmation-dialog.component.html

@@ -0,0 +1,65 @@
+<ndf-nuxeo-dialog dialogTitle="{{ dialogData.title | translate }}">
+	<ng-template #contentTemplate>
+		<!-- Content -->
+		<div class="flex flex-row gap-x-2 items-center">
+			<!-- Icon -->
+			<ng-container *ngIf="dialogData.icon.show">
+				<div
+					class="flex flex-0 items-center justify-center w-10 h-10 sm:mr-4 rounded-full"
+					[ngClass]="{
+						'text-primary-600 bg-primary-100 dark:text-primary-50 dark:bg-primary-600':
+							dialogData.icon.color === 'primary',
+						'text-accent-600 bg-accent-100 dark:text-accent-50 dark:bg-accent-600':
+							dialogData.icon.color === 'accent',
+						'text-warn-600 bg-warn-100 dark:text-warn-50 dark:bg-warn-600':
+							dialogData.icon.color === 'warn',
+						'text-gray-600 bg-gray-100 dark:text-gray-50 dark:bg-gray-600':
+							dialogData.icon.color === 'basic',
+						'text-blue-600 bg-blue-100 dark:text-blue-50 dark:bg-blue-600':
+							dialogData.icon.color === 'info',
+						'text-green-500 bg-green-100 dark:text-green-50 dark:bg-green-500':
+							dialogData.icon.color === 'success',
+						'text-amber-500 bg-amber-100 dark:text-amber-50 dark:bg-amber-500':
+							dialogData.icon.color === 'warning',
+						'text-red-600 bg-red-100 dark:text-red-50 dark:bg-red-600':
+							dialogData.icon.color === 'error'
+					}"
+				>
+					<mat-icon
+						class="text-current"
+						[svgIcon]="dialogData.icon.name"
+					></mat-icon>
+				</div>
+			</ng-container>
+			<div
+				class="text-secondary"
+				[innerHtml]="dialogData.message | translate"
+			></div>
+		</div>
+	</ng-template>
+
+	<ng-template #actionsTemplate let-dialog="dialog">
+		<ng-container *ngIf="dialogData.actions.confirm.show">
+			<button
+				(click)="dialog.executeAction(dialogData.actions.confirm.fn)"
+				class="submission-button"
+				[color]="dialogData.actions.confirm.color"
+				[disabled]="dialog.loading"
+			>
+				{{ dialogData.actions.confirm.label | translate }}
+			</button>
+		</ng-container>
+		<ng-container *ngIf="dialogData.actions.moreActions.length">
+			<ng-container *ngFor="let btn of dialogData.actions.moreActions">
+				<button
+					(click)="dialog.executeAction(btn.fn)"
+					class="submission-button"
+					[color]="btn.color"
+					[disabled]="dialog.loading"
+				>
+					{{ btn.label | translate }}
+				</button>
+			</ng-container>
+		</ng-container>
+	</ng-template>
+</ndf-nuxeo-dialog>

package/src/lib/shared/components/nuxeo-dialog/confirmation/ndf-confirmation-dialog.component.scss

@@ -0,0 +1,3 @@
+::ng-deep.ndf-confirmation-dialog-panel {
+	min-width: 25% !important;
+}

package/src/lib/shared/components/nuxeo-dialog/confirmation/ndf-confirmation-dialog.component.ts

@@ -0,0 +1,18 @@
+import { Component, Injector } from '@angular/core';
+import { ConfirmationDialogConfig } from '../models/confirm-options.model';
+import { BaseDialogComponent } from '../../base/base-dialog.component';
+
+@Component({
+	selector: 'ndf-confirmation-dialog',
+	templateUrl: './ndf-confirmation-dialog.component.html',
+	styleUrls: ['./ndf-confirmation-dialog.component.scss']
+})
+export class NdfConfirmationDialogComponent extends BaseDialogComponent<
+	NdfConfirmationDialogComponent,
+	ConfirmationDialogConfig,
+	boolean
+> {
+	constructor(injector: Injector) {
+		super(injector);
+	}
+}

package/src/lib/shared/components/nuxeo-dialog/models/confirm-options.model.ts

@@ -0,0 +1,51 @@
+import { of } from 'rxjs';
+import { DialogActionType } from './dialog-option.model';
+
+interface ConfirmButton {
+	show?: boolean;
+	label?: string;
+	color?: 'primary' | 'accent' | 'warn';
+	fn: DialogActionType;
+}
+export interface ConfirmationDialogConfig {
+	title?: string;
+	message?: string;
+	icon?: {
+		show?: boolean;
+		name?: string;
+		color?:
+			| 'primary'
+			| 'accent'
+			| 'warn'
+			| 'basic'
+			| 'info'
+			| 'success'
+			| 'warning'
+			| 'error';
+	};
+	actions?: {
+		confirm?: ConfirmButton;
+		moreActions?: Array<ConfirmButton>;
+	};
+}
+
+export const defaultConfirmConfig: ConfirmationDialogConfig = {
+	title: 'confirmDialog.confirm',
+	message: 'confirmDialog.generalConfirmMsg',
+	icon: {
+		show: true,
+		name: 'heroicons_outline:exclamation',
+		color: 'warn'
+	},
+	actions: {
+		confirm: {
+			show: true,
+			label: 'BUTTONS.confirm',
+			color: 'warn',
+			fn: () => {
+				return of(false);
+			}
+		},
+		moreActions: []
+	}
+};

package/src/lib/shared/components/nuxeo-dialog/models/dialog-option.model.ts

@@ -0,0 +1,16 @@
+import { TemplateRef, Type } from '@angular/core';
+import { Observable } from 'rxjs';
+export type DialogActionType = (...args: any[]) => Observable<any>;
+export interface DialogOptions {
+	component: Type<any> | TemplateRef<any>;
+	width?: string;
+	height?: string;
+	panelClass?: string | Array<string>;
+	config?: {
+		title?: string;
+		subTitle?: string;
+		contentTemplate?: TemplateRef<any>;
+		actionsTemplate?: TemplateRef<any>;
+	};
+	data?: Record<string, any>;
+}

package/src/lib/shared/components/nuxeo-dialog/nuxeo-dialog.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { NdfNuxeoDialog } from './nuxeo.dialog';
+import { NdfConfirmationDialogComponent } from './confirmation/ndf-confirmation-dialog.component';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { DirectiveModule } from '../../../directive/directive.module';
+
+@NgModule({
+	declarations: [NdfNuxeoDialog, NdfConfirmationDialogComponent],
+	imports: [
+		CommonModule,
+		TranslateModule,
+		MatIconModule,
+		MatDialogModule,
+		MatTooltipModule,
+		DirectiveModule
+	],
+	exports: [NdfNuxeoDialog, NdfConfirmationDialogComponent]
+})
+export class NuxeoDialogModule {}

package/src/lib/shared/components/nuxeo-dialog/nuxeo.dialog.html

@@ -0,0 +1,63 @@
+<div SetDirRtl class="ndf-dialog-wrapper flex flex-col h-full">
+	<div
+		class="dialog-header flex h-20 p-6 justify-between items-center w-full bg-vapor text-blue-munsell text-xl not-italic font-bold leading-7"
+	>
+		<div class="flex flex-col">
+			<span>{{ data?.dialogConfig?.title || dialogTitle }}</span>
+			<span class="text-base font-normal"
+				>{{ data?.dialogConfig?.subTitle || subTitle }}</span
+			>
+		</div>
+		<button
+			class="flex items-center justify-center rounded-full bg-anti-flash-white w-10 h-10"
+			(click)="executeAction()"
+			matTooltip="{{'BUTTONS.CLOSE' | translate}}"
+		>
+			<mat-icon class="icon-size-3.5" [svgIcon]="'icons:cancel-icon'">
+			</mat-icon>
+		</button>
+	</div>
+	<div
+		#dialogBody
+		class="dialog-body flex flex-col gap-y-4 p-6 overflow-y-auto relative z-99"
+		[ngClass]="{'overflow-hidden': loading}"
+	>
+		<ng-container
+			*ngTemplateOutlet="data?.dialogConfig?.contentTemplate || contentTemplate"
+		></ng-container>
+		<ng-container *ngIf="loading">
+			<div
+				class="overlay flex w-full h-full items-center justify-center absolute left-0 bottom-0 right-0 bg-gray-300 opacity-40 z-999"
+				[ngStyle]="{'top': dialogBodyTopOffset + 'px'}"
+			></div>
+			<div
+				class="overlay flex w-full h-full items-center justify-center absolute left-0 bottom-0 right-0 z-9999"
+				*ngIf="loaderMode === 'spinner'"
+				[ngStyle]="{'top': dialogBodyTopOffset + 'px'}"
+			>
+				<mat-spinner
+					[value]="90"
+					[strokeWidth]="4"
+					overlay="true"
+					[diameter]="40"
+					color="primary"
+				>
+				</mat-spinner>
+			</div>
+			<div
+				class="block w-full h-px absolute inset-0 z-9999"
+				*ngIf="loaderMode === 'progressBar'"
+			>
+				<mat-progress-bar mode="indeterminate"></mat-progress-bar>
+			</div>
+		</ng-container>
+	</div>
+	<div class="flex w-full justify-end p-6 pt-0 gap-x-4">
+		<button class="cancelation-button" (click)="executeAction()">
+			{{"BUTTONS.CANCEL" | translate}}
+		</button>
+		<ng-container
+			*ngTemplateOutlet="(data?.dialogConfig?.actionsTemplate || actionsTemplate); context: { dialog: this }"
+		></ng-container>
+	</div>
+</div>

package/src/lib/shared/components/nuxeo-dialog/nuxeo.dialog.scss

@@ -0,0 +1,17 @@
+::ng-deep.ndf-dialog {
+	.mat-dialog-container {
+		overflow: hidden !important;
+		border-radius: 8px !important;
+	}
+}
+.ndf-dialog-wrapper {
+	.dialog-body {
+		height: 100%;
+		max-height: calc(100vh - 208px);
+	}
+}
+
+:host {
+	height: 100%;
+	display: block;
+}

package/src/lib/shared/components/nuxeo-dialog/nuxeo.dialog.ts

@@ -0,0 +1,75 @@
+import {
+  Component,
+  ContentChild,
+  ElementRef,
+  Injector,
+  Input,
+  ViewChild,
+} from "@angular/core";
+import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
+import { isObservable } from "rxjs";
+import { takeUntil } from "rxjs/operators";
+import { BaseComponent } from "../../components/base";
+import { DialogActionType } from "./models/dialog-option.model";
+
+@Component({
+  selector: "ndf-nuxeo-dialog",
+  templateUrl: "./nuxeo.dialog.html",
+  styleUrls: ["./nuxeo.dialog.scss"],
+})
+export class NdfNuxeoDialog<TData = any> extends BaseComponent {
+  @Input() dialogTitle: string = "";
+  @Input() subTitle: string = "";
+  @Input() loaderMode: "spinner" | "progressBar" = "spinner";
+  @ContentChild("contentTemplate") contentTemplate!: any;
+  @ContentChild("actionsTemplate") actionsTemplate!: any;
+
+  dialogRef: MatDialogRef<NdfNuxeoDialog>;
+  data: TData;
+  @ViewChild("dialogBody") dialogBody: ElementRef<HTMLDivElement>;
+  dialogBodyTopOffset: number = 0;
+  constructor(injector: Injector) {
+    super(injector);
+    this.data = injector.get(MAT_DIALOG_DATA, null);
+    this.dialogRef = injector.get(MatDialogRef, null);
+  }
+
+  executeAction(action?: DialogActionType, ...params: any[]): void {
+    this.dialogBodyTopOffset = this.dialogBody.nativeElement.scrollTop;
+    if (action) {
+      if (!this.isArrowFunction(action)) {
+        throw new Error("The action should be arrow function");
+      }
+      this.loading = true;
+      //TODO here we should find a way to test if actions instance of DialogActionType
+      const result = action(...params);
+      if (!isObservable(result)) {
+        this.loading = false;
+        throw new Error("The action you used should return an Observable");
+      }
+      result.pipe(takeUntil(this.destroy$)).subscribe(
+        (value) => {
+          this.loading = false;
+          this.dialogRef.close(value);
+        },
+        (err) => {
+          this.loading = false;
+        }
+      );
+    } else {
+      this.dialogRef.close();
+    }
+  }
+
+  isArrowFunction(fn: Function): boolean {
+    const strFn = fn.toString();
+    const firstIndex = strFn.indexOf(")");
+    const lastIndex = strFn.indexOf("{") + 1;
+    const target = strFn.substring(firstIndex, lastIndex).replace(" ", "");
+    return lastIndex == 0 || target.includes("=>");
+  }
+
+  onClose(): void {
+    this.dialogRef.close();
+  }
+}

package/src/lib/shared/components/nuxeo-dialog/services/nuxeo-dialog.service.ts

@@ -0,0 +1,55 @@
+import { Injectable } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+
+import { DialogOptions } from '../models/dialog-option.model';
+import {
+	ConfirmationDialogConfig,
+	defaultConfirmConfig
+} from '../models/confirm-options.model';
+import { merge } from 'lodash-es';
+import { NdfConfirmationDialogComponent } from '../confirmation/ndf-confirmation-dialog.component';
+
+@Injectable({
+	providedIn: 'root'
+})
+export class NuxeoDialogService {
+	constructor(private dialog: MatDialog) {}
+
+	open(options: DialogOptions) {
+		return this.dialog.open(options.component, {
+			width: options?.width || 'auto',
+			height: options?.height || 'auto',
+			minWidth: '35%',
+			panelClass: ['ndf-dialog', ...this.#getPanelClass(options?.panelClass)],
+			disableClose: true,
+			data: {
+				dialogConfig: {
+					title: options.config?.title,
+					subTitle: options.config?.subTitle,
+					contentTemplate: options.config?.contentTemplate,
+					actionsTemplate: options.config?.actionsTemplate
+				},
+				...(options.data || {})
+			}
+		});
+	}
+
+	#getPanelClass(panelClass: string | Array<string>): Array<string> {
+		let classes = [''];
+		if (panelClass) {
+			classes = Array.isArray(panelClass) ? panelClass : [panelClass];
+		}
+		return classes;
+	}
+
+	showConfirm(config: ConfirmationDialogConfig) {
+		// Merge the user config with the default config
+		const confirmConfig = merge({}, defaultConfirmConfig, config);
+		const options: DialogOptions = {
+			component: NdfConfirmationDialogComponent,
+			data: { ...confirmConfig },
+			panelClass: 'ndf-confirmation-dialog-panel'
+		};
+		return this.open(options);
+	}
+}

package/src/lib/shared/components/read-more/read-more.component.ts

@@ -0,0 +1,86 @@
+import { Component, Input, OnChanges } from '@angular/core';
+
+/**
+ * Reusable component to truncate text, it will add '...' and a read more button if the text is longer than specified,
+ * Conditions are word count,char count or line break count respectively
+ * @title
+ * Read More Component
+ * @example
+ *
+ * <app-read-more
+ *  [charCount]="60"
+ *  [wordCount]="12"
+ *  [lineBreaks]="4"
+ *  [text]="data?.description"
+ * ></app-read-more>
+ */
+@Component({
+  selector: 'app-read-more',
+  template: `
+    <p class='break-wrap inline' style='white-space: pre-wrap;' [ngClass]="{'hidden': fullText}"  [innerHTML]='rmTextShort'></p>
+  <p class='break-wrap inline' style='white-space: pre-wrap' [ngClass]="{'hidden': !fullText}"  [innerHTML]='rmTextFull'></p>
+  <p class='inline' [ngClass]="{'hidden': rmTextFull.length === rmTextShort.length}">
+    <small>
+      <a href='javascript:;' class='text-primary underline' (click)='readMore(true)' [hidden]='!showMore'> {{'more' | translate}}</a>
+  <a href='javascript:;' (click)='readMore(false)' class='text-primary underline' [hidden]='!showLess'> {{'less' | translate}}</a>
+  </small>
+  </p>`
+  ,
+  styles: ['p { margin-bottom:6px }']
+
+})
+export class ReadMoreComponent implements OnChanges {
+  /** text to be handled */
+  @Input() text: string;
+  /** Char count limit */
+  @Input() charCount = 300;
+  /** word count limit */
+  @Input() wordCount = 30;
+  /** line breaks limit */
+  @Input() lineBreaks = 4;
+  fullText = true;
+  showMore = false;
+  showLess = false;
+  rmTextShort = '';
+  rmTextFull = '';
+  inputWords = [];
+  constructor() {
+  }
+
+  readMore(flag) {
+    if (flag) {
+      this.showMore = false;
+      this.fullText = true;
+      this.rmTextFull = this.text;
+      this.showLess = true;
+    } else {
+      this.showLess = false;
+      this.showMore = true;
+      this.fullText = false;
+    }
+  }
+
+  ngOnChanges() {
+    this.rmTextShort = this.text ? this.text : '';
+    this.rmTextFull = this.text ? this.text : '';;
+    this.inputWords = this.text.split(' ');
+    if (this.inputWords.length > this.wordCount) {
+      this.fullText = false;
+      this.showMore = true;
+      this.rmTextShort = this.inputWords.slice(0, this.wordCount).join(' ') + '...';
+    } else {
+      if (this.rmTextShort.length > this.charCount) {
+        this.fullText = false;
+        this.showMore = true;
+        this.rmTextShort = this.rmTextShort.substr(0, this.charCount) + '...'
+      } else {
+        const lineBreaks = this.rmTextShort.split(/\n/g)
+        if (lineBreaks.length > this.lineBreaks) {
+          this.fullText = false
+          this.showMore = true
+          this.rmTextShort = lineBreaks.slice(0, this.lineBreaks).join('\n') + '...'
+        }
+      }
+    }
+  }
+}

package/src/lib/shared/components/search-autocomplete/search-autocomplete.component.html

@@ -0,0 +1,24 @@
+<div class="search-container">
+  <ng-container>
+    <div>
+      <label class="select-label" >{{ label | translate
+      }}</label>
+    </div>
+  </ng-container>
+  <!-- [customFilter]="disableFilter" -->
+  <ng-autocomplete #auto [data]="documentList" [searchKeyword]="'filter'" (selected)='selectItem($event)'
+    (inputChanged)='onSearchInputChange($event)' (closed)="close()" [itemTemplate]="itemTemplate"
+    [notFoundTemplate]="notFoundTemplate" [placeholder]="'correspondence-relation.searchby' | translate"
+    [debounceTime]='1000' [isLoading]="isLoading" (inputCleared)='inputCleared()'>
+  </ng-autocomplete>
+
+  <ng-template #itemTemplate let-item>
+    <div class="item">
+      <span>{{item.title}}</span>
+    </div>
+  </ng-template>
+
+  <ng-template #notFoundTemplate>
+    <div>{{'correspondence-relation.notfound' | translate}}</div>
+  </ng-template>
+</div>