design-angular-kit 1.1.4 → 1.2.1

package/src/lib/components/form/transfer/store/transfer.reducers.ts

@@ -0,0 +1,242 @@
+import { TransferItem, TransferItemSelection } from '../transfer.model';
+import { SelectionState, State } from './transfer.state';
+
+//#region private utility functions
+const generateSelectAll = <T>(checked: boolean, items: TransferItem<T>[]) => {
+  const selected = new Set<TransferItem<T>>();
+  if (checked) {
+    items.forEach(item => selected.add(item));
+  }
+
+  return selected;
+};
+
+const updateSelected = <T>(set: Set<TransferItem<T>>, item: TransferItem<T>) => {
+  if (set.has(item)) {
+    set.delete(item);
+  } else {
+    set.add(item);
+  }
+
+  return set;
+};
+//#endregion
+
+//#region reducers
+const init = <T>(state: State<T>, { source, target }: SelectionState<T>) => ({
+  ...state,
+  initialItems: {
+    source: [...source],
+    target: [...target],
+  },
+  current: {
+    source: [...source],
+    target: [...target],
+  },
+});
+
+const transfer = <T>(state: State<T>) => {
+  return {
+    ...state,
+    current: {
+      ...state.current,
+      source: state.current.source.filter(i => !state.selections.source.has(i)),
+      target: Array.from(new Set([...state.current.target, ...Array.from(state.selections.source)] as TransferItemSelection<T>)),
+    },
+    selections: {
+      ...state.selections,
+      source: new Set<TransferItem<T>>(),
+    },
+    operationsEnabled: {
+      ...state.operationsEnabled,
+      transfer: false,
+      reset: true,
+    },
+  } satisfies State<T>;
+};
+
+const backtransfer = <T>(state: State<T>) => {
+  return {
+    ...state,
+    current: {
+      ...state.current,
+      target: state.current.target.filter(i => !state.selections.target.has(i)),
+      source: Array.from(new Set([...state.current.source, ...Array.from(state.selections.target)] as TransferItemSelection<T>)),
+    },
+    selections: {
+      ...state.selections,
+      target: new Set<TransferItem<T>>(),
+    },
+    operationsEnabled: {
+      ...state.operationsEnabled,
+      backtransfer: false,
+      reset: true,
+    },
+  } satisfies State<T>;
+};
+
+const reset = <T>(state: State<T>) => {
+  return {
+    ...state,
+    current: {
+      source: [...state.initialItems.source],
+      target: [...state.initialItems.target],
+    },
+    operationsEnabled: {
+      ...state.operationsEnabled,
+      reset: false,
+    },
+  } satisfies State<T>;
+};
+
+const selectAllSource = <T>(state: State<T>, { checked }: { checked: boolean }) => {
+  const items = state.current.source;
+  const selected = generateSelectAll(checked, items);
+  const transfer = Boolean(selected.size);
+
+  return {
+    ...state,
+    selections: {
+      ...state.selections,
+      source: selected,
+    },
+    operationsEnabled: {
+      ...state.operationsEnabled,
+      transfer,
+    },
+  } satisfies State<T>;
+};
+
+const selectAllTarget = <T>(state: State<T>, { checked }: { checked: boolean }) => {
+  const items = state.current.target;
+  const selected = generateSelectAll(checked, items);
+  const backtransfer = Boolean(selected.size);
+
+  return {
+    ...state,
+    selections: {
+      ...state.selections,
+      target: selected,
+    },
+    operationsEnabled: {
+      ...state.operationsEnabled,
+      backtransfer,
+    },
+  } satisfies State<T>;
+};
+
+const selectionItemSource = <T>(previousState: State<T>, { item }: { item: TransferItem<T> }) => {
+  const selected = updateSelected(previousState.selections.source, item);
+  const selectedItems = Array.from(selected);
+  const transfer = Boolean(selectedItems.length);
+  const source = new Set([...selectedItems]);
+
+  const state = {
+    ...previousState,
+    selections: {
+      ...previousState.selections,
+      source,
+    },
+    operationsEnabled: {
+      ...previousState.operationsEnabled,
+      transfer,
+    },
+  } satisfies State<T>;
+
+  return state;
+};
+
+const selectionItemTarget = <T>(previousState: State<T>, { item }: { item: TransferItem<T> }) => {
+  const selected = updateSelected(previousState.selections.target, item);
+  const selectedItems = Array.from(selected);
+  const backtransfer = Boolean(selectedItems.length);
+  const target = new Set([...selectedItems]);
+
+  const state = {
+    ...previousState,
+    selections: {
+      ...previousState.selections,
+      target,
+    },
+    operationsEnabled: {
+      ...previousState.operationsEnabled,
+      backtransfer,
+    },
+  } satisfies State<T>;
+
+  return state;
+};
+//#endregion reducers
+
+//#region public reducers
+const initialStateFn = <T>() => ({
+  initialItems: {
+    source: [],
+    target: [],
+  },
+  current: {
+    source: [],
+    target: [],
+  },
+  selections: {
+    source: new Set<TransferItem<T>>(),
+    target: new Set<TransferItem<T>>(),
+  },
+  operationsEnabled: {
+    transfer: false,
+    backtransfer: false,
+    reset: false,
+  },
+});
+const initFn =
+  <T>(payload: SelectionState<T>) =>
+  (state: State<T>) =>
+    init(state, payload);
+
+const transferFn =
+  <T>() =>
+  (state: State<T>) =>
+    transfer(state);
+
+const backtransferFn =
+  <T>() =>
+  (state: State<T>) =>
+    backtransfer(state);
+
+const resetFn =
+  <T>() =>
+  (state: State<T>) =>
+    reset(state);
+
+const selectAllSourceFn =
+  <T>({ checked }: { checked: boolean }) =>
+  (state: State<T>) =>
+    selectAllSource(state, { checked }) as State<T>;
+
+const selectAllTargetFn =
+  <T>({ checked }: { checked: boolean }) =>
+  (state: State<T>) =>
+    selectAllTarget(state, { checked }) as State<T>;
+
+const selectionItemSourceFn =
+  <T>({ item }: { item: TransferItem<T> }) =>
+  (state: State<T>) =>
+    selectionItemSource(state, { item }) as State<T>;
+
+const selectionItemTargetFn =
+  <T>({ item }: { item: TransferItem<T> }) =>
+  (state: State<T>) =>
+    selectionItemTarget(state, { item }) as State<T>;
+//#endregion
+
+export default {
+  initialStateFn,
+  initFn,
+  transferFn,
+  backtransferFn,
+  resetFn,
+  selectAllSourceFn,
+  selectAllTargetFn,
+  selectionItemSourceFn,
+  selectionItemTargetFn,
+};

package/src/lib/components/form/transfer/store/transfer.state.ts

@@ -0,0 +1,20 @@
+import { TransferItem } from '../transfer.model';
+
+export interface SelectionState<T> {
+  source: Array<TransferItem<T>>;
+  target: Array<TransferItem<T>>;
+}
+
+export interface State<T> {
+  initialItems: SelectionState<T>;
+  current: SelectionState<T>;
+  selections: {
+    source: Set<TransferItem<T>>;
+    target: Set<TransferItem<T>>;
+  };
+  operationsEnabled: {
+    transfer: boolean;
+    backtransfer: boolean;
+    reset: boolean;
+  };
+}

package/src/lib/components/form/transfer/store/transfer.store.ts

@@ -0,0 +1,88 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, distinctUntilChanged, map, of } from 'rxjs';
+import { SourceType, TransferItem } from '../transfer.model';
+import reducers from './transfer.reducers';
+import { SelectionState, State } from './transfer.state';
+
+@Injectable()
+export class TransferStore<T> {
+  private readonly _state = new BehaviorSubject<State<T>>(reducers.initialStateFn());
+
+  private readonly sourceItems = this._state.pipe(map(state => state.current.source));
+
+  private readonly targetItems = this._state.pipe(map(state => state.current.target));
+
+  readonly valueChanged = this._state.pipe(
+    map(state => state.current.target),
+    distinctUntilChanged()
+  );
+
+  readonly selectItems = (sourceType: SourceType) => {
+    if (sourceType === 'source') {
+      return this.sourceItems;
+    }
+
+    if (sourceType === 'target') {
+      return this.targetItems;
+    }
+
+    return of<TransferItem<T>[]>([]);
+  };
+
+  readonly selectSelectedItems = (sourceType: SourceType) => {
+    if (sourceType === 'source') {
+      return this._state.pipe(map(state => state.selections.source));
+    }
+
+    if (sourceType === 'target') {
+      return this._state.pipe(map(state => state.selections.target));
+    }
+
+    return of(new Set<TransferItem<T>>());
+  };
+
+  readonly transferEnabled = this._state.pipe(map(state => state.operationsEnabled.transfer));
+
+  readonly backtransferEnabled = this._state.pipe(map(state => state.operationsEnabled.backtransfer));
+
+  readonly resetEnabled = this._state.pipe(map(state => state.operationsEnabled.reset));
+
+  init({ source, target }: SelectionState<T>) {
+    this.updateState(reducers.initFn({ source, target }));
+  }
+
+  transfer() {
+    this.updateState(reducers.transferFn());
+  }
+  backtransfer() {
+    this.updateState(reducers.backtransferFn());
+  }
+
+  reset() {
+    this.updateState(reducers.resetFn());
+  }
+
+  checkboxSelection(item: TransferItem<T>, sourceType: SourceType) {
+    if (sourceType === 'source') {
+      this.updateState(reducers.selectionItemSourceFn({ item }));
+    }
+
+    if (sourceType === 'target') {
+      this.updateState(reducers.selectionItemTargetFn({ item }));
+    }
+  }
+
+  selectAllSelection(checked: boolean, sourceType: SourceType) {
+    if (sourceType === 'source') {
+      this.updateState(reducers.selectAllSourceFn({ checked }));
+    }
+
+    if (sourceType === 'target') {
+      this.updateState(reducers.selectAllTargetFn({ checked }));
+    }
+  }
+
+  private updateState(reducerFn: (state: State<T>) => State<T>) {
+    this._state.next(reducerFn(this._state.value));
+  }
+}

package/src/lib/components/form/transfer/transfer-list/transfer-list.component.html

@@ -0,0 +1,42 @@
+<div class="it-transfer-wrapper source">
+  <div class="transfer-header">
+    <div class="form-check">
+      <input
+        #selectAllCheckbox
+        type="checkbox"
+        id="{{ instanceId }}checkbox{{ title }}"
+        [disabled]="selectAllDisabled | async"
+        (click)="checkboxSelectAllHandler($event)" />
+      <label for="{{ instanceId }}checkbox{{ title }}">
+        <span>
+          @if (numberOfItems$ | async; as numberOfItems) {
+            <span class="num"> {{ numberOfItems.length }}</span>
+            <span> {{ (numberOfItems.length === 1 ? 'it.transfer.item' : 'it.transfer.items') | translate }}</span>
+          }
+        </span>
+        <span class="descr">{{ title | titlecase }}</span>
+      </label>
+    </div>
+    <!-- form check -->
+  </div>
+  <!-- transfer-header -->
+  <div class="transfer-scroll">
+    <div class="transfer-group">
+      @for (item of items$ | async; track item.value) {
+        <div class="form-check">
+          <input
+            type="checkbox"
+            id="{{ instanceId }}-{{ item.value }}"
+            [checked]="item.selected"
+            (click)="checkboxSelectionHandler(item)" />
+          <label for="{{ instanceId }}-{{ item.value }}">
+            <span>
+              <span>{{ item.text }}</span>
+            </span>
+          </label>
+        </div>
+      }
+    </div>
+  </div>
+</div>
+<!-- it-transfer-wrapper -->

package/src/lib/components/form/transfer/transfer-list/transfer-list.component.spec.ts

@@ -0,0 +1,33 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HostAttributeToken } from '@angular/core';
+import { tb_base } from 'projects/design-angular-kit/src/test';
+import { TransferStore } from '../store/transfer.store';
+import { ItTransferListComponent } from './transfer-list.component';
+
+describe('ItTransferListComponent', <T>() => {
+  let component: ItTransferListComponent<T>;
+  let fixture: ComponentFixture<ItTransferListComponent<T>>;
+
+  beforeEach(async () => {
+    const { imports, providers } = tb_base;
+
+    await TestBed.configureTestingModule({
+      imports,
+      providers: [
+        ...providers,
+        TransferStore,
+        { provide: new HostAttributeToken('title'), useValue: 'title' },
+        { provide: new HostAttributeToken('sourceType'), useValue: 'source' },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ItTransferListComponent<T>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/form/transfer/transfer-list/transfer-list.component.ts

@@ -0,0 +1,93 @@
+import { AsyncPipe, TitleCasePipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, ElementRef, HostAttributeToken, inject, ViewChild } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { combineLatest, distinctUntilChanged, map, shareReplay, skip, startWith, tap } from 'rxjs';
+import { ItAbstractComponent } from '../../../../abstracts/abstract.component';
+import { TransferStore } from '../store/transfer.store';
+import { TranslateModule } from '@ngx-translate/core';
+import { SourceType, TransferItem } from '../transfer.model';
+
+interface SelectableTransferItem<T> extends TransferItem<T> {
+  selected: boolean;
+}
+
+@Component({
+  selector: 'it-transfer-list',
+  standalone: true,
+  imports: [TranslateModule, AsyncPipe, TitleCasePipe],
+  templateUrl: './transfer-list.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItTransferListComponent<T> extends ItAbstractComponent {
+  /**
+   * Widget title
+   */
+  readonly title = inject(new HostAttributeToken('title'), { optional: true });
+
+  readonly sourceType = inject(new HostAttributeToken('sourceType'), { optional: true }) as SourceType;
+
+  private readonly items = this.store.selectItems(this.sourceType).pipe(distinctUntilChanged(), shareReplay());
+  private readonly selected = this.store.selectSelectedItems(this.sourceType).pipe(distinctUntilChanged(), shareReplay());
+
+  readonly numberOfItems$ = this.items.pipe(
+    map(items => ({ length: items.length })),
+    startWith({ length: 0 })
+  );
+  readonly selectAllDisabled = this.items.pipe(map(items => items.length === 0));
+  /**
+   * Items of the list
+   * @default []
+   */
+  readonly items$ = combineLatest([this.items, this.selected]).pipe(
+    map(([items, selected]) =>
+      items.map(item => {
+        (item as SelectableTransferItem<T>).selected = selected.has(item);
+        return item as SelectableTransferItem<T>;
+      })
+    )
+  );
+
+  @ViewChild('selectAllCheckbox')
+  selectAllCheckboxRef!: ElementRef<HTMLInputElement>;
+
+  readonly instanceId = this.getInstanceId();
+
+  constructor(private readonly store: TransferStore<T>) {
+    super();
+    this.onItemsUpdate();
+  }
+  /**
+   * Checkbox selection click handler
+   */
+  checkboxSelectionHandler(item: TransferItem<T>) {
+    this.store.checkboxSelection(item, this.sourceType);
+  }
+  /**
+   * Checkbox select all selection handler
+   */
+  checkboxSelectAllHandler(event: Event) {
+    const checked = ((event as PointerEvent).target as HTMLInputElement).checked;
+    this.store.selectAllSelection(checked, this.sourceType);
+  }
+
+  /**
+   * Items update subscription
+   */
+  private onItemsUpdate() {
+    this.items
+      .pipe(
+        takeUntilDestroyed(),
+        skip(1),
+        tap(() => {
+          if (this.selectAllCheckboxRef) {
+            this.selectAllCheckboxRef.nativeElement.checked = false;
+          }
+        })
+      )
+      .subscribe();
+  }
+
+  private getInstanceId() {
+    return Math.floor(Math.random() * 100000000).toString();
+  }
+}

package/src/lib/components/form/transfer/transfer.component.html

@@ -0,0 +1,52 @@
+<div>
+  @if (label) {
+    <label [for]="id" [class.active]="!!control.value">{{ label }}</label>
+  }
+  <div class="row">
+    <div class="col-xs-12 col-md-5">
+      <it-transfer-list sourceType="source" [title]="'it.transfer.source' | translate"></it-transfer-list>
+    </div>
+    <!-- col -->
+    <div class="col-xs-12 col-md-2">
+      <!-- transfer buttons-->
+      <div class="it-transfer-buttons">
+        <a
+          class="transfer"
+          role="button"
+          href="#"
+          [ngClass]="{ active: transferEnabled | async }"
+          (click)="transferClickHandler($event)"
+          (keypress)="transferKeyPressHandler($event)"
+          [attr.aria-label]="'it.transfer.aria-label-move-forward' | translate">
+          <it-icon name="arrow-right"></it-icon>
+        </a>
+        <span class="visually-hidden">{{ 'it.transfer.label-move-forward' | translate }}</span>
+        <a
+          class="backtransfer"
+          role="button"
+          href="#"
+          [ngClass]="{ active: backtransferEnabled | async }"
+          (click)="backtransferClickHandler($event)"
+          (keypress)="backtransferKeyPressHandler($event)"
+          [attr.aria-label]="'it.transfer.aria-label-move-backward' | translate">
+          <it-icon name="arrow-left"></it-icon>
+        </a>
+        <span class="visually-hidden">{{ 'it.transfer.label-move-backward' | translate }}</span>
+        <a
+          class="reset"
+          role="button"
+          href="#"
+          [ngClass]="{ active: resetEnabled | async }"
+          (click)="resetClickHandler($event)"
+          (keypress)="resetKeyPressHandler($event)"
+          [attr.aria-label]="'it.transfer.aria-label-reset' | translate">
+          <it-icon name="restore"></it-icon>
+        </a>
+        <span class="visually-hidden">{{ 'it.transfer.label-reset' | translate }}</span>
+      </div>
+    </div>
+    <div class="col-xs-12 col-md-5">
+      <it-transfer-list sourceType="target" [title]="'it.transfer.target' | translate"></it-transfer-list>
+    </div>
+  </div>
+</div>

package/src/lib/components/form/transfer/transfer.component.spec.ts

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { tb_base } from 'projects/design-angular-kit/src/test';
+import { TransferStore } from './store/transfer.store';
+import { ItTransferComponent } from './transfer.component';
+
+describe('ItTransferComponent', () => {
+  let component: ItTransferComponent;
+  let fixture: ComponentFixture<ItTransferComponent>;
+
+  beforeEach(async () => {
+    const { imports, providers } = tb_base;
+
+    await TestBed.configureTestingModule({
+      imports,
+      providers: [...providers, TransferStore],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ItTransferComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});