🎨 Ability to copy block ID from the block itself #500

libs/features/convs-mgr/stories/blocks/library/jump-story-block/src/lib/components/jump-block/jump-block.component.html

@@ -4,7 +4,7 @@
       <option *ngFor="let story of stories" [value]='story.id'>{{story.name}}</option>
       <option [value]="null" [selected]="true">{{"PAGE-CONTENT.BLOCK.PLACEHOLDER.JUMP.SELECT-STORY" | transloco}}</option>
     </select>
-
+    
     <input id="block" formControlName="targetBlockId" [placeholder]="'PAGE-CONTENT.BLOCK.PLACEHOLDER.JUMP.SELECT-BLOCK' | transloco" />
 
     <div formArrayName="options" fxFlexFill>

libs/features/convs-mgr/stories/blocks/library/jump-story-block/src/lib/components/jump-block/jump-block.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
+import { Clipboard } from '@angular/cdk/clipboard';
 
 import { SubSink } from 'subsink';
 
@@ -49,7 +50,9 @@ export class JumpBlockComponent implements OnInit, OnDestroy
     private _fb: FormBuilder,
     private _storyBlockStore$$: StoryBlocksStore,
     private _translate: TranslateService,
-    private _logger: Logger)
+    private _logger: Logger,
+    private clipboard: Clipboard,
+    )
   { }
 
   ngOnInit(): void
@@ -58,6 +61,9 @@ export class JumpBlockComponent implements OnInit, OnDestroy
 
     this.getStories();
     this.getBlocks();
+
+    const inputElement = document.getElementById('blockIdInput') as HTMLInputElement;
+    inputElement.addEventListener('paste', (event) => this.handlePaste(event));
   }
 
   get options(): FormArray
@@ -113,6 +119,14 @@ export class JumpBlockComponent implements OnInit, OnDestroy
       });
   }
 
+  handlePaste(event: ClipboardEvent){
+    const clipboardData = event.clipboardData || (window as any).clipboardData;
+    const pasteID = clipboardData.getData('text/plain')
+    const blockId = pasteID.trim()
+    this.jumpBlockForm.patchValue({ blockId: blockId})
+    event.preventDefault();
+  }
+
   ngOnDestroy()
   {
     this._sBS.unsubscribe();

libs/features/convs-mgr/stories/blocks/library/main/src/lib/components/block/block.component.html

@@ -1,16 +1,20 @@
-<mat-card  class="card" [id]="id" class="block-card">
+<mat-card  class="card" [id]="id" class="block-card" (contextmenu)="copyBlockIdToClipboard($event)" (click)="hideCopyBtn()">
     <div [ngSwitch]="type">
         <div *ngIf="type !== endStoryAnchor" class="outer">
             <div class="block-title-container">
                 <i [class]="iconClass" class="icon-color"></i>
                 <h4 class="block-title"> {{ blockTitle | transloco }}</h4>
             </div>
 
-            <div fxLayout="row" class="icon-block">
-                <span (click)="editBlock()" class="icons"><i class="far fa-edit"></i></span>
-                <span (click)="copyblock(block)" class="icons"><i class="far fa-clone"></i></span>
-                <span (click)="deleteBlock()" class="icons"><i class="far fa-trash-alt"></i></span>
+            <div fxLayout="row" class="icon-block"> 
+                <span *ngIf="!showCopyBtn" (click)="editBlock()" class="icons"><i class="far fa-edit"></i></span>
+                <span *ngIf="!showCopyBtn" (click)="copyblock(block)" class="icons"><i class="far fa-clone"></i></span>
+                <span *ngIf="!showCopyBtn" (click)="deleteBlock()" class="icons"><i class="far fa-trash-alt"></i></span>
+                <div class="copy-button-container " *ngIf="showCopyBtn">
+                    <span (click)="copyBlockIdToClipboard($event)" class="icons" id="copy-span"><i class="far fa-clone"></i>Copy Reference</span> 
+                </div>
             </div>
+
         </div>
 
         <div *ngSwitchCase="messagetype">

libs/features/convs-mgr/stories/blocks/library/main/src/lib/components/block/block.component.scss

@@ -63,11 +63,28 @@ mat-card {
 			}
 		}
 	}
+
 }
 .hide-block {
 	display: none;
 }
 
 ::ng-deep .mat-mdc-card-content {
 	padding: 0;
-}
+}
+
+.copy-button-container {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	margin-left: auto; 
+
+	#copy-span {
+		background-color: var(--convs-mgr-color-light-shade);
+		color: var(--convs-mgr-color-medium-shade);
+		padding: 5px 10px; 
+		border-radius: 4px; 
+		cursor: pointer;
+	  }
+  }
+

libs/features/convs-mgr/stories/blocks/library/main/src/lib/components/block/block.component.ts

@@ -7,6 +7,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
 
 import { Logger } from '@iote/bricks-angular';
+import { Clipboard } from '@angular/cdk/clipboard';
 
 import { BlockPortalService } from '@app/features/convs-mgr/stories/editor';
 import { StoryBlock, StoryBlockTypes } from '@app/model/convs-mgr/stories/blocks/main';
@@ -116,7 +117,8 @@ export class BlockComponent implements OnInit {
               private _logger: Logger,
               private sideMenu:SidemenuToggleService,
               private sideScreen:SideScreenToggleService,
-              private matdialog: MatDialog
+              private matdialog: MatDialog,
+              private clipboard: Clipboard
 
   ) { }
 
@@ -348,5 +350,24 @@ export class BlockComponent implements OnInit {
     this.viewPort.remove(index);
     this._cd.detectChanges();
   }
+
+  copyBlockIdToClipboard(event: MouseEvent) {
+    event.preventDefault(); // Prevent the default context menu from showing up
+    const blockId = this.id;
+    navigator.clipboard.writeText(blockId)
+  }
+
+  showCopyBtn = false;
+
+  @HostListener('contextmenu', ['$event'])
+  onContextMenu(event: MouseEvent) {
+    event.preventDefault(); // Prevent the default context menu from showing up
+    this.showCopyBtn = true;
+  }
+
+  hideCopyBtn() {
+    this.showCopyBtn = false;
+  }
+
 }