From bd04dd3b5d4de6479356be1117c9538139118efb Mon Sep 17 00:00:00 2001
From: Harshit Gupta <hkg1412@gmail.com>
Date: Sun, 22 Oct 2023 20:29:33 +0530
Subject: [PATCH] Add Copy to Clipboard option for Note Header card

Added a new option per note to copy note data to clipboard by trying to
append note title and description text of a note separated by newline
'\n' characters when clipboard data reading is allowed, else simply
overwrite Clipboard text with same data of a particular chosen note.
And moved options to the right end of note card header using grid
display for this part rather than allowing icon options within to spread
throughout its size with flex display justify-content as space-between.

Signed-off-by: Harshit Gupta <hkg1412@gmail.com>
---
 src/App.js   | 23 +++++++++++++++++++++--
 src/App.scss |  6 ++++++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/App.js b/src/App.js
index ce6cca9..b305e4d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -313,8 +313,27 @@ class NotesCard extends React.Component {
 	render() {
 		return (
 			<article className={"card note-card text-reset " + this.props.className}>
-				<article className="card-header d-flex justify-content-between">
-					<i className="bi bi-pen-fill" onClick={this.props.editor} title="Edit this Note"></i> {/* <!-- For circular ones, try: <i className="bi bi-wrench-adjustable-circle"></i> --> */}
+				<article className="card-header d-grid justify-content-end">
+					<i className="bi bi-pen-fill" onClick={this.props.editor} title="Edit this Note"></i>
+					<i className="bi bi-clipboard-plus" title="Copy to Clipboard" onClick={ (event) => {
+						// Reading and then appending new Clipboard text on top of it, else just overwriting Clipboard
+						let originalData = "";
+						navigator.clipboard.readText()
+						.then((clipboardText) => { originalData = clipboardText; })
+						.catch( (reason) => {
+							console.error("Clipboard Reading Issue- %s", reason);
+						})
+						.finally(()=>{
+							navigator.clipboard.writeText(originalData + '\n' + this.props.title + '\n' + this.props.detail).then(() => {
+								if (event && event.target) {
+									event.target.classList.replace("bi-clipboard-plus", "bi-clipboard-check");
+									setTimeout( () => {event.target.classList.replace("bi-clipboard-check", "bi-clipboard-plus"); event.target.removeAttribute("disabled"); }, 1500 );
+								}
+							}).catch( (reason) => {
+								console.error("Clipboard Writing Issue- %s", reason);
+							})
+						});
+					}}></i>
 					<i className="bi bi-x-circle text-danger" onClick={this.props.deletion} title="Delete this Note"></i>
 				</article>
 				<article className="card-body">
diff --git a/src/App.scss b/src/App.scss
index 54dcb6c..de6e739 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -53,6 +53,12 @@
 		margin: .5em;
 		background-color: unset;
 
+		.card-header.d-grid {
+			grid-auto-flow: column;
+			// justify-items: center;
+			grid-gap: 1em;
+		}
+
 		&:hover {
 			transition: all 0.5s;
 			box-shadow: 0 0 1px 2px burlywood;