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

RED-8748 - WIP on component management view

Browse Source
This commit is contained in:
Valentin Mihai 2024-04-21 21:14:57 +03:00
parent b157980d8a
commit 45a3729ae1
9 changed files with 173 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html
View File

@ -1,4 +1,4 @@
<div class="component-value" [ngClass]="{ selected: entry.name === selectedEntry?.name, editing: editing }">
<div class="component-value" [ngClass]="{ selected: selected, editing: editing }" (click)="select()">
<div class="component">{{ entry.name }}</div>
<div class="value" *ngIf="!editing; else editValue">
<div class="text">
@ -8,7 +8,7 @@
</div>
<div class="actions">
<iqser-circle-button
(action)="toggleEdit(entry)"
(action)="edit()"
*ngIf="canEdit"
[tooltip]="'component-management.actions.edit' | translate"
class="ml-2"
@ -21,13 +21,45 @@
</div>
<ng-template #editValue>
<div *ngFor="let componentValue of entry.componentValues" class="editing-value">
<mat-icon class="draggable" svgIcon="red:draggable-dots"></mat-icon>
<span> test </span>
<iqser-circle-button
[tooltip]="'component-management.actions.edit' | translate"
class="ml-2"
icon="iqser:trash"
></iqser-circle-button>
</div>
<form [formGroup]="form" (submit)="save()">
<ng-container *ngFor="let componentValue of entry.componentValues; let index = index">
<div class="editing-value" *ngIf="form.get(index.toString())">
<mat-icon class="draggable" svgIcon="red:draggable-dots"></mat-icon>
<div class="iqser-input-group w-400">
<textarea [formControlName]="index" rows="1" type="text"></textarea>
</div>
<iqser-circle-button
(action)="removeValue(index)"
[tooltip]="'component-management.actions.delete' | translate"
class="ml-2"
icon="iqser:trash"
></iqser-circle-button>
</div>
</ng-container>
<div class="editing-actions">
<iqser-icon-button
(action)="save()"
[label]="'component-management.actions.save' | translate"
[type]="iconButtonTypes.primary"
></iqser-icon-button>
<div (click)="deselect($event)" class="all-caps-label cancel" translate="component-management.actions.cancel"></div>
<!-- *ngIf="entry.componentValues[0].value !== entry.componentValues[0].originalValue && canEdit"-->
<div class="flex right">
<iqser-circle-button
(action)="undo(entry.originalKey)"
[showDot]="true"
[tooltip]="'component-management.actions.undo' | translate"
class="ml-2"
icon="red:undo"
></iqser-circle-button>
<iqser-circle-button
(action)="add()"
[tooltip]="'component-management.actions.add' | translate"
class="ml-2"
icon="iqser:plus"
></iqser-circle-button>
</div>
</div>
</form>
</ng-template>

29
apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss
View File

@ -13,7 +13,6 @@
.value {
width: 60%;
display: flex;
align-items: center;
.text {
width: 80%;
@ -50,7 +49,7 @@
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
transform: translateY(-50%) scale(0.7);
}
mat-icon {
@ -61,10 +60,13 @@
&.selected {
background-color: var(--iqser-grey-8);
border-left: 4px solid var(--iqser-primary);
cursor: pointer;
margin-left: 0;
margin-right: 0;
&:not(.editing) {
cursor: pointer;
}
.component {
margin-left: 22px;
}
@ -89,10 +91,31 @@
.editing-value {
display: flex;
align-items: center;
margin: 10px 0 10px 22px;
.iqser-input-group {
margin-top: 0;
textarea {
resize: none;
}
}
.draggable {
cursor: grab;
}
}
.editing-actions {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
margin: 20px 10px 10px 22px;
.right {
margin-left: auto;
}
}
}
}

74
apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
View File

@ -1,26 +1,78 @@
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ComponentLogEntry } from '@red/domain';
import { FormBuilder, FormControl, UntypedFormGroup } from '@angular/forms';
import { IconButtonTypes } from '@iqser/common-ui';
@Component({
selector: 'redaction-editable-structured-component-value [entry] [selectedEntry] [canEdit]',
selector: 'redaction-editable-structured-component-value [entry] [canEdit]',
templateUrl: './editable-structured-component-value.component.html',
styleUrls: ['/editable-structured-component-value.component.scss'],
})
export class EditableStructuredComponentValueComponent implements OnChanges {
export class EditableStructuredComponentValueComponent implements OnInit {
@Input() entry: ComponentLogEntry;
@Input() selectedEntry: ComponentLogEntry;
@Input() canEdit: boolean;
@Output() readonly selectEntry = new EventEmitter<ComponentLogEntry>();
@Output() readonly deselectLast = new EventEmitter();
protected readonly iconButtonTypes = IconButtonTypes;
form: UntypedFormGroup;
selected = false;
editing = false;
ngOnChanges(changes: SimpleChanges) {
if (changes?.selectedEntry?.currentValue) {
this.editing = changes.selectedEntry.currentValue.name === this.entry.name;
constructor(private readonly _formBuilder: FormBuilder) {}
ngOnInit() {
this.form = this.#getForm();
}
#getForm() {
const form = this._formBuilder.group({});
this.entry.componentValues.forEach((value, index) => {
form.addControl(index.toString(), this._formBuilder.control(value.value ?? value.originalValue));
});
return form;
}
select() {
if (!this.editing) {
if (this.selected) {
this.deselect();
return;
}
this.deselectLast.emit();
this.selected = true;
}
}
toggleEdit(entry?: ComponentLogEntry) {
this.editing = !this.editing;
this.selectEntry.emit(entry);
edit() {
this.deselectLast.emit();
this.selected = true;
this.editing = true;
}
deselect($event?: MouseEvent) {
$event?.stopImmediatePropagation();
this.selected = false;
this.editing = false;
}
removeValue(key: number) {
this.form.removeControl(key.toString());
}
save() {}
undo(originalKey: string) {}
add() {
const key = (Object.keys(this.form.controls).length + 1).toString();
this.form.addControl(key, new FormControl(''));
this.entry.componentValues.push({
value: '',
originalValue: '',
valueDescription: '',
componentRuleId: '',
entityReferences: [],
});
}
}

6
apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
View File

@ -12,12 +12,12 @@
<div class="row-separator"></div>
</div>
<div *ngFor="let entry of componentLogEntries" class="component-row" (click)="selectEntry(entry)">
<div *ngFor="let entry of componentLogEntries" class="component-row">
<redaction-editable-structured-component-value
#editableComponent
[entry]="entry"
[selectedEntry]="selectedEntry"
[canEdit]="canEdit"
(selectEntry)="selectEntry($event)"
(deselectLast)="deselectLast()"
></redaction-editable-structured-component-value>
<div class="row-separator"></div>
</div>

18
apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
View File

@ -1,10 +1,16 @@
import { Component, Input, signal } from '@angular/core';
import { Component, Input, QueryList, signal, ViewChildren } from '@angular/core';
import { ComponentLogEntry, Dictionary, File, WorkflowFileStatuses } from '@red/domain';
import { IconButtonTypes, LoadingService } from '@iqser/common-ui';
import { ComponentLogService } from '@services/files/component-log.service';
import { FilesMapService } from '@services/files/files-map.service';
import { UserPreferenceService } from '@users/user-preference.service';
import { firstValueFrom } from 'rxjs';
import { List } from '@common-ui/utils';
import { EditableStructuredComponentValueComponent } from '../editable-structured-component-value/editable-structured-component-value.component';
interface DeselectEvent {
name: string;
}
@Component({
selector: 'redaction-structured-component-management',
@ -15,10 +21,11 @@ export class StructuredComponentManagementComponent {
@Input() file: File;
@Input() dictionaries: Dictionary[];
@ViewChildren('editableComponent') editableComponents: List<EditableStructuredComponentValueComponent>;
readonly componentLogData = signal<ComponentLogEntry[] | undefined>(undefined);
readonly openScmDialogByDefault = signal(this.userPreferences.getOpenScmDialogByDefault());
readonly iconButtonTypes = IconButtonTypes;
selectedEntry: ComponentLogEntry;
constructor(
private readonly _componentLogService: ComponentLogService,
@ -27,8 +34,11 @@ export class StructuredComponentManagementComponent {
readonly userPreferences: UserPreferenceService,
) {}
selectEntry(entry: ComponentLogEntry) {
this.selectedEntry = this.selectedEntry?.name !== entry.name ? entry : null;
deselectLast() {
const lastSelected = this.editableComponents.find(c => c.selected);
if (lastSelected) {
lastSelected.deselect();
}
}
get canEdit() {

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

@ -495,7 +495,12 @@
},
"component-management": {
"actions": {
"edit": ""
"add": "",
"cancel": "",
"delete": "",
"edit": "",
"save": "",
"undo": ""
},
"components": "",
"table-header": {

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

@ -495,7 +495,12 @@
},
"component-management": {
"actions": {
"edit": "Edit"
"add": "Add",
"cancel": "Cancel",
"delete": "Remove value",
"edit": "Edit",
"save": "Save",
"undo": "Undo"
},
"components": "Components",
"table-header": {

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

@ -495,7 +495,12 @@
},
"component-management": {
"actions": {
"edit": ""
"add": "",
"cancel": "",
"delete": "",
"edit": "",
"save": "",
"undo": ""
},
"components": "",
"table-header": {

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

@ -495,7 +495,12 @@
},
"component-management": {
"actions": {
"edit": "Edit"
"add": "Add",
"cancel": "Cancel",
"delete": "Remove value",
"edit": "Edit",
"save": "Save",
"undo": "Undo"
},
"components": "Components",
"table-header": {