@cityway/bo-ui 1.1.0-beta007 → 1.1.0-beta008

package/.eslintrc.json

@@ -0,0 +1,37 @@
+{
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "cw",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "cw",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "rules": {}
+    }
+  ]
+}

package/ng-package.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/bo-ui",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "tslib"
+  ],
+  "assets": [
+    {
+      "glob": "**/*",
+      "input": "src/lib/assets",
+      "output": "lib/assets"
+    }
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cityway/bo-ui",
-  "version": "1.1.0-beta007",
+  "version": "1.1.0-beta008",
   "peerDependencies": {
     "@angular/common": "^20.3.0",
     "@angular/core": "^20.3.0",
@@ -9,21 +9,10 @@
     "@angular/cdk": "^20.2.2",
     "@angular/platform-browser": "^20.3.0",
     "@angular/router": "^20.3.0",
-    "@cityway/basic-ui": "^1.1.0-beta007"
+    "@cityway/basic-ui": "^1.1.0-beta008"
   },
   "dependencies": {
     "tslib": "^2.8.0"
   },
-  "sideEffects": false,
-  "module": "fesm2022/cityway-bo-ui.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/cityway-bo-ui.mjs"
-    }
-  }
-}
+  "sideEffects": false
+}

package/src/lib/components/custom-list/custom-list.component.html

@@ -0,0 +1,35 @@
+<div class="card custom-card-light">
+  <div class="card-body d-flex-v gap-md">
+    @for (group of customListData(); track group.title) {
+      @if (group.title) {
+        <h3>{{ group.title | translate }}</h3>
+      }
+
+      <ul class="custom-description-list list-unstyled fs fs-sm">
+        @for (field of group.fields; track field.label) {
+          @if (!field.hideIfEmpty || hasValue(field.value)) {
+            <li>
+              <div class="fs fw-bold" [innerHTML]="'_LABEL.COLON' | translate: { label: (field.label | translate) }"></div>
+              <div>
+                @switch (field.type) {
+                  @case ('date') {
+                    {{ field.value | date: 'short' }}
+                  }
+                  @case ('boolean') {
+                    {{ (field.value ? '_COMMON._PRO_SENTENCE.YES' : '_COMMON._PRO_SENTENCE.NO') | translate }}
+                  }
+                  @case ('html') {
+                    <span [innerHTML]="field.value"></span>
+                  }
+                  @default {
+                    {{ field.translateValue ? (field.value | translate) : field.value }}
+                  }
+                }
+              </div>
+            </li>
+          }
+        }
+      </ul>
+    }
+  </div>
+</div>

package/src/lib/components/custom-list/custom-list.component.spec.ts

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+import { CustomListComponent } from './custom-list.component';
+
+describe('CustomListComponent', () => {
+  let component: CustomListComponent;
+  let fixture: ComponentFixture<CustomListComponent>;
+
+  beforeEach(async () => {
+    // Composant standalone : il s'importe, il ne se declare pas. `TranslateModule.forRoot()`
+    // fournit le `TranslateStore` dont depend le pipe `translate` du template.
+    await TestBed.configureTestingModule({
+      imports: [CustomListComponent, TranslateModule.forRoot()]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CustomListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/custom-list/custom-list.component.ts

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { DataCustomListGroup } from '../../models/custom-list.model';
+import { TranslateModule } from '@ngx-translate/core';
+import { DatePipe } from '@angular/common';
+
+@Component({
+  selector: 'cw-custom-list',
+  templateUrl: './custom-list.component.html',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    DatePipe,
+    TranslateModule
+  ]
+})
+export class CustomListComponent {
+
+  readonly customListData = input<DataCustomListGroup[]>([]);
+
+  hasValue(value: any): boolean {
+    if (value === null || value === undefined) {
+      return false;
+    }
+    if (typeof value === 'string' && value.trim() === '') {
+      return false;
+    }
+    if (Array.isArray(value) && value.length === 0) {
+      return false;
+    }
+    if (typeof value === 'object' && Object.keys(value).length === 0) {
+      return false;
+    }
+
+    return true;
+  }
+
+}

package/src/lib/components/drag-n-drop-list/drag-drop.adapter.ts

@@ -0,0 +1,77 @@
+import { AbstractControl, FormArray } from '@angular/forms';
+import { DragItem } from '../../models/drag-item.model';
+
+
+export interface DragDropAdapter<T = any> {
+  toDragItems(source: T): DragItem[];
+  fromDragItems(items: DragItem[], source: T, peers?: T[]): void;
+}
+
+// Adaptateur pour DragItem[] (identité)
+export class ArrayAdapter implements DragDropAdapter<DragItem[]> {
+  toDragItems(source: DragItem[]): DragItem[] {
+    return source;
+  }
+  fromDragItems(items: DragItem[], source: DragItem[], _peers?: DragItem[][]): void {
+    source.splice(0, source.length, ...items);
+  }
+}
+
+// Adaptateur pour FormArray
+export class FormArrayAdapter implements DragDropAdapter<FormArray> {
+
+  constructor(
+    private readonly mapper: (ctrl: AbstractControl, index: number) => DragItem,
+    private readonly reorderFn?: (ctrl: AbstractControl, newOrder: number) => void
+  ) {}
+
+  toDragItems(source: FormArray): DragItem[] {
+    return source.controls.map((ctrl, i) => this.mapper(ctrl, i));
+  }
+
+  fromDragItems(items: DragItem[], source: FormArray, peers: FormArray[] = []): void {
+    // Cherche le control correspondant à un id dans la source ou les FormArray voisines
+    // (cas du transfert inter-colonnes : le control n'est pas encore dans `source`)
+    const findCtrl = (id: DragItem['id']): AbstractControl | undefined => {
+      const inSource = source.controls.find(c => this.mapper(c, 0).id === id);
+      if (inSource) return inSource;
+      for (const peer of peers) {
+        const found = peer.controls.find(c => this.mapper(c, 0).id === id);
+        if (found) return found;
+      }
+      return undefined;
+    };
+
+    const controls = items
+      .map(item => findCtrl(item.id))
+      .filter((c): c is AbstractControl => c != null);
+
+    // Détacher des peers les controls qu'on va re-pousser ici (évite la double appartenance)
+    for (const peer of peers) {
+      for (const ctrl of controls) {
+        const idx = peer.controls.indexOf(ctrl);
+        if (idx >= 0) peer.removeAt(idx, { emitEvent: false });
+      }
+    }
+
+    // Évacuer les orphelins de `source` vers `peers[0]` AVANT le clear,
+    // pour qu'ils soient retrouvables au prochain appel de fromDragItems
+    // (sinon ils seraient garbage-collectés lors d'un transfert inter-colonnes).
+    if (peers.length > 0) {
+      const wantedSet = new Set(controls);
+      const orphans = source.controls.filter(c => !wantedSet.has(c));
+      for (const orphan of orphans) {
+        const idx = source.controls.indexOf(orphan);
+        if (idx >= 0) source.removeAt(idx, { emitEvent: false });
+        peers[0].push(orphan, { emitEvent: false });
+      }
+    }
+
+    while (source.length) source.removeAt(0, { emitEvent: false });
+    controls.forEach((ctrl, i) => {
+      if (this.reorderFn) this.reorderFn(ctrl, i + 1);
+      source.push(ctrl, { emitEvent: false });
+    });
+    source.updateValueAndValidity();
+  }
+}

package/src/lib/components/drag-n-drop-list/drag-n-drop-list.component.html

@@ -0,0 +1,59 @@
+<div class="drag-drop-list row">
+  <div class="col-lg-6 d-flex-v gap-4xs">
+    <div class="fs fs-xs fw-bold">{{ availableColumn().title | translate }}</div>
+    @if (availableColumn().description; as description) {
+      <p class="fs fs-xs">{{ description | translate }}</p>
+    }
+    @if (availableColumn().descriptionRwd; as descriptionRwd) {
+      <p class="d-sm-none fs fs-xs" [innerHTML]="descriptionRwd | translate"></p>
+    }
+    <ul class="list-unstyled drag-drop-list-column drag-drop-list-column-available" [ngClass]="availableColumn().cssClass"
+      cdkDropList #availableList="cdkDropList"
+      [cdkDropListData]="_available"
+      [cdkDropListConnectedTo]="[activeList]"
+      (cdkDropListDropped)="drop($event)">
+      @for (item of _available; track item.id) {
+        <li cdkDrag [cdkDragDisabled]="item.disabled ?? false">
+          <cw-card>
+            <ng-container *ngTemplateOutlet="itemTemplate() || defaultTemplate; context: { $implicit: item }"/>
+          </cw-card>
+        </li>
+      }
+    </ul>
+  </div>
+
+  <div class="col-lg-6 d-flex-v gap-4xs">
+    <div class="fs fs-xs fw-bold">{{ activeColumn().title | translate }}</div>
+    @if (activeColumn().description; as description) {
+      <p class="fs fs-xs">{{ description | translate }}</p>
+    }
+    @if (activeColumn().descriptionRwd; as descriptionRwd) {
+      <p class="d-sm-none fs fs-xs" [innerHTML]="descriptionRwd | translate"></p>
+    }
+    <ul class="list-unstyled drag-drop-list-column drag-drop-list-column-active" [ngClass]="activeColumn().cssClass"
+      cdkDropList #activeList="cdkDropList"
+      [cdkDropListData]="_active"
+      [cdkDropListConnectedTo]="[availableList]"
+      (cdkDropListDropped)="drop($event)">
+      @for (item of _active; track item.id) {
+        <li cdkDrag [cdkDragDisabled]="item.disabled ?? false">
+          <cw-card>
+            <ng-container *ngTemplateOutlet="itemTemplate() || defaultTemplate; context: { $implicit: item }"/>
+          </cw-card>
+        </li>
+      }
+    </ul>
+  </div>
+</div>
+
+<ng-template #defaultTemplate let-item>
+  <div class="default-item d-flex justify-content-between">
+    <span>
+      {{ item.label }}
+      @if (item.code) { <span class="text-muted">({{ item.code }})</span> }
+    </span>
+    @if (item.order != null) {
+      <span class="fw-bold">#{{ item.order }}</span>
+    }
+  </div>
+</ng-template>

package/src/lib/components/drag-n-drop-list/drag-n-drop-list.component.spec.ts

@@ -0,0 +1,161 @@
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
+import { ComponentRef } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { DragNDropListComponent } from './drag-n-drop-list.component';
+import { FormArrayAdapter } from './drag-drop.adapter';
+import { DragItem } from '../../models/drag-item.model';
+
+describe('DragNDropListComponent', () => {
+
+  // Le TestBed n'etait pas configure du tout : `TranslateModule.forRoot()` fournit le
+  // `TranslateStore` dont depend le pipe `translate` du template.
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DragNDropListComponent, TranslateModule.forRoot()]
+    }).compileComponents();
+  });
+
+  it('should create', () => {
+    const fixture = TestBed.createComponent(DragNDropListComponent);
+    expect(fixture.componentInstance).toBeTruthy();
+  });
+
+  describe('FormArrayAdapter integration', () => {
+    let component: DragNDropListComponent;
+    let componentRef: ComponentRef<DragNDropListComponent>;
+    let availableItems: FormArray;
+    let activeItems: FormArray;
+
+    const makeRow = (id: string, order: number): FormGroup =>
+      new FormGroup({
+        id: new FormControl(id),
+        order: new FormControl(order),
+      });
+
+    const setup = (left: AbstractControl[], right: AbstractControl[]): void => {
+      availableItems = new FormArray<any>(left);
+      activeItems = new FormArray<any>(right);
+
+      const fixture = TestBed.createComponent(DragNDropListComponent);
+      component = fixture.componentInstance;
+      componentRef = fixture.componentRef;
+
+      componentRef.setInput('adapter', new FormArrayAdapter(
+        c => ({ id: c.get('id')!.value, label: c.get('id')!.value, order: c.get('order')!.value }),
+        (c, n) => c.get('order')!.setValue(n, { emitEvent: false }),
+      ));
+      componentRef.setInput('availableItems', availableItems);
+      componentRef.setInput('activeItems', activeItems);
+      componentRef.setInput('reorderOnDrop', true);
+
+      // Trigger the effect that copies inputs into _available / _active
+      fixture.detectChanges();
+    };
+
+    const dropEvent = (
+      from: 'available' | 'active',
+      to: 'available' | 'active',
+      previousIndex: number,
+      currentIndex: number,
+    ): CdkDragDrop<DragItem[]> => ({
+      previousContainer: { data: from === 'available' ? component._available : component._active },
+      container: { data: to === 'available' ? component._available : component._active },
+      previousIndex,
+      currentIndex,
+    } as unknown as CdkDragDrop<DragItem[]>);
+
+    it('transfers a control from active to available without losing it', () => {
+      setup([makeRow('A', 1)], [makeRow('B', 1)]);
+      const bCtrl = activeItems.at(0);
+
+      component.drop(dropEvent('active', 'available', 0, 1));
+
+      expect(availableItems.controls.length).toBe(2);
+      expect(activeItems.controls.length).toBe(0);
+      expect(availableItems.controls.indexOf(bCtrl)).not.toBe(-1);
+      expect(activeItems.controls.indexOf(bCtrl)).toBe(-1);
+      expect(bCtrl.parent).toBe(availableItems);
+      expect(bCtrl.get('order')!.value).toBe(2);
+    });
+
+    it('emits valueChanges only once per FormArray during a transfer', () => {
+      setup([makeRow('A', 1)], [makeRow('B', 1)]);
+
+      const availableEmits: unknown[] = [];
+      const activeEmits: unknown[] = [];
+      availableItems.valueChanges.subscribe(v => availableEmits.push(v));
+      activeItems.valueChanges.subscribe(v => activeEmits.push(v));
+
+      component.drop(dropEvent('active', 'available', 0, 1));
+
+      expect(availableEmits.length).toBe(1);
+      expect(activeEmits.length).toBe(1);
+    });
+
+    it('transfers a control from available to active without losing it (with sub-FormArray)', () => {
+      const makeRichRow = (id: string, order: number): FormGroup =>
+        new FormGroup({
+          id: new FormControl(id),
+          order: new FormControl(order),
+          children: new FormArray<any>([
+            new FormControl(`${id}-child-1`),
+            new FormControl(`${id}-child-2`),
+          ]),
+        });
+
+      availableItems = new FormArray<any>([
+        makeRichRow('A', 1),
+        makeRichRow('B', 2),
+        makeRichRow('C', 3),
+        makeRichRow('X', 4),
+      ]);
+      activeItems = new FormArray<any>([makeRichRow('Y', 1), makeRichRow('Z', 2)]);
+
+      const fixture = TestBed.createComponent(DragNDropListComponent);
+      component = fixture.componentInstance;
+      componentRef = fixture.componentRef;
+      componentRef.setInput('adapter', new FormArrayAdapter(
+        c => ({ id: c.get('id')!.value, label: c.get('id')!.value, order: c.get('order')!.value }),
+        (c, n) => c.get('order')!.setValue(n, { emitEvent: false }),
+      ));
+      componentRef.setInput('availableItems', availableItems);
+      componentRef.setInput('activeItems', activeItems);
+      componentRef.setInput('reorderOnDrop', true);
+      fixture.detectChanges();
+
+      const xCtrl = availableItems.at(3);
+      const xChildren = (xCtrl.get('children') as FormArray);
+
+      // Drag X from available (index 3) to active (end)
+      component.drop(dropEvent('available', 'active', 3, 2));
+
+      expect(availableItems.controls.length).toBe(3);
+      expect(activeItems.controls.length).toBe(3);
+      expect(activeItems.at(2)).toBe(xCtrl);
+      expect(xCtrl.parent).toBe(activeItems);
+      // The sub-FormArray must still be attached & populated — i.e. not garbage-collected
+      expect(xCtrl.get('children')).toBe(xChildren);
+      expect((xCtrl.get('children') as FormArray).length).toBe(2);
+      expect((xCtrl.get('children') as FormArray).at(0).value).toBe('X-child-1');
+    });
+
+    it('reorders intra-column without losing or duplicating controls', () => {
+      setup([makeRow('A', 1), makeRow('B', 2), makeRow('C', 3)], []);
+      const aCtrl = availableItems.at(0);
+      const bCtrl = availableItems.at(1);
+      const cCtrl = availableItems.at(2);
+
+      component.drop(dropEvent('available', 'available', 0, 2));
+
+      expect(availableItems.controls.length).toBe(3);
+      expect(availableItems.at(0)).toBe(bCtrl);
+      expect(availableItems.at(1)).toBe(cCtrl);
+      expect(availableItems.at(2)).toBe(aCtrl);
+      expect(bCtrl.get('order')!.value).toBe(1);
+      expect(cCtrl.get('order')!.value).toBe(2);
+      expect(aCtrl.get('order')!.value).toBe(3);
+    });
+  });
+});

package/src/lib/components/drag-n-drop-list/drag-n-drop-list.component.ts

@@ -0,0 +1,69 @@
+import {
+  CdkDragDrop, DragDropModule,
+  moveItemInArray, transferArrayItem
+} from '@angular/cdk/drag-drop';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, effect, input, output, TemplateRef } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { ArrayAdapter, DragDropAdapter } from './drag-drop.adapter';
+import { DragItem, DragListColumn } from '../../models/drag-item.model';
+import { CardComponent } from '@cityway/basic-ui';
+
+@Component({
+  selector: 'cw-drag-n-drop-list',
+  templateUrl: './drag-n-drop-list.component.html',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgClass, NgTemplateOutlet, TranslateModule, DragDropModule, CardComponent]
+})
+export class DragNDropListComponent {
+
+  readonly availableItems = input<any>(undefined);
+  readonly activeItems = input<any>(undefined);
+  readonly adapter = input<DragDropAdapter>(new ArrayAdapter());
+  readonly itemTemplate = input<TemplateRef<any> | undefined>(undefined);
+
+  readonly availableColumn = input<DragListColumn>({ title: 'Disponibles' });
+  readonly activeColumn = input<DragListColumn>({ title: 'Activés' });
+  readonly reorderOnDrop = input(false);
+
+  readonly availableItemsChange = output<any>();
+  readonly activeItemsChange = output<any>();
+
+  // Copies internes sur lesquelles le CDK travaille (mutables — pas des signals)
+  _available: DragItem[] = [];
+  _active: DragItem[] = [];
+
+  constructor() {
+    effect(() => {
+      const adapter = this.adapter();
+      this._available = adapter.toDragItems(this.availableItems());
+      this._active = adapter.toDragItems(this.activeItems());
+    });
+  }
+
+  drop(event: CdkDragDrop<DragItem[]>): void {
+    if (event.previousContainer === event.container) {
+      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+    } else {
+      transferArrayItem(
+        event.previousContainer.data,
+        event.container.data,
+        event.previousIndex,
+        event.currentIndex
+      );
+    }
+
+    if (this.reorderOnDrop()) {
+      this._available.forEach((item, i) => item.order = i + 1);
+      this._active.forEach((item, i) => item.order = i + 1);
+    }
+
+    const adapter = this.adapter();
+    adapter.fromDragItems(this._available, this.availableItems(), [this.activeItems()]);
+    adapter.fromDragItems(this._active, this.activeItems(), [this.availableItems()]);
+
+    this.availableItemsChange.emit(this.availableItems());
+    this.activeItemsChange.emit(this.activeItems());
+  }
+}