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

RED-6382: Added file attribute edit in workflow view.

Browse Source
This commit is contained in:
Nicoleta Panaghiu 2023-06-14 16:21:10 +03:00
parent 95f4b4f645
commit 984708bac3
7 changed files with 250 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,61 @@
<ng-container *ngIf="configService.listingMode$ | async as mode">
<div class="file-attribute" [ngClass]="{ 'workflow-attribute': mode === 'workflow' }" (click)="editFileAttribute($event)">
<div class="value" [ngClass]="{ 'workflow-value': mode === 'workflow' }">
<b *ngIf="mode === 'workflow' && !isInEditMode"> {{ fileAttribute.label }}: </b>
<span *ngIf="!isDate; else date" [ngClass]="{ hide: isInEditMode, 'clamp-3': mode !== 'workflow' }">
{{ fileAttributeValue || '-' }}</span
>
<ng-template #date>
<span [ngClass]="{ hide: isInEditMode, 'clamp-3': mode !== 'workflow' }">
{{ fileAttributeValue ? (fileAttributeValue | date : 'd MMM yyyy') : '-' }}</span
>
</ng-template>
</div>
<ng-container
*ngIf="
((fileAttributesService.isEditingFileAttribute$ | async) === false || isInEditMode) &&
!file.isInitialProcessing &&
permissionsService.canEditFileAttributes(file, dossier)
"
>
<div
*ngIf="!isInEditMode; else input"
class="action-buttons edit-button"
[ngClass]="{ 'workflow-edit-button': mode === 'workflow' }"
[class.help-mode-button]="helpModeService.isHelpModeActive$ | async"
(click)="editFileAttribute($event)"
[attr.help-mode-key]="'edit-file-attributes'"
>
<div class="edit-icon" [ngClass]="{ 'workflow-edit-icon': mode === 'workflow' }">
<mat-icon [svgIcon]="'iqser:edit'"></mat-icon>
</div>
</div>
</ng-container>
</div>
<ng-template #input>
<div class="edit-input" [ngClass]="{ 'workflow-edit-input': mode === 'workflow' }" stopPropagation>
<form (submit)="save()" [formGroup]="form">
<iqser-dynamic-input
(closedDatepicker)="closedDatepicker = $event"
(keydown.escape)="close()"
[formControlName]="fileAttribute.id"
[id]="fileAttribute.id"
[type]="fileAttribute.type"
[ngClass]="{ 'workflow-input': mode === 'workflow' }"
></iqser-dynamic-input>
<iqser-circle-button
(action)="save()"
[disabled]="disabled"
[icon]="'iqser:check'"
[size]="mode === 'workflow' ? 15 : 34"
class="save"
></iqser-circle-button>
<iqser-circle-button (action)="close()" [size]="mode === 'workflow' ? 15 : 34" [icon]="'iqser:close'"></iqser-circle-button>
</form>
</div>
</ng-template>
</ng-container>

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

@ -0,0 +1,185 @@
.file-attribute {
height: 100%;
width: 100%;
display: flex;
align-items: center;
&.workflow-attribute {
padding: 2px;
position: relative;
}
.value {
z-index: 1;
}
.workflow-value {
display: flex;
width: 90%;
b {
text-transform: uppercase;
padding-right: 5px;
white-space: nowrap;
}
span {
word-break: unset;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.edit-icon {
display: none;
}
.help-mode-button {
background-color: var(--iqser-grey-6);
width: 90%;
height: 50%;
border-radius: 4px;
position: absolute;
margin-left: -10px;
}
.edit-input {
cursor: default;
display: flex;
z-index: 2;
border: solid var(--iqser-grey-6);
border-radius: 10px;
background: var(--iqser-background);
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
margin-left: -10px;
&.workflow-edit-input {
justify-content: space-between;
box-shadow: none;
width: 100%;
position: absolute;
left: 0;
top: -5px;
border: none;
form {
width: 100%;
}
iqser-circle-button {
margin: 0 5px;
&:nth-child(2) {
padding-left: 10px;
}
&:last-child {
margin-right: -8px;
}
}
}
form {
margin: 5px;
display: flex;
align-items: center;
iqser-dynamic-input {
margin-top: 0;
}
.workflow-input {
width: 100%;
padding-left: 2px;
::ng-deep .iqser-input-group {
width: 100%;
margin-top: 0;
input {
margin-top: 0;
min-height: 14px;
line-height: 0;
padding-top: 0;
border: solid 1px gray;
font-size: 12px;
padding-left: 5px;
}
}
}
.save {
margin-left: 7px;
}
}
}
}
.file-attribute:hover {
&.workflow-attribute {
background-color: var(--iqser-grey-6);
border-radius: 4px;
padding: 2px;
}
.workflow-value {
b {
white-space: nowrap;
overflow: unset;
}
span {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
.edit-button {
background-color: var(--iqser-grey-6);
width: 100%;
height: 50%;
border-radius: 4px;
position: absolute;
margin-left: -10px;
&.workflow-edit-button {
background-color: transparent;
position: relative;
top: 0;
}
}
.edit-icon {
z-index: 1;
background: white;
width: 23px;
height: 23px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 0;
border-radius: 50%;
margin-top: -8px;
margin-right: -8px;
&.workflow-edit-icon {
background: none;
top: 0;
margin-right: 5px;
width: 14px;
height: 14px;
}
mat-icon {
width: 13px;
height: 13px;
}
}
}
.hide {
visibility: hidden;
}

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

@ -10,6 +10,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import dayjs from 'dayjs';
import { NavigationEnd, Router } from '@angular/router';
import { filter, map, tap } from 'rxjs/operators';
import { ConfigService } from '../../config.service';
@Component({
selector: 'redaction-file-attribute [fileAttribute] [file] [dossier]',
@ -34,6 +35,7 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
private readonly _listingService: ListingService<File>,
readonly fileAttributesService: FileAttributesService,
readonly helpModeService: HelpModeService,
readonly configService: ConfigService,
) {
super();
const sub = router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => this.close());

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

@ -1,46 +0,0 @@
<div class="file-attribute">
<div class="value" (click)="editFileAttribute($event)">
<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>
</div>
<ng-container
*ngIf="
((fileAttributesService.isEditingFileAttribute$ | async) === false || isInEditMode) &&
!file.isInitialProcessing &&
permissionsService.canEditFileAttributes(file, dossier)
"
>
<div
*ngIf="!isInEditMode; else input"
class="action-buttons edit-button"
[class.help-mode-button]="helpModeService.isHelpModeActive$ | async"
(click)="editFileAttribute($event)"
[attr.help-mode-key]="'edit-file-attributes'"
>
<div class="edit-icon">
<mat-icon [svgIcon]="'iqser:edit'"></mat-icon>
</div>
</div>
</ng-container>
</div>
<ng-template #input>
<div class="edit-input" stopPropagation>
<form (submit)="save()" [formGroup]="form">
<iqser-dynamic-input
(closedDatepicker)="closedDatepicker = $event"
(keydown.escape)="close()"
[formControlName]="fileAttribute.id"
[id]="fileAttribute.id"
[type]="fileAttribute.type"
></iqser-dynamic-input>
<iqser-circle-button (action)="save()" [disabled]="disabled" [icon]="'iqser:check'" class="save"></iqser-circle-button>
<iqser-circle-button (action)="close()" [icon]="'iqser:close'"></iqser-circle-button>
</form>
</div>
</ng-template>

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

@ -1,79 +0,0 @@
.file-attribute {
height: 100%;
width: 100%;
display: flex;
align-items: center;
.value {
z-index: 1;
}
.edit-icon {
display: none;
}
.help-mode-button {
background-color: var(--iqser-grey-6);
width: 90%;
height: 50%;
border-radius: 4px;
position: absolute;
margin-left: -10px;
}
.edit-input {
cursor: default;
display: flex;
z-index: 2;
border: solid var(--iqser-grey-6);
border-radius: 10px;
background: var(--iqser-background);
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
margin-left: -10px;
form {
margin: 5px;
display: flex;
align-items: center;
iqser-dynamic-input {
margin-top: 0;
}
.save {
margin-left: 7px;
}
}
}
}
.file-attribute:hover {
.edit-button {
background-color: var(--iqser-grey-6);
width: 100%;
height: 50%;
border-radius: 4px;
position: absolute;
margin-left: -10px;
}
.edit-icon {
z-index: 1;
background: white;
width: 23px;
height: 23px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 0;
border-radius: 50%;
margin-top: -8px;
margin-right: -8px;
mat-icon {
width: 13px;
height: 13px;
}
}
}

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

@ -20,8 +20,7 @@
</div>
<div *ngFor="let config of displayedAttributes" class="small-label mt-8 attribute">
<b> {{ config.label }} </b>
<span> {{ file.fileAttributes.attributeIdToValue[config.id] || '-' }} </span>
<redaction-file-attribute [file]="file" [dossier]="dossier" [fileAttribute]="config"></redaction-file-attribute>
</div>
<redaction-file-workload [file]="file"></redaction-file-workload>

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

@ -26,7 +26,7 @@ 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 { FileAttributeComponent } from './components/file-attribute/file-attribute.component';
import { SharedModule } from '@shared/shared.module';
const routes: IqserRoutes = [