Add modal for delete items

Author: AleDouglas

Alpha/backend/lib/methods/api.py

@@ -133,7 +133,7 @@ def execute_template(request, project_id, template_id):
         # GENERATE A NEW TASK
         task = GetProject.create_task(title=f'USER #{request.user.id} run a template ID #{template_id}', author=request.user, status=status, output=task_output, template_id=template_id)
         # ACTIVITY REGISTER
-        activity = GetProject.create_activity(project = project, user=request.user, description=f'USER #{request.user.id} run a template ID #{template_id}')
+        activity = GetProject.create_activity(project = project, user=request.user, description=f'USER #{request.user.id} run a template ID #{template_id} from project ID #{project_id}')
 
         return JsonResponse({'success': True, 'status': status,'result': 'Template was execute successfully', 'ansible':ansible_task, 'terminal_output':get_terminal_output, 'task_id': task.id, 'template_title':template.title })
     except Exception as e:

Alpha/backend/lib/views/template.py

@@ -31,7 +31,7 @@ document.getElementById('createInventoryForm').addEventListener('submit', functi
                 hour12: true,
             };
             const date_time = new Intl.DateTimeFormat('en-US', options).format(data);
-            var new_table = '<tr class="tb-height" id="inventoryID'+ response.inventory_id +'"><td>' +  response.inventory_title + '<span style="color: grey;"> #' + response.inventory_id + '</span></td><td>' + response.inventory_description + '</td><td>' + date_time + '<td><i class="bx bxs-x-circle btn-delete" onclick="delete_inventory(' + projectId + ',' + response.inventory_id + ')"></i></td></tr>';
+            var new_table = '<tr class="tb-height" id="inventoryID'+ response.inventory_id +'"><td>' +  response.inventory_title + '<span style="color: grey;"> #' + response.inventory_id + '</span></td><td>' + response.inventory_description + '</td><td>' + date_time + '<td><i class="bx bxs-x-circle btn-delete" data-bs-toggle="modal" data-bs-target="#RemoveModal" onclick="delete_modal(' + projectId + ',' + response.inventory_id + ')"></i></td></tr>';
             get_table.innerHTML += new_table;
 
             //Clear form

Alpha/frontend/static/javascript/inventory.js

@@ -37,7 +37,7 @@ document.getElementById('createPlaybookForm').addEventListener('submit', functio
             };
 
             const date_time = new Intl.DateTimeFormat('en-US', options).format(data);
-            var new_table = '<tr class="tb-height" id="playbookID' + response.playbook_id + '"><td>' +  response.playbook_title + '<span style="color: grey;"> #' + response.playbook_id + '</span></td><td>' + response.playbook_description + '</td><td>' + date_time + '<td><i class="bx bxs-x-circle btn-delete" onclick="delete_playbook(' + projectId + ',' + response.playbook_id + ')"></i></td></tr>';
+            var new_table = '<tr class="tb-height" id="playbookID' + response.playbook_id + '"><td>' +  response.playbook_title + '<span style="color: grey;"> #' + response.playbook_id + '</span></td><td>' + response.playbook_description + '</td><td>' + date_time + '<td><i class="bx bxs-x-circle btn-delete" data-bs-toggle="modal" data-bs-target="#RemoveModal" onclick="delete_modal(' + projectId + ',' + response.playbook_id + ')"></i></td></tr>';
             get_table.innerHTML += new_table;
 
 

Alpha/frontend/static/javascript/playbook.js

@@ -16,7 +16,7 @@ document.getElementById('createProjectForm').addEventListener('submit', function
         var response = JSON.parse(xhr.responseText);
         if (response.success) {
             var get_card = document.getElementById('card-new');
-            var new_card = '<div class="card-principal" id="card-id' + response.project_id +'"><div class="project-info"><i class="bx bxs-archive project-icon"></i><a href=/project/dashboard/'+ response.project_id + '/>' + response.project_title + '</a></div><i class="bx bxs-x-circle btn-delete" onclick="delete_project('+ response.project_id +')"></i></div>';
+            var new_card = '<div class="card-principal" id="card-id' + response.project_id +'"><div class="project-info"><i class="bx bxs-archive project-icon"></i><a href=/project/dashboard/'+ response.project_id + '/>' + response.project_title + '</a></div><i class="bx bxs-x-circle btn-delete" data-bs-toggle="modal" data-bs-target="#RemoveModal" onclick="delete_modal('+ response.project_id +')"></i></div>';
             get_card.innerHTML += new_card;
             document.getElementById('result').innerHTML = 'Project created successfully! Project ID: ' + response.project_id;
         } else {
@@ -50,4 +50,10 @@ function delete_project(projectId) {
         }
     })
     .catch(error => console.error('Error deleting project:', error));
+}
+
+
+function delete_modal(projectID){
+    var insert_button = document.getElementById('buttonDelete');
+    insert_button.innerHTML = '<button class="btn btn-danger" data-bs-dismiss="modal" aria-label="Close" onclick="delete_project('+ projectID +')">Delete</button>';
 }

Alpha/frontend/static/javascript/project.js

@@ -30,7 +30,7 @@ document.getElementById('createTemplateForm').addEventListener('submit', functio
 
             var get_table = document.getElementById('templateTable');
 
-            var new_table = '<tr class="tb-height" id="templateID' + response.template_id + '"><td><a href="/project/task/' + projectId + '/' + response.template_id +'/">' +  response.template_title + '<span style="color: grey;"> #' + response.template_id + '</a></span></td><td>' + response.template_version + '</td><td>' + response.template_playbook + '</td><td>'+ response.template_inventory + '<td><button class="bx bx-play-circle btn-modal" data-bs-toggle="modal" data-bs-target="#executeTaskModal" onclick="execute_template('+ projectId + ',' + response.template_id +')"></button><i class="bx bxs-cog btn-delete"></i><i class="bx bxs-x-circle btn-delete" onclick="delete_template(' + projectId + ',' + response.template_id + ')"></i></td></tr>';
+            var new_table = '<tr class="tb-height" id="templateID' + response.template_id + '"><td><a href="/project/task/' + projectId + '/' + response.template_id +'/">' +  response.template_title + '<span style="color: grey;"> #' + response.template_id + '</a></span></td><td>' + response.template_version + '</td><td>' + response.template_playbook + '</td><td>'+ response.template_inventory + '<td><button class="bx bx-play-circle btn-modal" data-bs-toggle="modal" data-bs-target="#executeTaskModal" onclick="execute_template('+ projectId + ',' + response.template_id +')"></button><i class="bx bxs-cog btn-delete"></i><i class="bx bxs-x-circle btn-delete" data-bs-toggle="modal" data-bs-target="#RemoveModal" onclick="delete_modal(' + projectId + ',' + response.template_id + ')"></i></td></tr>';
             get_table.innerHTML += new_table;
             //Clear form
             document.getElementById("createTemplateForm").reset()

Alpha/frontend/static/javascript/template.js

@@ -0,0 +1,16 @@
+     <div class="modal fade" id="RemoveModal" tabindex="-1" aria-labelledby="RemoveModalLabel" aria-hidden="true" style="width: 100% !important;">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h1 class="modal-title fs-5" id="RemoveModalLabel">Are you sure you want to delete this?</h1>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body" id="buttonDelete">
+                    <button>DELETE</button>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>

Alpha/frontend/templates/components/modals/delete.html

@@ -83,7 +83,7 @@ <h1>Inventory</h1>
             <td>{{ inventory.title }} <span style="color: grey;">#{{ inventory.id }}</span></td>
             <td>{{ inventory.description }}</td>
             <td>{{ inventory.date_time }}</td>
-            <td><i class='bx bxs-x-circle btn-delete' onclick="delete_inventory('{{ project_id }}','{{ inventory.id }}')"></i></td>
+            <td><i class='bx bxs-x-circle btn-delete' data-bs-toggle="modal" data-bs-target="#RemoveModal" onclick="delete_modal('{{ project_id }}','{{ inventory.id }}')"></i></td>
         </tr>
         {% endfor %}
     </tbody>
@@ -123,11 +123,18 @@ <h1 class="modal-title fs-5" id="createInventoryModalLabel">New Inventory</h1>
     </div>
 </div>
 
+{% include 'components/modals/delete.html' %}
 
 
 <script src="{% static 'javascript/inventory.js' %}"></script>
 
 <script>
+
+    function delete_modal(projectID, inventoryID){
+        var insert_button = document.getElementById('buttonDelete');
+        insert_button.innerHTML = '<button class="btn btn-danger" data-bs-dismiss="modal" aria-label="Close" onclick="delete_inventory('+ projectID +','+ inventoryID +')">Delete</button>';
+    }
+
     var navLinks = document.getElementsByClassName("nav_link");
     navLinks[2].classList.add("active");
 </script>

Alpha/frontend/templates/pages/project/project_inventory.html

@@ -88,17 +88,13 @@
         margin-bottom: 10px;
     }
     @media (min-width: 992px){
-        .modal-dialog{
-            max-width: none;
-            margin-right: 0;
-            margin-left: 0;
-        }
         .modal-lg, .modal-xl {
             --bs-modal-width: 1200px;
         }
     }
 
-    @media (min-width: 576px){
+    
+    @media (max-width: 992px){
         .modal-dialog{
             max-width: none;
             margin-right: 0;
@@ -161,6 +157,7 @@ <h1 class="modal-title fs-5" id="newMemberModalLabel">New Member</h1>
                     </div>
                     <button type="submit" class="btn-newMember" style="margin-top: 15px;">ADD MEMBER</button>
                 </form>
+                <hr>
                 <table id="userList" class="table table-borderless datatable datatable-table">
                     <thead>
                         <tr>
@@ -188,11 +185,22 @@ <h1 class="modal-title fs-5" id="newMemberModalLabel">New Member</h1>
     </div>
 </div>
 
+
+
+{% include 'components/modals/delete.html' %}
+
+
+
 <script src="{% static 'javascript/member.js' %}"></script>
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
 <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.js"></script>
 <script>
+    function delete_modal(projectID){
+        var insert_button = document.getElementById('buttonDelete');
+        insert_button.innerHTML = '<button class="btn btn-danger" data-bs-dismiss="modal" aria-label="Close" onclick="delete_project('+ projectID +')">Delete</button>';
+    }
+
     $(document).ready(function () {
     $.noConflict();
     var table = $('#userList').DataTable();

Alpha/frontend/templates/pages/project/project_members.html

@@ -82,7 +82,7 @@ <h1>Playbook</h1>
             <td>{{ Playbook.title }} <span style="color: grey;">#{{ Playbook.id }}</span></td>
             <td>{{ Playbook.description }}</td>
             <td>{{ Playbook.date_time }}</td>
-            <td><i class='bx bxs-x-circle btn-delete' onclick="delete_playbook('{{ project_id }}','{{ Playbook.id }}')"></i></td>
+            <td><i class='bx bxs-x-circle btn-delete' data-bs-toggle="modal" data-bs-target="#RemoveModal" onclick="delete_modal('{{ project_id }}','{{ Playbook.id }}')"></i></td>
         </tr>
         {% endfor %}
     </tbody>
@@ -123,11 +123,17 @@ <h1 class="modal-title fs-5" id="createPlaybookModalLabel">New Playbook</h1>
     </div>
 </div>
 
+{% include 'components/modals/delete.html' %}
 
 
 <script src="{% static 'javascript/playbook.js' %}"></script>
 
 <script>
+    function delete_modal(projectID, playbookID){
+        var insert_button = document.getElementById('buttonDelete');
+        insert_button.innerHTML = '<button class="btn btn-danger" data-bs-dismiss="modal" aria-label="Close" onclick="delete_playbook('+ projectID +','+ playbookID +')">Delete</button>';
+    }
+
     var navLinks = document.getElementsByClassName("nav_link");
     navLinks[3].classList.add("active");
 </script>