diff --git a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css index d36d2dc80..ff84b5c7b 100644 --- a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css +++ b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css @@ -28,24 +28,29 @@ } } -.row-actions_desktop { +.row-actions { + display: flex; + align-items: center; +} + +.custom-actions_desktop { display: flex; align-items: center; gap: 4px; } @media (width <= 600px) { - .row-actions_desktop { + .custom-actions_desktop { display: none; } } -.row-actions_mobile { +.custom-actions_mobile { display: none; } @media (width <= 600px) { - .row-actions_mobile { + .custom-actions_mobile { display: flex; flex-wrap: wrap; gap: 8px; diff --git a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.html b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.html index 738e75906..64b995eca 100644 --- a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.html +++ b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.html @@ -20,24 +20,37 @@
-
-
- -
-
- +
+ + difference + + +
+
+ +
+
+ +
diff --git a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts index 3dd7fe2ec..2417d2d28 100644 --- a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts +++ b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts @@ -3,7 +3,7 @@ import * as JSON5 from 'json5'; import { ActivatedRoute, Router } from '@angular/router'; import { Alert, AlertType, ServerError } from 'src/app/models/alert'; import { Component, NgZone, OnInit } from '@angular/core'; -import { CustomAction, CustomEvent, TableField, TableForeignKey, TablePermissions, Widget } from 'src/app/models/table'; +import { CustomAction, CustomActionType, CustomEvent, TableField, TableForeignKey, TablePermissions, Widget } from 'src/app/models/table'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MatProgressSpinnerModule, MatSpinner } from '@angular/material/progress-spinner'; import { UIwidgets, defaultTimestampValues, fieldTypes, timestampTypes } from 'src/app/consts/field-types'; @@ -80,6 +80,7 @@ export class DbTableRowEditComponent implements OnInit { public nonModifyingFields: string[]; public keyAttributesFromURL: object = {}; public hasKeyAttributesFromURL: boolean; + public dubURLParams: object; public keyAttributesFromStructure: [] = []; public isPrimaryKeyUpdated: boolean; public tableTypes: object; @@ -110,6 +111,7 @@ export class DbTableRowEditComponent implements OnInit { } private routeSub: Subscription | undefined; + private confirmationDialogRef: any; originalOrder = () => { return 0; } @@ -193,6 +195,7 @@ export class DbTableRowEditComponent implements OnInit { }; this.keyAttributesFromURL = primaryKeys; + this.dubURLParams = {...primaryKeys, action: 'dub'}; this.hasKeyAttributesFromURL = !!Object.keys(this.keyAttributesFromURL).length; this._tableRow.fetchTableRow(this.connectionID, this.tableName, params) .subscribe(res => { @@ -551,12 +554,25 @@ export class DbTableRowEditComponent implements OnInit { ) } + handleDeleteRow(){ + this.handleActivateAction({ + title: 'Delete row', + require_confirmation: true + } as CustomEvent); + } + handleActivateAction(action: CustomEvent) { if (action.require_confirmation) { - this.dialog.open(BbBulkActionConfirmationDialogComponent, { + this.confirmationDialogRef = this.dialog.open(BbBulkActionConfirmationDialogComponent, { width: '25em', data: {id: action.id, title: action.title, primaryKeys: [this.keyAttributesFromURL]} }); + + if (!action.id) { + this.confirmationDialogRef.afterClosed().subscribe((res) => { + this.router.navigate([`/dashboard/${this.connectionID}/${this.tableName}`], { queryParams: this.backUrlParams}); + }); + } } else { this._tables.activateActions(this.connectionID, this.tableName, action.id, action.title, [this.keyAttributesFromURL]) .subscribe((res) => {