Redmind_GPT_API / templates /knowledgebase.html
Redmind's picture
Update templates/knowledgebase.html
90f5deb verified
raw
history blame
33.4 kB
<!DOCTYPE html>
<html>
<head>
<title>Knowledge Base</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Include AdminLTE CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/adminlte.min.css">
<!-- Include DataTables CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
<!-- Include AdminLTE JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/adminlte.min.js"></script>
<!-- Include DataTables JS -->
<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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<style>
body {
background-color: transparent !important;
}
.content-wrapper {
flex: 1;
overflow-y: auto;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
.modal-content {
background-color: #fff;
}
.content-header {
padding: 1rem;
}
h1 {
text-align: center;
margin-bottom: 30px;
}
.card {
padding: 0;
margin-top: -15px;
margin-left: -40px;
}
.table-responsive {
width: 100%;
overflow-x: auto;
/*overflow-y: scroll;*/
/* Allows horizontal scrolling if necessary */
}
.table,
.table-bordered {
width: 100%;
border-collapse: collapse;
margin-right: 7.5px;
}
.text-wrap {
white-space: normal !important;
word-break: break-word;
}
div.dataTables_wrapper div.dataTables_length select {
width: 60px;
display: inline-block;
}
th {
white-space: nowrap;
}
th:nth-child(1),
td:nth-child(1) {
/* Sno column */
width: 2%;
}
th:nth-child(2),
td:nth-child(2) {
/* Document Name column */
width: auto;
}
th:nth-child(3),
td:nth-child(3) {
/* Document Description column */
width: auto;
}
th:nth-child(4),
td:nth-child(4) {
/* Document Version column */
width: 20%;
}
th:nth-child(5),
td:nth-child(5) {
/* VectorDB Flag column */
width: auto;
}
th:nth-child(6),
td:nth-child(6) {
/* View column */
width: 10%;
}
th:nth-child(7),
td:nth-child(7) {
/* Edit column */
width: 10%;
}
th:nth-child(8),
td:nth-child(8) {
/* Delete column */
width: auto;
}
.alert {
position: relative;
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
</style>
</head>
<body>
{% include 'sidepane.html' %}
<div class="wrapper">
<div class="main-header" style="border-bottom: none;">
<div class="container mt-2">
<div id="company-select" class="form-group left-align">
<!-- <label for="company" class="mr-1" style="margin-left:-40px; margin-top: 12px;">Company Name <span class="text-danger">*</span></label>
<select type="text" id="company" name="company" class="form-control" style="width:20%;margin-left:-40px;"required>
<option value="" selected>Select</option>
</select> -->
<div class="col-12 d-flex justify-content-end mb-3">
<button class="btn btn-primary" style="margin-top:10px;margin-right: -10px;position: fixed;"
id="add" data-action="add">Add</button>
</div>
</div>
</div>
<div class="row">
<div id="message-container" style="margin-left: 200px;width:600px;"></div>
</div>
<h3 id="company_name" style="margin-left: 400px;">{{company_name}}</h3>
<section class="content" id="contentSection" style="display: none;">
<div class="container-fluid">
<div>
<div class="form-group">
<!-- <label for="company_id">company_id</label>--->
<input type="hidden" id="company_id" name="company_id" class="form-control" required>
</div>
<h4 id="selectedCompany" style="margin-left: 300px;"></h4>
<div class="row" style="margin-top: 50px;">
<div class="col-12">
<div class="card">
<div id="message-container">
<div class="card-body table-container">
<table id="knowledgeTable" class="table table-bordered table-striped">
<thead>
<tr>
<th>Sno</th>
<th>Document Name</th>
<th>Document Description</th>
<th>Document Version</th>
<th>VectorDB Flag</th>
<th>View</th>
<th>Edit</th>
<th>Delete</th>
<!-- <th style="display:none;">Company ID</th> -->
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addModalLabel">Add Document Details</h5>
<button type="button" class="btn-close" data-dismiss="modal">
<span aria-hidden="true" data-backdrop="static" data-keyboard="false"></span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<!-- <label for="company_id">company_id</label>--->
<input type="hidden" id="company_id" name="company_id" class="form-control" required>
</div>
<form id="documentForm">
<div class="form-group">
<label for="uploadFile">Upload File<span class="text-danger">*</span></label>
<span id="file-name"></span>
<input type="hidden" id="file_name" name="file_name" class="form-control" required>
<input type="file" class="form-control-file" id="uploadFile" name="uploadFile" required
accept=".pdf,.doc,.docx">
<small class="form-text text-muted">Accepted formats: .pdf, .doc, .docx</small>
</div>
<div class="form-group">
<label for="documentName">Document Name<span class="text-danger">*</span></label>
<input type="text" class="form-control" id="documentName" name="documentName" required>
</div>
<div class="form-group">
<label for="documentDescription">Document Description<span
class="text-danger">*</span></label>
<textarea class="form-control" id="documentDescription" name="documentDescription"
rows="3" required></textarea>
</div>
<div class="form-group">
<label for="department">Department<span class="text-danger">*</span></label>
<input type="text" class="form-control" id="department" name="department" required>
</div>
<div class="form-group">
<label for="version">Version<span class="text-danger">*</span></label>
<input type="text" class="form-control" id="version" name="version" required>
</div>
<div class="form-group">
<label for="lastUpdated">Last Updated<span class="text-danger">*</span></label>
<input type="text" class="form-control" id="lastUpdated" name="lastUpdated" required>
</div>
</form>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> -->
<button type="button" id="saveupdate" class="btn btn-primary"
style="display: none;">Update</button>
<button type="button" id="save" onclick="save_file()" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</div>
{%include 'footer.html'%}
<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>
var table = $('#knowledgeTable').DataTable();
const role = sessionStorage.getItem('userRole');
const company_name=sessionStorage.getItem('company_name');
console.log("company_name",company_name);
// document.getElementById('company_name').textContent = company_name;
document.addEventListener("DOMContentLoaded", function () {
now = new Date().toISOString().replace('T', ' ').substr(0, 19);
document.getElementById('lastUpdated').value = now;
const inputs = document.querySelectorAll("#documentForm input, textarea");
inputs.forEach((input, index) => {
input.addEventListener("keydown", function (event) {
if (event.key === "Enter") {
event.preventDefault();
moveToNextInput(inputs, index);
}
});
});
const passedCompanyName=sessionStorage.getItem('company_name')
document.getElementById('selectedCompany').innerText = `Company name: ${passedCompanyName}`;
console.log('Current role:', role); // Debug statement to check the role
const company_id=sessionStorage.getItem('company_id');
document.getElementById("company_id").value=company_id;
console.log("inside knowledgebaae sessionstorage",company_id);
data_get_from_db(company_id);
const companySelect = document.getElementById('company');
const documentForm = document.getElementById('documentForm');
});
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();
}
}
async function data_get_from_db(company_id) {
if (company_id) {
try {
const Response = await fetch(`/api/document_upload?company_id=${company_id}`);
console.log("responce from api :==> ", Response)
const connectorsResponse = await Response.json();
console.log("knowledge data table after connecting to table", connectorsResponse);
const table = $('#knowledgeTable').DataTable(); // Initialize DataTable at the start
table.clear();
if (!Array.isArray(connectorsResponse) || connectorsResponse.length === 0) {
// displayEmptyTable();
displayErrorMessage("Document details do not exist for this company. Please fill in the details.");
contentSection.style.display = 'none';
} else {
console.log('company data retrived succesfully ! .........')
connectorsResponse.forEach((company, index) => {
table.row.add([
index + 1,
company.document_name,
company.document_desc,
company.version,
company.vectorDBflag,
`<a href='#' class='btn btn-info btn-sm'data-kid-id='${company.row_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.row_id}' data-action="edit" onclick='editCompany(this)'><i class='fas fa-edit'></i></a>`,
`<a href='#' class='btn btn-danger btn-sm' data-kid-id='${company.row_id}' onclick='deleteCompany(this)'><i class='fas fa-trash'></i></a>`,
company.row_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';
}
} catch (error) {
console.error('Error fetching company documents:', error);
//displayEmptyTable();
displayErrorMessage("Document details1 do not exist for this company. Please fill in the details.");
contentSection.style.display = 'none';
}
} else {
// displayEmptyTable();
displayErrorMessage("Details for knowledgebase do not exist for this company. Please fill in the details.");
}
}
function displayErrorMessage(message) {
const messageContainer = document.getElementById('message-container');
if (messageContainer) {
messageContainer.innerHTML = `<div class='alert alert-danger'>${message}</div>`;
}
}
function clearFormFields() {
document.getElementById('file-name').textContent = ""
document.getElementById('uploadFile').value = "";
document.getElementById('documentName').value = "";
document.getElementById('documentDescription').value = "";
document.getElementById('department').value = "";
document.getElementById('version').value = "";
// document.getElementById('lastUpdated').value = "";
}
$(document).ready(function () {
// Show modal function
$('#add').on('click', function () {
$('#documentName').removeAttr('readonly');
$('#documentDescription').removeAttr('readonly');
$('#department').removeAttr('readonly');
$('#version').removeAttr('readonly');
$('#lastUpdated').removeAttr('readonly');
const modalTitle = document.getElementById('addModalLabel');
modalTitle.textContent = 'Add Document Details';
$('#save').show();
$('#uploadFile').show();
$('#saveupdate').hide();
clearFormFields();
$('#message-container').empty(); // Clear the message container
$('#addModal').modal('show');
});
$('.modal-footer .btn-secondary, .modal-header .btn-close').on('click', function () {
$('#addModal').modal('hide');
});
// $('#knowledgeTable').DataTable({
// autoWidth: false
// });
});
function viewCompany(button) {
var companyId = $(button).data('kid-id');
const modalTitle = document.getElementById('addModalLabel');
modalTitle.textContent = 'View Document Details';
if(companyId)
{
$.getJSON(`/api/getknowledgebase/${companyId}`, function (company) {
$('#uploadFile').hide();
$('#file-name').text(company.file_path).attr('readonly', 'readonly');
$('#documentName').val(company.document_name).attr('readonly', 'readonly');
$('#documentDescription').val(company.document_desc).attr('readonly', 'readonly');
$('#department').val(company.department).attr('readonly', 'readonly');
$('#version').val(company.version).attr('readonly', 'readonly');
//$('#lastUpdated').val(company.last_updated).attr('readonly', 'readonly');
var lastUpdated = company.last_updated;
$('#lastUpdated').val(lastUpdated).attr('readonly', 'readonly');
$('#save').hide();// Disable the "Save" button when the modal opens
$('#addModal').modal('show');
}).fail(function () {
alert("Error retrieving knowledge base check the sidepane working.");
});
}
}
// Edit knowledge base details
function editCompany(button) {
var companyId = $(button).data('kid-id');
const modalTitle = document.getElementById('addModalLabel');
modalTitle.textContent = 'Edit Document Details';
// Fetch company details by ID
if(companyId)
{
$.getJSON(`/api/getknowledgebase/${companyId}`, function (company) {
const fileName = company.file_path.split('/').pop();
const fileContent = new Blob([""], { type: 'text/plain' });
const file = new File([fileContent], fileName, { type: fileContent.type });
const dataTransfer = new DataTransfer();
dataTransfer.items.add(file);
// Set the file input's files property to the created file
const fileInput = document.getElementById('uploadFile');
fileInput.files = dataTransfer.files;
// Check if the input element is of type 'file'
if (fileInput.type === 'file') {
console.log("The input is of type 'file'.");
} else {
console.log("The input is NOT of type 'file'.");
}
// Check if the value is of type 'File'
const files = fileInput.files;
if (files.length > 0 && files[0] instanceof File) {
console.log("The value is of type 'File':", files[0].name);
} else {
console.log("No file is selected or the value is not of type 'File'.");
}
$('#uploadFileLabel').text(files[0].name);
$('#uploadFile').text(files[0].name)
$('#documentName').val(company.document_name);
$('#documentDescription').val(company.document_desc);
$('#department').val(company.department);
$('#version').val(company.version);
$('#lastUpdated').val(company.last_updated).attr('readonly', 'readonly');
$('#company_id').val(company.company_id);
// Show/hide appropriate elements
$('#uploadFile').show(); // Hide the file upload field
$('#save').hide(); // Hide the default save button
$('#saveupdate').show(); // Show the update button
// Ensure fields are editable
$('#documentName').removeAttr('readonly');
$('#documentDescription').removeAttr('readonly');
$('#department').removeAttr('readonly');
$('#version').removeAttr('readonly');
// $('#lastUpdated').removeAttr('readonly');
$('#company_id').val(company.company_id); // Ensure company_id is included if necessary
// Show the modal
$('#addModal').modal('show');
// Set up the click event for the update button
$('#saveupdate').off('click').on('click', function () {
saveupdate(companyId, files[0].name); // Pass the company ID for updating
});
}).fail(function () {
alert("Error retrieving knowledge base error 2 details.");
});
}
}
// Delete company
function deleteCompany(button) {
var companyId = $(button).data('kid-id');
console.log("k_id deleted", companyId);
$.ajax({
type: "DELETE",
url: `/api/delknowledgebase/${companyId}`,
success: function () {
var table = $('#knowledgeTable').DataTable();
table.row($(button).closest('tr')).remove().draw();
const messageContainer = document.getElementById('message-container');
if (messageContainer)
messageContainer.innerHTML = `
<div class='alert alert-danger'>
Prompt details deleted successfully
<button class='close' onclick='dismissMessage()'>OK</button>
</div>`;
// alert("Company deleted successfully.");
//fetchCompanies(); // Refresh the table
},
error: function (xhr) {
alert("Error deleting company: " + xhr.responseJSON.detail);
}
});
}
function saveupdate(companyId, filename) {
const formData = new FormData();
const fileInput = document.getElementById("uploadFile");
const uploadFile = fileInput.files[0]; // Get the file object
const company_id = document.getElementById("company_id").value;
formData.append("company_id", $('#company_id').val());
formData.append("documentName", $('#documentName').val());
formData.append("documentDescription", $('#documentDescription').val());
formData.append("department", $('#department').val());
formData.append("version", $('#version').val());
formData.append("vectorDBFlag", 'NO');
formData.append("lastUpdated", $('#lastUpdated').val());
console.log("company_id to table refresh", company_id)
// Append the file only if it exists, otherwise, append the filename
if (uploadFile) {
formData.append("file_path", uploadFile); // Append the file object
} else {
formData.append("file_path", filename); // Append the existing filename
}
$.ajax({
url: `/api/putknowledgebase/${companyId}`,
type: 'PUT',
data: formData,
processData: false, // Required for FormData
contentType: false, // Required for FormData
success: function (response) {
// alert('Knowledgebase details updated successfully.');
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>
</div>`;
$('#addModal').modal('hide'); // Close the modal after saving
fetchUpdatedDocuments(company_id);
},
error: function () {
alert('Form has no changes to update knowledge base details.');
}
});
}
async function fetchUpdatedDocuments(company_id) {
console.log("company_id", company_id);
var table = $('#knowledgeTable').DataTable();
const Response = await fetch(`/api/document_update?company_id=${company_id}`);
const connectorsResponse = await Response.json();
console.log("knowledge data table after connecting to table", connectorsResponse);
table.clear();
if (!Array.isArray(connectorsResponse) || connectorsResponse.length === 0) {
//displayEmptyTable();
displayErrorMessage("Document details 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.document_name,
company.document_desc,
company.version,
company.vectorDBflag,
`<a href='#' class='btn btn-info btn-sm'data-kid-id='${company.row_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.row_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.row_id}' onclick='deleteCompany(this)'><i class='fas fa-trash'></i></a>`,
company.row_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('documentForm');
// Check if the form is valid
if (!form.checkValidity()) {
// If the form is invalid, show validation messages and stop the submission
form.reportValidity();
return;
}
const uploadFile = document.getElementById("uploadFile").files[0];
const documentName = document.getElementById("documentName").value;
const documentDescription = document.getElementById("documentDescription").value;
const department = document.getElementById("department").value;
const version = document.getElementById("version").value;
const lastUpdated = document.getElementById("lastUpdated").value;
const company_id = document.getElementById("company_id").value;
//const formData = new FormData();
var formData = new FormData($('#documentForm')[0]);
const vectorDBFlag = "NO"; // Example value
// 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>";
formData.append("uploadFile", uploadFile);
formData.append("documentName", documentName);
formData.append("documentDescription", documentDescription);
formData.append("department", department);
formData.append("version", version);
formData.append("lastUpdated", lastUpdated);
formData.append("vectorDBflag", vectorDBFlag);
formData.append("company_id", company_id);
console.log("formdata",formData);
fetch('/upload_document', {
method: 'POST',
body: formData
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
const row_id=data.row_id;
var table = $('#knowledgeTable').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>`;
table.row.add([
rowCount + 1,
documentName,
documentDescription,
version,
vectorDBFlag,
view,
edit,
dele
]).draw(false);
const messageContainer = document.getElementById('message-container');
if(messageContainer)
messageContainer.innerHTML = `
<div class='alert alert-success'>
Knowledgebase Data saved successfully
<button class='close' style='font-size:medium;margin-top:6px;' onclick='dismissMessage()'>OK</button>
</div>`;
// alert('Document saved successfully');
$('#addModal').modal('hide');
document.getElementById('contentSection').style.display = 'block'; // Show the table section
})
.catch(error => console.error('Error:', error));
}
function dismissMessage() {
const messageContainer = document.getElementById('message-container');
if (messageContainer) {
messageContainer.innerHTML = '';
}
}
</script>
</body>
</html>