From 4082ff52fb7ffe1d1280947d22b8d1f6908e8c93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9rard=20Collin?= Date: Sat, 27 Jun 2026 10:46:24 +0200 Subject: [PATCH 01/14] features: carousel workflow --- .../src/lib/abstract/abstract-dc-workflow.ts | 66 +++++++++++++++- .../src/lib/plugin/xt-plugin-info.ts | 1 - .../lib/registry/xt-plugin-registry.spec.ts | 1 - .../src/lib/carousel/carousel.component.css | 63 +++++++++++++++ .../src/lib/carousel/carousel.component.html | 38 +++++++++ .../lib/carousel/carousel.component.spec.ts | 79 +++++++++++++++++++ .../src/lib/carousel/carousel.component.ts | 26 ++++++ .../list-details.component.spec.ts | 1 - .../list-details/list-details.component.ts | 39 +-------- 9 files changed, 273 insertions(+), 41 deletions(-) create mode 100644 plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css create mode 100644 plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.html create mode 100644 plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.spec.ts create mode 100644 plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.ts diff --git a/libs/dc-workflow/projects/dc-workflow/src/lib/abstract/abstract-dc-workflow.ts b/libs/dc-workflow/projects/dc-workflow/src/lib/abstract/abstract-dc-workflow.ts index a26740e3..e31510aa 100644 --- a/libs/dc-workflow/projects/dc-workflow/src/lib/abstract/abstract-dc-workflow.ts +++ b/libs/dc-workflow/projects/dc-workflow/src/lib/abstract/abstract-dc-workflow.ts @@ -1,7 +1,7 @@ import { DcWorkflow } from '../definition/dc-workflow'; -import { Component, computed, effect, inject, input } from '@angular/core'; +import { Component, computed, effect, inject, input, linkedSignal, signal } from '@angular/core'; import { DcWorkflowModel, DcWorkflowSortOption } from '../models/dc-workflow-model'; -import { XtCompositeComponent, XtResolverService } from 'xt-components'; +import { XtCompositeComponent, XtMessageHandler, XtResolverService } from 'xt-components'; import { XtSignalStore, XtSortBy, @@ -10,6 +10,7 @@ import { XtStoreManagerService } from 'xt-store'; import { ManagedData } from 'xt-type'; +import { FormGroup } from '@angular/forms'; /** * A workflow base class based on the xt-store signalStore @@ -28,9 +29,37 @@ export class AbstractDcWorkflow extends XtCom protected readonly resolver = inject (XtResolverService); protected readonly storeMgr = inject(XtStoreManagerService); + protected readonly errorHandler = inject(XtMessageHandler); + + /** + * The store that manages the access to the data + * @protected + */ protected store : XtSignalStore | null | undefined = undefined; + /** + * True whenever the store is updating something + */ + updating = signal (false); + + /** + * A shortcut to the entityname being managed + */ + entityName = linkedSignal( () => { + return this.config().entity; + }); + + /** + * A simple signal telling when a new store is being used. For example, when the entity handled has changed + * @protected + */ + protected storeChanged=signal(false); + + /** + * Triggered when the workflow config has been updated. Do we need another store, or just reconfigure the sort / filtering ? + * @protected + */ protected configUpdated = effect( async ()=> { const config = this.config(); const curStore = this.store; @@ -68,6 +97,7 @@ export class AbstractDcWorkflow extends XtCom * @protected */ protected displayableElements = computed(() => { + const enforceStoreChange = this.storeChanged(); // Recalculate in case the store has changed const config = this.config(); const entities = this.safeFindStore().entities(); const selectConfig = config.display; @@ -87,7 +117,37 @@ export class AbstractDcWorkflow extends XtCom return true; }); }); - /** + + /** + * Safely loads the data from the store. + */ + protected fetchFromStore () { + //console.debug("ListDetails fetchFromStore"); + const entityName = this.entityName(); + if (entityName!=null) { + try { + this.updating.set(true); + // If the entity is different, then we must change the whole store + if (this.store?.entityName()!=entityName) { + this.store = this.safeFindStore(); + this.storeChanged.update((oldVal)=> !oldVal); // Force update whenever the store changed + } + // console.debug("Store set to "+this.store.entityName()); + this.store.fetchEntities().catch((error) => { + this.errorHandler.errorOccurred(error, "Error loading entities "+entityName); + }).finally(() => { + this.updating.set(false); +// console.debug("Store fetched values ",this.store?.entities()); + });//.then(() => {console.debug('Yes')}).finally(() => {console.debug('Finish')}); + } catch (error) { + this.updating.set(false); + } + } else { + this.store = null; + } + } + + /** * Returns the element that should be selected given the config and the store content * @protected */ diff --git a/libs/xt-components/projects/xt-components/src/lib/plugin/xt-plugin-info.ts b/libs/xt-components/projects/xt-components/src/lib/plugin/xt-plugin-info.ts index 412111cf..2606985c 100644 --- a/libs/xt-components/projects/xt-components/src/lib/plugin/xt-plugin-info.ts +++ b/libs/xt-components/projects/xt-components/src/lib/plugin/xt-plugin-info.ts @@ -1,6 +1,5 @@ import { XtTypeInfo } from 'xt-type'; import { XtOutputType } from '../xt-component'; -import { XtActionHandler } from '../action/xt-action-handler'; import { XtWorkflow } from '../workflow/xt-workflow'; /** Information about a registered component plugin */ diff --git a/libs/xt-components/projects/xt-components/src/lib/registry/xt-plugin-registry.spec.ts b/libs/xt-components/projects/xt-components/src/lib/registry/xt-plugin-registry.spec.ts index fd27e77d..5bee9489 100644 --- a/libs/xt-components/projects/xt-components/src/lib/registry/xt-plugin-registry.spec.ts +++ b/libs/xt-components/projects/xt-components/src/lib/registry/xt-plugin-registry.spec.ts @@ -4,7 +4,6 @@ import { beforeEach, describe, expect, it } from 'vitest'; import { xtPluginRegistry } from '../../globals'; import { XtActionHandler, XtActionResult } from '../action/xt-action-handler'; import { XtContext } from '../xt-context'; -import { IStoreProvider } from '../store/store-support'; describe('XtPluginRegistry', () => { diff --git a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css new file mode 100644 index 00000000..e119852b --- /dev/null +++ b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css @@ -0,0 +1,63 @@ +:host { + display: block; +} + +.carousel { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.carousel--empty { + padding-top: 0.5rem; +} + +:host-context(.app-dark) .carousel__panel, +:host-context(.app-dark) .carousel__state { + background: color-mix(in srgb, var(--p-surface-900) 94%, var(--p-primary-950) 6%); +} + +@media (max-width: 767px) { + + .carousel__state { + min-height: 14rem; + padding: 1.5rem; + } +} + +.carousel__panel { + border-radius: 1.5rem; + background: color-mix(in srgb, var(--p-surface-0) 92%, var(--p-primary-50) 8%); + box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 14px 40px rgb(0 0 0 / 0.06); +} + +.carousel__state { + min-height: 18rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 0.75rem; + text-align: center; + border-radius: 1.5rem; + padding: 2rem; + background: color-mix(in srgb, var(--p-surface-0) 94%, var(--p-primary-50) 6%); + color: var(--p-text-color); +} + +.carousel__state i { + font-size: 2rem; + opacity: 0.55; +} + +.carousel__state span { + font-weight: 600; +} + +.carousel__state small { + opacity: 0.7; +} + +.carousel__state--empty { + min-height: 16rem; +} diff --git a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.html b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.html new file mode 100644 index 00000000..b92967e8 --- /dev/null +++ b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.html @@ -0,0 +1,38 @@ +@let entName = entityName(); + +@if (entName != null) { + + @if (store?.loading()) { +
+ + Loading {{ entName }}… +
+ } @else if ((store?.entities()?.length ?? 0) === 0) { +
+ + No entity found. + Try creating a new item with the toolbar above. +
+ } @else { + + + +
+ + +
+ + + } + +} @else { +
+
+ + No entity to manage. +
+
+} diff --git a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.spec.ts b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.spec.ts new file mode 100644 index 00000000..197afacc --- /dev/null +++ b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.spec.ts @@ -0,0 +1,79 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CarouselComponent } from './carousel.component'; +import { beforeEach, describe, expect, it } from 'vitest'; +import { registerDefaultPlugin } from 'xt-plugin-default'; +import { StoreTestBed } from 'xt-store'; +import { XtResolverService, XtUnitTestHelper } from 'xt-components'; +import { DcWorkflowModel } from 'dc-workflow'; +import { By } from '@angular/platform-browser'; +import { Carousel } from 'primeng/carousel'; + +describe('Carousel Component', () => { + let component: CarouselComponent; + let fixture: ComponentFixture>; + let storeTestBed: StoreTestBed; + let resolver: XtResolverService; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [CarouselComponent], + }).compileComponents(); + + registerDefaultPlugin(TestBed.inject(XtResolverService)); + storeTestBed = new StoreTestBed(); + StoreTestBed.ensureMemoryProviderOnly(); + + }); + + it('should create', async () => { + fixture = TestBed.createComponent(CarouselComponent); + fixture.componentRef.setInput('config',{}); + component = fixture.componentInstance; + await fixture.whenStable(); + expect(component).toBeTruthy(); + }); + + it ('should display carousel', async () => { + + await storeTestBed.defineTestDataFor('CarouselTest', [{ + name: 'Test Book', + published: new Date(1970,10, 5) + }, { + name: 'Another Book', + published: new Date(2010,7, 15) + } + ]); + + fixture = TestBed.createComponent(CarouselComponent); + fixture.componentRef.setInput ('config', { + entity: 'CarouselTest', + workflow: 'carousel', + data: { + sort: { + 'published':'descending' + } + }, + selection: { + field: { + key: 'published', + type: 'closest-before' + } + } + } as DcWorkflowModel); + + component = fixture.componentInstance; + fixture.detectChanges(); + await fixture.whenStable(); + + await XtUnitTestHelper.waitFor(() => { + const carouselComponent = fixture.debugElement.query(By.directive(Carousel)); + return carouselComponent != null; + }); + + let carouselComponent = fixture.debugElement.query(By.directive(Carousel)); + expect(carouselComponent).toBeTruthy(); + + expect(carouselComponent.nativeElement.textContent?.indexOf('Another Book')).not.toBe(-1); + }); +}); diff --git a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.ts b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.ts new file mode 100644 index 00000000..4f58a64e --- /dev/null +++ b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.ts @@ -0,0 +1,26 @@ +import { Component, inject, linkedSignal, OnInit } from '@angular/core'; +import { AbstractDcWorkflow } from 'dc-workflow'; +import { XtMessageHandler, XtRenderComponent } from 'xt-components'; +import { ManagedData } from 'xt-type'; +import { Carousel } from 'primeng/carousel'; +import { ProgressSpinner } from 'primeng/progressspinner'; + +/** + * A workflow displaying the list through a carousel. It automatically selects the first element to display + */ +@Component({ + selector: 'wfw-carousel', + imports: [ + Carousel, + ProgressSpinner, XtRenderComponent + ], + templateUrl: './carousel.component.html', + styleUrl: './carousel.component.css', +}) +export class CarouselComponent extends AbstractDcWorkflow implements OnInit { + + override ngOnInit() { + super.ngOnInit(); + this.fetchFromStore(); + } +} diff --git a/plugins/xt-workflow/projects/workflow/src/lib/list-details/list-details.component.spec.ts b/plugins/xt-workflow/projects/workflow/src/lib/list-details/list-details.component.spec.ts index 6ea726b9..8fabc0fa 100644 --- a/plugins/xt-workflow/projects/workflow/src/lib/list-details/list-details.component.spec.ts +++ b/plugins/xt-workflow/projects/workflow/src/lib/list-details/list-details.component.spec.ts @@ -10,7 +10,6 @@ import { By } from '@angular/platform-browser'; import { provideNoopAnimations } from '@angular/platform-browser/animations'; import { MessageService } from 'primeng/api'; import { DcWorkflowModel } from 'dc-workflow'; -import { RouterTestingHarness } from '@angular/router/testing'; import { FormGroup } from '@angular/forms'; import { Table } from 'primeng/table'; diff --git a/plugins/xt-workflow/projects/workflow/src/lib/list-details/list-details.component.ts b/plugins/xt-workflow/projects/workflow/src/lib/list-details/list-details.component.ts index df00ef21..afde5d42 100644 --- a/plugins/xt-workflow/projects/workflow/src/lib/list-details/list-details.component.ts +++ b/plugins/xt-workflow/projects/workflow/src/lib/list-details/list-details.component.ts @@ -30,11 +30,6 @@ import { AbstractDcWorkflow } from 'dc-workflow'; }) export class ListDetailsComponent extends AbstractDcWorkflow implements OnInit, OnDestroy { protected readonly formBuilder = inject(FormBuilder); - protected readonly errorHandler = inject(XtMessageHandler); - - entityName = linkedSignal( () => { - return this.config().entity; - }); editForm = signal(this.formBuilder.group ({ editor: this.formBuilder.group({}) })); @@ -64,12 +59,12 @@ export class ListDetailsComponent extends AbstractDcWorkf formValue = signal(null); - protected storeChanged=signal(false); - + /** + * Display in the list the selected item being edited if any + */ displayedEntities = computed(() => { // console.debug("ListDetails init Displayed Entities"); - const storeChanged=this.storeChanged(); // Enforce recalculation whenever the store is changed - const entities = this.store?.entities() ?? []; + const entities = this.displayableElements(); const value = this.formValue(); const selected = this.selectedEntity(); if (value != null && selected != null && (selected as any)._id != null) { @@ -89,7 +84,6 @@ export class ListDetailsComponent extends AbstractDcWorkf saving = signal (false); newing = signal (false); deleting = signal (false); - updating = signal (false); selectedEntity= model(); @@ -119,31 +113,6 @@ export class ListDetailsComponent extends AbstractDcWorkf this.fetchFromStore(); } - fetchFromStore () { - //console.debug("ListDetails fetchFromStore"); - const entityName = this.entityName(); - if (entityName!=null) { - try { - this.updating.set(true); - // If the entity is different, then we must change the whole store - if (this.store?.entityName()!=entityName) { - this.store = this.safeFindStore(); - this.storeChanged.update((oldVal)=> !oldVal); // Force update whenever the store changed - } - // console.debug("Store set to "+this.store.entityName()); - this.store.fetchEntities().catch((error) => { - this.errorHandler.errorOccurred(error, "Error loading entities "+entityName); - }).finally(() => { - this.updating.set(false); -// console.debug("Store fetched values ",this.store?.entities()); - });//.then(() => {console.debug('Yes')}).finally(() => {console.debug('Finish')}); - } catch (error) { - this.updating.set(false); - } - } else { - this.store = null; - } - } updateEditForm () { const entity = this.selectedEntity(); From f88db6781ee39115ed349cf9e2d6d86c4ef8e10b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9rard=20Collin?= Date: Sun, 28 Jun 2026 09:13:54 +0200 Subject: [PATCH 02/14] features: carousel workflow --- .../test-workflow/test-workflow.component.html | 8 +++++++- .../app/test-workflow/test-workflow.component.ts | 15 +++++++++++++-- .../src/lib/carousel/carousel.component.html | 2 +- .../projects/workflow/src/lib/register.ts | 7 ++++++- 4 files changed, 27 insertions(+), 5 deletions(-) diff --git a/plugins/xt-workflow/projects/workflow-plugin/src/app/test-workflow/test-workflow.component.html b/plugins/xt-workflow/projects/workflow-plugin/src/app/test-workflow/test-workflow.component.html index 9127ae8b..bdd0847b 100644 --- a/plugins/xt-workflow/projects/workflow-plugin/src/app/test-workflow/test-workflow.component.html +++ b/plugins/xt-workflow/projects/workflow-plugin/src/app/test-workflow/test-workflow.component.html @@ -1,4 +1,9 @@ -Testing the default List Details workflow +Testing the workflows + +
+ Select the workflow type: + +
Select the default sort: @@ -7,6 +12,7 @@
+ @if (dataLoaded()) { } diff --git a/plugins/xt-workflow/projects/workflow-plugin/src/app/test-workflow/test-workflow.component.ts b/plugins/xt-workflow/projects/workflow-plugin/src/app/test-workflow/test-workflow.component.ts index a6103ad6..690609e9 100644 --- a/plugins/xt-workflow/projects/workflow-plugin/src/app/test-workflow/test-workflow.component.ts +++ b/plugins/xt-workflow/projects/workflow-plugin/src/app/test-workflow/test-workflow.component.ts @@ -6,6 +6,7 @@ import { ListDetailsComponent } from '../../../../workflow/src/lib/list-details/ import { Button } from 'primeng/button'; import { DcWorkflowModel, WfwRender } from 'dc-workflow'; import { StoreTestBed } from 'xt-store'; +import { Select, SelectChangeEvent } from 'primeng/select'; @Component({ selector: 'app-test', @@ -13,7 +14,8 @@ import { StoreTestBed } from 'xt-store'; FormsModule, ReactiveFormsModule, Button, - WfwRender + WfwRender, + Select ], templateUrl: './test-workflow.component.html', styleUrl: './test-workflow.component.css' @@ -58,7 +60,7 @@ export class TestWorkflowComponent implements OnInit, OnDestroy { protected workflowConfig = computed(() => ({ entity:'test', - workflow:'list-detail', + workflow:this.workflowType() as 'list-detail'|'carousel', data: { sort: { [this.sortField()]: this.sortDir() @@ -66,6 +68,8 @@ export class TestWorkflowComponent implements OnInit, OnDestroy { } })); + protected workflowType = signal('list-detail'); + protected toggleSort(field: string) { if (this.sortField() === field) { this.sortDir.update(d => d === 'ascending' ? 'descending' : 'ascending'); @@ -79,4 +83,11 @@ export class TestWorkflowComponent implements OnInit, OnDestroy { this.subscriptions.unsubscribe(); } + protected setWorkflowType(value: string) { + this.workflowType.set(value); + } + + protected listWorkflowTypes():string[] { + return ['list-detail','carousel'] + } } diff --git a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.html b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.html index b92967e8..db6de6d9 100644 --- a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.html +++ b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.html @@ -15,7 +15,7 @@ } @else { - +
Date: Sat, 4 Jul 2026 10:54:01 +0200 Subject: [PATCH 03/14] fix: ygly carousel but working --- .../test-workflow/test-workflow.component.ts | 4 +++ .../projects/workflow/package.json | 8 +++--- .../src/lib/carousel/carousel.component.css | 2 -- .../src/lib/carousel/carousel.component.html | 2 +- .../src/lib/carousel/carousel.component.ts | 25 ++++++++++++++++++- 5 files changed, 33 insertions(+), 8 deletions(-) diff --git a/plugins/xt-workflow/projects/workflow-plugin/src/app/test-workflow/test-workflow.component.ts b/plugins/xt-workflow/projects/workflow-plugin/src/app/test-workflow/test-workflow.component.ts index 690609e9..a6715137 100644 --- a/plugins/xt-workflow/projects/workflow-plugin/src/app/test-workflow/test-workflow.component.ts +++ b/plugins/xt-workflow/projects/workflow-plugin/src/app/test-workflow/test-workflow.component.ts @@ -50,6 +50,10 @@ export class TestWorkflowComponent implements OnInit, OnDestroy { name:'ATest2', creationDate:new Date(2014,6,23), value: 22 + },{ + name:'Other Test', + creationDate:new Date(2026,4,19), + value: 34 }]).then(() => { this.dataLoaded.set(true); }); diff --git a/plugins/xt-workflow/projects/workflow/package.json b/plugins/xt-workflow/projects/workflow/package.json index e5fe6554..d4bd8b5b 100644 --- a/plugins/xt-workflow/projects/workflow/package.json +++ b/plugins/xt-workflow/projects/workflow/package.json @@ -5,10 +5,10 @@ "url": "https://github.com/dont-code/ng-xtend.git" }, "peerDependencies": { - "@angular/common": "^20.0.0", - "@angular/core": "^20.0.0", - "xt-components": ">= 0.6.4", - "xt-store": ">= 0.6.4" + "@angular/common": "^21.0.0", + "@angular/core": "^21.0.0", + "xt-components": ">= 0.7.0", + "xt-store": ">= 0.7.0" }, "dependencies": { "tslib": "^2.3.0" diff --git a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css index e119852b..31fab3f0 100644 --- a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css +++ b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css @@ -3,8 +3,6 @@ } .carousel { - display: flex; - flex-direction: column; gap: 1rem; } diff --git a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.html b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.html index db6de6d9..5e5f54dc 100644 --- a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.html +++ b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.html @@ -15,7 +15,7 @@
} @else { - +
extends AbstractDcWorkflow implements OnInit { + protected bkObserver = inject(BreakpointObserver); + + isPortrait=toSignal(this.bkObserver.observe(Breakpoints.HandsetPortrait).pipe(map (result => { + return result.matches; + }))); + + numVisible = computed(() => { + if (this.isPortrait()) return 1; + else return 3; + }); + + carouselOrientation = computed<'horizontal'|'vertical'>(() => { + if (this.isPortrait()) return 'vertical'; + else return 'horizontal'; + }); + + constructor() { + super(); + } + override ngOnInit() { super.ngOnInit(); this.fetchFromStore(); From 8aa7037944bf56da1fca7f3a1563b0d36feb9b97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9rard=20Collin?= Date: Sat, 4 Jul 2026 11:17:22 +0200 Subject: [PATCH 04/14] fix: ygly carousel but working --- .../test-workflow/test-workflow.component.ts | 12 +++++ .../src/lib/carousel/carousel.component.css | 47 ++++++++++++++++++- 2 files changed, 57 insertions(+), 2 deletions(-) diff --git a/plugins/xt-workflow/projects/workflow-plugin/src/app/test-workflow/test-workflow.component.ts b/plugins/xt-workflow/projects/workflow-plugin/src/app/test-workflow/test-workflow.component.ts index a6715137..bf8043ba 100644 --- a/plugins/xt-workflow/projects/workflow-plugin/src/app/test-workflow/test-workflow.component.ts +++ b/plugins/xt-workflow/projects/workflow-plugin/src/app/test-workflow/test-workflow.component.ts @@ -54,6 +54,18 @@ export class TestWorkflowComponent implements OnInit, OnDestroy { name:'Other Test', creationDate:new Date(2026,4,19), value: 34 + },{ + name:'Random Test', + creationDate:new Date(2025,10,9), + value: 4 + },{ + name:'New value Test', + creationDate:new Date(2016,8,1), + value: 64 + },{ + name:'Value Test', + creationDate:new Date(2028,11,23), + value: 34 }]).then(() => { this.dataLoaded.set(true); }); diff --git a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css index 31fab3f0..28676524 100644 --- a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css +++ b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css @@ -2,8 +2,8 @@ display: block; } -.carousel { - gap: 1rem; +:host ::ng-deep .p-carousel-viewport { + padding: 2rem 0.5rem; } .carousel--empty { @@ -15,6 +15,20 @@ background: color-mix(in srgb, var(--p-surface-900) 94%, var(--p-primary-950) 6%); } +:host-context(.app-dark) ::ng-deep .p-carousel-item-start .carousel__panel, +:host-context(.app-dark) ::ng-deep .p-carousel-item-end .carousel__panel { + background: color-mix(in srgb, var(--p-surface-900) 96%, var(--p-primary-950) 4%); +} + +:host-context(.app-dark) ::ng-deep .p-carousel-item-active:not(.p-carousel-item-start):not(.p-carousel-item-end) .carousel__panel { + border-color: var(--p-primary-500); + background: color-mix(in srgb, var(--p-surface-900) 90%, var(--p-primary-950) 10%); + box-shadow: + 0 4px 6px rgb(0 0 0 / 0.25), + 0 20px 60px rgb(0 0 0 / 0.35), + 0 0 32px color-mix(in srgb, var(--p-primary-500) 25%, transparent 75%); +} + @media (max-width: 767px) { .carousel__state { @@ -27,6 +41,35 @@ border-radius: 1.5rem; background: color-mix(in srgb, var(--p-surface-0) 92%, var(--p-primary-50) 8%); box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 14px 40px rgb(0 0 0 / 0.06); + border: 1px solid color-mix(in srgb, var(--p-surface-300) 50%, transparent 50%); + transition: + transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), + box-shadow 0.35s ease, + border-color 0.35s ease, + opacity 0.35s ease, + filter 0.35s ease; + margin: 0 0.5rem; + position: relative; +} + +:host ::ng-deep .p-carousel-item-start .carousel__panel, +:host ::ng-deep .p-carousel-item-end .carousel__panel { + margin: 0 1rem 0 1rem; + opacity: 0.65; + filter: grayscale(0.35); + transform: scale(0.92); +} + +:host ::ng-deep .p-carousel-item-active:not(.p-carousel-item-start):not(.p-carousel-item-end) .carousel__panel { + transform: scale(1.12); + border-color: var(--p-primary-400); + border-width: 2px; + box-shadow: + 0 4px 12px rgb(0 0 0 / 0.08), + 0 24px 64px rgb(0 0 0 / 0.12), + 0 0 32px color-mix(in srgb, var(--p-primary-400) 20%, transparent 80%); + background: color-mix(in srgb, var(--p-surface-0) 80%, var(--p-primary-50) 20%); + z-index: 2; } .carousel__state { From 4dff37cca1015161644019b6f6e1d3d9df85c1a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9rard=20Collin?= Date: Sat, 4 Jul 2026 11:18:12 +0200 Subject: [PATCH 05/14] fix: ygly carousel but working --- .../projects/workflow/src/lib/carousel/carousel.component.css | 1 + 1 file changed, 1 insertion(+) diff --git a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css index 28676524..e02a8948 100644 --- a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css +++ b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css @@ -49,6 +49,7 @@ opacity 0.35s ease, filter 0.35s ease; margin: 0 0.5rem; + padding: 1.75rem; position: relative; } From 5b3e50a57012146fb47fb9d01399e6552aa3d2aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9rard=20Collin?= Date: Sat, 4 Jul 2026 12:03:09 +0200 Subject: [PATCH 06/14] fix: nice carousel now --- .../src/lib/carousel/carousel.component.css | 19 ++++++++++++------- .../src/lib/carousel/carousel.component.html | 4 ++-- .../src/lib/carousel/carousel.component.ts | 19 ++++++++++++++++++- 3 files changed, 32 insertions(+), 10 deletions(-) diff --git a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css index e02a8948..de5d2fc2 100644 --- a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css +++ b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css @@ -15,12 +15,13 @@ background: color-mix(in srgb, var(--p-surface-900) 94%, var(--p-primary-950) 6%); } -:host-context(.app-dark) ::ng-deep .p-carousel-item-start .carousel__panel, -:host-context(.app-dark) ::ng-deep .p-carousel-item-end .carousel__panel { +:host-context(.app-dark) ::ng-deep .p-carousel-item-start:not(.p-carousel-item-end) .carousel__panel, +:host-context(.app-dark) ::ng-deep .p-carousel-item-end:not(.p-carousel-item-start) .carousel__panel { background: color-mix(in srgb, var(--p-surface-900) 96%, var(--p-primary-950) 4%); } -:host-context(.app-dark) ::ng-deep .p-carousel-item-active:not(.p-carousel-item-start):not(.p-carousel-item-end) .carousel__panel { +:host-context(.app-dark) ::ng-deep .p-carousel-item-active:not(.p-carousel-item-start):not(.p-carousel-item-end) .carousel__panel, +:host-context(.app-dark) ::ng-deep .p-carousel-item-active.p-carousel-item-start.p-carousel-item-end .carousel__panel { border-color: var(--p-primary-500); background: color-mix(in srgb, var(--p-surface-900) 90%, var(--p-primary-950) 10%); box-shadow: @@ -53,16 +54,16 @@ position: relative; } -:host ::ng-deep .p-carousel-item-start .carousel__panel, -:host ::ng-deep .p-carousel-item-end .carousel__panel { +:host ::ng-deep .p-carousel-item-start:not(.p-carousel-item-end) .carousel__panel, +:host ::ng-deep .p-carousel-item-end:not(.p-carousel-item-start) .carousel__panel { margin: 0 1rem 0 1rem; opacity: 0.65; filter: grayscale(0.35); transform: scale(0.92); } -:host ::ng-deep .p-carousel-item-active:not(.p-carousel-item-start):not(.p-carousel-item-end) .carousel__panel { - transform: scale(1.12); +:host ::ng-deep .p-carousel-item-active:not(.p-carousel-item-start):not(.p-carousel-item-end) .carousel__panel, +:host ::ng-deep .p-carousel-item-active.p-carousel-item-start.p-carousel-item-end .carousel__panel { border-color: var(--p-primary-400); border-width: 2px; box-shadow: @@ -73,6 +74,10 @@ z-index: 2; } +:host ::ng-deep .p-carousel-item-active:not(.p-carousel-item-start):not(.p-carousel-item-end) .carousel__panel { + transform: scale(1.12); +} + .carousel__state { min-height: 18rem; display: flex; diff --git a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.html b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.html index 5e5f54dc..d5d65b98 100644 --- a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.html +++ b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.html @@ -15,9 +15,9 @@
} @else { - + -
+
extends AbstractDcWorkflo else return 'horizontal'; }); + selectedElement = signal(null); + + @ViewChild('carouselRef') carousel?: Carousel; + constructor() { super(); } @@ -46,4 +50,17 @@ export class CarouselComponent extends AbstractDcWorkflo super.ngOnInit(); this.fetchFromStore(); } + + selectElement(element: T): void { + this.selectedElement.set(element); + const items = this.displayableElements(); + const index = items.indexOf(element); + if (index === -1) return; + const total = items.length; + const offset = Math.floor((this.numVisible() - 1) / 2); + const targetPage = Math.max(0, Math.min(index - offset, total - this.numVisible())); + if (this.carousel) { + this.carousel.page = targetPage; + } + } } From babf7816f652a116a3d534fb38ae5ee664f49753 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9rard=20Collin?= Date: Sat, 4 Jul 2026 12:42:16 +0200 Subject: [PATCH 07/14] fix: nice carousel now --- .../src/lib/carousel/carousel.component.css | 33 +++++++ .../src/lib/carousel/carousel.component.html | 32 +++++-- .../src/lib/carousel/carousel.component.ts | 93 ++++++++++++++++++- 3 files changed, 148 insertions(+), 10 deletions(-) diff --git a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css index de5d2fc2..378f19e4 100644 --- a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css +++ b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css @@ -108,3 +108,36 @@ .carousel__state--empty { min-height: 16rem; } + +.carousel__edit-btn { + position: absolute; + top: 0.5rem; + right: 0.5rem; + width: 2rem; + height: 2rem; + border-radius: 50%; + border: none; + background: var(--p-primary-400); + color: #fff; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + opacity: 0.5; + transition: opacity 0.2s ease; +} + +.carousel__edit-btn:hover { + opacity: 1; +} + +.carousel__edit-btn i { + font-size: 0.85rem; +} + +.carousel__actions { + display: flex; + gap: 0.5rem; + margin-top: 1rem; + justify-content: flex-end; +} diff --git a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.html b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.html index d5d65b98..0c6b64c1 100644 --- a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.html +++ b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.html @@ -15,14 +15,34 @@
} @else { - + + @let isEditing = editingEntity() === elt; + @let isSelected = selectedElement() === elt;
- - + @if (isEditing) { + + +
+ + +
+ } @else { + + + @if (isSelected) { + + } + }
diff --git a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.ts b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.ts index a1b6a9a7..ae7c3ab7 100644 --- a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.ts +++ b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.ts @@ -1,9 +1,12 @@ -import { Component, computed, inject, linkedSignal, OnInit, signal, ViewChild } from '@angular/core'; +import { Component, computed, effect, inject, linkedSignal, OnDestroy, OnInit, signal, ViewChild } from '@angular/core'; import { AbstractDcWorkflow } from 'dc-workflow'; -import { XtMessageHandler, XtRenderComponent } from 'xt-components'; +import { XtMessageHandler, XtRenderComponent, updateFormGroupWithValue } from 'xt-components'; import { ManagedData } from 'xt-type'; import { Carousel } from 'primeng/carousel'; import { ProgressSpinner } from 'primeng/progressspinner'; +import { Button } from 'primeng/button'; +import { FormBuilder, FormGroup, ReactiveFormsModule, PristineChangeEvent } from '@angular/forms'; +import { Subscription } from 'rxjs'; import { BreakpointObserver, Breakpoints, LayoutModule } from '@angular/cdk/layout'; import { toSignal } from '@angular/core/rxjs-interop'; import { map } from 'rxjs'; @@ -15,14 +18,16 @@ import { map } from 'rxjs'; selector: 'wfw-carousel', imports: [ Carousel, - ProgressSpinner, XtRenderComponent + ProgressSpinner, XtRenderComponent, + ReactiveFormsModule, Button ], templateUrl: './carousel.component.html', styleUrl: './carousel.component.css', }) -export class CarouselComponent extends AbstractDcWorkflow implements OnInit { +export class CarouselComponent extends AbstractDcWorkflow implements OnInit, OnDestroy { protected bkObserver = inject(BreakpointObserver); + protected formBuilder = inject(FormBuilder); isPortrait=toSignal(this.bkObserver.observe(Breakpoints.HandsetPortrait).pipe(map (result => { return result.matches; @@ -39,11 +44,24 @@ export class CarouselComponent extends AbstractDcWorkflo }); selectedElement = signal(null); + protected editingEntity = signal(null); + protected editForm = signal(this.formBuilder.group({})); + protected canSave = signal(false); + protected saving = signal(false); + private subscriptions = new Subscription(); @ViewChild('carouselRef') carousel?: Carousel; constructor() { super(); + effect(() => { + const items = this.displayableElements(); + if (items.length > 0 && this.selectedElement() == null) { + const numVis = this.numVisible(); + const center = Math.floor((numVis - 1) / 2); + this.selectedElement.set(items[Math.min(center, items.length - 1)]); + } + }); } override ngOnInit() { @@ -63,4 +81,71 @@ export class CarouselComponent extends AbstractDcWorkflo this.carousel.page = targetPage; } } + + onCarouselPage(event: any): void { + const page = event.page ?? 0; + const items = this.displayableElements(); + if (items.length === 0) return; + const numVis = this.numVisible(); + const centerIndex = page + Math.floor((numVis - 1) / 2); + const index = Math.min(centerIndex, items.length - 1); + this.selectedElement.set(items[index]); + } + + ngOnDestroy(): void { + this.subscriptions.unsubscribe(); + } + + editEntity(element: T): void { + if (this.saving()) return; + this.selectElement(element); + this.editingEntity.set(element); + this.updateEditForm(); + } + + cancelEdit(): void { + this.editingEntity.set(null); + this.canSave.set(false); + this.saving.set(false); + this.subscriptions.unsubscribe(); + this.subscriptions = new Subscription(); + } + + async saveEdit(): Promise { + const toSave = this.editForm().value?.editor as T; + if (toSave == null) { + throw new Error("Trying to save an entity that is not bound to form"); + } + try { + this.saving.set(true); + const savedValue = await this.safeFindStore().storeEntity(toSave); + this.cancelEdit(); + this.selectElement(savedValue); + await this.fetchFromStore(); + } catch (error) { + this.errorHandler.errorOccurred(error, "Error saving entity with id " + (toSave as any)._id); + this.saving.set(false); + } + } + + private updateEditForm(): void { + const entity = this.editingEntity(); + const form = this.formBuilder.group({}, {updateOn: 'change'}); + if (entity != null) { + updateFormGroupWithValue(form, entity, this.entityName(), this.resolver.typeResolver); + } + this.listenToFormEvent(form); + this.editForm.set(this.formBuilder.group({ editor: form })); + } + + private listenToFormEvent(form: FormGroup): void { + this.subscriptions.unsubscribe(); + this.subscriptions = new Subscription(); + this.subscriptions.add(form.events.subscribe(event => { + const pristine = (event as PristineChangeEvent).pristine ?? true; + if (!pristine) { + this.canSave.set(true); + } + })); + } } From 88733f387441b6ed5be4003876a8162fa1d6d109 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9rard=20Collin?= Date: Sat, 4 Jul 2026 14:29:05 +0200 Subject: [PATCH 08/14] fix: nice carousel now --- .../src/lib/carousel/carousel.component.css | 27 +++++++------------ .../src/lib/carousel/carousel.component.html | 3 ++- 2 files changed, 11 insertions(+), 19 deletions(-) diff --git a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css index 378f19e4..9b64d90e 100644 --- a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css +++ b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css @@ -15,13 +15,7 @@ background: color-mix(in srgb, var(--p-surface-900) 94%, var(--p-primary-950) 6%); } -:host-context(.app-dark) ::ng-deep .p-carousel-item-start:not(.p-carousel-item-end) .carousel__panel, -:host-context(.app-dark) ::ng-deep .p-carousel-item-end:not(.p-carousel-item-start) .carousel__panel { - background: color-mix(in srgb, var(--p-surface-900) 96%, var(--p-primary-950) 4%); -} - -:host-context(.app-dark) ::ng-deep .p-carousel-item-active:not(.p-carousel-item-start):not(.p-carousel-item-end) .carousel__panel, -:host-context(.app-dark) ::ng-deep .p-carousel-item-active.p-carousel-item-start.p-carousel-item-end .carousel__panel { +:host-context(.app-dark) .carousel__panel--selected { border-color: var(--p-primary-500); background: color-mix(in srgb, var(--p-surface-900) 90%, var(--p-primary-950) 10%); box-shadow: @@ -54,16 +48,7 @@ position: relative; } -:host ::ng-deep .p-carousel-item-start:not(.p-carousel-item-end) .carousel__panel, -:host ::ng-deep .p-carousel-item-end:not(.p-carousel-item-start) .carousel__panel { - margin: 0 1rem 0 1rem; - opacity: 0.65; - filter: grayscale(0.35); - transform: scale(0.92); -} - -:host ::ng-deep .p-carousel-item-active:not(.p-carousel-item-start):not(.p-carousel-item-end) .carousel__panel, -:host ::ng-deep .p-carousel-item-active.p-carousel-item-start.p-carousel-item-end .carousel__panel { +.carousel__panel--selected { border-color: var(--p-primary-400); border-width: 2px; box-shadow: @@ -74,10 +59,16 @@ z-index: 2; } -:host ::ng-deep .p-carousel-item-active:not(.p-carousel-item-start):not(.p-carousel-item-end) .carousel__panel { +.carousel__panel--selected-scale { transform: scale(1.12); } +.carousel__panel--editing { + height: 100%; + box-sizing: border-box; + overflow-y: auto; +} + .carousel__state { min-height: 18rem; display: flex; diff --git a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.html b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.html index 0c6b64c1..ff04cc7b 100644 --- a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.html +++ b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.html @@ -19,7 +19,8 @@ @let isEditing = editingEntity() === elt; @let isSelected = selectedElement() === elt; -
+ @let isHorizontal = carouselOrientation() === 'horizontal'; +
@if (isEditing) { Date: Sun, 5 Jul 2026 11:00:33 +0200 Subject: [PATCH 09/14] fix: carousel as a list component --- .../default-plugin/src/app/app.config.ts | 51 +++- .../test-object-set.component.html | 4 + .../test-object-set.component.ts | 19 +- .../projects/default-plugin/src/main.ts | 6 + .../carousel-object-set.component.css | 21 ++ .../carousel-object-set.component.html | 9 + .../carousel-object-set.component.spec.ts | 264 ++++++++++++++++++ .../carousel-object-set.component.ts | 80 ++++++ .../projects/default/src/public-api.ts | 1 + .../src/lib/carousel/carousel.component.css | 8 +- .../lib/carousel/carousel.component.spec.ts | 231 +++++++++++++++ 11 files changed, 688 insertions(+), 6 deletions(-) create mode 100644 plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.css create mode 100644 plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.html create mode 100644 plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.spec.ts create mode 100644 plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.ts diff --git a/plugins/xt-default/projects/default-plugin/src/app/app.config.ts b/plugins/xt-default/projects/default-plugin/src/app/app.config.ts index 63cfd798..af933ea0 100644 --- a/plugins/xt-default/projects/default-plugin/src/app/app.config.ts +++ b/plugins/xt-default/projects/default-plugin/src/app/app.config.ts @@ -4,15 +4,64 @@ import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; import { providePrimeNG } from 'primeng/config'; +import { definePreset } from '@primeuix/themes'; import Aura from '@primeuix/themes/aura'; +const AppPreset = definePreset(Aura, { + semantic: { + colorScheme: { + light: { + surface: { + 0: '#ffffff', + 50: '#f8f8fc', + 100: '#efeff8', + 200: '#dedff0', + 300: '#c4c7df', + 400: '#9aa0bf', + 500: '#747b9a', + 600: '#5a607a', + 700: '#42475b', + 800: '#2a2f3c', + 900: '#171a22', + 950: '#0b0d12' + }, + content: { + background: '{surface.50}' + } + }, + dark: { + surface: { + 950: '#101118', + 900: '#171923', + 800: '#222737', + 700: '#333a52', + 600: '#48506c', + 500: '#66708c', + 400: '#97a0b8', + 300: '#c4cadb', + 200: '#e2e6f0', + 100: '#f3f5fa', + 50: '#fafbfe', + 0: '#ffffff' + }, + content: { + background: '{surface.950}' + } + } + } + } +}); + export const appConfig: ApplicationConfig = { providers: [provideZonelessChangeDetection(), provideBrowserGlobalErrorListeners(), provideAnimationsAsync(), providePrimeNG({ theme: { - preset: Aura + preset: AppPreset, + options: { + darkModeSelector: '.app-dark' + } } }), provideRouter(routes)] diff --git a/plugins/xt-default/projects/default-plugin/src/app/test-object-set/test-object-set.component.html b/plugins/xt-default/projects/default-plugin/src/app/test-object-set/test-object-set.component.html index 6d9466b9..511cac7b 100644 --- a/plugins/xt-default/projects/default-plugin/src/app/test-object-set/test-object-set.component.html +++ b/plugins/xt-default/projects/default-plugin/src/app/test-object-set/test-object-set.component.html @@ -6,6 +6,10 @@
+ +
+ +
diff --git a/plugins/xt-default/projects/default-plugin/src/app/test-object-set/test-object-set.component.ts b/plugins/xt-default/projects/default-plugin/src/app/test-object-set/test-object-set.component.ts index 24f6adbb..481fe762 100644 --- a/plugins/xt-default/projects/default-plugin/src/app/test-object-set/test-object-set.component.ts +++ b/plugins/xt-default/projects/default-plugin/src/app/test-object-set/test-object-set.component.ts @@ -5,6 +5,7 @@ import { XtComponentOutput, XtRenderComponent } from 'xt-components'; import { FormsModule } from '@angular/forms'; import { Panel } from 'primeng/panel'; import { DefaultObjectSetComponent } from '../../../../default/src/lib/object-set/default-object-set.component'; +import { CarouselObjectSetComponent } from '../../../../default/src/lib/object-set/carousel-object-set.component'; import { AppComponent } from '../app.component'; @Component({ @@ -21,7 +22,13 @@ import { AppComponent } from '../app.component'; changeDetection: ChangeDetectionStrategy.OnPush }) export class TestObjectSetComponent { - selectedObject= signal('simple'); + selectedObject = signal('simple'); + + selectedComponent = signal('Default'); + + componentOptions() { + return ['Default', 'Carousel']; + } value = signal(this.loadObject('simple') ); @@ -34,6 +41,10 @@ export class TestObjectSetComponent { this.value.set(this.loadObject ($event.value)); } + componentSwitch($event: AutoCompleteSelectEvent) { + this.selectedComponent.set($event.value); + } + loadObject (objName:string) :any { if (objName=='long') { const ret = []; @@ -119,9 +130,9 @@ export class TestObjectSetComponent { }[objName]; } - objectComponentType() { - return DefaultObjectSetComponent; - } + objectComponentType = computed(() => + this.selectedComponent() === 'Carousel' ? CarouselObjectSetComponent : DefaultObjectSetComponent + ); selectedValue = signal(null); diff --git a/plugins/xt-default/projects/default-plugin/src/main.ts b/plugins/xt-default/projects/default-plugin/src/main.ts index 35b00f34..79dc5682 100644 --- a/plugins/xt-default/projects/default-plugin/src/main.ts +++ b/plugins/xt-default/projects/default-plugin/src/main.ts @@ -2,5 +2,11 @@ import { bootstrapApplication } from '@angular/platform-browser'; import { appConfig } from './app/app.config'; import { AppComponent } from './app/app.component'; +const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); +document.documentElement.classList.toggle('app-dark', prefersDark.matches); +prefersDark.addEventListener('change', (e) => { + document.documentElement.classList.toggle('app-dark', e.matches); +}); + bootstrapApplication(AppComponent, appConfig) .catch((err) => console.error(err)); diff --git a/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.css b/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.css new file mode 100644 index 00000000..42657968 --- /dev/null +++ b/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.css @@ -0,0 +1,21 @@ +:host { + display: block; +} + +.carousel-object-set__panel { + cursor: pointer; + border: 2px solid transparent; + border-radius: 0.75rem; + padding: 1rem; + transition: border-color 0.2s ease, box-shadow 0.2s ease; + background: var(--p-content-background); +} + +.carousel-object-set__panel:hover { + border-color: var(--p-primary-200); +} + +.carousel-object-set__panel--selected { + border-color: var(--p-primary-400); + box-shadow: 0 0 0 1px var(--p-primary-400), 0 2px 8px rgba(0, 0, 0, 0.08); +} diff --git a/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.html b/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.html new file mode 100644 index 00000000..b4b46b7b --- /dev/null +++ b/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.html @@ -0,0 +1,9 @@ + + + @let isSelected = selectedElement() === elt; +
+ + +
+ + diff --git a/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.spec.ts b/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.spec.ts new file mode 100644 index 00000000..f671ef1a --- /dev/null +++ b/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.spec.ts @@ -0,0 +1,264 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CarouselObjectSetComponent } from './carousel-object-set.component'; +import { provideZonelessChangeDetection } from '@angular/core'; +import { StoreTestHelper, XtBaseContext, XtResolverService } from 'xt-components'; +import { registerDefaultPlugin } from '../register'; +import { By } from '@angular/platform-browser'; +import { beforeEach, describe, expect, it } from 'vitest'; +import { Carousel } from 'primeng/carousel'; + +type TestData = { + simpleText: string; + simpleDate: Date; + simpleNumber: number; + simpleBoolean: boolean; +}; + +type IdentifiedTestData = TestData & { + _id: string; +}; + +describe('CarouselObjectSetComponent', () => { + + let resolverService: XtResolverService; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [CarouselObjectSetComponent], + providers: [provideZonelessChangeDetection()] + }) + .compileComponents(); + + StoreTestHelper.ensureTestProviderOnly(); + resolverService = TestBed.inject(XtResolverService); + registerDefaultPlugin(resolverService); + }); + + it('should create', () => { + let component: CarouselObjectSetComponent; + let fixture: ComponentFixture>; + + fixture = TestBed.createComponent(CarouselObjectSetComponent); + let context = new XtBaseContext('INLINE_VIEW'); + context.setDisplayValue([{ + simpleText: 'bonjour', + simpleDate: new Date(1971, 1, 1), + simpleNumber: 11, + simpleBoolean: false + }]); + + fixture.componentRef.setInput('context', context); + component = fixture.componentInstance; + fixture.detectChanges(); + + expect(component).toBeTruthy(); + }); + + it('should display items in carousel', () => { + let component: CarouselObjectSetComponent; + let fixture: ComponentFixture>; + + fixture = TestBed.createComponent(CarouselObjectSetComponent); + let context = new XtBaseContext('INLINE_VIEW'); + context.setDisplayValue([{ + simpleText: 'bonjour', + simpleDate: new Date(1971, 1, 1), + simpleNumber: 11, + simpleBoolean: false + }, { + simpleText: 'hola', + simpleDate: new Date(1972, 2, 2), + simpleNumber: 12, + simpleBoolean: true + }, { + simpleText: 'guten tag', + simpleDate: new Date(1973, 3, 3), + simpleNumber: 13, + simpleBoolean: false + }]); + + fixture.componentRef.setInput('context', context); + component = fixture.componentInstance; + fixture.detectChanges(); + + expect(component).toBeTruthy(); + expect(component.valueSet().length).toEqual(3); + + const carouselEl = fixture.debugElement.query(By.directive(Carousel)); + expect(carouselEl).toBeTruthy(); + }); + + it('should enable element selection', () => { + let component: CarouselObjectSetComponent; + let fixture: ComponentFixture>; + + fixture = TestBed.createComponent(CarouselObjectSetComponent); + let context = new XtBaseContext('LIST_VIEW'); + context.setDisplayValue([{ + simpleText: 'bonjour', + simpleDate: new Date(1971, 1, 1), + simpleNumber: 11, + simpleBoolean: false + }, { + simpleText: 'hola', + simpleDate: new Date(1972, 2, 2), + simpleNumber: 12, + simpleBoolean: true + }, { + simpleText: 'guten tag', + simpleDate: new Date(1973, 3, 3), + simpleNumber: 13, + simpleBoolean: false + }]); + + fixture.componentRef.setInput('context', context); + component = fixture.componentInstance; + fixture.detectChanges(); + + expect(component).toBeTruthy(); + component.selectionChange(component.valueSet()[1]); + fixture.detectChanges(); + + expect(component.selectedElement()).toBeTruthy(); + expect(component.selectedElement()?.simpleNumber).toEqual(12); + }); + + it('should keep element selection if possible', () => { + let component: CarouselObjectSetComponent; + let fixture: ComponentFixture>; + + fixture = TestBed.createComponent(CarouselObjectSetComponent); + let context = new XtBaseContext('LIST_VIEW'); + context.setDisplayValue([{ + _id: '11', + simpleText: 'bonjour', + simpleDate: new Date(1971, 1, 1), + simpleNumber: 11, + simpleBoolean: false + }, { + _id: '12', + simpleText: 'hola', + simpleDate: new Date(1972, 2, 2), + simpleNumber: 12, + simpleBoolean: true + }, { + _id: '13', + simpleText: 'guten tag', + simpleDate: new Date(1973, 3, 3), + simpleNumber: 13, + simpleBoolean: false + }]); + + fixture.componentRef.setInput('context', context); + component = fixture.componentInstance; + fixture.detectChanges(); + + expect(component).toBeTruthy(); + component.selectionChange(component.valueSet()[1]); + fixture.detectChanges(); + + expect(component.selectedElement()).toBeTruthy(); + expect(component.selectedElement()?.simpleNumber).toEqual(12); + + context.setDisplayValue([{ + _id: '11', + simpleText: 'bonjour', + simpleDate: new Date(1971, 1, 1), + simpleNumber: 11, + simpleBoolean: false + }, { + _id: '13', + simpleText: 'guten tag', + simpleDate: new Date(1973, 3, 3), + simpleNumber: 13, + simpleBoolean: false + }, { + _id: '12', + simpleText: 'hola', + simpleDate: new Date(1972, 2, 2), + simpleNumber: 12, + simpleBoolean: true + }]); + + expect(component.selectedElement()).toBeTruthy(); + expect(component.selectedElement()?.simpleNumber).toEqual(12); + + context.setDisplayValue([{ + _id: '11', + simpleText: 'bonjour', + simpleDate: new Date(1971, 1, 1), + simpleNumber: 11, + simpleBoolean: false + }, { + _id: '12', + simpleText: 'hola', + simpleDate: new Date(1972, 2, 2), + simpleNumber: 12, + simpleBoolean: true + }]); + + expect(component.selectedElement()).toBeTruthy(); + expect(component.selectedElement()?.simpleNumber).toEqual(12); + + context.setDisplayValue([{ + _id: '11', + simpleText: 'bonjour', + simpleDate: new Date(1971, 1, 1), + simpleNumber: 11, + simpleBoolean: false + }]); + + expect(component.selectedElement()).toBeNull(); + }); + + it('should keep selection even without Ids', () => { + let component: CarouselObjectSetComponent; + let fixture: ComponentFixture>; + + fixture = TestBed.createComponent(CarouselObjectSetComponent); + let context = new XtBaseContext('LIST_VIEW'); + const values: Array = [{ + simpleText: 'bonjour', + simpleDate: new Date(1971, 1, 1), + simpleNumber: 11, + simpleBoolean: false + }, { + simpleText: 'hola', + simpleDate: new Date(1972, 2, 2), + simpleNumber: 12, + simpleBoolean: true + }, { + simpleText: 'guten tag', + simpleDate: new Date(1973, 3, 3), + simpleNumber: 13, + simpleBoolean: false + }]; + + context.setDisplayValue(values); + + fixture.componentRef.setInput('context', context); + component = fixture.componentInstance; + fixture.detectChanges(); + + expect(component).toBeTruthy(); + component.selectionChange(component.valueSet()[1]); + fixture.detectChanges(); + + expect(component.selectedElement()).toBeTruthy(); + expect(component.selectedElement()?.simpleNumber).toEqual(12); + + values[1].simpleNumber = 14; + context.setDisplayValue([...values]); + + expect(component.selectedElement()).toBeTruthy(); + expect(component.selectedElement()?.simpleNumber).toEqual(14); + + context.setDisplayValue(values.slice(0, 2)); + expect(component.selectedElement()).toBeTruthy(); + expect(component.selectedElement()?.simpleNumber).toEqual(14); + + context.setDisplayValue(values.slice(0, 1)); + expect(component.selectedElement()).toBeNull(); + }); +}); diff --git a/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.ts b/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.ts new file mode 100644 index 00000000..61b336fe --- /dev/null +++ b/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.ts @@ -0,0 +1,80 @@ +import { ChangeDetectionStrategy, Component, computed, linkedSignal, model, output } from '@angular/core'; +import { XtCompositeComponent, XtRenderComponent } from 'xt-components'; +import { Carousel } from 'primeng/carousel'; + +@Component({ + selector: 'lib-carousel-object-set', + imports: [Carousel, XtRenderComponent], + templateUrl: './carousel-object-set.component.html', + styleUrl: './carousel-object-set.component.css', + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class CarouselObjectSetComponent extends XtCompositeComponent { + selected = model(); + protected valueSelectedAsOutput = output(); + + valueSet = computed(() => { + const ret = this.context().value(); + if (Array.isArray(ret)) { + return ret as T[]; + } else if (ret != null) { + return [ret] as T[]; + } else return []; + }); + + valueType = computed(() => { + const vt = this.context().valueType; + if (vt == null) return undefined; + return vt.endsWith('[]') ? vt.substring(0, vt.length - 2) : vt; + }); + + private selectionContext = computed(() => ({ + values: this.valueSet(), + current: this.selected() + })); + + selectedElement = linkedSignal<{values: T[]|null, current: T|null}, T|null>({ + source: this.selectionContext, + computation: (source, previous) => { + if (source.values == null || source.values.length === 0) return null; + + if (source.current != null) { + const found = source.values.find((toCheck) => { + if ((toCheck as any)._id != null && (source.current as any)._id != null) { + return (toCheck as any)._id === (source.current as any)._id; + } + return toCheck === source.current; + }); + if (found) return found; + } + + if (previous?.value != null) { + return source.values.find((toCheck) => { + if ((toCheck as any)._id != null) { + return (toCheck as any)._id === (previous.value as any)._id; + } + return toCheck === previous.value; + }) ?? null; + } + + return null; + } + }); + + selectionChange(newElement: any) { + this.selectedElement.set(newElement); + this.selected.set(newElement); + if (this.outputsObject.valueSelected != null) { + this.outputsObject.valueSelected.emit(newElement); + } + } + + override setupInputOutput() { + const parentModel = this.models(); + if (parentModel?.valueSelected != null) { + this.selected = parentModel.valueSelected; + } else { + this.outputsObject.valueSelected = this.valueSelectedAsOutput; + } + } +} diff --git a/plugins/xt-default/projects/default/src/public-api.ts b/plugins/xt-default/projects/default/src/public-api.ts index 22df5ede..43636ff1 100644 --- a/plugins/xt-default/projects/default/src/public-api.ts +++ b/plugins/xt-default/projects/default/src/public-api.ts @@ -5,4 +5,5 @@ export * from './lib/object/default-object.component'; export * from './lib/primitive/default-primitive.component'; export * from './lib/object-set/default-object-set.component'; +export * from './lib/object-set/carousel-object-set.component'; export * from './lib/register'; diff --git a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css index 9b64d90e..eeeaa748 100644 --- a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css +++ b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.css @@ -63,8 +63,14 @@ transform: scale(1.12); } +:host ::ng-deep .p-carousel-item { + display: flex; + flex-direction: column; +} + .carousel__panel--editing { - height: 100%; + flex: 1; + min-height: 0; box-sizing: border-box; overflow-y: auto; } diff --git a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.spec.ts b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.spec.ts index 197afacc..1597165e 100644 --- a/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.spec.ts +++ b/plugins/xt-workflow/projects/workflow/src/lib/carousel/carousel.component.spec.ts @@ -8,6 +8,7 @@ import { XtResolverService, XtUnitTestHelper } from 'xt-components'; import { DcWorkflowModel } from 'dc-workflow'; import { By } from '@angular/platform-browser'; import { Carousel } from 'primeng/carousel'; +import { FormGroup } from '@angular/forms'; describe('Carousel Component', () => { let component: CarouselComponent; @@ -76,4 +77,234 @@ describe('Carousel Component', () => { expect(carouselComponent.nativeElement.textContent?.indexOf('Another Book')).not.toBe(-1); }); + + it('should select element on click', async () => { + await storeTestBed.defineTestDataFor('CarouselTest', [{ + name: 'Test Book', + published: new Date(1970,10, 5) + }, { + name: 'Another Book', + published: new Date(2010,7, 15) + }]); + + fixture = TestBed.createComponent(CarouselComponent); + fixture.componentRef.setInput('config', { + entity: 'CarouselTest', + workflow: 'carousel', + data: { sort: { 'published': 'descending' } }, + selection: { field: { key: 'published', type: 'closest-before' } } + } as DcWorkflowModel); + + component = fixture.componentInstance; + fixture.detectChanges(); + await fixture.whenStable(); + + await XtUnitTestHelper.waitFor(() => { + const panels = fixture.debugElement.queryAll(By.css('.carousel__panel')); + return panels.length > 0; + }); + + const panels = fixture.debugElement.queryAll(By.css('.carousel__panel')); + panels[0].nativeElement.click(); + fixture.detectChanges(); + await fixture.whenStable(); + + expect(component.selectedElement()).toBeTruthy(); + expect(component.selectedElement()?.name).toEqual('Another Book'); + }); + + it('should show edit button on selected element and enter edit mode', async () => { + await storeTestBed.defineTestDataFor('CarouselTest', [{ + name: 'Test Book', + published: new Date(1970,10, 5) + }, { + name: 'Another Book', + published: new Date(2010,7, 15) + }]); + + fixture = TestBed.createComponent(CarouselComponent); + fixture.componentRef.setInput('config', { + entity: 'CarouselTest', + workflow: 'carousel', + data: { sort: { 'published': 'descending' } }, + selection: { field: { key: 'published', type: 'closest-before' } } + } as DcWorkflowModel); + + component = fixture.componentInstance; + fixture.detectChanges(); + await fixture.whenStable(); + + await XtUnitTestHelper.waitFor(() => { + return fixture.debugElement.queryAll(By.css('.carousel__panel')).length > 0; + }); + + const panels = fixture.debugElement.queryAll(By.css('.carousel__panel')); + panels[0].nativeElement.click(); + fixture.detectChanges(); + await fixture.whenStable(); + + await XtUnitTestHelper.waitFor(() => { + return fixture.debugElement.query(By.css('.carousel__edit-btn')) != null; + }); + + const editBtn = fixture.debugElement.query(By.css('.carousel__edit-btn')); + expect(editBtn).toBeTruthy(); + + editBtn.nativeElement.click(); + fixture.detectChanges(); + await fixture.whenStable(); + + expect((component as any).editingEntity()).toBeTruthy(); + expect((component as any).editingEntity()).toEqual(component.selectedElement()); + + const saveBtn = fixture.debugElement.query(By.css('.carousel__actions p-button')); + expect(saveBtn).toBeTruthy(); + }); + + it('should cancel edit mode', async () => { + await storeTestBed.defineTestDataFor('CarouselTest', [{ + name: 'Test Book', + published: new Date(1970,10, 5) + }, { + name: 'Another Book', + published: new Date(2010,7, 15) + }]); + + fixture = TestBed.createComponent(CarouselComponent); + fixture.componentRef.setInput('config', { + entity: 'CarouselTest', + workflow: 'carousel', + data: { sort: { 'published': 'descending' } }, + selection: { field: { key: 'published', type: 'closest-before' } } + } as DcWorkflowModel); + + component = fixture.componentInstance; + fixture.detectChanges(); + await fixture.whenStable(); + + await XtUnitTestHelper.waitFor(() => { + return fixture.debugElement.queryAll(By.css('.carousel__panel')).length > 0; + }); + + const panels = fixture.debugElement.queryAll(By.css('.carousel__panel')); + panels[0].nativeElement.click(); + fixture.detectChanges(); + await fixture.whenStable(); + + await XtUnitTestHelper.waitFor(() => { + return fixture.debugElement.query(By.css('.carousel__edit-btn')) != null; + }); + + const editBtn = fixture.debugElement.query(By.css('.carousel__edit-btn')); + editBtn.nativeElement.click(); + fixture.detectChanges(); + await fixture.whenStable(); + + expect((component as any).editingEntity()).toBeTruthy(); + + component.cancelEdit(); + fixture.detectChanges(); + + expect((component as any).editingEntity()).toBeNull(); + expect((component as any).canSave()).toBeFalsy(); + }); + + it('should modify form and enable save', async () => { + await storeTestBed.defineTestDataFor('CarouselTest', [{ + name: 'Test Book', + published: new Date(1970,10, 5) + }]); + + fixture = TestBed.createComponent(CarouselComponent); + fixture.componentRef.setInput('config', { + entity: 'CarouselTest', + workflow: 'carousel' + } as DcWorkflowModel); + + component = fixture.componentInstance; + fixture.detectChanges(); + await fixture.whenStable(); + + await XtUnitTestHelper.waitFor(() => { + return fixture.debugElement.queryAll(By.css('.carousel__panel')).length > 0; + }); + + const panels = fixture.debugElement.queryAll(By.css('.carousel__panel')); + panels[0].nativeElement.click(); + fixture.detectChanges(); + await fixture.whenStable(); + + await XtUnitTestHelper.waitFor(() => { + return fixture.debugElement.query(By.css('.carousel__edit-btn')) != null; + }); + + const editBtn = fixture.debugElement.query(By.css('.carousel__edit-btn')); + editBtn.nativeElement.click(); + fixture.detectChanges(); + await fixture.whenStable(); + + expect((component as any).editingEntity()).toBeTruthy(); + expect((component as any).editForm()).toBeTruthy(); + + const editorForm = (component as any).editForm().get('editor') as FormGroup; + expect(editorForm).toBeTruthy(); + expect(editorForm.contains('name')).toBeTruthy(); + + editorForm.get('name')?.setValue('Modified Book'); + editorForm.markAsDirty(); + fixture.detectChanges(); + + expect((component as any).canSave()).toBeTruthy(); + }); + + it('should save entity after edit', async () => { + await storeTestBed.defineTestDataFor('CarouselTest', [{ + name: 'Test Book', + published: new Date(1970,10, 5) + }]); + + fixture = TestBed.createComponent(CarouselComponent); + fixture.componentRef.setInput('config', { + entity: 'CarouselTest', + workflow: 'carousel' + } as DcWorkflowModel); + + component = fixture.componentInstance; + fixture.detectChanges(); + await fixture.whenStable(); + + await XtUnitTestHelper.waitFor(() => { + return fixture.debugElement.queryAll(By.css('.carousel__panel')).length > 0; + }); + + const panels = fixture.debugElement.queryAll(By.css('.carousel__panel')); + panels[0].nativeElement.click(); + fixture.detectChanges(); + await fixture.whenStable(); + + await XtUnitTestHelper.waitFor(() => { + return fixture.debugElement.query(By.css('.carousel__edit-btn')) != null; + }); + + const editBtn = fixture.debugElement.query(By.css('.carousel__edit-btn')); + editBtn.nativeElement.click(); + fixture.detectChanges(); + await fixture.whenStable(); + + const editorForm = (component as any).editForm().get('editor') as FormGroup; + editorForm.get('name')?.setValue('Updated Book'); + editorForm.markAsDirty(); + fixture.detectChanges(); + + expect((component as any).canSave()).toBeTruthy(); + + await component.saveEdit(); + fixture.detectChanges(); + await fixture.whenStable(); + + expect((component as any).editingEntity()).toBeNull(); + + const updated = (component as any).safeFindStore().entities().find((e: any) => e.name === 'Updated Book'); + expect(updated).toBeTruthy(); + }); }); From 8c67536b1352758e6ac877d47b7db8b334a7876e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9rard=20Collin?= Date: Sun, 5 Jul 2026 13:33:17 +0200 Subject: [PATCH 10/14] fix: item selection --- .../test-object-set.component.html | 4 ++-- .../test-object-set/test-object-set.component.ts | 16 ++++------------ 2 files changed, 6 insertions(+), 14 deletions(-) diff --git a/plugins/xt-default/projects/default-plugin/src/app/test-object-set/test-object-set.component.html b/plugins/xt-default/projects/default-plugin/src/app/test-object-set/test-object-set.component.html index 511cac7b..dd9eac41 100644 --- a/plugins/xt-default/projects/default-plugin/src/app/test-object-set/test-object-set.component.html +++ b/plugins/xt-default/projects/default-plugin/src/app/test-object-set/test-object-set.component.html @@ -12,8 +12,8 @@
- - Selected element is {{selectedValue() | json}} + + Selected element is {{selectedModel() | json}}
diff --git a/plugins/xt-default/projects/default-plugin/src/app/test-object-set/test-object-set.component.ts b/plugins/xt-default/projects/default-plugin/src/app/test-object-set/test-object-set.component.ts index 481fe762..887d392b 100644 --- a/plugins/xt-default/projects/default-plugin/src/app/test-object-set/test-object-set.component.ts +++ b/plugins/xt-default/projects/default-plugin/src/app/test-object-set/test-object-set.component.ts @@ -1,7 +1,7 @@ -import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core'; +import { ChangeDetectionStrategy, Component, computed, model, signal } from '@angular/core'; import { AutoComplete, AutoCompleteSelectEvent } from 'primeng/autocomplete'; import { JsonPipe } from '@angular/common'; -import { XtComponentOutput, XtRenderComponent } from 'xt-components'; +import { XtRenderComponent } from 'xt-components'; import { FormsModule } from '@angular/forms'; import { Panel } from 'primeng/panel'; import { DefaultObjectSetComponent } from '../../../../default/src/lib/object-set/default-object-set.component'; @@ -134,17 +134,9 @@ export class TestObjectSetComponent { this.selectedComponent() === 'Carousel' ? CarouselObjectSetComponent : DefaultObjectSetComponent ); - selectedValue = signal(null); + selectedModel = model(null); - componentOutputChange (newOutput:XtComponentOutput|null) { - if (newOutput?.valueSelected!=null) { - newOutput.valueSelected.subscribe ((value) => { - this.selectedValue.set(value); - }) - } - } - - valueType= computed(() => { + valueType = computed(() => { const displayedType=this.selectedObject(); return displayedType=='references'?'bookType':undefined; }); From 403159bc9cd4098e29267568992f60870a28c5fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9rard=20Collin?= Date: Sun, 5 Jul 2026 14:06:20 +0200 Subject: [PATCH 11/14] fix: display long list --- .../carousel-object-set.component.css | 28 +++++++++++++++++++ .../carousel-object-set.component.html | 2 +- .../carousel-object-set.component.ts | 13 ++++++++- 3 files changed, 41 insertions(+), 2 deletions(-) diff --git a/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.css b/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.css index 42657968..6dea3540 100644 --- a/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.css +++ b/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.css @@ -1,5 +1,22 @@ :host { display: block; + max-width: 40rem; + margin: 0 auto; +} + +:host ::ng-deep .p-carousel-viewport { + max-height: 30vh; +} + +:host ::ng-deep .p-carousel-item { + display: flex; + flex-direction: column; +} + +:host ::ng-deep .p-carousel-indicator-list { + max-width: 100%; + overflow-x: auto; + gap: 0.25rem; } .carousel-object-set__panel { @@ -19,3 +36,14 @@ border-color: var(--p-primary-400); box-shadow: 0 0 0 1px var(--p-primary-400), 0 2px 8px rgba(0, 0, 0, 0.08); } + +:host ::ng-deep .carousel-object-set__indicator { + width: 0.5rem; + height: 0.5rem; +} + +@media (max-width: 600px) { + :host ::ng-deep .p-carousel-viewport { + max-height: 65vh; + } +} diff --git a/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.html b/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.html index b4b46b7b..d0bc2c90 100644 --- a/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.html +++ b/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.html @@ -1,4 +1,4 @@ - + @let isSelected = selectedElement() === elt;
diff --git a/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.ts b/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.ts index 61b336fe..a1731534 100644 --- a/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.ts +++ b/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, computed, linkedSignal, model, output } from '@angular/core'; +import { ChangeDetectionStrategy, Component, computed, linkedSignal, model, output, signal } from '@angular/core'; import { XtCompositeComponent, XtRenderComponent } from 'xt-components'; import { Carousel } from 'primeng/carousel'; @@ -13,6 +13,12 @@ export class CarouselObjectSetComponent extends XtCompositeComponent { selected = model(); protected valueSelectedAsOutput = output(); + private portraitQuery = window.matchMedia('(max-width: 599.98px) and (orientation: portrait)'); + isPortrait = signal(this.portraitQuery.matches); + + numVisible = computed(() => this.isPortrait() ? 1 : 3); + carouselOrientation = computed<'horizontal' | 'vertical'>(() => this.isPortrait() ? 'vertical' : 'horizontal'); + valueSet = computed(() => { const ret = this.context().value(); if (Array.isArray(ret)) { @@ -61,6 +67,11 @@ export class CarouselObjectSetComponent extends XtCompositeComponent { } }); + constructor() { + super(); + this.portraitQuery.addEventListener('change', (e) => this.isPortrait.set(e.matches)); + } + selectionChange(newElement: any) { this.selectedElement.set(newElement); this.selected.set(newElement); From f2849b00574e4c5f74885042a6d5c157ebe4fa32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9rard=20Collin?= Date: Sun, 5 Jul 2026 14:12:55 +0200 Subject: [PATCH 12/14] fix: display long list --- .../carousel-object-set.component.css | 10 ++++- .../carousel-object-set.component.html | 8 +++- .../carousel-object-set.component.ts | 38 ++++++++++++++++++- 3 files changed, 52 insertions(+), 4 deletions(-) diff --git a/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.css b/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.css index 6dea3540..cf098251 100644 --- a/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.css +++ b/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.css @@ -6,6 +6,7 @@ :host ::ng-deep .p-carousel-viewport { max-height: 30vh; + padding: 1.5rem 0.5rem; } :host ::ng-deep .p-carousel-item { @@ -24,7 +25,10 @@ border: 2px solid transparent; border-radius: 0.75rem; padding: 1rem; - transition: border-color 0.2s ease, box-shadow 0.2s ease; + transition: + transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), + border-color 0.2s ease, + box-shadow 0.2s ease; background: var(--p-content-background); } @@ -37,6 +41,10 @@ box-shadow: 0 0 0 1px var(--p-primary-400), 0 2px 8px rgba(0, 0, 0, 0.08); } +.carousel-object-set__panel--selected-scale { + transform: scale(1.12); +} + :host ::ng-deep .carousel-object-set__indicator { width: 0.5rem; height: 0.5rem; diff --git a/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.html b/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.html index d0bc2c90..c988a841 100644 --- a/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.html +++ b/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.html @@ -1,7 +1,11 @@ - + @let isSelected = selectedElement() === elt; -
+ @let isHorizontal = carouselOrientation() === 'horizontal'; +
diff --git a/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.ts b/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.ts index a1731534..46508808 100644 --- a/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.ts +++ b/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, computed, linkedSignal, model, output, signal } from '@angular/core'; +import { ChangeDetectionStrategy, Component, computed, effect, linkedSignal, model, output, signal, ViewChild } from '@angular/core'; import { XtCompositeComponent, XtRenderComponent } from 'xt-components'; import { Carousel } from 'primeng/carousel'; @@ -67,9 +67,36 @@ export class CarouselObjectSetComponent extends XtCompositeComponent { } }); + @ViewChild('carouselRef') carousel?: Carousel; + constructor() { super(); this.portraitQuery.addEventListener('change', (e) => this.isPortrait.set(e.matches)); + effect(() => { + const items = this.valueSet(); + if (items.length > 0 && this.selectedElement() == null) { + const numVis = this.numVisible(); + const center = Math.floor((numVis - 1) / 2); + const element = items[Math.min(center, items.length - 1)]; + this.selectedElement.set(element); + this.selected.set(element); + } + }); + } + + onCarouselPage(event: any): void { + const page = event.page ?? 0; + const items = this.valueSet(); + if (items.length === 0) return; + const numVis = this.numVisible(); + const centerIndex = page + Math.floor((numVis - 1) / 2); + const index = Math.min(centerIndex, items.length - 1); + const element = items[index]; + this.selectedElement.set(element); + this.selected.set(element); + if (this.outputsObject.valueSelected != null) { + this.outputsObject.valueSelected.emit(element); + } } selectionChange(newElement: any) { @@ -78,6 +105,15 @@ export class CarouselObjectSetComponent extends XtCompositeComponent { if (this.outputsObject.valueSelected != null) { this.outputsObject.valueSelected.emit(newElement); } + const items = this.valueSet(); + const index = items.indexOf(newElement); + if (index === -1) return; + const total = items.length; + const offset = Math.floor((this.numVisible() - 1) / 2); + const targetPage = Math.max(0, Math.min(index - offset, total - this.numVisible())); + if (this.carousel) { + this.carousel.page = targetPage; + } } override setupInputOutput() { From 19ff849151f5856c1eeb074be777a7ef1edd081d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9rard=20Collin?= Date: Sun, 5 Jul 2026 15:42:44 +0200 Subject: [PATCH 13/14] fix: display long list --- .../test-object-set.component.html | 4 ++-- .../carousel-object-set.component.css | 19 +++++++++---------- .../carousel-object-set.component.html | 2 +- .../carousel-object-set.component.ts | 18 +++++++++++------- 4 files changed, 23 insertions(+), 20 deletions(-) diff --git a/plugins/xt-default/projects/default-plugin/src/app/test-object-set/test-object-set.component.html b/plugins/xt-default/projects/default-plugin/src/app/test-object-set/test-object-set.component.html index dd9eac41..7847d020 100644 --- a/plugins/xt-default/projects/default-plugin/src/app/test-object-set/test-object-set.component.html +++ b/plugins/xt-default/projects/default-plugin/src/app/test-object-set/test-object-set.component.html @@ -12,8 +12,8 @@
- - Selected element is {{selectedModel() | json}} + + Selected element is {{selectedModel() | json}}
diff --git a/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.css b/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.css index cf098251..06cafa46 100644 --- a/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.css +++ b/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.css @@ -1,6 +1,5 @@ :host { display: block; - max-width: 40rem; margin: 0 auto; } @@ -12,12 +11,16 @@ :host ::ng-deep .p-carousel-item { display: flex; flex-direction: column; + min-width: 0; + padding: 0 0.5rem; + box-sizing: border-box; } -:host ::ng-deep .p-carousel-indicator-list { - max-width: 100%; - overflow-x: auto; - gap: 0.25rem; +:host ::ng-deep .p-carousel-item:not(.p-carousel-item-active) { + flex: 0 0 0 !important; + min-width: 0 !important; + overflow: hidden !important; + padding: 0 !important; } .carousel-object-set__panel { @@ -25,6 +28,7 @@ border: 2px solid transparent; border-radius: 0.75rem; padding: 1rem; + min-width: 0; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, @@ -45,11 +49,6 @@ transform: scale(1.12); } -:host ::ng-deep .carousel-object-set__indicator { - width: 0.5rem; - height: 0.5rem; -} - @media (max-width: 600px) { :host ::ng-deep .p-carousel-viewport { max-height: 65vh; diff --git a/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.html b/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.html index c988a841..79c43cb9 100644 --- a/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.html +++ b/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.html @@ -1,4 +1,4 @@ - + @let isSelected = selectedElement() === elt; @let isHorizontal = carouselOrientation() === 'horizontal'; diff --git a/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.ts b/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.ts index 46508808..fc1462c6 100644 --- a/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.ts +++ b/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.ts @@ -17,6 +17,7 @@ export class CarouselObjectSetComponent extends XtCompositeComponent { isPortrait = signal(this.portraitQuery.matches); numVisible = computed(() => this.isPortrait() ? 1 : 3); + centerOffset = computed(() => Math.floor((this.numVisible() - 1) / 2)); carouselOrientation = computed<'horizontal' | 'vertical'>(() => this.isPortrait() ? 'vertical' : 'horizontal'); valueSet = computed(() => { @@ -75,21 +76,21 @@ export class CarouselObjectSetComponent extends XtCompositeComponent { effect(() => { const items = this.valueSet(); if (items.length > 0 && this.selectedElement() == null) { - const numVis = this.numVisible(); - const center = Math.floor((numVis - 1) / 2); - const element = items[Math.min(center, items.length - 1)]; + const offset = this.centerOffset(); + const element = items[Math.min(offset, items.length - 1)]; this.selectedElement.set(element); this.selected.set(element); + this.currentPage.set(0); } }); } onCarouselPage(event: any): void { const page = event.page ?? 0; + this.currentPage.set(page); const items = this.valueSet(); if (items.length === 0) return; - const numVis = this.numVisible(); - const centerIndex = page + Math.floor((numVis - 1) / 2); + const centerIndex = page + this.centerOffset(); const index = Math.min(centerIndex, items.length - 1); const element = items[index]; this.selectedElement.set(element); @@ -99,6 +100,8 @@ export class CarouselObjectSetComponent extends XtCompositeComponent { } } + currentPage = signal(0); + selectionChange(newElement: any) { this.selectedElement.set(newElement); this.selected.set(newElement); @@ -109,8 +112,9 @@ export class CarouselObjectSetComponent extends XtCompositeComponent { const index = items.indexOf(newElement); if (index === -1) return; const total = items.length; - const offset = Math.floor((this.numVisible() - 1) / 2); - const targetPage = Math.max(0, Math.min(index - offset, total - this.numVisible())); + const numVis = this.numVisible(); + const targetPage = Math.max(0, Math.min(index - this.centerOffset(), total - numVis)); + this.currentPage.set(targetPage); if (this.carousel) { this.carousel.page = targetPage; } From 06680e25a779e6c2fbc5603cb2f8ccd4e20e153f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9rard=20Collin?= Date: Sun, 5 Jul 2026 16:35:01 +0200 Subject: [PATCH 14/14] feature: list can new be displayed as carousels --- .../test-object-set.component.css | 3 +++ .../test-object-set.component.html | 5 +++-- .../carousel-object-set.component.css | 17 ++--------------- 3 files changed, 8 insertions(+), 17 deletions(-) diff --git a/plugins/xt-default/projects/default-plugin/src/app/test-object-set/test-object-set.component.css b/plugins/xt-default/projects/default-plugin/src/app/test-object-set/test-object-set.component.css index e69de29b..08f9dbcb 100644 --- a/plugins/xt-default/projects/default-plugin/src/app/test-object-set/test-object-set.component.css +++ b/plugins/xt-default/projects/default-plugin/src/app/test-object-set/test-object-set.component.css @@ -0,0 +1,3 @@ +.list_view_container { + padding: 4rem; +} diff --git a/plugins/xt-default/projects/default-plugin/src/app/test-object-set/test-object-set.component.html b/plugins/xt-default/projects/default-plugin/src/app/test-object-set/test-object-set.component.html index 7847d020..9ca15655 100644 --- a/plugins/xt-default/projects/default-plugin/src/app/test-object-set/test-object-set.component.html +++ b/plugins/xt-default/projects/default-plugin/src/app/test-object-set/test-object-set.component.html @@ -11,9 +11,10 @@
- +
+ List View Selected element is {{selectedModel() | json}} - +
diff --git a/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.css b/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.css index 06cafa46..0a168aab 100644 --- a/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.css +++ b/plugins/xt-default/projects/default/src/lib/object-set/carousel-object-set.component.css @@ -1,6 +1,8 @@ :host { display: block; margin: 0 auto; + max-width: 100vw; + } :host ::ng-deep .p-carousel-viewport { @@ -8,21 +10,6 @@ padding: 1.5rem 0.5rem; } -:host ::ng-deep .p-carousel-item { - display: flex; - flex-direction: column; - min-width: 0; - padding: 0 0.5rem; - box-sizing: border-box; -} - -:host ::ng-deep .p-carousel-item:not(.p-carousel-item-active) { - flex: 0 0 0 !important; - min-width: 0 !important; - overflow: hidden !important; - padding: 0 !important; -} - .carousel-object-set__panel { cursor: pointer; border: 2px solid transparent;