nuxeo-development-framework 3.1.1 → 3.1.2

package/src/lib/components/dynamic-form/services/dynamic-form-update.service.ts

@@ -0,0 +1,105 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { catchError, map } from 'rxjs/operators';
+import { DynamicFormBaseItemModel } from '../models/dynamic-form.models';
+import { CallApiService } from '../../../Core/services/callApi/call-api.service';
+
+export interface UpdateNotification {
+  target: any;
+  changed: any;
+}
+
+export interface ClickNotification {
+  target: any;
+}
+
+export function transformKeyToObject(key: string, value): Object {
+  const objectLevels: string[] = key.split('.').reverse();
+
+  return objectLevels.reduce<{}>((previousValue, currentValue) => {
+    return { [currentValue]: previousValue };
+  }, value);
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DynamicFormUpdateService {
+
+  itemUpdated$ = new Subject<UpdateNotification>();
+  itemClicked$ = new Subject<ClickNotification>();
+  validate$ = new Subject();
+
+  constructor( private callApi: CallApiService){
+  }
+
+  update(property: DynamicFormBaseItemModel, newValue: any) {
+    this.itemUpdated$.next({
+      target: property,
+      changed: transformKeyToObject(property.key, newValue)
+    });
+    this.validate$.next({
+      target: property,
+      changed: newValue
+    });
+  }
+  validate(property: DynamicFormBaseItemModel, newValue: any) {
+    this.validate$.next({
+      target: property,
+      changed: newValue
+    });
+  }
+  clicked(property: DynamicFormBaseItemModel) {
+    this.itemClicked$.next({
+      target: property
+    });
+  }
+
+  getTextBoxSuggestionResults(pageProvider , params , key , autoCompleteValueKey){
+   return  this.callApi
+      .query(
+        {
+          pageProvider: pageProvider,
+          ...params,
+        },
+        {
+          headers: {
+            "X-NXproperties": "*",
+          },
+        }
+      )
+      .pipe(
+        map((data: any) => {
+          let results = [];
+          if(pageProvider=="PP_Correspondence_RelationSeach"){
+            data.entries.map((item) => {
+              results.push({
+                //  title: item.title,
+                title: item.properties["corr:referenceNumber"] !== null ? item.properties["corr:referenceNumber"] + " - " + item.properties["corr:subject"] : item.properties["corr:subject"],
+                id: item.uid,
+                filter: item.title,
+                number: item.properties["corr:referenceNumber"],
+                subject: item.properties["corr:subject"]
+              });
+            });
+          }else{
+            let myInternalResult = data.aggregations[autoCompleteValueKey];
+            myInternalResult.buckets.map((item) => {
+              results.push({
+              title : item.key
+              });
+            });
+          }
+          return results;
+        }),
+        catchError((err) => {
+          throw err;
+        })
+      )
+      
+  }
+
+}
+
+
+

package/src/lib/components/dynamic-form/services/property-groups-translator.service.ts

@@ -0,0 +1,159 @@
+
+import { Injectable } from '@angular/core';
+import { from } from 'rxjs';
+import {
+  DynamicFormItem,
+  DynamicFormItemProperties,
+  DynamicFormSelectItemOption
+} from '../interfaces/dynamic-form.interfaces';
+import {
+  DynamicFormGroup,
+  OrganisedPropertyGroup,
+  Property
+} from '../interfaces/content-metadata.interfaces';
+import {
+  DynamicFormBoolItemModel,
+  DynamicFormDateItemModel,
+  DynamicFormDatetimeItemModel,
+  DynamicFormSelectItemModel,
+  DynamicFormTextItemModel
+} from '../models/dynamic-form.models';
+import { MultiValuePipe } from '../../../pipes/multi-value.pipe';
+
+const TEXT = 'text';
+const MLTEXT = 'mltext';
+const DATE = 'date';
+const DATETIME = 'datetime';
+const INT = 'int';
+const LONG = 'long';
+const FLOAT = 'float';
+const DOUBLE = 'double';
+const BOOLEAN = 'boolean';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PropertyGroupTranslatorService {
+  static readonly RECOGNISED_TYPES = [
+    TEXT,
+    MLTEXT,
+    DATE,
+    DATETIME,
+    INT,
+    LONG,
+    FLOAT,
+    DOUBLE,
+    BOOLEAN
+  ];
+
+  valueSeparator = ',';
+
+  constructor(public multiValuePipe: MultiValuePipe) {
+
+  }
+  public translateArray(
+    properties: Property[],
+    propertyValues: any
+  ): DynamicFormItem[] {
+    return properties.map(property => {
+      return this.translate(property, propertyValues);
+    });
+  }
+
+  private translate(property: Property, propertyValues: any): DynamicFormItem {
+    let propertyValue;
+    if (propertyValues && propertyValues[property.name]) {
+      propertyValue = propertyValues[property.name];
+    }
+
+    this.checkTypeValidity(property.dataType);
+
+    const prefix = 'properties.';
+    const propertyDefinition: DynamicFormItemProperties = {
+      label: property.title || property.name,
+      description: property.description,
+      value: propertyValue,
+      key: `${prefix}${property.name}`,
+      default: property.defaultValue,
+      mandatory: property.mandatory,
+      constraints: property.constraints,
+      editable: property.editable !== undefined ? property.editable : true
+    };
+    let DynamicFormItemProperty;
+
+    switch (property.dataType) {
+      case MLTEXT:
+        DynamicFormItemProperty = new DynamicFormTextItemModel(
+          Object.assign(propertyDefinition, {
+            multiline: true
+          })
+        );
+        break;
+
+
+      case DATE:
+        DynamicFormItemProperty = new DynamicFormDateItemModel(propertyDefinition);
+        break;
+
+      case DATETIME:
+        DynamicFormItemProperty = new DynamicFormDatetimeItemModel(
+          propertyDefinition
+        );
+        break;
+
+      case BOOLEAN:
+        DynamicFormItemProperty = new DynamicFormBoolItemModel(propertyDefinition);
+        break;
+
+      case TEXT:
+      default:
+        let select = [];
+        if (
+          propertyDefinition &&
+          propertyDefinition.constraints &&
+          propertyDefinition.constraints.length
+        ) {
+          select = propertyDefinition.constraints.filter(
+            constraint => constraint.type === 'LIST'
+          );
+        }
+        if (!select.length) {
+          DynamicFormItemProperty = new DynamicFormTextItemModel(
+            Object.assign(propertyDefinition, {
+              multivalue: property.multiValued,
+              multiline: property.multiValued,
+              pipes: [
+                { pipe: this.multiValuePipe, params: [this.valueSeparator] }
+              ]
+            })
+          );
+        } else {
+          const optionsArray: any[] =
+            select[0].parameters.reduce((r, c) => Object.assign(r, c), {})
+              .allowedValues || [];
+          const options: any[] = optionsArray.map(
+            (item): DynamicFormSelectItemOption<string> => ({
+              key: item,
+              label: item
+            })
+          );
+          DynamicFormItemProperty = new DynamicFormSelectItemModel(
+            Object.assign(propertyDefinition, {
+              options$: from([options])
+            })
+          );
+        }
+    }
+    return DynamicFormItemProperty;
+  }
+
+  private checkTypeValidity(ecmPropertyType) {
+    if (
+      PropertyGroupTranslatorService.RECOGNISED_TYPES.indexOf(
+        ecmPropertyType
+      ) === -1
+    ) {
+      console.error(`Unknown type for mapping: ${ecmPropertyType}`);
+    }
+  }
+}

package/src/lib/components/dynamic-form/services/vocabulary-api.service.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { from, Observable } from 'rxjs';
+import { NuxeoService } from '../../../Core/services/nuxeo/nuxeo.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class VocabularyApiService {
+  constructor(
+    private nuxeoService: NuxeoService,
+    private translate: TranslateService,
+  ) {
+  }
+
+  getVocabularyList(listName): Observable<any> {
+    return from(
+      this.nuxeoService.nuxeoClient
+        .operation('Directory.SuggestEntries', {})
+        .params({
+          directoryName: listName,
+          dbl10n: false,
+          localize: true,
+          lang: this.translate.currentLang,
+          searchTerm: '',
+        })
+        .execute()
+    );
+  }
+
+
+}

package/src/lib/components/dynamic-form/validators/date-validator.ts

@@ -0,0 +1,18 @@
+import { ValidatorFn, AbstractControl } from '@angular/forms';
+
+export class DateValidators {
+  static dateLessThan(
+    dateField1: string,
+    dateField2: string,
+    validatorField: { [key: string]: any }
+  ): ValidatorFn {
+    return (c: AbstractControl): { [key: string]: boolean } | null => {
+      const date1 = c.get(dateField1).value;
+      const date2 = c.get(dateField2).value;
+      if (date1 !== null && date2 !== null && date1 > date2) {
+        return validatorField;
+      }
+      return null;
+    };
+  }
+}

package/src/lib/components/dynamic-form/validators/length-validator.ts

@@ -0,0 +1,18 @@
+import { DynamicFormItemValidator } from '../interfaces/dynamic-form.interfaces';
+export class DynamicFormLengthValidator implements DynamicFormItemValidator {
+  message: string = 'errors.length';
+  props;
+  constructor(props) {
+    this.props = props;
+  }
+  isValid(value: any): boolean {
+    return (
+      !value ||
+      value === undefined ||
+      value.length === 0 ||
+      (value &&
+        value.length <= parseInt(this.props.maxLength, 10) &&
+        value.length >= parseInt(this.props.minLength, 10))
+    );
+  }
+}

package/src/lib/components/dynamic-form/validators/regex-validator.ts

@@ -0,0 +1,16 @@
+import { DynamicFormItemValidator } from '../interfaces/dynamic-form.interfaces';
+export class DynamicFormRegexValidator implements DynamicFormItemValidator {
+  message: string = 'errors.regex';
+  props;
+  constructor(props) {
+    this.props = props;
+  }
+  isValid(value: any): boolean {
+    const re = new RegExp(this.props.expression);
+    return value
+      ? this.props.requiresMatch
+        ? re.test(value)
+        : !re.test(value)
+      : true;
+  }
+}

package/src/lib/components/dynamic-form/validators/required-validator.ts

@@ -0,0 +1,7 @@
+import { DynamicFormItemValidator } from '../interfaces/dynamic-form.interfaces';
+export class DynamicFormRequiredValidator implements DynamicFormItemValidator {
+  message: string = 'errors.required';
+  isValid(value: any): boolean {
+    return value !== null && value !== undefined && value !== '';
+  }
+}

package/src/lib/components/dynamic-form/validators/value-validator.ts

@@ -0,0 +1,18 @@
+import { DynamicFormItemValidator } from '../interfaces/dynamic-form.interfaces';
+export class DynamicFormValueValidator implements DynamicFormItemValidator {
+  message: string = 'errors.minmax';
+  props;
+  constructor(props) {
+    this.props = props;
+  }
+  isValid(value: any): boolean {
+    const val = parseFloat(value);
+    return (
+      !value ||
+      value === undefined ||
+      value === '' ||
+      (val <= parseFloat(this.props.maxValue.replace(',', '')) &&
+        val >= parseFloat(this.props.minValue.replace(',', '')))
+    );
+  }
+}

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

@@ -0,0 +1,219 @@
+<ng-container *ngIf="!customResponsiveStyle">
+  <div class="search-toolbar d-md-flex d-xl-none mx-3">
+    <button (click)="onOpenFilter()" class="my-button">
+      <span> {{ "FILTER" | translate }}</span>
+      <i class="bi bi-filter" *ngIf="!openFilter"></i>
+      <i class="bi bi-x" *ngIf="openFilter"></i>
+    </button>
+    <div *ngIf="openFilter">
+      <i class="bi bi-caret-up-fill arrow-up"></i>
+    </div>
+  </div>
+</ng-container>
+
+<ng-container *ngIf="customResponsiveStyle">
+  <div class="customStyle -mt-12 px-8 flex flex-col"
+    [ngClass]="{'bg-accent-200': theme === 'dgda','bg-accent-100': theme === 'ksreleif' || theme === 'comptechco'}"
+    [@collapse]="!openFilter">
+    <!-- <form
+        [formGroup]="searchForm"
+        class="search-form"
+        (ngSubmit)="submitForm()"
+      >
+        <input
+          class="search-input"
+          type="text"
+          formControlName="text"
+          [placeholder]="'search.search' | translate"
+        />
+        <div (click)="submitForm()" class="search-icon bi bi-search"></div>
+      </form> -->
+    <div class="flex gap-x-18 flex-row mt-5 pb-3 overflow-x-auto">
+      <ng-container *ngIf="aggregations; else progressSpinner">
+        <ng-container *ngIf="aggregations.length; else noAggregations">
+          <ng-container *ngFor="let aggregation of aggregations">
+            <ng-container *ngIf="aggregation.buckets.length > 0">
+              <cts-dynamic-filter [entityType]="entityType" [filters]="aggregation.buckets" [id]="aggregation.id"
+                [selections]="aggregation.selection" [title]="aggregation.field" [prefix]="'search'" [department]="
+                    aggregation.field === 'corr:to' ||
+                    aggregation.field === 'corr:from'
+                  " [componentType]="aggregation.componentType ? aggregation.componentType : 'defult'"
+                [customPageProvider]="aggregation.customPageProvider ? aggregation.customPageProvider : ''"
+                [config]="aggregation.config ? aggregation.config : {}" (onFilterSelected)="FilterSelected($event)">
+              </cts-dynamic-filter>
+            </ng-container>
+          </ng-container>
+        </ng-container>
+      </ng-container>
+    </div>
+  </div>
+</ng-container>
+
+<div class="row wrapper">
+  <ng-container *ngIf="!customResponsiveStyle">
+    <div class="popup-filter px-3 d-flex d-xl-none" *ngIf="openFilter">
+      <form [formGroup]="searchForm" class="search-form" (ngSubmit)="submitForm()">
+        <input class="search-input" type="text" formControlName="text" [matAutocomplete]="matAutocomplete1" [placeholder]="'search.search' | translate" />
+        <div (click)="submitForm()" class="search-icon bi bi-search"></div>
+      </form>
+      <mat-autocomplete
+      class="
+         auto-complete-iner-wrapper
+          auto-complete-wrapper
+      "
+      [disableRipple]="true"
+      #matAutocomplete1="matAutocomplete"
+  >
+      <mat-option
+          class="no-text"
+          *ngIf="resultSets && !resultSets.length"
+      >
+          No results found!
+      </mat-option>
+      <ng-container *ngFor="let resultSet of resultSets">
+          <mat-option  (click)="setOptionValue(resultSet.label)">
+              <span
+                  class="option-iner-text"
+                  >{{ resultSet.label }}</span
+              >
+          </mat-option >
+      </ng-container>
+      </mat-autocomplete>
+      <ng-container *ngIf="aggregations; else progressSpinner">
+        <ng-container *ngIf="aggregations.length; else noAggregations">
+          <div *ngFor="let aggregation of aggregations">
+            <ng-container *ngIf="aggregation.buckets.length > 0">
+              <cts-dynamic-filter [entityType]="entityType" [filters]="aggregation.buckets" [id]="aggregation.id"
+                [selections]="aggregation.selection" [title]="aggregation.field" [prefix]="'search'" [department]="
+                aggregation.field === 'corr:to' ||
+                aggregation.field === 'corr:from'
+              " [componentType]="aggregation.componentType ? aggregation.componentType : 'defult'"
+                [customPageProvider]="aggregation.customPageProvider ? aggregation.customPageProvider : ''"
+                [config]="aggregation.config ? aggregation.config : {}" (onFilterSelected)="FilterSelected($event)">
+              </cts-dynamic-filter>
+            </ng-container>
+          </div>
+        </ng-container>
+      </ng-container>
+    </div>
+  </ng-container>
+
+  <div class="col-xl-3 search-sideMenu d-none d-xl-block">
+    <form [formGroup]="searchForm" class="search-form" (ngSubmit)="submitForm()">
+      <input class="search-input" type="text" formControlName="text" [matAutocomplete]="matAutocomplete2"
+        [placeholder]="'search.search' | translate" />
+      <div (click)="submitForm()" class="search-icon bi bi-search"></div>
+    </form>
+    <mat-autocomplete class="
+       auto-complete-iner-wrapper
+        auto-complete-wrapper
+    " [disableRipple]="true" #matAutocomplete2="matAutocomplete">
+      <mat-option class="no-text" *ngIf="resultSets && !resultSets.length">
+        No results found!
+      </mat-option>
+      <ng-container *ngFor="let resultSet of resultSets">
+        <mat-option (click)="setOptionValue(resultSet.label)">
+          <span class="option-iner-text">{{ resultSet.label }}</span>
+        </mat-option>
+      </ng-container>
+    </mat-autocomplete>
+    <ng-container *ngIf="aggregations; else progressSpinner">
+      <div *ngFor="let aggregation of aggregations">
+        <ng-container *ngIf="aggregation.buckets.length > 0">
+          <cts-dynamic-filter [entityType]="entityType" [filters]="aggregation.buckets" [id]="aggregation.id"
+            [selections]="aggregation.selection" [title]="aggregation.field" [prefix]="'search'" [department]="
+              aggregation.field === 'corr:to' ||
+              aggregation.field === 'corr:from'
+            " [componentType]="aggregation.componentType ? aggregation.componentType : 'defult'"
+            [customPageProvider]="aggregation.customPageProvider ? aggregation.customPageProvider : ''"
+            [config]="aggregation.config ? aggregation.config : {}" (onFilterSelected)="FilterSelected($event)">
+          </cts-dynamic-filter>
+        </ng-container>
+      </div>
+    </ng-container>
+  </div>
+
+  <div class="col-12 col-xl-9">
+    <app-card>
+      <div class="title">
+        <h3>
+          {{ "search.header" | translate }}
+        </h3>
+      </div>
+      <div class="body">
+        <div *ngIf="aggregations" class="table-toolbar">
+          <div class="result-count">
+            <span>
+              {{
+              "search." + "resultsNumber"
+              | translate: { value: totalRecords ? totalRecords : 0 }
+              }}
+            </span>
+          </div>
+          <div>
+            <form class="d-flex justify-between" [formGroup]="searchForm" (ngSubmit)="submitForm()">
+              <div *ngIf="useToggleFilters && !customResponsiveStyle"></div>
+              <div *ngIf="customResponsiveStyle">
+                <div class="search-form custom-responsive-search">
+                  <input class="search-input" type="text" formControlName="text" [matAutocomplete]="matAutocomplete"
+                    [placeholder]="'search.search' | translate" />
+                  <div (click)="submitForm()" class="search-icon bi bi-search"></div>
+                </div>
+                <mat-autocomplete
+                class="
+                   auto-complete-iner-wrapper
+                    auto-complete-wrapper
+                "
+                [disableRipple]="true"
+                #matAutocomplete="matAutocomplete"
+            >
+                <mat-option
+                    class="no-text"
+                    *ngIf="resultSets && !resultSets.length"
+                >
+                    {{no_result_found | translate}}
+                </mat-option>
+                <ng-container *ngFor="let resultSet of resultSets">
+                    <mat-option  (click)="setOptionValue(resultSet.label)">
+                        <span
+                            class="option-iner-text"
+                            >{{ resultSet.label }}</span
+                        >
+                    </mat-option >
+                </ng-container>
+                </mat-autocomplete>
+              </div>
+              <div class="d-flex" *ngIf="useToggleFilters">
+                <cts-dynamic-form-slide-toggleitem class="mx-2 small-font" [label]="'search.PERSONAL_FILES'"
+                  (onToggle)="submitForm()" formControlName="personalFiles">
+                </cts-dynamic-form-slide-toggleitem>
+                <cts-dynamic-form-slide-toggleitem class="mx-2 small-font" [label]="'search.DEP_FILES'"
+                  formControlName="depFiles" (onToggle)="submitForm()">
+                </cts-dynamic-form-slide-toggleitem>
+                <cts-dynamic-form-slide-toggleitem class="mx-2 small-font" [label]="'search.WORKSPACE_FILES'"
+                formControlName="workSpaceFiles" (onToggle)="submitForm()">
+              </cts-dynamic-form-slide-toggleitem>
+              </div>
+            </form>
+          </div>
+        </div>
+        <cts-dynamic-table [pageSize]="pageSize" [columns]="columns" [responsiveColumns]="responsiveColumns"
+          [pageProvider]="pageProvider" [quickFilter]="filter" [entityType]="entityType" [fields]="fields"
+          [queryParam]="queryParams" [headers]="headers" [prefix]="prefix" [sortingBy]="sortingBy" [isSearchPage]="true"
+          (onRowSelected)="onRowSelected($event)" (actionOnRow)="performAction($event)"
+          (onGettingData)="getTableData($event)"></cts-dynamic-table>
+      </div>
+    </app-card>
+  </div>
+
+  <ng-template #progressSpinner>
+    <div class="progress-spinner">
+      <mat-spinner color="warn" [diameter]="25"></mat-spinner>
+    </div>
+  </ng-template>
+  <ng-template #noAggregations>
+    <div class="progress-spinner">
+      {{ "search.noAggregations" | translate }}
+    </div>
+  </ng-template>
+</div>