RED-9260 - Component Management UI
This commit is contained in:
Valentin Mihai
parent
4f2d320553
commit
87e2e27e56
@ -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">
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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],
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user