From 87e2e27e563169165fb5bcc56c834f872ad18f23 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Thu, 25 Jul 2024 00:35:48 +0300
Subject: [PATCH 1/3] RED-9260 - Component Management UI

---
 .../component-definitions.component.html      | 55 ++++++++++---------
 .../component-definitions.component.scss      | 13 ++++-
 .../component-definitions.component.ts        | 28 ++++------
 apps/red-ui/src/assets/config/config.json     | 10 ++--
 4 files changed, 58 insertions(+), 48 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.html b/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.html
index 7f371474f..c6ae97bdf 100644
--- a/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.html
@@ -19,7 +19,7 @@
             </div>
         </div>
         <div class="content">
-            <div class="components-list" (cdkDropListDropped)="drop($event)" cdkDropList>
+            <div class="components-list">
                 <div class="header">
                     <div class="item-content">
                         <div class="all-caps-label">{{ 'component-definitions.columns.position' | translate }}</div>
@@ -27,32 +27,37 @@
                     </div>
                 </div>
 
-                @for (component of componentDefinitions; track component) {
-                    <div
-                        class="list-item"
-                        [class.selected]="selectedComponent?.id === component.id"
-                        cdkDrag
-                        (click)="selectComponent(component)"
-                    >
-                        <div class="item-content">
-                            <div class="table-item-title heading">
-                                <mat-icon cdkDragHandle class="draggable" svgIcon="red:draggable-dots"></mat-icon>
-                                <span> {{ component.rank }} </span>
-                            </div>
-                            <div class="table-item-title heading">{{ component.displayName }}</div>
-                            <div class="right-content">
-                                @if (permissionsService.canEditEntities()) {
-                                    <iqser-circle-button
-                                        (action)="deleteComponent(component.id)"
-                                        [tooltip]="'trash.action.delete' | translate"
-                                        icon="iqser:trash"
-                                    ></iqser-circle-button>
-                                }
-                                <mat-icon class="arrow-right" svgIcon="red:arrow-right"></mat-icon>
+                <div (cdkDropListDropped)="drop($event)" cdkDropList>
+                    @for (component of componentDefinitions; track component) {
+                        <div
+                            class="list-item"
+                            [class.selected]="selectedComponent?.id === component.id"
+                            cdkDrag
+                            (click)="selectComponent(component)"
+                        >
+                            <div class="item-content">
+                                <div class="table-item-title heading">
+                                    <mat-icon cdkDragHandle class="draggable" svgIcon="red:draggable-dots"></mat-icon>
+                                    <span> {{ component.rank }} </span>
+                                </div>
+                                <div class="table-item-title heading">{{ component.displayName }}</div>
+                                <div class="right-content">
+                                    @if (permissionsService.canEditEntities()) {
+                                        <iqser-circle-button
+                                            [class]="'delete-component-definition'"
+                                            (action)="deleteComponent(component.id)"
+                                            [tooltip]="'trash.action.delete' | translate"
+                                            icon="iqser:trash"
+                                        ></iqser-circle-button>
+                                    }
+                                    @if (selectedComponent?.id === component.id) {
+                                        <mat-icon class="arrow-right" svgIcon="red:arrow-right"></mat-icon>
+                                    }
+                                </div>
                             </div>
                         </div>
-                    </div>
-                }
+                    }
+                </div>
             </div>
             @if (selectedComponent) {
                 <section class="dialog">
diff --git a/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.scss b/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.scss
index 80af0380b..b54da356d 100644
--- a/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.scss
@@ -32,6 +32,10 @@
         align-items: center;
         gap: 5px;
 
+        iqser-circle-button {
+            visibility: hidden;
+        }
+
         .arrow-right {
             transform: scale(0.7);
         }
@@ -58,7 +62,6 @@
     .content {
         display: flex;
         gap: 20px;
-        height: 100%;
 
         .components-list {
             flex: 1;
@@ -71,6 +74,7 @@
 
             .list-item {
                 height: 80px;
+                transition: background 0.3s ease;
             }
 
             .header,
@@ -95,6 +99,10 @@
                     }
                 }
             }
+
+            .list-item:hover > .item-content > .right-content > iqser-circle-button {
+                visibility: visible;
+            }
         }
 
         section {
@@ -112,6 +120,9 @@
 }
 
 .cdk-drag-preview {
+    .list-item {
+        transition: background 0.3s ease;
+    }
     .item-content {
         @extend %item-content-style;
     }
diff --git a/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.ts b/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.ts
index 31130e284..bf078ecaf 100644
--- a/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.ts
@@ -1,12 +1,5 @@
 import { Component, OnInit, signal } from '@angular/core';
-import {
-    BaseFormComponent,
-    CircleButtonComponent,
-    IconButtonComponent,
-    IqserDialog,
-    listingProvidersFactory,
-    LoadingService,
-} from '@iqser/common-ui';
+import { BaseFormComponent, CircleButtonComponent, IconButtonComponent, listingProvidersFactory, LoadingService } from '@iqser/common-ui';
 import { ComponentDefinitionsService } from '@services/entity-services/component-definitions.service';
 import { firstValueFrom } from 'rxjs';
 import { getParam } from '@common-ui/utils';
@@ -50,7 +43,6 @@ export default class ComponentDefinitionsComponent extends BaseFormComponent imp
     constructor(
         private readonly _loadingService: LoadingService,
         private readonly _componentDefinitionsService: ComponentDefinitionsService,
-        private readonly _dialog: IqserDialog,
         private readonly _formBuilder: FormBuilder,
         private readonly _dialogService: AdminDialogService,
         protected readonly permissionsService: PermissionsService,
@@ -96,13 +88,15 @@ export default class ComponentDefinitionsComponent extends BaseFormComponent imp
     }
 
     async drop(event: CdkDragDrop<string>) {
-        moveItemInArray(this.#componentDefinitions(), event.previousIndex, event.currentIndex);
+        if (event.isPointerOverContainer) {
+            moveItemInArray(this.#componentDefinitions(), event.previousIndex, event.currentIndex);
 
-        const componentIds = this.#componentDefinitions().map(c => c.id);
-        const componentDefinitions = await firstValueFrom(
-            this._componentDefinitionsService.reorderComponentDefinitions(this.#dossierTemplateId, componentIds),
-        );
-        this.#componentDefinitions.set(componentDefinitions);
+            const componentIds = this.#componentDefinitions().map(c => c.id);
+            const componentDefinitions = await firstValueFrom(
+                this._componentDefinitionsService.reorderComponentDefinitions(this.#dossierTemplateId, componentIds),
+            );
+            this.#componentDefinitions.set(componentDefinitions);
+        }
     }
 
     async deleteComponent(componentId: string) {
@@ -119,8 +113,8 @@ export default class ComponentDefinitionsComponent extends BaseFormComponent imp
 
     #getForm() {
         return this._formBuilder.group({
-            displayName: [this.selectedComponent.displayName, Validators.required],
-            description: [this.selectedComponent.description],
+            displayName: [this.selectedComponent?.displayName, Validators.required],
+            description: [this.selectedComponent?.description],
         });
     }
 
diff --git a/apps/red-ui/src/assets/config/config.json b/apps/red-ui/src/assets/config/config.json
index 5f6c0ce6e..2ccc6f6d1 100644
--- a/apps/red-ui/src/assets/config/config.json
+++ b/apps/red-ui/src/assets/config/config.json
@@ -1,9 +1,9 @@
 {
   "ADMIN_CONTACT_NAME": null,
   "ADMIN_CONTACT_URL": null,
-  "API_URL": "https://dan2.iqser.cloud",
+  "API_URL": "https://frontend2.iqser.cloud",
   "APP_NAME": "RedactManager",
-  "IS_DOCUMINE": false,
+  "IS_DOCUMINE": true,
   "RULE_EDITOR_DEV_ONLY": false,
   "AUTO_READ_TIME": 3,
   "BACKEND_APP_VERSION": "4.4.40",
@@ -13,13 +13,13 @@
   "MAX_RETRIES_ON_SERVER_ERROR": 3,
   "OAUTH_CLIENT_ID": "redaction",
   "OAUTH_IDP_HINT": null,
-  "OAUTH_URL": "https://dan2.iqser.cloud/auth",
+  "OAUTH_URL": "https://frontend2.iqser.cloud/auth",
   "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/",
   "AVAILABLE_NOTIFICATIONS_DAYS": 30,
   "AVAILABLE_OLD_NOTIFICATIONS_MINUTES": 60,
   "NOTIFICATIONS_THRESHOLD": 1000,

From 6e115038b02dc2b4c7961e8d76799a630dce7bdd Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Mon, 12 Aug 2024 20:54:30 +0300
Subject: [PATCH 2/3] RED-9260 - Component Management UI

---
 .../component-definitions.component.html                  | 2 +-
 .../component-definitions.component.scss                  | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.html b/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.html
index c6ae97bdf..dbd2a0752 100644
--- a/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.html
@@ -27,7 +27,7 @@
                     </div>
                 </div>
 
-                <div (cdkDropListDropped)="drop($event)" cdkDropList>
+                <div (cdkDropListDropped)="drop($event)" cdkDropList class="list-content">
                     @for (component of componentDefinitions; track component) {
                         <div
                             class="list-item"
diff --git a/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.scss b/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.scss
index b54da356d..54a237251 100644
--- a/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.scss
@@ -44,6 +44,7 @@
 
 .content-container {
     background-color: var(--iqser-grey-6);
+    height: 100vh;
 
     .content-header {
         display: flex;
@@ -62,6 +63,7 @@
     .content {
         display: flex;
         gap: 20px;
+        overflow: hidden;
 
         .components-list {
             flex: 1;
@@ -72,6 +74,12 @@
                 height: 30px;
             }
 
+            .list-content {
+                overflow-y: auto;
+                height: calc(100vh - 30px);
+                outline: none;
+            }
+
             .list-item {
                 height: 80px;
                 transition: background 0.3s ease;

From f242c52a0cb49b7ef1d5de6140911ca242dfc223 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Mon, 12 Aug 2024 21:00:21 +0300
Subject: [PATCH 3/3] RED-9260 - update config

---
 apps/red-ui/src/assets/config/config.json | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/red-ui/src/assets/config/config.json b/apps/red-ui/src/assets/config/config.json
index 2ccc6f6d1..5f6c0ce6e 100644
--- a/apps/red-ui/src/assets/config/config.json
+++ b/apps/red-ui/src/assets/config/config.json
@@ -1,9 +1,9 @@
 {
   "ADMIN_CONTACT_NAME": null,
   "ADMIN_CONTACT_URL": null,
-  "API_URL": "https://frontend2.iqser.cloud",
+  "API_URL": "https://dan2.iqser.cloud",
   "APP_NAME": "RedactManager",
-  "IS_DOCUMINE": true,
+  "IS_DOCUMINE": false,
   "RULE_EDITOR_DEV_ONLY": false,
   "AUTO_READ_TIME": 3,
   "BACKEND_APP_VERSION": "4.4.40",
@@ -13,13 +13,13 @@
   "MAX_RETRIES_ON_SERVER_ERROR": 3,
   "OAUTH_CLIENT_ID": "redaction",
   "OAUTH_IDP_HINT": null,
-  "OAUTH_URL": "https://frontend2.iqser.cloud/auth",
+  "OAUTH_URL": "https://dan2.iqser.cloud/auth",
   "RECENT_PERIOD_IN_HOURS": 24,
   "SELECTION_MODE": "structural",
   "MANUAL_BASE_URL": "https://docs.redactmanager.com/preview",
   "ANNOTATIONS_THRESHOLD": 1000,
-  "THEME": "scm",
-  "BASE_TRANSLATIONS_DIRECTORY": "/assets/i18n/scm/",
+  "THEME": "redact",
+  "BASE_TRANSLATIONS_DIRECTORY": "/assets/i18n/redact/",
   "AVAILABLE_NOTIFICATIONS_DAYS": 30,
   "AVAILABLE_OLD_NOTIFICATIONS_MINUTES": 60,
   "NOTIFICATIONS_THRESHOLD": 1000,