From aa65626bb4c9b0027183fcf777b45b95018d237f Mon Sep 17 00:00:00 2001
From: Eirik Th S <eirik@flowtivity.io>
Date: Sun, 18 Apr 2021 18:32:43 +0200
Subject: [PATCH] Edit name

---
 plan/do.php  |  2 +-
 plan/plan.js | 58 +++++++++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/plan/do.php b/plan/do.php
index ddf303b..3c29edd 100644
--- a/plan/do.php
+++ b/plan/do.php
@@ -213,7 +213,7 @@ function renameStore($storeID, $newName){
     global $db, $user_id;
 
     $storeCheckSql = "SELECT count(0) FROM plan_store WHERE `user_id` = '$user_id' AND `name` = '$newName';";
-    if($storeCheckRes = $db->query($storeCheckSql) && $storeCheckRes->fetch_row()[0] > 0){
+    if(($storeCheckRes = $db->query($storeCheckSql)) && $storeCheckRes->fetch_row()[0] > 0){
         return false;
     }
 
diff --git a/plan/plan.js b/plan/plan.js
index 1c9526b..a557734 100644
--- a/plan/plan.js
+++ b/plan/plan.js
@@ -10,7 +10,7 @@ class Store {
 
 
         let html = "";
-        html += "<div class='card store' style='width: 20rem;'>";
+        html += "<div class='card store' style='width: 25rem; max-width: 90vw;'>";
         html += "  <div class='card-header'>"+this.title+"</div>";
         html += "  <div class='iconWrapper'>";
         html += "    <img src='../icon/pencil-square.svg' class='editStoreName' alt='edit name' data-toggle='tooltip' title='Edit store name' tabindex=0 role='button' />";
@@ -46,12 +46,8 @@ class Store {
             });
         });
 
-        this.selector.find('.editStoreName').on('click keyup', ev => { 
-            if(ev.type == 'click' || ev.keyCode == 13){
-                // $(ev.target).tooltip('hide').css('background-color','red');
-                alert("Coming soon");
-            }
-        });
+
+        this.selector.find('.editStoreName').one('click keyup', ev => { this.editNameFn(ev); });
         
         this.selector.find('.removeStore').on('click keyup', ev => {
             if(ev.type == 'click' || ev.keyCode == 13){
@@ -68,6 +64,54 @@ class Store {
         // this.selector.find('.save').click(ev => { this.save(); });
     }
 
+    editNameFn(ev){
+        if(ev.type == 'click' || ev.keyCode == 13){
+            
+            $(ev.target).parent().hide();
+
+            let headerElem = $(ev.target).parent().parent().find(".card-header");
+            let orgHtml = headerElem.html();
+
+            headerElem.html("<span style='display: none;'>"+orgHtml+"</span><form action='#' class='changeNameForm'><input type='text' class='newName' value='"+orgHtml+"'><input type='image' src='../icon/pencil-square.svg'></form>");
+            headerElem.find(".changeNameForm").on('submit keyup', ev2 => {
+                if(ev2.type == "submit"){
+
+                    ev2.preventDefault();
+                    
+                    let newName = $(ev2.target).find(".newName").val();
+                    
+                    let that = this;
+                    this.rename(newName).done(json => {
+
+                        // success
+                        headerElem.html(newName);
+                        that.selector.find('.iconWrapper').show();
+                        that.selector.find('.editStoreName').one('click keyup', ev3 => { this.editNameFn(ev3); });
+                    });
+                }
+
+            });
+
+            headerElem.find(".newName").on('keyup', ev3 => { this.resetEditNameFn(ev3); });
+            // $("body").one('click', ev3 => { this.resetEditNameFn(ev3); });
+        }
+    }
+
+    resetEditNameFn(ev){
+        if(
+            (ev.type=="keyup" && ev.keyCode === 27) ||
+            ev.type != "keyup"
+            ){
+            // cancel
+            let orgHtml = this.selector.find('.card-header span').html();
+            this.selector.find('.card-header').html(orgHtml);
+
+            this.selector.find('.iconWrapper').show();
+            this.selector.find('.editStoreName').one('click keyup', ev3 => { this.editNameFn(ev3); });
+            
+        }
+    }
+
     addItem(text, price){
         if(text.length > 0){