From 2a6e79acc8c1c105b3c7b36aa0c07413adcac0d8 Mon Sep 17 00:00:00 2001 From: shamoon <4887959+shamoon@users.noreply.github.com> Date: Sat, 13 Jan 2024 11:57:25 -0800 Subject: [PATCH] Feature: app branding (#5357) --- docs/configuration.md | 16 +- src-ui/messages.xlf | 217 +++++++++++------- src-ui/src/app/app.module.ts | 2 + .../admin/config/config.component.html | 1 + .../admin/config/config.component.spec.ts | 40 ++++ .../admin/config/config.component.ts | 28 ++- .../app-frame/app-frame.component.html | 16 +- .../app-frame/app-frame.component.scss | 11 +- .../app-frame/app-frame.component.ts | 4 + .../common/input/file/file.component.html | 37 +++ .../common/input/file/file.component.scss | 0 .../common/input/file/file.component.spec.ts | 41 ++++ .../common/input/file/file.component.ts | 53 +++++ .../common/logo/logo.component.html | 40 ++-- .../common/logo/logo.component.spec.ts | 11 + .../components/common/logo/logo.component.ts | 14 ++ .../dashboard/dashboard.component.ts | 6 +- .../not-found/not-found.component.spec.ts | 2 + src-ui/src/app/data/paperless-config.ts | 18 ++ src-ui/src/app/data/ui-settings.ts | 12 + .../src/app/services/config.service.spec.ts | 22 ++ src-ui/src/app/services/config.service.ts | 14 ++ .../src/app/services/settings.service.spec.ts | 12 + src-ui/src/app/services/settings.service.ts | 3 + src-ui/src/styles.scss | 3 + src/documents/tests/test_api_app_config.py | 59 +++++ src/documents/tests/test_api_uisettings.py | 2 + src/documents/views.py | 11 + src/paperless/config.py | 29 ++- ...licationconfiguration_app_logo_and_more.py | 33 +++ src/paperless/models.py | 18 ++ src/paperless/serialisers.py | 5 + src/paperless/settings.py | 4 + src/paperless/urls.py | 9 + 34 files changed, 675 insertions(+), 118 deletions(-) create mode 100644 src-ui/src/app/components/common/input/file/file.component.html create mode 100644 src-ui/src/app/components/common/input/file/file.component.scss create mode 100644 src-ui/src/app/components/common/input/file/file.component.spec.ts create mode 100644 src-ui/src/app/components/common/input/file/file.component.ts create mode 100644 src/paperless/migrations/0002_applicationconfiguration_app_logo_and_more.py diff --git a/docs/configuration.md b/docs/configuration.md index 5ca6bf701..b68198619 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -4,9 +4,9 @@ Paperless provides a wide range of customizations. Depending on how you run paperless, these settings have to be defined in different places. Certain configuration options may be set via the UI. This currently includes -common [OCR](#ocr) related settings. If set, these will take preference over the -settings via environment variables. If not set, the environment setting or applicable -default will be utilized instead. +common [OCR](#ocr) related settings and some frontend settings. If set, these will take +preference over the settings via environment variables. If not set, the environment setting +or applicable default will be utilized instead. - If you run paperless on docker, `paperless.conf` is not used. Rather, configure paperless by copying necessary options to @@ -1329,7 +1329,15 @@ started by the container. You can read more about this in the [advanced documentation](advanced_usage.md#celery-monitoring). -## Update Checking {#update-checking} +## Frontend Settings + +#### [`PAPERLESS_APP_TITLE=`](#PAPERLESS_APP_TITLE) {#PAPERLESS_APP_TITLE} + +: If set, overrides the default name "Paperless-ngx" + +#### [`PAPERLESS_APP_LOGO=`](#PAPERLESS_APP_LOGO) {#PAPERLESS_APP_LOGO} + +: Path to an image file in the /media/logo directory, must include 'logo', e.g. `/logo/Atari_logo.svg` #### [`PAPERLESS_ENABLE_UPDATE_CHECK=`](#PAPERLESS_ENABLE_UPDATE_CHECK) {#PAPERLESS_ENABLE_UPDATE_CHECK} diff --git a/src-ui/messages.xlf b/src-ui/messages.xlf index 9581095ad..d2fd2a0b1 100644 --- a/src-ui/messages.xlf +++ b/src-ui/messages.xlf @@ -439,7 +439,7 @@ Discard src/app/components/admin/config/config.component.html - 48 + 49 src/app/components/document-detail/document-detail.component.html @@ -450,7 +450,7 @@ Save src/app/components/admin/config/config.component.html - 51 + 52 src/app/components/admin/settings/settings.component.html @@ -513,28 +513,42 @@ Error retrieving config src/app/components/admin/config/config.component.ts - 79 + 81 Invalid JSON src/app/components/admin/config/config.component.ts - 105 + 107 Configuration updated src/app/components/admin/config/config.component.ts - 148 + 151 An error occurred updating configuration src/app/components/admin/config/config.component.ts - 153 + 156 + + + + File successfully updated + + src/app/components/admin/config/config.component.ts + 178 + + + + An error occurred uploading file + + src/app/components/admin/config/config.component.ts + 183 @@ -545,11 +559,11 @@ src/app/components/app-frame/app-frame.component.html - 309 + 319 src/app/components/app-frame/app-frame.component.html - 314 + 324 @@ -646,15 +660,15 @@ src/app/components/app-frame/app-frame.component.html - 59 + 69 src/app/components/app-frame/app-frame.component.html - 267 + 277 src/app/components/app-frame/app-frame.component.html - 271 + 281 @@ -1123,7 +1137,7 @@ src/app/components/app-frame/app-frame.component.html - 116 + 126 @@ -1517,7 +1531,7 @@ src/app/components/app-frame/app-frame.component.ts - 117 + 121 @@ -1535,7 +1549,7 @@ src/app/components/app-frame/app-frame.component.html - 296 + 306 @@ -1722,11 +1736,11 @@ src/app/components/app-frame/app-frame.component.html - 285 + 295 src/app/components/app-frame/app-frame.component.html - 289 + 299 @@ -2035,66 +2049,65 @@ 180 - - Paperless-ngx + + by Paperless-ngx src/app/components/app-frame/app-frame.component.html - 15 + 20 - app title Search documents src/app/components/app-frame/app-frame.component.html - 23 + 33 Logged in as src/app/components/app-frame/app-frame.component.html - 47 + 57 My Profile src/app/components/app-frame/app-frame.component.html - 53 + 63 Logout src/app/components/app-frame/app-frame.component.html - 64 + 74 Documentation src/app/components/app-frame/app-frame.component.html - 71 + 81 src/app/components/app-frame/app-frame.component.html - 319 + 329 src/app/components/app-frame/app-frame.component.html - 324 + 334 Dashboard src/app/components/app-frame/app-frame.component.html - 96 + 106 src/app/components/app-frame/app-frame.component.html - 100 + 110 src/app/components/dashboard/dashboard.component.html @@ -2105,11 +2118,11 @@ Documents src/app/components/app-frame/app-frame.component.html - 105 + 115 src/app/components/app-frame/app-frame.component.html - 109 + 119 src/app/components/document-list/document-list.component.ts @@ -2136,36 +2149,36 @@ Open documents src/app/components/app-frame/app-frame.component.html - 150 + 160 Close all src/app/components/app-frame/app-frame.component.html - 174 + 184 src/app/components/app-frame/app-frame.component.html - 178 + 188 Manage src/app/components/app-frame/app-frame.component.html - 186 + 196 Correspondents src/app/components/app-frame/app-frame.component.html - 192 + 202 src/app/components/app-frame/app-frame.component.html - 196 + 206 src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html @@ -2176,11 +2189,11 @@ Tags src/app/components/app-frame/app-frame.component.html - 201 + 211 src/app/components/app-frame/app-frame.component.html - 206 + 216 src/app/components/common/input/tags/tags.component.ts @@ -2207,11 +2220,11 @@ Document Types src/app/components/app-frame/app-frame.component.html - 212 + 222 src/app/components/app-frame/app-frame.component.html - 216 + 226 src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html @@ -2222,11 +2235,11 @@ Storage Paths src/app/components/app-frame/app-frame.component.html - 221 + 231 src/app/components/app-frame/app-frame.component.html - 225 + 235 src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html @@ -2237,11 +2250,11 @@ Custom Fields src/app/components/app-frame/app-frame.component.html - 230 + 240 src/app/components/app-frame/app-frame.component.html - 234 + 244 src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.html @@ -2256,11 +2269,11 @@ Workflows src/app/components/app-frame/app-frame.component.html - 241 + 251 src/app/components/app-frame/app-frame.component.html - 245 + 255 src/app/components/manage/workflows/workflows.component.html @@ -2271,99 +2284,99 @@ Mail src/app/components/app-frame/app-frame.component.html - 250 + 260 src/app/components/app-frame/app-frame.component.html - 255 + 265 Administration src/app/components/app-frame/app-frame.component.html - 261 + 271 Configuration src/app/components/app-frame/app-frame.component.html - 276 + 286 src/app/components/app-frame/app-frame.component.html - 280 + 290 File Tasks src/app/components/app-frame/app-frame.component.html - 303,305 + 313,315 GitHub src/app/components/app-frame/app-frame.component.html - 331 + 341 is available. src/app/components/app-frame/app-frame.component.html - 340,341 + 350,351 Click to view. src/app/components/app-frame/app-frame.component.html - 341 + 351 Paperless-ngx can automatically check for updates src/app/components/app-frame/app-frame.component.html - 345 + 355 How does this work? src/app/components/app-frame/app-frame.component.html - 352,354 + 362,364 Update available src/app/components/app-frame/app-frame.component.html - 368 + 378 Sidebar views updated src/app/components/app-frame/app-frame.component.ts - 259 + 263 Error updating sidebar views src/app/components/app-frame/app-frame.component.ts - 262 + 266 An error occurred while saving update checking settings. src/app/components/app-frame/app-frame.component.ts - 283 + 287 @@ -3696,6 +3709,14 @@ src/app/components/common/input/document-link/document-link.component.html 11 + + src/app/components/common/input/file/file.component.html + 11 + + + src/app/components/common/input/file/file.component.html + 25 + src/app/components/common/input/number/number.component.html 11 @@ -3757,6 +3778,13 @@ 44 + + Upload + + src/app/components/common/input/file/file.component.html + 17 + + Show password @@ -4188,32 +4216,32 @@ 44 - - Hello , welcome to Paperless-ngx + + Hello , welcome to src/app/components/dashboard/dashboard.component.ts - 38 + 41 - - Welcome to Paperless-ngx + + Welcome to src/app/components/dashboard/dashboard.component.ts - 40 + 43 Dashboard updated src/app/components/dashboard/dashboard.component.ts - 71 + 74 Error updating dashboard src/app/components/dashboard/dashboard.component.ts - 74 + 77 @@ -6443,102 +6471,123 @@ 46 + + General Settings + + src/app/data/paperless-config.ts + 50 + + OCR Settings src/app/data/paperless-config.ts - 49 + 51 Output Type src/app/data/paperless-config.ts - 73 + 75 Language src/app/data/paperless-config.ts - 81 + 83 Pages src/app/data/paperless-config.ts - 88 + 90 Mode src/app/data/paperless-config.ts - 95 + 97 Skip Archive File src/app/data/paperless-config.ts - 103 + 105 Image DPI src/app/data/paperless-config.ts - 111 + 113 Clean src/app/data/paperless-config.ts - 118 + 120 Deskew src/app/data/paperless-config.ts - 126 + 128 Rotate Pages src/app/data/paperless-config.ts - 133 + 135 Rotate Pages Threshold src/app/data/paperless-config.ts - 140 + 142 Max Image Pixels src/app/data/paperless-config.ts - 147 + 149 Color Conversion Strategy src/app/data/paperless-config.ts - 154 + 156 OCR Arguments src/app/data/paperless-config.ts - 162 + 164 + + + + Application Logo + + src/app/data/paperless-config.ts + 171 + + + + Application Title + + src/app/data/paperless-config.ts + 178 diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts index ad76bdb74..a97897c36 100644 --- a/src-ui/src/app/app.module.ts +++ b/src-ui/src/app/app.module.ts @@ -110,6 +110,7 @@ import { DocumentLinkComponent } from './components/common/input/document-link/d import { PreviewPopupComponent } from './components/common/preview-popup/preview-popup.component' import { SwitchComponent } from './components/common/input/switch/switch.component' import { ConfigComponent } from './components/admin/config/config.component' +import { FileComponent } from './components/common/input/file/file.component' import localeAf from '@angular/common/locales/af' import localeAr from '@angular/common/locales/ar' @@ -267,6 +268,7 @@ function initializeApp(settings: SettingsService) { PreviewPopupComponent, SwitchComponent, ConfigComponent, + FileComponent, ], imports: [ BrowserModule, diff --git a/src-ui/src/app/components/admin/config/config.component.html b/src-ui/src/app/components/admin/config/config.component.html index 6f5fc4bac..53beb60e0 100644 --- a/src-ui/src/app/components/admin/config/config.component.html +++ b/src-ui/src/app/components/admin/config/config.component.html @@ -30,6 +30,7 @@ @case (ConfigOptionType.Boolean) { } @case (ConfigOptionType.String) { } @case (ConfigOptionType.JSON) { } + @case (ConfigOptionType.File) { } } diff --git a/src-ui/src/app/components/admin/config/config.component.spec.ts b/src-ui/src/app/components/admin/config/config.component.spec.ts index 5d70881b6..6c5472159 100644 --- a/src-ui/src/app/components/admin/config/config.component.spec.ts +++ b/src-ui/src/app/components/admin/config/config.component.spec.ts @@ -15,12 +15,15 @@ import { SwitchComponent } from '../../common/input/switch/switch.component' import { FormsModule, ReactiveFormsModule } from '@angular/forms' import { PageHeaderComponent } from '../../common/page-header/page-header.component' import { SelectComponent } from '../../common/input/select/select.component' +import { FileComponent } from '../../common/input/file/file.component' +import { SettingsService } from 'src/app/services/settings.service' describe('ConfigComponent', () => { let component: ConfigComponent let fixture: ComponentFixture let configService: ConfigService let toastService: ToastService + let settingService: SettingsService beforeEach(async () => { await TestBed.configureTestingModule({ @@ -30,6 +33,7 @@ describe('ConfigComponent', () => { SelectComponent, NumberComponent, SwitchComponent, + FileComponent, PageHeaderComponent, ], imports: [ @@ -44,6 +48,7 @@ describe('ConfigComponent', () => { configService = TestBed.inject(ConfigService) toastService = TestBed.inject(ToastService) + settingService = TestBed.inject(SettingsService) fixture = TestBed.createComponent(ConfigComponent) component = fixture.componentInstance fixture.detectChanges() @@ -100,4 +105,39 @@ describe('ConfigComponent', () => { component.configForm.patchValue({ user_args: '{ "foo": "bar" }' }) expect(component.errors).toEqual({ user_args: null }) }) + + it('should upload file, show error if necessary', () => { + const uploadSpy = jest.spyOn(configService, 'uploadFile') + const errorSpy = jest.spyOn(toastService, 'showError') + uploadSpy.mockReturnValueOnce( + throwError(() => new Error('Error uploading file')) + ) + component.uploadFile(new File([], 'test.png'), 'app_logo') + expect(uploadSpy).toHaveBeenCalled() + expect(errorSpy).toHaveBeenCalled() + uploadSpy.mockReturnValueOnce( + of({ app_logo: 'https://example.com/logo/test.png' } as any) + ) + component.uploadFile(new File([], 'test.png'), 'app_logo') + expect(component.initialConfig).toEqual({ + app_logo: 'https://example.com/logo/test.png', + }) + }) + + it('should refresh ui settings after save or upload', () => { + const saveSpy = jest.spyOn(configService, 'saveConfig') + const initSpy = jest.spyOn(settingService, 'initializeSettings') + saveSpy.mockReturnValueOnce( + of({ output_type: OutputTypeConfig.PDF_A } as any) + ) + component.saveConfig() + expect(initSpy).toHaveBeenCalled() + + const uploadSpy = jest.spyOn(configService, 'uploadFile') + uploadSpy.mockReturnValueOnce( + of({ app_logo: 'https://example.com/logo/test.png' } as any) + ) + component.uploadFile(new File([], 'test.png'), 'app_logo') + expect(initSpy).toHaveBeenCalled() + }) }) diff --git a/src-ui/src/app/components/admin/config/config.component.ts b/src-ui/src/app/components/admin/config/config.component.ts index 66d7b537f..63e66d456 100644 --- a/src-ui/src/app/components/admin/config/config.component.ts +++ b/src-ui/src/app/components/admin/config/config.component.ts @@ -19,6 +19,7 @@ import { ConfigService } from 'src/app/services/config.service' import { ToastService } from 'src/app/services/toast.service' import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component' import { DirtyComponent, dirtyCheck } from '@ngneat/dirty-check-forms' +import { SettingsService } from 'src/app/services/settings.service' @Component({ selector: 'pngx-config', @@ -55,7 +56,8 @@ export class ConfigComponent constructor( private configService: ConfigService, - private toastService: ToastService + private toastService: ToastService, + private settingsService: SettingsService ) { super() this.configForm.addControl('id', new FormControl()) @@ -145,6 +147,7 @@ export class ConfigComponent this.loading = false this.initialize(config) this.store.next(config) + this.settingsService.initializeSettings().subscribe() this.toastService.showInfo($localize`Configuration updated`) }, error: (e) => { @@ -160,4 +163,27 @@ export class ConfigComponent public discardChanges() { this.configForm.reset(this.initialConfig) } + + public uploadFile(file: File, key: string) { + this.loading = true + this.configService + .uploadFile(file, this.configForm.value['id'], key) + .pipe(takeUntil(this.unsubscribeNotifier), first()) + .subscribe({ + next: (config) => { + this.loading = false + this.initialize(config) + this.store.next(config) + this.settingsService.initializeSettings().subscribe() + this.toastService.showInfo($localize`File successfully updated`) + }, + error: (e) => { + this.loading = false + this.toastService.showError( + $localize`An error occurred uploading file`, + e + ) + }, + }) + } } diff --git a/src-ui/src/app/components/app-frame/app-frame.component.html b/src-ui/src/app/components/app-frame/app-frame.component.html index 32241333e..ba21c8bac 100644 --- a/src-ui/src/app/components/app-frame/app-frame.component.html +++ b/src-ui/src/app/components/app-frame/app-frame.component.html @@ -4,15 +4,25 @@ (click)="isMenuCollapsed = !isMenuCollapsed"> - - Paperless-ngx +
+ @if (customAppTitle?.length) { +
+ {{customAppTitle}} + by Paperless-ngx +
+ } @else { + Paperless-ngx + } +
diff --git a/src-ui/src/app/components/app-frame/app-frame.component.scss b/src-ui/src/app/components/app-frame/app-frame.component.scss index f8a32ecfb..5dcac760f 100644 --- a/src-ui/src/app/components/app-frame/app-frame.component.scss +++ b/src-ui/src/app/components/app-frame/app-frame.component.scss @@ -217,9 +217,16 @@ main { */ .navbar-brand { - padding-top: 0.75rem; - padding-bottom: 0.75rem; font-size: 1rem; + + .flex-column { + padding: 0.15rem 0; + } + + .byline { + font-size: 0.5rem; + letter-spacing: 0.1rem; + } } @media screen and (min-width: 768px) { diff --git a/src-ui/src/app/components/app-frame/app-frame.component.ts b/src-ui/src/app/components/app-frame/app-frame.component.ts index 0e877b7ce..cfc9740a4 100644 --- a/src-ui/src/app/components/app-frame/app-frame.component.ts +++ b/src-ui/src/app/components/app-frame/app-frame.component.ts @@ -102,6 +102,10 @@ export class AppFrameComponent }, 200) // slightly longer than css animation for slim sidebar } + get customAppTitle(): string { + return this.settingsService.get(SETTINGS_KEYS.APP_TITLE) + } + get slimSidebarEnabled(): boolean { return this.settingsService.get(SETTINGS_KEYS.SLIM_SIDEBAR) } diff --git a/src-ui/src/app/components/common/input/file/file.component.html b/src-ui/src/app/components/common/input/file/file.component.html new file mode 100644 index 000000000..9ad82a99c --- /dev/null +++ b/src-ui/src/app/components/common/input/file/file.component.html @@ -0,0 +1,37 @@ +
+
+
+ @if (title) { + + } + @if (removable) { + + } +
+
+ + +
+ @if (filename) { +
+ {{filename}} + +
+ } + + @if (hint) { + + } +
+ {{error}} +
+
+
diff --git a/src-ui/src/app/components/common/input/file/file.component.scss b/src-ui/src/app/components/common/input/file/file.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src-ui/src/app/components/common/input/file/file.component.spec.ts b/src-ui/src/app/components/common/input/file/file.component.spec.ts new file mode 100644 index 000000000..86d135188 --- /dev/null +++ b/src-ui/src/app/components/common/input/file/file.component.spec.ts @@ -0,0 +1,41 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing' + +import { FileComponent } from './file.component' +import { HttpClientTestingModule } from '@angular/common/http/testing' +import { FormsModule, ReactiveFormsModule } from '@angular/forms' + +describe('FileComponent', () => { + let component: FileComponent + let fixture: ComponentFixture + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [FileComponent], + imports: [FormsModule, ReactiveFormsModule, HttpClientTestingModule], + }).compileComponents() + + fixture = TestBed.createComponent(FileComponent) + component = fixture.componentInstance + fixture.detectChanges() + }) + + it('should update file on change', () => { + const event = { target: { files: [new File([], 'test.png')] } } + component.onFile(event as any) + expect(component.file.name).toEqual('test.png') + }) + + it('should get filename', () => { + component.value = 'https://example.com:8000/logo/filename.svg' + expect(component.filename).toEqual('filename.svg') + }) + + it('should fire upload event', () => { + let firedFile + component.file = new File([], 'test.png') + component.upload.subscribe((file) => (firedFile = file)) + component.uploadClicked() + expect(firedFile.name).toEqual('test.png') + expect(component.file).toBeUndefined() + }) +}) diff --git a/src-ui/src/app/components/common/input/file/file.component.ts b/src-ui/src/app/components/common/input/file/file.component.ts new file mode 100644 index 000000000..0506dcc5b --- /dev/null +++ b/src-ui/src/app/components/common/input/file/file.component.ts @@ -0,0 +1,53 @@ +import { + Component, + ElementRef, + EventEmitter, + Output, + ViewChild, + forwardRef, +} from '@angular/core' +import { NG_VALUE_ACCESSOR } from '@angular/forms' +import { AbstractInputComponent } from '../abstract-input' + +@Component({ + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => FileComponent), + multi: true, + }, + ], + selector: 'pngx-input-file', + templateUrl: './file.component.html', + styleUrl: './file.component.scss', +}) +export class FileComponent extends AbstractInputComponent { + @Output() + upload = new EventEmitter() + + public file: File + + @ViewChild('fileInput') fileInput: ElementRef + + get filename(): string { + return this.value + ? this.value.substring(this.value.lastIndexOf('/') + 1) + : null + } + + onFile(event: Event) { + this.file = (event.target as HTMLInputElement).files[0] + } + + uploadClicked() { + this.upload.emit(this.file) + this.clear() + } + + clear() { + this.file = undefined + this.fileInput.nativeElement.value = null + this.writeValue(null) + this.onChange(null) + } +} diff --git a/src-ui/src/app/components/common/logo/logo.component.html b/src-ui/src/app/components/common/logo/logo.component.html index af08e41fd..6fb003396 100644 --- a/src-ui/src/app/components/common/logo/logo.component.html +++ b/src-ui/src/app/components/common/logo/logo.component.html @@ -1,18 +1,22 @@ - - - - - - - - - - - - - - - - - - +@if (customLogo) { + +} @else { + + + + + + + + + + + + + + + + + + +} diff --git a/src-ui/src/app/components/common/logo/logo.component.spec.ts b/src-ui/src/app/components/common/logo/logo.component.spec.ts index 921ea3765..5b64177a4 100644 --- a/src-ui/src/app/components/common/logo/logo.component.spec.ts +++ b/src-ui/src/app/components/common/logo/logo.component.spec.ts @@ -2,15 +2,21 @@ import { ComponentFixture, TestBed } from '@angular/core/testing' import { LogoComponent } from './logo.component' import { By } from '@angular/platform-browser' +import { HttpClientTestingModule } from '@angular/common/http/testing' +import { SettingsService } from 'src/app/services/settings.service' +import { SETTINGS_KEYS } from 'src/app/data/ui-settings' describe('LogoComponent', () => { let component: LogoComponent let fixture: ComponentFixture + let settingsService: SettingsService beforeEach(() => { TestBed.configureTestingModule({ declarations: [LogoComponent], + imports: [HttpClientTestingModule], }) + settingsService = TestBed.inject(SettingsService) fixture = TestBed.createComponent(LogoComponent) component = fixture.componentInstance fixture.detectChanges() @@ -33,4 +39,9 @@ describe('LogoComponent', () => { 'height:10em' ) }) + + it('should support getting custom logo', () => { + settingsService.set(SETTINGS_KEYS.APP_LOGO, '/logo/test.png') + expect(component.customLogo).toEqual('http://localhost:8000/logo/test.png') + }) }) diff --git a/src-ui/src/app/components/common/logo/logo.component.ts b/src-ui/src/app/components/common/logo/logo.component.ts index 3320a621a..7404ea865 100644 --- a/src-ui/src/app/components/common/logo/logo.component.ts +++ b/src-ui/src/app/components/common/logo/logo.component.ts @@ -1,4 +1,7 @@ import { Component, Input } from '@angular/core' +import { SETTINGS_KEYS } from 'src/app/data/ui-settings' +import { SettingsService } from 'src/app/services/settings.service' +import { environment } from 'src/environments/environment' @Component({ selector: 'pngx-logo', @@ -12,6 +15,17 @@ export class LogoComponent { @Input() height = '6em' + get customLogo(): string { + return this.settingsService.get(SETTINGS_KEYS.APP_LOGO)?.length + ? environment.apiBaseUrl.replace( + /\/api\/$/, + this.settingsService.get(SETTINGS_KEYS.APP_LOGO) + ) + : null + } + + constructor(private settingsService: SettingsService) {} + getClasses() { return ['logo'].concat(this.extra_classes).join(' ') } diff --git a/src-ui/src/app/components/dashboard/dashboard.component.ts b/src-ui/src/app/components/dashboard/dashboard.component.ts index a35e7459b..906cc775a 100644 --- a/src-ui/src/app/components/dashboard/dashboard.component.ts +++ b/src-ui/src/app/components/dashboard/dashboard.component.ts @@ -5,13 +5,13 @@ import { ComponentWithPermissions } from '../with-permissions/with-permissions.c import { TourService } from 'ngx-ui-tour-ng-bootstrap' import { SavedView } from 'src/app/data/saved-view' import { ToastService } from 'src/app/services/toast.service' -import { SETTINGS_KEYS } from 'src/app/data/ui-settings' import { CdkDragDrop, CdkDragEnd, CdkDragStart, moveItemInArray, } from '@angular/cdk/drag-drop' +import { environment } from 'src/environments/environment' @Component({ selector: 'pngx-dashboard', @@ -35,9 +35,9 @@ export class DashboardComponent extends ComponentWithPermissions { get subtitle() { if (this.settingsService.displayName) { - return $localize`Hello ${this.settingsService.displayName}, welcome to Paperless-ngx` + return $localize`Hello ${this.settingsService.displayName}, welcome to ${environment.appTitle}` } else { - return $localize`Welcome to Paperless-ngx` + return $localize`Welcome to ${environment.appTitle}` } } diff --git a/src-ui/src/app/components/not-found/not-found.component.spec.ts b/src-ui/src/app/components/not-found/not-found.component.spec.ts index 2a0ab9d7c..bd3975670 100644 --- a/src-ui/src/app/components/not-found/not-found.component.spec.ts +++ b/src-ui/src/app/components/not-found/not-found.component.spec.ts @@ -2,6 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing' import { NotFoundComponent } from './not-found.component' import { By } from '@angular/platform-browser' import { LogoComponent } from '../common/logo/logo.component' +import { HttpClientTestingModule } from '@angular/common/http/testing' describe('NotFoundComponent', () => { let component: NotFoundComponent @@ -10,6 +11,7 @@ describe('NotFoundComponent', () => { beforeEach(async () => { TestBed.configureTestingModule({ declarations: [NotFoundComponent, LogoComponent], + imports: [HttpClientTestingModule], }).compileComponents() fixture = TestBed.createComponent(NotFoundComponent) diff --git a/src-ui/src/app/data/paperless-config.ts b/src-ui/src/app/data/paperless-config.ts index 69f9b46e0..3ae485ff2 100644 --- a/src-ui/src/app/data/paperless-config.ts +++ b/src-ui/src/app/data/paperless-config.ts @@ -43,9 +43,11 @@ export enum ConfigOptionType { Select = 'select', Boolean = 'boolean', JSON = 'json', + File = 'file', } export const ConfigCategory = { + General: $localize`General Settings`, OCR: $localize`OCR Settings`, } @@ -164,6 +166,20 @@ export const PaperlessConfigOptions: ConfigOption[] = [ config_key: 'PAPERLESS_OCR_USER_ARGS', category: ConfigCategory.OCR, }, + { + key: 'app_logo', + title: $localize`Application Logo`, + type: ConfigOptionType.File, + config_key: 'PAPERLESS_APP_LOGO', + category: ConfigCategory.General, + }, + { + key: 'app_title', + title: $localize`Application Title`, + type: ConfigOptionType.String, + config_key: 'PAPERLESS_APP_TITLE', + category: ConfigCategory.General, + }, ] export interface PaperlessConfig extends ObjectWithId { @@ -180,4 +196,6 @@ export interface PaperlessConfig extends ObjectWithId { max_image_pixels: number color_conversion_strategy: ColorConvertConfig user_args: object + app_logo: string + app_title: string } diff --git a/src-ui/src/app/data/ui-settings.ts b/src-ui/src/app/data/ui-settings.ts index 329fc6aa0..e23e490e9 100644 --- a/src-ui/src/app/data/ui-settings.ts +++ b/src-ui/src/app/data/ui-settings.ts @@ -14,6 +14,8 @@ export interface UiSetting { export const SETTINGS_KEYS = { LANGUAGE: 'language', + APP_LOGO: 'app_logo', + APP_TITLE: 'app_title', // maintain old general-settings: for backwards compatibility BULK_EDIT_CONFIRMATION_DIALOGS: 'general-settings:bulk-edit:confirmation-dialogs', @@ -194,4 +196,14 @@ export const SETTINGS: UiSetting[] = [ type: 'array', default: [], }, + { + key: SETTINGS_KEYS.APP_LOGO, + type: 'string', + default: '', + }, + { + key: SETTINGS_KEYS.APP_TITLE, + type: 'string', + default: '', + }, ] diff --git a/src-ui/src/app/services/config.service.spec.ts b/src-ui/src/app/services/config.service.spec.ts index 3cfadb051..4fb24727f 100644 --- a/src-ui/src/app/services/config.service.spec.ts +++ b/src-ui/src/app/services/config.service.spec.ts @@ -39,4 +39,26 @@ describe('ConfigService', () => { ) expect(req.request.method).toEqual('PATCH') }) + + it('should support upload file with form data', () => { + service.uploadFile(new File([], 'test.png'), 1, 'app_logo').subscribe() + const req = httpTestingController.expectOne( + `${environment.apiBaseUrl}config/1/` + ) + expect(req.request.method).toEqual('PATCH') + expect(req.request.body).not.toBeNull() + }) + + it('should not pass string app_logo', () => { + service + .saveConfig({ + id: 1, + app_logo: '/logo/foobar.png', + } as PaperlessConfig) + .subscribe() + const req = httpTestingController.expectOne( + `${environment.apiBaseUrl}config/1/` + ) + expect(req.request.body).toEqual({ id: 1 }) + }) }) diff --git a/src-ui/src/app/services/config.service.ts b/src-ui/src/app/services/config.service.ts index 19158b3ce..538aafbdd 100644 --- a/src-ui/src/app/services/config.service.ts +++ b/src-ui/src/app/services/config.service.ts @@ -20,8 +20,22 @@ export class ConfigService { } saveConfig(config: PaperlessConfig): Observable { + // dont pass string + if (typeof config.app_logo === 'string') delete config.app_logo return this.http .patch(`${this.baseUrl}${config.id}/`, config) .pipe(first()) } + + uploadFile( + file: File, + configID: number, + configKey: string + ): Observable { + let formData = new FormData() + formData.append(configKey, file, file.name) + return this.http + .patch(`${this.baseUrl}${configID}/`, formData) + .pipe(first()) + } } diff --git a/src-ui/src/app/services/settings.service.spec.ts b/src-ui/src/app/services/settings.service.spec.ts index 0c148cec2..ff0a9837b 100644 --- a/src-ui/src/app/services/settings.service.spec.ts +++ b/src-ui/src/app/services/settings.service.spec.ts @@ -301,4 +301,16 @@ describe('SettingsService', () => { .expectOne(`${environment.apiBaseUrl}ui_settings/`) .flush(ui_settings) }) + + it('should update environment app title if set', () => { + const settings = Object.assign({}, ui_settings) + settings.settings['app_title'] = 'FooBar' + const req = httpTestingController.expectOne( + `${environment.apiBaseUrl}ui_settings/` + ) + req.flush(settings) + expect(environment.appTitle).toEqual('FooBar') + // post for migrate + httpTestingController.expectOne(`${environment.apiBaseUrl}ui_settings/`) + }) }) diff --git a/src-ui/src/app/services/settings.service.ts b/src-ui/src/app/services/settings.service.ts index 9f8560322..4bbeb1dde 100644 --- a/src-ui/src/app/services/settings.service.ts +++ b/src-ui/src/app/services/settings.service.ts @@ -270,6 +270,9 @@ export class SettingsService { first(), tap((uisettings) => { Object.assign(this.settings, uisettings.settings) + if (this.get(SETTINGS_KEYS.APP_TITLE)?.length) { + environment.appTitle = this.get(SETTINGS_KEYS.APP_TITLE) + } this.maybeMigrateSettings() // to update lang cookie if (this.settings['language']?.length) diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss index c8e8e8d5c..0dc58403a 100644 --- a/src-ui/src/styles.scss +++ b/src-ui/src/styles.scss @@ -11,6 +11,9 @@ $grid-breakpoints: ( xxxl: 2400px ); +$form-file-button-bg: var(--bs-body-bg); +$form-file-button-hover-bg: var(--pngx-bg-alt); + @import "node_modules/bootstrap/scss/bootstrap"; @import "theme"; @import "~@ng-select/ng-select/themes/default.theme.css"; diff --git a/src/documents/tests/test_api_app_config.py b/src/documents/tests/test_api_app_config.py index a12d2a695..ba14e664a 100644 --- a/src/documents/tests/test_api_app_config.py +++ b/src/documents/tests/test_api_app_config.py @@ -1,4 +1,5 @@ import json +import os from django.contrib.auth.models import User from rest_framework import status @@ -49,10 +50,34 @@ class TestApiAppConfig(DirectoriesMixin, APITestCase): "rotate_pages_threshold": None, "max_image_pixels": None, "color_conversion_strategy": None, + "app_title": None, + "app_logo": None, }, ), ) + def test_api_get_ui_settings_with_config(self): + """ + GIVEN: + - Existing config with app_title, app_logo specified + WHEN: + - API to retrieve uisettings is called + THEN: + - app_title and app_logo are included + """ + config = ApplicationConfiguration.objects.first() + config.app_title = "Fancy New Title" + config.app_logo = "/logo/example.jpg" + config.save() + response = self.client.get("/api/ui_settings/", format="json") + self.assertDictContainsSubset( + { + "app_title": config.app_title, + "app_logo": config.app_logo, + }, + response.data["settings"], + ) + def test_api_update_config(self): """ GIVEN: @@ -100,3 +125,37 @@ class TestApiAppConfig(DirectoriesMixin, APITestCase): config = ApplicationConfiguration.objects.first() self.assertEqual(config.user_args, None) self.assertEqual(config.language, None) + + def test_api_replace_app_logo(self): + """ + GIVEN: + - Existing config with app_logo specified + WHEN: + - API to replace app_logo is called + THEN: + - old app_logo file is deleted + """ + with open( + os.path.join(os.path.dirname(__file__), "samples", "simple.jpg"), + "rb", + ) as f: + self.client.patch( + f"{self.ENDPOINT}1/", + { + "app_logo": f, + }, + ) + config = ApplicationConfiguration.objects.first() + old_logo = config.app_logo + self.assertTrue(os.path.exists(old_logo.path)) + with open( + os.path.join(os.path.dirname(__file__), "samples", "simple.png"), + "rb", + ) as f: + self.client.patch( + f"{self.ENDPOINT}1/", + { + "app_logo": f, + }, + ) + self.assertFalse(os.path.exists(old_logo.path)) diff --git a/src/documents/tests/test_api_uisettings.py b/src/documents/tests/test_api_uisettings.py index da9f2914d..bde4808d4 100644 --- a/src/documents/tests/test_api_uisettings.py +++ b/src/documents/tests/test_api_uisettings.py @@ -35,6 +35,8 @@ class TestApiUiSettings(DirectoriesMixin, APITestCase): self.assertDictEqual( response.data["settings"], { + "app_title": None, + "app_logo": None, "update_checking": { "backend_setting": "default", }, diff --git a/src/documents/views.py b/src/documents/views.py index d6b90cbfd..b545a1466 100644 --- a/src/documents/views.py +++ b/src/documents/views.py @@ -120,6 +120,7 @@ from documents.serialisers import WorkflowTriggerSerializer from documents.signals import document_updated from documents.tasks import consume_file from paperless import version +from paperless.config import GeneralConfig from paperless.db import GnuPG from paperless.views import StandardPagination @@ -1164,6 +1165,16 @@ class UiSettingsView(GenericAPIView): ui_settings["update_checking"] = { "backend_setting": settings.ENABLE_UPDATE_CHECK, } + + general_config = GeneralConfig() + + ui_settings["app_title"] = settings.APP_TITLE + if general_config.app_title is not None and len(general_config.app_title) > 0: + ui_settings["app_title"] = general_config.app_title + ui_settings["app_logo"] = settings.APP_LOGO + if general_config.app_logo is not None and len(general_config.app_logo) > 0: + ui_settings["app_logo"] = general_config.app_logo + user_resp = { "id": user.id, "username": user.username, diff --git a/src/paperless/config.py b/src/paperless/config.py index 55d6dc3d3..4195a16db 100644 --- a/src/paperless/config.py +++ b/src/paperless/config.py @@ -8,13 +8,11 @@ from paperless.models import ApplicationConfiguration @dataclasses.dataclass -class OutputTypeConfig: +class BaseConfig: """ Almost all parsers care about the chosen PDF output format """ - output_type: str = dataclasses.field(init=False) - @staticmethod def _get_config_instance() -> ApplicationConfiguration: app_config = ApplicationConfiguration.objects.all().first() @@ -24,6 +22,15 @@ class OutputTypeConfig: app_config = ApplicationConfiguration.objects.all().first() return app_config + +@dataclasses.dataclass +class OutputTypeConfig(BaseConfig): + """ + Almost all parsers care about the chosen PDF output format + """ + + output_type: str = dataclasses.field(init=False) + def __post_init__(self) -> None: app_config = self._get_config_instance() @@ -86,3 +93,19 @@ class OcrConfig(OutputTypeConfig): user_args = {} self.user_args = user_args + + +@dataclasses.dataclass +class GeneralConfig(BaseConfig): + """ + General application settings that require global scope + """ + + app_title: str = dataclasses.field(init=False) + app_logo: str = dataclasses.field(init=False) + + def __post_init__(self) -> None: + app_config = self._get_config_instance() + + self.app_title = app_config.app_title or None + self.app_logo = app_config.app_logo.url if app_config.app_logo else None diff --git a/src/paperless/migrations/0002_applicationconfiguration_app_logo_and_more.py b/src/paperless/migrations/0002_applicationconfiguration_app_logo_and_more.py new file mode 100644 index 000000000..e6960d1a6 --- /dev/null +++ b/src/paperless/migrations/0002_applicationconfiguration_app_logo_and_more.py @@ -0,0 +1,33 @@ +# Generated by Django 4.2.9 on 2024-01-12 05:33 + +from django.db import migrations +from django.db import models + + +class Migration(migrations.Migration): + dependencies = [ + ("paperless", "0001_initial"), + ] + + operations = [ + migrations.AddField( + model_name="applicationconfiguration", + name="app_logo", + field=models.FileField( + blank=True, + null=True, + upload_to="", + verbose_name="Application logo", + ), + ), + migrations.AddField( + model_name="applicationconfiguration", + name="app_title", + field=models.CharField( + blank=True, + max_length=48, + null=True, + verbose_name="Application title", + ), + ), + ] diff --git a/src/paperless/models.py b/src/paperless/models.py index 133668dd6..72805dc56 100644 --- a/src/paperless/models.py +++ b/src/paperless/models.py @@ -1,3 +1,4 @@ +from django.core.validators import FileExtensionValidator from django.core.validators import MinValueValidator from django.db import models from django.utils.translation import gettext_lazy as _ @@ -166,6 +167,23 @@ class ApplicationConfiguration(AbstractSingletonModel): null=True, ) + app_title = models.CharField( + verbose_name=_("Application title"), + null=True, + blank=True, + max_length=48, + ) + + app_logo = models.FileField( + verbose_name=_("Application logo"), + null=True, + blank=True, + validators=[ + FileExtensionValidator(allowed_extensions=["jpg", "png", "gif", "svg"]), + ], + upload_to="logo/", + ) + class Meta: verbose_name = _("paperless application settings") diff --git a/src/paperless/serialisers.py b/src/paperless/serialisers.py index fb366f808..b724dd451 100644 --- a/src/paperless/serialisers.py +++ b/src/paperless/serialisers.py @@ -132,6 +132,11 @@ class ApplicationConfigurationSerializer(serializers.ModelSerializer): data["language"] = None return super().run_validation(data) + def update(self, instance, validated_data): + if instance.app_logo and "app_logo" in validated_data: + instance.app_logo.delete() + return super().update(instance, validated_data) + class Meta: model = ApplicationConfiguration fields = "__all__" diff --git a/src/paperless/settings.py b/src/paperless/settings.py index e13518ce3..bc815d4d5 100644 --- a/src/paperless/settings.py +++ b/src/paperless/settings.py @@ -367,6 +367,7 @@ STORAGES = { "staticfiles": { "BACKEND": _static_backend, }, + "default": {"BACKEND": "django.core.files.storage.FileSystemStorage"}, } _CELERY_REDIS_URL, _CHANNELS_REDIS_URL = _parse_redis_url( @@ -999,6 +1000,9 @@ ENABLE_UPDATE_CHECK = os.getenv("PAPERLESS_ENABLE_UPDATE_CHECK", "default") if ENABLE_UPDATE_CHECK != "default": ENABLE_UPDATE_CHECK = __get_boolean("PAPERLESS_ENABLE_UPDATE_CHECK") +APP_TITLE = os.getenv("PAPERLESS_APP_TITLE", None) +APP_LOGO = os.getenv("PAPERLESS_APP_LOGO", None) + ############################################################################### # Machine Learning # ############################################################################### diff --git a/src/paperless/urls.py b/src/paperless/urls.py index 25190e0d8..d45a7bf22 100644 --- a/src/paperless/urls.py +++ b/src/paperless/urls.py @@ -1,3 +1,5 @@ +import os + from django.conf import settings from django.conf.urls import include from django.contrib import admin @@ -8,6 +10,7 @@ from django.utils.translation import gettext_lazy as _ from django.views.decorators.csrf import csrf_exempt from django.views.decorators.csrf import ensure_csrf_cookie from django.views.generic import RedirectView +from django.views.static import serve from rest_framework.authtoken import views from rest_framework.routers import DefaultRouter @@ -181,6 +184,12 @@ urlpatterns = [ url=settings.STATIC_URL + "frontend/en-US/assets/%(path)s", ), ), + # App logo + re_path( + r"^logo(?P.*)$", + serve, + kwargs={"document_root": os.path.join(settings.MEDIA_ROOT, "logo")}, + ), # TODO: with localization, this is even worse! :/ # login, logout path("accounts/", include("django.contrib.auth.urls")),