@unifylib/ui-lib 1.0.3 → 1.1.3

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

@@ -1,69 +1,69 @@
-import {Component, HostListener, Inject, OnInit} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogContent, MatDialogRef, MatDialogTitle} from "@angular/material/dialog";
-import {FormsModule} from "@angular/forms";
-import {TranslateModule} from "@ngx-translate/core";
-import {MatButton} from "@angular/material/button";
-import {FieldInfo, PageInfo} from "../../base-model";
-import {BaseFormCanvasComponent} from "../base-form-canvas/base-form-canvas.component";
-import {MatDivider} from "@angular/material/divider";
-
-@Component({
-  selector: 'app-audit-log-details-dialog',
-  standalone: true,
-  imports: [
-    MatDialogTitle,
-    MatDialogContent,
-    FormsModule,
-    TranslateModule,
-    MatButton,
-    BaseFormCanvasComponent,
-    MatDivider
-  ],
-  templateUrl: './audit-log-details-dialog.component.html',
-  styleUrl: './audit-log-details-dialog.component.css'
-})
-export class AuditLogDetailsDialogComponent implements OnInit {
-  pageInfo: PageInfo;
-  fields: FieldInfo[] = [];
-
-  actionLabel : string =''
-  isTermination : boolean=false;
-  comment: string = '';
-  external: boolean = false;
-  signingRequired: boolean = false;
-  tokenReference: string = "";
-  warningMsg = false;
-  item: any = {};
-  constructor(public dialogRef: MatDialogRef<AuditLogDetailsDialogComponent>,
-              @Inject(MAT_DIALOG_DATA) public data: any) {
-    dialogRef.disableClose = true;
-  }
-  @HostListener('window:keyup.esc') onKeyUp() {
-    this.dialogRef.close();
-  }
-  ngOnInit(): void {
-    this.pageInfo = this.data.pageInfo;
-    this.fields = this.data.fields;
-
-    this.fields = this.data.fields.map((f: any) => ({ ...f }));
-
-    const showHiddenFields: string[] = this.data.showHiddenFields || [];
-    this.fields.forEach(field => {
-      if (showHiddenFields.includes(field.property)) {
-        field.visible = true;
-      }
-    });
-    this.item = this.data.item;
-    this.comment = this.data.comment;
-    this.warningMsg = this.data.warningMsg || false;
-    }
-
-  cancel() {
-    this.dialogRef.close();
-  }
-
-
-  getTitle() {
-    return `${this.pageInfo.labelsSection}.${this.pageInfo.id}`;
-  }
-}
+import {Component, HostListener, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogContent, MatDialogRef, MatDialogTitle} from "@angular/material/dialog";
+import {FormsModule} from "@angular/forms";
+import {TranslateModule} from "@ngx-translate/core";
+import {MatButton} from "@angular/material/button";
+import {FieldInfo, PageInfo} from "../../base-model";
+import {BaseFormCanvasComponent} from "../base-form-canvas/base-form-canvas.component";
+import {MatDivider} from "@angular/material/divider";
+
+@Component({
+  selector: 'app-audit-log-details-dialog',
+  standalone: true,
+  imports: [
+    MatDialogTitle,
+    MatDialogContent,
+    FormsModule,
+    TranslateModule,
+    MatButton,
+    BaseFormCanvasComponent,
+    MatDivider
+  ],
+  templateUrl: './audit-log-details-dialog.component.html',
+  styleUrl: './audit-log-details-dialog.component.css'
+})
+export class AuditLogDetailsDialogComponent implements OnInit {
+  pageInfo: PageInfo;
+  fields: FieldInfo[] = [];
+
+  actionLabel : string =''
+  isTermination : boolean=false;
+  comment: string = '';
+  external: boolean = false;
+  signingRequired: boolean = false;
+  tokenReference: string = "";
+  warningMsg = false;
+  item: any = {};
+  constructor(public dialogRef: MatDialogRef<AuditLogDetailsDialogComponent>,
+              @Inject(MAT_DIALOG_DATA) public data: any) {
+    dialogRef.disableClose = true;
+  }
+  @HostListener('window:keyup.esc') onKeyUp() {
+    this.dialogRef.close();
+  }
+  ngOnInit(): void {
+    this.pageInfo = this.data.pageInfo;
+    this.fields = this.data.fields;
+
+    this.fields = this.data.fields.map((f: any) => ({ ...f }));
+
+    const showHiddenFields: string[] = this.data.showHiddenFields || [];
+    this.fields.forEach(field => {
+      if (showHiddenFields.includes(field.property)) {
+        field.visible = true;
+      }
+    });
+    this.item = this.data.item;
+    this.comment = this.data.comment;
+    this.warningMsg = this.data.warningMsg || false;
+    }
+
+  cancel() {
+    this.dialogRef.close();
+  }
+
+
+  getTitle() {
+    return `${this.pageInfo.labelsSection}.${this.pageInfo.id}`;
+  }
+}

package/src/lib/components/audit-log-list/audit-log.component.html

@@ -1,23 +1,26 @@
-<h4><span style="font-weight: normal; color: #222222" >{{'audit-log.title' | translate}}</span></h4>
-<div class="hrdivider-mini" >
-  <hr class="header-hr"/>
-</div>
-
-<div fxLayout="row" fxLayout.lt-md="row" fxLayoutGap="5px" fxLayoutAlign="start start" style="width: 100%;"
-     *ngFor="let auditLog of auditLogEntries; let i=index">
-  <div fxLayout="column" fxFlex="100" fxLayoutAlign="start start">
-    <p *ngIf="i===0" style="margin-bottom: 15px; margin-top: 0"></p>
-    <p style="margin-bottom: 0; margin-top: 0">
-      {{getDescription(auditLog)}}
-      <button mat-stroked-button color="secondary" (click)="viewObject(auditLog)">
-        {{ 'audit-log.view_details' | translate }}
-      </button>
-
-    </p>
-    <p class="invoice-label-text" style="margin: 0;word-wrap: break-word"></p>
-    <div class="hrdivider-mini" >
-      <hr class="header-hr"/>
-    </div>
-  </div>
-
-</div>
+<h4>
+  <span class="audit-log-title">{{ 'audit-log.title' | translate }}</span>
+</h4>
+
+<div class="hrdivider-mini">
+  <hr class="header-hr" />
+</div>
+
+<div class="audit-log-container" *ngFor="let auditLog of auditLogEntries; let i = index">
+  <div class="audit-log-entry">
+    <p *ngIf="i === 0" class="audit-log-spacer"></p>
+
+    <p class="audit-log-text">
+      {{ getDescription(auditLog) }}
+      <button mat-stroked-button color="secondary" (click)="viewObject(auditLog)" [attr.id]="'audit-view-details-' + i">
+        {{ 'audit-log.view_details' | translate }}
+      </button>
+    </p>
+
+    <p class="invoice-label-text"></p>
+
+    <div class="hrdivider-mini">
+      <hr class="header-hr" />
+    </div>
+  </div>
+</div>

package/src/lib/components/audit-log-list/audit-log.component.scss

@@ -0,0 +1,50 @@
+.audit-log-title {
+  font-weight: normal;
+  color: #222222;
+}
+
+.hrdivider-mini {
+  width: 100%;
+}
+
+.header-hr {
+  height: 4px;
+  background-color: #339dff;
+  border: none;
+  margin: 5px 0;
+}
+
+.audit-log-container {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  justify-content: flex-start;
+  align-items: flex-start;
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+.audit-log-entry {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 1 100%;
+}
+
+.audit-log-spacer {
+  margin-bottom: 15px;
+  margin-top: 0;
+}
+
+.audit-log-text {
+  margin: 0;
+  word-wrap: break-word;
+}
+
+/* --- Responsive --- */
+@media (max-width: 960px) {
+  .audit-log-container {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}

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

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

package/src/lib/components/audit-log-list/audit-log.component.ts

@@ -1,116 +1,114 @@
-import {Component, Inject, Input, OnInit} from '@angular/core';
-import {FieldInfo, Filter, FilterRequest, PageInfo, TableColumn} from "../../base-model";
-import {TranslateModule, TranslateService} from "@ngx-translate/core";
-import {BackendService} from "../../services";
-import {DatePipe, NgForOf, NgIf} from "@angular/common";
-import {FlexLayoutModule} from "@angular/flex-layout";
-import {MatButton, MatButtonModule} from "@angular/material/button";
-import {MatIconModule} from "@angular/material/icon";
-import {MatDialog} from "@angular/material/dialog";
-import {ActivatedRoute, Router} from "@angular/router";
-import {AuditLogEntry} from "../../base-model/audit-log-entry";
-import {AuditLogDetailsDialogComponent} from "../audit-log-details-dialog/audit-log-details-dialog.component";
-import {Directionality} from "@angular/cdk/bidi";
-
-@Component({
-    selector: 'app-audit-log',
-    standalone: true,
-  imports: [
-    FlexLayoutModule,
-    NgForOf,
-    MatButtonModule,
-    TranslateModule,
-    NgIf,
-    MatIconModule,
-    MatButton
-  ],
-  providers: [DatePipe],
-    templateUrl: './audit-log.component.html',
-    styleUrl: './audit-log.component.scss'
-})
-export class AuditLogComponent implements OnInit {
-  auditLogEntries: AuditLogEntry[] = [];
-
-  @Input()
-  pageInfo!: PageInfo;
-
-  @Input()
-  fields: FieldInfo[];
-
-  @Input()
-  showHiddenFields : string[];
-
-
-  itemId: number;
-
-  item : any = {};
-  isLoaded : boolean = false;
-  columnsDefinition: TableColumn<any>[];
-
-  currentDirection: 'ltr' | 'rtl';
-
-
-  constructor(public dialog: MatDialog,
-                private activatedRoute: ActivatedRoute,
-                private datePipe: DatePipe,
-                private translateService:TranslateService,
-                private router:Router,
-                private directionality: Directionality,
-                @Inject('securityManager') private securityManager: any,
-                public backendService: BackendService) {
-    }
-
-    ngOnInit(): void {
-      this.currentDirection = this.directionality.value;
-      this.directionality.change.subscribe((value) => {
-        this.currentDirection = value;
-      })
-
-      this.loadItem();
-    }
-
-
-  private loadItem() {
-    if (this.activatedRoute.snapshot.queryParams['token']) {
-      this.itemId = this.backendService.decrypt(this.activatedRoute.snapshot.queryParams['token']);
-    }
-    const filterRequest = new FilterRequest;
-    if (this.itemId > 0) {
-      filterRequest.filters = [];
-      filterRequest.sortDirection = "DESC";
-      // TODO
-      // add pagination support here.
-      filterRequest.pageSize = 1000;
-      filterRequest.filters.push(new Filter({
-        key: 0,
-        fieldType: 'Long',
-        fieldName: 'id',
-        valueObject: this.itemId,
-        filterType: 'FILED_FILTER',
-        operator: 'EQUALS'
-      }));
-    }
-      this.backendService.getItemAuditLog(filterRequest, this.pageInfo!.apiUri).subscribe(resp => {
-        this.auditLogEntries = resp.body;
-      });
-  }
-
-
-  viewObject(auditLog: AuditLogEntry) {
-    const dialogRef = this.dialog.open(AuditLogDetailsDialogComponent, {
-      data: {pageInfo: this.pageInfo, fields: this.fields, item:auditLog.subject, comment: auditLog.comment, showHiddenFields:this.showHiddenFields},
-      width: '800px',
-      height: 'auto',
-      direction: this.currentDirection
-    });
-
-  }
-
-  getDescription(auditLog: AuditLogEntry) {
-    return `
-       ${auditLog.createdBy || this.translateService.instant('system')}
-       ${this.translateService.instant('on')}
-       ${this.datePipe.transform(auditLog.createdOn, 'medium')}
-       ${this.translateService.instant('audit-log.executed')} ${this.translateService.instant(auditLog.action.toString())}`
-  }
-}
+import {Component, Inject, Input, OnInit} from '@angular/core';
+import {FieldInfo, Filter, FilterRequest, PageInfo, TableColumn} from "../../base-model";
+import {TranslateModule, TranslateService} from "@ngx-translate/core";
+import {BackendService} from "../../services";
+import {DatePipe, NgForOf, NgIf} from "@angular/common";
+import {MatButton, MatButtonModule} from "@angular/material/button";
+import {MatIconModule} from "@angular/material/icon";
+import {MatDialog} from "@angular/material/dialog";
+import {ActivatedRoute, Router} from "@angular/router";
+import {AuditLogEntry} from "../../base-model/audit-log-entry";
+import {AuditLogDetailsDialogComponent} from "../audit-log-details-dialog/audit-log-details-dialog.component";
+import {Directionality} from "@angular/cdk/bidi";
+
+@Component({
+    selector: 'app-audit-log',
+    standalone: true,
+  imports: [
+    NgForOf,
+    MatButtonModule,
+    TranslateModule,
+    NgIf,
+    MatIconModule,
+    MatButton
+  ],
+  providers: [DatePipe],
+    templateUrl: './audit-log.component.html',
+    styleUrl: './audit-log.component.scss'
+})
+export class AuditLogComponent implements OnInit {
+  auditLogEntries: AuditLogEntry[] = [];
+
+  @Input()
+  pageInfo!: PageInfo;
+
+  @Input()
+  fields: FieldInfo[];
+
+  @Input()
+  showHiddenFields : string[];
+
+
+  itemId: number;
+
+  item : any = {};
+  isLoaded : boolean = false;
+  columnsDefinition: TableColumn<any>[];
+
+  currentDirection: 'ltr' | 'rtl';
+
+
+  constructor(public dialog: MatDialog,
+                private activatedRoute: ActivatedRoute,
+                private datePipe: DatePipe,
+                private translateService:TranslateService,
+                private router:Router,
+                private directionality: Directionality,
+                @Inject('securityManager') private securityManager: any,
+                public backendService: BackendService) {
+    }
+
+    ngOnInit(): void {
+      this.currentDirection = this.directionality.value;
+      this.directionality.change.subscribe((value) => {
+        this.currentDirection = value;
+      })
+
+      this.loadItem();
+    }
+
+
+  private loadItem() {
+    if (this.activatedRoute.snapshot.queryParams['token']) {
+      this.itemId = this.backendService.decrypt(this.activatedRoute.snapshot.queryParams['token']);
+    }
+    const filterRequest = new FilterRequest;
+    if (this.itemId > 0) {
+      filterRequest.filters = [];
+      filterRequest.sortDirection = "DESC";
+      // TODO
+      // add pagination support here.
+      filterRequest.pageSize = 1000;
+      filterRequest.filters.push(new Filter({
+        key: 0,
+        fieldType: 'Long',
+        fieldName: 'id',
+        valueObject: this.itemId,
+        filterType: 'FILED_FILTER',
+        operator: 'EQUALS'
+      }));
+    }
+      this.backendService.getItemAuditLog(filterRequest, this.pageInfo!.apiUri).subscribe(resp => {
+        this.auditLogEntries = resp.body;
+      });
+  }
+
+
+  viewObject(auditLog: AuditLogEntry) {
+    const dialogRef = this.dialog.open(AuditLogDetailsDialogComponent, {
+      data: {pageInfo: this.pageInfo, fields: this.fields, item:auditLog.subject, comment: auditLog.comment, showHiddenFields:this.showHiddenFields},
+      width: '800px',
+      height: 'auto',
+      direction: this.currentDirection
+    });
+
+  }
+
+  getDescription(auditLog: AuditLogEntry) {
+    return `
+       ${auditLog.createdBy || this.translateService.instant('system')}
+       ${this.translateService.instant('on')}
+       ${this.datePipe.transform(auditLog.createdOn, 'medium')}
+       ${this.translateService.instant('audit-log.executed')} ${this.translateService.instant(auditLog.action.toString())}`
+  }
+}

package/src/lib/components/auto-complete/auto-complete.component.css

@@ -1,14 +1,55 @@
-::ng-deep .main-auto-complete {
-
-  .matField {
-    margin-bottom: 24px !important;
-    .mat-form-field-wrapper {
-      padding: 0  !important;
-      margin-bottom: 0 !important;
-    }
-  }
-
-
-}
-
-
+
+.main-auto-complete {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.mat-field-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.label-and-asterisk-container {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 4px;
+}
+
+.custom-label {
+  font-weight: 500;
+}
+
+.required-asterisk {
+  color: red;
+}
+
+
+.autocomplete-field {
+  width: 100%;
+  display: flex;
+  /*flex-direction: row;*/
+  align-items: center;
+}
+
+
+.autocomplete-button {
+  margin-left: 4px;
+}
+
+
+@media (max-width: 600px) {
+  .main-auto-complete,
+  .mat-field-wrapper,
+  .autocomplete-field {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .autocomplete-button {
+    margin-left: 0;
+    margin-top: 4px;
+  }
+}