Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add CRUD operations in Results view #4458

Draft
wants to merge 13 commits into
base: master
Choose a base branch
from
Draft

Add CRUD operations in Results view #4458

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
8166734
custom topic for Show Contents
MinaDoncheva Nov 14, 2024
3a9e904
makes topic absolute
MinaDoncheva Nov 14, 2024
15dab53
adds editRow topic
MinaDoncheva Nov 15, 2024
2037648
adds Action button to rusilt table
MinaDoncheva Nov 15, 2024
671f656
separates executeQuery function from messagehub
MinaDoncheva Nov 15, 2024
21f1bc2
adds edit and delete functionalities handling to controller
MinaDoncheva Nov 19, 2024
5a5409d
adds function to extract ID field
MinaDoncheva Nov 19, 2024
819a711
removes the id field from editable fields
MinaDoncheva Nov 19, 2024
acf02a5
adds delete functionality
MinaDoncheva Nov 20, 2024
0a389d2
removes comments
MinaDoncheva Nov 20, 2024
6e6cac9
refreshes show content view after edit/delete
MinaDoncheva Nov 21, 2024
40e022e
close dialog after edit/delete confirmation
MinaDoncheva Nov 21, 2024
70347c3
removes debugger points
MinaDoncheva Nov 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 15 additions & 11 deletions ...e/ide-ui-database/src/main/resources/META-INF/dirigible/ide-database/explorer/explorer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,8 +170,10 @@ database.controller('DatabaseController', function ($scope, $http, messageHub) {
let topLevelSchemaNode = node.parents.find(parentId => tree.get_node(parentId).original.kind === 'schema');
let topLevelSchemaName = tree.get_text(topLevelSchemaNode);

let sqlCommand = "SELECT * FROM \"" + topLevelSchemaName + "\"" + "." + "\"" + node.original.text + "\";\n";
messageHub.postMessage('database.sql.execute', sqlCommand);
messageHub.postMessage('result-view.database.sql.showContent', {
schemaName: topLevelSchemaName,
tableName: node.original.text
});
}.bind(this)
};

Expand Down Expand Up @@ -635,16 +637,18 @@ database.controller('DatabaseController', function ($scope, $http, messageHub) {
}
};

let anonymizeMenu = function(node, data, type) {
let anonymizeMenu = function (node, data, type) {
let tree = $.jstree.reference(data.reference);
let columnNode = tree.get_node(data.reference);
let tableNode = findParentTableOfColumn(tree, node); //tree.get_node(tree.get_node(node.parent).parent);
let schemaNode = findParentSchemaOfColumn(tree, node); //tree.get_node(tree.get_node(tree.get_node(node.parent).parent).parent);

let primaryKeyName = tree.get_node(tree.get_node(node.parent).children[0]).original.name;
tree.get_node(node.parent).children.forEach(c => {if (tree.get_node(c).original.key) {
primaryKeyName = tree.get_node(c).original.name;
}});
tree.get_node(node.parent).children.forEach(c => {
if (tree.get_node(c).original.key) {
primaryKeyName = tree.get_node(c).original.name;
}
});

let parameters = {};
parameters.datasource = $scope.selectedDatasource;
Expand All @@ -657,7 +661,7 @@ database.controller('DatabaseController', function ($scope, $http, messageHub) {
messageHub.postMessage('database.data.anonymize.column', parameters);
}

let findParentTableOfColumn = function(tree, node) {
let findParentTableOfColumn = function (tree, node) {
let maybe = tree.get_node(node.parent);
if (!maybe.original.type && "Columns" === maybe.text) {
maybe = tree.get_node(maybe.parent);
Expand All @@ -668,7 +672,7 @@ database.controller('DatabaseController', function ($scope, $http, messageHub) {
return findParentTableOfColumn(tree, maybe);
}

let findParentSchemaOfColumn = function(tree, node) {
let findParentSchemaOfColumn = function (tree, node) {
let maybe = tree.get_node(node.parent);
if (!maybe.original.type && "Columns" === maybe.text) {
maybe = tree.get_node(maybe.parent);
Expand Down Expand Up @@ -749,7 +753,7 @@ database.controller('DatabaseController', function ($scope, $http, messageHub) {
});
}

let expandColumn = function(parent, column) {
let expandColumn = function (parent, column) {
let position = 'last';
let icon = "sap-icon--grid";
if (column.key) {
Expand Down Expand Up @@ -1007,12 +1011,12 @@ database.controller('DatabaseController', function ($scope, $http, messageHub) {
},
true
);

$scope.refresh = function () {
$scope.invalidateCache();
$scope.getDatabases();
}

$scope.invalidateCache = function () {
$http.get(databasesInvalidateSvcUrl);
}
Expand Down
114 changes: 110 additions & 4 deletions components/ide/ide-ui-result/src/main/resources/META-INF/dirigible/ide-result/js/result.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,100 @@ resultView.controller('DatabaseResultController', ['$scope', '$http', 'messageHu

$scope.procedureResults = [];
$scope.hasMultipleProcedureResults = false;
$scope.isEditDialogOpen = false;
$scope.isDeleteDialogOpen = false;
$scope.schemaName = null;
$scope.tableName = null;
$scope.selectedRow = null;
$scope.selectedRowOriginal = null;

$scope.editRow = function (row) {
console.log("Row object:", row);
$scope.selectedRow = angular.copy(row);
$scope.selectedRowOriginal = angular.copy(row);

console.log("Selected Row:", $scope.selectedRow);

$scope.isEditDialogOpen = true;
};


$scope.saveRow = function () {
if (!$scope.selectedRow) {
console.error("No row selected for editing.");
return;
}

const updatedData = $scope.selectedRow;
const setClauses = Object.keys(updatedData)
.filter(key => updatedData[key] !== $scope.selectedRowOriginal[key])
.map(key => `"${key}" = '${updatedData[key]}'`)
.join(", ");

if (!setClauses) {
console.log("No changes to update.");
return;
}

const primaryKeyColumn = findIdKey(updatedData);
const condition = `"${primaryKeyColumn}" = '${updatedData[primaryKeyColumn]}'`;

const sqlCommand =
`UPDATE "${$scope.schemaName}"."${$scope.tableName}"\n` +
`SET ${setClauses}\n` +
`WHERE ${condition};`;

executeQuery({ data: sqlCommand });

$scope.isEditDialogOpen = false;
messageHub.postMessage('database.sql.showContent', {
schemaName: $scope.schemaName,
tableName: $scope.tableName
});

};

$scope.closeEditDialog = function () {
$scope.isEditDialogOpen = false;

};

$scope.openDeleteDialog = function (row) {
$scope.selectedRow = angular.copy(row);
$scope.isDeleteDialogOpen = true;
};

$scope.confirmDelete = function () {
if (!$scope.selectedRow) {
console.error("No row selected for editing.");
return;
}

const primaryKeyColumn = findIdKey($scope.selectedRow);
const condition = `"${primaryKeyColumn}" = '${$scope.selectedRow[primaryKeyColumn]}'`;

const sqlCommand =
`DELETE FROM "${$scope.schemaName}"."${$scope.tableName}" WHERE ${condition};`;

executeQuery({ data: sqlCommand });

$scope.isDeleteDialogOpen = false;
messageHub.postMessage('database.sql.showContent', {
schemaName: $scope.schemaName,
tableName: $scope.tableName
});
};

$scope.closeDeleteDialog = function () {
$scope.selectedRow = null;
$scope.isDeleteDialogOpen = false;

};

function findIdKey(dataObject) {
const idKey = Object.keys(dataObject).find(key => key.toUpperCase().includes('ID'));
return idKey;
}

$http.get("", { headers: { "X-CSRF-Token": "Fetch" } }).then(function (response) {
csrfToken = response.headers()["x-csrf-token"];
Expand Down Expand Up @@ -61,7 +155,8 @@ resultView.controller('DatabaseResultController', ['$scope', '$http', 'messageHu
$scope.$apply();
};

messageHub.onDidReceiveMessage("database.sql.execute", function (command) {
function executeQuery(command) {

$scope.state.error = false;
$scope.showProgress();
let url = "/services/data/" + $scope.datasource;
Expand Down Expand Up @@ -258,7 +353,18 @@ resultView.controller('DatabaseResultController', ['$scope', '$http', 'messageHu
}
);
}
}, true);
}

messageHub.onDidReceiveMessage("database.sql.showContent", function (event) {

let data = event.data;
$scope.schemaName = data.schemaName;
$scope.tableName = data.tableName;
let sqlCommand = "SELECT * FROM \"" + data.schemaName + "\"" + "." + "\"" + data.tableName + "\";\n";
executeQuery({ data: sqlCommand });
});

messageHub.onDidReceiveMessage("database.sql.execute", executeQuery, true);

messageHub.onDidReceiveMessage("database.data.import.artifact", function (command) {
let artifact = command.data.split('.');
Expand Down Expand Up @@ -309,7 +415,7 @@ resultView.controller('DatabaseResultController', ['$scope', '$http', 'messageHu

messageHub.onDidReceiveMessage("database.metadata.project.export.model", function (command) {
let schema = command.data;
let url = "/services/data/project/model/" + $scope.datasource + "/" + schema;
let url = "/services/data/project/model/" + $scope.datasource + "/" + schema;
$http({
method: 'PUT',
url: url,
Expand Down Expand Up @@ -404,7 +510,7 @@ resultView.controller('DatabaseResultController', ['$scope', '$http', 'messageHu
$scope.hasMultipleProcedureResults = false;
$scope.procedureResults.length = 0;
}

messageHub.onDidReceiveMessage("database.sql.error", function (error) {
$scope.state.error = true;
$scope.errorMessage = error.data;
Expand Down
62 changes: 62 additions & 0 deletions components/ide/ide-ui-result/src/main/resources/META-INF/dirigible/ide-result/result.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,33 @@
<link type="text/css" rel="stylesheet" href="/services/js/resources-core/services/loader.js?id=ide-view-css" />
<theme></theme>
<script type="text/javascript" src="js/result.js"></script>
<style>
.dialog-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}

.dialog {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.dialog-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
}

</style>
</head>

<body class="dg-vbox">
Expand All @@ -39,6 +66,7 @@
<thead fd-table-header sticky="true">
<tr fd-table-row>
<th fd-table-header-cell ng-repeat="column in columns">{{column}}</th>
<th fd-table-header-cell>Actions</th>
</tr>
</thead>
<tbody fd-table-body>
Expand All @@ -48,6 +76,12 @@
{{cell}}
</div>
</td>
<td fd-table-cell>
<fd-button compact="true" glyph="sap-icon--edit" dg-type="transparent" aria-label="Edit"
ng-click="editRow(row)">Edit</fd-button>
<fd-button compact="true" glyph="sap-icon--delete" dg-type="transparent" aria-label="Delete"
ng-click="openDeleteDialog(row)">Delete</fd-button>
</td>
</tr>
</tbody>
</table>
Expand Down Expand Up @@ -89,6 +123,34 @@
</table>
</section>
</fd-scrollbar>
<div class="dialog-overlay" ng-show="isEditDialogOpen">
<div class="dialog">
<h3>Edit Row</h3>
<form>
<div ng-repeat="(key, value) in selectedRow" ng-if="!key.toUpperCase().includes('ID')">
<label>{{key}}</label>
<input type="text" ng-model="selectedRow[key]" />
</div>
<div class="dialog-actions">
<fd-button dg-label="Save" dg-type="emphasized" ng-click="saveRow()">Save</fd-button>
<fd-button dg-label="Cancel" dg-type="transparent" ng-click="closeEditDialog()">Cancel
</fd-button>
</div>
</form>
</div>
</div>
<div class="dialog-overlay" ng-show="isDeleteDialogOpen">
<div class="dialog">
<h3>Delete Row</h3>
<p>Are you sure you want to delete this row?</p>
<p><strong>{{selectedRow | json}}</strong></p>

<div class="dialog-actions">
<fd-button dg-label="Delete" dg-type="negative" ng-click="confirmDelete()">Delete</fd-button>
<fd-button dg-label="Cancel" dg-type="transparent" ng-click="closeDeleteDialog()">Cancel</fd-button>
</div>
</div>
</div>
</body>

</html>
Loading