@unifylib/ui-lib 1.0.3 → 1.1.3

package/src/lib/base-model/workflow/workflow-steps.model.ts

@@ -1,9 +1,9 @@
-
-export class WorkflowStep {
-    stepId?: number;
-    stepName: string='';
-    stepNameAr: string='';
-    isObsoleted: boolean=false;
-    description: string='';
-
-}
+
+export class WorkflowStep {
+    stepId?: number;
+    stepName: string='';
+    stepNameAr: string='';
+    isObsoleted: boolean=false;
+    description: string='';
+
+}

package/src/lib/base-model/workflow/workflow.model.ts

@@ -1,52 +1,52 @@
-import {WorkflowStep} from "./workflow-steps.model";
-
-export class Workflow {
-    id: number;
-    corporateWorkflowId: number;
-    corporateId : number;
-    workflowProcessId: number;
-    workflowSteps : WorkflowStep[];
-    rejectionStrategy: 'TERMINATE' | 'STEP_BACK' | 'CREATE_STEP';
-    processName: string;
-
-    constructor(workflow: Workflow) {
-        this.id= workflow.id;
-        this.corporateWorkflowId= workflow.corporateWorkflowId;
-        this.corporateId = workflow.corporateId;
-        this.workflowProcessId = workflow.workflowProcessId;
-        this.workflowSteps = workflow.workflowSteps === undefined ? [] : workflow.workflowSteps;
-        this.processName = PROCESS_NAMES_MAP[this.workflowProcessId];
-        this.rejectionStrategy = workflow.rejectionStrategy;
-    }
-}
-export const PROCESS_NAMES_MAP: Record<number, string> = {
-    1: 'Outward Invoices',
-    2: 'Inward Invoices',
-    5: 'Customers Management',
-    6: 'Vendors Management',
-    8: 'Payment',
-    13: 'Users Management',
-    14: 'Groups Management',
-    19: 'Departments Management',
-    22: 'Credit Notes',
-    23: 'Debit Notes',
-    30: 'Store Management',
-    31: 'Branch Management ',
-    32: 'Division Management',
-    33: 'Product Management',
-    34: 'Import Stock',
-    35: 'Export Stock',
-    36: 'Stock Damage',
-    51: 'Internal Invoices',
-    60: 'Purchase Request',
-    61: 'Purchase Order',
-    62: 'Request for Quotation',
-    63: 'Proposal Evaluation',
-    64: 'Proposal By Vendor'
-};
-
-export const SEQ_PROCESS_NAMES_MAP: Record<number, string> = {
-    1:  'Outward Invoices / Invoice Number',
-    100:  'Outward Invoices / ePayment Number',
-    2:  'Inward Invoices'
-};
+import {WorkflowStep} from "./workflow-steps.model";
+
+export class Workflow {
+    id: number;
+    corporateWorkflowId: number;
+    corporateId : number;
+    workflowProcessId: number;
+    workflowSteps : WorkflowStep[];
+    rejectionStrategy: 'TERMINATE' | 'STEP_BACK' | 'CREATE_STEP';
+    processName: string;
+
+    constructor(workflow: Workflow) {
+        this.id= workflow.id;
+        this.corporateWorkflowId= workflow.corporateWorkflowId;
+        this.corporateId = workflow.corporateId;
+        this.workflowProcessId = workflow.workflowProcessId;
+        this.workflowSteps = workflow.workflowSteps === undefined ? [] : workflow.workflowSteps;
+        this.processName = PROCESS_NAMES_MAP[this.workflowProcessId];
+        this.rejectionStrategy = workflow.rejectionStrategy;
+    }
+}
+export const PROCESS_NAMES_MAP: Record<number, string> = {
+    1: 'Outward Invoices',
+    2: 'Inward Invoices',
+    5: 'Customers Management',
+    6: 'Vendors Management',
+    8: 'Payment',
+    13: 'Users Management',
+    14: 'Groups Management',
+    19: 'Departments Management',
+    22: 'Credit Notes',
+    23: 'Debit Notes',
+    30: 'Store Management',
+    31: 'Branch Management ',
+    32: 'Division Management',
+    33: 'Product Management',
+    34: 'Import Stock',
+    35: 'Export Stock',
+    36: 'Stock Damage',
+    51: 'Internal Invoices',
+    60: 'Purchase Request',
+    61: 'Purchase Order',
+    62: 'Request for Quotation',
+    63: 'Proposal Evaluation',
+    64: 'Proposal By Vendor'
+};
+
+export const SEQ_PROCESS_NAMES_MAP: Record<number, string> = {
+    1:  'Outward Invoices / Invoice Number',
+    100:  'Outward Invoices / ePayment Number',
+    2:  'Inward Invoices'
+};

package/src/lib/components/action-comment/action-comment.component.css

@@ -0,0 +1,52 @@
+
+.dialog-title {
+  font-size: 20px;
+  font-weight: 600;
+  padding: 0 16px;
+}
+
+.dialog-subtitle {
+  color: #666;
+  padding: 0 20px;
+}
+
+.textarea-label {
+  font-weight: 600;
+  padding: 5px 20px;
+  margin: 0;
+  color: black;
+}
+
+.info-text {
+  color: #888;
+  font-family: Lusail, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 120%;
+}
+
+.info-box {
+  display: flex;
+  font-size: 12px;
+
+  mat-icon {
+    font-size: 18px;
+    color: var(--primary-color-3nd);
+  }
+}
+
+.footer-actions {
+  margin-top: 0px;
+}
+
+.cancel-btn {
+  width: 121px !important;
+}
+.warn-btn {
+  width: 171px !important;
+}
+
+.content-section {
+  padding: 0 20px;
+}

package/src/lib/components/action-comment/action-comment.component.html

@@ -0,0 +1,47 @@
+<div class="dialog-container" [dir]="currentDirection">
+
+  <h2 mat-dialog-title class="dialog-title" >
+    {{ titleKey | translate}} {{itemName}}
+  </h2>
+
+  <p class="dialog-subtitle">
+    {{ subtitleKey | translate }}
+  </p>
+
+
+  <p class="textarea-label">
+    {{ reasonLabelKey | translate }}
+  </p>
+
+
+  <mat-dialog-content class="content-section">
+    <mat-form-field appearance="outline" class="w-100">
+      <textarea
+        matInput
+        [(ngModel)]="comment"
+        placeholder="{{ placeholderKey | translate }}"
+        cdkTextareaAutosize
+        cdkAutosizeMinRows="4"
+        cdkAutosizeMaxRows="5"
+      ></textarea>
+    </mat-form-field>
+
+
+    <div class="info-box">
+      <mat-icon>info</mat-icon>
+      <span class="info-text">
+        {{ warningKey | translate }}
+      </span>
+    </div>
+  </mat-dialog-content>
+
+  <mat-dialog-actions align="end" class="footer-actions">
+    <button mat-stroked-button class="btn-none-background-primary cancel-btn" (click)="cancel()">
+      {{ cancelKey | translate }}
+    </button>
+
+    <button  mat-flat-button class="btn-background-primary warn-btn" (click)="commentAndClose()" [disabled]="!comment">
+      {{ actionKey | translate }}
+    </button>
+  </mat-dialog-actions>
+</div>

package/src/lib/components/{rejection-comment → action-comment}/action-comment.component.spec.ts

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

package/src/lib/components/{rejection-comment → action-comment}/action-comment.component.ts

@@ -1,86 +1,102 @@
-import {Component, HostListener, Inject, OnInit} from '@angular/core';
-import {
-  MAT_DIALOG_DATA,
-  MatDialogActions,
-  MatDialogContent,
-  MatDialogRef,
-  MatDialogTitle
-} from "@angular/material/dialog";
-import {MatFormField} from "@angular/material/form-field";
-import {FormsModule} from "@angular/forms";
-import {CdkTextareaAutosize} from "@angular/cdk/text-field";
-import {TranslateModule} from "@ngx-translate/core";
-import {MatCheckbox} from "@angular/material/checkbox";
-import {MatButton} from "@angular/material/button";
-import {MatInput} from "@angular/material/input";
-import {NgIf} from "@angular/common";
-import {MatIcon} from "@angular/material/icon";
-
-@Component({
-  selector: 'app-action-comment',
-  standalone: true,
-  imports: [
-    MatDialogTitle,
-    MatFormField,
-    MatDialogContent,
-    FormsModule,
-    CdkTextareaAutosize,
-    TranslateModule,
-    MatCheckbox,
-    MatDialogActions,
-    MatButton,
-    MatInput,
-    NgIf,
-    MatIcon
-  ],
-  templateUrl: './action-comment.component.html',
-  styleUrl: './action-comment.component.css'
-})
-export class ActionCommentComponent implements OnInit {
-  actionLabel : string =''
-  isTermination : boolean=false;
-  comment: string = '';
-  external: boolean = false;
-  signingRequired: boolean = false;
-  tokenReference: string = "";
-  otp: string = "";
-  isSubmitted: boolean = false;
-  showExternalBox = true;
-  warningMsg = false;
-  constructor(public dialogRef: MatDialogRef<ActionCommentComponent>,
-              @Inject(MAT_DIALOG_DATA) public data: any) {
-    dialogRef.disableClose = true;
-  }
-  @HostListener('window:keyup.esc') onKeyUp() {
-    this.dialogRef.close();
-  }
-  ngOnInit(): void {
-    this.actionLabel = this.data.label;
-    this.isTermination = this.data.isTermination ;
-    this.signingRequired = this.data.signingRequired;
-    this.tokenReference = this.data.tokenReference;
-    this.warningMsg = this.data.warningMsg || false;
-  }
-
-
-  commentAndClose() {
-    this.isSubmitted = true;
-    if (this.signingRequired && !this.otp) return false;//validation
-    let obj:{[key: string]:any} = {
-      comment: this.comment,
-      shareExternal : this.external
-    };
-    //
-    if(this.signingRequired) obj["token"] = this.otp;
-    if(this.signingRequired) obj["tokenReference"] = this.tokenReference;
-    //
-    this.dialogRef.close(obj);
-
-    return "";
-  }
-
-  cancel() {
-    this.dialogRef.close();
-  }
-
-}
+import {Component, HostListener, Inject, Input, OnInit} from '@angular/core';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle
+} from "@angular/material/dialog";
+import {MatFormField} from "@angular/material/form-field";
+import {FormsModule} from "@angular/forms";
+import {CdkTextareaAutosize} from "@angular/cdk/text-field";
+import {TranslateModule} from "@ngx-translate/core";
+import {MatButton} from "@angular/material/button";
+import {MatInput} from "@angular/material/input";
+import {MatIcon} from "@angular/material/icon";
+
+@Component({
+  selector: 'app-action-comment',
+  standalone: true,
+  imports: [
+    MatDialogTitle,
+    MatFormField,
+    MatDialogContent,
+    FormsModule,
+    CdkTextareaAutosize,
+    TranslateModule,
+    MatDialogActions,
+    MatButton,
+    MatInput,
+    MatIcon
+  ],
+  templateUrl: './action-comment.component.html',
+  styleUrl: './action-comment.component.css'
+})
+export class ActionCommentComponent implements OnInit {
+  itemName: string = '';
+  titleKey: string = '';
+  subtitleKey: string = '';
+  reasonLabelKey: string = '';
+  placeholderKey: string = '';
+  warningKey: string = '';
+  cancelKey: string = '';
+  actionKey: string = '';
+  currentDirection: 'ltr' | 'rtl' = 'ltr';
+
+  actionLabel : string =''
+  isTermination : boolean=false;
+  comment: string = '';
+  external: boolean = false;
+  signingRequired: boolean = false;
+  tokenReference: string = "";
+  otp: string = "";
+  isSubmitted: boolean = false;
+  warningMsg = false;
+
+  constructor(public dialogRef: MatDialogRef<ActionCommentComponent>,
+              @Inject(MAT_DIALOG_DATA) public data: any) {
+    dialogRef.disableClose = true;
+  }
+  @HostListener('window:keyup.esc') onKeyUp() {
+    this.dialogRef.close();
+  }
+  ngOnInit(): void {
+    this.actionLabel = this.data.label;
+    this.isTermination = this.data.isTermination ;
+    this.signingRequired = this.data.signingRequired;
+    this.tokenReference = this.data.tokenReference;
+    this.warningMsg = this.data.warningMsg || false;
+
+    this.itemName = this.data.deviceName;
+    this.titleKey = this.data.titleKey;
+    this.subtitleKey = this.data.subtitleKey;
+    this.reasonLabelKey = this.data.reasonLabelKey;
+    this.placeholderKey = this.data.placeholderKey;
+    this.warningKey = this.data.warningKey;
+    this.cancelKey = this.data.cancelKey;
+    this.actionKey = this.data.actionKey;
+    this.currentDirection  = this.data.direction;
+  }
+
+
+  commentAndClose() {
+    this.isSubmitted = true;
+    if (this.signingRequired && !this.otp) return false;
+    let obj:{[key: string]:any} = {
+      comment: this.comment,
+      shareExternal : this.external
+    };
+    //
+    if(this.signingRequired) obj["token"] = this.otp;
+    if(this.signingRequired) obj["tokenReference"] = this.tokenReference;
+    //
+    this.dialogRef.close(obj);
+
+    return "";
+  }
+
+  cancel() {
+    this.dialogRef.close();
+  }
+
+}

package/src/lib/components/action-confirmation/action-confirmation.component.css

@@ -1,34 +1,46 @@
-.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;
-}
+.confirm-dialog {
+  padding: 32px;
+  min-width: 500px;
+  box-sizing: border-box;
+}
+
+.header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 700;
+  color: #222;
+}
+
+.close-btn mat-icon {
+  font-size: 24px;
+  color: #333;
+}
+
+.message {
+  margin-top: 20px;
+  font-size: 16px;
+  color: #333;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+  margin-top: 40px;
+}
+
+.btn-cancel{
+  width: 121px !important;
+  margin: 0 !important;
+}
+.btn-confirm{
+  width: 171px !important;
+  margin: 0 !important;
+}
+

package/src/lib/components/action-confirmation/action-confirmation.component.html

@@ -1,18 +1,32 @@
-<mat-dialog-content class="mat-typography" >
-  <p mat-dialog-title class="invoice-note-text invoice-section m-0" [dir]="direction">
-    {{ warningMsg | translate }}
-  </p>
-</mat-dialog-content>
-
-<mat-dialog-actions align="center" class="modal-footer">
-  <button mat-stroked-button color = 'warn'
-          (click)="cancel()" id="rejectActionLabel">
-    {{ rejectActionLabel | translate }}
-  </button>
-  <button mat-stroked-button color='primary'
-          (click)="commentAndClose()" id="acceptActionLabel">
-    {{ acceptActionLabel | translate }}
-  </button>
-
-</mat-dialog-actions>
-
+<div class="confirm-dialog" [dir]="currentDirection">
+
+  <div class="header-row">
+    <h2 class="title">{{ titleMsg | translate }}</h2>
+    <button mat-icon-button class="close-btn" (click)="cancel()">
+      <mat-icon>close</mat-icon>
+    </button>
+  </div>
+
+  <p class="message">
+    {{ subMsg | translate }}
+  </p>
+
+  <div class="actions">
+    <button
+      mat-stroked-button
+      class="btn-none-background-primary btn-cancel"
+      (click)="cancel()"
+      id="rejectActionLabel">
+      {{ rejectActionLabel | translate }}
+    </button>
+
+    <button
+      mat-flat-button
+      class="btn-background-primary btn-confirm"
+      (click)="commentAndClose()"
+      id="acceptActionLabel">
+      {{ acceptActionLabel | translate }}
+    </button>
+  </div>
+
+</div>

package/src/lib/components/action-confirmation/action-confirmation.component.spec.ts

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