Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

RED-3982 - added file properties on "upload-file" component

Browse Source
This commit is contained in:
Valentin Mihai 2022-05-22 23:13:11 +03:00
parent e7be61efff
commit 1b146037fa
4 changed files with 27 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/dialog/base-dialog.component.ts
View File

@ -24,7 +24,7 @@ export interface SaveOptions {
* */
export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnInit {
form!: FormGroup;
initialFormValue;
initialFormValue!: Record<string, string>;
private readonly _confirmationDialogService: ConfirmationDialogService = this._injector.get(ConfirmationDialogService);
private readonly _dialog: MatDialog = this._injector.get(MatDialog);

6
src/lib/form/base-form.component.ts
View File

@ -15,5 +15,9 @@ export abstract class BaseFormComponent extends AutoUnsubscribe {
return this.form?.valid;
}
abstract save(): Promise<void>;
get disabled(): boolean {
return !this.valid || !this.changed;
}
abstract save();
}

34
src/lib/upload-file/upload-file.component.html
View File

@ -1,17 +1,19 @@
<div
class="upload-area"
*ngIf="!file"
(click)="triggerAttachFile()"
iqserDragDropFileUpload
(fileDropped)="attachFile($event)"
>
<mat-icon svgIcon="iqser:upload"></mat-icon>
<div translate="import-redactions-dialog.upload-area-text"></div>
</div>
<div class="file-area" *ngIf="file">
<mat-icon svgIcon="iqser:document"></mat-icon>
<p>{{ file.name }}</p>
<mat-icon svgIcon="iqser:trash" (click)="removeFile()"></mat-icon>
</div>
<div>
<div
class="upload-area"
*ngIf="!file"
(click)="triggerAttachFile()"
iqserDragDropFileUpload
(fileDropped)="attachFile($event)"
>
<mat-icon svgIcon="iqser:upload"></mat-icon>
<div translate="import-redactions-dialog.upload-area-text"></div>
</div>
<div class="file-area" *ngIf="file">
<mat-icon svgIcon="iqser:document"></mat-icon>
<p>{{ file.name }}</p>
<mat-icon *ngIf="!readonly" svgIcon="iqser:trash" (click)="removeFile()"></mat-icon>
</div>
<input #attachFileInput [hidden]="true" (change)="attachFile($event)" class="file-upload-input" type="file" [accept]="'application/pdf'" />
<input #attachFileInput [hidden]="true" (change)="attachFile($event)" class="file-upload-input" type="file" [accept]="accept" />
</div>

6
src/lib/upload-file/upload-file.component.ts
View File

@ -1,5 +1,4 @@
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Component({
selector: 'iqser-upload-file',
@ -11,10 +10,11 @@ import { BehaviorSubject } from 'rxjs';
export class UploadFileComponent {
@ViewChild('attachFileInput', { static: true }) attachFileInput: ElementRef;
@Input() file!: File | null;
@Input() readonly = false;
@Input() accept = 'application/pdf';
@Output() readonly fileChanged = new EventEmitter<File | null>();
file!: File | null;
triggerAttachFile() {
this.attachFileInput.nativeElement.click();
}