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

Update frontend hint, use textarea for multiline

Browse Source
This commit is contained in:
shamoon 2024-10-01 20:36:15 -07:00
parent 8807b3581e
commit 109fd7d11e
9 changed files with 90 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src-ui/messages.xlf
View File

@ -4698,6 +4698,10 @@
<context context-type="sourcefile">src/app/components/common/input/text/text.component.html</context>
<context context-type="linenumber">9</context>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/common/input/textarea/textarea.component.html</context>
<context context-type="linenumber">9</context>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/common/input/url/url.component.html</context>
<context context-type="linenumber">7</context>
@ -7885,7 +7889,7 @@
<source>Do you really want to delete the storage path &quot;<x id="PH" equiv-text="object.name"/>&quot;?</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/manage/storage-path-list/storage-path-list.component.ts</context>
<context context-type="linenumber">52</context>
<context context-type="linenumber">53</context>
</context-group>
</trans-unit>
<trans-unit id="6402703264596649214" datatype="html">

2
src-ui/src/app/app.module.ts
View File

@ -41,6 +41,7 @@ import { DocumentCardSmallComponent } from './components/document-list/document-
import { BulkEditorComponent } from './components/document-list/bulk-editor/bulk-editor.component'
import { NgxFileDropModule } from 'ngx-file-drop'
import { TextComponent } from './components/common/input/text/text.component'
import { TextAreaComponent } from './components/common/input/textarea/textarea.component'
import { SelectComponent } from './components/common/input/select/select.component'
import { CheckComponent } from './components/common/input/check/check.component'
import { UrlComponent } from './components/common/input/url/url.component'
@ -433,6 +434,7 @@ function initializeApp(settings: SettingsService) {
DocumentCardSmallComponent,
BulkEditorComponent,
TextComponent,
TextAreaComponent,
SelectComponent,
CheckComponent,
UrlComponent,

2
src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.html
View File

@ -10,7 +10,7 @@
<div class="modal-body">
<pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name" autocomplete="off"></pngx-input-text>
<pngx-input-text i18n-title title="Path" formControlName="path" [error]="error?.path" [hint]="pathHint"></pngx-input-text>
<pngx-input-textarea i18n-title title="Path" formControlName="path" [error]="error?.path" [hint]="pathHint"></pngx-input-textarea>
<pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
@if (patternRequired) {
<pngx-input-text i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>

4
src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.ts
View File

@ -26,9 +26,9 @@ export class StoragePathEditDialogComponent extends EditDialogComponent<StorageP
get pathHint() {
return (
$localize`e.g.` +
' <code>{created_year}-{title}</code> ' +
' <code class="text-nowrap">{{ created_year }}-{{ title }}</code> ' +
$localize`or use slashes to add directories e.g.` +
' <code>{created_year}/{correspondent}/{title}</code>. ' +
' <code class="text-nowrap">{{ created_year }}/{{ title }}</code>. ' +
$localize`See <a target="_blank" href="https://docs.paperless-ngx.com/advanced_usage/#file-name-handling">documentation</a> for full list.`
)
}

23
src-ui/src/app/components/common/input/textarea/textarea.component.html Normal file
View File

@ -0,0 +1,23 @@
<div class="mb-3" [class.pb-3]="error">
<div class="row">
<div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
@if (title) {
<label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
}
@if (removable) {
<button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
<i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
</button>
}
</div>
<div class="position-relative" [class.col-md-9]="horizontal">
<textarea #inputField class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [disabled]="disabled" [placeholder]="placeholder"></textarea>
@if (hint) {
<small class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
}
<div class="invalid-feedback position-absolute top-100">
{{error}}
</div>
</div>
</div>
</div>

0
src-ui/src/app/components/common/input/textarea/textarea.component.scss Normal file
View File

31
src-ui/src/app/components/common/input/textarea/textarea.component.spec.ts Normal file
View File

@ -0,0 +1,31 @@
import { ComponentFixture, TestBed } from '@angular/core/testing'
import {
FormsModule,
ReactiveFormsModule,
NG_VALUE_ACCESSOR,
} from '@angular/forms'
import { TextAreaComponent } from './textarea.component'
describe('TextComponent', () => {
let component: TextAreaComponent
let fixture: ComponentFixture<TextAreaComponent>
let input: HTMLTextAreaElement
beforeEach(async () => {
TestBed.configureTestingModule({
declarations: [TextAreaComponent],
providers: [],
imports: [FormsModule, ReactiveFormsModule],
}).compileComponents()
fixture = TestBed.createComponent(TextAreaComponent)
fixture.debugElement.injector.get(NG_VALUE_ACCESSOR)
component = fixture.componentInstance
fixture.detectChanges()
input = component.inputField.nativeElement
})
it('should support use of input field', () => {
expect(component.value).toBeUndefined()
})
})

24
src-ui/src/app/components/common/input/textarea/textarea.component.ts Normal file
View File

@ -0,0 +1,24 @@
import { Component, Input, forwardRef } from '@angular/core'
import { NG_VALUE_ACCESSOR } from '@angular/forms'
import { AbstractInputComponent } from '../abstract-input'
@Component({
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TextAreaComponent),
multi: true,
},
],
selector: 'pngx-input-textarea',
templateUrl: './textarea.component.html',
styleUrls: ['./textarea.component.scss'],
})
export class TextAreaComponent extends AbstractInputComponent<string> {
@Input()
placeholder: string = ''
constructor() {
super()
}
}

3
src-ui/src/app/components/manage/storage-path-list/storage-path-list.component.ts
View File

@ -40,8 +40,9 @@ export class StoragePathListComponent extends ManagementListComponent<StoragePat
{
key: 'path',
name: $localize`Path`,
rendersHtml: true,
valueFn: (c: StoragePath) => {
return c.path
return `<code>${c.path}</code>`
},
},
]