External Identifier as component with copy to clipboard (#1774)

Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>

src/app/shared/account-number/account-number.component.html

@@ -0,0 +1,5 @@
+<span (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()">
+  <span class="m-l-5" *ngIf="displayL && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="Copy Account Number"></fa-icon></b></span>
+  <span class="m-l-5">{{ accountNo }}</span>
+  <span class="m-l-3" *ngIf="displayR && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="Copy Account Number"></fa-icon></b></span>
+</span>

src/app/shared/account-number/account-number.component.spec.ts

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

src/app/shared/account-number/account-number.component.ts

@@ -0,0 +1,35 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Clipboard } from '@angular/cdk/clipboard';
+
+@Component({
+  selector: 'mifosx-account-number',
+  templateUrl: './account-number.component.html',
+  styleUrls: ['./account-number.component.scss']
+})
+export class AccountNumberComponent implements OnInit {
+  @Input() accountNo: string;
+  @Input() display = 'right';
+
+  iconVisible = false;
+  displayL = false;
+  displayR = true;
+
+  constructor(private clipboard: Clipboard) { }
+
+  ngOnInit(): void {
+    this.displayL = (this.display === 'left');
+    this.displayR = (this.display === 'right');
+  }
+
+  copyValue(): void {
+    this.clipboard.copy(this.accountNo);
+  }
+
+  mouseEnter() {
+    this.iconVisible = true;
+  }
+
+  mouseLeave() {
+    this.iconVisible = false;
+  }
+}

src/app/shared/entity-name/entity-name.component.html

@@ -0,0 +1,5 @@
+<span (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()">
+  <span class="m-l-5" *ngIf="displayL && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="Copy Account Number"></fa-icon></b></span>
+  <span class="m-l-5"><b>{{ entityName }}</b></span>
+  <span class="m-l-3" *ngIf="displayR && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="Copy Account Number"></fa-icon></b></span>
+</span>

src/app/shared/entity-name/entity-name.component.spec.ts

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

src/app/shared/entity-name/entity-name.component.ts

@@ -0,0 +1,36 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Clipboard } from '@angular/cdk/clipboard';
+
+@Component({
+  selector: 'mifosx-entity-name',
+  templateUrl: './entity-name.component.html',
+  styleUrls: ['./entity-name.component.scss']
+})
+export class EntityNameComponent implements OnInit {
+
+  @Input() entityName: string;
+  @Input() display = 'right';
+
+  iconVisible = false;
+  displayL = false;
+  displayR = true;
+
+  constructor(private clipboard: Clipboard) { }
+
+  ngOnInit(): void {
+    this.displayL = (this.display === 'left');
+    this.displayR = (this.display === 'right');
+  }
+
+  copyValue(): void {
+    this.clipboard.copy(this.entityName);
+  }
+
+  mouseEnter() {
+    this.iconVisible = true;
+  }
+
+  mouseLeave() {
+    this.iconVisible = false;
+  }
+}

src/app/shared/external-identifier/external-identifier.component.html

@@ -1,5 +1,8 @@
-<div>
-  <span matTooltip="{{externalId}}" (mouseenter)="$event.stopImmediatePropagation()" (mouseleave)="$event.stopImmediatePropagation()" #tooltip="matTooltip"></span>
-  <span *ngIf="isLongValue()" (click)="tooltip.toggle()"><fa-icon icon="eye" size="sm" [title]="externalId"></fa-icon></span>
-  {{ externalId | externalIdentifier }}
-</div>
+<span (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()">
+  <span (click)="copyValue()" *ngIf="displayL && iconVisible"><fa-icon icon="copy" size="sm" title="Copy External Id"></fa-icon></span>
+  <span class="m-l-3" *ngIf="displayL && !completed && iconVisible && isLongValue()"><fa-icon icon="eye" size="sm" [title]="externalId"></fa-icon></span>
+  <span class="m-l-5" *ngIf="!completed">{{ externalId | externalIdentifier }}</span>
+  <span class="m-l-5" *ngIf="completed">{{ externalId }}</span>
+  <span class="m-l-5" *ngIf="displayR && !completed && iconVisible && isLongValue()"><fa-icon icon="eye" size="sm" [title]="externalId"></fa-icon></span>
+  <span class="m-l-3" (click)="copyValue()" *ngIf="displayR && iconVisible"><fa-icon icon="copy" size="sm" title="Copy External Id"></fa-icon></span>
+</span>

src/app/shared/external-identifier/external-identifier.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { Clipboard } from '@angular/cdk/clipboard';
 
 @Component({
   selector: 'mifosx-external-identifier',
@@ -7,10 +8,18 @@ import { Component, Input, OnInit } from '@angular/core';
 })
 export class ExternalIdentifierComponent implements OnInit {
   @Input() externalId: string;
+  @Input() completed = false;
+  @Input() display = 'right';
 
-  constructor() { }
+  iconVisible = false;
+  displayL = false;
+  displayR = true;
+
+  constructor(private clipboard: Clipboard) { }
 
   ngOnInit(): void {
+    this.displayL = (this.display === 'left');
+    this.displayR = (this.display === 'right');
   }
 
   isLongValue(): boolean {
@@ -20,4 +29,15 @@ export class ExternalIdentifierComponent implements OnInit {
     return (this.externalId.length > 15);
   }
 
+  copyValue(): void {
+    this.clipboard.copy(this.externalId);
+  }
+
+  mouseEnter() {
+    this.iconVisible = true;
+  }
+
+  mouseLeave() {
+    this.iconVisible = false;
+  }
 }

src/app/shared/icons.module.ts

@@ -28,6 +28,7 @@ import {
   faCog,
   faCogs,
   faCommentAlt,
+  faCopy,
   faDollarSign,
   faEdit,
   faEnvelope,
@@ -141,6 +142,7 @@ export class IconsModule {
       faCog,
       faCogs,
       faCommentAlt,
+      faCopy,
       faDollarSign,
       faEdit,
       faEnvelope,

src/app/shared/shared.module.ts

@@ -39,6 +39,8 @@ import { SvgIconComponent } from './svg-icon/svg-icon.component';
 import { NgxMatDatetimePickerModule, NgxMatNativeDateModule } from '@angular-material-components/datetime-picker';
 import { ViewJournalEntryComponent } from './accounting/view-journal-entry/view-journal-entry.component';
 import { ViewJournalEntryTransactionComponent } from './accounting/view-journal-entry-transaction/view-journal-entry-transaction.component';
+import { AccountNumberComponent } from './account-number/account-number.component';
+import { EntityNameComponent } from './entity-name/entity-name.component';
 
 /**
  * Shared Module
@@ -84,7 +86,9 @@ import { ViewJournalEntryTransactionComponent } from './accounting/view-journal-
     DatatableMultiRowComponent,
     SvgIconComponent,
     ViewJournalEntryComponent,
-    ViewJournalEntryTransactionComponent
+    ViewJournalEntryTransactionComponent,
+    AccountNumberComponent,
+    EntityNameComponent
   ],
   exports: [
     FileUploadComponent,
@@ -103,12 +107,14 @@ import { ViewJournalEntryTransactionComponent } from './accounting/view-journal-
     TranslateModule,
     TenantSelectorComponent,
     ExternalIdentifierComponent,
+    AccountNumberComponent,
     EntityNotesTabComponent,
     EntityDocumentsTabComponent,
     EntityDatatableTabComponent,
     ViewJournalEntryComponent,
     ViewJournalEntryTransactionComponent,
-    SvgIconComponent
+    SvgIconComponent,
+    EntityNameComponent
   ]
 })
 export class SharedModule { }