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

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

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;
+  }
+}