@unifylib/ui-lib 1.0.3

package/src/lib/components/base-form/base-form.component.html

@@ -0,0 +1,58 @@
+<div fxLayout="column" fxFlex="2" fxHide.lt-sm [ngStyle]="{'height':isMatchHeight() ? '30vh' : '88vh' }">
+
+</div>
+
+<div fxLayout="column" style="width: 100%">
+  <div fxLayout="row" fxLayoutAlign="start start" style="margin-top: 2vh; width: 100%">
+    <div fxLayout="column" fxFlex="100">
+      <app-title-bar [pageTitle]="getTitle()" [newAction]="false" [hideBackButton]="hideBackButton"></app-title-bar>
+    </div>
+  </div>
+  <app-base-form-canvas
+    [pageInfo]="pageInfo"
+    [fields]="fields"
+    [editable]="editable"
+    [errors]="errors"
+    [item]="item"
+    (formUpdated)="updateForm($event)"
+  ></app-base-form-canvas>
+
+  <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start start" fxLayoutAlign.lt-sm="center start"
+       class="main-form-canvas"
+       style="margin-top: 3vh; width: 100%">
+
+    <div fxLayout="column" fxFlex="49">
+      <div fxLayout="row" fxLayoutAlign="start center" fxFlex="100" >
+        <button *ngIf="hasWfPositivePermission()" color="primary" mat-flat-button (click)="doSaveApproveAction()"
+                [disabled]="disabledSaveButton(item)"
+                style="font-weight: bold;min-width: 140px; max-width: 200px; margin: 0 10px;">
+          {{ getPositiveWfActionKey(item?.stateType) | translate }}
+        </button>
+        <button *ngIf="hasWfNegativePermission()" color="second" mat-raised-button (click)="doCancelRejectAction()"
+                [disabled]="disabledSaveButton(item)"
+                style="font-weight: bold;min-width: 140px ;max-width: 200px;">
+          {{ getNegativeWfActionKey(item?.stateType) | translate }}
+        </button>
+
+        <button *ngIf="pageInfo.hideExtractButton === false && itemId > 0 && editable"  color="primary" mat-raised-button (click)="doExtraAction()"
+                style="font-weight: bold;min-width: 140px; max-width: 200px; margin: 0 10px;">
+          {{ pageInfo.labelsSection + "." + "EXTRA_BUTTON_NAME" | translate }}
+        </button>
+
+      </div>
+    </div>
+    <div fxLayout="column" fxFlex="49"></div>
+
+  </div>
+  <ng-container *ngIf="!pageInfo.hideAuditLog">
+    <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start start" fxLayoutAlign.lt-sm="center start"
+         class="main-form-canvas" style="padding-top: 4vh; padding-bottom: 5vh; width: 100%">
+      <div fxLayout="column" fxFlex="95">
+        <app-audit-log [pageInfo]="pageInfo" [fields]="fields"></app-audit-log>
+      </div>
+      <!--  ></app-audit-log>-->
+    </div>
+  </ng-container>
+</div>
+
+

package/src/lib/components/base-form/base-form.component.spec.ts

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

package/src/lib/components/base-form/base-form.component.ts

@@ -0,0 +1,305 @@
+import {Component, EventEmitter, Inject, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core';
+import {FieldInfo, Filter, FilterRequest, NEW, PageInfo, SAVE_AND_COMPLETE, SnackMessage} from "../../base-model";
+import {FieldMessage} from "../../base-model/api-response";
+import {TranslateModule} from "@ngx-translate/core";
+import {BackendService} from "../../services";
+import {FormGroup} from "@angular/forms";
+import {Location, NgIf} from "@angular/common";
+import {FlexLayoutModule} from "@angular/flex-layout";
+import {MatButton, MatButtonModule} from "@angular/material/button";
+import {MatIconModule} from "@angular/material/icon";
+import {TitleBarComponent} from "../title-bar/title-bar.component";
+import {BaseFormCanvasComponent} from "../base-form-canvas/base-form-canvas.component";
+import {DoActionRequest, SAVE} from "../../base-model/do-action-request";
+import {ActionCommentComponent} from "../rejection-comment/action-comment.component";
+import {MatDialog} from "@angular/material/dialog";
+import {BaseUtils, getNegativeWfActionKey, getPositiveWfActionKey, getWfActionId} from "../../utils/base-utils";
+import {ActivatedRoute, Router} from "@angular/router";
+import {AuditLogComponent} from "../audit-log-list/audit-log.component";
+import {Directionality} from "@angular/cdk/bidi";
+
+@Component({
+    selector: 'app-base-form',
+    standalone: true,
+  imports: [
+    FlexLayoutModule,
+    TitleBarComponent,
+    BaseFormCanvasComponent,
+    MatButtonModule,
+    TranslateModule,
+    NgIf,
+    MatIconModule,
+    MatButton,
+    AuditLogComponent
+  ],
+    templateUrl: './base-form.component.html',
+    styleUrl: './base-form.component.scss'
+})
+export class BaseFormComponent extends BaseUtils implements OnInit, OnChanges {
+
+  @Input()
+  override pageInfo!: PageInfo;
+
+  @Input()// @ts-ignore
+  fields: FieldInfo[] = [];
+
+  @Input()// @ts-ignore
+  errors: FieldMessage[] = [];
+
+  @Input()
+  editable: boolean = false;
+
+  @Input()
+  itemId: number;
+
+  @Output()
+  actionResultEmitter: EventEmitter<any> = new EventEmitter<any>();
+
+  @Output()
+  formUpdated: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();
+
+  @Output()
+  itemLoaded: EventEmitter<any> = new EventEmitter<any>();
+
+  @Output()
+  extraAction: EventEmitter<any> = new EventEmitter<any>();
+
+  item : any = {};
+  isLoaded : boolean = false;
+
+  @Output()
+  hyperTextEvent: EventEmitter<boolean> = new EventEmitter();
+
+  currentDirection: 'ltr' | 'rtl';
+  isSaveDisabled: boolean = true;
+  isRejectDisabled: boolean = true;
+
+  @Input()
+  hideBackButton: boolean = true;
+  protected readonly SAVE = SAVE;
+  private isPending: boolean;
+
+    constructor(public dialog: MatDialog,
+                private activatedRoute: ActivatedRoute,
+                private router:Router,
+                private directionality: Directionality,
+                private location:Location,
+                @Inject('securityManager') private securityManager: any,
+                public backendService: BackendService) {
+      super();
+    }
+
+    ngOnInit(): void {
+      this.currentDirection = this.directionality.value;
+      this.directionality.change.subscribe((value) => {
+        this.currentDirection = value;
+      })
+
+      // console.log('editable', this.editable)
+      this.securityManager.loadPermissions().subscribe(x => {
+        console.log("before edit", this.editable);
+        this.loadItem();
+        console.log("after edit", this.editable);
+      });
+    }
+
+    ngOnChanges({item, errors, fields}: SimpleChanges): void {
+    }
+
+    isValid() {
+        return this.backendService.parentForm?.valid;
+    }
+
+    isMatchHeight() {
+        return this.pageInfo.pageHeight === 'match';
+    }
+
+  private loadItem() {
+    this.editable = false;
+    this.isPending = this.backendService.decrypt(this.activatedRoute.snapshot.queryParams['mode']) === 'pending';
+
+    if (this.activatedRoute.snapshot.queryParams['token'] && this.activatedRoute.snapshot.queryParams['mode']) {
+      this.itemId = this.backendService.decrypt(this.activatedRoute.snapshot.queryParams['token']);
+    } else {
+      // console.log(' ****** ****** ****** ****** error in url ')
+    }
+    if (this.itemId > 0) {
+      const filterRequest = new FilterRequest;
+      filterRequest.columns = this.fields.filter(c => c.type !== 'spacer').map(c => c.property);
+      filterRequest.pendingPage = this.isPending;
+      filterRequest.filters = [];
+      filterRequest.filters.push(new Filter({
+        key: 0,
+        fieldType: 'Long',
+        fieldName: 'id',
+        valueObject: this.itemId,
+        filterType: 'FILED_FILTER',
+        operator: 'EQUALS'
+      }));
+      ///audit-log
+      this.backendService.getItemAuditLog(filterRequest, this.pageInfo!.apiUri).subscribe(resp => {
+        // console.log('resp', resp);
+      });
+      this.backendService.getItemsByFilter(filterRequest, this.pageInfo!.apiUri).subscribe(resp => {
+        if (resp?.valid && resp.body?.length >= 0) {
+          this.item = resp.body[0];
+          this.editable = (!this.pageInfo.draftSupported || !this.isPending) && this.securityManager.hasPagePermission(this.pageInfo.id, 'EDIT')
+            && (!this.pageInfo.draftSupported ||this.item['stateType'] === 'COMPLETED' );
+          this.itemLoaded.emit(this.item);
+          this.isLoaded = true;
+        }
+      });
+    } else {
+      this.editable = this.securityManager.hasPagePermission(this.pageInfo.id, 'EDIT');
+      this.item = {};
+      this.itemLoaded.emit(this.item);
+      this.isLoaded = true;
+    }
+
+  }
+
+  buildDoActionSubject(): any {
+    const newVar = this.editable ? Object.assign(this.item, this.backendService.parentForm.value) : this.item;
+    if (this.itemId <= 0 && this.editable ) {
+      //TODO this is like a hack and must be handled from backend
+      newVar['stateType'] = 'NEW';
+    }
+    this.fields.forEach(field => {
+      if (field.flattenBySubAttribute){
+        newVar[field.property] = newVar[field.property][field.flattenBySubAttribute]
+      }
+    })
+    if (!this.pageInfo.draftSupported){
+      newVar['status'] = true;
+    }
+    return newVar;
+  }
+
+
+  doSaveApproveAction() {
+    let actionId = getWfActionId(this.item.stateType);
+    if (this.itemId <= 0 && this.editable ) {
+      actionId = NEW
+    }
+    if (!this.pageInfo.draftSupported) {
+      actionId = SAVE_AND_COMPLETE
+    }
+    if (this.editable && this.backendService.parentForm.valid !== true) {
+      this.backendService.topPanelMessage$.next(new SnackMessage('INVALID_INPUT_FORM', true, 'error'));
+      return;
+    }
+    const request = new DoActionRequest();
+    request.actionId = actionId;
+    request.subject = this.buildDoActionSubject();
+
+    const dialogRef = this.dialog.open(ActionCommentComponent, {
+      data: {label: 'save', isTermination: false},
+      width: '600px',
+      height: 'auto',
+      direction:  this.currentDirection
+    });
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        request.comment = result.comment;
+        this.backendService.doActionWithAttachments(request, [], this.pageInfo!).subscribe(resp => {
+          console.log('step',actionId);
+          this.actionResultEmitter.emit({ valid: resp.valid, actionId: actionId });
+          if (resp.valid ) {
+            let message = 'approve_successfully';
+            switch (actionId) {
+              case 1:
+                message = 'saved_successfully';
+                break;
+              case 2:
+                message = 'updated_successfully';
+                break;
+              default:
+                message = 'approve_successfully';
+            }
+            this.backendService.topPanelMessage$.next(new SnackMessage(message, true, 'success'));
+            this.backToParent();
+          }
+          else{
+            request.subject['stateType'] = null;
+            if (resp.message[0].errorMessage.toLowerCase().includes('duplic'))
+            this.backendService.topPanelMessage$.next(new SnackMessage(this.pageInfo.labelsSection + '.' + resp.message[0].errorCode, true, 'error'));
+          }
+        });
+      }
+    });
+  }
+
+  backToParent() {
+      const idIdx = this.router.url.lastIndexOf('/');
+      this.router.navigateByUrl(this.router.url.substring(0, idIdx));
+  }
+
+
+  getTitle() {
+        return `${this.pageInfo.labelsSection}.${this.pageInfo.id}` ;
+    }
+
+    updateForm($event: FormGroup) {
+        this.backendService.parentForm = $event;
+        this.formUpdated.emit($event);
+    }
+
+  doCancelRejectAction() {
+    if (!this.editable){
+      let actionId = 3;
+      // console.log('actionId',actionId);
+      const request = new DoActionRequest();
+      request.actionId = actionId;
+      request.subject = this.buildDoActionSubject();
+
+      const dialogRef = this.dialog.open(ActionCommentComponent, {
+        data: {label: 'reject', acceptActionLabel: 'accept', rejectActionLabel: 'return'},
+        width: '600px',
+        height: 'auto',
+        direction: this.currentDirection
+      });
+      dialogRef.afterClosed().subscribe(result => {
+        if (result) {
+          request.comment = result.comment;
+          this.backendService.doActionWithAttachments(request, [], this.pageInfo!).subscribe(resp => {
+            this.actionResultEmitter.emit({ valid: resp.valid, actionId: actionId });
+            if (resp.valid) {
+              this.backendService.topPanelMessage$.next(new SnackMessage('successful_reject_message', true, 'success'));
+              this.backToParent();
+            }
+          });
+        }
+      });
+    }
+    else {
+      this.location.back()
+    }
+    }
+
+  hasWfPermission() {
+    return  (this.securityManager.hasPagePermission(this.pageInfo.id, 'EDIT')
+    || this.securityManager.hasPagePermission(this.pageInfo.id, 'COMPLETE')
+    || this.securityManager.hasPagePermission(this.pageInfo.id, 'TERMINATE'))
+  }
+
+  protected readonly getPositiveWfActionKey = getPositiveWfActionKey;
+  protected readonly getNegativeWfActionKey = getNegativeWfActionKey;
+
+  hasWfPositivePermission() {
+    return (!this.editable && this.securityManager.hasPagePermission(this.pageInfo.id, 'COMPLETE')) ||
+      (this.editable && this.securityManager.hasPagePermission(this.pageInfo.id, 'EDIT'))
+  }
+
+  hasWfNegativePermission() {
+    return (!this.editable && this.securityManager.hasPagePermission(this.pageInfo.id, 'TERMINATE')) ||
+      (this.editable && this.securityManager.hasPagePermission(this.pageInfo.id, 'EDIT'))
+  }
+
+  doExtraAction() {
+    this.extraAction.emit()
+  }
+  disabledSaveButton(element) {
+    return (!this.isPending && element.stateType == 'PENDING') && this.pageInfo.draftSupported ;
+  }
+
+}

package/src/lib/components/base-form-canvas/base-form-canvas.component.css

@@ -0,0 +1,22 @@
+.chipList {
+  display: inline-block !important;
+}
+
+
+
+::ng-deep .mdc-floating-label--required:not(.mdc-floating-label--hide-required-marker)::after {
+  color: red !important; /* asterisk */
+  font-size: 20px;
+  margin-left: 2px;
+
+}
+
+
+.arrow_drop_down_autocomplete {
+  position: absolute;
+  right: 0;
+  top: 7px;
+  color: rgba(0, 0, 0, 0.54);
+  cursor: pointer;
+  font-size: 28px !important;
+}