nuxeo-development-framework 4.1.4 → 4.1.6

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

@@ -0,0 +1,350 @@
+<div class="side-menu-details" SetRtl>
+    <div class="h-full" *ngIf="selectedItem && showDetails && !sideMenuLoading">
+        <div class="">
+            <div class="mb-3 px-5 py-1 w-100 flex border-b-2 items-center">
+                <!-- <title-with-icon class="-my-1.5" [context]="selectedItem.entity" [showTitle]="false"></title-with-icon> -->
+                <app-display-suitable-icon [data]="selectedItem" [size]="'40px'"></app-display-suitable-icon>
+
+                <div class="justify-center flex flex-col   flex-1 flex-grow-0 w-7/12" *ngIf="!selectedItem.isDirectory">
+                    <div class="text-base text-gray-500 font-bold truncate"
+                        [title]="selectedItem.entity?.properties?.['file:content']?.['name']"
+                        [alt]="selectedItem.entity?.properties?.['file:content']?.['name']">
+                        {{selectedItem.entity?.properties?.['file:content']?.['name']}}
+                    </div>
+                    <div class="text-gray-500 text-sm">
+                        {{((selectedItem.entity?.properties?.['file:content']?.['length']) / (1024 *
+                        1024)).toFixed(2) }}
+                        MB
+                    </div>
+                </div>
+                <div class="
+                         d-flex
+                         items-center
+                         text-base text-gray-500
+                         font-bold
+                     " *ngIf="selectedItem.isDirectory">
+                    {{ selectedItem?.name }}
+                </div>
+                <ng-container *permission="{name: 'lockOwnerIfLocked', entity: selectedItem.entity}">
+                    <mat-icon class="text-gray-500 cursor-pointer  mx-3"
+                        *permission="{name: 'canUpdate', entity: selectedItem.entity}"
+                        matTooltip="{{ 'FOLDERS.UPDATE_DETAILS' | translate }}"
+                        (click)="openUpdateFromSideMenu()">edit</mat-icon>
+                </ng-container>
+            </div>
+            <mat-icon class="close-icon text-gray-500" (click)="closeDetailsMenu()"
+                [matTooltip]="'BUTTONS.CLOSE' | translate">close</mat-icon>
+        </div>
+        <div class="dynamic-section">
+            <div class="mx-2 h-full">
+                <app-dynamic-tabs [tabs]="myTabs"></app-dynamic-tabs>
+            </div>
+        </div>
+    </div>
+    <div class="h-full font-bold d-flex justify-center items-center" *ngIf="sideMenuLoading">
+        {{ "loading" | translate }}
+    </div>
+</div>
+
+<!-- Comments -->
+<ng-template #commentsTemplate>
+    <div class="overflow-auto h-full">
+        <app-comments-dashlet [correspondence]="sideMenuFileDetails" [entityId]="selectedItem.entity.uid"
+            [showaddcomment]="true" [row]="false">
+        </app-comments-dashlet>
+    </div>
+</ng-template>
+
+<!-- myLogFile -->
+<ng-template #activityTemplate>
+    <!-- <cts-viewer-log [correspondence]="selectedItem.entity"></cts-viewer-log> -->
+    <div class="h-full mt-3">
+        <app-activities-log [documentId]="selectedItem.entity.uid" [documentTitle]="selectedItem.entity.title"
+            [file]="sideMenuFileDetails"></app-activities-log>
+    </div>
+</ng-template>
+
+<ng-template #permissionsTemplate>
+    <div class="h-full overflow-auto px-2 mt-3">
+        <app-permissions [sourcePage]="sourcePage"
+        [allowAddAndBlock]="allowAddAndBlock"  [document]="sideMenuFileDetails"
+            [documentId]="selectedItem.entity.uid"></app-permissions>
+    </div>
+</ng-template>
+
+<!-- Files Tab -->
+<ng-template #filesTemplate>
+    <div class="h-full overflow-auto px-2 mt-3">
+        <cts-versions [file]="selectedItem.entity"></cts-versions>
+    </div>
+</ng-template>
+
+<!-- Details -->
+<ng-template #detailsTemplate>
+    <div class="pb-2 mt-3 h-full px-2 overflow-auto">
+        <div class="static-data">
+            <div class="mt-5">
+                <div class="text-gray-500 font-bold text-base">
+                    {{ "FOLDERS.TITLE_ONLY" | translate }}
+                </div>
+                <div class="text-gray-900 text-sm">
+                    {{ dynamicFormData["dc:title"] }}
+                </div>
+            </div>
+            <div class="mt-3">
+                <div class="text-gray-500 font-bold text-base">
+                    {{ "FOLDERS.DESCRIPTION_ONLY" | translate }}
+                </div>
+                <div class="text-gray-900 text-sm">
+                    {{ dynamicFormData["dc:description"] }}
+                </div>
+            </div>
+            <div class="mt-3">
+                <div class="text-gray-500 font-bold text-base">
+                    {{ "FOLDERS.CREATED_AT" | translate }}
+                </div>
+                <div class="text-gray-900 text-sm">
+                    {{
+                    dynamicFormData["dc:created"]
+                    | localizedDate: "dd MMMM yyyy":(isArabic? 'ar-AR' : 'en-US')
+                    }}
+                </div>
+            </div>
+            <div class="mt-3">
+                <div class="text-gray-500 font-bold text-base">
+                    {{ "FOLDERS.LAST_MODIFIED" | translate }}
+                </div>
+                <div class="text-gray-900 text-sm">
+                    {{
+                    dynamicFormData["dc:modified"]
+                    | localizedDate: "dd MMMM yyyy":(isArabic? 'ar-AR' : 'en-US')
+                    }}
+                </div>
+            </div>
+
+            <div class="super-document-fields">
+                <div class="mt-3" *ngIf='dynamicFormData["gdoc:documentSubject"]'>
+                    <div class="text-gray-500 font-bold text-base">
+                        {{ "CREATE.DOCUMENT_SUBJECT" | translate }}
+                    </div>
+                    <div class="text-gray-900 text-sm">
+                        {{ dynamicFormData["gdoc:documentSubject"] ? dynamicFormData["gdoc:documentSubject"] : '--'}}
+                    </div>
+                </div>
+
+                <div class="mt-3" *ngIf='dynamicFormData["gdoc:documentNumber"]'>
+                    <div class="text-gray-500 font-bold text-base">
+                        {{ "CREATE.DOCUMENT_NUMBER" | translate }}
+                    </div>
+                    <div class="text-gray-900 text-sm">
+                        {{ dynamicFormData["gdoc:documentNumber"] ? dynamicFormData["gdoc:documentNumber"] : '--'}}
+                    </div>
+                </div>
+
+                <div class="mt-3" *ngIf='dynamicFormData["gdoc:documentReferenceNumber"]'>
+                    <div class="text-gray-500 font-bold text-base">
+                        {{ "CREATE.DOCUMENT_REF_NUMBER" | translate }}
+                    </div>
+                    <div class="text-gray-900 text-sm" dir="ltr">
+                        {{ dynamicFormData["gdoc:documentReferenceNumber"] ?
+                        dynamicFormData["gdoc:documentReferenceNumber"] : '--'}}
+                    </div>
+                </div>
+
+                <div class="mt-3" *ngIf='dynamicFormData["gdoc:gDocumentDate"]'>
+                    <div class="text-gray-500 font-bold text-base">
+                        {{ "CREATE.DOCUMENT_DATE" | translate }}
+                    </div>
+                    <div class="text-gray-900 text-sm">
+                        {{ dynamicFormData["gdoc:gDocumentDate"] ? (dynamicFormData["gdoc:gDocumentDate"] |
+                        localizedDate: "dd MMMM yyyy":(isArabic? 'ar-AR' : 'en-US')) : '--'}}
+                    </div>
+                </div>
+
+                <div class="mt-3" *ngIf='(selectedItem.entity.category && selectedItem.entity.category !== {})'>
+                    <div class="text-gray-500 font-bold text-base">
+                        {{ "CREATE.CATEGORY" | translate }}
+                    </div>
+                    <div class="text-gray-900 text-sm">
+                        {{ (selectedItem.entity.category && selectedItem.entity.category !== {}) ?
+                        (isArabic ? selectedItem.entity.category.arabicName : selectedItem.entity.category.englishName)
+                        : '--'}}
+                    </div>
+                </div>
+                <div class="mt-3"
+                    *ngIf='(selectedItem.entity.categoryType && selectedItem.entity.categoryType.arabicName)'>
+                    <div class="text-gray-500 font-bold text-base">
+                        {{ "CREATE.CATEGORY_TYPE" | translate }}
+                    </div>
+                    <div class="text-gray-900 text-sm">
+                        {{ (selectedItem.entity.categoryType && selectedItem.entity.categoryType.arabicName) ?
+                        (isArabic ? selectedItem.entity.categoryType.arabicName :
+                        selectedItem.entity.categoryType.englishName)
+                        : '--'}}
+                    </div>
+                </div>
+                <div class="mt-3" *ngIf='(selectedItem.entity.mainTopic && selectedItem.entity.mainTopic.arabicName)'>
+                    <div class="text-gray-500 font-bold text-base">
+                        {{ "CREATE.MAIN_TOPIC" | translate }}
+                    </div>
+                    <div class="text-gray-900 text-sm">
+                        {{ (selectedItem.entity.mainTopic && selectedItem.entity.mainTopic.arabicName) ?
+                        (isArabic ? selectedItem.entity.mainTopic.arabicName :
+                        selectedItem.entity.mainTopic.englishName)
+                        : '--'}}
+                    </div>
+                </div>
+                <div class="mt-3"
+                    *ngIf='(selectedItem.entity.documentType && selectedItem.entity.documentType.arabicName)'>
+                    <div class="text-gray-500 font-bold text-base">
+                        {{ "CREATE.DOCUMENT_TYPE" | translate }}
+                    </div>
+                    <div class="text-gray-900 text-sm">
+                        {{ (selectedItem.entity.documentType && selectedItem.entity.documentType.arabicName) ?
+                        (isArabic ? selectedItem.entity.documentType.arabicName :
+                        selectedItem.entity.documentType.englishTitle)
+                        : '--'}}
+                    </div>
+                </div>
+
+                <div class="mt-3" *ngIf='dynamicFormData["gdoc:secrecyLevel"]'>
+                    <div class="text-gray-500 font-bold text-base">
+                        {{ "CREATE.SCRECY_LEVEL" | translate }}
+                    </div>
+                    <div class="text-gray-900 text-sm">
+                        {{ 'vocabulary.VOC_SecrecyLevel.' + dynamicFormData["gdoc:secrecyLevel"] | translate}}
+                    </div>
+                </div>
+
+                <div class="mt-3" *ngIf='dynamicFormData["gdoc:importance"]'>
+                    <div class="text-gray-500 font-bold text-base">
+                        {{ "CREATE.IMPORTANCE_LEVEL" | translate }}
+                    </div>
+                    <div class="text-gray-900 text-sm">
+                        {{ 'vocabulary.VOC_Importance.' + dynamicFormData["gdoc:importance"] | translate}}
+                    </div>
+                </div>
+
+                <div class="mt-3" *ngIf='selectedItem.entity.department'>
+                    <div class="text-gray-500 font-bold text-base">
+                        {{ "CREATE.DEPARTMENT_NAME" | translate }}
+                    </div>
+                    <div class="text-gray-900 text-sm">
+                        {{ selectedItem.entity.department ?
+                        (isArabic ? selectedItem.entity.department.arabicName :
+                        selectedItem.entity.department.englishName)
+                        : '--'}}
+                    </div>
+                </div>
+
+                <!-- <div class="mt-3" *ngIf='dynamicFormData["gdoc:departmentCode"]'>
+                    <div class="text-gray-500 font-bold text-base">
+                        {{ "CREATE.DEPARTMENT_CODE" | translate }}
+                    </div>
+                    <div class="text-gray-900 text-sm">
+                        {{ dynamicFormData["gdoc:departmentCode"] ? dynamicFormData["gdoc:departmentCode"] : '--'}}
+                    </div>
+                </div> -->
+
+                <div class="mt-3" *ngIf='dynamicFormData["gdoc:agencyCategoryCode"]'>
+                    <div class="text-gray-500 font-bold text-base">
+                        {{ "CREATE.AGENCY_CATEGORY_CODE" | translate }}
+                    </div>
+                    <div class="text-gray-900 text-sm">
+                        {{ dynamicFormData["gdoc:agencyCategoryCode"] ?
+                        (isArabic ? dynamicFormData["gdoc:agencyCategoryCode"]['properties']['label_ar']
+                        : dynamicFormData["gdoc:agencyCategoryCode"]['properties']['label_en'])
+                        : '--'}}
+                    </div>
+                </div>
+
+                <div class="mt-3" *ngIf='dynamicFormData["gdoc:agencyNameCode"]'>
+                    <div class="text-gray-500 font-bold text-base">
+                        {{ "CREATE.AGENCY_NAME" | translate }}
+                    </div>
+                    <div class="text-gray-900 text-sm">
+                        {{ dynamicFormData["gdoc:agencyNameCode"] ?
+                        (isArabic ? dynamicFormData["gdoc:agencyNameCode"]['properties']['label_ar']
+                        : dynamicFormData["gdoc:agencyNameCode"]['properties']['label_en'])
+                        : '--'}}
+                    </div>
+                </div>
+
+                <div class="mt-3" *ngIf='dynamicFormData["gdoc:countryCategoryCode"]'>
+                    <div class="text-gray-500 font-bold text-base">
+                        {{ "CREATE.COUNTRY_CATEGORY_CODE" | translate }}
+                    </div>
+                    <div class="text-gray-900 text-sm">
+                        {{ dynamicFormData["gdoc:countryCategoryCode"] ?
+                        (isArabic ? dynamicFormData["gdoc:countryCategoryCode"]['properties']['label_ar']
+                        : dynamicFormData["gdoc:countryCategoryCode"]['properties']['label_en'])
+                        : '--'}}
+
+                    </div>
+                </div>
+
+                <div class="mt-3" *ngIf='dynamicFormData["gdoc:countryCode"]'>
+                    <div class="text-gray-500 font-bold text-base">
+                        {{ "CREATE.COUNTRY_NAME" | translate }}
+                    </div>
+                    <div class="text-gray-900 text-sm">
+                        {{ dynamicFormData["gdoc:countryCode"] ?
+                        (isArabic ? dynamicFormData["gdoc:countryCode"]['properties']['label_ar']
+                        : dynamicFormData["gdoc:countryCode"]['properties']['label_en'])
+                        : '--'}}
+                    </div>
+                </div>
+                <div class="mt-3" *ngIf='dynamicFormData["gdoc:remarks"]'>
+                    <div class="text-gray-500 font-bold text-base">
+                        {{ "CREATE.REMARKS" | translate }}
+                    </div>
+                    <div class="text-gray-900 text-sm">
+                        {{ dynamicFormData["gdoc:remarks"] ? dynamicFormData["gdoc:remarks"] : '--'}}
+                    </div>
+                </div>
+            </div>
+
+            <div class="mt-3">
+                <div class="text-gray-500 font-bold text-base">
+                    {{ "FOLDERS.BY" | translate }}
+                </div>
+                <div class="text-gray-900 text-sm d-flex">
+                    <div class="d-flex items-center bg-gray-100 rounded-xl">
+                        <app-user [user]="dynamicFormData['dc:creator']"></app-user>
+                    </div>
+                </div>
+            </div>
+            <div class="mt-3" *ngIf="dynamicFormData['dc:contributors'].length > 0">
+                <div class="text-gray-500 font-bold text-base">
+                    {{ "FOLDERS.CONTRUBITORS" | translate }}
+                </div>
+                <div class="d-flex flex-wrap">
+                    <div class="d-flex items-center bg-gray-100 rounded-xl mb-2"
+                        *ngFor="let user of dynamicFormData['dc:contributors']">
+                        <app-user [user]="user"></app-user>
+                    </div>
+                </div>
+            </div>
+            <div class="mt-3" *ngIf="sharedListUser.length > 0">
+                <div class="text-gray-500 font-bold text-base">
+                    {{"share.shareWith" | translate}}
+                </div>
+                <div class="d-flex flex-wrap">
+                    <div class="d-flex items-center bg-gray-100 rounded-xl mb-2" *ngFor="let user of sharedListUser">
+                        <app-user [user]="user"></app-user>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="mt-5" *ngIf="dynamicForm && dynamicFormData">
+            <app-multiple-dynamic-form-viewer [form]="dynamicForm"
+                [data]="dynamicFormData"></app-multiple-dynamic-form-viewer>
+        </div>
+        <div class="tags-wrappers relative px-0 py-3">
+            <cts-correspondence-tags [correspondence]="sideMenuFileDetails" [customClass]="'tags-dms-wrapper'"
+                [useParams]="true" [addCustomApiName]="'Services.TagDocument'"
+                [deleteCustomApiName]="'Services.UntagDocument'">
+            </cts-correspondence-tags>
+        </div>
+    </div>
+</ng-template>

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

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

package/src/lib/components/file-manger/components/sidepanel/sidepanel.component.ts

@@ -0,0 +1,247 @@
+import { DatePipe } from '@angular/common';
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output, SimpleChanges, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { UpdateModalComponent } from '../update-modal/update-modal.component';
+import { DialogMangmentService } from '../../../../shared-services/dialog-mangment.service';
+import { DynamicFormService } from '../../../../shared-services/dynamic-form.service';
+import { SharedDocsService } from '../../../../shared-services/shared-docs.service';
+import { Subject, Subscription } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { Utils } from 'formiojs';
+import { UserPreferenceValues, UserPreferencesService } from '../../../../core/services/user/user-preferences.service';
+import { DocumentsService } from '../../../documents/services/documents.service';
+import { TagsApiService } from '../../../cts-tags/services/tags-api.service';
+import { TranslationService } from '../../../../core/services/translation/translation.service';
+
+@Component({
+  selector: 'app-sidepanel',
+  templateUrl: './sidepanel.component.html',
+  styleUrls: ['./sidepanel.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class SidepanelComponent implements OnInit , OnDestroy{
+  @ViewChild('detailsTemplate', { static: true })
+  detailsTemplate: TemplateRef<any>;
+  @ViewChild('commentsTemplate', { static: true })
+  commentsTemplate: TemplateRef<any>;
+  @ViewChild('activityTemplate', { static: true })
+  activityTemplate: TemplateRef<any>;
+  @ViewChild('permissionsTemplate', { static: true })
+  permissionsTemplate: TemplateRef<any>;
+  @ViewChild('filesTemplate', { static: true })
+  filesTemplate: TemplateRef<any>;
+
+  private onDestroy$ = new Subject<boolean>();
+  @Input() selectedItem: any;
+  @Input() menuOpen = false;
+  @Input() sourcePage = 'files';
+  @Input() allowAddAndBlock = true;
+  sideMenuLoading = false;
+  @Output() onCloseSideMenu = new EventEmitter();
+
+  dynamicForm; // contain dynamic form
+  dynamicFormData; // contain all file data including dynamic form data
+  rtlEnabled = false;
+  isArabic = true;
+  sideMenuFileDetails; // hold data of dacument to be shown in side menu details
+  showDetails = false;
+  myTabs = [];
+  multiSelectedkeys: string[];
+  languageSubscription: Subscription;
+  tagsSubscription: Subscription;
+  sharedSub: Subscription;
+  sharedData = [];
+  sharedList = [];
+  sharedListUser = [];
+
+  constructor(public datePipe: DatePipe,
+    private userPreferenceService: UserPreferencesService,
+    public dialogMangmentService: DialogMangmentService,
+    private dynamicFormService: DynamicFormService,
+    private documentService: DocumentsService,
+    private tagsApiService: TagsApiService,
+    private translationService: TranslationService,
+    private dialog: MatDialog,
+    private shared: SharedDocsService,) { }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.menuOpen) {
+      this.openSideMenuDetails();
+    }
+  }
+
+  ngOnInit(): void {
+    this.myTabs = [
+      {
+        label: 'Details',
+        icon: 'subtitles',
+        template: this.detailsTemplate,
+      },
+      {
+        label: 'comments',
+        icon: 'textsms',
+        template: this.commentsTemplate,
+      },
+      {
+        label: 'permissions',
+        icon: 'lock',
+        template: this.permissionsTemplate,
+      },
+      {
+        label: 'activity',
+        icon: 'list_alt',
+        template: this.activityTemplate,
+      },
+    ];
+    if (this.userPreferenceService) {
+      this.userPreferenceService
+        .select(UserPreferenceValues.Locale)
+        .pipe(takeUntil(this.onDestroy$))
+        .subscribe((locale) => {
+          this.rtlEnabled = locale === 'ar' ? true : false;
+        });
+    }
+    this.tagsSubscription = this.tagsApiService.getUpdatedFile.subscribe(
+      (res) => {
+        this.documentService
+          .getDocument(this.selectedItem.entity.uid)
+          .subscribe((res) => {
+            this.sideMenuFileDetails = res;
+          });
+      }
+    );
+
+    this.languageSubscription = this.translationService.isArabic$.subscribe(
+      (res) => {
+        this.isArabic = res;
+
+      }
+    );
+  }
+
+  openUpdateFromSideMenu() {
+    this.closeDetailsMenu();
+    this.openUpdateModal();
+  }
+
+  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,
+    });
+  }
+
+  // ----------------------------------------------open file side menu details-----------------------------------------------------------
+  customeHeader =
+    'lock,dc:creator,dc:contributors,gdoc:countryCategoryCode,gdoc:countryCode,gdoc:agencyNameCode,gdoc:agencyCategoryCode';
+
+  openSideMenuDetails() {
+    this.sideMenuLoading = true;
+    this.sideMenuFileDetails = {};
+    this.sharedListUser = [];
+    // this.showDetails = false; // if it was open close it then open it again to allow tabs to be rerendred
+    this.dynamicForm = null;
+    // if (this.selectedItem.isDirectory === false) {
+    this.dynamicFormService
+      .getDynamicForm(this.selectedItem.entity.properties['gdoc:documentTypeCode'] ? this.selectedItem.entity.properties['gdoc:documentTypeCode'] : this.selectedItem.entity.type)
+      .subscribe((res) => {
+        if (res && res['components'] && res['components'].length > 0) {
+          this.dynamicForm = res;
+          let prefix = res.prefix;
+          Utils.eachComponent(res.components, (comp) => {
+            if (comp.type === 'userSelector') {
+              // this.userSelectorKeys.push(comp.fixedKey);
+              let compPrefix = prefix[comp.fixedKey]
+                ? prefix[comp.fixedKey]
+                : '';
+              if (compPrefix) {
+                this.customeHeader =
+                  this.customeHeader +
+                  ',' +
+                  compPrefix +
+                  ':' +
+                  comp.fixedKey;
+              } else {
+                this.customeHeader =
+                  this.customeHeader + ',' + comp.fixedKey;
+              }
+            }
+          });
+        }
+
+        this.documentService
+          .getDocument(this.selectedItem.entity.uid, {
+            'X-NXfetch-document': this.customeHeader,
+          })
+          .subscribe((res) => {
+            this.sideMenuFileDetails = res;
+            this.dynamicFormData = res?.properties;
+            this.showDetails = true;
+            this.sideMenuLoading = false;
+          });
+      });
+    this.getSharesByMe();
+
+    // } else {
+    //   setTimeout(() => {
+    //     this.sideMenuFileDetails = this.selectedItem.entity
+    //     this.showDetails = true
+    //   }, 1000);
+    // }
+  }
+
+  closeDetailsMenu() {
+    this.showDetails = false;
+    this.sideMenuLoading = false;
+    this.onCloseSideMenu.emit();
+  }
+
+  // closeDetailsSideMenu(event) {
+  //   if (!this.permissionService.disableClickOutSide) {
+  //     if (
+  //       event.id !== 'see_details' &&
+  //       !this.checkForClass(event.className)
+  //     ) {
+  //       this.showDetails = false;
+  //     }
+  //   }
+  // }
+
+  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;
+  }
+
+  getSharesByMe() {
+    this.sharedSub = this.shared.getSharesByMe(this.selectedItem.entity.uid).subscribe(res => {
+      this.sharedListUser = res;
+    })
+  }
+
+  ngOnDestroy(): void {
+    this.tagsSubscription ? this.tagsSubscription.unsubscribe() : null;
+    this.languageSubscription ? this.languageSubscription.unsubscribe() : null;
+    this.onDestroy$.next();
+    this.onDestroy$.complete();
+  }
+}