nuxeo-development-framework 4.1.4 → 4.1.6

package/src/lib/components/dynamic-fields-renderer/dynamic-fields-renderer/dynamic-fields-renderer.component.spec.ts

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

package/src/lib/components/dynamic-fields-renderer/dynamic-fields-renderer/dynamic-fields-renderer.component.ts

@@ -0,0 +1,168 @@
+import { Component, OnInit, ViewEncapsulation , Input } from '@angular/core';
+
+@Component({
+  selector: 'app-dynamic-fields-renderer',
+  templateUrl: './dynamic-fields-renderer.component.html',
+  styleUrls: ['./dynamic-fields-renderer.component.scss'],
+  encapsulation : ViewEncapsulation.None
+})
+export class DynamicFieldsRendererComponent implements OnInit {
+  @Input() form;
+  @Input() agencyNameFilter;
+  @Input() countryNameFilter;
+  @Input() mode = "add";
+  @Input() fields = [
+    {
+      type : 'text',
+      label : "CREATE.DOCUMENT_SUBJECT",
+      formControlName : "subject",
+      placeholder : "CREATE.DOCUMENT_SUBJECT",
+      required : true,
+      permission : 'isHiddenField',
+    },
+    {
+      type : 'text',
+      label : "CREATE.DOCUMENT_NUMBER",
+      formControlName : "documentNumber",
+      placeholder : "CREATE.DOCUMENT_NUMBER",
+      required : false,
+      permission : 'isHiddenField'
+    },
+    {
+      type : 'date',
+      label : "CREATE.DOCUMENT_DATE",
+      formControlName : "gdocumentDate",
+      permission : 'isHiddenField'
+    },
+    {
+      type : 'dynamic-vocabulary',
+      label : "CREATE.SCRECY_LEVEL",
+      bindLabel : 'label',
+      bindValue : 'id',
+      multiple : false,
+      searchable : false,
+      closeOnSelect : true, 
+      hideSelectedItems : false,
+      disabled : false,
+      vocabularyType : 'VOC_SecrecyLevel',
+      formControlName : "secrecyLevel",
+      placeholder : "VOCABULARY.SELECT_ITEM",
+      permission : 'isHiddenField'
+    },
+    {
+      type : 'dynamic-vocabulary',
+      label : "CREATE.IMPORTANCE_LEVEL",
+      bindLabel : 'label',
+      bindValue : 'id',
+      multiple : false,
+      searchable : false,
+      closeOnSelect : true, 
+      disabled : false,
+      hideSelectedItems : false,
+      vocabularyType : 'VOC_Importance',
+      formControlName : "importanceLevel",
+      placeholder : "VOCABULARY.SELECT_ITEM",
+      permission : 'isHiddenField'
+    },
+    {
+      type : 'department-selector',
+      label : "CREATE.DEPARTMENT_CODE",
+      formControlName : "departmentCode",
+      placeholder : "please select department",
+      pp_departmentNestedTree : "PP_OS_Departments",
+      pp_departmentTree : "PP_OS_Departments",
+      customPrefix : "osdept",
+      customParentProperty : "osdepartment_parentDepartmentCode",
+      useCustomAddEditAction : true,
+      required : false,
+      permission : 'isHiddenField'
+    },
+    {
+      type : 'translated-vocabulary',
+      label : "CREATE.AGENCY_CATEGORY_CODE",
+      arbBindLabel : 'label_ar',
+      engBindLabel : "label_en",
+      bindValue : 'id',
+      multiple : false,
+      searchable : false,
+      closeOnSelect : true, 
+      hideSelectedItems : false,
+      vocbularyId : 'VOC_AgencyCategory',
+      formControlName : "agencyCategoryCode",
+      placeholder : "VOCABULARY.SELECT_ITEM",
+      useFilter: false,
+      filter : '',
+      permission : 'isHiddenField'
+    },
+    {
+      type : 'translated-vocabulary',
+      label : "CREATE.AGENCY_NAME",
+      arbBindLabel : 'label_ar',
+      engBindLabel : "label_en",
+      bindValue : 'id',
+      multiple : false,
+      searchable : true,
+      closeOnSelect : true, 
+      hideSelectedItems : false,
+      vocbularyId : 'VOC_Agency',
+      formControlName : "agencyName",
+      placeholder : "VOCABULARY.SELECT_ITEM",
+      useFilter: true,
+      filter : 'agencyName',
+      permission : 'isHiddenField'
+    },
+    {
+      type : 'translated-vocabulary',
+      label : "CREATE.COUNTRY_CATEGORY_CODE",
+      arbBindLabel : 'label_ar',
+      engBindLabel : "label_en",
+      bindValue : 'id',
+      multiple : false,
+      searchable : true,
+      closeOnSelect : true, 
+      hideSelectedItems : false,
+      vocbularyId : 'VOC_CountryCategory',
+      formControlName : "countryCategoryCode",
+      placeholder : "VOCABULARY.SELECT_ITEM",
+      useFilter: false,
+      filter : '',
+      permission : 'isHiddenField'
+    },
+    {
+      type : 'translated-vocabulary',
+      label : "CREATE.COUNTRY_NAME",
+      arbBindLabel : 'label_ar',
+      engBindLabel : "label_en",
+      bindValue : 'id',
+      multiple : false,
+      searchable : true,
+      closeOnSelect : true, 
+      hideSelectedItems : false,
+      vocbularyId : 'VOC_Country',
+      formControlName : "countryName",
+      placeholder : "VOCABULARY.SELECT_ITEM",
+      useFilter: true,
+      filter : 'countryName',
+      permission : 'isHiddenField'
+    },
+    {
+      type : 'text',
+      label : "CREATE.REMARKS",
+      formControlName : "remarks",
+      placeholder : "CREATE.REMARKS",
+      required : false,
+      permission : 'isHiddenField'
+    }
+  ];
+  constructor() { }
+
+  ngOnInit(): void {
+    if(this.fields.length && this.form) {
+      if (this.mode === "add") {
+        this.form.get("secrecyLevel").patchValue("Normal");
+      } else if (this.mode === "edit") {
+        this.form.get("secrecyLevel").patchValue(this.form.value.secrecyLevel);
+      }
+    }
+  }
+}

package/src/lib/components/dynamic-fields-renderer/dynamic-fields-renderer.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DynamicFieldsRendererComponent } from './dynamic-fields-renderer/dynamic-fields-renderer.component';
+import { DynamicFormModule } from '../dynamic-form/dynamic-form.module';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { DirectiveModule } from '../../directive/directive.module';
+import { TranslateModule } from '@ngx-translate/core';
+import { VocabularyModule } from '../vocabulary/vocabulary.module';
+
+
+
+@NgModule({
+  declarations: [DynamicFieldsRendererComponent],
+  imports: [
+    CommonModule,
+    DynamicFormModule,
+    FormsModule,
+    ReactiveFormsModule,
+    DirectiveModule,
+    TranslateModule,
+    VocabularyModule
+  ],
+  exports:[
+    DynamicFieldsRendererComponent
+  ]
+})
+export class DynamicFieldsRendererModule { }

package/src/lib/components/dynamic-filter/dynamic-filter/dynamic-filter.component.html

@@ -0,0 +1,122 @@
+<div class="aggregation-container">
+  <div class="search-title">
+    {{ prefix + "." + title | translate }}
+  </div>
+  <ng-container *ngIf="filters && componentType != 'colorsCodes'">
+    <ng-container *ngFor="let group of filters; index as i">
+      <div *ngIf="i < 5 || more" class="search-checkbox">
+        <!-- <input
+          [checked]="_selections.includes(group.key)"
+          type="checkbox"
+          (change)="onFilterSelect(group.key, $event.target.checked)"
+        /> -->
+        <!-- <div class="mx-8">
+          <span [ngSwitch]="EntityType(group.fetchedKey)">
+            <span *ngSwitchCase="'directoryEntry'">
+              {{
+                "vocabulary." + group.fetchedKey.directoryName + "." + group.key
+                  | translate
+              }}
+            </span>
+            <span *ngSwitchCase="'user'">
+              {{
+                group.fetchedKey.properties.firstName +
+                  " " +
+                  group.fetchedKey.properties.lastName
+              }}
+            </span>
+            <span *ngSwitchDefault>
+              {{ prefix + "." + "buckets." + group.key | translate }}
+            </span>
+          </span>
+          <bdi>({{ group.docCount }})</bdi>
+        </div> -->
+        <mat-checkbox
+          [checked]="_selections.includes(group.key)"
+          (change)="onFilterSelect(group.key, $event.checked)"
+        >
+          <span [ngSwitch]="componentType" class="aggregation-label">
+
+            <span *ngSwitchCase="'custom-voc'">
+              <lib-cutome-voc-viewer [type]="componentType" [group]="group"></lib-cutome-voc-viewer>
+            </span>
+
+            <span *ngSwitchCase="'vocabulary'">
+              <lib-cutome-voc-viewer [type]="componentType" [group]="group"></lib-cutome-voc-viewer>
+            </span>
+
+            <span *ngSwitchCase="'user'">
+              {{
+                group.key === 'system' ? ('SYSTEM_ADMIN' | translate) : (group.fetchedKey.properties.firstName + " " + group.fetchedKey.properties.lastName)
+              }}
+            </span>
+
+            <span *ngSwitchCase="'custom-pp'">
+              <lib-custom-pp-viewer [pageProvider]="customPageProvider" [config]="config" [group]="group"></lib-custom-pp-viewer>
+            </span>
+
+            <span *ngSwitchCase="'custom-document'">
+              <lib-custom-document-viewer [pageProvider]="customPageProvider" [group]="group"></lib-custom-document-viewer>
+            </span>
+
+            <span *ngSwitchCase="'department'">
+              <cts-department-viewer
+              [noStyle]="true"
+              [value]="group.key"
+            >
+            </cts-department-viewer>
+            <!-- {{group.key}} -->
+            </span>
+
+            <span *ngSwitchCase="'custom-department'">
+              {{isArabic ? group.fetchedKey.properties[config.propertyAr] : group.fetchedKey.properties[config.propertyEn]}}
+            </span>
+
+            <span *ngSwitchCase="'string'">
+              <span>{{group.key}}</span>
+            </span>
+            <span *ngSwitchDefault>
+              {{ prefix + "." + "buckets." + group.key | translate }}
+            </span>
+          </span>
+          <bdi>({{ group.docCount }})</bdi></mat-checkbox
+        >
+      </div>
+    </ng-container>
+    <div *ngIf="filters.length > 5" class="more">
+      <button class="btn-more" (click)="more = !more">
+        {{
+          more
+            ? (prefix + "." + "viewless" | translate)
+            : (prefix + "." + "viewmore" | translate)
+        }}
+      </button>
+    </div>
+  </ng-container>
+
+  <ng-container *ngIf="filters && componentType == 'colorsCodes'">
+    <div class="flex flex-wrap colorsContainer">
+      <ng-container *ngFor="let group of filters; index as i">
+          <div *ngIf="i < 24 || more" class="color-search-checkbox flex items-end justify-start" [style.backgroundColor]="group.key"
+          matTooltip="{{'search.colorInOtherPhotos' | translate :{num:group.docCount} }}" [matTooltipPosition]="'above'" 
+          (click)="onFilterSelect(group.key, (_selections.includes(group.key)) ? false : true)">
+            <span class="checkIcon bi bi-check" *ngIf="_selections.includes(group.key)" [ngStyle]="{color: (isWhiteOrClosetToWhite(group.key)) ? 'black': 'white'}"></span>
+          </div>
+        
+      </ng-container>
+    </div>
+    <div *ngIf="filters.length > 20" class="more">
+      <button class="btn-more mt-1" (click)="more = !more">
+        {{
+          more
+            ? (prefix + "." + "viewless" | translate)
+            : (prefix + "." + "viewmore" | translate)
+        }}
+      </button>
+    </div>
+  </ng-container>
+
+
+
+  
+</div>

package/src/lib/components/dynamic-filter/dynamic-filter/dynamic-filter.component.scss

@@ -0,0 +1,103 @@
+@import "../../../assets/scss/myApp.scss";
+//utilities
+.mx-8 {
+  margin-left: 8px;
+  margin-right: 8px;
+}
+.aggregation-container {
+  border-bottom: 1px solid $gray-200;
+  padding-bottom: 8px;
+  .search-title {
+    margin-bottom: 6px;
+    margin-top: 6px;
+    border-bottom-width: 2px;
+    font-weight: 700;
+    --tw-text-opacity: 1;
+    color: rgba(70, 85, 115, var(--tw-text-opacity));
+  }
+
+  .search-checkbox {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.5rem /* 8px */;
+    // input[type="checkbox"] {
+    //   transform: scale(1.4);
+    //   border-width: 0px;
+    //   background-color: #d9dce2 !important;
+    //   border-radius: 0px;
+    //   margin-inline-start: 2.5px;
+    // }
+  }
+  .colorsContainer {
+    overflow: visible;
+    width: max-content;
+    max-width: 252px;
+    gap: 4px;
+  }
+  .color-search-checkbox {
+    width: 28px;
+    height: 28px;
+    box-shadow: rgba(0, 0, 0, 0.35) 3px 5px 10px;
+    transition: all .2s ease-in-out; 
+    cursor: pointer;
+    border-radius: 10% / 50%;
+    .checkIcon {
+      width: 1rem/* 24px */;
+      height: 1rem/* 24px */;
+      min-width: 1rem/* 24px */;
+      min-height: 1rem/* 24px */;
+      font-size: 1rem/* 24px */;
+      line-height: 1rem/* 24px */;
+      color: white;
+    }
+  }
+  .color-search-checkbox:hover {
+    transform: scale(1.3);
+  }
+  .mat-checkbox-ripple .mat-ripple-element,
+  .mat-checkbox-checked.mat-accent .mat-checkbox-background {
+    background-color: $green-300 !important;
+  }
+  .mat-checkbox-ripple .mat-ripple-element {
+    position: fixed;
+    left: inherit;
+    top: inherit;
+    transform: translate(-3px, -3px) !important;
+  }
+  mat-checkbox {
+    .mat-checkbox-background {
+      background-color: $gray-100 !important;
+    }
+    .mat-checkbox-inner-container {
+      transform: scale(1.1);
+    }
+  }
+  // .checkbox\:ring-transparent:focus {
+  //   --tw-ring-color: transparent;
+  // }
+  .justify-items-center {
+    justify-items: center;
+  }
+  .more {
+    display: flex;
+    justify-content: center;
+  }
+  .btn-more {
+    border-bottom-width: 2px;
+    --tw-border-opacity: 1;
+    border-color: rgba(217, 220, 226, var(--tw-border-opacity));
+    background: none;
+    border: none;
+    margin: 0;
+    padding: 0;
+    color: blue;
+  }
+}
+.rtl {
+  mat-checkbox {
+    .mat-checkbox-inner-container {
+      margin-right: 0px !important ;
+      margin-left: 8px !important;
+    }
+  }
+}

package/src/lib/components/dynamic-filter/dynamic-filter/dynamic-filter.component.spec.ts

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

package/src/lib/components/dynamic-filter/dynamic-filter/dynamic-filter.component.ts

@@ -0,0 +1,124 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewEncapsulation,
+} from '@angular/core';
+import { Subscription } from 'rxjs';
+import { TranslationService } from '../../../core/services/translation/translation.service';
+
+/**
+ * Dyanamic filter is a component that leverages Nuxeo Elastic search aggregation buckets data to dynamically
+ * generate data filtering checkbox groups & emits checkbox selection for consumption
+ * @title
+ * Dynamic Filter
+ *
+ * @example
+ *
+ * <cts-dynamic-filter
+ *   [entityType]="entityType"
+ *   [filters]="aggregationBuckets"
+ *   [id]="aggregationId"
+ *   [selections]="aggregationSelection"
+ *   [title]="aggregationField"
+ *   [prefix]="'search'"
+ *   (onFilterSelected)="FilterSelected($event)">
+ * </cts-dynamic-filter>
+ */
+@Component({
+  selector: 'cts-dynamic-filter',
+  templateUrl: './dynamic-filter.component.html',
+  styleUrls: ['./dynamic-filter.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class DynamicFilterComponent implements OnInit {
+  /** emits array of filters */
+  @Output() onFilterSelected = new EventEmitter();
+  public _selections;
+
+  /** title of the filters group */
+  @Input()
+  title = '';
+  @Input()
+  /** filters group */
+  filters;
+  /** new filters coming from the backend based on the selection */
+  @Input()
+  set selections(val) {
+    this._selections = val;
+  }
+  /** Aggregation ID */
+  @Input()
+  id;
+  @Input()
+  entityType;
+  /** static  path for translation passed from out side according to each page translation path */
+  @Input()
+  prefix;
+  /** special type for department */
+  @Input()
+  department: boolean = false;
+  @Input() componentType = 'defult';
+  @Input() customPageProvider ;
+  @Input() config ;
+  more = false;
+  isArabic = false;
+  translationSubscription : Subscription;
+  constructor(private translationService : TranslationService) {}
+
+  ngOnInit(): void {
+    this.translationSubscription = this.translationService.isArabic.subscribe(res => {
+      this.isArabic = res;
+    })
+  }
+
+  onFilterSelect(committeeName, e) {
+    if (e) {
+      this._selections.push(committeeName);
+      this.onFilterSelected.emit({
+        filter: {
+          [this.id]: JSON.stringify([...this._selections]),
+        },
+        type: this.entityType,
+      });
+    } else {
+      this._selections = this._selections.filter((e) => {
+        return e != committeeName;
+      });
+      this.onFilterSelected.emit({
+        filter: {
+          [this.id]: JSON.stringify([...this._selections]),
+        },
+        type: this.entityType,
+      });
+    }
+  }
+
+  EntityType(fetchedKey) {
+    if (!this.department) {
+      const typeObj = typeof fetchedKey === 'object' && fetchedKey !== null;
+      if (typeObj) {
+        return fetchedKey['entity-type'];
+      } else {
+        return false;
+      }
+    }else {
+      return 'department'
+    }
+  }
+  isWhiteOrClosetToWhite(colorCode) {
+      let whiteLimit = 200; 
+      let r = parseInt("0x"+colorCode.substring(1,3));
+      let g = parseInt("0x"+colorCode.substring(3,5));
+      let b = parseInt("0x"+colorCode.substring(5,7));
+      if(r < whiteLimit || b < whiteLimit || g < whiteLimit) {
+          return false;
+      } 
+      return true;    
+  }
+  ngOnDestroy(){
+    this.translationSubscription ? this.translationSubscription.unsubscribe() : null;
+  }
+}

package/src/lib/components/dynamic-filter/dynamic-filter.module.ts

@@ -0,0 +1,19 @@
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DynamicFilterComponent } from './dynamic-filter/dynamic-filter.component';
+import { PipesModule } from '../../pipes/pipes.module';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { DynamicViewModule } from '../dynamic-view/dynamic-view.module';
+
+/**
+ * @title
+ * Dynamic Filter Module
+ */
+@NgModule({
+  declarations: [DynamicFilterComponent],
+  imports: [CommonModule, PipesModule, TranslateModule, MatCheckboxModule , DynamicViewModule,MatTooltipModule],
+  exports: [DynamicFilterComponent],
+})
+export class DynamicFilterModule {}

package/src/lib/components/dynamic-filter/services/dynamic-filter.service.ts

@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { ReplaySubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DynamicFilterService {
+  value = new ReplaySubject(1);
+
+  constructor() {}
+  informValue(value) {
+    this.value.next(value);
+  }
+}