Add or Edit Key feature (#42)

* #41 Add or Edit Key feature * removed plus icon --------- Co-authored-by: Emrah Kondur <[email protected]>
ekondur · Jun 22, 2024 · e4dfdef · e4dfdef
1 parent 0551018
commit e4dfdef
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 35 deletions.
diff --git a/RedisUI/Models/PostModel.cs b/RedisUI/Models/PostModel.cs
@@ -3,5 +3,7 @@
     internal class PostModel
     {
         public string DelKey { get; set; }
+        public string InsertKey { get; set; }
+        public string InsertValue { get; set; }
     }
 }
diff --git a/RedisUI/Pages/InsertModal.cs b/RedisUI/Pages/InsertModal.cs
@@ -0,0 +1,33 @@
+namespace RedisUI.Pages
+{
+    public static class InsertModal
+    {
+        public static string Build()
+        {
+
+            return $@"
+<div class=""modal fade"" id=""insertModal"" tabindex=""-1"" aria-labelledby=""insertModalLabel"" aria-hidden=""true"">
+  <div class=""modal-dialog"">
+    <div class=""modal-content"">
+      <div class=""modal-header"">
+        <h1 class=""modal-title fs-5"" id=""insertModalLabel"">Add or Edit Key</h1>
+        <button type=""button"" class=""btn-close"" data-bs-dismiss=""modal"" aria-label=""Close""></button>
+      </div>
+      <div class=""modal-body"">
+        <div class=""mb-3"">
+          <input type=""text"" class=""form-control"" id=""insertKey"" placeholder=""Key"" onkeyup=""checkRequired()"">
+        </div>
+        <div class=""mb-3"">
+          <textarea rows=""10"" type=""text"" class=""form-control"" id=""insertValue"" placeholder=""Value"" onkeyup=""checkRequired()""></textarea>
+        </div>
+      </div>
+      <div class=""modal-footer"">
+        <button type=""button"" class=""btn btn-secondary"" data-bs-dismiss=""modal"">Close</button>
+        <button type=""button"" class=""btn btn-primary"" onclick=""saveKey()"" id=""btnSave"" disabled>Save</button>
+      </div>
+    </div>
+  </div>
+</div>";
+        }
+    }
+}
diff --git a/RedisUI/Pages/Main.cs b/RedisUI/Pages/Main.cs
@@ -19,9 +19,15 @@ public static string Build(List<KeyModel> keys, long next)
             }
 
             var html = $@"
+    {InsertModal.Build()}
     <div class=""row"">
         <div class=""col-6""><div id=""search"" class=""input-group mb-3""></div></div>
-        <div class=""col-6"">
+        <div class=""col-1"">
+            <button type=""button"" class=""btn btn-outline-success"" data-bs-toggle=""modal"" data-bs-target=""#insertModal"" title=""Add or Edit Key"">
+              {Icons.KeyLg}
+            </button>
+        </div>
+        <div class=""col-5"">
             <ul class=""pagination"">
                 <li class=""page-item"" id=""size10""><a class=""page-link"" href=""javascript:setSize(10);"">10</a></li>
                 <li class=""page-item"" id=""size20""><a class=""page-link"" href=""javascript:setSize(20);"">20</a></li>
@@ -30,7 +36,7 @@ public static string Build(List<KeyModel> keys, long next)
                 <li class=""page-item"" id=""size500""><a class=""page-link"" href=""javascript:setSize(500);"">500</a></li>
                 <li class=""page-item"" id=""size1000""><a class=""page-link"" href=""javascript:setSize(1000);"">1000</a></li>
             </ul>
-        </div> 
+        </div>
     </div>
     <div class=""row"">
         <div class=""col-6"">
@@ -176,42 +182,42 @@ function showPage(page, db, key) {{
 
     }});
 
-    function confirmDelete(del){{
-        if (confirm(""Are you sure to delete key '"" + del + ""' ?"") == true) 
-        {{
-            let currentSize = 10;
-            let currentKey = '';
-            let currentDb = 0;
-            let currentPage = 0;
-
-            var searchParams = new URLSearchParams(window.location.search);
-            var paramDb = searchParams.get('db');
-            var paramKey = searchParams.get('key');
-            var paramSize = searchParams.get('size');
-		    var paramPage = searchParams.get('page');
-
-            if (paramDb) {{
-                currentDb = paramDb;
-		    }}
-
-            if (paramKey) {{
-                currentKey = paramKey;
-            }}
+    let currentSize = 10;
+    let currentKey = '';
+    let currentDb = 0;
+    let currentPage = 0;
 
-            if (paramSize) {{
-                currentSize = paramSize;
-            }}
+    var searchParams = new URLSearchParams(window.location.search);
+    var paramDb = searchParams.get('db');
+    var paramKey = searchParams.get('key');
+    var paramSize = searchParams.get('size');
+	var paramPage = searchParams.get('page');
 
-            if (paramPage) {{
-                currentPage = paramPage;
-		    }}
+    if (paramDb) {{
+        currentDb = paramDb;
+	}}
 
-            var currentPath = window.location.href.replace(window.location.search, '');
+    if (paramKey) {{
+        currentKey = paramKey;
+    }}
+
+    if (paramSize) {{
+        currentSize = paramSize;
+    }}
+
+    if (paramPage) {{
+        currentPage = paramPage;
+	}}
+
+    var currentPath = window.location.href.replace(window.location.search, '');
 
-		    newQueryString = ""&db="" + currentDb + ""&size="" + currentSize + ""&key="" + currentKey + ""&page="" + currentPage;
+	newQueryString = ""&db="" + currentDb + ""&size="" + currentSize + ""&key="" + currentKey + ""&page="" + currentPage;
 
-		    newUrl = currentPath + (currentPath.indexOf('?') !== -1 ? '&' : '?') + newQueryString;
+	newUrl = currentPath + (currentPath.indexOf('?') !== -1 ? '&' : '?') + newQueryString;
 
+    function confirmDelete(del){{
+        if (confirm(""Are you sure to delete key '"" + del + ""' ?"") == true) 
+        {{
             fetch(newUrl, {{
               method: 'POST',
               body: JSON.stringify({{
@@ -220,13 +226,39 @@ function confirmDelete(del){{
               headers: {{
                 'Content-type': 'application/json; charset=UTF-8'
               }}
-            }})
-            .then(function(response) {{
+            }}).then(function(response) {{
                 window.location = newUrl.replace('#', '');
             }});
         }}
     }};
 
+    function saveKey(){{
+        fetch(newUrl, {{
+          method: 'POST',
+          body: JSON.stringify({{
+            InsertKey: document.getElementById(""insertKey"").value,
+            InsertValue: document.getElementById(""insertValue"").value
+          }}),
+          headers: {{
+            'Content-type': 'application/json; charset=UTF-8'
+          }}
+        }}).then(function(response) {{
+            window.location = newUrl.replace('#', '');
+        }});
+    }}
+
+    function checkRequired(){{
+        var insertKey = document.getElementById(""insertKey"").value;
+        var insertValue = document.getElementById(""insertValue"").value;
+
+        if (insertKey && insertValue){{
+            document.getElementById(""btnSave"").disabled = false;
+        }}
+        else{{
+            document.getElementById(""btnSave"").disabled = true;
+        }}
+    }}
+
 </script>
 ";
             return html;

diff --git a/RedisUI/RedisUIMiddleware.cs b/RedisUI/RedisUIMiddleware.cs
@@ -109,7 +109,16 @@ public async Task InvokeAsync(HttpContext context)
 
                     if (postModel != null)
                     {
-                        await redisDb.ExecuteAsync("DEL", postModel.DelKey);
+                        if (!string.IsNullOrEmpty(postModel.DelKey))
+                        {
+                            await redisDb.ExecuteAsync("DEL", postModel.DelKey);
+                        }
+
+                        if (!string.IsNullOrEmpty(postModel.InsertKey) 
+                            && !string.IsNullOrEmpty(postModel.InsertValue))
+                        {
+                            await redisDb.ExecuteAsync("SET", postModel.InsertKey, postModel.InsertValue);
+                        }
                     }
                 }
             }