nuxeo-development-framework 4.1.4 → 4.1.6

package/src/lib/components/dynamic-view/list-viewer/list-viewer.component.scss

@@ -0,0 +1,55 @@
+.title {
+    font-size: 12px;
+    cursor: pointer;
+    font-weight: bold;
+    margin-top: 4px;
+    color: lightgray;
+}
+.container {
+    display: flex;
+    place-content: space-between;
+    padding: 0px 0px;
+    font-weight: bold;
+    font-size: 14px;
+}
+
+.two-columns {
+    height: 63px;
+    overflow: hidden;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0px 5px;
+    border: 1px solid #d9dce2;
+    .wrapper {
+        display: inline-flex;
+        padding: 6px;
+        align-items: center;
+        width: 50%;
+    }
+}
+.no-data-section{
+    height: 63px;
+    border: 1px solid #d9dce2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: gray;
+    font-size: 14px;
+}
+.avatar-wrapper {
+    width: 35px;
+    height: 35px;
+    margin: 5px;
+}
+.show {
+    overflow: visible;
+    height: auto;
+}
+.fullName {
+    font-size: 11px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100px;
+}

package/src/lib/components/dynamic-view/list-viewer/list-viewer.component.spec.ts

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

package/src/lib/components/dynamic-view/list-viewer/list-viewer.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+/**
+ * A component to display a list of users
+ * @title
+ * List Viewer
+ */
+@Component({
+  selector: 'cts-list-viewer',
+  templateUrl: './list-viewer.component.html',
+  styleUrls: ['./list-viewer.component.scss']
+})
+export class ListViewerComponent implements OnInit {
+  /** label to be shown  */
+  @Input() label = '';
+  /** list of CC user */
+  @Input() data = [];
+  /** Further info required */
+  @Input() vertical = false;
+  show = false;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/components/file-manger/components/add-to-collection/add-to-collection.component.html

@@ -0,0 +1,48 @@
+<!-- <dx-popup class="popUpParent" [rtlEnabled]="rtlEnabled" id="photo-popup" [width]="500" [height]="200"
+    (onShown)="loadItems()" closeOnOutsideClick="true" title="{{ '' | translate }}"
+    [(visible)]="visible">
+
+</dx-popup>
+
+
+ -->
+<ng-template #contentTemplate>
+	<form>
+		<dx-form
+			class="collection-form-wrapper"
+			#createForm
+			[formData]="formData"
+			[disabled]="loading"
+		>
+			<dxi-item editorType="dxTextBox">
+				<ng-select
+					[items]="items$ | async"
+					bindLabel="displayLabel"
+					[addTag]="true"
+					addTagText="Add collection"
+					[multiple]="false"
+					[hideSelected]="true"
+					[minTermLength]="0"
+					[loading]="tagsLoading"
+					typeToSearchText="search"
+					[typeahead]="tagsInput$"
+					[(ngModel)]="selectedTags"
+					required
+					placeholder="{{ 'VOCABULARY.SELECT_ITEM' | translate }}"
+					name="selectedItem"
+					(change)="emitSelection($event)"
+				>
+				</ng-select>
+			</dxi-item>
+		</dx-form>
+	</form>
+</ng-template>
+
+<ng-template #actionsTemplate let-dialog="dialog">
+	<button
+		class="submission-button px-5"
+		(click)="dialog.executeAction(onFormCollectionSubmit, [$event])"
+	>
+		{{ 'FILE_MANAGER.ADD' | translate }}
+	</button>
+</ng-template>

package/src/lib/components/file-manger/components/add-to-collection/add-to-collection.component.spec.ts

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

package/src/lib/components/file-manger/components/add-to-collection/add-to-collection.component.ts

@@ -0,0 +1,181 @@
+import {
+	Component,
+	EventEmitter,
+	Injector,
+	Input,
+	OnChanges,
+	OnInit,
+	Output,
+	SimpleChanges,
+	TemplateRef,
+	ViewChild
+} from '@angular/core';
+import { DxFormComponent } from 'devextreme-angular';
+import { concat, Observable, of, Subject } from 'rxjs';
+import {
+	debounceTime,
+	distinctUntilChanged,
+	switchMap,
+	catchError,
+	tap,
+	map
+} from 'rxjs/operators';
+import { CustomToastrService } from '../../../custom-toastr/services/custom-toastr.service';
+import { FileManagerService } from '../../../../shared-services/file-manager.service';
+import { DialogOptions } from '../../../../shared/components/nuxeo-dialog/models/dialog-option.model';
+import { NdfNuxeoDialog } from '../../../../shared/components/nuxeo-dialog/nuxeo.dialog';
+import { BaseComponent } from '../../../../shared/components/base/base.component';
+import { NuxeoDialogService } from '../../../../shared/components/nuxeo-dialog/services/nuxeo-dialog.service';
+import { DialogActionType } from '../../../../shared/components/nuxeo-dialog/models/dialog-option.model';
+
+@Component({
+	selector: 'app-add-to-collection',
+	templateUrl: './add-to-collection.component.html',
+	styleUrls: ['./add-to-collection.component.scss']
+})
+export class AddToCollectionComponent extends BaseComponent implements OnInit {
+	@ViewChild(DxFormComponent, { static: false }) form: DxFormComponent;
+	@ViewChild('contentTemplate') contentTemplate!: TemplateRef<any>;
+	@ViewChild('actionsTemplate') actionsTemplate!: TemplateRef<any>;
+	@Input()
+	set visible(value: any) {
+		if (this._visible === value) {
+			return;
+		}
+		if (value) {
+			this.openDialog();
+		}
+		this._visible = value;
+		this.visibleChange.emit(this._visible);
+	}
+	get visible() {
+		return this._visible;
+	}
+	@Output()
+	visibleChange = new EventEmitter<any>();
+	@Input()
+	rtlEnabled = false;
+	@Input()
+	selectedItems: any;
+
+	isSelected: boolean = true;
+	collectionid: any;
+	selectedTags: any;
+	items$: Observable<any[]>;
+	tagsInput$ = new Subject<string>();
+	tagsLoading = false;
+	_visible = false;
+	constructor(
+		private fileManagerService: FileManagerService,
+		protected customToastrService: CustomToastrService,
+		public nuxeoDialogService: NuxeoDialogService,
+
+		injector: Injector
+	) {
+		super(injector);
+	}
+
+	ngOnInit(): void {}
+
+	openDialog(): void {
+		const options: DialogOptions = {
+			component: NdfNuxeoDialog,
+			config: {
+				title: this.translateService.instant('FILE_MANAGER.ADD_TO_COLLECTION'),
+				contentTemplate: this.contentTemplate,
+				actionsTemplate: this.actionsTemplate
+			}
+		};
+		this.nuxeoDialogService
+			.open(options)
+			.afterClosed()
+			.subscribe((res) => {
+				this.visible = false;
+			});
+	}
+
+	emitSelection(event) {
+		if (this.isSelected) {
+			this.fileManagerService
+				.createNewCollection(event.displayLabel)
+				.subscribe((res) => {
+					this.collectionid = res.uid;
+				});
+		} else this.collectionid = event.id;
+	}
+
+	loadItems() {
+		let searchterm = '';
+		this.isSelected = false;
+		let mycategories = [];
+		this.items$ = concat(
+			this.fileManagerService.getCollectionFromPP(searchterm).pipe(
+				switchMap((res: any) => {
+					res.entries.map((entry) => {
+						mycategories.push({
+							displayLabel: entry.title,
+							id: entry.uid,
+							path: entry.path,
+							icon: entry.properties['common:icon']
+						});
+					});
+					return of(mycategories);
+				})
+			), // default items
+			this.tagsInput$.pipe(
+				debounceTime(200),
+				distinctUntilChanged(),
+				tap(() => (this.tagsLoading = true)),
+				switchMap((searchterm) => {
+					return this.fileManagerService.getCollectionFromPP(searchterm).pipe(
+						catchError(() => of([])), // empty list on error
+						switchMap((searchCat) => {
+							let myInerCateg = [];
+							this.tagsLoading = false;
+							this.isSelected = true;
+							searchCat.entries.map((entry) => {
+								myInerCateg.push({
+									displayLabel: entry.title,
+									id: entry.uid,
+									path: entry.path,
+									icon: entry.properties['common:icon']
+								});
+							});
+							return of(myInerCateg);
+						})
+					);
+				})
+			)
+		);
+	}
+
+	onFormCollectionSubmit: DialogActionType = (e) => {
+		e.preventDefault();
+		this.loading = true;
+		return this.fileManagerService
+			.addToCollection(this.selectedItems, this.collectionid)
+			.pipe(
+				tap(
+					(res) => {
+						this.loading = false;
+						this.form.instance.resetValues();
+						this.selectedTags = null;
+						this.visible = false;
+						this.customToastrService.show(
+							'success',
+							'TOASTER.SUCCESS',
+							'TOASTER.DOCUMENT_ADDED_TO_COLLECTION'
+						);
+					},
+					(err) => {
+						this.loading = false;
+						this.customToastrService.show(
+							'error',
+							'TOASTER.ERROR',
+							'TOASTER.DOCUMENT_ADDED_TO_COLLECTION_ERROR'
+						);
+					}
+				)
+			);
+	};
+}

package/src/lib/components/file-manger/components/clipboard/clipboard.component.html

@@ -0,0 +1,88 @@
+<div class="clipboard-side-section relative">
+
+    <div class="p-3 h-full">
+        <div class="clipboard-header flex justify-between items-center border-b-2">
+            <span class="flex text-gray-500 font-bold items-center">
+                <span class="text-4xl bi bi-clipboard"></span>
+                <span class="mx-2 text-xl">{{'clipboard' | translate}}</span>
+            </span>
+            <mat-icon class="close-icon text-gray-500 cursor-pointer" (click)="closeClipboard()"
+                [matTooltip]="'BUTTONS.CLOSE' | translate">close</mat-icon>
+        </div>
+        <!-- <div class="h-full font-bold d-flex justify-center items-center" *ngIf="clipboardLoading">
+            {{ "loading" | translate }}
+        </div> -->
+        <div class="w-full h-px bg-gray-200 mb-3" *ngIf="clipboardLoading">
+            <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+        </div>
+        <div class="clipboard-content flex flex-col justify-between items-between">
+            <div class="h-full flex justify-center items-center text-gray-500"
+                *ngIf="clipboardDocments.length === 0">{{'no_clipboard_items' | translate}}</div>
+
+            <div class="px-2 h-5/6 overflow-y-auto" *ngIf="clipboardDocments.length > 0">
+                <div class="border-b-2" *ngFor="let document of clipboardDocments">
+                    <div class="py-1 w-82 flex  items-center justify-between">
+                        <div class="flex items-center w-5/6">
+                            <mat-checkbox [(ngModel)]="document.isSelected" (change)="checking()"> </mat-checkbox>
+                            <div class="flex w-full">
+                                <!-- <title-with-icon class="w-1/6 -my-1.5" [context]="document"
+                                    [showTitle]="false"></title-with-icon> -->
+                            <app-display-suitable-icon class="mx-1" [data]="document" [size]="'40px'"></app-display-suitable-icon>
+
+                                <!--  -->
+                                <div *ngIf="document.isFile === 'File'"
+                                    class="justify-center flex flex-col flex-1 flex-grow-0 w-5/6">
+                                    <div class="text-base text-gray-500 font-bold truncate"
+                                        [title]="document.properties?.['file:content']?.['name']"
+                                        [alt]="document.properties?.['file:content']?.['name']">
+                                        {{document['title']}}
+                                    </div>
+                                    <div class="text-gray-500 text-sm text-nowrap">
+                                        {{((document.properties?.['file:content']?.['length']) / (1024 *
+                                        1024)).toFixed(2) }}
+                                        MB
+                                    </div>
+                                </div>
+                                <div class="
+                                     d-flex
+                                     items-center
+                                     text-base text-gray-500
+                                     font-bold
+                                 " *ngIf="document.isFile === 'Folder'">
+                                    {{ document?.title }}
+                                </div>
+                            </div>
+                        </div>
+                        <span [matTooltip]="'BUTTONS.REMOVE_CLIPBOARD' | translate"
+                            class="cursor-pointer w-5 h-5 rounded-full border-2 flex justify-center items-center border-gray-500 "
+                            (click)="deletefromClipboard(document)">
+                            <span class="text-gray-500 bi bi-x text-lg flex items-center"></span>
+                        </span>
+                    </div>
+                    <div class="text-md text-gray-500 text-center my-2">
+                        <span *ngIf="document.canCopyToTarget && !document.canMoveToTarget">{{'can_copy_only' |
+                            translate}}</span>
+                        <span *ngIf="!document.canCopyToTarget && document.canMoveToTarget">{{'can_move_only' |
+                            translate}}</span>
+                        <span *ngIf="document.canCopyToTarget && document.canMoveToTarget">{{'can_copy_and_move' |
+                            translate}}</span>
+                        <span
+                            *ngIf="!document.canCopyToTarget && !document.canMoveToTarget">{{'can_not_copy_and_move'
+                            | translate}}</span>
+                    </div>
+                </div>
+
+            </div>
+            <div class="h-1/6 flex w-full justify-center items-center">
+                <button class="submission-button mx-2" [disabled]="!enableCopy"
+                    (click)="copyFromInsideClipboard()">{{'BUTTONS.COPY' | translate}}</button>
+                <button class="submission-button mx-2" [disabled]="!enableMove"
+                    (click)="moveFromInsideClipboard()">{{'BUTTONS.MOVE' | translate}}</button>
+            </div>
+        </div>
+    </div>
+
+    <div class="bg-transparent absolute top-0 bottom-0 left-0 right-0 " *ngIf="clipboardLoading">
+
+    </div>
+</div>

package/src/lib/components/file-manger/components/clipboard/clipboard.component.scss

@@ -0,0 +1,17 @@
+.clipboard-side-section {
+    width: 0px;
+    overflow-x: hidden;
+    height: 91vh;
+    background-color: white;
+    overflow: hidden;
+    border: 1px solid lightgray;
+    z-index: 999;
+    transition: 100ms ease-in-out;
+    border-bottom: none;
+    .clipboard-header{
+        height: 60px;
+    }
+    .clipboard-content{
+        height: calc(100% - 60px);
+    }
+}

package/src/lib/components/file-manger/components/clipboard/clipboard.component.spec.ts

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