nuxeo-development-framework 3.3.3 → 3.3.4-snapshot

package/src/lib/components/file-manger/components/share-dialog/share-dialog.component.ts

@@ -0,0 +1,288 @@
+import { Component, Inject, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
+
+import { combineLatest, of, Subject, Subscription } from 'rxjs';
+import { switchMap, takeUntil } from 'rxjs/operators';
+
+import { CustomToastrService } from '../../../custom-toastr/services/custom-toastr.service';
+import { TranslationService } from '../../../../Core/services/translation/translation.service';
+import { NuxeoService } from '../../../../Core/services/nuxeo/nuxeo.service';
+import { UserPreferencesService, UserPreferenceValues } from '../../../../Core/services/user/user-preferences.service';
+import { ConfirmationDialogComponent } from '../../../confirmation-dialog/confirmation-dialog/confirmation-dialog.component';
+import { SharedDocsService } from '../../../../shared-services/shared-docs.service';
+
+
+@Component({
+  selector: 'app-share-dialog',
+  templateUrl: './share-dialog.component.html',
+  styleUrls: ['./share-dialog.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class ShareDialogComponent implements OnInit, OnDestroy {
+
+  selectedItem: any;
+  selectedItemType: any;
+  shareForm: FormGroup;
+  selectedUsers = [];
+  subscriptions$: Subscription[] = [];
+  mySharedata: any = [];
+  sharedList = [];
+  sharedListUser = [];
+  depUsers = [];
+  allowUsersToShare = [];
+  forbiddenUsers = [];
+  isSharedBefore = [];
+  currentUser: any;
+  sameCurrentUser = false;
+  disabled = true;
+  rights = [];
+  copied = false;
+  shareableUrl = '';
+  typeToUrl: any;
+  isArabic = false;
+  private onDestroy$ = new Subject<boolean>();
+  locale;
+  constructor(@Inject(MAT_DIALOG_DATA) public data,
+    private dialogRef: MatDialogRef<ShareDialogComponent>,
+    private dialog : MatDialog,
+    private fb: FormBuilder,
+    private shared: SharedDocsService,
+    private tosterService: CustomToastrService,
+    private translateService: TranslationService,
+    private nuxeoService: NuxeoService,
+    private userPreferenceService: UserPreferencesService) {
+    if (this.userPreferenceService) {
+      this.userPreferenceService
+        .select(UserPreferenceValues.Locale)
+        .pipe(takeUntil(this.onDestroy$))
+        .subscribe((locale) => {
+          this.locale = locale;
+          (this.locale === 'en') ? this.isArabic = false : this.isArabic = true;
+        });
+    }
+    this.rights = [
+      {
+        label: (this.locale === 'en') ? "Read" : "قراءة",
+        value: "Read"
+      },
+      {
+        label: (this.locale === 'en') ? "ReadWrite" : "قراءة و تعديل",
+        value: "ReadWrite"
+      }
+    ];
+    this.currentUser = this.nuxeoService?.nuxeoClient?.user?.properties.username;
+    this.selectedItem = data.selectedItem;
+    if (this.selectedItem.entity.type === "Folder" || this.selectedItem.entity.type === "DmsFolder") {
+      this.shareableUrl = `${window.location.protocol}//${window.location.host}/dms/files?id=${this.selectedItem.entity.uid}`
+    } else {
+      this.selectedItemType = this.selectedItem.entity.properties['file:content']['mime-type'];
+      if (this.selectedItemType.includes('image')) {
+        this.typeToUrl = 'image'
+      } else if (this.selectedItemType.includes('video')) {
+        this.typeToUrl = 'video'
+      } else {
+        this.typeToUrl = 'file'
+      }
+      this.shareableUrl = `${window.location.protocol}//${window.location.host}/dms/share(viewer:view/${this.typeToUrl}/${this.selectedItem.entity.uid})?location=/share&formType=${this.selectedItem.entity.type}`
+    }
+  }
+
+  ngOnInit(): void {
+    this.shareForm = this.fb.group({
+      depAnditsUsers: new FormControl('', Validators.required),
+      rights: new FormControl('', Validators.required),
+    });
+    this.shareForm.get('depAnditsUsers').valueChanges.subscribe(res => {
+      if (res?.users) {
+        (JSON.stringify(this.selectedUsers) != JSON.stringify(res.users))
+          ? this.setUser(res.users)
+          : null
+      }
+    })
+    this.shareForm.reset();
+    this.getMyShare();
+  }
+  removeFromForbiddenArr(event) {
+    (this.forbiddenUsers.includes(event.label)) ?
+      this.forbiddenUsers.splice(this.forbiddenUsers.indexOf(event.label), 1) : '';
+  }
+  copy() {
+    this.copied = true;
+    setTimeout(() => {
+      this.copied = false;
+    }, 2000)
+  }
+  setUser(users) {
+    this.isSharedBefore = [];
+    this.sameCurrentUser = false;
+    this.selectedUsers = users;
+    this.selectedUsers.forEach((element) => {
+      if (element.properties.username === this.currentUser) {
+        this.sameCurrentUser = true;
+      }
+      if (this.sharedListUser.includes(element.properties.username)) {
+        this.isSharedBefore.push(element.properties.fullName)
+      }
+    });
+  }
+  setRight(event) {
+    (!this.sameCurrentUser && !this.isSharedBefore.length && this.shareForm.get('rights').value) ? this.disabled = false : this.disabled = true;
+  }
+
+  close() {
+    this.dialogRef.close();
+  }
+
+  checkIfCanViewSecret() {
+    this.forbiddenUsers = [];
+    let arr = [];
+    this.selectedUsers.map(element => {
+      let context = {
+        username: element.properties.username,
+        secrecyLevel: this.selectedItem.entity.properties.secrecyLevel
+      }
+      arr.push(
+        this.shared.canSeeSecretdocs(context).pipe(
+          switchMap((res: any) => {
+            return of({ element, ...res })
+          })
+        )
+      )
+    })
+    return combineLatest(arr).pipe(
+      switchMap((res: any) => {
+        res.forEach(e => {
+          if (!e.canViewSecretFiles) {
+            this.forbiddenUsers.push(e.element.properties.fullName)
+          }
+        })
+        return of(this.forbiddenUsers)
+      }))
+  }
+  doShare(users) {
+    let context = {
+      users: users,
+      mode: this.shareForm.get('rights').value
+    }
+    this.subscriptions$.concat([this.shared.shareDocumentWithUser(context, this.selectedItem.entity.uid).subscribe((res: any) => {
+      if (res)
+        this.tosterService.show('success', 'TOASTER.SUCCESS', "TOASTER.share_Doc_success");
+      this.depUsers = [];
+      this.shareForm.reset();
+      this.disabled = true;
+      this.getMyShare();
+    }, err => {
+      this.tosterService.show('error', 'TOASTER.ERROR', 'TOASTER.share_Doc_fail');
+    })
+    ])
+  }
+
+  share() {
+    if (this.shareForm.invalid) {
+      alert(this.translateService.instant("share.select_user_to_share"))
+    }
+    else {
+      this.allowUsersToShare = [];
+      if (this.selectedItem.entity.properties.secrecyLevel
+        && this.selectedItem.entity.properties.secrecyLevel != "Normal") {
+        this.checkIfCanViewSecret().subscribe(res => {
+          if (!res.length) {
+            this.selectedUsers.forEach(element => {
+              this.allowUsersToShare.push(element.properties.username)
+            });
+            this.doShare(this.allowUsersToShare)
+          }
+        })
+      }
+      else {
+        this.selectedUsers.forEach(element => {
+          this.allowUsersToShare.push(element.properties.username)
+        });
+        this.doShare(this.allowUsersToShare)
+      }
+    }
+  }
+
+  openDialog(functionToDo, username?, sharedMode?) {
+    let message: any;
+    (functionToDo === "Rem_ALL_shares") ? message = "confirmDialog.Rem_All_shares"
+      : message = "confirmDialog.Rem_custom_share";
+      const dialogRef = this.dialog.open(ConfirmationDialogComponent , {
+      width: '510px',
+      data: {
+          title: this.translateService.instant("confirmDialog.confirm"),
+          message: this.translateService.instant(message),
+          confirmButton : `BUTTONS.Remove`,
+          cancelButton : "BUTTONS.Cancel"
+      },
+      disableClose: true,
+    })
+    // const dialogRef = this.fuseConfirmationService.open(
+    //   {
+    //     dismissible: true,
+    //     title: this.translateService.instant("confirmDialog.confirm"),
+    //     message: this.translateService.instant(message),
+    //     actions: {
+    //       confirm: {
+    //         show: true,
+    //         label: this.translateService.instant("BUTTONS.Remove"),
+    //         color: "warn"
+    //       },
+    //       cancel: {
+    //         show: true,
+    //         label: this.translateService.instant("BUTTONS.Cancel"),
+    //       }
+    //     }
+    //   }
+    // );
+    dialogRef.afterClosed().subscribe((result) => {
+      if (result) {
+        if (functionToDo === "Rem_ALL_shares") {
+          this.subscriptions$.concat([this.shared.removeAllSharesforDocs(this.selectedItem.entity.uid).subscribe((res: any) => {
+            if (res) {
+              this.tosterService.show('success', 'TOASTER.SUCCESS', "TOASTER.Rm_All_Shares_success");
+              this.getMyShare();
+            }
+          }, err => {
+            this.tosterService.show('error', 'TOASTER.ERROR', 'TOASTER.Rm_All_Shares_fail');
+          })
+          ])
+        } else {
+          let context = {
+            user: username,
+            mode: sharedMode
+          }
+          this.subscriptions$.concat([
+            this.shared.removeCustomShare(context, this.selectedItem.entity.uid).subscribe((res: any) => {
+              if (res) {
+                this.tosterService.show('success', 'TOASTER.SUCCESS', "TOASTER.Rem_custom_share_success");
+                this.getMyShare();
+              }
+            }, err => {
+              this.tosterService.show('error', 'TOASTER.ERROR', 'TOASTER.Rem_custom_share_fail');
+            })
+          ])
+        }
+      }
+    });
+  }
+
+  getMyShare() {
+    this.sharedListUser = this.sharedList = [];
+    this.subscriptions$.concat([
+      this.shared.getSharesByMe(this.selectedItem.entity.uid, true).subscribe((res) => {
+        this.sharedList = res;
+        if (this.sharedList.length) {
+          this.sharedList.forEach(element => {
+            this.sharedListUser.push(element.user.properties.username)
+          })
+        }
+      })
+    ]);
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions$.forEach(sub => sub.unsubscribe());
+  }
+}

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();
+  });
+});