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

Merge branch 'VM/RED-9260' into 'master'

Browse Source 
RED-9260 - Component Management UI

See merge request redactmanager/red-ui!540
This commit is contained in:
Nicoleta Panaghiu 2024-08-13 09:52:27 +02:00
commit 486ef92b07
3 changed files with 61 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.html
View File

@ -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 class="list-content">
@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">

21
apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.scss
View File

@ -32,6 +32,10 @@
align-items: center;
gap: 5px;
iqser-circle-button {
visibility: hidden;
}
.arrow-right {
transform: scale(0.7);
}
@ -40,6 +44,7 @@
.content-container {
background-color: var(--iqser-grey-6);
height: 100vh;
.content-header {
display: flex;
@ -58,7 +63,7 @@
.content {
display: flex;
gap: 20px;
height: 100%;
overflow: hidden;
.components-list {
flex: 1;
@ -69,8 +74,15 @@
height: 30px;
}
.list-content {
overflow-y: auto;
height: calc(100vh - 30px);
outline: none;
}
.list-item {
height: 80px;
transition: background 0.3s ease;
}
.header,
@ -95,6 +107,10 @@
}
}
}
.list-item:hover > .item-content > .right-content > iqser-circle-button {
visibility: visible;
}
}
section {
@ -112,6 +128,9 @@
}
.cdk-drag-preview {
.list-item {
transition: background 0.3s ease;
}
.item-content {
@extend %item-content-style;
}

28
apps/red-ui/src/app/modules/admin/screens/component-definitions/component-definitions.component.ts
View File

@ -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],
});
}