From e6755055d846bcb344b27d502afd2228f3c823c4 Mon Sep 17 00:00:00 2001
From: Timo Bejan <timo@devplant.ro>
Date: Tue, 13 Dec 2022 12:51:45 +0200
Subject: [PATCH] RED-3800 rss editing

---
 .../rss-dialog/rss-dialog.component.html      | 39 ++++++++++++++++---
 .../rss-dialog/rss-dialog.component.scss      | 28 +++++++++++++
 .../rss-dialog/rss-dialog.component.ts        | 18 ++++++++-
 .../src/app/services/files/rss.service.ts     |  2 +-
 apps/red-ui/src/assets/config/config.json     |  8 ++--
 5 files changed, 83 insertions(+), 12 deletions(-)

diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.html
index 5e98ca16f..cd30afbae 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.html
@@ -3,11 +3,40 @@
 
     <hr />
     <div class="dialog-content">
-        <div *ngIf="rssData$ | async as rssEntry">
-            <div *ngFor="let entry of rssEntry.result | keyvalue: originalOrder" class="rss-row">
-                <div class="rss-key">{{ entry.key }}:</div>
-                <div class="rss-value">{{ entry.value }}</div>
-            </div>
+        <div class="table output-data" *ngIf="rssData$ | async as rssEntry">
+            <div class="table-header">Component</div>
+            <div class="table-header">Value</div>
+            <div class="table-header">Transformation</div>
+            <div class="table-header">Annotations</div>
+
+            <ng-container *ngFor="let entry of rssEntry.result | keyvalue: originalOrder">
+                <div class="bold">{{ entry.key }}</div>
+                <div>
+                    <div class="value-content">
+                        <iqser-editable-input
+                            (save)="saveEdit($event, entry.value.originalKey)"
+                            [buttonsType]="iconButtonTypes.dark"
+                            [cancelTooltip]="'rss-dialog.actions.cancel-edit-name' | translate"
+                            [class]="'w-200'"
+                            [editTooltip]="'rss-dialog.actions.edit-name' | translate"
+                            [saveTooltip]="'rss-dialog.actions.save-name' | translate"
+                            [value]="entry.value.value ?? entry.value.originalValue"
+                        ></iqser-editable-input>
+
+                        <div class="actions">
+                            <iqser-circle-button
+                                (action)="undo()"
+                                icon="red:undo"
+                                [showDot]="false"
+                                [tooltip]="'rss-dialog.actions.undo' | translate"
+                                [type]="iconButtonTypes.dark"
+                            ></iqser-circle-button>
+                        </div>
+                    </div>
+                </div>
+                <div>{{ entry.value.transformation }}</div>
+                <div>{{ entry.value.scmAnnotations | json }}</div>
+            </ng-container>
         </div>
     </div>
 
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.scss b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.scss
index fa01814c2..f741ead8d 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.scss
@@ -19,3 +19,31 @@
 .dialog-content {
     overflow: auto;
 }
+
+.table {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+
+    > div {
+        padding: 8px 10px;
+    }
+
+    .bold {
+        font-weight: 600;
+    }
+
+    .value-content {
+        .value {
+        }
+
+        .actions {
+        }
+    }
+
+    .table-header {
+        margin: 10px 0;
+        border-bottom: 1px solid var(--iqser-separator);
+        background-color: var(--iqser-grey-2);
+        font-weight: 600;
+    }
+}
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.ts
index 2b8eb4b21..603c1ddd5 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/rss-dialog/rss-dialog.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { BaseDialogComponent } from '@iqser/common-ui';
+import { BaseDialogComponent, IconButtonTypes } from '@iqser/common-ui';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { RssService } from '@services/files/rss.service';
 import { IFile, IRssEntry } from '@red/domain';
@@ -18,9 +18,11 @@ interface RssData {
     styleUrls: ['./rss-dialog.component.scss'],
 })
 export class RssDialogComponent extends BaseDialogComponent {
+    readonly iconButtonTypes = IconButtonTypes;
+
     rssData$: Observable<IRssEntry>;
 
-    originalOrder = (a: KeyValue<string, string>, b: KeyValue<string, string>): number => 0;
+    originalOrder = (a: KeyValue<string, any>, b: KeyValue<string, any>): number => 0;
 
     constructor(
         protected readonly _dialogRef: MatDialogRef<RssDialogComponent>,
@@ -35,6 +37,7 @@ export class RssDialogComponent extends BaseDialogComponent {
                 const mapped = {};
                 for (const key of Object.keys(entry.result)) {
                     const newKey = key.replace(new RegExp('_', 'g'), ' ');
+                    (<any>entry.result[key]).originalKey = key;
                     mapped[newKey] = entry.result[key];
                 }
                 return {
@@ -64,4 +67,15 @@ export class RssDialogComponent extends BaseDialogComponent {
     save(): void {
         this.exportJSON();
     }
+
+    undo() {
+        console.log('Undo');
+    }
+
+    saveEdit(event: string, originalKey: string) {
+        console.log(event, originalKey);
+        /**
+         * https://qa2.iqser.cloud/redaction-gateway-v1/swagger-ui/index.html#/rss-controller/revertOverrides
+         */
+    }
 }
diff --git a/apps/red-ui/src/app/services/files/rss.service.ts b/apps/red-ui/src/app/services/files/rss.service.ts
index 71f639f6d..1d4b14d5e 100644
--- a/apps/red-ui/src/app/services/files/rss.service.ts
+++ b/apps/red-ui/src/app/services/files/rss.service.ts
@@ -15,7 +15,7 @@ export class RssService extends GenericService<void> {
         const queryParams: QueryParam[] = [];
         queryParams.push({ key: 'fileId', value: fileId });
 
-        const rssData$ = this._getOne<IRssData>([dossierId], 'rss', queryParams);
+        const rssData$ = this._getOne<IRssData>([dossierId], 'rss/detailed', queryParams);
         return rssData$.pipe(
             map(data => data.files[0]),
             catchError(() => of({} as IRssEntry)),
diff --git a/apps/red-ui/src/assets/config/config.json b/apps/red-ui/src/assets/config/config.json
index f4b69417a..ef98789d9 100644
--- a/apps/red-ui/src/assets/config/config.json
+++ b/apps/red-ui/src/assets/config/config.json
@@ -1,7 +1,7 @@
 {
   "ADMIN_CONTACT_NAME": null,
   "ADMIN_CONTACT_URL": null,
-  "API_URL": "https://dev-08.iqser.cloud/redaction-gateway-v1",
+  "API_URL": "https://syngenta-scm.iqser.cloud/redaction-gateway-v1",
   "APP_NAME": "RedactManager",
   "AUTO_READ_TIME": 3,
   "BACKEND_APP_VERSION": "4.4.40",
@@ -11,11 +11,11 @@
   "MAX_RETRIES_ON_SERVER_ERROR": 3,
   "OAUTH_CLIENT_ID": "redaction",
   "OAUTH_IDP_HINT": null,
-  "OAUTH_URL": "https://dev-08.iqser.cloud/auth/realms/redaction",
+  "OAUTH_URL": "https://syngenta-scm.iqser.cloud/auth/realms/redaction",
   "RECENT_PERIOD_IN_HOURS": 24,
   "SELECTION_MODE": "structural",
   "MANUAL_BASE_URL": "https://docs.redactmanager.com/preview",
   "ANNOTATIONS_THRESHOLD": 1000,
-  "THEME": "redact",
-  "BASE_TRANSLATIONS_DIRECTORY": "/assets/i18n/redact/"
+  "THEME": "scm",
+  "BASE_TRANSLATIONS_DIRECTORY": "/assets/i18n/scm/"
 }