Update templates/prompt_template.html

templates/prompt_template.html

@@ -18,15 +18,17 @@
             justify-content: space-between;
             align-items: center;
         }
+
         .card {
             padding: 0;
             margin-top: -15px;
             margin-left: -40px;
         }
+
         .table-container {
             width: 100%;
             overflow-x: auto;
-        
+
         }
 
         .wrapper {
@@ -45,7 +47,7 @@
 
         }
 
-        div.dataTables_wrapper div.dataTables_length select{
+        div.dataTables_wrapper div.dataTables_length select {
             width: 60px;
             display: inline-block;
         }
@@ -78,11 +80,13 @@
             /* view column*/
             width: 5%;
         }
+
         th:nth-child(5),
         td:nth-child(5) {
             /* view column*/
             width: 5%;
         }
+
         th:nth-child(6),
         td:nth-child(6) {
             /* view column*/
@@ -96,7 +100,8 @@
         .viewButton {
             size: 2px;
         }
-        div.dataTables_wrapper div.dataTables_length select{
+
+        div.dataTables_wrapper div.dataTables_length select {
             width: 60px;
             display: inline-block;
         }
@@ -112,13 +117,17 @@
             <div class="content-header">
                 <div class="container-fluid">
                     <div class="container mt-2">
-                        <div class="form-group left-align">
-                            <label for="company" class="mr-1" style="margin-left:-60px;margin-top:-11px;">Company Name <span class="text-danger">*</span></label>
-                            <select type="text" id="company" name="company" class="form-control "style="width: 20%;margin-left:-60px;" required>
+                        <div class="form-group left-align" id="company-select">
+                            <!-- <label for="company" class="mr-1" style="margin-left:-60px;margin-top:-11px;">Company Name
+                                <span class="text-danger">*</span></label>
+                            <select type="text" id="company" name="company" class="form-control "
+                                style="width: 20%;margin-left:-60px;" required>
                                 <option value="" selected>Select</option>
-                            </select>
+                            </select> -->
+                            <h4 id="selectedCompany" style="margin-left: 300px;"></h4>
                             <div class="col-12 d-flex justify-content-end mb-2">
-                                <button class="btn btn-primary" style="margin-top:-40px;margin-right: -25px;position: fixed;" id="add">Add</button>
+                                <button class="btn btn-primary"
+                                    style="margin-top:-40px;margin-right: -25px;position: fixed;" id="add">Add</button>
 
                                 <!-- <button class="btn btn-primary" style="margin-top: 20px;" id="add">Add</button> -->
                             </div>
@@ -136,6 +145,8 @@
                         <input type="hidden" id="company_id" name="company_id" class="form-control" required>
                     </div>
                 </div>
+                
+
                 <!-- Main content-->
                 <section class="content">
                     <div class="container-fluid">
@@ -217,8 +228,6 @@
 
     </div>
 
-
-
     <!-- Modal -->
     <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel"
         aria-hidden="true">
@@ -250,7 +259,7 @@
                     </form>
                 </div>
                 <div class="modal-footer">
-                    <button type="button" id="saveupdate"  class="btn btn-primary" style="display: none;">Update</button>
+                    <button type="button" id="saveupdate" class="btn btn-primary" style="display: none;">Update</button>
                     <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> -->
                     <button type="button" id="save" onclick="save_file()" class="btn btn-primary">Save</button>
                 </div>
@@ -263,62 +272,58 @@
     <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
     <script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
     <script>
-        $(document).ready(function () {
-            $('#add').on('click', function () {
-                const modalTitle = document.getElementById('addModalLabel');
-                modalTitle.textContent = 'Add Prompt Template Details';
-                $('#scenario').removeAttr('readonly');
-        $('#prompt').removeAttr('readonly');
-        $('#comments').removeAttr('readonly');
-        $('#saveupdate').hide();
-        $('#save').show();
-                clearFormFields();
-                $('#message-container').empty(); // Clear the message container
-                $('#addModal').modal('show');
-            });
-            $('.modal-footer .btn-secondary, .modal-header .close').on('click', function () {
-                $('#addModal').modal('hide');
-            });
-
-        });
-        document.addEventListener("DOMContentLoaded", function () {
 
-            // clearFormFields();
-            fetchCompanies();
+            var table = $('#promptTable').DataTable();
+            const role = sessionStorage.getItem('userRole');
+            console.log('Current role:', role); // Debug statement to check the role
+            const passedCompanyName = sessionStorage.getItem('company_name')
+            document.getElementById('selectedCompany').innerText = `Company name: ${passedCompanyName}`;
+            const company_id = sessionStorage.getItem('company_id');
+            document.getElementById("company_id").value = company_id;
+
+            data_get_from_db(company_id);
+
+            // if (role === 'superadmin') {
+            //     const storecompany_id = sessionStorage.getItem('company_id');
+            //     data_get_from_db(storecompany_id);
+            //     document.getElementById('company-select').style.display = 'block';
+            //     //var companyId = getCookie('company_id')
+            //     //console.log("company id for superadmin",storecompany_id);
+            //     fetchCompanies();
+
+            // } else {
+            //     document.getElementById('company-select').style.display = 'block';
+            //     const storecompany_id = sessionStorage.getItem('company_id');
+            //     console.log('Current company_id:', storecompany_id); // Debug statement to check the role
+            //     data_get_from_db(storecompany_id);
+            // }
+
+            function moveToNextInput(inputs, currentIndex) {
+                const nextInput = inputs[currentIndex + 1];
+                if (nextInput) {
+                    nextInput.focus();
+                } else {
+                    // Optionally, submit the form or trigger the save button
+                    document.getElementById("save").focus();
+                }
+            }
 
             const companySelect = document.getElementById('company');
             const addPromptForm = document.getElementById('addPromptForm');
-            const table = $('#promptTable').DataTable();
-            // Initialize DataTable at the start
-            companySelect.addEventListener('change', async function () {
-                $("#message-container").empty();
-                const selectedCompanyName = companySelect.options[companySelect.selectedIndex].text;
-                console.log(`Selected Company Name: ${selectedCompanyName}`);
 
-                if (selectedCompanyName !== "Select") {
+       
 
-                    try {
-                        const response = await fetch(`/api/company_id?company_name=${encodeURIComponent(selectedCompanyName)}`);
-                        if (!response.ok) {
-                            contentSection.style.display = 'none';
-                            ("company id does not exist for name does not exist. Please fill in the details.");
-                            const messageContainer = document.getElementById('message-container');
-                            if (messageContainer) {
-                                messageContainer.innerHTML = "<div class='alert alert-danger'>Promptdetails do not exist for this company. Please fill in the details.</div>";
-                            }
-                            throw new Error('Network response was not ok');
-                        }
-                        const data = await response.json();
-                        console.log('data returned', data);
-                        console.log(`Company ID: ${data.company_id}`);
-                        const companyId = data.company_id;
-                        document.getElementById('company_id').value = companyId;
-
-                        if (companyId) {
+  
+        async function data_get_from_db(companyId) {
+            
+            if (companyId) {
                             try {
-                                const Response = await fetch(`/api/get_prompt_templates?company_id=${companyId}&company_name=${selectedCompanyName}`);
+                                const Response = await fetch(`/api/get_prompt_templates?company_id=${companyId}`);
+                                console.log("responce from api :==> ", Response)
                                 const connectorsResponse = await Response.json();
+                                console.log("knowledge data table after connecting to table", connectorsResponse);
                                 console.log("prompt template data table after connecting to table", connectorsResponse);
+                                const table = $('#promptTable').DataTable();  // Initialize DataTable at the start
                                 table.clear();
                                 if (!Array.isArray(connectorsResponse)) {
                                     throw new TypeError('Expected an array of companies');
@@ -356,44 +361,25 @@
 
                             displayErrorMessage("Company id  do not exist for this company. Please fill in the details by clicking add button.");
                         }
-                    } catch (error) {
-                        console.error('No details for this company ID or data documents:', error);
-                        // displayEmptyTable();
-
-                        displayErrorMessage("Prompt details do not exist for this company. Please fill in the details.");
-                        contentSection.style.display = 'none';
-                    }
-                } else {
+            
+        }
 
-                    table.clear().draw();
-                    document.getElementById('contentSection').style.display = 'none';
-                    // Optionally, you might want to clear the form fields as well
-                    clearFormFields();
 
-                }
-            });
-            function displayErrorMessage(message) {
-                const messageContainer = document.getElementById('message-container');
-                if (messageContainer) {
-                    messageContainer.innerHTML = `<div class='alert alert-danger'>${message}</div>`;
-                }
-            }
 
-        });
-       // Delete company
-       function deleteCompany(button) {
+        // Delete company
+        function deleteCompany(button) {
             var companyId = $(button).data('kid-id');
-            console.log("k_id deleted",companyId);
+            console.log("k_id deleted", companyId);
             $.ajax({
                 type: "DELETE",
                 url: `/api/prompt_template_for_del/${companyId}`,
                 success: function () {
                     var table = $('#promptTable').DataTable();
                     table.row($(button).closest('tr')).remove().draw();
-                
+
                     //alert("Company deleted successfully.");
                     const messageContainer = document.getElementById('message-container');
-                        if(messageContainer)
+                    if (messageContainer)
                         messageContainer.innerHTML = `
                 <div class='alert alert-danger'>
                     Prompt details deleted successfully
@@ -411,12 +397,14 @@
             var companyId = $(button).data('kid-id');
             const modalTitle = document.getElementById('addModalLabel');
             modalTitle.textContent = 'View Prompt Template Details';
-            console.log("view promt id (Rowid) ===> " , companyId)
+            console.log("view promt id (Rowid) ===> ", companyId)
+            if(companyId)
+        {
             $.getJSON(`/api/getpromttemplate/${companyId}`, function (company) {
-                console.log("view data scenario  =====>  ",company.scenario)
-                console.log("view data prompt    =====>  ",company.prompt)
-                console.log("view data comments  =====>  ",company.comments)
-                $('#scenario').val(company.scenario).attr('readonly','readonly');
+                console.log("view data scenario  =====>  ", company.scenario)
+                console.log("view data prompt    =====>  ", company.prompt)
+                console.log("view data comments  =====>  ", company.comments)
+                $('#scenario').val(company.scenario).attr('readonly', 'readonly');
                 $('#prompt').val(company.prompts).attr('readonly', 'readonly');
                 $('#comments').val(company.comments).attr('readonly', 'readonly');
                 $('#save').hide();// Disable the "Save" button when the modal opens
@@ -425,107 +413,111 @@
             }).fail(function () {
                 alert("Error retrieving company details.");
             });
-        } 
+        }
+    }
         // Edit company details
 
-function editCompany(button) {
-    var companyId = $(button).data('kid-id');
-    const modalTitle = document.getElementById('addModalLabel');
-    modalTitle.textContent = 'Edit Prompt Templates Details';
+        function editCompany(button) {
+            var companyId = $(button).data('kid-id');
+            const modalTitle = document.getElementById('addModalLabel');
+            modalTitle.textContent = 'Edit Prompt Templates Details';
 
-    console.info("company id ====#>  ", companyId);
-    $.getJSON(`/api/getpromttemplate/${companyId}`, function (company) {
-        $('#scenario').val(company.scenario).removeAttr('readonly');
-        $('#prompt').val(company.prompts).removeAttr('readonly');
-        $('#comments').val(company.comments).removeAttr('readonly');
-        $('#save').hide();
-        $('#saveupdate').show();
+            console.info("company id ====#>  ", companyId);
+            if(companyId)
+        {
+            $.getJSON(`/api/getpromttemplate/${companyId}`, function (company) {
+                $('#scenario').val(company.scenario).removeAttr('readonly');
+                $('#prompt').val(company.prompts).removeAttr('readonly');
+                $('#comments').val(company.comments).removeAttr('readonly');
+                $('#save').hide();
+                $('#saveupdate').show();
 
-        $('#addModal').modal('show');
+                $('#addModal').modal('show');
 
-        // Update the save button to save the edited company
-        $('#saveupdate').off('click').on('click', function () {
-            saveupdate(companyId); // Pass the company ID for updating
-        });
-        console.log(" edit process completed !")
-    }).fail(function () {
-        alert("Error retrieving company details.");
-    });
-}
-
-// Save the updated details
-function saveupdate(companyId) {
-    console.log("k_id for updating process _ id ! ..,..", companyId);
-    const company_id=document.getElementById("company_id").value;
-    var formData = new FormData();
-    formData.append('scenario', $('#scenario').val());
-    formData.append('prompt', $('#prompt').val());
-    formData.append('comments', $('#comments').val());
-    console.log("edited form data saved process begin ! ....", formData);
-
-    $.ajax({
-        url: `/api/putprompttemplates/${companyId}`,
-        type: 'PUT',
-        data: formData,
-        processData: false, // Required for FormData
-        contentType: false, // Required for FormData
-        success: function (response) {
-           // alert('Prompt  details updated successfully.');
-           const messageContainer = document.getElementById('message-container');
-                        if(messageContainer)
+                // Update the save button to save the edited company
+                $('#saveupdate').off('click').on('click', function () {
+                    saveupdate(companyId); // Pass the company ID for updating
+                });
+                console.log(" edit process completed !")
+            }).fail(function () {
+                alert("Error retrieving company details.");
+            });
+        }
+    }
+
+        // Save the updated details
+        function saveupdate(companyId) {
+            console.log("k_id for updating process _ id ! ..,..", companyId);
+            const company_id = document.getElementById("company_id").value;
+            var formData = new FormData();
+            formData.append('scenario', $('#scenario').val());
+            formData.append('prompt', $('#prompt').val());
+            formData.append('comments', $('#comments').val());
+            console.log("edited form data saved process begin ! ....", formData);
+
+            $.ajax({
+                url: `/api/putprompttemplates/${companyId}`,
+                type: 'PUT',
+                data: formData,
+                processData: false, // Required for FormData
+                contentType: false, // Required for FormData
+                success: function (response) {
+                    // alert('Prompt  details updated successfully.');
+                    const messageContainer = document.getElementById('message-container');
+                    if (messageContainer)
                         messageContainer.innerHTML = `
                 <div class='alert alert-success'>
                   Prompt Data updated successfully
-                    <button class='close' onclick='dismissMessage()'>OK</button>
+                    <button class='close' style='font-size:medium;margin-top:6px;' onclick='dismissMessage()'>OK</button>
                 </div>`;
-            $('#addModal').modal('hide'); // Close the modal after saving
-            fetchUpdatedDocuments(company_id);
-        },
-        error: function () {
-            alert('Form has no changes to  update prompt details.');
-        }
-    });
-}
-function dismissMessage() {
-    const messageContainer = document.getElementById('message-container');
-    if (messageContainer) {
-        messageContainer.innerHTML = '';
-    }
-}
-async function  fetchUpdatedDocuments(company_id) {
-    console.log("company_id",company_id);
-    var table = $('#promptTable').DataTable();
-    const Response = await fetch(`/api/prompt_update?company_id=${company_id}`);
-    const connectorsResponse = await Response.json();
-                                console.log("prompt  data table after connecting to table", connectorsResponse);
-                                table.clear();
-                                if (!Array.isArray(connectorsResponse) || connectorsResponse.length === 0) {
-                                    //displayEmptyTable();
-
-                                    displayErrorMessage("Promptdetails do not exist for this company. Please fill in the details.");
-                                    contentSection.style.display = 'none';
-                                } else {
-
-                                    connectorsResponse.forEach((company, index) => {
-                                        table.row.add([
-                                        
-                                            index + 1,
-                                            company.scenario,
-                                            company.prompts,
-                                            `<a href='#' class='btn btn-info btn-sm'data-kid-id='${company.id}' data-action="view" onclick='viewCompany(this)''><i class='fas fa-eye'></i></a>`,
-                                            `<a href='#' class='btn btn-warning btn-sm'data-kid-id='${company.id}' data-action="edit" onclick='editCompany(this)'><i class='fas fa-edit'></i></a>`,
-                                            //`<a href='#' class='btn btn-danger btn-sm' onclick='deleteCompany(${company.company_id})'><i class='fas fa-trash'></i></a>`,
-                                            `<a href='#' class='btn btn-danger btn-sm' data-kid-id='${company.id}' onclick='deleteCompany(this)'><i class='fas fa-trash'></i></a>`,
-                                            company.id
-                                            // "<a href='#' class='btn btn-info btn-sm'><i class='fas fa-eye'></i></a>",
-                                            // "<a href='#' class='btn btn-warning btn-sm'><i class='fas fa-edit'></i></a>",
-                                            // "<a href='#' class='btn btn-danger btn-sm'><i class='fas fa-trash'></i></button>"
-                                        ]).draw(false);
-                                    });
-                                    contentSection.style.display = 'block';
-                                }
-                            } 
-     function save_file() {
+                    $('#addModal').modal('hide'); // Close the modal after saving
+                    fetchUpdatedDocuments(company_id);
+                },
+                error: function () {
+                    alert('Form has no changes to  update prompt details.');
+                }
+            });
+        }
+        function dismissMessage() {
+            const messageContainer = document.getElementById('message-container');
+            if (messageContainer) {
+                messageContainer.innerHTML = '';
+            }
+        }
+        async function fetchUpdatedDocuments(company_id) {
+            console.log("company_id", company_id);
+            var table = $('#promptTable').DataTable();
+            const Response = await fetch(`/api/prompt_update?company_id=${company_id}`);
+            const connectorsResponse = await Response.json();
+            console.log("prompt  data table after connecting to table", connectorsResponse);
+            table.clear();
+            if (!Array.isArray(connectorsResponse) || connectorsResponse.length === 0) {
+                //displayEmptyTable();
+
+                displayErrorMessage("Promptdetails do not exist for this company. Please fill in the details.");
+                contentSection.style.display = 'none';
+            } else {
+
+                connectorsResponse.forEach((company, index) => {
+                    table.row.add([
+
+                        index + 1,
+                        company.scenario,
+                        company.prompts,
+                        `<a href='#' class='btn btn-info btn-sm'data-kid-id='${company.id}' data-action="view" onclick='viewCompany(this)''><i class='fas fa-eye'></i></a>`,
+                        `<a href='#' class='btn btn-warning btn-sm'data-kid-id='${company.id}' data-action="edit" onclick='editCompany(this)'><i class='fas fa-edit'></i></a>`,
+                        //`<a href='#' class='btn btn-danger btn-sm' onclick='deleteCompany(${company.company_id})'><i class='fas fa-trash'></i></a>`,
+                        `<a href='#' class='btn btn-danger btn-sm' data-kid-id='${company.id}' onclick='deleteCompany(this)'><i class='fas fa-trash'></i></a>`,
+                        company.id
+                        // "<a href='#' class='btn btn-info btn-sm'><i class='fas fa-eye'></i></a>",
+                        // "<a href='#' class='btn btn-warning btn-sm'><i class='fas fa-edit'></i></a>",
+                        // "<a href='#' class='btn btn-danger btn-sm'><i class='fas fa-trash'></i></button>"
+                    ]).draw(false);
+                });
+                contentSection.style.display = 'block';
+            }
+        }
+        function save_file() {
             const form = document.getElementById('addPromptForm');
 
             // Check if the form is valid
@@ -538,7 +530,7 @@ async function  fetchUpdatedDocuments(company_id) {
             const scenario = $('#scenario').val();
             const prompt = $('#prompt').val();
             const comments = $('#comments').val();
-        
+
             // const view = "<a href='#' class='btn btn-info btn-sm'><i class='fas fa-eye'></i></a>";
             // const edit = "<a href='#' class='btn btn-warning btn-sm'><i class='fas fa-edit'></i></a>";
             // const dele = "<a href='#' class='btn btn-danger btn-sm'><i class='fas fa-trash'></i></a>";
@@ -550,7 +542,7 @@ async function  fetchUpdatedDocuments(company_id) {
                 formData.append("prompt", prompt),
                 formData.append("comments", comments),
 
-                //const formData = new FormData();
+                //const formData = new FormData(); 
                 fetch('/api/save_prompt_details', {
                     method: 'POST',
                     body: formData
@@ -563,12 +555,12 @@ async function  fetchUpdatedDocuments(company_id) {
                     })
                     .then(data => {
                         const row_id = data.row_id;
-                        console.log("rowid",row_id);
+                        console.log("rowid", row_id);
                         var table = $('#promptTable').DataTable();
                         var rowCount = table.rows().count();
-                        const view=`<a href='#' class='btn btn-info btn-sm'data-kid-id='${row_id}' data-action="view" onclick='viewCompany(this)''><i class='fas fa-eye'></i></a>`;
-            const edit=`<a href='#' class='btn btn-warning btn-sm'data-kid-id='${row_id}' data-action="edit" onclick='editCompany(this)'><i class='fas fa-edit'></i></a>`;
-            const dele= `<a href='#' class='btn btn-danger btn-sm' data-kid-id='${row_id}' onclick='deleteCompany(this)'><i class='fas fa-trash'></i></a>`;
+                        const view = `<a href='#' class='btn btn-info btn-sm'data-kid-id='${row_id}' data-action="view" onclick='viewCompany(this)''><i class='fas fa-eye'></i></a>`;
+                        const edit = `<a href='#' class='btn btn-warning btn-sm'data-kid-id='${row_id}' data-action="edit" onclick='editCompany(this)'><i class='fas fa-edit'></i></a>`;
+                        const dele = `<a href='#' class='btn btn-danger btn-sm' data-kid-id='${row_id}' onclick='deleteCompany(this)'><i class='fas fa-trash'></i></a>`;
                         table.row.add([
                             rowCount + 1,
                             scenario,
@@ -578,12 +570,12 @@ async function  fetchUpdatedDocuments(company_id) {
                             dele
                         ]).draw(false);
 
-                       // const messageContainer = document.getElementById('message-container');
-                        if(messageContainer)
-                        messageContainer.innerHTML = `
+                        // const messageContainer = document.getElementById('message-container');
+                        if (messageContainer)
+                            messageContainer.innerHTML = `
                 <div class='alert alert-success'>
                     Data saved successfully
-                    <button class='close' onclick='dismissMessage()'>OK</button>
+                    <button class='close' style='font-size:medium;margin-top:6px;' onclick='dismissMessage()'>OK</button>
                 </div>`;
                         $('#addModal').modal('hide');
                         document.getElementById('contentSection').style.display = 'block'; // Show the table section
@@ -619,6 +611,27 @@ async function  fetchUpdatedDocuments(company_id) {
             document.getElementById('comments').value = "";
 
         }
+
+
+        $(document).ready(function () {
+            $('#add').on('click', function () {
+                const modalTitle = document.getElementById('addModalLabel');
+                modalTitle.textContent = 'Add Prompt Template Details';
+                $('#scenario').removeAttr('readonly');
+                $('#prompt').removeAttr('readonly');
+                $('#comments').removeAttr('readonly');
+                $('#saveupdate').hide();
+                $('#save').show();
+                clearFormFields();
+                $('#message-container').empty(); // Clear the message container
+                $('#addModal').modal('show');
+            });
+            $('.modal-footer .btn-secondary, .modal-header .close').on('click', function () {
+                $('#addModal').modal('hide');
+            });
+
+        });
+
     </script>
 </body>