Delete object modal in different html (reusable)

pelusa-v · May 9, 2024 · ec4afe0 · ec4afe0
1 parent 535e0cf
commit ec4afe0
Show file tree

Hide file tree

Showing 5 changed files with 146 additions and 58 deletions.
diff --git a/src/pkg/admin/static/styles/main.css b/src/pkg/admin/static/styles/main.css
@@ -27,29 +27,31 @@ th, td {
     text-align: left;
 }
 
-span {
+.models-tree {
+  font-size: 14px;
+  border-bottom: 1px solid;
+  border-left: 1px solid;
+  height: 1rem;
+  width: 1.5rem;
+  display: inline-block;
+  margin-bottom: 0.3rem;
+  margin-left: 1rem;
+  margin-right: 2px;
+}
+
+@media screen and (max-width: 480px) {
+  .models-tree {
+    font-size: 14px;
     border-bottom: 1px solid;
-      border-left: 1px solid;
-      height: 1rem;
-      width: 1.5rem;
-      display: inline-block;
-      margin-bottom: 0.3rem;
-      margin-left: 1rem;
-      margin-right: 2px;
-  }
-
-  @media screen and (max-width: 480px) {
-    span {
-      border-bottom: 1px solid;
-      border-left: 1px solid;
-      height: 1.4rem;
-      width: 2.5rem;
-      display: inline-block;
-      margin-bottom: 0.3rem;
-      margin-left: 1rem;
-      margin-right: 2px;
-    }
+    border-left: 1px solid;
+    height: 1.4rem;
+    width: 2.5rem;
+    display: inline-block;
+    margin-bottom: 0.3rem;
+    margin-left: 1rem;
+    margin-right: 2px;
   }
+}
 
   .sidebar-item-title {
     font-size: small;
@@ -79,10 +81,6 @@ ul, ol {
   list-style-type: none; /* This removes bullets and numbers */
 }
 
-.models-tree {
-  font-size: 14px;
-}
-
 .section-title {
     margin-left: 13px;
     font-weight: 500;
@@ -207,4 +205,41 @@ button:hover {
   border-radius: 7px;
   padding: 10px;
   margin-top: 10px;
+}
+
+.general-modal {
+  display: none; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgb(0,0,0); /* Fallback color */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+/* Modal Content */
+.modal-content {
+  background-color: #fefefe;
+  margin: 15% auto; /* 15% from the top and centered */
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%; /* Could be more or less, depending on screen size */
+}
+
+/* The Close Button */
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
 }
diff --git a/src/pkg/admin/templates/DeleteObjectModal.html b/src/pkg/admin/templates/DeleteObjectModal.html
@@ -0,0 +1,29 @@
+{{define "deleteObjectModal"}}
+<div id="{{.ModalId}}" class="general-modal">
+    <div class="modal-content">
+        <span class="close" id="{{.CloseModalId}}">&times;</span>
+        <h2>Modal Header</h2>
+        <p>{{.ModalId}}</p>
+        <p>{{.CloseModalId}}</p>
+        <p>{{.OpenModalId}}</p>
+    </div>
+</div>
+
+
+<script>
+// document.getElementById('{{.OpenModalId}}').onclick = function() {
+//     document.getElementById('{{.ModalId}}').style.display = "block";
+// }
+
+document.getElementById('{{.CloseModalId}}').onclick = function() {
+    document.getElementById('{{.ModalId}}').style.display = "none";
+}
+
+window.onclick = function(event) {
+    if (event.target.classList.contains('general-modal')) {
+        event.target.style.display = "none";
+    }
+}
+</script>
+
+{{end}}
diff --git a/src/pkg/admin/templates/ModelDetail.html b/src/pkg/admin/templates/ModelDetail.html
@@ -23,12 +23,19 @@ <h2>Model: {{.Model}}</h2>
                     <tr>
                         <td><a id="{{ .Pk}}-detail" href="{{ .DetailURL}}">Go</a></td>
                         <td><a id="{{ .Pk}}-update" href="{{ .DetailURL}}">Edit</a></td>
-                        <td><a id="{{ .Pk}}-delete" href="#">Delete</a></td>
+                        <!-- <td><a id="{{ .Pk}}-delete" href="#">Delete</a></td> -->
+                        <td><span id="{{.DeleteObjectModalData.OpenModalId}}"><a href="#">Delete</a></span></td>
                         {{range .FieldsValues}}
                             <td>{{.}}</td>
                         {{end}}
                     </tr>
                 {{end}}
+
+                {{range .ModelObjects}}
+                    <!-- <button id="{{.DeleteObjectModalData.OpenModalId}}">Open Modal</button> -->
+                    <!-- {{.DeleteObjectModalData}} -->
+                    {{template "deleteObjectModal" .DeleteObjectModalData}}
+                {{end}}
             </tbody>
         </table>
         <div class="table-button">
@@ -40,32 +47,36 @@ <h2>Model: {{.Model}}</h2>
 <script>
 
     "{{range .ModelObjects}}"
-    document.getElementById("{{ .Pk}}-delete").addEventListener("click", (e) => {
-        e.preventDefault();
+    document.getElementById('{{.DeleteObjectModalData.OpenModalId}}').onclick = function() {
+        document.getElementById('{{.DeleteObjectModalData.ModalId}}').style.display = "block";
+    }
+
+    // document.getElementById("{{ .Pk}}-delete").addEventListener("click", (e) => {
+    //     e.preventDefault();
 
-        fetch("{{ .DeleteURL}}", {
-            method: 'DELETE',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-        })
-        .then(response => {
-            console.log(response)
-            if(response.status >= 200) {
-                location.reload()
-            }
-            return response.json()
-        })
-        .catch(err => {
-            return err.json()
-        })
-        .then(json => {
-            console.log(json)
-            const errorMessage = document.getElementById('errorMessage');
-            errorMessage.textContent = json["error"]
-            errorMessage.classList.remove("hidden")
-        })
-    })
+    //     fetch("{{ .DeleteURL}}", {
+    //         method: 'DELETE',
+    //         headers: {
+    //             'Content-Type': 'application/json',
+    //         },
+    //     })
+    //     .then(response => {
+    //         console.log(response)
+    //         if(response.status >= 200) {
+    //             location.reload()
+    //         }
+    //         return response.json()
+    //     })
+    //     .catch(err => {
+    //         return err.json()
+    //     })
+    //     .then(json => {
+    //         console.log(json)
+    //         const errorMessage = document.getElementById('errorMessage');
+    //         errorMessage.textContent = json["error"]
+    //         errorMessage.classList.remove("hidden")
+    //     })
+    // })
     "{{end}}"
 </script>
 

diff --git a/src/pkg/admin/templates/Sidebar.html b/src/pkg/admin/templates/Sidebar.html
@@ -3,9 +3,9 @@
     <h2 class="admin-name"><a class="admin-name" href="/admin">{{.AdminName}}</a></h2>
     <hr class="sidebar-line">
     <p class="section-title">Models</p>
-    <ul class="models-tree">
+    <ul class="">
          {{range .Models}}
-             <li class="sidebar-item-title models-tree"><span class="models-tree"></span><a class="models-tree" href="{{.DetailURL}}">{{.Name}}</a></li>
+             <li class="sidebar-item-title"><span class="models-tree"></span><a href="{{.DetailURL}}">{{.Name}}</a></li>
          {{end}}
     </ul>
 <!-- 

diff --git a/src/pkg/data/templates_data.go b/src/pkg/data/templates_data.go
@@ -40,11 +40,18 @@ type ModelObjectCreatePageData struct {
 }
 
 type ModelObject struct {
-	Pk           interface{}
-	Fields       []reflect.StructField
-	FieldsValues []reflect.Value
-	DetailURL    string
-	DeleteURL    string
+	Pk                    interface{}
+	Fields                []reflect.StructField
+	FieldsValues          []reflect.Value
+	DetailURL             string
+	DeleteURL             string
+	DeleteObjectModalData DeleteObjectModalData
+}
+
+type DeleteObjectModalData struct {
+	ModalId      string
+	CloseModalId string
+	OpenModalId  string
 }
 
 type Model struct {
@@ -90,6 +97,12 @@ func (manager *TemplateManager) GetModelDetailPageData(model DbModel) ModelDetai
 	objects := model.ListObjects()
 	for _, o := range objects {
 		modelObject := MapModelObject(o)
+		deleteModalData := DeleteObjectModalData{
+			ModalId:      fmt.Sprintf("delete-modal-%v", modelObject.Pk),
+			CloseModalId: fmt.Sprintf("close-delete-modal-%v", modelObject.Pk),
+			OpenModalId:  fmt.Sprintf("open-delete-modal-%v", modelObject.Pk),
+		}
+		modelObject.DeleteObjectModalData = deleteModalData
 		modelObjects = append(modelObjects, modelObject)
 	}
 	data.ModelObjects = modelObjects