From 75316cf15d0610e4c0718aa2a2020f9c0d5cdbae Mon Sep 17 00:00:00 2001
From: Jason Tudisco <tudisco@tudisco.biz>
Date: Mon, 18 Apr 2022 00:55:18 -0500
Subject: [PATCH] Verion Change. Added sweet alert lib so I can do some toast
 popups. Adding ability to copy to clipboard. Loads from DB into clipboard.
 Tag control now switches to edit mode on double click.

---
 package-lock.json               | 21 ++++++++--
 package.json                    |  2 +-
 src/ui/timechain-item-menu.riot |  5 ++-
 src/ui/timechain-list.riot      | 45 ++++++++++++++++++--
 src/ui/timechain-tag-list.riot  | 65 +++++++++++++++++++++++++++--
 src/ui/timechain-tag.riot       | 74 +++++++++++++++++++++++++++++++--
 6 files changed, 196 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9010d89..5e418d7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "time-chain",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "time-chain",
-      "version": "1.0.0",
+      "version": "1.1.0",
       "license": "UNLICENSED",
       "dependencies": {
         "@sentry/browser": "^6.17.6",
@@ -23,7 +23,8 @@
         "nanoid": "^3.2.0",
         "pubsub-js": "^1.9.4",
         "riot": "^6.1.2",
-        "sanitize-html": "^2.6.1"
+        "sanitize-html": "^2.6.1",
+        "sweetalert2": "^11.4.8"
       },
       "devDependencies": {
         "@parcel/transformer-less": "^2.3.0",
@@ -12553,6 +12554,15 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/sweetalert2": {
+      "version": "11.4.8",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.4.8.tgz",
+      "integrity": "sha512-BDS/+E8RwaekGSxCPUbPnsRAyQ439gtXkTF/s98vY2l9DaVEOMjGj1FaQSorfGREKsbbxGSP7UXboibL5vgTMA==",
+      "funding": {
+        "type": "individual",
+        "url": "https://sweetalert2.github.io/#donations"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -22817,6 +22827,11 @@
         "stable": "^0.1.8"
       }
     },
+    "sweetalert2": {
+      "version": "11.4.8",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.4.8.tgz",
+      "integrity": "sha512-BDS/+E8RwaekGSxCPUbPnsRAyQ439gtXkTF/s98vY2l9DaVEOMjGj1FaQSorfGREKsbbxGSP7UXboibL5vgTMA=="
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
diff --git a/package.json b/package.json
index 47ed154..f1209fd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "time-chain",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "timechain",
   "author": "Jaosn Tudisco",
   "license": "UNLICENSED",
diff --git a/src/ui/timechain-item-menu.riot b/src/ui/timechain-item-menu.riot
index ab30ce1..347b72d 100644
--- a/src/ui/timechain-item-menu.riot
+++ b/src/ui/timechain-item-menu.riot
@@ -1,11 +1,14 @@
 <timechain-item-menu>
 
+    <div id="context-menu">
+        <div class="item">Copy to Clipboard</div>
+    </div>
 
     <script>
 
         export default {
 
-            
+
 
         }
 
diff --git a/src/ui/timechain-list.riot b/src/ui/timechain-list.riot
index 6778212..28a7524 100644
--- a/src/ui/timechain-list.riot
+++ b/src/ui/timechain-list.riot
@@ -16,7 +16,7 @@
 			</div>
 
 			<div class="timechain-tag-list">
-				<timechain-tag-list tags="{r.tags}" />
+				<timechain-tag-list tags="{r.tags}" canedit="1" rid="{r.uuid}" ontag="{onTagChange}"/>
 			</div>
 			
 			<div class="timechain-item-text" if="{r.mime == 'text/plain'}">
@@ -54,7 +54,9 @@
 
 
 		const {
-			TimeChainDataSqliteRecord
+			TimeChainDataSqliteTag,
+			TimeChainDataSqliteRecord,
+			TimeChainDataSqliteTagLink
 		} = require('../data/sqlite-client');
 		
 		export default {
@@ -173,8 +175,45 @@
 				}else{
 					alert("Can't copy");
 				}
+			},
+
+			onTagChange(tags,rid){
+				const TAG = new TimeChainDataSqliteTag();
+				const TL = new TimeChainDataSqliteTagLink();
+
+				console.log('LIST', tags,rid);
+
+				if(typeof tags == 'string'){
+					tags = JSON.parse(tags);
+				}
+
+				if(!rid) return;
+
+				return TL.deleteRecord(rid).then(()=>{
+
+					const tasks = tags.map(t=>{
+						const tag = t.value;
+						if(!tag) return false;
+
+						return TAG.has(tag).then(v=>{
+							return v;
+						}).then(v=>{
+							if(!v){
+								return TAG.add(tag);
+							}
+							return true;
+						}).then(v=>{
+							TL.add(rid,tag);
+						})
+					});
+
+					return Promise.all(tasks).then(()=>{
+						console.log("finish adding tags");
+					});
+
+				})
+
 
-				
 			}
 
 		}
diff --git a/src/ui/timechain-tag-list.riot b/src/ui/timechain-tag-list.riot
index 56a527e..ce4a7bb 100644
--- a/src/ui/timechain-tag-list.riot
+++ b/src/ui/timechain-tag-list.riot
@@ -1,7 +1,8 @@
 <timechain-tag-list>
 
-	<div class="timechain-tags">
-		<span class="timechain-tag" each="{t in state.tags}">{t}</span>
+	<div class="timechain-tags" ondblclick="{goEdit}">
+		<span class="timechain-tag" each="{t in state.tags}" if="{!state.isEditing}">{t}</span>
+		<timechain-tag if="{state.isEditing}" tags="{state.tags_text}" rid="{state.rid}" ontag="{onTagChange}" onEnter="{onEnter}"></timechain-tag>
 	</div>
 
 
@@ -11,6 +12,7 @@
 			text-align:  center;
 			margin-bottom: 0.5em;
 			margin-top:  0.5em;
+			min-height: 0.5em;
 		}
 		
 		.timechain-tags .timechain-tag {
@@ -24,17 +26,72 @@
 	</style>
 
 	<script>
+
+		import TimechainTag from './timechain-tag.riot'
 		
 		export default {
 
 			state: {
-				tags: []
+				tags: [],
+				tags_text: "",
+				canEdit: false,
+				isEditing: false,
+				key: '',
+				rid: '',
 			},
-			onMounted: function(props){
+			components: {
+				TimechainTag
+			},
+			onBeforeMount(props){
+				if(props.canedit=='1'){
+					this.state.canEdit = true;
+				}
+
+				if(props.rid){
+					this.state.rid = props.rid;
+				}else{
+					//console.log("No rid in list");
+				}
+			},
+			onMounted(props){
 				if(!props.tags) return;
 				this.update({
+					tags_text: props.tags,
 					tags: props.tags.split(',')
 				})
+
+				if(this.state.tags.length==0 && this.state.canEdit){
+					this.update({isEditing:true});
+				}
+			},
+			goEdit(e){
+				if(!this.state.canEdit) return;
+				this.state.isEditing = !this.state.isEditing;
+				this.update();
+			},
+			onTagChange(tags,key){
+				console.log(tags,key);
+
+				if(typeof tags == 'string'){
+					tags = JSON.parse(tags);
+				}
+
+				let tagArr = [];
+				tags.forEach(t=>{
+					tagArr.push(t.value);
+				});
+
+				this.update({
+					tags_text: tagArr.join(','),
+					tags: tagArr
+				});
+
+				if(this.props?.ontag){
+					this.props.ontag(tags,key);
+				}
+			},
+			onEnter(){
+				this.update({isEditing:false});
 			}
 
 		}
diff --git a/src/ui/timechain-tag.riot b/src/ui/timechain-tag.riot
index 9061e50..e205c28 100644
--- a/src/ui/timechain-tag.riot
+++ b/src/ui/timechain-tag.riot
@@ -9,22 +9,54 @@
 
 		export default {
 			state:{
-				id:'tagging'
+				id:'tagging',
+				rid: ''
 			},
-			onBeforeMount(){
+			onBeforeMount(props){
 				this.state.id = "tagging"+this.makeid(5);
+
 			},
-			onMounted(){
+			onMounted(props, state){
 				const inputElm = this.$('#'+this.state.id);
+
+				if(props.rid){
+					state.rid = props.rid;
+				}else{
+					//console.log("no rid");
+				}
+
+				if(props.tags){
+					console.log("We have tags", props.tags);
+					inputElm.value = props.tags;
+				}else{
+					console.log("No tags");
+					console.log(props.tags);
+				}
+
 				this.tagify = new Tagify(inputElm);
 				inputElm.addEventListener('change', this.onChange.bind(this));
 				this.event_clean = pubsub.subscribe('tag.clean', this.onClean.bind(this));
+
+				if(props.tags){
+					this.setFocus();
+					this.tagify.on('keydown', this.onKeyDown.bind(this));
+				}
+
 			},
 			onUnmounted(){
 				pubsub.unsubscribe(this.event_clean);
 			},
 			onChange(e){
-				this.props?.ontag(e.target.value);
+				if(this.props?.ontag){
+					if(this.state.rid){
+						this.props.ontag(e.target.value, this.state.rid);
+					}else{
+						console.log("No RID");
+						this.props?.ontag(e.target.value);
+					}
+				}else{
+					console.log("No on tag function");
+				}
 			},
 			onClean(){
 				this.tagify.removeAllTags();
@@ -37,6 +69,40 @@
 			      result += characters.charAt(Math.floor(Math.random() * charactersLength));
 			   }
 			   return result;
+			},
+			setFocus(){
+				const i = this.$('#'+this.state.id);
+				if(!i) {
+					return console.log("No input");
+				}
+
+				const tag = i.closest('.timechain-tagging');
+
+				if(!tag){
+					return console.log("No Tagg");
+				}
+
+				const s = tag.querySelector('.tagify__input');
+
+				if(!s){
+					return console.log("No tag imput");
+				}
+
+				s.focus();
+			},
+			onKeyDown(e){
+				console.log(e);
+
+				if(e.detail && e.detail.originalEvent && (e.detail.originalEvent.key == "Enter" || e.detail.originalEvent.key == "Escape") ){
+					//e.detail.originalEvent.stopPropagation();
+					//e.detail.originalEvent.preventDefault();
+					//console.log("ENTER");
+
+					if(this.props?.onEnter){
+						this.props.onEnter(e.detail.originalEvent);
+					}
+
+				}
 			}
 		}
 	</script>