@unifylib/ui-lib 1.0.3 → 1.1.3

package/src/lib/components/advanced-filter/field-filter/field-filter.component.html

@@ -0,0 +1,8 @@
+
+<app-base-form-canvas
+        [pageInfo]="pageInfo"
+        [fields]="filterFields"
+        [editable]="editable"
+        (formUpdated)="formChanges($event)"
+>
+</app-base-form-canvas>

package/src/lib/components/advanced-filter/field-filter/field-filter.component.spec.ts

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

package/src/lib/components/advanced-filter/field-filter/field-filter.component.ts

@@ -0,0 +1,55 @@
+import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core';
+import {FormGroup} from "@angular/forms";
+import {FieldFilter} from "../../../base-model/field-filter.model";
+import {FieldInfo, PageInfo} from "../../../base-model";
+import {BaseFormCanvasComponent} from "../../base-form-canvas/base-form-canvas.component";
+
+@Component({
+  selector: 'app-field-filter',
+  templateUrl: './field-filter.component.html',
+  standalone: true,
+  imports: [
+    BaseFormCanvasComponent
+  ],
+  styleUrls: ['./field-filter.component.scss']
+})
+
+export class FieldFilterComponent implements OnInit  {
+
+  @Input()
+  filter: FieldFilter;
+
+  @Input()
+  pageInfo: PageInfo;
+
+  @Input()
+  filterFields: FieldInfo[];
+
+  filterForm: FormGroup;
+
+  @Input()
+  item: any;
+
+  @Input()
+  editable = false;
+
+  @Output()
+  selectedValue: EventEmitter<any> = new EventEmitter<any>();
+
+  @Output()
+  filterFieldInformation: EventEmitter<any> = new EventEmitter<any>();
+
+  constructor() { }
+
+  ngOnInit(): void {
+
+  }
+
+
+  formChanges($event: FormGroup) {
+    this.filterForm = $event;
+    this.filterForm.valueChanges.subscribe(v => {
+      this.filterFieldInformation.emit(this.filterForm.value);
+    });
+  }
+}

package/src/lib/components/advanced-filter/filter-builder/filter-builder.component.html

@@ -0,0 +1,36 @@
+<div class="main-filter-builder">
+
+  <div class="filterForm">
+    <div class="filterForm__row">
+      <div class="filterForm__col">
+        <app-field-filter
+          [editable]="isEditable()"
+          [filter]="filter"
+          [pageInfo]="pageInfo"
+          *ngIf="isEditable()"
+          [filterFields]="filterFields"
+          (filterFieldInformation)="formChanges($event)"
+          class="filterForm__filed-filter"
+        >
+        </app-field-filter>
+      </div>
+    </div>
+  </div>
+
+<!--  <div *ngIf="checkIsEmpty()" class="line-top">-->
+<!--    <mat-divider></mat-divider>-->
+<!--  </div>-->
+
+<!--  <div class="line-bottom">-->
+<!--    <mat-divider></mat-divider>-->
+<!--  </div>-->
+
+<!--  <div class="action">-->
+<!--    <button class="btn-none-background-primary action__clear" mat-button (click)="deleteAll()">-->
+<!--      {{'FILTER-BUILDER.clearAllFilters' | translate}}-->
+<!--    </button>-->
+<!--    <button class="btn-background-primary" mat-button (click)="doSearch()">-->
+<!--      {{'FILTER-BUILDER.search' | translate}}-->
+<!--    </button>-->
+<!--  </div>-->
+</div>

package/src/lib/components/advanced-filter/filter-builder/filter-builder.component.scss

@@ -0,0 +1,130 @@
+.main-filter-builder {
+
+  .filterForm {
+    display: block;
+
+    &__row {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin: 6px 0;
+      flex-wrap: wrap;
+    }
+
+    &__col {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+
+    &__filed-filter {
+      margin: 5px 0 0 0 !important;
+    }
+
+    .action-filter {
+      flex: 0 0 auto;
+      .edit-design {
+        margin: auto;
+
+        &__add-button {
+          background: #FFFFFF !important;
+          color: var(--primary-color) !important;
+          height: 48px;
+          width: 48px;
+          border-radius: 5px;
+          border: #D9D9D9 solid 1px;
+          margin: 30px 0  0  0;
+
+          &__add-button-text {
+            margin: 0 5px
+          }
+        }
+      }
+    }
+  }
+
+  .line-top {
+    mat-divider {
+      width: 98%;
+      margin: 0 auto 10px auto;
+    }
+  }
+
+
+  .advanced-button {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    .view {
+      background: #E3FBFF !important;
+      border: 1px solid #00ABC8 !important;
+      border-radius: 6px !important;
+      margin: 10px 0;
+      padding: 6px 8px;
+      height: 32px;
+      margin-top: 0 !important;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+
+      &__filed {
+        margin-top: -3px;
+        display: inline-block;
+        color: #1C355E;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 16px;
+        font-style: normal;
+        text-align: center !important;
+      }
+
+      &__close {
+        margin-left: 6px;
+        &__icon {
+          color: #1C355E;
+          font-size: 14px;
+          cursor: pointer;
+          display: inline-block;
+        }
+      }
+    }
+  }
+
+  .line-bottom {
+    mat-divider {
+      width: 98%;
+      margin: 0 auto 10px auto;
+    }
+  }
+
+  .action {
+    justify-content: end;
+    padding: 5px 10px 10px 10px;
+
+    &__clear {
+      border: none !important;
+      margin: 0 5px
+    }
+  }
+
+  /* Responsive rules to replace fxLayout breakpoints */
+  @media (max-width: 599.98px) {
+    .filterForm {
+      &__row {
+        flex-wrap: wrap;
+      }
+      .action-filter .edit-design__add-button {
+        width: 100%;
+        height: 45px;
+        margin: 5px 5px 10px;
+      }
+    }
+  }
+
+  /* Hide add button text on screens larger than small (equivalent to fxHide.gt-xs) */
+  @media (min-width: 600px) {
+    .add-text-responsive {
+      display: none;
+    }
+  }
+
+}

package/src/lib/components/advanced-filter/filter-builder/filter-builder.component.spec.ts

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

package/src/lib/components/advanced-filter/filter-builder/filter-builder.component.ts

@@ -0,0 +1,186 @@
+import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FieldInfo, PageInfo, TableColumn} from "../../../base-model";
+import {FieldFilter} from "../../../base-model/field-filter.model";
+import {FieldFilterComponent} from "../field-filter/field-filter.component";
+import {TranslateModule} from "@ngx-translate/core";
+
+@Component({
+  selector: 'app-filter-builder',
+  templateUrl: './filter-builder.component.html',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FieldFilterComponent,
+    TranslateModule
+  ],
+  styleUrls: ['./filter-builder.component.scss']
+})
+export class FilterBuilderComponent implements OnInit, OnDestroy {
+
+  @Input()
+  columns: TableColumn<any>[];
+
+  @Input()
+  isChecked: boolean;
+  @Input()
+  filterFields: FieldInfo[];
+  @Input()
+  pageInfo: PageInfo;
+
+  filter: FieldFilter;
+  filters: FieldFilter[] = [];
+
+  private searchTimeout: any;
+
+  @Output()
+  filterInformation: EventEmitter<FieldFilter[]> = new EventEmitter<FieldFilter[]>();
+
+  @Output()
+  isEmpty: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+
+
+    this.switchToAdvanced();
+    if (!this.filter) {
+      this.filter = this.createDefaultFieldFilter();
+    }
+    if (this.filterFields && this.filterFields.length) {
+      this.filters = this.filterFields.map(() => this.createDefaultFieldFilter());
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.searchTimeout) {
+      clearTimeout(this.searchTimeout);
+      this.searchTimeout = null;
+    }
+  }
+
+
+  doSearch() {
+    const filtersArray = (this.filters || [])
+      .filter(f => !!f && f.fieldName && f.valueObject !== undefined && f.valueObject !== null && f.valueObject !== '')
+      .map(f => ({...f}));
+    this.filterInformation.emit(filtersArray);
+  }
+
+  private scheduleSearch(delayMs: number = 800) {
+    if (this.searchTimeout) {
+      clearTimeout(this.searchTimeout);
+    }
+    this.searchTimeout = setTimeout(() => {
+      this.doSearch();
+    }, delayMs);
+  }
+
+  formChanges($event: any, index?: number, fieldInfo?: FieldInfo) {
+    if (index === undefined || !fieldInfo) {
+      if (!this.filterFields || !this.filterFields.length) {
+        this.filters = [];
+        this.doSearch();
+        return;
+      }
+
+      this.filters = this.filterFields.map((fi) => {
+        const controlName = fi.property;
+        let value = $event ? $event[controlName] : undefined;
+        if (value === undefined || value === null || value === '') {
+          return this.createDefaultFieldFilter();
+        }
+        const fieldName = controlName === 'from' || controlName === 'to' ?  fi.targetProperty : controlName;
+
+        return {
+          fieldName: fieldName,
+          operator: fi.filterOperator || 'EQUALS',
+          filterType: 'FILED_FILTER',
+          fieldType: this.typeMap(fi.type) as any,
+          valueObject: value as any
+        } as FieldFilter;
+      });
+
+      const hasTextField = (this.filterFields || []).some(fi => ((fi.type || '').toLowerCase() === 'text'));
+      if (hasTextField) {
+        this.scheduleSearch();
+      } else {
+        this.doSearch();
+      }
+      return;
+    }
+
+    if (!this.filters) {
+      this.filters = [];
+    }
+    if (this.filters.length < index + 1) {
+      this.filters.length = index + 1;
+    }
+
+    let controlName = fieldInfo.property;
+    let value = $event ? $event[controlName] : undefined;
+    if ($event && $event.filterField !== undefined && $event.fromValue !== undefined) {
+      controlName = $event.filterField || controlName;
+      value = $event.fromValue;
+    }
+
+    if (value === undefined || value === null || value === '') {
+      this.filters[index] = this.createDefaultFieldFilter();
+    } else {
+      this.filters[index] = {
+        fieldName: controlName,
+        operator:  fieldInfo.filterOperator || 'EQUALS',
+        filterType: 'FILED_FILTER',
+        fieldType: this.typeMap(fieldInfo.type) as any,
+        valueObject: value as any
+      } as FieldFilter;
+    }
+    const isTextField = ((fieldInfo.type || '').toLowerCase() === 'text');
+    if (isTextField) {
+      this.scheduleSearch();
+    } else {
+      this.doSearch();
+    }
+  }
+  typeMap(colType?: string): string {
+    const t = (colType || '').toLowerCase();
+    if (t.includes('number') || t.includes('int') || t === 'long') return 'Long';
+    if (t.includes('date') || t.includes('time')) return 'Date';
+    if (t.includes('bool')) return 'Boolean';
+    return 'String';
+  }
+
+  isEditable(_index?: number) {
+    return true;
+  }
+
+
+  deleteAll() {
+    this.filter = this.createDefaultFieldFilter();
+    this.filters = this.filterFields ? this.filterFields.map(() => this.createDefaultFieldFilter()) : [];
+    this.isEmpty.emit(true);
+  }
+
+
+  switchToAdvanced() {
+    if (this.isChecked) {
+      if (!this.filter || Object.keys(this.filter).length === 0) {
+        this.filter = this.createDefaultFieldFilter();
+      }
+    }
+  }
+
+
+  private createDefaultFieldFilter(): FieldFilter {
+    return {
+      fieldName: '',
+      operator: '',
+      filterType: '',
+      fieldType: '',
+      valueObject: ''
+    } as FieldFilter;
+  }
+}

package/src/lib/components/audit-log-details-dialog/audit-log-details-dialog.component.css

@@ -1,51 +1,51 @@
-.m-0{
-  margin: 0 !important;
-}
-.w-100{
-  width: 100%;
-}
-.form-style{
-  min-height: 12vh !important;
-  height: auto !important;
-}
-.text-red{
-  color: red !important;
-}
-.modal-footer{
-  margin-top: 5vh;
-}
-.overflow-hidden{
-  overflow: hidden;
-}
-.pad-top{
-  margin-top: -7px;
-  display: block;
-}
-.action-comment {
-  /*direction: rtl;*/
-  display: flex;
-  justify-content: space-between;
-}
-.material-icons {
-  color: #E22222;
-}
-textarea#warn::placeholder {
-  color: red;
-}
-.invoice-label {
-  color: var(--primary-color);
-  margin: 0px;
-  font-weight: bold;
-  padding-bottom: 10px !important;
-  padding-top: 6px !important;
-  border-bottom: none !important;
-
-}
-
-.invoice-label-text {
-  color: var(--accent-color);
-  font-weight: normal;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-  width: 100%;
-}
+.m-0{
+  margin: 0 !important;
+}
+.w-100{
+  width: 100%;
+}
+.form-style{
+  min-height: 12vh !important;
+  height: auto !important;
+}
+.text-red{
+  color: red !important;
+}
+.modal-footer{
+  margin-top: 5vh;
+}
+.overflow-hidden{
+  overflow: hidden;
+}
+.pad-top{
+  margin-top: -7px;
+  display: block;
+}
+.action-comment {
+  /*direction: rtl;*/
+  display: flex;
+  justify-content: space-between;
+}
+.material-icons {
+  color: #E22222;
+}
+textarea#warn::placeholder {
+  color: red;
+}
+.invoice-label {
+  color: var(--primary-color);
+  margin: 0px;
+  font-weight: bold;
+  padding-bottom: 10px !important;
+  padding-top: 6px !important;
+  border-bottom: none !important;
+
+}
+
+.invoice-label-text {
+  color: var(--accent-color);
+  font-weight: normal;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  width: 100%;
+}

package/src/lib/components/audit-log-details-dialog/audit-log-details-dialog.component.html

@@ -1,23 +1,23 @@
-<mat-dialog-content class="mat-typography overflow-hidden">
-  <div style="'padding': '10px 30px 10px 0'">
-    <h2 mat-dialog-title>{{ getTitle()| translate }}</h2>
-    <app-base-form-canvas
-      [pageInfo]="pageInfo"
-      [fields]="fields"
-      [editable]="false"
-      [item]="item"
-    ></app-base-form-canvas>
-
-    <p>
-      <span class="invoice-label">{{ 'audit-log.reason_dialog' | translate }} :</span>
-      <span class="invoice-label-text">{{ comment }}</span>
-    </p>
-    <mat-divider style="width: 97%"></mat-divider>
-    <br>
-    <button mat-stroked-button color='accent' style="margin: 5px"
-            (click)="cancel()" id="acceptActionLabel">
-      {{ 'audit-log.close' | translate }}
-    </button>
-    <br>
-  </div>
-</mat-dialog-content>
+<mat-dialog-content class="mat-typography overflow-hidden">
+  <div style="'padding': '10px 30px 10px 0'">
+    <h2 mat-dialog-title>{{ getTitle()| translate }}</h2>
+    <app-base-form-canvas
+      [pageInfo]="pageInfo"
+      [fields]="fields"
+      [editable]="false"
+      [item]="item"
+    ></app-base-form-canvas>
+
+    <p>
+      <span class="invoice-label">{{ 'audit-log.reason_dialog' | translate }} :</span>
+      <span class="invoice-label-text">{{ comment }}</span>
+    </p>
+    <mat-divider style="width: 97%"></mat-divider>
+    <br>
+    <button mat-stroked-button color='accent' style="margin: 5px"
+            (click)="cancel()" id="acceptActionLabel">
+      {{ 'audit-log.close' | translate }}
+    </button>
+    <br>
+  </div>
+</mat-dialog-content>

package/src/lib/components/audit-log-details-dialog/audit-log-details-dialog.component.spec.ts

@@ -1,23 +1,23 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AuditLogDetailsDialogComponent } from './audit-log-details-dialog.component';
-
-describe('ActionCommentComponent', () => {
-  let component: AuditLogDetailsDialogComponent;
-  let fixture: ComponentFixture<AuditLogDetailsDialogComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [AuditLogDetailsDialogComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(AuditLogDetailsDialogComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AuditLogDetailsDialogComponent } from './audit-log-details-dialog.component';
+
+describe('ActionCommentComponent', () => {
+  let component: AuditLogDetailsDialogComponent;
+  let fixture: ComponentFixture<AuditLogDetailsDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AuditLogDetailsDialogComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AuditLogDetailsDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});