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

RED-5445 - Adding value to file attribute in file list

Browse Source
This commit is contained in:
Valentin Mihai 2023-01-31 17:31:30 +02:00
parent c5e6445844
commit d2e6dc8730
14 changed files with 262 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.html Normal file
View File

@ -0,0 +1,12 @@
<div class="file-attribute">
<span *ngIf="!isDate; else date" class="clamp-3"> {{ fileAttributeValue || '-' }}</span>
<ng-template #date>
<span class="clamp-3"> {{ fileAttributeValue ? (fileAttributeValue | date : 'd MMM yyyy') : '-' }}</span>
</ng-template>
<iqser-circle-button
(action)="editFileAttribute($event)"
[icon]="'iqser:edit'"
[disabled]="!fileAttribute.editable"
[tooltip]="'file-attribute.actions.edit' | translate"
></iqser-circle-button>
</div>

16
apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.scss Normal file
View File

@ -0,0 +1,16 @@
.file-attribute {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
iqser-circle-button {
display: none;
}
&:hover {
iqser-circle-button {
display: block;
}
}
}

48
apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.ts Normal file
View File

@ -0,0 +1,48 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { File, FileAttributeConfigTypes, IFileAttributeConfig } from '@red/domain';
import { MatDialog } from '@angular/material/dialog';
import {
EditFileAttributeValueData,
EditFileAttributeValueDialogComponent,
} from '../../../dialogs/edit-file-attribute-value-dialog/edit-file-attribute-value-dialog.component';
import { defaultDialogConfig, Toaster } from '@iqser/common-ui';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { firstValueFrom } from 'rxjs';
@Component({
selector: 'redaction-file-attribute [fileAttribute] [file]',
templateUrl: './file-attribute.component.html',
styleUrls: ['./file-attribute.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FileAttributeComponent {
@Input() fileAttribute!: IFileAttributeConfig;
@Input() file: File;
constructor(private readonly _dialog: MatDialog, private readonly _toaster: Toaster) {}
get isDate(): boolean {
return this.fileAttribute.type === FileAttributeConfigTypes.DATE;
}
get fileAttributeValue(): string {
return this.file.fileAttributes.attributeIdToValue[this.fileAttribute.id];
}
async editFileAttribute($event: MouseEvent): Promise<void> {
$event?.stopPropagation();
const dialogRef = this._dialog.open<EditFileAttributeValueDialogComponent, EditFileAttributeValueData>(
EditFileAttributeValueDialogComponent,
{ ...defaultDialogConfig, data: { fileAttribute: this.fileAttribute, file: this.file } },
);
const result = await firstValueFrom(dialogRef.afterClosed());
if (result) {
this._toaster.success(_('file-attribute.update.success'));
} else if (result === false) {
this._toaster.error(_('file-attribute.update.error'));
}
}
}

4
apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.html
View File

@ -10,8 +10,8 @@
<redaction-date-column [date]="file.redactionModificationDate" [isError]="file.isError"></redaction-date-column>
</div>
<div *ngFor="let config of displayedAttributes" [matTooltip]="file.fileAttributes.attributeIdToValue[config.id]" class="cell">
<span class="clamp-3"> {{ file.fileAttributes.attributeIdToValue[config.id] || '-' }}</span>
<div *ngFor="let config of displayedAttributes" class="cell editable">
<redaction-file-attribute [file]="file" [fileAttribute]="config"></redaction-file-attribute>
</div>
<!-- always show A for error-->

7
apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.scss
View File

@ -21,3 +21,10 @@
}
}
}
.editable {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}

28
apps/red-ui/src/app/modules/dossier-overview/dialogs/edit-file-attribute-value-dialog/edit-file-attribute-value-dialog.component.html Normal file
View File

@ -0,0 +1,28 @@
<section class="dialog">
<form (submit)="save()" [formGroup]="form">
<div translate="edit-file-attribute-value-dialog.header" class="dialog-header heading-l"></div>
<div class="dialog-content">
<iqser-dynamic-input
[formControlName]="fileAttribute.id"
[id]="fileAttribute.id"
[label]="fileAttribute.label"
[type]="fileAttribute.type"
[classList]="'w-full'"
>
</iqser-dynamic-input>
</div>
<div class="dialog-actions">
<iqser-icon-button
[disabled]="disabled"
[label]="'edit-file-attribute-value-dialog.actions.save' | translate"
[submit]="true"
[type]="iconButtonTypes.primary"
></iqser-icon-button>
<div class="all-caps-label cancel" translate="edit-file-attribute-value-dialog.actions.cancel" mat-dialog-close></div>
</div>
</form>
<iqser-circle-button (action)="close()" class="dialog-close" icon="iqser:close"></iqser-circle-button>
</section>

71
apps/red-ui/src/app/modules/dossier-overview/dialogs/edit-file-attribute-value-dialog/edit-file-attribute-value-dialog.component.ts Normal file
View File

@ -0,0 +1,71 @@
import { Component, Inject } from '@angular/core';
import { File, IFileAttributeConfig } from '@red/domain';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { BaseDialogComponent } from '@iqser/common-ui';
import { UntypedFormGroup } from '@angular/forms';
import { firstValueFrom } from 'rxjs';
import { FileAttributesService } from '@services/entity-services/file-attributes.service';
import { FilesService } from '@services/files/files.service';
export interface EditFileAttributeValueData {
readonly fileAttribute: IFileAttributeConfig;
readonly file: File;
}
@Component({
templateUrl: './edit-file-attribute-value-dialog.component.html',
})
export class EditFileAttributeValueDialogComponent extends BaseDialogComponent {
readonly #file: File;
readonly fileAttribute: IFileAttributeConfig;
constructor(
private readonly _fileAttributesService: FileAttributesService,
private readonly _filesService: FilesService,
protected readonly _dialogRef: MatDialogRef<EditFileAttributeValueDialogComponent>,
@Inject(MAT_DIALOG_DATA) readonly data: EditFileAttributeValueData,
) {
super(_dialogRef);
this.#file = data.file;
this.fileAttribute = data.fileAttribute;
if (this.#noFileAttributes) {
this.#initFileAttributes();
}
this.form = this.#getForm();
this.initialFormValue = this.form.getRawValue();
}
get #noFileAttributes(): boolean {
return JSON.stringify(this.#file.fileAttributes.attributeIdToValue) === '{}';
}
#initFileAttributes() {
const configs = this._fileAttributesService.getFileAttributeConfig(this.#file.dossierTemplateId).fileAttributeConfigs;
configs.forEach(config => (this.#file.fileAttributes.attributeIdToValue[config.id] = null));
}
#getForm(): UntypedFormGroup {
const config = {};
const fileAttributes = this.#file.fileAttributes.attributeIdToValue;
Object.keys(fileAttributes).forEach(key => {
config[key] = [fileAttributes[key]];
});
return this._formBuilder.group(config);
}
async save(): Promise<void> {
try {
const attributeIdToValue = this.form.getRawValue();
await firstValueFrom(
this._fileAttributesService.setFileAttributes({ attributeIdToValue }, this.#file.dossierId, this.#file.fileId),
);
await firstValueFrom(this._filesService.reload(this.#file.dossierId, this.#file));
this._dialogRef.close(true);
} catch (e) {
this._dialogRef.close(false);
}
}
}

8
apps/red-ui/src/app/modules/dossier-overview/dossier-overview.module.ts
View File

@ -6,6 +6,7 @@ import {
IqserButtonsModule,
IqserHelpModeModule,
IqserIconsModule,
IqserInputsModule,
IqserListingModule,
IqserLoadingModule,
IqserPermissionsModule,
@ -24,6 +25,8 @@ import { FileWorkloadComponent } from './components/table-item/file-workload/fil
import { WorkflowItemComponent } from './components/workflow-item/workflow-item.component';
import { DossierOverviewScreenHeaderComponent } from './components/screen-header/dossier-overview-screen-header.component';
import { ViewModeSelectionComponent } from './components/view-mode-selection/view-mode-selection.component';
import { FileAttributeComponent } from './components/table-item/file-attribute/file-attribute.component';
import { EditFileAttributeValueDialogComponent } from './dialogs/edit-file-attribute-value-dialog/edit-file-attribute-value-dialog.component';
const routes: Routes = [
{
@ -36,13 +39,17 @@ const routes: Routes = [
},
];
const dialogs = [EditFileAttributeValueDialogComponent];
@NgModule({
declarations: [
...dialogs,
DossierOverviewScreenComponent,
DossierOverviewBulkActionsComponent,
DossierDetailsComponent,
DossierDetailsStatsComponent,
FileWorkloadComponent,
FileAttributeComponent,
TableItemComponent,
WorkflowItemComponent,
DossierOverviewScreenHeaderComponent,
@ -63,6 +70,7 @@ const routes: Routes = [
IqserSharedModule,
IqserScrollbarModule,
IqserPermissionsModule,
IqserInputsModule,
],
})
export class DossierOverviewModule {}

4
apps/red-ui/src/app/modules/shared/pipes/date.pipe.ts
View File

@ -26,7 +26,11 @@ export class DatePipe extends BaseDatePipe implements PipeTransform {
return this._getExactDate(value);
}
}
try {
return super.transform(value, format, timezone, locale || this._translateService.currentLang);
} catch (e) {
return '-';
}
}
private _getTimeFromNow(value: string) {

16
apps/red-ui/src/assets/i18n/redact/de.json
View File

@ -1152,6 +1152,13 @@
},
"side-nav-title": "Konfiguration"
},
"edit-file-attribute-value-dialog": {
"actions": {
"cancel": "",
"save": ""
},
"header": ""
},
"entities-listing": {
"action": {
"delete": "Wörterbuch löschen",
@ -1228,6 +1235,15 @@
"number": "Nummer",
"text": "Freier Text"
},
"file-attribute": {
"actions": {
"edit": ""
},
"update": {
"error": "",
"success": ""
}
},
"file-attributes-configurations": {
"cancel": "",
"form": {

16
apps/red-ui/src/assets/i18n/redact/en.json
View File

@ -1152,6 +1152,13 @@
},
"side-nav-title": "Configurations"
},
"edit-file-attribute-value-dialog": {
"actions": {
"cancel": "Cancel",
"save": "Save"
},
"header": "Edit file attribute"
},
"entities-listing": {
"action": {
"delete": "Delete Entity",
@ -1228,6 +1235,15 @@
"number": "Number",
"text": "Free Text"
},
"file-attribute": {
"actions": {
"edit": "Edit"
},
"update": {
"error": "Failed to update file attribute value!",
"success": "File attribute value has been updated successfully!"
}
},
"file-attributes-configurations": {
"cancel": "Cancel",
"form": {

16
apps/red-ui/src/assets/i18n/scm/de.json
View File

@ -1152,6 +1152,13 @@
},
"side-nav-title": "Konfiguration"
},
"edit-file-attribute-value-dialog": {
"actions": {
"cancel": "",
"save": ""
},
"header": ""
},
"entities-listing": {
"action": {
"delete": "Wörterbuch löschen",
@ -1228,6 +1235,15 @@
"number": "Nummer",
"text": "Freier Text"
},
"file-attribute": {
"actions": {
"edit": ""
},
"update": {
"error": "",
"success": ""
}
},
"file-attributes-configurations": {
"cancel": "",
"form": {

16
apps/red-ui/src/assets/i18n/scm/en.json
View File

@ -1152,6 +1152,13 @@
},
"side-nav-title": "Configurations"
},
"edit-file-attribute-value-dialog": {
"actions": {
"cancel": "Cancel",
"save": "Save"
},
"header": "Edit file attribute"
},
"entities-listing": {
"action": {
"delete": "Delete Entity",
@ -1228,6 +1235,15 @@
"number": "Number",
"text": "Free Text"
},
"file-attribute": {
"actions": {
"edit": "Edit"
},
"update": {
"error": "Failed to update file attribute value!",
"success": "File attribute value has been updated successfully!"
}
},
"file-attributes-configurations": {
"cancel": "Cancel",
"form": {

2
libs/common-ui

@ -1 +1 @@
Subproject commit 40e640bc62992879f3dbb2479f288beb27bbdf27
Subproject commit 484ff6eed59fee2a35a61069943da2af46b3f17a