nuxeo-development-framework 4.1.4 → 4.1.6

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

@@ -0,0 +1,1625 @@
+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 { concat, from, Observable, of, Subject, Subscription, interval } from "rxjs";
+import { concatMap, finalize, first, map, mergeMap, reduce, switchMap, take, 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,
+  Injector,
+  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, assign, keyBy, values } from "lodash";
+import { FileManagerPaginationConfig, PaginationData, PaginationPayload } from "./models";
+
+@Component({
+  template: "",
+})
+//
+export class FileManagerAbstract implements OnInit, AfterViewChecked {
+  #foldersSubscription$: Subscription;
+  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 = [""];
+    }
+  }
+  nodesPagination: {
+    string?: {
+      isNextPageAvailable: number;
+      currentPageIndex: number;
+      foldersCount: number;
+    };
+  } = {};
+  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 = () => {
+    if (
+      this.myPageConfiguration.fileMangerObjectName ===
+      "externalshareFileMangerObj"
+    ) {
+      this.fileManagerService.customEvent.emit("refresh");
+    } else {
+      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;
+  protected moreDataForCreateModal = {};
+  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, currentFolder = null) {
+    const payload: PaginationPayload = {
+      currentPageIndex: 0,
+    };
+
+    if (breadcrumbs) {
+      this.expandComp(
+        this.getFolderChildren(id, payload),
+        breadcrumbs,
+        currentFolder
+      ).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, payload).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,
+    payload: PaginationPayload = null,
+    showLoading = true,
+    loadFolders = true
+  ) {
+    if (!payload) this.#resetPagination(id);
+    if (!showLoading) {
+      document.querySelector(".dx-loadpanel-wrapper")?.remove();
+    }
+
+    this.clicked = showLoading;
+    this.cdRef.detectChanges();
+    return (
+      id == "sharedDocumentsRoot"
+        ? this.fileManagerService.getChildrenForSharedDocumentRoot(
+            id,
+            payload,
+            loadFolders
+          )
+        : this.fileManagerService.getChildren(id, payload, loadFolders)
+    ).pipe(
+      map((result: any) => {
+        this.#initPagination(id, result);
+
+        const data =
+          payload && FileManagerPaginationConfig.Enable ? result.data : result;
+        this.showNoDataImage(data);
+        return data;
+      }),
+      tap(() => {
+        this.clicked = false;
+        this.cdRef.detectChanges();
+      }),
+      first()
+    );
+  }
+  expandComp(entries: Observable<any>, breadcrumbs, indexNextNode: number = 1) {
+    const payload: PaginationPayload = {
+      currentPageIndex: 0,
+    };
+    return entries.pipe(
+      mergeMap((entries) =>
+        from(entries).pipe(
+          mergeMap((entry: any) => {
+            const nextNode = entries.find(
+              (q) => q.id == breadcrumbs[indexNextNode]
+            );
+            // if not exist will loaded otherwise keep everyting as will
+            if (breadcrumbs.includes(entry.id)) {
+              return concat(
+                of(entry).pipe(tap((ent) => (ent["items"] = []))),
+                this.expandComp(
+                  this.getFolderChildren(entry.id, payload),
+                  breadcrumbs,
+                  indexNextNode++
+                )
+              ).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);
+    }
+
+    const payload: PaginationPayload = {
+      currentPageIndex: 0,
+    };
+
+    if (directory.dataItem === undefined) {
+      this.#resetPagination(this.mainFolder);
+      this.fileManagerService
+        .refreshData(this.mainFolder, payload)
+        .subscribe((result: any) => {
+          this.#initPagination(this.mainFolder, result);
+
+          const data =
+            payload && FileManagerPaginationConfig.Enable
+              ? result.data
+              : result;
+
+          this.showNoDataImage(data);
+          this.fileItems = data;
+          this.clicked = false;
+          return this.fileItems;
+        });
+    } else {
+      this.#resetPagination(id);
+      const children = await this.fileManagerService
+        .refreshData(id, payload)
+        .pipe(
+          map((result: any) => {
+            this.#initPagination(id, result);
+            this.startLoading({ directory });
+
+            const data =
+              payload && FileManagerPaginationConfig.Enable
+                ? result.data
+                : result;
+
+            this.showNoDataImage(data);
+            this.clicked = false;
+            return data;
+          }),
+          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, res);
+    });
+  }
+
+  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();
+
+    //folder not ready yet
+    if (selectedItem.some((q) => !q?.dataItem?.isReady)) return;
+
+    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) {
+      e.component._filesTreeView.refresh();
+      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) {
+    console.log("onItemClicked");
+    this.clicked = true;
+    this.cdRef.detectChanges();
+    this.resetFoldersSubscription();
+    this.showClipboard = false; // close clipboard if navigated to any place
+    this.showDgdaClipboard = false;
+    this.selectedFolderPath = e.directory.dataItem?.entity?.path;
+    if (e.directory.dataItem?.id === undefined) {
+      if (this.mainFolder === "sharedDocumentsRoot") {
+        this.fileManagerService
+          .getChildrenForSharedDocumentRoot(this.mainFolder)
+          .subscribe((data) => {
+            this.showNoDataImage(data);
+            this.fileItems = data;
+            return this.fileItems;
+          });
+      } else {
+        this.fileManagerService
+          .refreshData(this.mainFolder)
+          .subscribe((data) => {
+            this.showNoDataImage(data);
+            this.fileItems = data;
+            return this.fileItems;
+          });
+      }
+    }
+
+    this.myCurrecntFolderData = e.directory.dataItem?.id
+      ? 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;
+
+    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.component._filesTreeView.refresh();
+      const payload: PaginationPayload = {
+        currentPageIndex: 0,
+      };
+      if (!e.directory.dataItem.isReady) {
+        const newDataItem = await this.fileManagerService
+          .getMapedFolder(id)
+          .toPromise();
+        assign(e.directory.dataItem, newDataItem);
+      }
+      e.directory.dataItem.items = await this.getFolderChildren(
+        id,
+        payload
+      ).toPromise();
+      this.fileManager.instance.refresh();
+      this.startLoading(e);
+
+      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");
+      }
+    }
+
+    let directory = this.getCurrentDirectory();
+
+    this.currentFolder =
+      directory.dataItem === undefined
+        ? this.canCreate
+        : directory.dataItem.canCreate;
+
+    // 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?) {
+    let obj = {
+      ...this.moreDataForCreateModal,
+      path: path || "",
+    };
+    this.uploadMangmentService.resetStatus();
+    this.dialogMangmentService.openModal(
+      component,
+      fileType,
+      creationMode,
+      "fileManger",
+      width,
+      height,
+      obj
+    );
+  }
+
+  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();
+  }
+
+  //Pagination story :)
+  loadPage() {
+    if (this.#foldersSubscription$) {
+      this.clicked = true;
+      setTimeout(() => {
+        this.clicked = this.#foldersSubscription$ != null;
+      }, FileManagerPaginationConfig.DelayFoldersRequests);
+    } else this.#loadMore().pipe(takeUntil(this.onDestroy$)).subscribe();
+  }
+  #loadMore(
+    callback: () => void = null,
+    id: any = this.fileManagerService.selectedFolderId,
+    showLoading = true
+  ) {
+    if (this.nodesPagination[id].isNextPageAvailable) {
+      this.nodesPagination[id].currentPageIndex++;
+      const payload: PaginationPayload = {
+        currentPageIndex: this.nodesPagination[id].currentPageIndex,
+      };
+      return this.getFolderChildren(id, payload, showLoading, false).pipe(
+        tap((data) => {
+          const node = this.#getNode(id);
+          if (node?.fileItem?.dataItem?.items) {
+            // any node not root
+            node.fileItem.dataItem.items = this.#addOrReplace(
+              node.fileItem.dataItem.items,
+              data
+            );
+          } else {
+            // root node
+            this.fileItems = this.#addOrReplace(this.fileItems, data);
+          }
+          (this.fileManager.instance as any)._controller.refresh();
+          this.cdRef.detectChanges();
+          callback?.();
+        })
+      );
+    } else {
+      this.resetFoldersSubscription();
+      return of(null);
+    }
+  }
+  //should be private but keep like that just for 'my-files' it's need it
+  startLoading(event: any) {
+    if (!FileManagerPaginationConfig.Enable) return;
+
+    const startLoading$ = of(event).pipe(
+      switchMap((ev) => {
+        const id = event?.directory?.dataItem?.id || "";
+        const hasUnreadyItems = ev.directory.dataItem.items.some(
+          (q) => !q.isReady
+        );
+        if (hasUnreadyItems) {
+          // Start loading automatically to ensure all folders has the right actions
+          return this.#loadMore(() => this.startLoading(ev), id, false);
+        } else if (FileManagerPaginationConfig.MaxFoldersRequestCount > 0) {
+          // Start loading in background for files
+          return interval(
+            FileManagerPaginationConfig.DelayFoldersRequests
+          ).pipe(
+            take(FileManagerPaginationConfig.MaxFoldersRequestCount),
+            concatMap(() => this.#loadMore(null, id, false)),
+            finalize(() => this.resetFoldersSubscription())
+          );
+        } else {
+          return of(null);
+        }
+      })
+    );
+    this.#foldersSubscription$ = startLoading$.subscribe();
+  }
+  #resetPagination(id: string) {
+    this.resetFoldersSubscription();
+    this.#initPagination(id, null);
+  }
+
+  //should be private but keep like that just for 'my-files' it's need it
+  resetFoldersSubscription() {
+    this.clicked = false;
+    this.#foldersSubscription$?.unsubscribe();
+    this.#foldersSubscription$ = null;
+  }
+  #initPagination(id: string, result: PaginationData<any>) {
+    this.nodesPagination[id] = {
+      isNextPageAvailable: result?.isNextPageAvailable,
+      currentPageIndex: result?.currentPageIndex,
+      foldersCount: result?.foldersCount,
+    };
+  }
+  #getNode(id: string) {
+    const fm = this.fileManager.instance as any;
+    const dataStructure = fm._filesTreeView._filesTreeView._dataAdapter
+      ._dataStructure as any[];
+    const dataItem =
+      dataStructure.find((q) => q.fileItem?.dataItem?.id == id) ||
+      dataStructure[0];
+
+    return fm._filesTreeView._filesTreeView._getNode(
+      dataItem.internalFields.key
+    );
+  }
+  #addOrReplace(data: Array<any>, items: Array<any>) {
+    let itemMap = keyBy(data, "id");
+    items.forEach((item) => {
+      itemMap[item.id] = item;
+    });
+    return values(itemMap);
+  }
+}