nuxeo-development-framework 3.0.9 → 3.1.2

package/src/lib/components/file-manger/file-manager.abstract.ts

@@ -0,0 +1,1347 @@
+
+import { MatDialog } from "@angular/material/dialog";
+import { ActivatedRoute, NavigationStart, Params, Router } from "@angular/router";
+import { IconService } from "../display-suitable-icon/display-suitable-icon/icon.service";
+import { DxFileManagerComponent, DxFormComponent, DxTreeViewComponent } from "devextreme-angular";
+import { combineLatest, concat, from, Observable, of, Subject, Subscription } from "rxjs";
+import { catchError, first, map, mergeMap, reduce, takeUntil, tap, toArray } from "rxjs/operators";
+import { FileManagerAdapter } from "../../shared-services/file-manager.adapter";
+
+import { FileManagerService } from "../../shared-services/file-manager.service";
+
+import * as FileSaver from 'file-saver';
+import { AfterViewChecked, ChangeDetectorRef, Component, HostListener, Inject, Injector, OnDestroy, OnInit, ViewChild } from "@angular/core";
+import { DialogMangmentService } from "../../shared-services/dialog-mangment.service";
+import { UploadManagmentService } from "../../shared-services/upload-managment.service";
+import { PublishDialogComponent } from "./components/publish-dialog/publish-dialog.component";
+import { ConfirmationDialogComponent } from "../confirmation-dialog/confirmation-dialog/confirmation-dialog.component";
+import { SharedDocsService } from "../../shared-services/shared-docs.service";
+import { UpdateModalComponent } from "./components/update-modal/update-modal.component";
+import { FolderModalComponent } from "./components/folder-modal/folder-modal.component";
+import { CreateModalComponent } from "./components/create-modal/create-modal.component";
+import { ScanModalComponent } from "./components/scan-modal/scan-modal.component";
+import { TemplateModalComponent } from "./components/template-modal/template-modal.component";
+import { CreationTypeComponent } from "./components/creation-type/creation-type.component";
+import { DynamicFormService } from "../../shared-services/dynamic-form.service";
+import { EvaluatorsService } from "../../directive/permissions/evaluators.service";
+import { CallApiService } from "../../Core/services/callApi/call-api.service";
+import { AdapterService } from "../../Core/adapters/adapter.service";
+import { TranslationService } from "../../Core/services/translation/translation.service";
+import { AppConfigService } from "../../configuration/app-config.service";
+import { CustomToastrService } from "../custom-toastr/services/custom-toastr.service";
+import { UserPreferenceValues, UserPreferencesService } from "../../Core/services/user/user-preferences.service";
+import { DocumentScanService } from "../documents/components/document-scan/document-scan.service";
+import { NuxeoService } from "../../Core/services/nuxeo/nuxeo.service";
+import { each, union } from 'lodash';
+
+@Component({
+    template: ''
+})
+//  
+export class FileManagerAbstract implements  OnInit, AfterViewChecked {
+    subscriptions: Subscription[] = [];
+    contextMenuActions = [];
+    @ViewChild(DxFileManagerComponent, { static: false })
+    fileManager: DxFileManagerComponent;
+    @ViewChild(DxFormComponent, { static: false }) form: DxFormComponent;
+    @ViewChild(DxTreeViewComponent, { static: false })
+    treeView: DxTreeViewComponent;
+    @HostListener('document:click', ['$event'])
+    clickout(event) {
+        if (
+            (event.srcElement.className === 'dx-scrollable-content' ||
+                event.srcElement.className === 'dx-scrollview-content') &&
+            this.isItemSelected
+        ) {
+            this.multiSelectedkeys = [''];
+        }
+    }
+    isItemSelected: boolean = false;
+    itemListView: any;
+    clicked = false;
+    fileManagerObj;
+    fileItems;
+    multiSelectedkeys: string[];
+    currentPath: string = '';
+    currentFolder: any;
+    path: any;
+    config;
+    configKey = 'allFiles';
+    headers;
+    onDestroy$ = new Subject<boolean>();
+    fields: any;
+    pageProvider: string;
+    operation: any;
+    canCreate: boolean;
+    currentItem: any;
+    selectedItems: any;
+    selecteditemsNames: any;
+    selectedItem: any;
+    loading = false;
+    rtlEnabled = false;
+    isArabic = true;
+    menuDirection = 'before';
+    showDetails = false;
+    sideMenuLoading = false;
+    disable: boolean = true;
+    itemsSelected: any;
+    currentDirectory: any;
+    selectedItemLength: boolean;
+    multipleItems: any;
+    selectedItemsObjects: any[];
+    allowedFileTypes = [];
+    allowedFolderTypes = [];
+    loadingFolderTypes = false;
+    loadingFileTypes = false;
+    cancelableOperations = {
+        deletePopupVisible: false,
+        movePopupVisible: false,
+        copyPopupVisible: false,
+        transferPopupVisible: false,
+        loanPopupVisible: false,
+        createPopupVisible: false
+    };
+    showfolderTemplates = false;
+    contextMenuItems = [];
+    toolbarItems = [];
+    lastFolderTrackId = null;
+    itemToDisplay: any = {};
+    directory: any;
+    selectedFolderPath: any;
+    myCurrecntFolderData;
+    myFileMangerInstance: any;
+    newSelectedWithIdPrefix: string
+    clipboardItems = []; // array of id to items in clipboard
+    showClipboard = false;
+    showDgdaClipboard = false; // flage related to dgda clipboard
+    cancelButton = {
+        text: this.isArabic ? 'إلغاء' : 'Cancel',
+        onClick: () => {
+            Object.keys(this.cancelableOperations).forEach(key => {
+                this.cancelableOperations[key] = false;
+            });
+        },
+    };
+    moveTo = () => {
+        if (this.treeView !== undefined && this.treeView.instance !== null) {
+            let mytreeInstance: any = this.treeView.instance;
+            mytreeInstance.option('dataSource', []);
+        }
+        this.cancelableOperations['movePopupVisible'] = true;
+
+    }
+    copyTo = () => {
+        if (this.treeView !== undefined && this.treeView.instance !== null) {
+            let mytreeInstance: any = this.treeView.instance;
+            mytreeInstance.option('dataSource', []);
+        }
+        this.cancelableOperations['copyPopupVisible'] = true;
+
+    }
+    delete = () => {
+
+        this.cancelableOperations['deletePopupVisible'] = true;
+    }
+    transferTo = () => {
+        this.cancelableOperations['transferPopupVisible'] = true;
+    }
+    loanRequest = () => {
+        this.cancelableOperations['loanPopupVisible'] = true;
+    }
+    createFolder = () => {
+        // this.selectedItem =
+        //         fileSystemItem && fileSystemItem?.dataItem.id
+        //             ? fileSystemItem?.dataItem.id
+        //             : directory.dataItem === undefined
+        //                 ? this.mainFolder
+        //                 : directory?.dataItem?.id;
+        //     this.selectedObject = fileSystemItem?.dataItem;
+        this.cancelableOperations['createPopupVisible'] = true;
+    }
+    downloadFile = () => {
+        if (this.multipleItems.length === 1) {
+            window.open(
+                this.multipleItems[0].dataItem?.entity?.properties[
+                    'file:content'
+                ].data,
+                'blank'
+            );
+        } else {
+            this.multipleItems.forEach((item) => {
+                fetch(
+                    item.dataItem?.entity?.properties['file:content'].data
+                )
+                    .then((res) => res.blob())
+                    .then((blob) => {
+                        FileSaver.saveAs(blob, item.name);
+                    })
+                    .catch((err) =>
+                        this.customToastrService.show(
+                            'error',
+                            'TOASTER.ERROR',
+                            'TOASTER.IMAGE_NOT_FOUND'
+                        )
+                    );
+            });
+        }
+    }
+    refresh = () => {
+        this.reinitializeFolderTree(this.getCurrentFolderId(this.getCurrentDirectory()), this.getCurrentDirectory());
+    };
+    addToQuickAccess = () => {
+        this.fileManagerService
+            .addToQuickAccess(this.selectedItems)
+            .subscribe(
+                async (res) => {
+                    this.reinitializeFolderTree(this.getCurrentFolderId(this.getCurrentDirectory()), this.getCurrentDirectory());
+                    this.myFileMangerInstance.option(
+                        'toolbar.fileSelectionItems',
+                        []
+                    );
+                    this.customToastrService.show(
+                        'success',
+                        'TOASTER.SUCCESS',
+                        'TOASTER.DOCUMENT_ADDED_TO_QUICK_ACCESS'
+                    );
+                },
+                (err) => {
+                    this.customToastrService.show(
+                        'error',
+                        'TOASTER.ERROR',
+                        'TOASTER.DOCUMENT_ADDED_TO_QUICK_ACCESS_ERROR'
+                    );
+                }
+            );
+    };
+    removeFromQuickAccess = () => {
+        this.fileManagerService
+            .removeFromQuickAccess(this.selectedItems)
+            .subscribe(
+                async (res) => {
+                    this.reinitializeFolderTree(this.getCurrentFolderId(this.getCurrentDirectory()), this.getCurrentDirectory());
+                    this.myFileMangerInstance.option(
+                        'toolbar.fileSelectionItems',
+                        []
+                    );
+                    this.customToastrService.show(
+                        'success',
+                        'TOASTER.SUCCESS',
+                        'TOASTER.DOCUMENT_REMOVED_FROM_QUICK_ACCESS'
+                    );
+                },
+                (err) => {
+                    this.customToastrService.show(
+                        'error',
+                        'TOASTER.ERROR',
+                        'TOASTER.DOCUMENT_REMOVED_FROM_QUICK_ACCESS_ERROR'
+                    );
+                }
+            );
+
+    }
+    addToFavorites = () => {
+        this.fileManagerService
+            .addToFavorites(this.selectedItems)
+            .subscribe(
+                async (res) => {
+                    this.multiSelectedkeys = [''];
+                    this.reinitializeFolderTree(this.getCurrentFolderId(this.getCurrentDirectory()), this.getCurrentDirectory());
+                    this.customToastrService.show(
+                        'success',
+                        'TOASTER.SUCCESS',
+                        'TOASTER.DOCUMENT_ADDED_TO_FAVORITES'
+                    );
+                },
+                (err) => {
+                    this.customToastrService.show(
+                        'error',
+                        'TOASTER.ERROR',
+                        'TOASTER.DOCUMENT_ADDED_TO_FAVORITES_ERROR'
+                    );
+                }
+            );
+    }
+    removeFromFavorites = () => {
+        this.fileManagerService
+            .removeFromFavorites(this.selectedItems)
+            .subscribe(
+                async (res) => {
+                    this.multiSelectedkeys = [''];
+                    this.reinitializeFolderTree(this.getCurrentFolderId(this.getCurrentDirectory()), this.getCurrentDirectory());
+                    this.customToastrService.show(
+                        'success',
+                        'TOASTER.SUCCESS',
+                        'TOASTER.DOCUMENT_REMOVED_FROM_FAVORITES'
+                    );
+                },
+                (err) => {
+                    this.customToastrService.show(
+                        'error',
+                        'TOASTER.ERROR',
+                        'TOASTER.DOCUMENT_REMOVED_FROM_FAVORITES_ERROR'
+                    );
+                }
+            );
+
+    }
+    setSync = () => {
+        this.fileManagerService.setSync(this.selectedItems).subscribe(
+            async (res) => {
+                this.reinitializeFolderTree(this.getCurrentFolderId(this.getCurrentDirectory()), this.getCurrentDirectory());
+                this.myFileMangerInstance.option(
+                    'toolbar.fileSelectionItems',
+                    []
+                );
+                this.customToastrService.show(
+                    'success',
+                    'TOASTER.SUCCESS',
+                    'TOASTER.DOCUMENT_SYNCED'
+                );
+            },
+            (err) => {
+                this.customToastrService.show(
+                    'error',
+                    'TOASTER.ERROR',
+                    'TOASTER.DOCUMENT_SYNCED_ERROR'
+                );
+            }
+        );
+
+    }
+    unsetSync = () => {
+
+        this.fileManagerService.unSetSync(this.selectedItems).subscribe(
+            async (res) => {
+                this.reinitializeFolderTree(this.getCurrentFolderId(this.getCurrentDirectory()), this.getCurrentDirectory());
+                this.myFileMangerInstance.option(
+                    'toolbar.fileSelectionItems',
+                    []
+                );
+                this.customToastrService.show(
+                    'success',
+                    'TOASTER.SUCCESS',
+                    'TOASTER.DOCUMENT_UNSYNCED'
+                );
+            },
+            (err) => {
+                this.customToastrService.show(
+                    'error',
+                    'TOASTER.ERROR',
+                    'TOASTER.DOCUMENT_UNSYNCED_ERROR'
+                );
+            }
+        );
+    }
+    addToCollection = () => {
+        this.cancelableOperations['addToCollectionPopupVisible'] = true;
+    }
+    subscribe_OR_unSubscribeToFile = () => {
+        this.fileManagerService.subscribe_OR_unSubscribeToItem(this.selectedItem.entity, this.selectedItem.isUserSubscriberToFile).subscribe(res => {
+            if (res) {
+                let successMessage = '';
+                this.selectedItem.isUserSubscriberToFile ? successMessage = 'unsubscribe_To_Item_success' : successMessage = 'subscribe_To_Item_success';
+                this.customToastrService.show('success', 'TOASTER.SUCCESS', `TOASTER.${successMessage}`);
+                this.selectedItem.isUserSubscriberToFile = !this.selectedItem.isUserSubscriberToFile;
+                this.multiSelectedkeys = [''];
+            }
+        }, err => {
+            let failMessage = '';
+            this.selectedItem.isUserSubscriberToFile ? failMessage = 'unsubscribe_To_Item_fail' : failMessage = 'subscribe_To_Item_fail';
+            this.customToastrService.show('error', 'TOASTER.ERROR', `TOASTER.${failMessage}`);
+        })
+    }
+    downloadAsZip = () => {
+        let arr = this.selectedItems.split(',');
+        let title = '';
+        if (arr.length === 1) {
+            title = this.selectedItem.name
+        }
+        this.fileManagerService.downloadAsZip(this.selectedItems, title)
+    }
+    mainFolder;
+    myPageConfiguration;
+    myPageConfName;
+    protected permissionEvaluatorService: EvaluatorsService
+    protected fileManagerService: FileManagerService;
+    protected callApi: CallApiService;
+    protected adapter: AdapterService;
+    protected router: Router;
+    protected fileManagerAdapter: FileManagerAdapter;
+    protected translationService: TranslationService;
+    protected customToastrService: CustomToastrService;
+    protected appConfService: AppConfigService;
+    protected userPreferenceService: UserPreferencesService;
+    protected dialogMangmentService: DialogMangmentService;
+    protected uploadMangmentService: UploadManagmentService;
+    protected dialog: MatDialog;
+    protected documentScanService: DocumentScanService;
+    protected dynamicFormService: DynamicFormService;
+    protected route: ActivatedRoute;
+    protected shared: SharedDocsService;
+    protected iconService: IconService;
+    protected cdRef : ChangeDetectorRef;
+    protected nuxeoService : NuxeoService
+
+    constructor(
+        private injectorObj: Injector,
+        myPageConfigurationName: String,
+        environment: Object,
+    ) {
+        this.myPageConfName = myPageConfigurationName;
+        this.mainFolder = environment['mainFolder'];
+        this.cdRef = this.injectorObj.get(ChangeDetectorRef);
+        this.permissionEvaluatorService = this.injectorObj.get(EvaluatorsService);
+        this.fileManagerService = this.injectorObj.get(FileManagerService);
+        this.dynamicFormService = this.injectorObj.get(DynamicFormService);
+        this.callApi = this.injectorObj.get(CallApiService);
+        this.shared = this.injectorObj.get(SharedDocsService);
+        this.adapter = this.injectorObj.get(AdapterService);
+        this.router = this.injectorObj.get(Router);
+        this.fileManagerAdapter = this.injectorObj.get(FileManagerAdapter);
+        this.translationService = this.injectorObj.get(TranslationService);
+        this.customToastrService = this.injectorObj.get(CustomToastrService);
+        this.appConfService = this.injectorObj.get(AppConfigService);
+        this.userPreferenceService = this.injectorObj.get(UserPreferencesService);
+        this.dialogMangmentService = this.injectorObj.get(DialogMangmentService);
+        this.uploadMangmentService = this.injectorObj.get(UploadManagmentService);
+        this.dialog = this.injectorObj.get(MatDialog);
+        this.documentScanService = this.injectorObj.get(DocumentScanService);
+        this.route = this.injectorObj.get(ActivatedRoute);
+        this.iconService = this.injectorObj.get(IconService);
+        this.nuxeoService = this.injectorObj.get(NuxeoService);
+        this.multiSelectedkeys = [''];
+        this.myPageConfiguration  = this.appConfService.myConfiguration.fileManger[this.myPageConfName] ;
+        this.subscriptions.concat([this.router.events.subscribe((event: NavigationStart) => {
+            if (event.navigationTrigger === 'popstate') {
+                let id = event.url.split('id=')[1];
+                if (id && id.includes('fromSharedDocument')) {
+                    id = id.split('&')[0];
+                }
+                this.getSelectedFolderTree(id);
+            }
+        })]);
+    }
+
+    ngOnInit(): void {
+        this.setMyTableConfiguration();
+        // executed only for my files list
+        // executed for pages with static root
+        if (this.myPageConfiguration.isStaticRoot) {
+            this.fileManagerService.getFolder(this.mainFolder).subscribe((res) => {
+                this.directory = res;
+                this.canCreate = this.myPageConfiguration.canCreatePermission.every((per) =>
+                    res.contextParameters.permissions.includes(per)
+                );
+            });
+        }else{
+            this.directory = {
+                contextParameters: {
+                    permissions: [],
+                },
+            };
+           this.canCreate = this.myPageConfiguration.canCreatePermission.some((per) =>
+                this.directory.contextParameters.permissions.includes(per)
+            );
+        }
+        this.subscriptions.concat([
+            this.translationService.isArabic.subscribe(
+                (res) => {
+                    this.isArabic = res;
+                    this.isArabic
+                        ? (this.menuDirection = 'before')
+                        : (this.menuDirection = 'after');
+                }
+            )]);
+        if (this.userPreferenceService) {
+            this.userPreferenceService
+                .select(UserPreferenceValues.Locale)
+                .pipe(takeUntil(this.onDestroy$))
+                .subscribe((locale) => {
+                    this.rtlEnabled = locale === 'ar' ? true : false;
+                });
+        }
+
+        if (this.route.snapshot.queryParams['fromSharedDocument']) {
+            if (this.route.snapshot.queryParams['id'] === 'sharedDocumentsRoot') {
+                this.init(this.mainFolder);
+            } else {
+                this.getSelectedFolderTree(this.route.snapshot.queryParams['id']);
+            }
+        } else {
+            let URL_ID;
+            try {
+                URL_ID =
+                    (this.route.snapshot.queryParams['id'])
+                        ? this.route.snapshot.queryParams['id']
+                        : (this.userPreferenceService.hasItem(this.myPageConfiguration.trackedIdPropertyName))
+                            ? (JSON.parse(this.userPreferenceService.get(this.myPageConfiguration.trackedIdPropertyName)))
+                            : null;
+            } catch (e) {
+                URL_ID = null;
+            }
+            if (URL_ID && URL_ID != this.myPageConfiguration.rootName) {
+                this.getSelectedFolderTree(URL_ID);
+            } else {
+                this.init(this.mainFolder);
+            }
+        }
+
+        this.fileManagerService.selectedFolderId = this.mainFolder;
+
+
+        this.subscriptions.concat([
+            this.fileManagerService.onRefreshingFileManger.subscribe((res) => {
+                let directory = this.getCurrentDirectory();
+                this.reinitializeFolderTree(
+                    this.fileManagerService.selectedFolderId,
+                    directory
+                );
+            })]);
+    }
+
+    ngAfterViewChecked() {
+        (
+            this.fileManager as any
+        ).instance._filesTreeView._filesTreeView._dataAdapter.options.onNodeChanged =
+            (node) => {
+                if (!node?.itemsLoaded) {
+                    this.reinitializeFolderTree(
+                        node?.fileItem.dataItem?.id,
+                        node.fileItem,
+                        node
+                    );
+                }
+            };
+
+        (this.fileManager as any).instance._breadcrumbs._currentDirectory
+            .fileItem.path === ''
+            ? document
+                .getElementsByClassName('dx-menu-item-content')[0]
+                .classList.add('custom')
+            : '';
+    }
+
+    init(id, breadcrumbs = null) {
+        if (breadcrumbs) {
+            this.expandComp(this.getFolderChildren(id), breadcrumbs).subscribe(
+                (d) => {
+                    let toSubstr;
+                    if (this.mainFolder === 'sharedDocumentsRoot') {
+                        toSubstr = this.fileManagerService.sharedFiles.entries.filter(
+                            (item) =>
+                                this.path.includes(
+                                    item.contextParameters.breadcrumb.entries
+                                        .map((item) => item.title)
+                                        .join('/')
+                                )
+                        );
+                        const pathSplit =
+                            toSubstr[0]?.contextParameters.breadcrumb.entries.map(
+                                (item) => item.title
+                            );
+                        this.currentPath = pathSplit[pathSplit.length - 1];
+                    } else {
+
+                        if (this.myPageConfiguration.isStaticRoot) {
+                            // if static root then there is a single root object loaded and saved in storage
+                            this.currentPath = this.path.substr(this.fileManagerObj.path.length);
+                        } else {
+                            // if not static root then there is multiple objects in storag
+                            // if user was admin then use the full path 
+                            if(this.nuxeoService.nuxeoClient.user.isAdministrator || this.myPageConfiguration.useFullPath){
+                                this.currentPath = this.path
+                            }else{
+                                toSubstr = this.fileManagerObj.entries.filter(
+                                    (item) =>
+                                        this.path.includes(
+                                            item.contextParameters.breadcrumb.entries
+                                                .map((item) => item.title)
+                                                .join('/')
+                                        )
+                                );
+                                const pathSplit =
+                                    toSubstr[0]?.contextParameters.breadcrumb.entries.map(
+                                        (item) => item.title
+                                    );
+                                    let x = (pathSplit ? pathSplit[0]?.length : 0)
+                                this.currentPath = this.path.substr(x
+                                );
+                            }
+                        }
+                    }
+                    this.fileItems = d;
+                    let directory = this.getCurrentDirectory();
+                    this.currentFolder =
+                        directory.dataItem === undefined
+                            ? this.canCreate
+                            : directory.dataItem.canCreate;
+                }
+            );
+        } else {
+            this.getFolderChildren(id).subscribe((data) => {
+                this.fileItems = data;
+                let directory = this.getCurrentDirectory();
+                this.currentFolder =
+                    directory.dataItem === undefined
+                        ? this.canCreate
+                        : directory.dataItem.canCreate;
+                // this is required to redraw the tree to make it show up to solve issue with the tree not showing in the first time load
+                setTimeout(() => {
+                    this.fileItems = [...data];
+                    this.cdRef.detectChanges();
+                }, 500);
+            });
+        }
+    }
+
+    getFolderChildren(id) {
+        this.clicked = true;
+        this.cdRef.detectChanges();
+        if (id === "sharedDocumentsRoot") {
+            return this.fileManagerService.getChildrenForSharedDocumentRoot(id).pipe(
+                map((data: any) => {
+                    this.showNoDataImage(data);
+                    let fileItems = data;
+                    return fileItems.sort((value) => {
+                        return value.isDirectory ? -1 : 1; // `true` values first
+                    });
+                }),
+                tap(
+                    () => {this.clicked = false; this.cdRef.detectChanges();}
+                ),
+                first()
+            );
+        } else {
+            return this.fileManagerService.getChildren(id).pipe(
+                map((data: any) => {
+                    this.showNoDataImage(data);
+                    let fileItems = data;
+                    return fileItems.sort((value) => {
+                        return value.isDirectory ? -1 : 1; // `true` values first
+                    });
+                }),
+                tap(
+                    () => {this.clicked = false; this.cdRef.detectChanges();}
+                ),
+                first()
+            );
+        }
+    }
+
+    expandComp(entries: Observable<any>, breadcrumbs) {
+        return entries.pipe(
+            mergeMap((entries) =>
+                from(entries).pipe(
+                    mergeMap((entry: any) => {
+                        if (breadcrumbs.includes(entry.id)) {
+                            return concat(
+                                of(entry).pipe(
+                                    tap((ent) => (ent['items'] = []))
+                                ),
+                                this.expandComp(
+                                    this.getFolderChildren(entry.id),
+                                    breadcrumbs
+                                )
+                            ).pipe(
+                                reduce((parent: any, children) => {
+                                    parent.items = children;
+                                    return parent;
+                                })
+                            );
+                        } else {
+                            return of(entry);
+                        }
+                    }),
+                    toArray()
+                )
+            )
+        );
+    }
+
+    getCurrentDirectory() {
+        let directory = this.fileManager.instance.getCurrentDirectory();
+        return directory;
+    }
+
+    async reinitializeFolderTree(id, directory, node = null) {
+        let $node = null;
+        this.clicked = true;
+        if (node) {
+            $node = (
+                this.fileManager as any
+            ).instance._filesTreeView._filesTreeView._getNodeElement(node);
+            (
+                this.fileManager as any
+            ).instance._filesTreeView._filesTreeView._createLoadIndicator(
+                $node
+            );
+        }
+        if (directory.dataItem === undefined) {
+            this.fileManagerService
+                .refreshData(this.mainFolder)
+                .subscribe((data) => {
+                    this.showNoDataImage(data);
+                    this.fileItems = data;
+                    this.clicked = false;
+                    return this.fileItems.sort((value) => {
+                        return value.isDirectory ? -1 : 1; // `true` values first
+                    });
+                });
+        } else {
+            const children = await this.fileManagerService
+                .refreshData(id)
+                .pipe(
+                    map((data: any) => {
+                        this.showNoDataImage(data);
+                        let fileItems = data;
+                        this.clicked = false;
+                        return fileItems.sort((value) => {
+                            return value.isDirectory ? -1 : 1; // `true` values first
+                        });
+                    }),
+                    first()
+                )
+                .toPromise();
+            directory.dataItem.items = children;
+            if (node) {
+                (
+                    this.fileManager as any
+                ).instance._filesTreeView._filesTreeView._updateExpandedItemsUI(
+                    node,
+                    !node.expanded
+                );
+            }
+
+            this.fileManager.instance.refresh();
+        }
+    }
+
+    showNoDataImage(data: any) {
+        if (this.itemListView) {
+            if (data.length === 0) {
+                document
+                    .getElementsByClassName(
+                        'dx-filemanager-thumbnails-view-port'
+                    )[0]
+                    ?.classList.add('empty-collection');
+            } else {
+                document
+                    .getElementsByClassName(
+                        'dx-filemanager-thumbnails-view-port'
+                    )[0]
+                    ?.classList.remove('empty-collection');
+            }
+        } else {
+            if (data.length === 0) {
+                let dataGridElement =
+                    document.getElementsByClassName('dx-datagrid-nodata')[0];
+                if (dataGridElement) dataGridElement.classList.remove('empty');
+            }
+        }
+    }
+
+    openShareDialog() {
+        this.shared.openShareDialog(this.selectedItem);
+    }
+
+    setMyTableConfiguration() {
+        this.config =
+            this.appConfService.myConfiguration.tables[this.configKey];
+        this.headers = this.config.headers;
+        this.fields = this.config.fields;
+        this.operation = this.config.operations;
+        this.pageProvider = this.config.pageProvider;
+    }
+
+    getSelectedFolderTree(id) {
+        this.fileManagerService.getFolder(id).subscribe(async (res) => {
+            if (this.myPageConfiguration.isStaticRoot) {
+                this.path = res.path;
+            } else {
+                this.path = res.contextParameters.breadcrumb.entries
+                    .map((item) => item.title)
+                    .join('/');
+            }
+            if (this.route.snapshot.queryParams['fromSharedDocument']) {
+                res.contextParameters.breadcrumb.entries = [
+                    { uid: 'sharedDocumentsRoot' },
+                    ...res.contextParameters.breadcrumb.entries,
+                ];
+            } else {
+                // if not static root then add the root name to breadcrumb
+                if (!this.myPageConfiguration.isStaticRoot) {
+                    res.contextParameters.breadcrumb.entries = [
+                        { uid: this.myPageConfiguration.rootName },
+                        ...res.contextParameters.breadcrumb.entries,
+                    ];
+                }
+            }
+            const breadcrumbs = res.contextParameters.breadcrumb.entries.map(
+                (item) => item.uid
+            );
+            if (this.mainFolder !== 'sharedDocumentsRoot') {
+                breadcrumbs.splice(breadcrumbs.indexOf(id), 1);
+            }
+            this.init(this.mainFolder, breadcrumbs);
+        });
+    }
+
+    openUpdateModal() {
+        this.dialog.open(UpdateModalComponent, {
+            width: '40%',
+            height: '70%',
+            maxWidth: 'auto',
+            panelClass: 'watcher-dialog-container',
+            data: {
+                id: this.selectedItem.id,
+                type: this.selectedItem.entity.type,
+                code: this.selectedItem.entity.properties['gdoc:documentTypeCode'] ? this.selectedItem.entity.properties['gdoc:documentTypeCode'] : this.selectedItem.entity.type,
+                isDirectory: this.selectedItem.isDirectory,
+            },
+            disableClose: true,
+        });
+    }
+
+    getSelectedItem(directory) {
+        let selectedItem =
+            directory?.dataItem && directory.dataItem.id
+                ? directory.dataItem.id
+                : this.mainFolder;
+        return selectedItem;
+    }
+
+    contextItemsParser(items = []) {
+        return items.map(item => {
+            let parsed = { ...item };
+            if (parsed.visibleEvaluator && typeof parsed.visibleEvaluator == 'function') {
+                parsed.visible = parsed.visibleEvaluator();
+            }
+            return parsed;
+        });
+    }
+
+    onSelected(e) {
+        // if (this.showDetails) {
+        //     this.sideMenuLoading = true;
+        // }
+        this.showClipboard = false;
+        this.showDgdaClipboard = false;
+        this.myFileMangerInstance = e.component;
+        this.currentDirectory = this.getCurrentDirectory();
+        let selectedItem = this.fileManager.instance.getSelectedItems();
+        this.itemsSelected =
+            e?.selectedItems.length > 1
+                ? `${e?.selectedItems.length} items`
+                : e?.selectedItems[0]?.dataItem.name;
+        this.isItemSelected = e?.selectedItems.length > 0 ? true : false;
+        this.selectedItemLength = selectedItem.length > 1 ? false : true;
+        if (e?.selectedItems[0]?.dataItem) {
+            this.selectedItem = e?.selectedItems[0]?.dataItem;
+        }
+        this.selectedItems = e?.selectedItems
+            .map((element) => element.dataItem.id)
+            .toString();
+        this.multipleItems = e?.selectedItems;
+        this.selectedItemsObjects = this.fileManager.instance.getSelectedItems();
+        if (this.selectedItem) {
+            this.myFileMangerInstance.option('contextMenu.items', this.contextItemsParser(this.contextMenuItems));
+            this.myFileMangerInstance.option('toolbar.fileSelectionItems', this.contextItemsParser(this.toolbarItems));
+            if (this.showDetails) {
+                this.openSideMenuDetails();
+            }
+        } else {
+            this.showDetails = false;
+            // this.sideMenuLoading = false;
+        }
+
+    }
+    //----------------- CONTEXT MENU -----------------------
+    onContextMenuShowing(e) {
+        // this.showDetails = false; // hide side menu details when right click
+        let directory = this.getCurrentDirectory();
+        if (e.viewArea === 'itemView' && !this.isItemSelected) {
+            if (this.myPageConfiguration.showAddFolderInContextMenu) {
+                this.myFileMangerInstance.option('contextMenu.items', [
+                    {
+                        name: 'create_folder',
+                        text: this.isArabic ? 'مجلد جديد' : 'New Directory',
+                        action: this.createFolder,
+                        visibleEvaluator: () => {
+                            return this.selectedItem.isDirectory &&
+                                this.selectedItemLength &&
+                                this.selectedItem.canCreate
+                        }
+                    }
+                ]);
+            }
+            this.myFileMangerInstance.option('contextMenu.items', [
+                {
+                    name: 'refresh',
+                    action: this.refresh,
+                    text: this.isArabic ? 'تحديث' : 'Refresh',
+                    icon: '',
+                }
+            ]);
+        }
+        if (e.viewArea === 'navPane') {
+            e.cancel = true;
+        }
+    }
+
+    onContextItemClick({ itemData, viewArea, fileSystemItem }) {
+        let selectedItem = this.fileManager.instance.getSelectedItems();
+        this.itemToDisplay =
+            viewArea === 'navPane'
+                ? fileSystemItem.dataItem
+                : selectedItem[0]?.dataItem;
+        let directory = this.getCurrentDirectory();
+        let id = this.getCurrentFolderId(directory);
+
+        itemData.action();
+    }
+    // ------------------------------------------------------------------------
+    // ----------------- TOOL BAR -----------------------------
+    onToolbarItemClicked(e) {
+        this.showDetails = false;
+        // this.sideMenuLoading = false;
+        let directory = this.getCurrentDirectory();
+        let id = this.getCurrentFolderId(directory);
+        let selectedItem = this.fileManager.instance.getSelectedItems();
+        e.itemData.action ? e.itemData.action() : () => { };
+    }
+
+    getCurrentFolderId(directory) {
+        let id =
+            directory.dataItem === undefined
+                ? this.selectedItem?.id
+                : directory.dataItem?.id;
+        return id;
+    }
+    // ------------------------------------------------------------
+    //-----------------------on item click ---------------
+    async onItemClicked(e) {
+        this.showClipboard = false; // close clipboard if navigated to any place
+        this.showDgdaClipboard = false;
+        this.selectedFolderPath = e.directory.dataItem?.entity.path;
+        if (e.directory.dataItem === undefined) {
+            if (this.mainFolder === 'sharedDocumentsRoot') {
+                this.fileManagerService.getChildrenForSharedDocumentRoot(this.mainFolder)
+                    .subscribe((data) => {
+                        this.showNoDataImage(data);
+                        this.fileItems = data;
+                        return this.fileItems.sort((value) => {
+                            return value.isDirectory ? -1 : 1; // `true` values first
+                        });
+                    });
+            } else {
+                this.fileManagerService
+                    .refreshData(this.mainFolder)
+                    .subscribe((data) => {
+                        this.showNoDataImage(data);
+                        this.fileItems = data;
+                        return this.fileItems.sort((value) => {
+                            return value.isDirectory ? -1 : 1; // `true` values first
+                        });
+                    });
+            }
+        }
+
+        this.myCurrecntFolderData = e.directory.dataItem ? e.directory.dataItem : (this.mainFolder === 'sharedDocumentsRoot' ? 'sharedDocumentsRoot' : this.myPageConfiguration.rootName);
+        this.permissionEvaluatorService.evaluateRule('canCreateNewFolderTemplates', { entity: this.myCurrecntFolderData.entity }).then(res => {
+            this.showfolderTemplates = res;
+        })
+        // if not coming from shared document then save the id to track it 
+        if (this.mainFolder !== 'sharedDocumentsRoot') {
+            if (e.directory?.dataItem?.id) {
+                this.userPreferenceService.set(this.myPageConfiguration.trackedIdPropertyName, JSON.stringify(e.directory?.dataItem?.id));
+            } else {
+                localStorage.removeItem(this.userPreferenceService.getPropertyKey(this.myPageConfiguration.trackedIdPropertyName));
+
+            }
+        }
+        this.itemListView = e.component._itemView._itemList;
+        let directory = this.getCurrentDirectory();
+
+        this.currentFolder =
+            directory.dataItem === undefined
+                ? this.canCreate
+                : directory.dataItem.canCreate;
+        if (this.itemListView) {
+            document
+                .getElementsByClassName(
+                    'dx-filemanager-thumbnails-view-port'
+                )[0]
+                .classList.remove('empty-collection');
+        } else {
+            let loadPanelElement = document.getElementsByClassName(
+                'dx-loadpanel-content'
+            )[0];
+            let dataGridElement =
+                document.getElementsByClassName('dx-datagrid-nodata')[0];
+            if (loadPanelElement && dataGridElement) {
+                loadPanelElement.classList.add('hide-loadpanel');
+                dataGridElement.classList.add('empty');
+            }
+        }
+        var elem =
+            e?.directory?.path === ''
+                ? document
+                    .getElementsByClassName('dx-menu-item-content')[0]
+                    .classList.add('custom')
+                : '';
+        const id = e?.directory?.dataItem?.id;
+        this.fileManagerService.selectedFolderId =
+            e?.directory && e?.directory?.dataItem ? id : this.mainFolder;
+        const queryParams: Params = {
+            id: e?.directory && e?.directory?.dataItem ? id : this.mainFolder,
+        };
+        each(
+            (
+                this.fileManager as any
+            ).instance._filesTreeView._filesTreeView._dataAdapter.getExpandedNodesKeys(),
+            (key) => {
+                if (
+                    key.includes(e.directory.path) &&
+                    key.replace('FIK_', '') !== e.directory.path
+                ) {
+                    (
+                        this.fileManager as any
+                    ).instance._filesTreeView._filesTreeView._toggleExpandedState(
+                        key,
+                        false
+                    );
+                }
+            }
+        );
+        this.router.navigate([], {
+            relativeTo: this.route,
+            queryParams: queryParams,
+            queryParamsHandling: 'merge', // remove to replace all query params by provided
+        });
+
+        if (id !== undefined && e && e?.directory?.dataItem) {
+            try {
+                // (
+                //     document.querySelector(
+                //         `[data-item-id="FIK_${encodeURI(
+                //             e.directory.parentPath
+                //         )}"]`
+                //     ) as HTMLElement
+                // ).style.pointerEvents = 'none';
+                (
+                    document.querySelector(
+                        `[data-item-id="FIK_${encodeURI(e.directory.path)}"]`
+                    ) as HTMLElement
+                ).style.pointerEvents = 'none';
+            } catch (e) { }
+            e.directory.dataItem.items = await this.getFolderChildren(id).toPromise();
+            try {
+                // (
+                //     document.querySelector(
+                //         `[data-item-id="FIK_${encodeURI(
+                //             e.directory.parentPath
+                //         )}"]`
+                //     ) as HTMLElement
+                // ).style.pointerEvents = 'all';
+                (
+                    document.querySelector(
+                        `[data-item-id="FIK_${encodeURI(e.directory.path)}"]`
+                    ) as HTMLElement
+                ).style.pointerEvents = 'all';
+            } catch (e) { }
+            if (!this.itemListView) {
+                document
+                    .getElementsByClassName('dx-loadpanel-content')[0]
+                    .classList.remove('hide-loadpanel');
+            }
+        }
+        const scrollTopPosition =
+            e.component._filesTreeView._filesTreeView?._scrollableContainer?.scrollTop();
+        e.component.refresh().then(() => {
+            e.component._filesTreeView._filesTreeView?._scrollableContainer?.scrollTo(
+                scrollTopPosition
+            );
+        });
+    }
+    //--------------------------------------------------------------
+
+    // --------------------------------------- create new file popups ---------------------------------------------------------------------
+
+    checkForOpeningCreationDialog(fileType) {
+        if (this.dialogMangmentService.minizedModal) {
+            let dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+                width: '510px',
+                data: {
+                    title: 'createFileInProgressTitle',
+                    message: 'createFileInProgress',
+                    confirmButton: `BUTTONS.Yes`,
+                    cancelButton: "BUTTONS.No"
+                },
+                disableClose: true,
+            });
+            dialogRef.afterClosed().subscribe((res) => {
+                if (res) {
+                    if (this.dialogMangmentService.creationMode === 'upload') {
+                        this.dialogMangmentService.openMinimzedModal(
+                            CreateModalComponent,
+                            '70%',
+                            '85%',
+                            (!this.myPageConfiguration.isStaticRoot ? this.selectedFolderPath : '') // send path in case of file list or other page with none static root and not send it in case of my files or any other page with static root
+                        );
+                    } else if (
+                        this.dialogMangmentService.creationMode === 'scan'
+                    ) {
+                        this.dialogMangmentService.openMinimzedModal(
+                            ScanModalComponent,
+                            '90%',
+                            '90%',
+                            (!this.myPageConfiguration.isStaticRoot ? this.selectedFolderPath : '') // send path in case of file list or other page with none static root and not send it in case of my files or any other page with static root
+                        );
+                    }
+                } else {
+                    //if choose to start new form then reset last form validation
+                    this.uploadMangmentService.GeneralFormValidation = true;
+                    this.openCreationTypeDialog(fileType);
+                }
+            });
+        } else {
+            this.dynamicFormService
+                .getDynamicForm(fileType.documentCode ? fileType.documentCode : fileType.type)
+                .subscribe((res) => {
+                    if (res) {
+                        this.dialogMangmentService.storedDynamicForm = res;
+                        this.openCreationTypeDialog(fileType);
+                    } else {
+                        this.customToastrService.show(
+                            'notification',
+                            'No Form',
+                            'Administrator Must Set File Form First'
+                        );
+                    }
+                });
+        }
+    }
+
+    openCreationTypeDialog(fileType) {
+        let creationDialogRef = this.dialog.open(CreationTypeComponent, {
+            width: '500px',
+            height: '300px',
+            panelClass: 'watcher-dialog-container',
+            data: {},
+            disableClose: true,
+        });
+        creationDialogRef.afterClosed().subscribe((res) => {
+            // if there was a minimied scan modal and he want to open another modal then reset for saved scanned modal
+            if (this.documentScanService.storedFile && res !== '') {
+                this.documentScanService.storedFile = {};
+            }
+            if (res === 'upload') {
+                this.openDialog(
+                    CreateModalComponent,
+                    fileType,
+                    'upload',
+                    '70%',
+                    '85%',
+                    (!this.myPageConfiguration.isStaticRoot ? this.selectedFolderPath : '') // send path in case of file list or other page with none static root and not send it in case of my files or any other page with static root
+                );
+            } else if (res === 'scan') {
+                this.openDialog(
+                    ScanModalComponent,
+                    fileType,
+                    'scan',
+                    '90%',
+                    '90%',
+                    (!this.myPageConfiguration.isStaticRoot ? this.selectedFolderPath : '') // send path in case of file list or other page with none static root and not send it in case of my files or any other page with static root
+                );
+            } else if (res === 'template') {
+                this.openDialog(
+                    TemplateModalComponent,
+                    fileType.type,
+                    'scan',
+                    '70%',
+                    '85%'
+                );
+            }
+        });
+    }
+
+    openDialog(component, fileType, creationMode, width, height, path?) {
+        this.uploadMangmentService.resetStatus();
+        this.dialogMangmentService.openModal(
+            component,
+            fileType,
+            creationMode,
+            'fileManger',
+            width,
+            height,
+            path
+        );
+    }
+
+    checkForCreateNewFolder(folderType) {
+        if (this.dialogMangmentService.minizedModal) {
+            let dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+                width: '510px',
+                data: {
+                    title: 'createFileInProgressTitle',
+                    message: 'createFileInProgress',
+                    confirmButton: `BUTTONS.Yes`,
+                    cancelButton: "BUTTONS.No"
+                },
+                disableClose: true,
+            });
+            dialogRef.afterClosed().subscribe((res) => {
+                if (res) {
+                    if (this.dialogMangmentService.creationMode === 'upload') {
+                        this.dialogMangmentService.openMinimzedModal(
+                            CreateModalComponent,
+                            '70%',
+                            '85%',
+                            (!this.myPageConfiguration.isStaticRoot ? this.selectedFolderPath : '') // send path in case of file list or other page with none static root and not send it in case of my files or any other page with static root
+                        );
+                    } else if (
+                        this.dialogMangmentService.creationMode === 'scan'
+                    ) {
+                        this.dialogMangmentService.openMinimzedModal(
+                            ScanModalComponent,
+                            '90%',
+                            '90%',
+                            (!this.myPageConfiguration.isStaticRoot ? this.selectedFolderPath : '') // send path in case of file list or other page with none static root and not send it in case of my files or any other page with static root
+                        );
+                    }
+                } else {
+                    this.getFormForFolderCreation(folderType);
+                }
+            });
+        } else {
+            this.getFormForFolderCreation(folderType);
+        }
+    }
+
+    getFormForFolderCreation(folderType) {
+        this.dynamicFormService
+            .getDynamicForm(folderType.type)
+            .subscribe((res) => {
+                if (res) {
+                    this.dialogMangmentService.storedDynamicForm = res;
+                    this.openCreateFolderDialog(folderType, res);
+                } else {
+                    this.customToastrService.show(
+                        'notification',
+                        'No Form',
+                        'Administrator Must Set Folder Form First'
+                    );
+                }
+            });
+    }
+
+    openCreateFolderDialog(folderType, dynamicform) {
+        this.dialog.open(FolderModalComponent, {
+            width: '40%',
+            height: '70%',
+            maxWidth: 'auto',
+            panelClass: 'watcher-dialog-container',
+            data: { folderType: folderType, dynamicForm: dynamicform },
+            disableClose: true,
+        });
+    }
+
+    openPublishModal = () => {
+        let myType = "File";
+  if (this.multipleItems.length > 1) {
+      let newSelectedWithArrPrefix = [];
+      this.newSelectedWithIdPrefix = "";
+      this.multipleItems.map((item, index) => {
+          (index == 0) ? newSelectedWithArrPrefix.push({
+              type: item.isDirectory ? "Folder" : "File",
+              id: 'docs:' + item.dataItem.id.toString()
+          }) : newSelectedWithArrPrefix.push({
+              type: item.isDirectory ? "Folder" : "File",
+              id: item.dataItem.id.toString()
+          })
+      })
+      newSelectedWithArrPrefix.map((item, index) => {
+          this.newSelectedWithIdPrefix += (index == newSelectedWithArrPrefix.length - 1) ? item.id : item.id + ',';
+          (item.type == "Folder") ? myType = "Folder" : null;
+      })
+  }
+  this.dialog.open(PublishDialogComponent, {
+      width: '500px',
+      height: '400px',
+      maxWidth: 'auto',
+      panelClass: 'watcher-dialog-container',
+      data: {
+          id: (this.multipleItems.length > 1) ? this.newSelectedWithIdPrefix : this.selectedItem.id,
+          PublishType: (this.multipleItems.length > 1) ? myType : this.selectedItem.isDirectory ? "Folder" : "File",
+      },
+      disableClose: true,
+  });
+
+    }
+
+    addToClipboard = () => {
+        let selectedItemsIds = this.selectedItems.split(',');
+        let directory = this.getCurrentDirectory();
+        let id =
+            directory.dataItem === undefined
+                ? this.mainFolder
+                : this.getCurrentFolderId(directory);
+        if (selectedItemsIds.length === 1 && this.clipboardItems.length > 0 && this.clipboardItems.indexOf(selectedItemsIds[0]) > -1) {
+            this.customToastrService.show('error', 'TOASTER.ERROR', "TOASTER.item_already_added")
+
+        } else {
+            this.clipboardItems = union(this.clipboardItems, selectedItemsIds);
+            this.userPreferenceService.set('clipboardItems', JSON.stringify(this.clipboardItems));
+            this.customToastrService.show('success', 'TOASTER.SUCCESS', "TOASTER.added_to_clipboard");
+            this.reinitializeFolderTree(id, directory);
+            this.fileManagerService.onRefreshClipboard.emit();
+            this.showClipboard = true;
+            console.log(this.clipboardItems);
+        }
+    }
+    // -------------------------------------------------------------------------------------------------------------------------------------
+    customizeIcon = (fileSystemItem) => {
+        let thumb = this.iconService.getFileIcon(
+            fileSystemItem.dataItem.entity,
+            'document'
+        );
+        let isFavorite = fileSystemItem?.dataItem?.isFavorite;
+        let face = fileSystemItem?.dataItem?.entity?.properties['ctimagga:faces'];
+        let isImaggaProccessed = !!(face && face.length);
+        return isFavorite ? `${thumb}?fav=1${isImaggaProccessed ? '&imagga=1' : ''}` : isImaggaProccessed ? `${thumb}?imagga=1` : thumb;
+    };
+
+    //--------------------------------- may be unused funtions -------------------
+    checkForClass(className) {
+        let classes = [
+            'detailed-menu',
+            'ng-tag-label',
+            'ng-option-label',
+            'ng-star-inserted',
+        ];
+        let classFounded = false;
+        classes.map((item) => {
+            if (className.includes(item)) {
+                classFounded = true;
+            }
+        });
+        return classFounded;
+    }
+
+    openSideMenuDetails() {
+        this.showDetails = true;
+        this.showClipboard = false;
+        this.showDgdaClipboard = false;
+    }
+
+    closeSideMenu() {
+        this.showDetails = false;
+        // this.sideMenuLoading = false;
+    }
+    //----------------------------------------------------------------------
+    destroyClass() {
+        this.subscriptions.forEach(sub => sub.unsubscribe());
+        this.onDestroy$.next();
+        this.onDestroy$.complete();
+    }
+}