nuxeo-development-framework 3.1.4 → 3.1.6

package/src/lib/components/permissions/permissions/permissions.component.ts

@@ -0,0 +1,227 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
+import { Subscription } from 'rxjs';
+import { PermissionService } from '../permission.service';
+import { UserService } from '../../../shared-services/user.service';
+import { AddPermissionsDialogComponent } from '../add-permissions-dialog/add-permissions-dialog.component';
+import { EvaluatorsService } from '../../../directive/permissions/evaluators.service';
+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';
+
+@Component({
+  selector: 'app-permissions',
+  templateUrl: './permissions.component.html',
+  styleUrls: ['./permissions.component.scss']
+})
+export class PermissionsComponent implements OnInit, OnDestroy {
+  permissionsType: any;
+  @Input()
+  documentId;
+  @Input()
+  document;
+  @Input()
+  allowAddAndBlock
+  @Input()
+  sourcePage = ''
+  subscriptions$: Subscription[] = [];
+  userVisiblePermissions: any;
+  localPermissions = [];
+  inheritedPermissions = [];
+  departmentPermissions = [];
+  sharePermissions = [];
+  workflowPermissions = [];
+  status=null;//to know inherited Permissions if block or not
+  allowAdd_Block_DeletePermission =false;
+  blockOrUnblock = false;
+  loading = false;
+  allDepartmentUsers = [];
+  constructor(private permissionService: PermissionService,
+    private addPermissionsDialog: MatDialog,
+    private tosterService: CustomToastrService,
+    private translateService: TranslationService,
+    private nuxeoService: NuxeoService,
+    private userServ: UserService,
+    private evaluatorService : EvaluatorsService) {
+  }
+
+  ngOnInit(): void {
+    this.subscriptions$.concat([
+      this.permissionService.createAndAddAnother.subscribe(res => {
+        this.getPermissions();
+      })
+    ]);
+    this.loading = true;
+    this.checkIfUserCanDoActionsOnPermissions();
+    this.getPermissions();
+    (this.inheritedPermissions.length > 0) ? this.status = 'unblock' : this.status = 'block';
+  }
+
+  addPermissionLabel(arr,permissionArr) {
+    arr.forEach(element => {
+      if(!this.isItemContainAdministratorGroup(element)){
+        element.permissionLabel = this.translateService.instant(`rights.${element.permission}`)
+        permissionArr.push(element)
+      }
+    });
+  }
+
+  isItemContainAdministratorGroup(element){
+    let isAdministrator = false;
+    if(element.granted === false){
+      isAdministrator = true;
+    }else if (element.username && element.username['entity-type'] === 'group' && element.username.groupname === 'administrators'){
+      isAdministrator = true;
+    } else if(element.username.userGroups){
+        element.username.userGroups.map(group => {
+          if(group.name === 'administrators'){
+            isAdministrator = true;
+          }
+        })
+    }
+    return isAdministrator;
+  }
+
+  getPermissions() {
+    this.subscriptions$.concat([this.permissionService.getPermissionsForDocument(this.documentId).subscribe(res => {
+      this.permissionsType = res.contextParameters.acls;
+      this.userVisiblePermissions = res.contextParameters.userVisiblePermissions;
+      for (let p of this.permissionsType) {
+        if (p.name == 'local') {
+          this.localPermissions = [];
+          this.addPermissionLabel(p.aces,this.localPermissions);
+          this.localPermissions = this.localPermissions.map(element => {
+            if(element.creator.properties.username != this.nuxeoService.nuxeoClient.user.properties.username) {
+              element['currentUserIsPermissionOwner'] = false;
+            } else {
+              element['currentUserIsPermissionOwner'] = true;
+            }
+            return element;
+          });
+        }
+        else if (p.name == 'inherited') {
+          this.inheritedPermissions = [];
+          this.addPermissionLabel(p.aces,this.inheritedPermissions)
+        }
+        else if (p.name.includes('deptSpace')) {
+          this.departmentPermissions = [];
+          this.addPermissionLabel(p.aces,this.departmentPermissions)
+        }
+        else if (p.name.includes('share')) {
+          this.sharePermissions = [];
+          this.addPermissionLabel(p.aces,this.sharePermissions)
+        }
+        else if (p.name.includes('routing')) {
+          this.workflowPermissions = [];
+          this.addPermissionLabel(p.aces,this.workflowPermissions)
+        }    
+      }
+      (this.inheritedPermissions.length == 0) ? this.status = 'block' : this.status = 'unblock';  
+      this.loading = false;
+    },err => this.loading = false
+    )]);
+    
+  }
+
+  blockPermissionInheritance() {
+    this.blockOrUnblock = true;
+    this.subscriptions$.concat([this.permissionService.blockPermissionInheritance(this.documentId).subscribe(res => {
+      if (res) {
+        this.getPermissions();
+        this.tosterService.show('success', 'TOASTER.SUCCESS', "TOASTER.PERMISSION_BLOCK_SUCCESS");
+        this.blockOrUnblock = false;
+        this.status = "unblock";
+        this.inheritedPermissions = [];
+      }
+    }, err => {
+      this.blockOrUnblock = false;
+      this.tosterService.show('error', 'TOASTER.ERROR', 'TOASTER.PERMISSION_BLOCK_FAIL');
+    }
+    )])
+  }
+
+  unblockPermissionInheritance() {
+    this.blockOrUnblock = true;
+    this.subscriptions$.concat([this.permissionService.unblockPermissionInheritance(this.documentId).subscribe(res => {
+      if (res) {   
+        this.getPermissions();
+        this.tosterService.show('success', 'TOASTER.SUCCESS', "TOASTER.PERMISSION_UNBLOCK_SUCCESS");
+        this.status = "block";
+        this.blockOrUnblock = false;
+      }
+    }, err => {
+      this.blockOrUnblock = false;
+      this.tosterService.show('error', 'TOASTER.ERROR', 'TOASTER.PERMISSION_UNBLOCK_FAIL');
+    })])
+  }
+
+  addNewLocalPermissions() {
+    this.permissionService.departmentUsers = [...this.allDepartmentUsers];
+    this.localPermissions.forEach(perm => {
+      this.permissionService.departmentUsers.forEach((user, index) => {
+        if (perm.username.properties.username === user.properties.username
+          && perm.creator.properties.username === this.nuxeoService.nuxeoClient.user.properties.username) {
+          this.permissionService.departmentUsers.splice(index, 1)
+        }
+      });
+    });
+    const dialogConfig = new MatDialogConfig();
+    dialogConfig.disableClose = false;
+    dialogConfig.autoFocus = true;
+    dialogConfig.data = {
+      id: this.documentId,
+      rights: this.userVisiblePermissions
+    };
+    dialogConfig.width = '35%';
+    dialogConfig.height = '70%';
+    // befor opening modal we diable clickout side effect to prevent details side menu from closing when clicking in the modal
+    this.permissionService.disableClickOutSide = true;
+    let dialofRef = this.addPermissionsDialog.open(
+      AddPermissionsDialogComponent, 
+      dialogConfig);
+    dialofRef.afterClosed().subscribe(res => {
+      // return click outside effect to work to close side menu when clicking out side it
+      this.permissionService.disableClickOutSide = false;
+      if(res) {
+        this.getPermissions()
+      }
+    })
+  }
+  checkIfUserCanDoActionsOnPermissions() {
+    this.evaluatorService.evaluateRule('isManagePermissionEnabled').then(isEnabled => {
+      if (isEnabled) {
+        let userInControllerGroup = false;
+        this.nuxeoService.nuxeoClient.user.userGroups.forEach(group => {
+          if (group.name === 'dms_document_controller') {
+            userInControllerGroup = true;
+          }
+        });
+        if (userInControllerGroup) {
+          let depCode = this.userServ.getUserDepartmentFromPath(this.document.path);
+          this.permissionService.getDepMembers(depCode).subscribe(res => {
+            this.permissionService.departmentUsers = res.users.map(e => {
+              e['displayLabel'] = e.properties.firstName + ' ' + e.properties.lastName;
+              return e;
+            });
+            this.allDepartmentUsers = [...this.permissionService.departmentUsers];
+            res.users.forEach(user => {
+              if (user.properties.username === this.nuxeoService.nuxeoClient.user.properties.username
+                && this.document.type === 'DmsFolder') {
+                this.allowAdd_Block_DeletePermission = true;
+              }
+            });
+          })
+        } else {
+          this.allowAdd_Block_DeletePermission = false;
+        }
+      } else {
+        this.allowAdd_Block_DeletePermission = false;
+      }
+    });
+  }
+  ngOnDestroy() {
+    // return click outside effect to work to close side menu when clicking out side it
+    this.permissionService.disableClickOutSide = false;
+    this.subscriptions$.forEach(e => e.unsubscribe())
+  }
+}

package/src/lib/components/permissions/permissions-template/permissions-template.component.html

@@ -0,0 +1,47 @@
+<div class="flex flex-col">
+    <div *ngFor="let p of permissionsArray">
+        <!-- Info -->
+        <div class="flex single-permssion" *ngIf="(p.granted && p.username['entity-type']== 'user') || (p.granted && (p.username['entity-type']== 'group' && (p.username.id != 'administrators' && p.username.id != 'members')))">
+            <mat-icon>lock</mat-icon>
+            <div class="flex flex-auto justify-between ml-3">
+                <!-- Info -->
+                <div>
+                    <div class="font-bold text-base text-gray-900 w-64">
+                        <span *ngIf="p.username['entity-type'] == 'user'; else group">
+                            {{p.username.fullName}}
+                        </span>
+                        <ng-template #group>
+                            {{p.username.grouplabel}}
+                        </ng-template>
+                        - {{p.permissionLabel}}</div>
+                    <div class="mt-0.5 text-secondary">
+                        <div class="flex flex-row gap-x-14">
+                            <div class="flex flex-col">
+                                <div *ngIf="p.begin != null;else permanent">
+                                    {{p.begin | date:'dd/MM/yyyy'}}
+                                    <span *ngIf="p.end != null">- {{ p.end | date:'dd/MM/yyyy' }}</span>
+                                </div>
+                                <ng-template #permanent>
+                                    <h1>{{"permission.permanent" | translate }}</h1>
+                                </ng-template>
+                                <div class="text-secondary" *ngIf="p.creator != null">{{"permission.granted" | translate }} {{p.creator['fullName']}}</div>
+                            </div>
+                            <!-- Actions -->
+                            <div class="flex" *ngIf="allowDeleteAndEdit && p.currentUserIsPermissionOwner 
+                            && p.permission != 'Everything'">
+                                <button mat-icon-button
+                                    (click)="editPermission(p.id,p.username,p.permission,p.begin,p.end)">
+                                    <mat-icon [svgIcon]="'heroicons_outline:pencil-alt'"></mat-icon>
+                                </button>
+                                
+                                <button mat-icon-button (click)="openDialog(p.id)">
+                                    <mat-icon [svgIcon]="'heroicons_outline:trash'"></mat-icon>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

package/src/lib/components/permissions/permissions-template/permissions-template.component.scss

@@ -0,0 +1,7 @@
+.single-permssion{
+    box-shadow: 0 0 12.5px #0000001a;
+    border-radius: 8px;
+    padding: 15px;
+    margin: 10px;
+    font-size: 12px;
+}

package/src/lib/components/permissions/permissions-template/permissions-template.component.spec.ts

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

package/src/lib/components/permissions/permissions-template/permissions-template.component.ts

@@ -0,0 +1,104 @@
+import { Component, Input, OnInit, EventEmitter, Output } from '@angular/core';
+import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
+import { PermissionService } from '../permission.service';
+import { AddPermissionsDialogComponent } from '../add-permissions-dialog/add-permissions-dialog.component';
+import { CustomToastrService } from '../../custom-toastr/services/custom-toastr.service';
+import { ConfirmationDialogComponent } from '../../confirmation-dialog/confirmation-dialog/confirmation-dialog.component';
+
+@Component({
+  selector: 'app-permissions-template',
+  templateUrl: './permissions-template.component.html',
+  styleUrls: ['./permissions-template.component.scss']
+})
+export class PermissionsTemplateComponent implements OnInit {
+
+  @Input() allowDeleteAndEdit = false;
+  @Input() documentId;
+  @Input() userVisiblePermissions;
+  @Input('permissionsArray') permissionsArray = [];
+  @Output() getPermissions = new EventEmitter();
+  constructor(private permissionService: PermissionService,
+    private tosterService: CustomToastrService,
+    private dialog: MatDialog) { }
+
+  ngOnInit(): void {
+  }
+
+  deletePermission(permission) {
+  this.permissionService.deleteLocalPermissions(this.documentId, permission).subscribe(
+    res => {
+      this.getPermissions.emit();
+      this.tosterService.show('success', 'TOASTER.SUCCESS', "TOASTER.PERMISSION_REMOVE_SUCCESS")
+    }, err => {
+      this.tosterService.show('error', 'TOASTER.ERROR', 'TOASTER.PERMISSION_REMOVE_FAIL');
+    })
+  }
+
+  editPermission(permission, username, userVisiblePermissions, begin, end) {
+    const dialogConfig = new MatDialogConfig();
+    dialogConfig.disableClose = false;
+    dialogConfig.autoFocus = true;
+    dialogConfig.data = {
+      id: this.documentId,
+      rights: this.userVisiblePermissions,
+      state: "update",
+      aclId: permission,
+      username: username,
+      editableRight: userVisiblePermissions,
+      editableBegin: begin,
+      editableEnd: end,
+    };
+    dialogConfig.width = '35%';
+    dialogConfig.height = '70%';
+    // befor opening modal we diable clickout side effect to prevent details side menu from closing when clicking in the modal
+    this.permissionService.disableClickOutSide = true;
+    let addDialogRef = this.dialog.open(AddPermissionsDialogComponent, dialogConfig);
+    addDialogRef.afterClosed().subscribe(res => {
+      // return click outside effect to work to close side menu when clicking out side it
+      this.permissionService.disableClickOutSide = false;
+      this.getPermissions.emit()
+    })
+  }
+
+  openDialog(permission) {
+    // befor opening modal we diable clickout side effect to prevent details side menu from closing when clicking in the modal
+    this.permissionService.disableClickOutSide = true;
+    let dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+      width: '510px',
+      data: {
+          title: 'confirmDialog.confirm',
+          message: 'confirmDialog.Rem_Per',
+          confirmButton : `BUTTONS.Remove`,
+          cancelButton : "BUTTONS.Cancel"
+      },
+      disableClose: true,
+  });
+  dialogRef.afterClosed().subscribe((result) => {
+    // return click outside effect to work to close side menu when clicking out side it
+    this.permissionService.disableClickOutSide = false;
+    if (result) {
+      this.deletePermission(permission)
+    }
+  });
+    // const dialogRef = this.fuseConfirmationService.open(
+    //   {
+    //     dismissible: true,
+    //     title: this.translateService.instant("confirmDialog.confirm"),
+    //     message: this.translateService.instant("confirmDialog.Rem_Per"),
+    //     actions: {
+    //       confirm: {
+    //         show: true,
+    //         label: this.translateService.instant("BUTTONS.Remove"),
+    //         color: "warn"
+    //       },
+    //       cancel: {
+    //         show: true,
+    //         label: this.translateService.instant("BUTTONS.Cancel"),
+    //       }
+    //     }
+    //   }
+    // );
+
+  }
+
+}

package/src/lib/components/permissions/permissions.module.ts

@@ -0,0 +1,39 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PermissionsComponent } from './permissions/permissions.component';
+import { AddPermissionsDialogComponent } from './add-permissions-dialog/add-permissions-dialog.component';
+import { PermissionsTemplateComponent } from './permissions-template/permissions-template.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { SharedServicesModule } from '../../shared-services/shared-services.module';
+import { MatIconModule } from '@angular/material/icon';
+import { PipesModule } from '../../pipes/pipes.module';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { DirectiveModule } from '../../directive/directive.module';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { AvatarModule } from '../avatar/avatar.module';
+
+
+
+@NgModule({
+  declarations: [PermissionsComponent, AddPermissionsDialogComponent,PermissionsTemplateComponent],
+  imports: [
+    CommonModule,
+    TranslateModule,
+    MatDividerModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    SharedServicesModule,
+    MatIconModule,
+    PipesModule,
+    FormsModule,
+    ReactiveFormsModule,
+    DirectiveModule,
+    NgSelectModule,
+    AvatarModule
+  ],
+  exports : [PermissionsComponent ,AddPermissionsDialogComponent,PermissionsTemplateComponent],
+})
+export class PermissionsModule { }

package/src/lib/components/select/select/select.component.html

@@ -0,0 +1,64 @@
+<ng-container *ngIf="label">
+  <div>
+    <label class="select-label"
+      >{{ label | translate
+      }}<span *ngIf="false" class="text-danger m-1">*</span></label
+    >
+  </div>
+</ng-container>
+<ng-select
+  [items]="buffer"
+  [bindLabel]="bindLabel"
+  [bindValue]="bindValue"
+  [placeholder]="placeholder"
+  [multiple]="multiple"
+  [searchable]="searchable"
+  [closeOnSelect]="closeOnSelect"
+  [hideSelected]="hideSelectedItems"
+  [loading]="loading"
+  (scrollToEnd)="onScrollToEnd()"
+  (change)="emitSelection($event)"
+  [disabled]="disabled"
+  [(ngModel)]="selection"
+>
+  <!-- template for viewing options in single and multi select -->
+  <ng-template
+    ng-option-tmp
+    let-item="item"
+    let-item$="item$"
+    let-index="index"
+  >
+    <div class="option-wrapper">
+      <span class="check-box-wrapper" *ngIf="multiple">
+        <input
+          id="item-{{ index }}"
+          type="checkbox"
+          [ngModel]="item$.selected"
+        />
+        <span class="icon-wrapper">
+          <span class="bi bi-check2 icon"></span>
+        </span>
+      </span>
+      <span class="label-wrapper">
+        {{ item[bindLabel] | translate }}
+      </span>
+    </div>
+  </ng-template>
+
+  <!-- template for viewing single select selected value -->
+  <ng-template ng-label-tmp let-item="item">
+    {{ (bindLabel ? item[bindLabel] : item) | translate }}
+  </ng-template>
+
+  <!-- template for viewing multi select selected values -->
+  <ng-template ng-multi-label-tmp let-items="items" let-clear="clear">
+    <div class="ng-value" *ngFor="let item of items ? items : []">
+      <span class="ng-value-label">
+        {{ (bindLabel ? item[bindLabel] : item) | translate }}
+      </span>
+      <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true"
+        >×</span
+      >
+    </div>
+  </ng-template>
+</ng-select>

package/src/lib/components/select/select/select.component.scss

@@ -0,0 +1,144 @@
+@import "../../../assets/scss/myApp.scss";
+.select-label{
+  color: #8f98aa;
+  font-size: 12px;
+  margin-bottom: 0px;
+}
+.ng-select-container {
+  border: none !important;
+  background-color: rgba(143, 152, 170, 0.1) !important;
+  border-radius: 5px !important;
+  height: 40px !important;
+  .ng-value-container {
+    padding: 5px 7px 0px !important;
+    .ng-placeholder {
+      padding: 0px 5px 0px;
+    }
+    .ng-value {
+      color: #495057;
+    }
+  }
+  .ng-arrow-wrapper {
+    padding: 0px 20px;
+  }
+  .ng-input {
+    left: 10px;
+    right: 10px;
+    width: auto;
+    input {
+    }
+  }
+}
+
+.ng-select-disabled {
+  .ng-select-container {
+    background-color: #e9ecef !important;
+  }
+}
+.ng-dropdown-panel {
+  .ng-dropdown-panel-items {
+    .ng-option {
+      .option-wrapper {
+        .check-box-wrapper {
+          position: relative;
+          input {
+            visibility: hidden;
+            width: 20px;
+            height: 20px;
+          }
+          .icon-wrapper {
+            position: absolute;
+            top: 0px;
+            left: 0px;
+            width: 20px;
+            height: 20px;
+            border: 1px solid $blue;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .icon {
+              color: $blue;
+              display: none;
+              justify-content: center;
+              align-items: center;
+              font-weight: bold;
+            }
+          }
+        }
+        .label-wrapper {
+        }
+      }
+      // .ng-option-label{
+      //   .multiple-options-wrapper{
+      //     display: flex;
+      //     align-items: center;
+      //     .text-wrapper{
+      //       padding: 0px 10px;
+      //     }
+      //     .iocn-wrapper{
+      //       width: 20px;
+      //       height: 20px;
+      //       border: 1px solid #2e62df;
+      //       display: flex;
+      //       justify-content: center;
+      //       align-items: center;
+      //       color: #2e62df;
+      //       font-weight: bold;
+      //     }
+      //   }
+      // }
+    }
+    .ng-option-selected {
+      .option-wrapper {
+        .check-box-wrapper {
+          .icon-wrapper {
+            .icon {
+              display: flex;
+            }
+          }
+        }
+        .label-wrapper {
+          color: $blue;
+        }
+      }
+    }
+  }
+}
+
+.ng-select {
+  .ng-select-focused:not(.ng-select-opened) .ng-select-container {
+    border-color: #ccc;
+    box-shadow: none;
+  }
+}
+// .ng-option {
+//   font-size: 12px;;
+// }
+
+// .ng-input input[type="text"] {
+//   //caret-color: transparent;
+// }
+
+// .ng-dropdown-panel .ng-dropdown-panel-items {
+//   .ng-optgroup {
+//     font-size: 12px;;
+//   }
+// border: 1px solid lightgray;
+// }
+// .scroll-host::-webkit-scrollbar-thumb {
+//   @apply bg-gray-200;
+// }
+
+// .ng-select.ng-select-multiple
+//   .ng-select-container
+//   .ng-value-container
+//   .ng-value {
+//   font-size: 12px;;
+// }
+
+// .ng-select .ng-select-container .ng-value-container .ng-placeholder {
+//   color: #f44336;
+// }
+// .ng-select .ng-select-container:after {
+//   border-color: #f44336 !important;
+// }

package/src/lib/components/select/select/select.component.spec.ts

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