mirror of
https://github.com/paperless-ngx/paperless-ngx.git
synced 2025-04-29 11:09:27 -05:00
191 lines
8.6 KiB
HTML
191 lines
8.6 KiB
HTML
<app-page-header title="Settings" i18n-title>
|
|
|
|
</app-page-header>
|
|
|
|
<!-- <p>items per page, documents per view type</p> -->
|
|
<form [formGroup]="settingsForm" (ngSubmit)="saveSettings()">
|
|
|
|
<ul ngbNav #nav="ngbNav" class="nav-tabs">
|
|
<li [ngbNavItem]="1">
|
|
<a ngbNavLink i18n>General</a>
|
|
<ng-template ngbNavContent>
|
|
|
|
<h4 i18n>Appearance</h4>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-3 col-form-label">
|
|
<span i18n>Display language</span>
|
|
</div>
|
|
<div class="col">
|
|
|
|
<select class="form-select" formControlName="displayLanguage">
|
|
<option *ngFor="let lang of displayLanguageOptions" [ngValue]="lang.code">{{lang.name}}<span *ngIf="lang.code && currentLocale != 'en-US'"> - {{lang.englishName}}</span></option>
|
|
</select>
|
|
|
|
<small *ngIf="displayLanguageIsDirty" class="form-text text-primary" i18n>You need to reload the page after applying a new language.</small>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-3 col-form-label">
|
|
<span i18n>Date display</span>
|
|
</div>
|
|
<div class="col">
|
|
|
|
<select class="form-select" formControlName="dateLocale">
|
|
<option *ngFor="let lang of dateLocaleOptions" [ngValue]="lang.code">{{lang.name}}<span *ngIf="lang.code"> - {{today | customDate:'shortDate':null:lang.code}}</span></option>
|
|
</select>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-3 col-form-label">
|
|
<span i18n>Date format</span>
|
|
</div>
|
|
<div class="col">
|
|
|
|
<div class="form-check">
|
|
<input type="radio" id="dateFormatShort" name="dateFormat" class="form-check-input" formControlName="dateFormat" value="shortDate">
|
|
<label class="form-check-label" for="dateFormatShort" i18n>Short: {{today | customDate:'shortDate':null:computedDateLocale}}</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input type="radio" id="dateFormatMedium" name="dateFormat" class="form-check-input" formControlName="dateFormat" value="mediumDate">
|
|
<label class="form-check-label" for="dateFormatMedium" i18n>Medium: {{today | customDate:'mediumDate':null:computedDateLocale}}</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input type="radio" id="dateFormatLong" name="dateFormat" class="form-check-input" formControlName="dateFormat" value="longDate">
|
|
<label class="form-check-label" for="dateFormatLong" i18n>Long: {{today | customDate:'longDate':null:computedDateLocale}}</label>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-3 col-form-label">
|
|
<span i18n>Items per page</span>
|
|
</div>
|
|
<div class="col">
|
|
|
|
<select class="form-select" formControlName="documentListItemPerPage">
|
|
<option [ngValue]="10">10</option>
|
|
<option [ngValue]="25">25</option>
|
|
<option [ngValue]="50">50</option>
|
|
<option [ngValue]="100">100</option>
|
|
</select>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-3 col-form-label">
|
|
<span i18n>Document editor</span>
|
|
</div>
|
|
<div class="col">
|
|
|
|
<app-input-check i18n-title title="Use PDF viewer provided by the browser" i18n-hint hint="This is usually faster for displaying large PDF documents, but it might not work on some browsers." formControlName="useNativePdfViewer"></app-input-check>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-3 col-form-label">
|
|
<span i18n>Dark mode</span>
|
|
</div>
|
|
<div class="col">
|
|
<app-input-check i18n-title title="Use system settings" formControlName="darkModeUseSystem"></app-input-check>
|
|
<app-input-check [hidden]="settingsForm.value.darkModeUseSystem" i18n-title title="Enable dark mode" formControlName="darkModeEnabled"></app-input-check>
|
|
<app-input-check i18n-title title="Invert thumbnails in dark mode" formControlName="darkModeInvertThumbs"></app-input-check>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-3 col-form-label">
|
|
<span i18n>Theme Color</span>
|
|
</div>
|
|
<div class="col col-md-3">
|
|
<app-input-color i18n-title formControlName="themeColor" [error]="error?.color"></app-input-color>
|
|
</div>
|
|
<div class="col-2">
|
|
<button class="btn btn-link btn-sm pt-2 ps-0" [disabled]="!this.settingsForm.get('themeColor').value" (click)="clearThemeColor()">
|
|
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x me-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
|
|
</svg><ng-container i18n>Reset</ng-container>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 class="mt-4" i18n>Bulk editing</h4>
|
|
|
|
<div class="row mb-3">
|
|
<div class="offset-md-3 col">
|
|
<app-input-check i18n-title title="Show confirmation dialogs" formControlName="bulkEditConfirmationDialogs" i18n-hint hint="Deleting documents will always ask for confirmation."></app-input-check>
|
|
<app-input-check i18n-title title="Apply on close" formControlName="bulkEditApplyOnClose"></app-input-check>
|
|
</div>
|
|
</div>
|
|
|
|
</ng-template>
|
|
</li>
|
|
|
|
<li [ngbNavItem]="2">
|
|
<a ngbNavLink i18n>Notifications</a>
|
|
<ng-template ngbNavContent>
|
|
|
|
<h4 i18n>Document processing</h4>
|
|
|
|
<div class="row mb-3">
|
|
<div class="offset-md-3 col">
|
|
<app-input-check i18n-title title="Show notifications when new documents are detected" formControlName="notificationsConsumerNewDocument"></app-input-check>
|
|
<app-input-check i18n-title title="Show notifications when document processing completes successfully" formControlName="notificationsConsumerSuccess"></app-input-check>
|
|
<app-input-check i18n-title title="Show notifications when document processing fails" formControlName="notificationsConsumerFailed"></app-input-check>
|
|
<app-input-check i18n-title title="Suppress notifications on dashboard" formControlName="notificationsConsumerSuppressOnDashboard" i18n-hint hint="This will suppress all messages about document processing status on the dashboard."></app-input-check>
|
|
</div>
|
|
</div>
|
|
|
|
</ng-template>
|
|
</li>
|
|
|
|
<li [ngbNavItem]="3">
|
|
<a ngbNavLink i18n>Saved views</a>
|
|
<ng-template ngbNavContent>
|
|
|
|
<div formGroupName="savedViews">
|
|
|
|
<div *ngFor="let view of savedViews" [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>Appears on</label>
|
|
<div class="form-check form-switch">
|
|
<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>
|
|
<div class="form-check form-switch">
|
|
<input type="checkbox" class="form-check-input" id="show_in_sidebar_{{view.id}}" formControlName="show_in_sidebar">
|
|
<label class="form-check-label" for="show_in_sidebar_{{view.id}}" i18n>Show in sidebar</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-2 col-auto">
|
|
<label class="form-label" for="name_{{view.id}}" i18n>Actions</label>
|
|
<button type="button" class="btn btn-sm btn-outline-danger form-control" (click)="deleteSavedView(view)" i18n>Delete</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="savedViews.length == 0" i18n>No saved views defined.</div>
|
|
|
|
</div>
|
|
|
|
</ng-template>
|
|
</li>
|
|
</ul>
|
|
|
|
<div [ngbNavOutlet]="nav" class="border-start border-end border-bottom p-3 mb-3 shadow-sm"></div>
|
|
|
|
<button type="submit" class="btn btn-primary" [disabled]="!(isDirty$ | async)" i18n>Save</button>
|
|
</form>
|