Hugging Face's logo

Spaces:
Rsnarsna
/
Redmind_GPT_API
Sleeping

App Files Community
1
Redmind commited on
Commit
b65eeaf
·
verified ·
1 Parent(s): 7ed9450

Update templates/API_connectors.html

Browse files
Files changed (1) hide show
  1. templates/API_connectors.html +223 -243
templates/API_connectors.html CHANGED
@@ -1,5 +1,6 @@
1
  <!DOCTYPE html>
2
  <html>
 
3
  <head>
4
  <title>API Connectors</title>
5
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
@@ -15,11 +16,13 @@
15
  .form-group {
16
  margin-top: -10px;
17
  }
 
18
  .card {
19
  padding: 0;
20
  margin-top: -15px;
21
  margin-left: -40px;
22
  }
 
23
  .header-row {
24
  display: flex;
25
  justify-content: space-between;
@@ -47,7 +50,7 @@
47
  padding: 5px;
48
  }
49
 
50
- th,
51
  td {
52
  white-space: nowrap;
53
  }
@@ -57,10 +60,12 @@
57
  /* Sno column */
58
  width: 5%;
59
  }
60
- div.dataTables_wrapper div.dataTables_length select{
 
61
  width: 60px;
62
  display: inline-block;
63
  }
 
64
  th:nth-child(2),
65
  td:nth-child(2) {
66
  /* API Name column */
@@ -84,6 +89,7 @@
84
  /* View column */
85
  width: 5%;
86
  }
 
87
  th:nth-child(6),
88
  td:nth-child(6) {
89
  /* View column */
@@ -93,11 +99,11 @@
93
  .reduced-width {
94
  width: 25%;
95
  }
96
- div.dataTables_wrapper div.dataTables_length select{
 
97
  width: 60px;
98
  display: inline-block;
99
  }
100
-
101
  </style>
102
  </head>
103
 
@@ -105,18 +111,17 @@
105
  {% include 'sidepane.html' %}
106
 
107
  <div class="wrapper">
108
- <div class="main-header"style="border-bottom: none;">
109
  <!-- Content Header (Page header) -->
110
  <div class="content-header">
111
  <div class="container-fluid">
112
  <div class="container mt-2">
113
- <div class="form-group left-align">
114
- <label for="company" class="mr-1" style="margin-left:-60px;margin-top: 5px;">Company Name <span class="text-danger">*</span></label>
115
- <select type="text" id="company" name="company" class="form-control"style="width: 20%;margin-left:-60px;" required>
116
- <option value="" selected>Select</option>
117
- </select>
118
  <div class="col-12 d-flex justify-content-end mb-3">
119
- <button class="btn btn-primary" style="margin-top: -40px;margin-right: -25px;position: fixed;" id="add">Add</button>
 
120
  </div>
121
  </div>
122
  <div class="row">
@@ -125,6 +130,7 @@
125
  </div>
126
  </div>
127
  </div>
 
128
  <section class="content" id="contentSection" style="display: none;">
129
  <div class="container-fluid">
130
  <div class="form-group">
@@ -132,6 +138,8 @@
132
  <input type="hidden" id="company_id" name="company_id" class="form-control" required>
133
  </div>
134
  </div>
 
 
135
  <!-- Main content -->
136
  <section class="content">
137
  <div class="container-fluid">
@@ -235,7 +243,7 @@
235
  </div>
236
  <div class="modal-footer">
237
  <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> -->
238
- <button type="button" id="saveupdate" class="btn btn-primary" style="display: none;">Update</button>
239
  <button type="button" id="save" onclick="save_file()" class="btn btn-primary">Save</button>
240
  </div>
241
  </div>
@@ -247,6 +255,8 @@
247
  <!-- Include DataTables JS and your custom script -->
248
  <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
249
  <script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
 
 
250
  <script>
251
  $(document).ready(function () {
252
  // Show modal function
@@ -267,97 +277,35 @@
267
  // });
268
 
269
  });
270
- document.addEventListener("DOMContentLoaded", function () {
271
-
272
- // clearFormFields();
273
- fetchCompanies();
 
 
 
 
 
 
 
 
274
 
 
275
  const companySelect = document.getElementById('company');
276
  const documentForm = document.getElementById('documentForm');
277
- const table = $('#apiTable').DataTable();
278
- // Initialize DataTable at the start
279
- companySelect.addEventListener('change', async function () {
280
- $("#message-container").empty();
281
- const selectedCompanyName = companySelect.options[companySelect.selectedIndex].text;
282
- console.log(`Selected Company Name: ${selectedCompanyName}`);
283
-
284
- if (selectedCompanyName !== "Select") {
285
-
286
- try {
287
- const response = await fetch(`/api/company_id?company_name=${encodeURIComponent(selectedCompanyName)}`);
288
- if (!response.ok) {
289
- contentSection.style.display = 'none';
290
- ("Company id does not exist for this company name does not exist. Please fill in the details.");
291
- const messageContainer = document.getElementById('message-container');
292
- if (messageContainer) {
293
- messageContainer.innerHTML = "<div class='alert alert-danger'>API details do not exist for this company. Please fill in the details.</div>";
294
- }
295
- throw new Error('Network response was not ok');
296
- }
297
- const data = await response.json();
298
- console.log('data returned', data);
299
- console.log(`Company ID: ${data.company_id}`);
300
- const companyId = data.company_id;
301
- document.getElementById('company_id').value = companyId;
302
-
303
- if (companyId) {
304
- try {
305
- const Response = await fetch(`/api/get_api_connectors?company_id=${companyId}&company_name=${selectedCompanyName}`);
306
- const connectorsResponse = await Response.json();
307
- console.log("api connector data table after connecting to table", connectorsResponse);
308
- table.clear();
309
- if (!Array.isArray(connectorsResponse)) {
310
- throw new TypeError('Expected an array of companies');
311
-
312
- displayErrorMessage("Data do not exist for this company. Please fill in the details by clicking add button.");
313
- contentSection.style.display = 'none';
314
- } else {
315
-
316
- connectorsResponse.forEach((company, index) => {
317
- table.row.add([
318
- index + 1,
319
- company.APIName,
320
- company.APIEndpoint,
321
- `<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>`,
322
- `<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>`,
323
- `<a href='#' class='btn btn-danger btn-sm' data-kid-id='${company.row_id}' onclick='deleteCompany(this)'><i class='fas fa-trash'></i></a>`,
324
- // "<a href='#' class='btn btn-info btn-sm'><i class='fas fa-eye' fa-eye'></i></a>",
325
- // "<a href='#' class='btn btn-warning btn-sm'><i class='fas fa-edit'></i></a>",
326
- // "<a href='#' class='btn btn-danger btn-sm'><i class='fas fa-trash'></i></button>"
327
- ]).draw(false);
328
- });
329
- contentSection.style.display = 'block';
330
- }
331
-
332
- } catch (error) {
333
- console.error('Error fetching company documents:', error);
334
- //displayEmptyTable();
335
-
336
- displayErrorMessage("Data do not exist for this company. Please fill in the details by clicking add button.");
337
- contentSection.style.display = 'none';
338
- }
339
- }
340
- else {
341
- // displayEmptyTable();
342
-
343
- displayErrorMessage("Document details2 for knowledge do not exist for this company. Please fill in the details.");
344
- }
345
- } catch (error) {
346
- console.error('No details for this company ID or data documents:', error);
347
- // displayEmptyTable();
348
-
349
- displayErrorMessage("Document details3 do not exist for this company. Please fill in the details.");
350
- contentSection.style.display = 'none';
351
- }
352
- } else {
353
 
354
- table.clear().draw();
355
- document.getElementById('contentSection').style.display = 'none';
356
- // Optionally, you might want to clear the form fields as well
357
- clearFormFields();
358
 
359
- }
360
- });
 
 
 
 
 
 
 
 
 
361
  function displayErrorMessage(message) {
362
  const messageContainer = document.getElementById('message-container');
363
  if (messageContainer) {
@@ -365,16 +313,67 @@
365
  }
366
  }
367
 
368
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
369
  function viewCompany(button) {
370
  var companyId = $(button).data('kid-id');
371
  const modalTitle = document.getElementById('addModalLabel');
372
  modalTitle.textContent = 'View API Details';
 
 
373
  $.getJSON(`/api/viewapiconnectors/${companyId}`, function (company) {
374
-
375
- $('#APIName').val(company.api_name).attr('readonly','readonly');
376
  $('#APIEndpoint').val(company.api_endpoint).attr('readonly', 'readonly');
377
- $('#Auth_Bearer') .val(company.auth_token).attr('readonly', 'readonly') ;
378
  $('#Inputjson').val(company.input_param).attr('readonly', 'readonly');
379
  $('#OutputJson').val(company.output_json).attr('readonly', 'readonly');
380
  $('#Description').val(company.description).attr('readonly', 'readonly');
@@ -385,132 +384,133 @@
385
  alert("Error retrieving API details.");
386
  });
387
  }
388
-
389
  // Edit knowledge base details
390
- function editCompany(button) {
391
- var companyId = $(button).data('kid-id');
392
- const modalTitle = document.getElementById('addModalLabel');
393
- modalTitle.textContent = 'Edit API Details';
394
-
395
- // Fetch company details by ID
396
- $.getJSON(`/api/viewapiconnectors/${companyId}`, function (company) {
397
-
398
- $('#APIName').val(company.api_name);
 
399
  $('#APIEndpoint').val(company.api_endpoint);
400
- $('#Auth_Bearer') .val(company.auth_token);
401
  $('#Inputjson').val(company.input_param);
402
  $('#OutputJson').val(company.output_json);
403
  $('#Description').val(company.description);
404
-
405
- // Show/hide appropriate elements
406
- $('#uploadFile').show(); // Hide the file upload field
407
- $('#save').hide(); // Hide the default save button
408
- $('#saveupdate').show(); // Show the update button
409
-
410
- // Ensure fields are editable
411
- $('#APIName').removeAttr('readonly');
412
- $('#APIEndpoint').removeAttr('readonly');
413
- $('#Auth_Bearer').removeAttr('readonly');
414
- $('#Inputjson').removeAttr('readonly');
415
- $('#OutputJson').removeAttr('readonly');
416
- $('#Description').removeAttr('readonly');
417
 
418
-
419
- // Show the modal
420
- $('#addModal').modal('show');
421
-
422
- // Set up the click event for the update button
423
- $('#saveupdate').off('click').on('click', function () {
424
- saveupdate(companyId); // Pass the company ID for updating
425
- });
426
- }).fail(function () {
427
- alert("Error in retrieving API details.");
428
- });
429
- }
430
-
431
-
432
- function saveupdate(companyId, filename) {
433
- const formData = new FormData();
434
-
435
- const company_id=document.getElementById("company_id").value;
436
- formData.append("company_id", $('#company_id').val());
437
- formData.append("APIName", $('#APIName').val());
438
- formData.append("APIEndpoint", $('#APIEndpoint').val());
439
- formData.append("Auth_Bearer", $('#Auth_Bearer').val());
440
- formData.append("Inputjson", $('#Inputjson').val());
441
- formData.append("OutputJson", $('#OutputJson').val());
442
- formData.append("Description", $('#Description').val());
443
- console.log("company_id to table refresh",company_id)
444
- const messageContainer = document.getElementById('message-container');
445
- $.ajax({
446
- url: `/api/editapiconnectors/${companyId}`,
447
- type: 'PUT',
448
- data: formData,
449
- processData: false, // Required for FormData
450
- contentType: false, // Required for FormData
451
- success: function (response) {
452
- // alert('Knowledgebase details updated successfully.');
453
-
454
- if(messageContainer)
 
 
 
 
 
 
 
 
 
 
 
 
 
455
  messageContainer.innerHTML = `
456
  <div class='alert alert-success'>
457
  API Data Updated successfully
458
  <button class='close' onclick='dismissMessage()'>OK</button>
459
  </div>`;
460
- $('#addModal').modal('hide'); // Close the modal after saving
461
- fetchUpdatedDocuments(company_id);
462
- },
463
- error: function () {
464
- alert('Form has no changes to update knowledge base details.');
465
- }
466
- });
467
- }
468
- function dismissMessage() {
469
- const messageContainer = document.getElementById('message-container');
470
- if (messageContainer) {
471
- messageContainer.innerHTML = '';
472
- }
473
- }
474
- async function fetchUpdatedDocuments(company_id) {
475
- console.log("company_id:", company_id);
476
-
477
- var table = $('#apiTable').DataTable();
478
- try {
479
- const response = await fetch(`/api/api_updatetable?company_id=${company_id}`);
480
- const connectorsResponse = await response.json();
481
-
482
- console.log("Fetched connectorsResponse:", connectorsResponse);
483
-
484
- table.clear(); // Clear existing data in the table
485
-
486
- if (!Array.isArray(connectorsResponse) || connectorsResponse.length === 0) {
487
- displayErrorMessage("Knowledgebase details do not exist for this company. Please fill in the details.");
488
- contentSection.style.display = 'none';
489
- } else {
490
- connectorsResponse.forEach((company, index) => {
491
- table.row.add([
492
- index + 1,
493
- company.api_name,
494
- company.api_endpoint,
495
- `<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>`,
496
- `<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>`,
497
- `<a href='#' class='btn btn-danger btn-sm' data-kid-id='${company.row_id}' onclick='deleteCompany(this)'><i class='fas fa-trash'></i></a>`,
498
- company.row_id
499
- ]);
500
  });
501
- table.draw(false); // Draw the table with the new data
502
- contentSection.style.display = 'block';
503
  }
504
- } catch (error) {
505
- console.error("Error fetching updated documents:", error);
506
- displayErrorMessage("There was an error fetching the updated documents.");
507
- }
508
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
509
 
510
- // Delete company
511
  function deleteCompany(button) {
512
  var companyId = $(button).data('kid-id');
513
- console.log("k_id deleted",companyId);
514
  $.ajax({
515
  type: "DELETE",
516
  url: `/api/deleteapi/${companyId}`,
@@ -518,7 +518,7 @@ async function fetchUpdatedDocuments(company_id) {
518
  var table = $('#apiTable').DataTable();
519
  table.row($(button).closest('tr')).remove().draw();
520
  const messageContainer = document.getElementById('message-container');
521
- if(messageContainer)
522
  messageContainer.innerHTML = `
523
  <div class='alert alert-danger'>
524
  API Data Deleted successfully
@@ -531,7 +531,7 @@ async function fetchUpdatedDocuments(company_id) {
531
  alert("Error deleting company: " + xhr.responseJSON.detail);
532
  }
533
  });
534
- }
535
 
536
  function save_file() {
537
  const form = document.getElementById('documentForm');
@@ -549,9 +549,6 @@ async function fetchUpdatedDocuments(company_id) {
549
  const Inputjson = $('#Inputjson').val();
550
  const OutputJson = $('#OutputJson').val();
551
  const Description = $('#Description').val();
552
- const view = "<a href='#' class='btn btn-info btn-sm'><i class='fas fa-eye'></i></a>";
553
- const edit = "<a href='#' class='btn btn-warning btn-sm'><i class='fas fa-edit'></i></a>";
554
- const dele = "<a href='#' class='btn btn-danger btn-sm'><i class='fas fa-trash'></i></a>";
555
 
556
  var formData = new FormData($('#documentForm')[0]);
557
 
@@ -572,11 +569,15 @@ async function fetchUpdatedDocuments(company_id) {
572
  if (!response.ok) {
573
  throw new Error('Network response was not ok');
574
  }
575
- return response.text();
576
  })
577
  .then(data => {
 
578
  var table = $('#apiTable').DataTable();
579
  var rowCount = table.rows().count();
 
 
 
580
  table.row.add([
581
  rowCount + 1,
582
  APIName,
@@ -586,8 +587,8 @@ async function fetchUpdatedDocuments(company_id) {
586
  dele
587
  ]).draw(false);
588
 
589
- // alert('Document saved successfully');
590
- if(messageContainer)
591
  messageContainer.innerHTML = `
592
  <div class='alert alert-success'>
593
  API Data saved successfully
@@ -598,29 +599,8 @@ async function fetchUpdatedDocuments(company_id) {
598
  })
599
  .catch(error => console.error('Error:', error));
600
  }
601
- async function fetchCompanies() {
602
- try {
603
- const response = await fetch('/api/companies');
604
- if (!response.ok) {
605
- throw new Error('Network response was not ok');
606
- }
607
- const data = await response.json();
608
- displayCompanies(data.companies);
609
- } catch (error) {
610
- console.error('Error fetching companies:', error);
611
- }
612
- }
613
 
614
- function displayCompanies(companies) {
615
- const companySelect = document.getElementById('company');
616
- companySelect.innerHTML = '<option value="" selected>Select</option>'; // Reset the dropdown
617
- companies.forEach(company => {
618
- const option = document.createElement('option');
619
- option.value = company.name;
620
- option.textContent = company.name;
621
- companySelect.appendChild(option);
622
- });
623
- }
624
  function clearFormFields() {
625
  document.getElementById('APIName').value = "";
626
  document.getElementById('APIEndpoint').value = "";
@@ -630,7 +610,7 @@ async function fetchUpdatedDocuments(company_id) {
630
  document.getElementById('Description').value = "";
631
  }
632
 
633
-
634
  </script>
635
  </body>
636
 
 
1
  <!DOCTYPE html>
2
  <html>
3
+
4
  <head>
5
  <title>API Connectors</title>
6
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
16
  .form-group {
17
  margin-top: -10px;
18
  }
19
+
20
  .card {
21
  padding: 0;
22
  margin-top: -15px;
23
  margin-left: -40px;
24
  }
25
+
26
  .header-row {
27
  display: flex;
28
  justify-content: space-between;
 
50
  padding: 5px;
51
  }
52
 
53
+ th,
54
  td {
55
  white-space: nowrap;
56
  }
 
60
  /* Sno column */
61
  width: 5%;
62
  }
63
+
64
+ div.dataTables_wrapper div.dataTables_length select {
65
  width: 60px;
66
  display: inline-block;
67
  }
68
+
69
  th:nth-child(2),
70
  td:nth-child(2) {
71
  /* API Name column */
 
89
  /* View column */
90
  width: 5%;
91
  }
92
+
93
  th:nth-child(6),
94
  td:nth-child(6) {
95
  /* View column */
 
99
  .reduced-width {
100
  width: 25%;
101
  }
102
+
103
+ div.dataTables_wrapper div.dataTables_length select {
104
  width: 60px;
105
  display: inline-block;
106
  }
 
107
  </style>
108
  </head>
109
 
 
111
  {% include 'sidepane.html' %}
112
 
113
  <div class="wrapper">
114
+ <div class="main-header" style="border-bottom: none;">
115
  <!-- Content Header (Page header) -->
116
  <div class="content-header">
117
  <div class="container-fluid">
118
  <div class="container mt-2">
119
+ <div class="form-group left-align"id="company-select">
120
+ <h4 id="selectedCompany" style="margin-left: 300px;"></h4>
121
+
 
 
122
  <div class="col-12 d-flex justify-content-end mb-3">
123
+ <button class="btn btn-primary"
124
+ style="margin-top: -40px;margin-right: -25px;position: fixed;" id="add">Add</button>
125
  </div>
126
  </div>
127
  <div class="row">
 
130
  </div>
131
  </div>
132
  </div>
133
+ <h3 id="company_name" style="margin-left: 400px;">{{company_name}}</h3>
134
  <section class="content" id="contentSection" style="display: none;">
135
  <div class="container-fluid">
136
  <div class="form-group">
 
138
  <input type="hidden" id="company_id" name="company_id" class="form-control" required>
139
  </div>
140
  </div>
141
+
142
+
143
  <!-- Main content -->
144
  <section class="content">
145
  <div class="container-fluid">
 
243
  </div>
244
  <div class="modal-footer">
245
  <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> -->
246
+ <button type="button" id="saveupdate" class="btn btn-primary" style="display: none;">Update</button>
247
  <button type="button" id="save" onclick="save_file()" class="btn btn-primary">Save</button>
248
  </div>
249
  </div>
 
255
  <!-- Include DataTables JS and your custom script -->
256
  <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
257
  <script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
258
+
259
+
260
  <script>
261
  $(document).ready(function () {
262
  // Show modal function
 
277
  // });
278
 
279
  });
280
+ var table = $('#apiTable').DataTable();
281
+ const role = sessionStorage.getItem('userRole');
282
+ console.log('Current role:', role); // Debug statement to check the role
283
+ const company_name=sessionStorage.getItem('company_name');
284
+ console.log("company_name",company_name);
285
+ // document.getElementById('company_name').textContent = company_name;
286
+ const passedCompanyName = sessionStorage.getItem('company_name')
287
+ document.getElementById('selectedCompany').innerText = `Company name: ${passedCompanyName}`;
288
+ const company_id = sessionStorage.getItem('company_id');
289
+ document.getElementById("company_id").value = company_id;
290
+
291
+ data_get_from_db(company_id);
292
 
293
+
294
  const companySelect = document.getElementById('company');
295
  const documentForm = document.getElementById('documentForm');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
296
 
 
 
 
 
297
 
298
+ function moveToNextInput(inputs, currentIndex) {
299
+ const nextInput = inputs[currentIndex + 1];
300
+ if (nextInput) {
301
+ nextInput.focus();
302
+ } else {
303
+ // Optionally, submit the form or trigger the save button
304
+ document.getElementById("save").focus();
305
+ }
306
+ }
307
+
308
+
309
  function displayErrorMessage(message) {
310
  const messageContainer = document.getElementById('message-container');
311
  if (messageContainer) {
 
313
  }
314
  }
315
 
316
+
317
+
318
+
319
+ async function data_get_from_db(companyId) {
320
+ if (companyId) {
321
+ try {
322
+ console.log('comp_id',companyId)
323
+ const Response = await fetch(`/api/get_api_connectors?company_id=${companyId}`);
324
+ console.log("responce from api :==> ", Response)
325
+ const connectorsResponse = await Response.json();
326
+ console.log("knowledge data table after connecting to table", connectorsResponse);
327
+ console.log("api connector data table after connecting to table", connectorsResponse);
328
+ const table = $('#apiTable').DataTable(); // Initialize DataTable at the start
329
+ table.clear();
330
+ if (!Array.isArray(connectorsResponse)) {
331
+ throw new TypeError('Expected an array of companies');
332
+
333
+ displayErrorMessage("Data do not exist for this company. Please fill in the details by clicking add button.");
334
+ contentSection.style.display = 'none';
335
+ } else {
336
+
337
+ connectorsResponse.forEach((company, index) => {
338
+ table.row.add([
339
+ index + 1,
340
+ company.APIName,
341
+ company.APIEndpoint,
342
+ `<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>`,
343
+ `<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>`,
344
+ `<a href='#' class='btn btn-danger btn-sm' data-kid-id='${company.row_id}' onclick='deleteCompany(this)'><i class='fas fa-trash'></i></a>`,
345
+ ]).draw(false);
346
+ });
347
+ contentSection.style.display = 'block';
348
+ }
349
+
350
+ } catch (error) {
351
+ console.error('Error fetching company documents:', error);
352
+ //displayEmptyTable();
353
+
354
+ displayErrorMessage("Data do not exist for this company. Please fill in the details by clicking add button.");
355
+ contentSection.style.display = 'none';
356
+ }
357
+ }
358
+ else {
359
+ // displayEmptyTable();
360
+
361
+ displayErrorMessage("Document details2 for knowledge do not exist for this company. Please fill in the details.");
362
+ }
363
+
364
+ }
365
+
366
  function viewCompany(button) {
367
  var companyId = $(button).data('kid-id');
368
  const modalTitle = document.getElementById('addModalLabel');
369
  modalTitle.textContent = 'View API Details';
370
+ if(companyId)
371
+ {
372
  $.getJSON(`/api/viewapiconnectors/${companyId}`, function (company) {
373
+
374
+ $('#APIName').val(company.api_name).attr('readonly', 'readonly');
375
  $('#APIEndpoint').val(company.api_endpoint).attr('readonly', 'readonly');
376
+ $('#Auth_Bearer').val(company.auth_token).attr('readonly', 'readonly');
377
  $('#Inputjson').val(company.input_param).attr('readonly', 'readonly');
378
  $('#OutputJson').val(company.output_json).attr('readonly', 'readonly');
379
  $('#Description').val(company.description).attr('readonly', 'readonly');
 
384
  alert("Error retrieving API details.");
385
  });
386
  }
387
+ }
388
  // Edit knowledge base details
389
+ function editCompany(button) {
390
+ var companyId = $(button).data('kid-id');
391
+ const modalTitle = document.getElementById('addModalLabel');
392
+ modalTitle.textContent = 'Edit API Details';
393
+ if(companyId)
394
+ {
395
+ // Fetch company details by ID
396
+ $.getJSON(`/api/viewapiconnectors/${companyId}`, function (company) {
397
+
398
+ $('#APIName').val(company.api_name);
399
  $('#APIEndpoint').val(company.api_endpoint);
400
+ $('#Auth_Bearer').val(company.auth_token);
401
  $('#Inputjson').val(company.input_param);
402
  $('#OutputJson').val(company.output_json);
403
  $('#Description').val(company.description);
 
 
 
 
 
 
 
 
 
 
 
 
 
404
 
405
+ // Show/hide appropriate elements
406
+ $('#uploadFile').show(); // Hide the file upload field
407
+ $('#save').hide(); // Hide the default save button
408
+ $('#saveupdate').show(); // Show the update button
409
+
410
+ // Ensure fields are editable
411
+ $('#APIName').removeAttr('readonly');
412
+ $('#APIEndpoint').removeAttr('readonly');
413
+ $('#Auth_Bearer').removeAttr('readonly');
414
+ $('#Inputjson').removeAttr('readonly');
415
+ $('#OutputJson').removeAttr('readonly');
416
+ $('#Description').removeAttr('readonly');
417
+
418
+
419
+ // Show the modal
420
+ $('#addModal').modal('show');
421
+
422
+ // Set up the click event for the update button
423
+ $('#saveupdate').off('click').on('click', function () {
424
+ saveupdate(companyId); // Pass the company ID for updating
425
+ });
426
+ }).fail(function () {
427
+ alert("Error in retrieving API details.");
428
+ });
429
+ }
430
+ }
431
+
432
+ function saveupdate(companyId, filename) {
433
+ const formData = new FormData();
434
+
435
+ const company_id = document.getElementById("company_id").value;
436
+ formData.append("company_id", $('#company_id').val());
437
+ formData.append("APIName", $('#APIName').val());
438
+ formData.append("APIEndpoint", $('#APIEndpoint').val());
439
+ formData.append("Auth_Bearer", $('#Auth_Bearer').val());
440
+ formData.append("Inputjson", $('#Inputjson').val());
441
+ formData.append("OutputJson", $('#OutputJson').val());
442
+ formData.append("Description", $('#Description').val());
443
+ console.log("company_id to table refresh", company_id)
444
+ const messageContainer = document.getElementById('message-container');
445
+ $.ajax({
446
+ url: `/api/editapiconnectors/${companyId}`,
447
+ type: 'PUT',
448
+ data: formData,
449
+ processData: false, // Required for FormData
450
+ contentType: false, // Required for FormData
451
+ success: function (response) {
452
+ // alert('Knowledgebase details updated successfully.');
453
+
454
+ if (messageContainer)
455
  messageContainer.innerHTML = `
456
  <div class='alert alert-success'>
457
  API Data Updated successfully
458
  <button class='close' onclick='dismissMessage()'>OK</button>
459
  </div>`;
460
+ $('#addModal').modal('hide'); // Close the modal after saving
461
+ fetchUpdatedDocuments(company_id);
462
+ },
463
+ error: function () {
464
+ alert('Form has no changes to update knowledge base details.');
465
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
466
  });
 
 
467
  }
468
+ function dismissMessage() {
469
+ const messageContainer = document.getElementById('message-container');
470
+ if (messageContainer) {
471
+ messageContainer.innerHTML = '';
472
+ }
473
+ }
474
+ async function fetchUpdatedDocuments(company_id) {
475
+ console.log("company_id:", company_id);
476
+
477
+ var table = $('#apiTable').DataTable();
478
+ try {
479
+ const response = await fetch(`/api/api_updatetable?company_id=${company_id}`);
480
+ const connectorsResponse = await response.json();
481
+
482
+ console.log("Fetched connectorsResponse:", connectorsResponse);
483
+
484
+ table.clear(); // Clear existing data in the table
485
+
486
+ if (!Array.isArray(connectorsResponse) || connectorsResponse.length === 0) {
487
+ displayErrorMessage("Knowledgebase details do not exist for this company. Please fill in the details.");
488
+ contentSection.style.display = 'none';
489
+ } else {
490
+ connectorsResponse.forEach((company, index) => {
491
+ table.row.add([
492
+ index + 1,
493
+ company.api_name,
494
+ company.api_endpoint,
495
+ `<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>`,
496
+ `<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>`,
497
+ `<a href='#' class='btn btn-danger btn-sm' data-kid-id='${company.row_id}' onclick='deleteCompany(this)'><i class='fas fa-trash'></i></a>`,
498
+ company.row_id
499
+ ]);
500
+ });
501
+ table.draw(false); // Draw the table with the new data
502
+ contentSection.style.display = 'block';
503
+ }
504
+ } catch (error) {
505
+ console.error("Error fetching updated documents:", error);
506
+ displayErrorMessage("There was an error fetching the updated documents.");
507
+ }
508
+ }
509
 
510
+ // Delete company
511
  function deleteCompany(button) {
512
  var companyId = $(button).data('kid-id');
513
+ console.log("k_id deleted", companyId);
514
  $.ajax({
515
  type: "DELETE",
516
  url: `/api/deleteapi/${companyId}`,
 
518
  var table = $('#apiTable').DataTable();
519
  table.row($(button).closest('tr')).remove().draw();
520
  const messageContainer = document.getElementById('message-container');
521
+ if (messageContainer)
522
  messageContainer.innerHTML = `
523
  <div class='alert alert-danger'>
524
  API Data Deleted successfully
 
531
  alert("Error deleting company: " + xhr.responseJSON.detail);
532
  }
533
  });
534
+ }
535
 
536
  function save_file() {
537
  const form = document.getElementById('documentForm');
 
549
  const Inputjson = $('#Inputjson').val();
550
  const OutputJson = $('#OutputJson').val();
551
  const Description = $('#Description').val();
 
 
 
552
 
553
  var formData = new FormData($('#documentForm')[0]);
554
 
 
569
  if (!response.ok) {
570
  throw new Error('Network response was not ok');
571
  }
572
+ return response.json();
573
  })
574
  .then(data => {
575
+ row_id = data.row_id;
576
  var table = $('#apiTable').DataTable();
577
  var rowCount = table.rows().count();
578
+ 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>`;
579
+ 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>`;
580
+ 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>`;
581
  table.row.add([
582
  rowCount + 1,
583
  APIName,
 
587
  dele
588
  ]).draw(false);
589
 
590
+ // alert('Document saved successfully');
591
+ if (messageContainer)
592
  messageContainer.innerHTML = `
593
  <div class='alert alert-success'>
594
  API Data saved successfully
 
599
  })
600
  .catch(error => console.error('Error:', error));
601
  }
 
 
 
 
 
 
 
 
 
 
 
 
602
 
603
+
 
 
 
 
 
 
 
 
 
604
  function clearFormFields() {
605
  document.getElementById('APIName').value = "";
606
  document.getElementById('APIEndpoint').value = "";
 
610
  document.getElementById('Description').value = "";
611
  }
612
 
613
+
614
  </script>
615
  </body>
616