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 @@
-
+
{{ 'component-definitions.columns.position' | translate }}
@@ -27,32 +27,37 @@
- @for (component of componentDefinitions; track component) { -
-
-
- - {{ component.rank }} -
-
{{ component.displayName }}
-
- @if (permissionsService.canEditEntities()) { - - } - +
+ @for (component of componentDefinitions; track component) { +
+
+
+ + {{ component.rank }} +
+
{{ component.displayName }}
+
+ @if (permissionsService.canEditEntities()) { + + } + @if (selectedComponent?.id === component.id) { + + } +
-
- } + } +
@if (selectedComponent) {
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) { - 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,