mirror of
https://github.com/paperless-ngx/paperless-ngx.git
synced 2025-05-24 02:02:23 -04:00
59e359ff98
Directly check permissions and no subscription (uisettings is always initialized on frontend startup) update permission directive to accept single string add explicit management permission name
225 lines
10 KiB
HTML
225 lines
10 KiB
HTML
<app-page-header title="Settings" i18n-title>
|
|
<button class="btn btn-sm btn-outline-primary" (click)="tourService.start()"><ng-container i18n>Start tour</ng-container></button>
|
|
</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>Sidebar</span>
|
|
</div>
|
|
<div class="col">
|
|
|
|
<app-input-check i18n-title title="Use 'slim' sidebar (icons only)" formControlName="slimSidebarEnabled"></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" id="update-checking" i18n>Update checking</h4>
|
|
|
|
<div class="row mb-3">
|
|
<div class="offset-md-3 col">
|
|
<p i18n>
|
|
Update checking works by pinging the the public <a href="https://api.github.com/repos/paperless-ngx/paperless-ngx/releases/latest" target="_blank" rel="noopener noreferrer">Github API</a> for the latest release to determine whether a new version is available.<br/>
|
|
Actual updating of the app must still be performed manually.
|
|
</p>
|
|
<p i18n>
|
|
<em>No tracking data is collected by the app in any way.</em>
|
|
</p>
|
|
<app-input-check i18n-title title="Enable update checking" formControlName="updateCheckingEnabled" i18n-hint hint="Note that for users of thirdy-party containers e.g. linuxserver.io this notification may be 'ahead' of the current third-party release."></app-input-check>
|
|
</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>
|
|
|
|
<h4 class="mt-4" i18n>Comments</h4>
|
|
|
|
<div class="row mb-3">
|
|
<div class="offset-md-3 col">
|
|
<app-input-check i18n-title title="Enable comments" formControlName="commentsEnabled"></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)" *ifPermissions="'documents.delete_savedview'" 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 mb-2" *ifPermissions="'documents.change_uisettings'" [disabled]="!(isDirty$ | async)" i18n>Save</button>
|
|
</form>
|