nuxeo-development-framework 4.1.4 → 4.1.6

package/src/lib/components/file-manger/components/scan-modal/scan-modal.component.html

@@ -0,0 +1,130 @@
+<ndf-nuxeo-dialog dialogTitle="{{ 'CREATE.SCAN' | translate }}">
+	<ng-template #contentTemplate>
+		<div
+			class="scanner-tabs d-flex justify-around items-center border-b-2 border-gray-200 mb-5 text-gray-900 text-lg"
+		>
+			<div
+				class="scanner-single-tab cursor-pointer w-1/2 text-center py-2 border-gray-900 hover:bg-gray-100"
+				(click)="changTabTo('scan')"
+				[ngClass]="{ 'font-bold border-b-4': activeTab === 'scan' }"
+			>
+				{{ 'CREATE.SCAN' | translate }}
+			</div>
+			<div
+				class="scanner-single-tab cursor-pointer w-1/2 text-center py-2 border-gray-900 hover:bg-gray-100"
+				(click)="changTabTo('form')"
+				[ngClass]="{ 'font-bold border-b-4': activeTab === 'form' }"
+			>
+				{{ 'CREATE.DETAILS' | translate }}
+			</div>
+		</div>
+		<div class="tabs-body-wrapper">
+			<!-- uploader indicator loading -->
+			<div
+				class="upload-loader mx-2"
+				*ngIf="uploadMangmentService.uploadedFilesStatus.uploadInProgress"
+			>
+				<mat-progress-bar mode="indeterminate"></mat-progress-bar>
+			</div>
+
+			<!-- scanner -->
+			<div class="" [ngClass]="{ 'd-none': activeTab === 'form' }">
+				<app-document-scan
+					[hideUploadButton]="true"
+					[useStoredFile]="true"
+				></app-document-scan>
+			</div>
+
+			<!-- forms and properties  -->
+			<div class="forms-section" [ngClass]="{ 'd-none': activeTab === 'scan' }">
+				<div class="w-2/3">
+					<div class="mb-5">
+						<div class="label-style">
+							{{ 'CREATE.FILE_TYPE' | translate }}
+						</div>
+						<div class="text-base text-gray-900">
+							{{ isArabic ? fileType.arabicText : fileType.englishText }}
+						</div>
+					</div>
+					<div class="file-fields mt-3" SetRtl>
+						<form [formGroup]="fileForm" *ngIf="fileForm">
+							<div class="single-field mb-3">
+								<div class="label-style">
+									{{ 'CREATE.TITLE' | translate
+									}}<span class="text-red-500">*</span>
+								</div>
+								<input
+									class="field-style"
+									formControlName="title"
+									placeholder=" {{ 'CREATE.TITLE' | translate }}"
+								/>
+							</div>
+							<div class="single-field mb-3">
+								<div class="label-style">
+									{{ 'CREATE.DESCRIPTION' | translate }}
+								</div>
+								<input
+									class="field-style"
+									formControlName="description"
+									placeholder=" {{ 'CREATE.DESCRIPTION' | translate }}"
+								/>
+							</div>
+
+							<!------------------ new statis form  ---------------------------->
+							<div *ngIf="usingExtraFields">
+								<app-dynamic-fields-renderer
+									[form]="fileForm"
+									[agencyNameFilter]="agencyNameFilter"
+									[countryNameFilter]="countryNameFilter"
+								></app-dynamic-fields-renderer>
+							</div>
+
+							<!-- ----------------------------------------------------------- -->
+						</form>
+						<!-- *ngIf="" -->
+						<div
+							class="dynamic-part -mx-4"
+							*ngIf="selectedFile.dynamicForm && showRenderer"
+						>
+							<app-dynamic-form
+								[form]="selectedFile.dynamicForm"
+								[data]="temporaryDyanmicData"
+								(change)="ondynamicFormChange($event)"
+							></app-dynamic-form>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</ng-template>
+
+	<ng-template #actionsTemplate let-dialog="dialog">
+		<button
+			(click)="dialog.executeAction(createDocument)"
+			[disabled]="
+				scannerUploadButton?.disabled ||
+				!selectedFile.dynamicData.valid ||
+				fileForm.invalid
+			"
+			[ngClass]="{
+				'opacity-30 cursor-not-allowed':
+					scannerUploadButton?.disabled ||
+					!selectedFile.dynamicData.valid ||
+					fileForm.invalid
+			}"
+			class="submission-button"
+		>
+			{{
+				uploadMangmentService.scanCreationFailed
+					? ('BUTTONS.TRY_AGAIN' | translate)
+					: ('BUTTONS.CREATE' | translate)
+			}}
+		</button>
+		<button
+			class="cancelation-button mx-2"
+			(click)="dialog.executeAction(minimizDialog)"
+		>
+			{{ 'BUTTONS.MINIMIZED' | translate }}
+		</button>
+	</ng-template>
+</ndf-nuxeo-dialog>

package/src/lib/components/file-manger/components/scan-modal/scan-modal.component.scss

@@ -0,0 +1,9 @@
+.forms-section{
+    display: flex;
+    justify-content: center;
+}
+.tabs-body-wrapper{
+    height: calc(100% - 125px);
+    overflow-y: auto;
+    overflow-x: hidden;
+}

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

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

package/src/lib/components/file-manger/components/scan-modal/scan-modal.component.ts

@@ -0,0 +1,401 @@
+import { Component, Inject, Injector, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { UploadManagmentService } from '../../../../shared-services/upload-managment.service';
+import { DialogMangmentService } from '../../../../shared-services/dialog-mangment.service';
+import { DynamicFormService } from '../../../../shared-services/dynamic-form.service';
+import { FileManagerService } from '../../../../shared-services/file-manager.service';
+import { UserService } from '../../../../shared-services/user.service';
+import { of, Subscription } from 'rxjs';
+import * as moment from 'moment';
+import { CustomToastrService } from '../../../custom-toastr/services/custom-toastr.service';
+import { DocumentScanService } from '../../../documents/components/document-scan/document-scan.service';
+import { DateHelperService } from '../../../hijri-gregorian-datepicker/services/date-helper.service';
+import { AdapterService } from '../../../../core/adapters/adapter.service';
+import { TranslationService } from '../../../../core/services/translation/translation.service';
+import { NuxeoService } from '../../../../core/services/nuxeo/nuxeo.service';
+import { AppConfigService } from '../../../../configuration/app-config.service';
+import { BaseDialogComponent } from '../../../../shared/components/base/base-dialog.component';
+import { DialogActionType } from '../../../../shared/components/nuxeo-dialog/models/dialog-option.model';
+import { tap } from 'rxjs/operators';
+
+@Component({
+	selector: 'app-scan-modal',
+	templateUrl: './scan-modal.component.html',
+	styleUrls: ['./scan-modal.component.scss']
+})
+export class ScanModalComponent
+	extends BaseDialogComponent<ScanModalComponent, any, any>
+	implements OnInit
+{
+	scannerUploadButton;
+	fileType;
+	source;
+	activeTab = 'scan';
+	createWhenFinishMode = false;
+	myEnvironment;
+	selectedFile = {
+		staticData: {},
+		fileType: '',
+		dynamicForm: '',
+		dynamicData: {
+			valid: false,
+			data: {}
+		},
+		file: ''
+	};
+	temporaryDyanmicData = {};
+	showRenderer = false;
+
+	uploadStartSubscription: Subscription;
+	fileChangeSubscription: Subscription;
+	fileFormSubscription: Subscription;
+	agencyCategCodeSubscription: Subscription;
+	countryCategCodeSubscription: Subscription;
+	langSubscription: Subscription;
+
+	showStaticForm = false;
+	usingExtraFields = false; // flage to switch between static form types
+	fileForm: FormGroup;
+	staticFormFields;
+	agencyNameFilter;
+	countryNameFilter;
+
+	constructor(
+		@Inject(MAT_DIALOG_DATA) public data,
+		public dialogRef: MatDialogRef<ScanModalComponent>,
+		public uploadMangmentService: UploadManagmentService,
+		public dialogMangmentService: DialogMangmentService,
+		private fileMangerService: FileManagerService,
+		private tosterService: CustomToastrService,
+		public formBuilder: FormBuilder,
+		private dynamicFormService: DynamicFormService,
+		private dateHelperService: DateHelperService,
+		public adapter: AdapterService,
+		private translationService: TranslationService,
+		private nuxeoService: NuxeoService,
+		private userService: UserService,
+		private appConfService: AppConfigService,
+		@Inject('environment') private envirnoment,
+		private documentScanService: DocumentScanService,
+		injector: Injector
+	) {
+		super(injector);
+		this.myEnvironment = this.envirnoment;
+	}
+
+	ngOnInit(): void {
+		this.createWhenFinishMode = false;
+		this.fileType = this.dialogMangmentService.fileType;
+		this.source = this.dialogMangmentService.addingFrom;
+
+		this.fileMangerService
+			.getFileSchemas(this.fileType.type)
+			.subscribe((schemas) => {
+				schemas.map((item) => {
+					if (item.name === 'generaldocument') {
+						this.usingExtraFields = true;
+					}
+				});
+				this.initiatfileForm();
+				//if starting from filemnager then i have fixed file type for all attachmetn and single dynaimc form  type
+				if (this.source === 'fileManger') {
+					if (
+						this.uploadMangmentService.uploadedFilesStatus.uploadedFiles
+							.length > 0
+					) {
+						setTimeout(() => {
+							this.selectedFile = {
+								...this.uploadMangmentService.uploadedFilesStatus.uploadedFiles.shift()
+							};
+							this.temporaryDyanmicData = this.selectedFile.dynamicData.data;
+							this.fileForm.patchValue(this.selectedFile.staticData);
+							if (this.selectedFile['staticData']['agencyCategoryCode']) {
+								this.agencyNameFilter = {
+									category:
+										this.selectedFile['staticData']['agencyCategoryCode']
+								};
+							}
+							if (this.selectedFile['staticData']['countryCategoryCode']) {
+								this.countryNameFilter = {
+									category:
+										this.selectedFile['staticData']['countryCategoryCode']
+								};
+							}
+							this.openSubscriptions();
+						}, 2000);
+						setTimeout(() => {
+							this.showRenderer = true;
+						}, 3000);
+					} else {
+						this.selectedFile.dynamicForm =
+							this.dialogMangmentService.storedDynamicForm;
+						this.showRenderer = true;
+						this.openSubscriptions();
+					}
+				}
+			});
+
+		this.uploadStartSubscription =
+			this.documentScanService.uploadStart.subscribe((res) => {
+				this.uploadMangmentService.uploadedFilesStatus.uploadInProgress = res;
+			});
+		this.fileChangeSubscription = this.documentScanService.fileChange.subscribe(
+			(event) => {
+				//console.log(event);
+				this.selectedFile.file = event;
+				let payLoad = this.constructPayLoad(this.selectedFile);
+				this.fileMangerService
+					.createFile(payLoad, this.fileMangerService.selectedFolderId)
+					.subscribe((res) => {
+						if (res['status'] && res['status'] === 'failed') {
+							this.uploadMangmentService.scanCreationFailed = true;
+							this.tosterService.show(
+								'error',
+								'TOASTER.ERROR',
+								'TOASTER.UPLOAD_ERROR'
+							);
+							this.removeSubscription();
+						} else {
+							this.fileMangerService.onRefreshingFileManger.next();
+							this.tosterService.show(
+								'success',
+								'TOASTER.SUCCESS',
+								'TOASTER.FILE_CREATED_SUCCE'
+							);
+							this.documentScanService.storedFile = {};
+							this.uploadMangmentService.resetStatus();
+							this.removeSubscription();
+						}
+					});
+			}
+		);
+
+		this.scannerUploadButton = document.getElementById('scannerUploadButton');
+	}
+
+	initiatfileForm() {
+		if (this.usingExtraFields) {
+			this.fileForm = this.formBuilder.group({
+				title: ['', [Validators.required]],
+				description: [''],
+				subject: ['', [Validators.required]],
+				documentNumber: [''],
+				gdocumentDate: [null, [Validators.required]],
+				secrecyLevel: [null],
+				importanceLevel: [null],
+				departmentCode: [''],
+				agencyCategoryCode: [null],
+				agencyName: [null],
+				countryCategoryCode: [null],
+				countryName: [null],
+				remarks: ['']
+			});
+		} else {
+			this.fileForm = this.formBuilder.group({
+				title: ['', [Validators.required]],
+				description: ['']
+			});
+		}
+		this.staticFormFields =
+			this.appConfService.myConfiguration.staticFormFields;
+		if (this.fileFormSubscription) {
+			this.fileFormSubscription.unsubscribe();
+		}
+		if (this.fileForm.get('departmentCode')) {
+			this.fileForm
+				.get('departmentCode')
+				.setValue(this.userService.getUserDepartmentFromPath(this.data.path));
+		}
+	}
+
+	openSubscriptions() {
+		this.fileFormSubscription = this.fileForm.valueChanges.subscribe((data) => {
+			this.selectedFile.staticData = data;
+		});
+
+		if (this.fileForm.get('agencyCategoryCode')) {
+			this.agencyCategCodeSubscription = this.fileForm
+				.get('agencyCategoryCode')
+				.valueChanges.subscribe((res) => {
+					this.fileForm.get('agencyName').setValue(null);
+					this.agencyNameFilter = {
+						category: res
+					};
+				});
+		}
+
+		if (this.fileForm.get('countryCategoryCode')) {
+			this.countryCategCodeSubscription = this.fileForm
+				.get('countryCategoryCode')
+				.valueChanges.subscribe((res) => {
+					this.fileForm.get('countryName').setValue(null);
+					this.countryNameFilter = {
+						category: res
+					};
+				});
+		}
+	}
+
+	onUploading(event) {
+		this.uploadMangmentService.uploadedFilesStatus.uploadInProgress = event;
+	}
+
+	// onScannerSuccess(event) {
+	//   //console.log(event);
+	//   this.selectedFile.file = event;
+	//   let payLoad = this.constructPayLoad(this.selectedFile);
+	//   this.fileMangerService.createFile(payLoad, this.fileMangerService.selectedFolderId).subscribe(res => {
+	//     this.fileMangerService.onRefreshingFileManger.next();
+	//     this.tosterService.show('success', 'TOASTER.SUCCESS', "TOASTER.FILE_CREATED_SUCCE")
+	//     this.documentScanService.storedFile = {};
+	//     this.uploadMangmentService.resetStatus();
+	//   })
+	// }
+
+	ondynamicFormChange(dynamicData) {
+		if (dynamicData.data) {
+			console.log(dynamicData.data);
+			this.selectedFile.dynamicData = { ...dynamicData };
+		}
+	}
+
+	closeDialog() {
+		this.documentScanService.storedFile = {};
+		this.removeSubscription();
+		this.dialogRef.close(false);
+	}
+
+	minimizDialog: DialogActionType = () => {
+		this.documentScanService.onMinimizing.emit(true);
+		this.uploadMangmentService.uploadedFilesStatus.uploadedFiles.push({
+			...this.selectedFile
+		});
+		this.removeSubscription();
+		this.dialogRef.close(true);
+		return of(null);
+	};
+
+	removeSubscription() {
+		setTimeout(() => {
+			this.uploadStartSubscription
+				? this.uploadStartSubscription.unsubscribe()
+				: '';
+			this.fileChangeSubscription
+				? this.fileChangeSubscription.unsubscribe()
+				: '';
+		}, 2000);
+	}
+
+	startAddingProperties() {
+		this.uploadMangmentService.addingPropertiesMode = true;
+	}
+
+	createDocument: DialogActionType = () => {
+		this.documentScanService.onMinimizing.emit(true);
+		this.uploadMangmentService.uploadedFilesStatus.uploadedFiles.push({
+			...this.selectedFile
+		});
+		this.scannerUploadButton.click();
+		this.dialogRef.close(true);
+		return of(null);
+	};
+
+	constructPayLoad(file) {
+		let props = this.dynamicFormService.constructDynamicFormPayload(
+			file.dynamicData.data,
+			file.dynamicForm
+		);
+		let staticFormData = this.mappingStaticData(file.staticData);
+
+		let param = {
+			document: {
+				type: this.fileType.type,
+				name: file.staticData.title,
+				properties: {
+					...props,
+					...staticFormData,
+					'file:content': {
+						'upload-batch': file.file.blob['upload-batch'],
+						'upload-fileId': file.file.blob['upload-fileId']
+					}
+				}
+			}
+		};
+		if (file.fileType.documentCode) {
+			param['documentTypeCode'] = file.fileType.documentCode;
+		}
+		return { params: param, originFile: file };
+	}
+
+	mappingStaticData(data) {
+		if (data.gdocumentDate && data.gdocumentDate !== null) {
+			moment.locale('en');
+			data['hdocumentDate'] = this.dateHelperService.gregorianToHijri(
+				data.gdocumentDate,
+				'iYYYY-iMM-iDD'
+			);
+			data.gdocumentDate =
+				moment(data.gdocumentDate).format('YYYY-MM-DDT00:00:00.000') + 'Z';
+		}
+		return this.adapter.adaptOut(data, this.staticFormFields);
+	}
+
+	constructDynamicFormPayload(file) {
+		let updatedDynamicValues = {};
+		Object.keys(file?.dynamicData?.data).map((key) => {
+			let updatedKey = key.replace(':', '');
+			let prefix = file.dynamicForm.prefix[updatedKey];
+			if (prefix) {
+				// check if component is user selector to map its data from object to username or id only
+				if (
+					file.dynamicData.data[key] &&
+					file.dynamicData.data[key]['userSelector'] &&
+					file.dynamicData.data[key]['userSelector'] === true
+				) {
+					updatedDynamicValues[prefix + ':' + updatedKey] = file.dynamicData
+						.data[key]['value']['id']
+						? file.dynamicData.data[key]['value']['id']
+						: file.dynamicData.data[key]['value']['properties']['username'];
+				} else {
+					updatedDynamicValues[prefix + ':' + updatedKey] =
+						file.dynamicData.data[key];
+				}
+			} else {
+				if (
+					file.dynamicData.data[key]['userSelector'] &&
+					file.dynamicData.data[key]['userSelector'] === true
+				) {
+					updatedDynamicValues[updatedKey] = file.dynamicData.data[key][
+						'value'
+					]['id']
+						? file.dynamicData.data[key]['value']['id']
+						: file.dynamicData.data[key]['value']['properties']['username'];
+				} else {
+					updatedDynamicValues[updatedKey] = file.dynamicData.data[key];
+				}
+			}
+		});
+		return updatedDynamicValues;
+	}
+
+	createWhenFinish() {}
+
+	changTabTo(tabName) {
+		this.activeTab = tabName;
+	}
+	checkValidation() {
+		return false;
+	}
+
+	ngOnDestroy() {
+		this.langSubscription ? this.langSubscription.unsubscribe() : '';
+		this.agencyCategCodeSubscription
+			? this.agencyCategCodeSubscription.unsubscribe()
+			: null;
+		this.countryCategCodeSubscription
+			? this.countryCategCodeSubscription.unsubscribe()
+			: null;
+		this.fileFormSubscription ? this.fileFormSubscription.unsubscribe() : null;
+	}
+}