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

RED-9887: fixed component fields cancel and revert actions.

Browse Source
This commit is contained in:
Nicoleta Panaghiu 2024-08-27 14:28:40 +03:00
parent 80a713d850
commit 6f8edaf4ba
2 changed files with 57 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,12 +3,12 @@
@if (!editing) {
<div class="value">
<div class="text">
@for (componentValue of entry.componentValues; track componentValue) {
@for (componentValue of currentEntry().componentValues; track componentValue) {
<span [innerHTML]="transformNewLines(componentValue.value ?? componentValue.originalValue) | replaceNbsp"></span>
}
</div>
<div class="actions">
@if (canEdit) {
@if (canEdit()) {
<iqser-circle-button
(action)="edit()"
[tooltip]="'component-management.actions.edit' | translate"
@ -16,7 +16,7 @@
[class.help-mode]="helpModeService.isHelpModeActive()"
icon="iqser:edit"
></iqser-circle-button>
@if (hasUpdatedValues) {
@if (hasUpdatedValues()) {
<div class="changes-dot"></div>
}
}
@ -24,10 +24,10 @@
</div>
} @else {
<div (cdkDropListDropped)="drop($event)" cdkDropList>
@for (value of entry.componentValues; track value) {
@for (value of currentEntry().componentValues; track value) {
<div cdkDrag class="editing-value">
<mat-icon
[class.hidden-button]="entry.componentValues.length === 1"
[class.hidden-button]="currentEntry().componentValues.length === 1"
[attr.help-mode-key]="'change_component_order'"
cdkDragHandle
class="draggable"
@ -39,7 +39,7 @@
<iqser-circle-button
(action)="removeValue($index)"
[tooltip]="'component-management.actions.delete' | translate"
[class.hidden-button]="entry.componentValues.length === 1"
[class.hidden-button]="currentEntry().componentValues.length === 1"
[attr.help-mode-key]="'remove_component_value'"
class="remove-value"
icon="iqser:trash"
@ -50,13 +50,13 @@
<div class="editing-actions">
<iqser-icon-button
(action)="save()"
[disabled]="disabled"
[disabled]="disabled()"
[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>
<div (click)="cancel($event)" class="all-caps-label cancel" translate="component-management.actions.cancel"></div>
<div class="flex right">
@if (hasUpdatedValues && canEdit) {
@if (hasUpdatedValues() && canEdit()) {
<iqser-circle-button
(action)="undo()"
[tooltip]="'component-management.actions.undo' | translate"

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

@ -1,6 +1,6 @@
import { CdkDrag, CdkDragDrop, CdkDragHandle, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
import { AsyncPipe, KeyValuePipe, NgClass, NgForOf, NgIf } from '@angular/common';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Component, computed, input, OnInit, output, signal, WritableSignal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatIcon } from '@angular/material/icon';
import { CircleButtonComponent, HelpModeService, IconButtonComponent, IconButtonTypes, IqserDialog } from '@iqser/common-ui';
@ -34,17 +34,27 @@ import { ReplaceNbspPipe } from '@common-ui/pipes/replace-nbsp.pipe';
],
})
export class EditableStructuredComponentValueComponent implements OnInit {
readonly entry = input<IComponentLogEntry>();
currentEntry: WritableSignal<IComponentLogEntry>;
readonly canEdit = input<boolean>();
readonly deselectLast = output();
readonly overrideValue = output<IComponentLogEntry>();
readonly revertOverride = output<string>();
hasUpdatedValues = computed(() => this.currentEntry().overridden);
selected = false;
valueBeforeCurrentEdit: IComponentValue[];
protected entryLabel: string;
protected editing = false;
protected hasUpdatedValues = false;
protected initialEntry: IComponentLogEntry;
disabled = computed(() => {
for (let i = 0; i < this.currentEntry().componentValues.length; i++) {
if (this.currentEntry().componentValues[i].value !== this.initialEntry.componentValues[i]?.value) {
return false;
}
}
return this.currentEntry().componentValues.length === this.initialEntry.componentValues.length;
});
protected readonly iconButtonTypes = IconButtonTypes;
@Input() entry: IComponentLogEntry;
@Input() canEdit: boolean;
@Output() readonly deselectLast = new EventEmitter();
@Output() readonly overrideValue = new EventEmitter<IComponentLogEntry>();
@Output() readonly revertOverride = new EventEmitter<string>();
selected = false;
constructor(
readonly helpModeService: HelpModeService,
@ -52,39 +62,18 @@ export class EditableStructuredComponentValueComponent implements OnInit {
private readonly _state: FilePreviewStateService,
) {}
get disabled() {
for (let i = 0; i < this.entry.componentValues.length; i++) {
if (this.entry.componentValues[i].value !== this.initialEntry.componentValues[i]?.value) {
return false;
}
}
return this.entry.componentValues.length === this.initialEntry.componentValues.length;
}
get #hasUpdatedValues() {
for (const value of this.entry.componentValues) {
if (value.originalValue === null && value.value === '') {
continue;
}
if (value.originalValue !== value.value) {
return true;
}
}
return false;
}
get #initialEntry() {
return JSON.parse(JSON.stringify(this.entry));
return JSON.parse(JSON.stringify(this.entry()));
}
ngOnInit() {
this.currentEntry = signal(this.entry());
this.reset();
}
reset() {
this.initialEntry = this.#initialEntry;
this.hasUpdatedValues = this.#hasUpdatedValues;
this.entryLabel = this.parseName(this.entry.name);
this.entryLabel = this.parseName(this.currentEntry().name);
this.deselect();
}
@ -96,11 +85,12 @@ export class EditableStructuredComponentValueComponent implements OnInit {
}
this.deselectLast.emit();
this.selected = true;
this._state.componentReferenceIds = this.#getUniqueReferencesIds(this.entry.componentValues);
this._state.componentReferenceIds = this.#getUniqueReferencesIds(this.currentEntry().componentValues);
}
}
edit() {
this.valueBeforeCurrentEdit = JSON.parse(JSON.stringify([...this.currentEntry().componentValues]));
this.deselectLast.emit();
this.selected = true;
this.editing = true;
@ -114,37 +104,48 @@ export class EditableStructuredComponentValueComponent implements OnInit {
this._state.componentReferenceIds = null;
}
cancel($event?: MouseEvent) {
this.currentEntry.update(value => ({ ...value, componentValues: this.valueBeforeCurrentEdit }));
this.deselect($event);
}
removeValue(index: number) {
this.entry.componentValues.splice(index, 1);
this.currentEntry.update(value => ({ ...value, componentValues: value.componentValues.filter((_, i) => i !== index) }));
}
save() {
this.entry.overridden = true;
this.overrideValue.emit(this.entry);
this.currentEntry.update(value => ({ ...value, overridden: true }));
this.overrideValue.emit(this.currentEntry());
this.reset();
}
async undo() {
const dialog = this._iqserDialog.openDefault(RevertValueDialogComponent, { data: { entry: this.entry }, width: '800px' });
const dialog = this._iqserDialog.openDefault(RevertValueDialogComponent, { data: { entry: this.currentEntry() }, width: '800px' });
const result = await dialog.result();
if (result) {
this.revertOverride.emit(this.entry.name);
this.revertOverride.emit(this.currentEntry().name);
this.reset();
}
}
add() {
this.entry.componentValues.push({
componentRuleId: null,
entityReferences: [],
originalValue: null,
value: '',
valueDescription: '',
});
this.currentEntry.update(value => ({
...value,
componentValues: [
...value.componentValues,
{
componentRuleId: null,
entityReferences: [],
originalValue: null,
value: '',
valueDescription: '',
},
],
}));
}
drop(event: CdkDragDrop<string>) {
moveItemInArray(this.entry.componentValues, event.previousIndex, event.currentIndex);
moveItemInArray(this.currentEntry().componentValues, event.previousIndex, event.currentIndex);
}
parseName(name: string) {
@ -167,7 +168,7 @@ export class EditableStructuredComponentValueComponent implements OnInit {
#updateTextAreaHeight() {
setTimeout(() => {
for (let i = 0; i < this.entry.componentValues.length; i++) {
for (let i = 0; i < this.currentEntry().componentValues.length; i++) {
const textArea = document.getElementById(`value-input-${i}`);
textArea.style.height = 'auto';
textArea.style.height = `${textArea.scrollHeight}px`;