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

extended base dialog for 'recategorize image dialog' component and 'resize annotation dialog' compoenent

Browse Source
This commit is contained in:
Valentin 2022-01-18 00:06:59 +02:00 committed by Timo Bejan
parent 85f3088f3a
commit 10f2f4c48a
4 changed files with 37 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/red-ui/src/app/modules/dossier/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.html
View File

@ -1,5 +1,5 @@
<section class="dialog"> <section class="dialog">
<form (submit)="save()" [formGroup]="recategorizeImageForm"> <form (submit)="save()" [formGroup]="form">
<div class="dialog-header heading-l" translate="recategorize-image-dialog.header"></div> <div class="dialog-header heading-l" translate="recategorize-image-dialog.header"></div>
<div class="dialog-content"> <div class="dialog-content">
@ -23,12 +23,12 @@
</div> </div>
<div class="dialog-actions"> <div class="dialog-actions">
<button [disabled]="!recategorizeImageForm.valid || !changed" color="primary" mat-flat-button type="submit"> <button [disabled]="disabled" color="primary" mat-flat-button type="submit">
{{ 'recategorize-image-dialog.actions.save' | translate }} {{ 'recategorize-image-dialog.actions.save' | translate }}
</button> </button>
<div class="all-caps-label cancel" mat-dialog-close translate="recategorize-image-dialog.actions.cancel"></div> <div class="all-caps-label cancel" mat-dialog-close translate="recategorize-image-dialog.actions.cancel"></div>
</div> </div>
</form> </form>
<iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button> <iqser-circle-button class="dialog-close" icon="iqser:close" (action)="close()"></iqser-circle-button>
</section> </section>

27
apps/red-ui/src/app/modules/dossier/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.ts
View File

@ -1,17 +1,17 @@
import { Component, Inject, OnInit } from '@angular/core'; import { Component, Inject, Injector, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, Validators } from '@angular/forms';
import { PermissionsService } from '@services/permissions.service'; import { PermissionsService } from '@services/permissions.service';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { AnnotationWrapper } from '@models/file/annotation.wrapper'; import { AnnotationWrapper } from '@models/file/annotation.wrapper';
import { imageCategoriesTranslations } from '../../translations/image-categories-translations'; import { imageCategoriesTranslations } from '../../translations/image-categories-translations';
import { ImageCategory } from '../../models/image-category.model'; import { ImageCategory } from '../../models/image-category.model';
import { Dossier } from '@red/domain'; import { Dossier } from '@red/domain';
import { BaseDialogComponent } from '@iqser/common-ui';
@Component({ @Component({
templateUrl: './recategorize-image-dialog.component.html', templateUrl: './recategorize-image-dialog.component.html',
}) })
export class RecategorizeImageDialogComponent implements OnInit { export class RecategorizeImageDialogComponent extends BaseDialogComponent implements OnInit {
recategorizeImageForm: FormGroup;
isDocumentAdmin: boolean; isDocumentAdmin: boolean;
typeOptions: ImageCategory[] = ['signature', 'logo', 'formula', 'image']; typeOptions: ImageCategory[] = ['signature', 'logo', 'formula', 'image'];
translations = imageCategoriesTranslations; translations = imageCategoriesTranslations;
@ -19,27 +19,32 @@ export class RecategorizeImageDialogComponent implements OnInit {
constructor( constructor(
private readonly _permissionsService: PermissionsService, private readonly _permissionsService: PermissionsService,
private readonly _formBuilder: FormBuilder, private readonly _formBuilder: FormBuilder,
public dialogRef: MatDialogRef<RecategorizeImageDialogComponent>, protected readonly _injector: Injector,
protected readonly _dialogRef: MatDialogRef<RecategorizeImageDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: { annotations: AnnotationWrapper[]; dossier: Dossier }, @Inject(MAT_DIALOG_DATA) public data: { annotations: AnnotationWrapper[]; dossier: Dossier },
) {} ) {
super(_injector, _dialogRef);
}
get changed(): boolean { get changed(): boolean {
return this.recategorizeImageForm.get('type').value !== this.data.annotations[0].type; return this.form.get('type').value !== this.data.annotations[0].type;
} }
ngOnInit() { ngOnInit() {
super.ngOnInit();
this.isDocumentAdmin = this._permissionsService.isApprover(this.data.dossier); this.isDocumentAdmin = this._permissionsService.isApprover(this.data.dossier);
this.recategorizeImageForm = this._formBuilder.group({ this.form = this._formBuilder.group({
type: [this.data.annotations[0].type, Validators.required], type: [this.data.annotations[0].type, Validators.required],
comment: this.isDocumentAdmin ? [null] : [null, Validators.required], comment: this.isDocumentAdmin ? [null] : [null, Validators.required],
}); });
this.initialFormValue = this.form.getRawValue();
} }
save() { save() {
this.dialogRef.close({ this._dialogRef.close({
type: this.recategorizeImageForm.get('type').value, type: this.form.get('type').value,
comment: this.recategorizeImageForm.get('comment').value, comment: this.form.get('comment').value,
}); });
} }
} }

6
apps/red-ui/src/app/modules/dossier/dialogs/resize-annotation-dialog/resize-annotation-dialog.component.html
View File

@ -1,5 +1,5 @@
<section class="dialog"> <section class="dialog">
<form (submit)="save()" [formGroup]="resizeForm"> <form (submit)="save()" [formGroup]="form">
<div class="dialog-header heading-l" translate="resize-annotation-dialog.header"></div> <div class="dialog-header heading-l" translate="resize-annotation-dialog.header"></div>
<div class="dialog-content"> <div class="dialog-content">
@ -10,12 +10,12 @@
</div> </div>
<div class="dialog-actions"> <div class="dialog-actions">
<button [disabled]="!resizeForm.valid" color="primary" mat-flat-button type="submit"> <button [disabled]="disabled" color="primary" mat-flat-button type="submit">
{{ 'resize-annotation-dialog.actions.save' | translate }} {{ 'resize-annotation-dialog.actions.save' | translate }}
</button> </button>
<div class="all-caps-label cancel" mat-dialog-close translate="resize-annotation-dialog.actions.cancel"></div> <div class="all-caps-label cancel" mat-dialog-close translate="resize-annotation-dialog.actions.cancel"></div>
</div> </div>
</form> </form>
<iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button> <iqser-circle-button class="dialog-close" icon="iqser:close" (action)="close()"></iqser-circle-button>
</section> </section>

24
apps/red-ui/src/app/modules/dossier/dialogs/resize-annotation-dialog/resize-annotation-dialog.component.ts
View File

@ -1,34 +1,40 @@
import { Component, Inject, OnInit } from '@angular/core'; import { Component, Inject, Injector, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, Validators } from '@angular/forms';
import { PermissionsService } from '@services/permissions.service'; import { PermissionsService } from '@services/permissions.service';
import { Dossier } from '@red/domain'; import { Dossier } from '@red/domain';
import { BaseDialogComponent } from '@iqser/common-ui';
@Component({ @Component({
templateUrl: './resize-annotation-dialog.component.html', templateUrl: './resize-annotation-dialog.component.html',
}) })
export class ResizeAnnotationDialogComponent implements OnInit { export class ResizeAnnotationDialogComponent extends BaseDialogComponent implements OnInit {
resizeForm: FormGroup;
isDocumentAdmin: boolean; isDocumentAdmin: boolean;
constructor( constructor(
private readonly _permissionsService: PermissionsService, private readonly _permissionsService: PermissionsService,
private readonly _formBuilder: FormBuilder, private readonly _formBuilder: FormBuilder,
public dialogRef: MatDialogRef<ResizeAnnotationDialogComponent>, protected readonly _injector: Injector,
protected readonly _dialogRef: MatDialogRef<ResizeAnnotationDialogComponent>,
@Inject(MAT_DIALOG_DATA) private readonly _data: { dossier: Dossier }, @Inject(MAT_DIALOG_DATA) private readonly _data: { dossier: Dossier },
) {} ) {
super(_injector, _dialogRef);
}
ngOnInit() { ngOnInit() {
super.ngOnInit();
this.isDocumentAdmin = this._permissionsService.isApprover(this._data.dossier); this.isDocumentAdmin = this._permissionsService.isApprover(this._data.dossier);
this.resizeForm = this._formBuilder.group({ this.form = this._formBuilder.group({
comment: this.isDocumentAdmin ? [null] : [null, Validators.required], comment: this.isDocumentAdmin ? [null] : [null, Validators.required],
}); });
this.initialFormValue = this.form.getRawValue();
} }
save() { save() {
this.dialogRef.close({ this._dialogRef.close({
comment: this.resizeForm.get('comment').value, comment: this.form.get('comment').value,
}); });
} }
} }