nuxeo-development-framework 4.1.4 → 4.1.6

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

@@ -0,0 +1,33 @@
+@import "../../../assets/scss/myApp.scss";
+.wrapping {
+  position: relative;
+  .table-reposition {
+    overflow-y: hidden;
+    scrollbar-color: $gray-200 transparent !important;
+    scrollbar-width: thin !important;
+    overflow-x: auto;
+  }
+}
+.empty-state {
+  padding: 200px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+  font-weight: bold;
+  .text {
+  }
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: $gray-200;
+}
+.dark-scroll::-webkit-scrollbar-thumb {
+  background: $gray-300;
+}

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

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

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

@@ -0,0 +1,244 @@
+import {
+  Component,
+  EventEmitter,
+  Inject,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewEncapsulation,
+} from '@angular/core';
+import { from, Subscription } from 'rxjs';
+import { catchError, filter, map } from 'rxjs/operators';
+import { CallApiService } from '../../../core/services/callApi/call-api.service';
+import { AdapterService } from '../../../core/adapters/adapter.service';
+import { DynamicTableService } from '../services/dynamic-table.service';
+/**
+ * this component is an additional layer that uses [Table Component]{@link TableComponent} internally,
+ * you can use this component to configure a page provider listing out of the box easily,
+ * and it will handle all of the basic features such as getting data from API, Listing, Pagination, sorting and filtering
+ * ![Screenshot-1](../screenshots/dynamicTable.png)
+ * @title
+ * Dynamic Table
+ * @example
+ *
+ * <cts-dynamic-table
+ *    [columns]="columns"
+ *    [responsiveColumns]="responsiveColumns"
+ *    [fullWidth]="fullWidth"
+ *    [pageSize]="PageSize"
+ *    [pageProvider]="pageProvider"
+ *    [quickFilter]="filter"
+ *    [sortingBy]="sortingBy"
+ *    [entityType]="'all'"
+ *    [fields]="fields"
+ *    [prefix]="prefix"
+ *    [rowCursor]="true"
+ *    [queryParam]="queryParam"
+ *    [headers]="headers"
+ *    (onRowSelected)="openViewer($event)"
+ *    (actionOnRow)="performAction($event)">
+ * </cts-dynamic-table>
+ */
+@Component({
+  selector: 'cts-dynamic-table',
+  templateUrl: './dynamic-table.component.html',
+  styleUrls: ['./dynamic-table.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+
+export class DynamicTableComponent implements OnInit, OnDestroy {
+  /** event to emit when selecting single row  */
+  @Output() onRowSelected = new EventEmitter();
+   /** event to emit when selecting single row to catch index*/
+   @Output() onRowIndexSelected = new EventEmitter();
+  /** event to emit when perform action on row (delte, edit, ... ) */
+  @Output() actionOnRow = new EventEmitter();
+  /** event to emit to the higher level  when getting data from api is finished */
+  @Output() onGettingData = new EventEmitter();
+  /** event t emit when selecting multiple row */
+  @Output() onMultiRowSelected = new EventEmitter();
+    /** event t emit when start getting data and when finish */
+    @Output() onLoading = new EventEmitter();
+  /** Array of columns */
+  @Input() columns;
+  /** Array of columns on smaller screens */
+  @Input() responsiveColumns?;
+  /** Defines the page in which table is being used */
+  @Input() entityType: string;
+  /** Translations prefix */
+  @Input() prefix = '';
+  /** Headers to be sent with API Request */
+  @Input() headers;
+  /** Fields keymap to be mapped in the adapter */
+  @Input() fields;
+  /** Page Provider name that will be used to retrieve data */
+  @Input() pageProvider;
+  /** Controls number of items per page in table */
+  @Input() pageSize;
+  /** Sorting column */
+  @Input() sortingBy?= {};
+  @Input() queryParam?= {};
+  @Input() quickFilter?;
+    /** Controls if it report page */
+    @Input() report;
+  /** to make cursor when hover on row or not */
+  @Input() rowCursor?;
+  @Input() fullWidth?= 'auto';
+   /** 'list' for noraml table 'card' for cards mode like in memos */
+   @Input() tableMode = 'list';
+   /** action to be used in case of card mode */
+   @Input() tableActions;
+   @Input() defultSort = [{ prop: 'properties.createdAt' , dir: 'desc' }];
+   @Input() range;
+   @Input() isSearchPage = false;
+  /** allow multiselect rows with checkbox */
+  @Input() multiSelectRows = false;
+  /** to show 1st row with custom template in the table*/
+  @Input() customFirstRow = false;
+  @Input() highlightSelectedCard = false;
+  @Input() showActionsAsMenu = false; // flage to show action in menu or side by side
+  @Input() 
+  filterParams = {};
+  @Input() format = "MMMM d, y";
+  pageNum = 1;
+  rows = [];
+  totalRecords = 0;
+  myDataSubscription: Subscription;
+  loading;
+  sorting = false;
+  constructor(
+    private adapter: AdapterService,
+    private callApi: CallApiService,
+    private dynamicTableService: DynamicTableService
+  ) { }
+
+  ngOnInit(): void {
+    this.myDataSubscription = this.dynamicTableService.refreshData.subscribe(filterData => {
+      if (filterData) {
+        this.filterParams = { ...filterData };
+        // reset page number when start new filtering
+        this.pageNum = 1;
+      }
+      this.getData();
+    });
+    this.getData();
+  }
+
+  ngOnDestroy() {
+    this.myDataSubscription ? this.myDataSubscription.unsubscribe() : '';
+  }
+
+  ngOnChanges(simpleChange: SimpleChanges) {
+    const isFirstChange = Object.values(simpleChange).some((c) =>
+      c.isFirstChange()
+    );
+    if (isFirstChange) {
+      return;
+    }
+    if (
+      (simpleChange.queryParam &&
+        simpleChange.queryParam.previousValue !==
+        simpleChange.queryParam.currentValue) ||
+      (simpleChange.quickFilter &&
+        simpleChange.quickFilter.previousValue !==
+        simpleChange.quickFilter.currentValue)
+    ) {
+      this.pageNum = 1; // reset page number befor recalling api with filters
+      this.getData();
+    }
+  }
+
+  getData() {
+    this.loading = true; // internal loading
+    this.onLoading.emit(true); // external loading 
+    let params = {
+      dublincore_created_agg: this.range,
+      ...this.filterParams, // used to get filter data and set it in our params
+      ...this.queryParam, // used to get params from our config
+      ...this.sortingBy,
+      ...this.quickFilter,
+      currentPageIndex: this.pageNum - 1,
+      pageSize: this.pageSize,
+      offset: 0
+    };
+
+    // don't refresh all table in case of sorting only
+    if (!this.sorting) { // used to not refreshing all table in case of sorting since table lose sorting state when refresh all table
+      this.rows = []; // used to refresh table to feel changes in actions when perform action and need to refresh actions
+    }
+    this.sorting = false; // reset sorting status to false and for next sorting func sorting set it to true again
+    this.callApi
+      .query(
+        {
+          pageProvider: this.pageProvider,
+          ...params,
+        },
+        {
+          headers: this.headers,
+        }
+      )
+      .pipe(
+        map((data: any) => {
+          data.entries.map((item) => this.adapter.adaptIn(item, this.fields));
+          return data;
+        }),
+        catchError((err) => {
+          throw err;
+        })
+      )
+      .subscribe((res) => {
+        this.loading = false;
+        this.onLoading.emit(false);
+        res.entries.forEach((element) => {
+          if (element.properties && element.properties?.creator && element.properties.creator?.properties) {
+            element.properties['creatorFullObject'] = {...element.properties.creator};
+            element.properties.creator =
+              element.properties.creator?.properties?.firstName +
+              ' ' +
+              element.properties.creator?.properties?.lastName;
+          }
+          if (element.properties && element.properties?.assignee) {
+            element.properties.assignee = element.properties?.assignee.fullName
+          }
+        });
+        this.totalRecords = res.resultsCount;
+        this.rows = res.entries;
+        // emit data to outside in case of search page for the first time only to prevent refreshing aggregation with every page change
+        // and for any other page type emit data directly in all page numbers
+        if((this.isSearchPage && this.pageNum === 1) || !this.isSearchPage )
+        this.onGettingData.emit(res);
+      });
+  }
+
+  // function to be executed when clicking on single row
+  rowDetails(event) {
+     this.onRowSelected.emit(event);
+  }
+
+  indexDetails(event) {
+    this.onRowIndexSelected.emit(event);
+ }
+
+  //function to handle all operations on single row (delete , edit , ...)
+  performAction(action) {
+    this.actionOnRow.emit(action);
+  }
+
+  // handle sorting functionality of the table
+  onSort(sortObject) {
+    this.sortingBy = sortObject;
+    this.sorting = true;
+    this.getData();
+  }
+
+  onMultiRowSelectValue(event){
+    this.onMultiRowSelected.emit(event)
+  }
+  public PaginationChange(event) {
+    this.pageNum = event;
+    this.getData();
+  }
+}

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

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DynamicTableComponent } from './dynamic-table/dynamic-table.component';
+import { TableModule } from '../table/table.module';
+import { PaginationModule } from '../../components/pagination/pagination.module';
+import { LibrarySharedModule } from '../../shared/libraryShared.module';
+import { TranslateModule } from '@ngx-translate/core';
+
+
+/**
+ * @title
+ * Dynamic Table API
+ */
+@NgModule({
+  declarations: [DynamicTableComponent],
+  imports: [
+    CommonModule,
+    TableModule,
+    PaginationModule,
+    LibrarySharedModule,
+    TranslateModule
+  ],
+  exports:[
+    DynamicTableComponent
+  ]
+})
+export class DynamicTableModule { }

package/src/lib/components/dynamic-table/services/dynamic-table.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DynamicTableService } from './dynamic-table.service';
+
+describe('DynamicTableService', () => {
+  let service: DynamicTableService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(DynamicTableService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,10 @@
+import { Injectable , EventEmitter} from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DynamicTableService {
+  refreshData = new EventEmitter();
+  constructor() { }
+}

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

@@ -0,0 +1,15 @@
+<mat-tab-group #dynamicTabs class="h-full" *ngIf="tabs.length > 0">
+    <mat-tab *ngFor="let tab of tabs">
+        <ng-template mat-tab-label *ngIf="tab.titleTemplate;else normalTitle">
+            <ng-content *ngTemplateOutlet="tab.titleTemplate"></ng-content>
+        </ng-template>
+        <ng-template mat-tab-label #normalTitle class="flex flex-col items-center justify-center">
+            <mat-icon class="example-tab-icon">{{tab.icon}}</mat-icon>
+            <span>{{'tabs.' + tab.label | translate}}</span>
+        </ng-template>
+
+        <ng-template matTabContent>
+            <ng-content *ngTemplateOutlet="tab.template"></ng-content>
+        </ng-template>
+    </mat-tab>
+</mat-tab-group>

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

@@ -0,0 +1,63 @@
+.mat-tab-group {
+    .mat-tab-header {
+        .mat-tab-header-pagination-before {
+            display: none;
+        }
+        .mat-tab-header-pagination-after {
+            display: none;
+        }
+        .mat-tab-label-container {
+            padding: 0px 0px !important;
+            overflow-x: auto;
+            .mat-tab-list {
+                @apply min-w-100 #{!important};
+                .mat-tab-labels {
+                    height: 50px;
+                    .mat-ripple {
+                    }
+                    .mat-tab-label {
+                        height: 100% !important;
+                        border-bottom: 1px solid lightgray;
+                        margin: 0px !important;
+                        .mat-tab-label-content {
+                            display: flex;
+                            flex-direction: column;
+                            font-size: 12px;
+                            .mat-icon {
+                                font-size: 20px;
+                                min-height: 16px;
+                                min-width: 16px;
+                                height: 16px;
+                                width: 16px;
+                            }
+                        }
+                    }
+                    .mat-tab-label-active {
+                        border-bottom: 2px solid black;
+                        opacity: 1;
+                    }
+                }
+            }
+        }
+    }
+    .mat-tab-body-wrapper {
+        padding: 0px 10px !important;
+        height: calc(100% - 60px);
+        .mat-tab-body {
+            .mat-tab-body-content {
+                padding: 0px;
+                overflow: hidden;
+            }
+        }
+    }
+}
+
+.theme-dgda {
+    .mat-tab-group {
+        .mat-tab-header {
+            .mat-tab-label-container {
+                @apply bg-transparent;
+            }
+        }
+    }
+}

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

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

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

@@ -0,0 +1,25 @@
+import { Component, Input, OnInit, ViewChild, ViewEncapsulation, OnChanges, SimpleChanges } from '@angular/core';
+import { MatTabGroup } from '@angular/material/tabs';
+
+@Component({
+  selector: 'app-dynamic-tabs',
+  templateUrl: './dynamic-tabs.component.html',
+  styleUrls: ['./dynamic-tabs.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class DynamicTabsComponent implements OnInit, OnChanges {
+  @Input() tabs = [];
+  @Input() selectedIndex = 0;
+  @ViewChild('dynamicTabs') dynamicTabs: MatTabGroup;
+  constructor() { }
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.selectedIndex?.currentValue === 0) {
+      this.dynamicTabs.selectedIndex = this.selectedIndex //for back to details tab after remove publishing tab when move from original version to one of its published version
+    }
+  }
+
+  ngOnInit(): void {
+
+  }
+
+}

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

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DynamicTabsComponent } from './dynamic-tabs/dynamic-tabs.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTabsModule } from '@angular/material/tabs';
+
+
+
+@NgModule({
+  declarations: [DynamicTabsComponent],
+  imports: [
+    CommonModule,
+    TranslateModule,
+    MatIconModule,
+    MatTabsModule
+  ],
+  exports:[DynamicTabsComponent]
+})
+export class DynamicTabsModule { }

package/src/lib/components/dynamic-view/boolean-viewer/boolean-viewer.component.html

@@ -0,0 +1,4 @@
+<div class="my-dynamic-viewer" [ngClass]="{'vertical' : vertical === true}">
+    <div class="my-label" matTooltip="{{label | translate}}">{{label | translate}}</div>
+    <div class="my-value" matTooltip="{{value ?  (trueValue | translate) : (falseValue | translate)}}"> {{value ?  (trueValue | translate) : (falseValue | translate)}}</div>
+</div>

package/src/lib/components/dynamic-view/boolean-viewer/boolean-viewer.component.spec.ts

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

package/src/lib/components/dynamic-view/boolean-viewer/boolean-viewer.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'cts-boolean-viewer',
+  templateUrl: './boolean-viewer.component.html',
+  styleUrls: ['./boolean-viewer.component.scss']
+})
+export class BooleanViewerComponent implements OnInit {
+  @Input() label = '';
+  @Input() value = false;
+  @Input() trueValue = 'Yes';
+  @Input() falseValue = 'No';
+  @Input() vertical = false;
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/components/dynamic-view/custom-document-viewer/custom-document-viewer.component.html

@@ -0,0 +1,3 @@
+<span *ngIf="data">
+    {{isArabic ? data['documenttypee:arabicTitle'] : data['dc:title']}}
+</span>

package/src/lib/components/dynamic-view/custom-document-viewer/custom-document-viewer.component.spec.ts

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

package/src/lib/components/dynamic-view/custom-document-viewer/custom-document-viewer.component.ts

@@ -0,0 +1,55 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { TranslationService } from '../../../core/services/translation/translation.service';
+import { Subscription } from 'rxjs';
+import { CallApiService } from '../../../core/services/callApi/call-api.service';
+import { DynamicVieweService } from '../dynamic-viewe.service';
+
+@Component({
+  selector: 'lib-custom-document-viewer',
+  templateUrl: './custom-document-viewer.component.html',
+  styleUrls: ['./custom-document-viewer.component.scss']
+})
+export class CustomDocumentViewerComponent implements OnInit {
+  @Input() pageProvider;
+  @Input() group;
+  data;
+  langSubscription : Subscription;
+  isArabic ;
+  constructor(private callApi : CallApiService ,private dynamicViewService : DynamicVieweService , private translationService : TranslationService) { }
+
+  ngOnInit(): void {
+    console.log(this.pageProvider);
+    console.log(this.group);
+    this.getData();
+    this.langSubscription = this.translationService.isArabic.subscribe(res => {
+      this.isArabic = res;
+    })
+  }
+
+  getData(){
+    if(this.dynamicViewService.getDataFromStoredAggregation(this.group.key)){
+      let storedAggreg = this.dynamicViewService.getDataFromStoredAggregation(this.group.key);
+      this.data = storedAggreg ? storedAggreg['data'] : null;
+    }else{
+      let params = {
+        documenttypee_code : this.group.key
+      }
+       this.callApi.query({
+        pageProvider: this.pageProvider,
+        ...params,
+      },
+      {
+        headers: {
+          "properties": "*",
+        },
+      }).subscribe(res => {
+        this.dynamicViewService.setDataToStorag(this.group.key , res?.entries[0]?.['properties']);
+        this.data = res?.entries[0]?.['properties'];
+      })
+    }
+  }
+
+  ngOnDestroy(){
+    this.langSubscription ? this.langSubscription.unsubscribe() : null;
+  }
+}

package/src/lib/components/dynamic-view/custom-pp-viewer/custom-pp-viewer.component.html

@@ -0,0 +1,3 @@
+<span *ngIf="data">
+    {{isArabic ? data[config.propertyAr ? config.propertyAr : defaultConfig.propertyAr] : data[config.propertyEn ? config.propertyEn : defaultConfig.propertyEn]}}
+</span>