From: Volker Theile <vtheile@suse.com>
Date: Fri, 27 Apr 2018 13:50:01 +0000 (+0200)
Subject: mgr/dashboard: Add Copy2ClipboardButtonDirective
X-Git-Tag: v13.1.0~20^2~3
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=25a671b7c9cb34d15d862db80105b34f0869dba0;p=ceph.git

mgr/dashboard: Add Copy2ClipboardButtonDirective

Signed-off-by: Volker Theile <vtheile@suse.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.spec.ts
new file mode 100644
index 000000000000..e50fd86332c4
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.spec.ts
@@ -0,0 +1,8 @@
+import { Copy2ClipboardButtonDirective } from './copy2clipboard-button.directive';
+
+describe('Copy2clipboardButtonDirective', () => {
+  it('should create an instance', () => {
+    const directive = new Copy2ClipboardButtonDirective(null, null, null);
+    expect(directive).toBeTruthy();
+  });
+});
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.ts
new file mode 100644
index 000000000000..7421a3c35975
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.ts
@@ -0,0 +1,46 @@
+import { Directive, ElementRef, HostListener, Input, OnInit, Renderer2 } from '@angular/core';
+
+import { ToastsManager } from 'ng2-toastr';
+
+@Directive({
+  selector: '[cdCopy2ClipboardButton]'
+})
+export class Copy2ClipboardButtonDirective implements OnInit {
+
+  @Input('cdCopy2ClipboardButton') private cdCopy2ClipboardButton: string;
+
+  constructor(private elementRef: ElementRef,
+              private renderer: Renderer2,
+              private toastr: ToastsManager) {}
+
+  ngOnInit() {
+    const iElement = this.renderer.createElement('i');
+    this.renderer.addClass(iElement, 'icon-prepend');
+    this.renderer.addClass(iElement, 'fa');
+    this.renderer.addClass(iElement, 'fa-clipboard');
+    this.renderer.appendChild(this.elementRef.nativeElement, iElement);
+  }
+
+  private getInputElement() {
+    return document.getElementById(this.cdCopy2ClipboardButton) as HTMLInputElement;
+  }
+
+  @HostListener('click')
+  onClick() {
+    try {
+      // Create the input to hold our text.
+      const tmpInputElement = document.createElement('input');
+      tmpInputElement.value = this.getInputElement().value;
+      document.body.appendChild(tmpInputElement);
+      // Copy text to clipboard.
+      tmpInputElement.select();
+      document.execCommand('copy');
+      // Finally remove the element.
+      document.body.removeChild(tmpInputElement);
+
+      this.toastr.success('Copied text to the clipboard successfully.');
+    } catch (err) {
+      this.toastr.error('Failed to copy text to the clipboard.');
+    }
+  }
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/shared.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/shared.module.ts
index 04354179a1ef..d1ef16495797 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/shared.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/shared.module.ts
@@ -5,6 +5,7 @@ import { ApiModule } from './api/api.module';
 import { ComponentsModule } from './components/components.module';
 import { DataTableModule } from './datatable/datatable.module';
 import { AutofocusDirective } from './directives/autofocus.directive';
+import { Copy2ClipboardButtonDirective } from './directives/copy2clipboard-button.directive';
 import { DimlessBinaryDirective } from './directives/dimless-binary.directive';
 import { PasswordButtonDirective } from './directives/password-button.directive';
 import { PipesModule } from './pipes/pipes.module';
@@ -25,6 +26,7 @@ import { ServicesModule } from './services/services.module';
   declarations: [
     PasswordButtonDirective,
     DimlessBinaryDirective,
+    Copy2ClipboardButtonDirective,
     AutofocusDirective
   ],
   exports: [
@@ -32,6 +34,7 @@ import { ServicesModule } from './services/services.module';
     PipesModule,
     ServicesModule,
     PasswordButtonDirective,
+    Copy2ClipboardButtonDirective,
     DimlessBinaryDirective,
     DataTableModule,
     ApiModule,