lgcosta/paperless-ngx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI for editing customizable dashboard views

Browse Source
This commit is contained in:
shamoon
2024-04-17 00:23:51 -07:00
parent 3abadf0516
commit abfdfafced
10 changed files with 281 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src-ui/src/app/components/admin/settings/settings.component.html
View File

@@ -320,17 +320,14 @@
</div>
<h4 i18n>Views</h4>
<div formGroupName="savedViews">
<ul class="list-group" formGroupName="savedViews">
@for (view of savedViews; track view) {
<li class="list-group-item py-3">
<div [formGroupName]="view.id" class="row">
<div class="mb-3 col">
<label class="form-label" for="name_{{view.id}}" i18n>Name</label>
<input type="text" class="form-control" formControlName="name" id="name_{{view.id}}">
</div>
<div class="mb-2 col">
<label class="form-label" for="show_on_dashboard_{{view.id}}" i18n>&nbsp;<span class="visually-hidden">Appears on</span></label>
<div class="form-check form-switch">
<div class="col">
<pngx-input-text title="Name" formControlName="name"></pngx-input-text>
<div class="form-check form-switch mt-3">
<input type="checkbox" class="form-check-input" id="show_on_dashboard_{{view.id}}" formControlName="show_on_dashboard">
<label class="form-check-label" for="show_on_dashboard_{{view.id}}" i18n>Show on dashboard</label>
</div>
@@ -339,7 +336,26 @@
<label class="form-check-label" for="show_in_sidebar_{{view.id}}" i18n>Show in sidebar</label>
</div>
</div>
<div class="mb-2 col-auto">
<div class="col">
@if (savedViewGroup.get(view.id.toString()).get('show_on_dashboard').value) {
<div class="row">
<div class="col">
<pngx-input-number i18n-title title="Limit documents" [showAdd]="false" formControlName="dashboard_view_limit"></pngx-input-number>
</div>
<div class="col">
<label class="form-label" for="dashboard_view_mode_{{view.id}}" i18n>Display as</label>
<select class="form-select" formControlName="dashboard_view_mode">
<option [ngValue]="DashboardViewMode.TABLE" i18n>Table</option>
<option [ngValue]="DashboardViewMode.SMALL_CARDS" i18n>Cards</option>
</select>
</div>
</div>
@if (savedViewGroup.get(view.id.toString()).get('dashboard_view_mode').value === DashboardViewMode.TABLE) {
<pngx-input-drag-drop-select [items]="DASHBOARD_VIEW_TABLE_COLUMNS" formControlName="dashboard_view_table_columns"></pngx-input-drag-drop-select>
}
}
</div>
<div class="col-auto">
<label class="form-label" for="name_{{view.id}}" i18n>Actions</label>
<pngx-confirm-button
@@ -352,20 +368,23 @@
</pngx-confirm-button>
</div>
</div>
</li>
}
@if (savedViews && savedViews.length === 0) {
<div i18n>No saved views defined.</div>
<li class="list-group-item">
<div i18n>No saved views defined.</div>
</li>
}
@if (!savedViews) {
<div>
<li class="list-group-item">
<div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
<div class="visually-hidden" i18n>Loading...</div>
</div>
</li>
}
</div>
</ul>
</ng-template>
</li>
@@ -374,4 +393,5 @@
<div [ngbNavOutlet]="nav" class="border-start border-end border-bottom p-3 mb-3 shadow-sm"></div>
<button type="submit" class="btn btn-primary mb-2" [disabled]="(isDirty$ | async) === false" i18n>Save</button>
<button type="button" (click)="reset()" class="btn btn-secondary ms-2 mb-2" [disabled]="(isDirty$ | async) === false" i18n>Cancel</button>
</form>