You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
frontend/src/app/components/editor/database/database.component.html

61 lines
2.6 KiB

<div [ngClass]="fullPage ? 'database-wrapper full-page' : 'database-wrapper'" *ngIf="!notAvailableOffline" (resized)="onResized()">
<ion-toolbar>
<div style="display: flex; flex-direction: row">
<ion-input
[readonly]="readonly"
[(ngModel)]="dbName"
(ionChange)="onCellValueChanged()"
style="flex: 1; font-size: 15pt;"
></ion-input>
<button
class="clear-btn"
style="padding: 0 20px;"
*ngIf="fullPage && (editorService.isSaving || editorService.willSave)"
title="Saving..."
>
<i class="fa fa-spin fa-circle-notch"></i>
</button>
<button
class="clear-btn"
style="padding: 0 20px;"
*ngIf="fullPage && !(editorService.isSaving || editorService.willSave)"
title="Changes saved."
(click)="editorService.triggerSave()"
>
<i class="fa fa-check-circle"></i>
</button>
<button style="padding: 0 20px;" *ngIf="fullPage" (click)="dismiss()" class="clear-btn"><i class="fa fa-times"></i></button>
</div>
<ion-buttons *ngIf="!readonly" style="flex-wrap: wrap;">
<ion-button (click)="onManageColumns()"><ion-icon name="build" color="primary"></ion-icon>&nbsp;Manage Columns</ion-button>
<ion-button (click)="onInsertRow()"><ion-icon name="add-circle" color="success"></ion-icon>&nbsp;Insert Row</ion-button>
<ion-button (click)="onRemoveRow()" [disabled]="lastClickRow < 0"><ion-icon name="remove-circle" color="danger"></ion-icon>&nbsp;Delete Row</ion-button>
<ion-button (click)="openDatabase()" *ngIf="!fullPage"><i class="fa fa-external-link-alt" style="padding-right: 10px;"></i> Open</ion-button>
</ion-buttons>
</ion-toolbar>
<div class="grid-wrapper">
<ag-grid-angular
[style]="fullPage ? 'width: 100%; height: 100%;' : 'width: 100%; height: 500px;'"
[ngClass]="isDark() ? 'ag-theme-balham-dark' : 'ag-theme-balham'"
[rowData]="rowData"
[columnDefs]="columnDefs"
[singleClickEdit]="true"
[enterMovesDownAfterEdit]="true"
[rowDragManaged]="true"
[suppressMoveWhenRowDragging]="true"
suppressMovableColumns="true"
(rowClicked)="onRowClicked($event)"
(cellValueChanged)="onCellValueChanged()"
(gridReady)="onGridReady($event)"
(columnResized)="onColumnResize($event)"
(rowDragMove)="onRowDragEnd($event)"
[frameworkComponents]="frameworkComponents"
#agGridElement
></ag-grid-angular>
</div>
</div>
<div class="database-wrapper not-available" *ngIf="notAvailableOffline">
Sorry, this database is not available offline yet.
</div>