Skip to content

Commit

Permalink
Update UI for constraint page
Browse files Browse the repository at this point in the history 
Implement the constraint action functionalitie
  • Loading branch information
vc-urvin committed Jun 28, 2023
1 parent 0d62d4f commit 624c907
Show file tree
Hide file tree
Showing 4 changed files with 161 additions and 84 deletions.
59 changes: 42 additions & 17 deletions src/Controllers/DisplayController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ public function index()

/**
* Get audit table list
* @return JsonResponse
* @return JsonResponse
*/
public function getAudit() : JsonResponse
public function getAudit(): JsonResponse
{
$columnName = 'status';
$noConstraint = '<img src=' . asset("auditor/icon/close.svg") . ' alt="key" class="m-auto" />';
Expand All @@ -51,9 +51,9 @@ public function getAudit() : JsonResponse
/**
* Get table data
* @param string $tableName
* @return JsonResponse
* @return JsonResponse
*/
public function getTableData(string $tableName) : JsonResponse
public function getTableData(string $tableName): JsonResponse
{
return response()->json(array(
"data" => $this->tableRules($tableName)
Expand All @@ -63,9 +63,9 @@ public function getTableData(string $tableName) : JsonResponse
/**
* Get Constraint list
* @param string $tableName
* @return JsonResponse
* @return JsonResponse
*/
public function getTableConstraint(string $tableName) : JsonResponse
public function getTableConstraint(string $tableName): JsonResponse
{

$noConstraintFields = $this->getNoConstraintFields($tableName);
Expand All @@ -80,26 +80,30 @@ public function getTableConstraint(string $tableName) : JsonResponse
'index' => $this->getConstraintField($tableName, Constant::CONSTRAINT_INDEX_KEY)
]
];

$response = [];
$greenKey = '<img src=' . asset("auditor/icon/green-key.svg") . ' alt="key" class="m-auto" />';
$grayKey = '<img src=' . asset("auditor/icon/gray-key.svg") . ' alt="key" class="m-auto" />';

foreach ($data['fields'] as $table) {

$primaryKey = $indexing = $uniqueKey = $foreignKey = "-";
$primaryKey = $indexKey = $uniqueKey = $foreignKey = "-";


if (in_array($table->COLUMN_NAME, $data['constrain']['primary'])) {
$primaryKey = $greenKey;
} else if (in_array($table->COLUMN_NAME, $data['constrain']['unique'])) {
}

if (in_array($table->COLUMN_NAME, $data['constrain']['unique'])) {
$uniqueKey = $grayKey;
} else if (in_array($table->COLUMN_NAME, $data['constrain']['index'])) {
$indexing = $grayKey;
}

if (in_array($table->COLUMN_NAME, $data['constrain']['index'])) {
$indexKey = $grayKey;
}

foreach ($data['constrain']['foreign'] as $foreign) {
if ($table->COLUMN_NAME === $foreign['column_name']) {
$foreignKeyToottip = '<div class="inline-flex">
$foreignKeyTooltip = '<div class="inline-flex">
<img src=' . asset("auditor/icon/gray-key.svg") . ' alt="key" class="mr-2">
<div class="relative flex flex-col items-center group">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
Expand All @@ -111,15 +115,36 @@ public function getTableConstraint(string $tableName) : JsonResponse
</div>
</div>
</div>';
$foreignKey = $foreignKeyToottip;
$foreignKey = $foreignKeyTooltip;
}
}

if($primaryKey === "-" && $indexing === "-" && $uniqueKey === "-" && $foreignKey === "-") {
$indexing = '<img src=' . asset("auditor/icon/add.png") . ' alt="key" class="m-auto add-constraint-'.$table->COLUMN_NAME.'" style="height:30px" onclick="addIndex(`'.$table->COLUMN_NAME.'`)"/>';
foreach ($constraintList as $constraint) {
switch ($constraint) {
case Constant::CONSTRAINT_PRIMARY_KEY:
if (in_array($table->COLUMN_NAME, $noConstraintFields['integer'])) {
$primaryKey = '<img src=' . asset("auditor/icon/add.svg") . ' alt="key" class="m-auto add-constraint-' . $table->COLUMN_NAME . '-' . Constant::CONSTRAINT_PRIMARY_KEY . '" style="height:30px;cursor: pointer;" onclick="add(`' . $table->COLUMN_NAME . '`, `' . Constant::CONSTRAINT_PRIMARY_KEY . '`)"/>';
}
break;
case Constant::CONSTRAINT_INDEX_KEY:
if (in_array($table->COLUMN_NAME, $noConstraintFields['mix'])) {
$indexKey = '<img src=' . asset("auditor/icon/add.svg") . ' alt="key" class="m-auto add-constraint-' . $table->COLUMN_NAME . '-' . Constant::CONSTRAINT_INDEX_KEY . '" style="height:30px;cursor: pointer;" onclick="add(`' . $table->COLUMN_NAME . '`, `' . Constant::CONSTRAINT_INDEX_KEY . '`)"/>';
}
break;
case Constant::CONSTRAINT_UNIQUE_KEY:
if (in_array($table->COLUMN_NAME, $noConstraintFields['mix'])) {
$fields = $this->getUniqueFields($tableName, $noConstraintFields['mix']);
if (in_array($table->COLUMN_NAME, $fields)) {
$uniqueKey = '<img src=' . asset("auditor/icon/add.svg") . ' alt="key" class="m-auto add-constraint-' . $table->COLUMN_NAME . '-' . Constant::CONSTRAINT_UNIQUE_KEY . '" style="height:30px;cursor: pointer;" onclick="add(`' . $table->COLUMN_NAME . '`, `' . Constant::CONSTRAINT_UNIQUE_KEY . '`)"/>';
}
}
break;
default:
break;
}
}

$response[] = ["column" => $table->COLUMN_NAME, "primaryKey" => $primaryKey, "indexing" => $indexing, "uniqueKey" => $uniqueKey, "foreignKey" => $foreignKey];
$response[] = ["column" => $table->COLUMN_NAME, "primaryKey" => $primaryKey, "indexing" => $indexKey, "uniqueKey" => $uniqueKey, "foreignKey" => $foreignKey];
}

return response()->json(array(
Expand All @@ -130,7 +155,7 @@ public function getTableConstraint(string $tableName) : JsonResponse
public function changeConstraint(Request $request)
{
$data = $request->all();
$this->addConstraint($data['table_name'], $data['colum_name'], "INDEX");
$this->addConstraint($data['table_name'], $data['colum_name'], $data['constraint']);
return $data['colum_name'];
}
}
Binary file removed src/resource/images/add.png
View file
Binary file not shown.
10 changes: 10 additions & 0 deletions src/resource/images/add.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
176 changes: 109 additions & 67 deletions src/views/auditor/pages/audit.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,51 +2,71 @@

@push('css')
<style>
#myDialog {
width: 300px;
#confDialog {
padding: 20px;
background-color: #f2f2f2;
background-color: black;
border: 1px solid #ccc;
color: white;
width: 500px;
}
#myDialog h2 {
#confDialog h2 {
margin-top: 0;
margin-bottom: 20px;
font-size: 20px;
color: cadetblue;
}
#myDialog button {
#confDialog p {
margin-bottom: 10px;
}
#confDialog button {
margin-top: 10px;
color: white;
}
/* Toast Container */
.toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
background-color: green;
display: none;
}
/* Toast Message */
.toast {
background-color: #333;
color: #fff;
padding: 15px;
border-radius: 5px;
font-family: Arial, sans-serif;
font-size: 14px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
opacity: 0;
transition: opacity 0.3s ease-in-out;
.toastCustom {
background-color: green;
color: #fff;
padding: 15px;
border-radius: 5px;
font-family: Arial, sans-serif;
font-size: 14px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: opacity 0.3s ease-in-out;
width: 250px;
text-align: center;
}
/* Toast Animation */
.toast.show {
opacity: 1;
.toastCustom.show {
opacity: 1px !important;
}
.colum-value {
display: none;
}
.constraint-value {
display: none;
}
</style>
@endpush

@section('section')
<div id="toasts"></div>
<div id="toasts"></div>
<div class="tabs flex items-center pt-3 mb-3">
<button data-tab-value="#tab_standard"
class="active uppercase d-flex items-center me-3 text-[13px] pb-2 relative custom-action">
Expand Down Expand Up @@ -131,7 +151,7 @@ class="btn dropdown-toggle bg-light-black border-0 rounded-2xl text-white w-64 t
<tr>
<th class="text-center uppercase text-sm">Columns</th>
<th class="text-center uppercase text-sm">Primary key</th>
<th class="text-center uppercase text-sm">Indexing</th>
<th class="text-center uppercase text-sm">Index Key</th>
<th class="text-center uppercase text-sm">Unique key</th>
<th class="text-center uppercase text-sm">Foreign key</th>
</tr>
Expand All @@ -141,18 +161,18 @@ class="btn dropdown-toggle bg-light-black border-0 rounded-2xl text-white w-64 t
</div>

<div class="toast-container">
<div class="toast">This is a toast message</div>
</div>

<dialog id="myDialog">
<h2>Dialog Title</h2>
<p>This is the content of the dialog.</p>


<div class="toastCustom"></div>
</div>

<button onclick="closeDialog()">Close</button>
</dialog>
<dialog id="confDialog">
<h2 class="title-dialog"></h2>
<p class="description-dialog"></p>
<button onclick="confirmDialog()" class="btn btn-success confirm-dialog-btn">Yes</button>
<button onclick="closeDialog()" class="btn btn-dangers">Close</button>
</dialog>

<p class="colum-value"></p>
<p class="constraint-value"></p>
@endsection

@section('script')
Expand Down Expand Up @@ -181,7 +201,6 @@ class="btn dropdown-toggle bg-light-black border-0 rounded-2xl text-white w-64 t
});
$(document).ready(function() {
// Standards
var table = $('#standards').DataTable({
scrollX: true,
Expand Down Expand Up @@ -239,12 +258,8 @@ className: 'dt-control',
// Constraint
$('#tbl-dropdown').on('change', function() {
changeTable(this.value);
});
});
setTimeout(function() {
var toast = document.querySelector('.toast');
toast.classList.add('show');
}, 1000);
});
function format(d) {
Expand Down Expand Up @@ -380,39 +395,66 @@ function changeTable(tableName) {
});
}
// function openDialog() {
// var dialog = document.getElementById("myDialog");
// dialog.showModal();
// }
function openDialog() {
var dialog = document.getElementById("confDialog");
dialog.showModal();
}
function closeDialog() {
var dialog = document.getElementById("confDialog");
dialog.close();
}
function confirmDialog() {
var dialog = document.getElementById("confDialog");
dialog.close();
addConstraint();
}
// function closeDialog() {
// var dialog = document.getElementById("myDialog");
// dialog.close();
// }
function add(columnName, constraint) {
$('#confDialog h2').replaceWith("<h2>ADD " + constraint.toUpperCase() + " KEY</h2>");
$('#confDialog p').replaceWith('<p>Do you want to add ' + constraint.toLowerCase() +
' in <span style="color:red;">' + columnName + '</span> field?</p>');
$('.colum-value').replaceWith("<p class='colum-value'>" + columnName + "</p>");
$('.constraint-value').replaceWith("<p class='constraint-value'>" + constraint + "</p>");
openDialog();
}
function addIndex(columnName) {
function addConstraint() {
columnName = $('.colum-value').text();
constraint = $('.constraint-value').text();
$.ajax({
url: 'api/change-constraint',
type: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
data: JSON.stringify({"colum_name" : columnName, "table_name" : $('#tbl-dropdown').val(), "constraint" : 'index'}),
success: function(response) {
if(response) {
var newElement = $('<img src="auditor/icon/gray-key.svg" alt="key" class="m-auto" />');
$(".add-constraint-"+response).replaceWith(newElement);
url: 'api/change-constraint',
type: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
data: JSON.stringify({
"colum_name": columnName,
"table_name": $('#tbl-dropdown').val(),
"constraint": constraint
}),
success: function(response) {
if (response) {
var newElement = $('<img src="auditor/icon/gray-key.svg" alt="key" class="m-auto" />');
$(".add-constraint-" + response + '-' + constraint).replaceWith(newElement);
$(".toast-container").css("display", "block");
$(".toastCustom").replaceWith("<p class='toastCustom'>" + constraint +
" Added Successfully</p>");
setTimeout(function() {
$(".toast-container").css("display", "none");;
}, 1000);
}
},
error: function(xhr, status, error) {
console.error(error);
}
},
error: function(xhr, status, error) {
console.error(error);
}
});
}
$(document).on("click", ".custom-action", function() {
$("#constraints").DataTable().draw();
$("#standards").DataTable().draw();
Expand Down

0 comments on commit 624c907

Please sign in to comment.