Merge pull request #756 from rocket-admin/csv-permissions

table settings:
rocket-admin · Jul 25, 2024 · a1fd3a4 · a1fd3a4
2 parents 04843cc + eff566b
commit a1fd3a4
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 55 deletions.
diff --git a/frontend/src/app/components/dashboard/db-table-settings/db-table-settings.component.css b/frontend/src/app/components/dashboard/db-table-settings/db-table-settings.component.css
@@ -17,10 +17,18 @@
     padding: 24px max(calc(50vw - 325px), 10%) 60px;
 }
 
+.settings-fields__heading {
+    margin-top: 20px;
+}
+
 .settings-form__full-line {
     grid-column: 1 / span 2;
 }
 
+.settings-form__toggle {
+    margin-bottom: 12px;
+}
+
 .icon-picker {
     margin-left: -4px;
     margin-bottom: 20px;

diff --git a/frontend/src/app/components/dashboard/db-table-settings/db-table-settings.component.html b/frontend/src/app/components/dashboard/db-table-settings/db-table-settings.component.html
@@ -5,6 +5,7 @@
     <app-breadcrumbs [crumbs]="getCrumbs(currentConnection.title || currentConnection.database)" class="row-breadcrumbs"></app-breadcrumbs>
     <form #tableSettingsForm="ngForm" class="settings-form" (ngSubmit)="updateSettings()">
         <div class="settings-fields">
+            <h2 class="mat-heading-2 settings-form__full-line settings-fields__heading">General</h2>
             <mat-form-field appearance="outline">
                 <mat-label>Table display name</mat-label>
                 <input matInput [(ngModel)]="tableSettings.display_name" name="display_name" #displayName="ngModel">
@@ -31,6 +32,34 @@
                 info_outline
             </mat-icon>
 
+            <mat-form-field appearance="outline">
+                <mat-label>Identity field</mat-label>
+                <mat-select
+                    name="identity_column"
+                    [(ngModel)]="tableSettings.identity_column">
+                    <mat-option value="">None</mat-option>
+                    <mat-option *ngFor="let field of fields" [value]="field">{{field}}</mat-option>
+                </mat-select>
+            </mat-form-field>
+            <mat-icon class="settings-form__tooltip"
+                matTooltip="Choose a column you want to display in the foreign key field"
+                matTooltipPosition="above">
+                info_outline
+            </mat-icon>
+
+            <mat-slide-toggle name="allow_export"
+                class="settings-form__full-line settings-form__toggle" color="primary"
+                [(ngModel)]="tableSettings.allow_csv_export">
+                Allow export
+            </mat-slide-toggle>
+
+            <mat-slide-toggle name="allow_import"
+                class="settings-form__full-line settings-form__toggle" color="primary"
+                [(ngModel)]="tableSettings.allow_csv_import">
+                Allow import
+            </mat-slide-toggle>
+
+            <h2 class="mat-heading-2 settings-form__full-line settings-fields__heading">Table view</h2>
             <mat-form-field appearance="outline">
                 <mat-label>Columns visible by default</mat-label>
                 <mat-select multiple
@@ -77,44 +106,59 @@
             </button>
 
             <mat-form-field appearance="outline">
-                <mat-label>Autocomplete fields</mat-label>
+                <mat-label>Fields to search</mat-label>
                 <mat-select multiple
-                    name="autocomplete_columns"
-                    [(ngModel)]="tableSettings.autocomplete_columns">
+                    name="search_fields"
+                    [(ngModel)]="tableSettings.search_fields">
                     <mat-option *ngFor="let field of fields" [value]="field">{{field}}</mat-option>
                 </mat-select>
             </mat-form-field>
             <mat-icon class="settings-form__tooltip"
-                matTooltip="Choose columns you want to search by when you edit the foreign key field."
+                matTooltip="Choose columns you often use as filters."
                 matTooltipPosition="above">
                 info_outline
             </mat-icon>
 
+            <div class="form-group-ordering settings-form__full-line">
+                <mat-form-field appearance="outline" class="form-group-ordering__ordering-by">
+                    <mat-label>Ordering by field</mat-label>
+                    <mat-select name="ordering_field" [(ngModel)]="tableSettings.ordering_field">
+                        <mat-option value="">None</mat-option>
+                        <mat-option *ngFor="let field of fields" [value]="field">
+                            {{field}}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+                <mat-radio-group aria-label="Order"
+                    class="form-group-ordering__order-options"
+                    name="ordering"
+                    [(ngModel)]="tableSettings.ordering">
+                    <mat-radio-button value="ASC" checked>Ascending</mat-radio-button>
+                    <mat-radio-button value="DESC">Descending</mat-radio-button>
+                </mat-radio-group>
+            </div>
+
             <mat-form-field appearance="outline">
-                <mat-label>Identity field</mat-label>
-                <mat-select
-                    name="identity_column"
-                    [(ngModel)]="tableSettings.identity_column">
-                    <mat-option value="">None</mat-option>
+                <mat-label>Sort fields by</mat-label>
+                <mat-select multiple
+                    name="sortable_by"
+                    [(ngModel)]="tableSettings.sortable_by">
                     <mat-option *ngFor="let field of fields" [value]="field">{{field}}</mat-option>
                 </mat-select>
             </mat-form-field>
-            <mat-icon class="settings-form__tooltip"
-                matTooltip="Choose a column you want to display in the foreign key field"
-                matTooltipPosition="above">
-                info_outline
-            </mat-icon>
+            <div></div>
 
+            <h2 class="mat-heading-2 settings-form__full-line settings-fields__heading">Record view</h2>
             <mat-form-field appearance="outline">
-                <mat-label>Fields to search</mat-label>
+                <mat-label>Autocomplete fields</mat-label>
                 <mat-select multiple
-                    name="search_fields"
-                    [(ngModel)]="tableSettings.search_fields">
+                    name="autocomplete_columns"
+                    [(ngModel)]="tableSettings.autocomplete_columns">
                     <mat-option *ngFor="let field of fields" [value]="field">{{field}}</mat-option>
                 </mat-select>
             </mat-form-field>
             <mat-icon class="settings-form__tooltip"
-                matTooltip="Choose columns you often use as filters."
+                matTooltip="Choose columns you want to search by when you edit the foreign key field."
                 matTooltipPosition="above">
                 info_outline
             </mat-icon>
@@ -146,35 +190,8 @@
                 matTooltipPosition="above">
                 info_outline
             </mat-icon>
-
-            <div class="form-group-ordering settings-form__full-line">
-                <mat-form-field appearance="outline" class="form-group-ordering__ordering-by">
-                    <mat-label>Ordering by field</mat-label>
-                    <mat-select name="ordering_field" [(ngModel)]="tableSettings.ordering_field">
-                        <mat-option value="">None</mat-option>
-                        <mat-option *ngFor="let field of fields" [value]="field">
-                            {{field}}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-                <mat-radio-group aria-label="Order"
-                    class="form-group-ordering__order-options"
-                    name="ordering"
-                    [(ngModel)]="tableSettings.ordering">
-                    <mat-radio-button value="ASC" checked>Ascending</mat-radio-button>
-                    <mat-radio-button value="DESC">Descending</mat-radio-button>
-                </mat-radio-group>
-            </div>
-
-            <mat-form-field appearance="outline" class="settings-form__full-line">
-                <mat-label>Sort fields by</mat-label>
-                <mat-select multiple
-                    name="sortable_by"
-                    [(ngModel)]="tableSettings.sortable_by">
-                    <mat-option *ngFor="let field of fields" [value]="field">{{field}}</mat-option>
-                </mat-select>
-            </mat-form-field>
         </div>
+
         <div class="actions">
             <button mat-stroked-button type="button" class="settings-form__back-button" (click)="goBack()">Back</button>
 

diff --git a/frontend/src/app/components/dashboard/db-table-settings/db-table-settings.component.ts b/frontend/src/app/components/dashboard/db-table-settings/db-table-settings.component.ts
@@ -44,7 +44,9 @@ export class DbTableSettingsComponent implements OnInit {
     readonly_fields: [],
     sortable_by: [],
     columns_view: [],
-    sensitive_fields: []
+    sensitive_fields: [],
+    allow_csv_export: true,
+    allow_csv_import: true,
   }
   public tableSettings: TableSettings = null;
   public defaultIcons = ['favorite', 'star', 'done', 'arrow_forward', 'key', 'lock', 'visibility', 'language', 'notifications', 'schedule'];

diff --git a/frontend/src/app/components/dashboard/db-table/db-table.component.html b/frontend/src/app/components/dashboard/db-table/db-table.component.html
@@ -54,14 +54,16 @@ <h2 class="mat-h2">{{ displayName }}</h2>
                     <mat-icon>filter_list</mat-icon>
                     Filter
                 </button>
-                <button mat-button type="button"
+                <button *ngIf="tableData && tableData.isImportAllowed"
+                    mat-button type="button"
                     angulartics2On="click"
                     angularticsAction="Dashboard: import is clicked"
                     (click)="handleOpenImportDialog()">
                     <mat-icon>download</mat-icon>
                     Import
                 </button>
-                <button mat-button type="button"
+                <button *ngIf="tableData && tableData.isExportAllowed"
+                    mat-button type="button"
                     angulartics2On="click"
                     angularticsAction="Dashboard: export is clicked"
                     (click)="handleOpenExportDialog()">

diff --git a/frontend/src/app/components/dashboard/db-tables-data-source.ts b/frontend/src/app/components/dashboard/db-tables-data-source.ts
@@ -2,7 +2,7 @@ import * as JSON5 from 'json5';
 
 import { Alert, AlertActionType, AlertType } from 'src/app/models/alert';
 import { BehaviorSubject, Observable, of } from 'rxjs';
-import { CustomAction, CustomActionType, TableField, TableForeignKey, Widget, CustomEvent } from 'src/app/models/table';
+import { CustomAction, CustomActionType, CustomEvent, TableField, TableForeignKey, Widget } from 'src/app/models/table';
 import { catchError, finalize } from 'rxjs/operators';
 
 import { AccessLevel } from 'src/app/models/user';
@@ -63,6 +63,8 @@ export class TablesDataSource implements DataSource<Object> {
   public widgetsCount: number = 0;
   public selectWidgetsOptions: object;
   public permissions;
+  public isExportAllowed: boolean;
+  public isImportAllowed: boolean;
   public isEmptyTable: boolean;
   public tableActions: CustomAction[];
   public tableBulkActions: CustomAction[];
@@ -254,6 +256,9 @@ export class TablesDataSource implements DataSource<Object> {
             }
           };
 
+          this.isExportAllowed = res.allow_csv_export;
+          this.isImportAllowed = res.allow_csv_import;
+
           this.sortByColumns = res.sortable_by;
 
           this.foreignKeysList = res.foreignKeys.map((field) => {return field['column_name']});

diff --git a/frontend/src/app/models/table.ts b/frontend/src/app/models/table.ts
@@ -33,7 +33,9 @@ export interface TableSettings {
     readonly_fields: string[],
     sortable_by: string[],
     columns_view: string[],
-    sensitive_fields: string[]
+    sensitive_fields: string[],
+    allow_csv_export: boolean,
+    allow_csv_import: boolean,
 }
 
 export interface TableRow {

diff --git a/frontend/src/app/services/notifications.service.ts b/frontend/src/app/services/notifications.service.ts
@@ -1,6 +1,7 @@
+import { Alert, AlertAction, AlertType, ServerError } from '../models/alert';
+
 import { Injectable } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { Alert, AlertAction, ServerError, AlertType } from '../models/alert';
 
 let idCounter = 0;
 

diff --git a/frontend/src/app/services/tables.service.ts b/frontend/src/app/services/tables.service.ts
@@ -179,8 +179,6 @@ export class TablesService {
     filters,
     search,
   }) {
-    console.log('export csv service');
-
     return this._http.post<any>(`/table/csv/export/${connectionID}`, { filters }, {
       params: {
         perPage: chunkSize.toString(),
@@ -196,7 +194,8 @@ export class TablesService {
         map(res => {return res}),
         catchError((err) => {
           console.log(err);
-          this._notifications.showErrorSnackbar(err.error.message);
+          const errorObj = JSON.parse(err.error);
+          this._notifications.showErrorSnackbar(errorObj.message);
           this.angulartics2.eventTrack.next({
             action: 'Dashboard: db export failed',
           });