nuxeo-development-framework 5.6.2 → 5.6.4

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

@@ -0,0 +1,203 @@
+@import "../../../assets/scss/myApp.scss";
+.result-count {
+  color: $gray-300;
+  font-size: 14px;
+}
+.search-sideMenu {
+  background-color: white;
+  padding-top: 22px ;
+  padding-bottom: 22px ;
+  border-radius: 5px;
+
+}
+.auto-complete-iner-wrapper{
+  max-height: 350px;
+  border-radius: 4px;
+  .no-text{
+    font-size: 14px;
+    color: $gray-500;
+  }
+  .mat-option{
+    text-align: start;
+    color: $gray-500;
+    font-weight: bold;
+    font-size: 14px;
+    .mat-option-text{
+      text-align: flex-start;
+    }
+  }
+}
+.search-form {
+  display: flex;
+  color: $gray-400;
+  width: 100%;
+  .search-input {
+    width: 100%;
+    border: 1px solid $gray-100;
+    border-inline-end: 0;
+    border-start-start-radius: 5px;
+    border-end-start-radius: 5px;
+    border: 1px solid #ccc;
+    height: 32px;
+    font-size: 16px;
+    padding-inline-start: 4px;
+    &::-webkit-input-placeholder {
+      font-size: 14px;
+    }
+    &:focus-visible {
+      border: 2px solid $gray-500;
+      outline: transparent;
+    }
+  }
+  .search-icon {
+    background: $gray-500;
+    color: white;
+    width: 12%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0;
+    cursor: pointer;
+    border: 1px solid $gray-100;
+    border-start-end-radius: 6px;
+    border-end-end-radius: 6px;
+    border-inline-start: 0;
+  }
+}
+
+.small-font{
+  font-size: 14px;
+}
+.custom-responsive-search{
+  width: 300px !important;
+  margin: 0px 35px;
+}
+.search-toolbar {
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 16px;
+  .my-button {
+    width: 90px;
+  }
+  .arrow-up {
+    position: absolute;
+    top: 26px;
+    right: 28px;
+    font-size: 25px;
+    color: rgba(143, 152, 170, 0.7);
+  }
+}
+.wrapper {
+  position: relative;
+  .popup-filter {
+    flex-direction: column;
+    position: absolute;
+    right: 0;
+    z-index: 9999;
+    max-height: 70vh;
+    max-width: 400px;
+    background-color: white;
+    overflow: scroll;
+    box-shadow: 0px 1px 10px 2px rgb(0 0 0 / 33%);
+    top: -4px;
+    border-radius: 5px;
+
+    .search-form {
+      margin-top: 10px !important;
+    }
+    .search-input {
+      width: 100% !important;
+    }
+  }
+  .search-container {
+    background-color: white;
+    border-radius: 5px;
+    border: 0px;
+    padding: 16px;
+    height: max-content;
+    .table-toolbar {
+      display: flex;
+      align-items: center;
+      margin-bottom: 8px;
+      justify-content: space-between;
+    }
+  }
+  .wrapper-overlay{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    z-index: 9;
+  }
+}
+.progress-spinner {
+  margin-top: 10px;
+  margin-block-end: 0;
+  display: grid;
+  place-items: center;
+  width: 100%;
+}
+
+.rtl {
+  .popup-filter {
+    left: 0px;
+    right: unset !important;
+  }
+  .arrow-up {
+    position: absolute;
+    top: 33px;
+    left: 28px;
+    right: unset !important;
+  }
+}
+
+@media (width: 1180px), (width: 820px) {
+  .customStyle {
+      cts-dynamic-filter {
+        .aggregation-container {
+          width: 176px !important;
+        }
+    }
+  }
+}
+.customStyle {
+  .search-form {
+    display: flex;
+    color: $gray-400;
+    width: 100%;
+    .search-input {
+      width: 288px;
+      border: 1px solid $gray-100;
+      border-inline-end: 0;
+      border-start-start-radius: 5px;
+      border-end-start-radius: 5px;
+      border: 1px solid #ccc;
+      height: 32px;
+      font-size: 16px;
+      padding-inline-start: 4px;
+      &::-webkit-input-placeholder {
+        font-size: 14px;
+      }
+      &:focus-visible {
+        border: 2px solid $gray-500;
+        outline: transparent;
+      }
+    }
+    .search-icon {
+      background: $gray-500;
+      color: white;
+      width: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 0;
+      cursor: pointer;
+      border: 1px solid $gray-100;
+      border-start-end-radius: 6px;
+      border-end-end-radius: 6px;
+      border-inline-start: 0;
+    }
+  }
+}

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

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

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

@@ -0,0 +1,352 @@
+import {
+	Component,
+	EventEmitter,
+	Input,
+	OnInit,
+	Output,
+	ViewEncapsulation,
+	OnChanges,
+	SimpleChanges,
+	Inject,
+	ViewChild
+} from '@angular/core';
+import { FormGroup, FormControl } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import * as _ from 'lodash';
+import { animate, AUTO_STYLE, state, style, transition, trigger } from '@angular/animations';
+import { EvaluatorsService } from '../../../directive/permissions/evaluators.service';
+import { debounceTime } from 'rxjs/operators';
+import { from, Observable } from 'rxjs';
+import { NuxeoService } from '../../../core/services/nuxeo/nuxeo.service';
+import { GlobalAdminService } from '../../../shared-services/global-admin.service';
+import { DynamicTableComponent } from '../../tables';
+
+/**
+ * Dynamic search component uses [Dynamic Table]{@link DynamicTableComponent} & [Dynamic Filter]{@link DynamicFilterComponent} internally,
+ * and utilizes its inputs to perform advanced search and filtering on any nuxeo Provider
+ * @title
+ * Dynamic Search
+ *
+ * @example
+ * <cts-dynamic-search
+ *   [pageProvider]="'pageProviderName'"
+ *   [columns]="columnsArray"
+ *   [responsiveColumns]="responsiveColumnsArray"
+ *   [entityType]="'documents'"
+ *   [prefix]="prefix"
+ *   [fields]="fields"
+ *   [headers]="headers"
+ *   [sortingBy]="sortingBy"
+ *   [pageSize]="PageSize"
+*    [customResponsiveStyle]="false or true"
+     [openCloseFilterFromOutside]="pass Filter state from parent component"
+     [theme] = "to  set background depened on theme"
+ * >
+ * </cts-dynamic-search>
+ */
+@Component({
+	selector: 'cts-dynamic-search',
+	templateUrl: './dynamic-search.component.html',
+	styleUrls: ['./dynamic-search.component.scss'],
+	animations: [
+		trigger('collapse', [
+			state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
+			state('true', style({ height: '0', visibility: 'hidden' })),
+			transition('false => true', animate(300)),
+			transition('true => false', animate(300))
+		])
+	],
+	encapsulation: ViewEncapsulation.None
+})
+export class DynamicSearchComponent implements OnInit, OnChanges {
+	text: string;
+	aggregations;
+	@ViewChild('dynamicTable') dynamicTable: DynamicTableComponent;
+	/** 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() fullTextParamName = 'system_fulltext';
+	@Input() filter; // used to pass params from outside to params of dynamic table directly
+
+	@Input() suggesterApi; // api to be used in the suggester input if sent will used it if not will use the defult once
+	@Input()
+	onRowSelected = (row) => {
+		this.router.navigate([{ outlets: { viewer: ['view', row['uid']] } }], {
+			queryParams: { location: this.router.url }
+		});
+	};
+	/** used to emit any actions to outside */
+	@Output() actionOnRow = new EventEmitter();
+	queryParams = {};
+	filters;
+	searchForm = new FormGroup({
+		text: new FormControl(null),
+		personalFiles: new FormControl(false),
+		depFiles: new FormControl(false),
+		workSpaceFiles: new FormControl(false)
+	});
+	loading = false;
+	totalRecords;
+	openFilter: boolean;
+	@Input()
+	sortingArray;
+	@Input() customResponsiveStyle: boolean = false;
+	@Input() openCloseFilterFromOutside: boolean = false;
+	@Input() theme: any;
+	useToggleFilters;
+
+	quickFilters = '';
+	savedPersFilterValue = null;
+	savedDepFilterValue = null;
+	savedworkSpaceFilterValue = null;
+
+	resultSets = [];
+	constructor(
+		private route: ActivatedRoute,
+		private router: Router,
+		private evaluatorService: EvaluatorsService,
+		private nuxeoService: NuxeoService,
+		private globalAdminService: GlobalAdminService,
+		@Inject('environment') private environment,
+		public breakpointObserver: BreakpointObserver
+	) {
+		this.evaluatorService.evaluateRule('enableSearchToggles', {}).then((res) => {
+			this.useToggleFilters = res;
+		});
+	}
+
+	ngOnChanges(changes: SimpleChanges): void {
+		if (changes.openCloseFilterFromOutside) {
+			this.openFilter = changes.openCloseFilterFromOutside.currentValue;
+		}
+	}
+
+	ngOnInit(): void {
+		this.updateQueryParams(this.constructParamsFunction(this.route.snapshot.queryParams));
+		this.searchInputPopulate();
+		this.route.queryParams.subscribe((params) => {
+			if (
+				(this.text !== params['search_query'] && params['search_query']) ||
+				(params['search_query']?.length == 0 && this.text !== params['search_query']) ||
+				(this.useToggleFilters && this.quickFilters !== params['quickFilters'])
+			) {
+				this.updateQueryParams(this.constructParamsFunction(params));
+				this.searchInputPopulate();
+			}
+		});
+		this.breakpoint();
+
+		this.searchForm
+			.get('text')
+			.valueChanges.pipe(debounceTime(500))
+			.subscribe((res) => {
+				this.search(res).subscribe((results) => {
+					this.resultSets = results;
+				});
+			});
+	}
+
+	constructParamsFunction(params) {
+		let contructedParms = {};
+		this.text = params['search_query'];
+		if (this.text && this.text.trim()) {
+			if (this.useToggleFilters) {
+				if (params['quickFilters']) {
+					this.quickFilters = params['quickFilters'];
+					contructedParms = { [this.fullTextParamName]: this.text + '*', quickFilters: this.quickFilters };
+				} else {
+					this.quickFilters = '';
+					contructedParms = { [this.fullTextParamName]: this.text + '*', quickFilters: '' };
+				}
+			} else {
+				contructedParms = { [this.fullTextParamName]: this.text + '*' };
+			}
+		} else {
+			contructedParms = { [this.fullTextParamName]: null };
+		}
+
+		return contructedParms;
+	}
+	updateQueryParams(newQueryparams: object) {
+		this.queryParams = {
+			...this.queryParams,
+			...newQueryparams
+		};
+	}
+
+	searchInputPopulate() {
+		if (this.useToggleFilters) {
+			this.searchForm.patchValue({
+				text: this.text,
+				personalFiles:
+					this.quickFilters === 'personalFilter'
+						? true
+						: this.savedPersFilterValue !== null
+							? this.savedPersFilterValue
+							: false,
+				depFiles:
+					this.quickFilters === 'departmentFilter'
+						? true
+						: this.savedDepFilterValue !== null
+							? this.savedDepFilterValue
+							: false,
+				workSpaceFiles:
+					this.quickFilters === 'departmentWorkSpaceFilter'
+						? true
+						: this.savedworkSpaceFilterValue !== null
+							? this.savedworkSpaceFilterValue
+							: false
+			});
+		} else {
+			this.searchForm.patchValue({
+				text: this.text
+			});
+		}
+	}
+
+	FilterSelected(val: any) {
+		this.loading = true;
+		this.filters = { ...this.filters, ...val.filter }; //store filters
+		this.updateQueryParams(this.filters);
+	}
+
+	paginationChange(event) {}
+
+	getTableData(data) {
+		this.aggregations = Object.entries(data.aggregations || {}).map((item) => {
+			return item[1];
+		});
+		// this.aggregations = this.aggregations.filter((item) =>
+		//   this.sortingArray.includes(item.id)
+		// );
+		let updatedAggregation = [];
+		this.aggregations.map((aggreg) => {
+			this.sortingArray.map((sortType) => {
+				if (sortType.id === aggreg.id) {
+					aggreg['componentType'] = sortType.compoenentType;
+					// in case of custom component need to call page provider to get data
+					if (
+						sortType.compoenentType === 'custom-pp' ||
+						sortType.compoenentType === 'custom-document' ||
+						sortType.compoenentType === 'custom-department'
+					) {
+						(aggreg['customPageProvider'] = sortType.pageProvider), (aggreg['config'] = sortType.config);
+					}
+					updatedAggregation.push(aggreg);
+				}
+			});
+		});
+		this.aggregations = _.sortBy(updatedAggregation, (item) => {
+			let i = -1;
+			this.sortingArray.map((sortType, index) => {
+				if (sortType.id === item.id) {
+					i = index;
+				}
+			});
+			return i;
+		});
+		console.log('aggregations', this.aggregations);
+		this.totalRecords = data.totalSize;
+		this.loading = false;
+	}
+
+	submitForm() {
+		let params = {};
+		if (this.useToggleFilters) {
+			params = {
+				search_query: this.searchForm.controls.text.value,
+				quickFilters: this.getToggleFilters()
+			};
+		} else {
+			params = {
+				search_query: this.searchForm.controls.text.value
+			};
+		}
+		this.router.navigate(['.'], {
+			relativeTo: this.route,
+			queryParams: params
+		});
+	}
+
+	getToggleFilters() {
+		this.savedDepFilterValue = this.searchForm.controls.depFiles.value;
+		this.savedPersFilterValue = this.searchForm.controls.personalFiles.value;
+		this.savedworkSpaceFilterValue = this.searchForm.controls.workSpaceFiles.value;
+		if (
+			(this.savedPersFilterValue && this.savedDepFilterValue && this.savedworkSpaceFilterValue) ||
+			(!this.savedPersFilterValue && !this.savedDepFilterValue && !this.savedworkSpaceFilterValue)
+		) {
+			return '';
+		} else if (this.savedPersFilterValue && !this.savedDepFilterValue && !this.savedworkSpaceFilterValue) {
+			return 'personalFilter';
+		} else if (!this.savedPersFilterValue && this.savedDepFilterValue && !this.savedworkSpaceFilterValue) {
+			return 'departmentFilter';
+		} else if (!this.savedPersFilterValue && !this.savedDepFilterValue && this.savedworkSpaceFilterValue) {
+			return 'departmentWorkSpaceFilter';
+		} else if (this.savedPersFilterValue && this.savedDepFilterValue && !this.savedworkSpaceFilterValue) {
+			return 'departmentPersonalFilter';
+		} else if (this.savedPersFilterValue && !this.savedDepFilterValue && this.savedworkSpaceFilterValue) {
+			return 'personalDepartmentWorkSpaceFilter';
+		} else if (!this.savedPersFilterValue && this.savedDepFilterValue && this.savedworkSpaceFilterValue) {
+			return 'deptDepatmentWorkSpaceFilter';
+		}
+	}
+
+	setOptionValue(searchedText) {
+		this.searchForm.get('text').setValue(searchedText);
+		this.submitForm();
+	}
+	onOpenFilter() {
+		this.openFilter = !this.openFilter;
+	}
+
+	breakpoint() {
+		this.breakpointObserver.observe(['(min-width: 1200px)']).subscribe((result) => {
+			if (result.matches) {
+				this.openFilter = false;
+			}
+		});
+	}
+
+	performAction(action) {
+		this.actionOnRow.emit(action);
+	}
+
+	search(term: string): Observable<any> {
+		let params = {
+			searchTerm: term
+		};
+		if (this.globalAdminService.isGlobalAdmin) {
+			params['path'] = this.globalAdminService.activeTenant ;
+		} else if (!this.globalAdminService.isGlobalAdmin && this.nuxeoService.nuxeoClient.user.properties.tenantId) {
+			params['path'] = this.nuxeoService.nuxeoClient.user.properties.tenantId;
+		}
+		return from(
+			this.nuxeoService.nuxeoClient
+				.operation(this.suggesterApi ? this.suggesterApi : 'Search.CustomSuggestersLauncher', {
+					url: `${this.environment.nuxeo}${this.environment.customAutomation}`
+				})
+				.params({
+					...params
+				})
+				.context({})
+				.execute()
+		);
+	}
+}

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

@@ -0,0 +1,33 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { TranslateModule } from '@ngx-translate/core';
+import { CardModule } from '../card/card.module';
+import { DynamicFilterModule } from '../dynamic-filter/dynamic-filter.module';
+import { DynamicFormModule } from '../dynamic-form/dynamic-form.module';
+import { DynamicTableModule } from '../tables';
+import { DynamicSearchComponent } from './dynamic-search/dynamic-search.component';
+import { MAT_AUTOCOMPLETE_SCROLL_STRATEGY, MatAutocompleteModule } from '@angular/material/autocomplete';
+
+/**
+ * @title
+ * Dynamic Search Module
+ */
+@NgModule({
+	declarations: [DynamicSearchComponent],
+	imports: [
+		CommonModule,
+		CardModule,
+		DynamicTableModule,
+		DynamicFilterModule,
+		DynamicFormModule,
+		ReactiveFormsModule,
+		MatAutocompleteModule,
+		FormsModule,
+		TranslateModule,
+		MatProgressSpinnerModule
+	],
+	exports: [DynamicSearchComponent]
+})
+export class DynamicSearchModule {}

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