@simplysm/angular 14.0.8 → 14.0.10

package/src/features/shared-data/sd-shared-data-select-button.control.ts

@@ -0,0 +1,64 @@
+import { NgTemplateOutlet } from "@angular/common";
+import {
+  ChangeDetectionStrategy,
+  Component,
+  contentChild,
+  input,
+  TemplateRef,
+  ViewEncapsulation,
+} from "@angular/core";
+import type { ISharedDataBase } from "../../core/providers/sd-shared-data.provider";
+import {
+  SdItemOfTemplateDirective,
+  type SdItemOfTemplateContext,
+} from "../../core/directives/sd-item-of-template.directive";
+import {
+  AbsSdDataSelectButton,
+  SdDataSelectButtonControl,
+} from "../data-view/sd-data-select-button.control";
+import type {
+  ISdSelectModal,
+  TSdSelectModalInfo,
+} from "../../ui/form/button/sd-modal-select-button.control";
+import type { TSelectModeValue } from "../../ui/form/select/sd-select.control";
+
+@Component({
+  selector: "sd-shared-data-select-button",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdDataSelectButtonControl, NgTemplateOutlet, SdItemOfTemplateDirective],
+  template: `
+    <sd-data-select-button>
+      <ng-template [itemOf]="items()" let-item let-index="index">
+        <ng-template
+          [ngTemplateOutlet]="itemTplRef()"
+          [ngTemplateOutletContext]="{
+            $implicit: item,
+            item: item,
+            index: index,
+            depth: 0,
+          }"
+        />
+      </ng-template>
+      <ng-content />
+    </sd-data-select-button>
+  `,
+})
+export class SdSharedDataSelectButtonControl<
+  TItem extends ISharedDataBase<number>,
+  TMode extends keyof TSelectModeValue<number>,
+  TModal extends ISdSelectModal<any>,
+> extends AbsSdDataSelectButton<TItem, number, TMode> {
+  items = input<TItem[]>([]);
+  modal = input.required<TSdSelectModalInfo<TModal>>();
+
+  itemTplRef = contentChild.required<any, TemplateRef<SdItemOfTemplateContext<TItem>>>(
+    SdItemOfTemplateDirective,
+    { read: TemplateRef },
+  );
+
+  override load(keys: number[]): TItem[] {
+    return this.items().filter((item) => keys.includes(item.__valueKey));
+  }
+}

package/src/features/shared-data/sd-shared-data-select-list.control.ts

@@ -0,0 +1,245 @@
+import { NgTemplateOutlet } from "@angular/common";
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  contentChild,
+  effect,
+  inject,
+  input,
+  model,
+  signal,
+  TemplateRef,
+  untracked,
+  ViewEncapsulation,
+} from "@angular/core";
+import { str } from "@simplysm/core-common";
+import type { ISharedDataBase } from "../../core/providers/sd-shared-data.provider";
+import {
+  SdItemOfTemplateDirective,
+  type SdItemOfTemplateContext,
+} from "../../core/directives/sd-item-of-template.directive";
+import { SdModalProvider } from "../../ui/overlay/modal/sd-modal.provider";
+import type {
+  ISdSelectModal,
+  TSdSelectModalInfo,
+} from "../../ui/form/button/sd-modal-select-button.control";
+import { setupModelHook } from "../../core/utils/setups/setupModelHook";
+import { SdPaginationControl } from "../../ui/navigation/pagination/sd-pagination.control";
+import { SdTextfieldControl } from "../../ui/form/input/sd-textfield.control";
+import { SdAnchorControl } from "../../ui/form/button/sd-anchor.control";
+import { SdListControl } from "../../ui/data/list/sd-list.control";
+import { SdListItemControl } from "../../ui/data/list/sd-list-item.control";
+import { NgIcon } from "@ng-icons/core";
+import { tablerExternalLink } from "@ng-icons/tabler-icons";
+
+@Component({
+  selector: "sd-shared-data-select-list",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [
+    NgTemplateOutlet,
+    SdTextfieldControl,
+    SdPaginationControl,
+    SdAnchorControl,
+    SdListControl,
+    SdListItemControl,
+    NgIcon,
+  ],
+  host: {
+    class: "flex-column fill",
+  },
+  template: `
+    @if (header()) {
+      <div class="control-header p-default">
+        {{ header() }}
+      </div>
+    }
+
+    <div class="flex-column gap-sm p-default pt-0">
+      @if (headerTplRef() || modal()) {
+        <div class="flex-row">
+          <div class="flex-fill">
+            @if (headerTplRef()) {
+              <ng-template [ngTemplateOutlet]="headerTplRef()!"></ng-template>
+            }
+          </div>
+          @if (modal()) {
+            <sd-anchor (click)="onModalButtonClick()">
+              <ng-icon [svg]="tablerExternalLink" />
+            </sd-anchor>
+          }
+        </div>
+      }
+
+      @if (!filterTplRef()) {
+        <sd-textfield [type]="'text'" [placeholder]="'검색어'" [(value)]="searchText" />
+      } @else {
+        <div>
+          <ng-template [ngTemplateOutlet]="filterTplRef()!" />
+        </div>
+      }
+    </div>
+
+    <div class="flex-fill">
+      <div class="flex-column gap-default">
+        @if (pageItemCount()) {
+          <sd-pagination [(currentPage)]="page" [totalPageCount]="pageLength()" />
+        }
+
+        <sd-list [inset]="true" class="flex-fill">
+          @if (useUndefined()) {
+            <sd-list-item
+              [selected]="selectedItem() === undefined"
+              (click)="select(undefined)"
+              [selectedIcon]="selectedIcon()"
+            >
+              @if (undefinedTplRef()) {
+                <ng-template [ngTemplateOutlet]="undefinedTplRef()!" />
+              } @else {
+                <span class="tx-theme-gray-default">미지정</span>
+              }
+            </sd-list-item>
+          }
+          @for (item of displayItems(); let index = $index; track item.__valueKey) {
+            <sd-list-item
+              [selected]="selectedItem() === item"
+              (click)="toggle(item)"
+              [selectedIcon]="selectedIcon()"
+            >
+              <ng-template
+                [ngTemplateOutlet]="itemTplRef() ?? null"
+                [ngTemplateOutletContext]="{
+                  $implicit: item,
+                  item: item,
+                  index: index,
+                  depth: 0,
+                }"
+              ></ng-template>
+            </sd-list-item>
+          }
+        </sd-list>
+      </div>
+    </div>
+  `,
+})
+export class SdSharedDataSelectListControl<
+  TItem extends ISharedDataBase<string | number>,
+  TModal extends ISdSelectModal<any>,
+> {
+  private readonly _sdModal = inject(SdModalProvider);
+
+  selectedItem = model<TItem>();
+  canChangeFn = input<(item: TItem | undefined) => boolean | Promise<boolean>>(
+    () => true,
+  );
+
+  items = input.required<TItem[]>();
+  selectedIcon = input<string>();
+  useUndefined = input(false, { transform: booleanAttribute });
+  filterFn = input<(item: TItem, index: number) => boolean>();
+
+  modal = input<TSdSelectModalInfo<TModal>>();
+
+  header = input<string>();
+
+  headerTplRef = contentChild<any, TemplateRef<void>>("headerTpl", {
+    read: TemplateRef,
+  });
+  filterTplRef = contentChild<any, TemplateRef<void>>("filterTpl", {
+    read: TemplateRef,
+  });
+  itemTplRef = contentChild<any, TemplateRef<SdItemOfTemplateContext<TItem>>>(
+    SdItemOfTemplateDirective,
+    { read: TemplateRef },
+  );
+  undefinedTplRef = contentChild<any, TemplateRef<void>>("undefinedTpl", {
+    read: TemplateRef,
+  });
+
+  searchText = signal<string | undefined>(undefined);
+
+  pageItemCount = input<number>();
+  page = signal(0);
+  pageLength = computed(() => {
+    const pic = this.pageItemCount();
+    if (pic != null && pic > 0) {
+      return Math.ceil(this.items().length / pic);
+    }
+    return 0;
+  });
+
+  displayItems = computed(() => {
+    let result = this.items().filter((item) => !item.__isHidden);
+
+    if (!str.isNullOrEmpty(this.searchText())) {
+      result = result.filter((item) =>
+        item.__searchText.includes(this.searchText()!),
+      );
+    }
+
+    if (this.filterFn() != null) {
+      result = result.filter((item, i) => this.filterFn()!(item, i));
+    }
+
+    const pic = this.pageItemCount();
+    if (pic != null && pic > 0) {
+      result = result.slice(pic * this.page(), pic * (this.page() + 1));
+    }
+
+    return result;
+  });
+
+  constructor() {
+    setupModelHook(this.selectedItem, this.canChangeFn);
+
+    // items 변경 시 selectedItem 동기화 (selectedItem은 추적하지 않음)
+    effect(() => {
+      const items = this.items();
+      const current = untracked(() => this.selectedItem());
+      if (current != null) {
+        const updated = items.find(
+          (item) => item.__valueKey === current.__valueKey,
+        );
+        if (updated !== current) {
+          this.selectedItem.set(updated);
+        }
+      }
+    });
+  }
+
+  select(item: TItem | undefined): void {
+    this.selectedItem.set(item);
+  }
+
+  toggle(item: TItem | undefined): void {
+    this.selectedItem.update((v) => (v === item ? undefined : item));
+  }
+
+  async onModalButtonClick(): Promise<void> {
+    const modalInfo = this.modal();
+    if (modalInfo == null) return;
+
+    const result = await this._sdModal.showAsync({
+      ...modalInfo,
+      inputs: {
+        selectMode: "single",
+        selectedItemKeys: [this.selectedItem()]
+          .filter((v): v is NonNullable<typeof v> => v != null)
+          .map((item) => item.__valueKey),
+        ...modalInfo.inputs,
+      } as any,
+    });
+
+    if (result != null) {
+      const newSelectedItem = this.items().find(
+        (item) => item.__valueKey === result.selectedItemKeys[0],
+      );
+      this.selectedItem.set(newSelectedItem);
+    }
+  }
+
+  protected readonly tablerExternalLink = tablerExternalLink;
+}

package/src/features/shared-data/sd-shared-data-select.control.ts

@@ -0,0 +1,364 @@
+import { NgTemplateOutlet } from "@angular/common";
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  contentChild,
+  effect,
+  inject,
+  input,
+  model,
+  signal,
+  TemplateRef,
+  untracked,
+  viewChild,
+  ViewEncapsulation,
+} from "@angular/core";
+import type { ISharedDataBase } from "../../core/providers/sd-shared-data.provider";
+import { SdSelectControl, type TSelectModeValue } from "../../ui/form/select/sd-select.control";
+import { SdSelectButtonControl } from "../../ui/form/select/sd-select-button.control";
+import { SdSelectItemControl } from "../../ui/form/select/sd-select-item.control";
+import { SdTextfieldControl } from "../../ui/form/input/sd-textfield.control";
+import {
+  SdItemOfTemplateDirective,
+  type SdItemOfTemplateContext,
+} from "../../core/directives/sd-item-of-template.directive";
+import {
+  SdModalProvider,
+  type ISdModal,
+  type ISdModalInfo,
+} from "../../ui/overlay/modal/sd-modal.provider";
+import type {
+  ISdSelectModal,
+  TSdSelectModalInfo,
+} from "../../ui/form/button/sd-modal-select-button.control";
+import { NgIcon } from "@ng-icons/core";
+import { tablerEdit, tablerSearch } from "@ng-icons/tabler-icons";
+
+@Component({
+  selector: "sd-shared-data-select",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [
+    SdSelectControl,
+    SdTextfieldControl,
+    SdSelectItemControl,
+    SdItemOfTemplateDirective,
+    NgTemplateOutlet,
+    SdSelectButtonControl,
+    NgIcon,
+  ],
+  template: `
+    <sd-select
+      [value]="$any(value())"
+      (valueChange)="value.set($any($event))"
+      [disabled]="disabled()"
+      [required]="required()"
+      [inset]="inset()"
+      [inline]="inline()"
+      [size]="size()"
+      [items]="rootDisplayItems()"
+      [selectMode]="selectMode()"
+      [contentClass]="selectClass()"
+      [multiSelectionDisplayDirection]="multiSelectionDisplayDirection()"
+      [getChildrenFn]="hasParentKey() ? getChildren : undefined"
+    >
+      @if (modal()) {
+        <sd-select-button (click)="onModalButtonClick($event)">
+          <ng-icon [svg]="tablerSearch" />
+        </sd-select-button>
+      }
+      @if (editModal()) {
+        <sd-select-button (click)="onEditModalButtonClick($event)">
+          <ng-icon [svg]="tablerEdit" />
+        </sd-select-button>
+      }
+
+      <ng-template #headerTpl>
+        <div class="p-xs">
+          <sd-textfield
+            [type]="'text'"
+            [(value)]="searchText"
+            [placeholder]="'검색어'"
+            [size]="size()"
+          />
+        </div>
+      </ng-template>
+
+      <ng-template #beforeTpl>
+        @if (
+          (!required() && selectMode() === "single") ||
+          (useUndefined() && selectMode() === "multi")
+        ) {
+          <div
+            class="_sd-shared-data-select-undefined"
+            tabindex="0"
+            (click)="onUndefinedClick()"
+            (keydown.enter)="onUndefinedClick()"
+            (keydown.space)="onUndefinedClick(); $event.preventDefault()"
+          >
+            @if (undefinedTplRef()) {
+              <ng-template [ngTemplateOutlet]="undefinedTplRef()!" />
+            } @else {
+              <span class="tx-theme-gray-default">미지정</span>
+            }
+          </div>
+        }
+      </ng-template>
+
+      <ng-template
+        [itemOf]="rootDisplayItems()"
+        let-item="item"
+        let-index="index"
+        let-depth="depth"
+      >
+        @if (
+          getItemSelectable(item, index, depth) &&
+          (isDropdownOpen() || selectedKeys().includes(item.__valueKey))
+        ) {
+          <sd-select-item [value]="item.__valueKey" [hidden]="!getItemVisible(item, index)">
+            <span
+              [style.text-decoration]="
+                getIsHiddenFn()(item, index) ? 'line-through' : undefined
+              "
+            >
+              <ng-template
+                [ngTemplateOutlet]="itemTplRef() ?? null"
+                [ngTemplateOutletContext]="{
+                  $implicit: item,
+                  item: item,
+                  index: index,
+                  depth: depth,
+                }"
+              ></ng-template>
+            </span>
+          </sd-select-item>
+        }
+      </ng-template>
+    </sd-select>
+  `,
+})
+export class SdSharedDataSelectControl<
+  TItem extends ISharedDataBase<string | number>,
+  TMode extends keyof TSelectModeValue<TItem>,
+  TModal extends ISdSelectModal<any>,
+> {
+  private readonly _sdModal = inject(SdModalProvider);
+  private readonly _selectCtrl = viewChild(SdSelectControl);
+
+  value = model<TSelectModeValue<TItem["__valueKey"] | undefined>[TMode]>();
+
+  items = input.required<TItem[]>();
+
+  disabled = input(false, { transform: booleanAttribute });
+  required = input(false, { transform: booleanAttribute });
+  useUndefined = input(false, { transform: booleanAttribute });
+  inset = input(false, { transform: booleanAttribute });
+  inline = input(false, { transform: booleanAttribute });
+
+  size = input<"sm" | "lg">();
+  selectMode = input("single" as TMode);
+  filterFn = input<(item: TItem, index: number, ...params: any[]) => boolean>();
+  filterFnParams = input<any[]>();
+
+  modal = input<TSdSelectModalInfo<TModal>>();
+  editModal = input<ISdModalInfo<ISdModal<boolean>>>();
+
+  selectClass = input<string>();
+  multiSelectionDisplayDirection = input<"vertical">();
+  getIsHiddenFn = input<(item: TItem, index: number) => boolean>(
+    (item) => item.__isHidden,
+  );
+  getSearchTextFn = input<(item: TItem, index: number) => string>(
+    (item) => item.__searchText,
+  );
+  displayOrderKeyProp = input<string>();
+
+  itemTplRef = contentChild<any, TemplateRef<SdItemOfTemplateContext<TItem>>>(
+    SdItemOfTemplateDirective,
+    { read: TemplateRef },
+  );
+  undefinedTplRef = contentChild<any, TemplateRef<void>>("undefinedTpl", {
+    read: TemplateRef,
+  });
+
+  searchText = signal<string | undefined>(undefined);
+
+  isDropdownOpen = computed(() => this._selectCtrl()?.dropdownOpen() ?? false);
+
+  hasParentKey = computed(() =>
+    this.items().some((item) => item.__parentKey != null),
+  );
+
+  itemByParentKeyMap = computed(() => {
+    if (!this.hasParentKey()) return undefined;
+
+    const map = new Map<TItem["__valueKey"] | undefined, TItem[]>();
+    for (const item of this.items()) {
+      const parentKey = item.__parentKey as TItem["__valueKey"] | undefined;
+      const existing = map.get(parentKey);
+      if (existing != null) {
+        existing.push(item);
+      } else {
+        map.set(parentKey, [item]);
+      }
+    }
+    return map;
+  });
+
+  rootDisplayItems = computed(() => {
+    let result = this.items().filter((item, index) => {
+      if (this.filterFn() != null) {
+        if (!this.filterFn()!(item, index, ...(this.filterFnParams() ?? []))) {
+          return false;
+        }
+      }
+      if (this.hasParentKey()) {
+        return item.__parentKey == null;
+      }
+      return true;
+    });
+
+    const orderProp = this.displayOrderKeyProp();
+    if (orderProp != null) {
+      result = [...result].sort((a, b) => {
+        const aVal = (a as any)[orderProp];
+        const bVal = (b as any)[orderProp];
+        if (aVal < bVal) return -1;
+        if (aVal > bVal) return 1;
+        return 0;
+      });
+    }
+
+    return result;
+  });
+
+  selectedKeys = computed((): any[] => {
+    const val = this.value();
+    if (val == null) return [];
+    if (Array.isArray(val)) return val;
+    return [val];
+  });
+
+  constructor() {
+    // 드롭다운 닫힘 시 검색어 초기화
+    effect(() => {
+      const ctrl = this._selectCtrl();
+      if (ctrl != null) {
+        ctrl.dropdownOpen();
+      }
+      untracked(() => this.searchText.set(undefined));
+    });
+  }
+
+  getItemSelectable(item: TItem, _index: number, depth: number): boolean {
+    if (!this.hasParentKey()) return true;
+    // depth가 0이면서 자식을 가진 항목(카테고리)은 선택 불가
+    return depth !== 0 || item.__parentKey == null;
+  }
+
+  getItemVisible(item: TItem, index: number): boolean {
+    if (
+      this.isIncludeSearchText(item, index) &&
+      !this.getIsHiddenFn()(item, index)
+    ) {
+      return true;
+    }
+    // 현재 선택된 항목은 항상 표시
+    const val = this.value();
+    if (val === item.__valueKey) return true;
+    if (Array.isArray(val) && val.includes(item.__valueKey)) return true;
+    return false;
+  }
+
+  isIncludeSearchText(item: TItem, index: number): boolean {
+    const splitSearchTexts =
+      this.searchText()
+        ?.trim()
+        .split(" ")
+        .map((t) => t.trim())
+        .filter((t) => t !== "") ?? [];
+
+    if (splitSearchTexts.length === 0) return true;
+
+    const itemText = this.getSearchTextFn()(item, index);
+    for (const term of splitSearchTexts) {
+      if (!itemText.toLowerCase().includes(term.toLowerCase())) {
+        // 트리 구조에서 자식 중 매칭 항목 확인
+        if (this.hasParentKey()) {
+          const children = this.getChildren(item);
+          for (let i = 0; i < children.length; i++) {
+            if (this.isIncludeSearchText(children[i], i)) {
+              return true;
+            }
+          }
+        }
+        return false;
+      }
+    }
+    return true;
+  }
+
+  getChildren = (item: ISharedDataBase<string | number>): TItem[] => {
+    let result =
+      this.itemByParentKeyMap()?.get(item.__valueKey as TItem["__valueKey"]) ??
+      [];
+
+    const orderProp = this.displayOrderKeyProp();
+    if (orderProp != null) {
+      result = [...result].sort((a, b) => {
+        const aVal = (a as any)[orderProp];
+        const bVal = (b as any)[orderProp];
+        if (aVal < bVal) return -1;
+        if (aVal > bVal) return 1;
+        return 0;
+      });
+    }
+
+    return result;
+  };
+
+  onUndefinedClick(): void {
+    this.value.set(undefined as any);
+  }
+
+  async onModalButtonClick(event: MouseEvent): Promise<void> {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const modalInfo = this.modal();
+    if (modalInfo == null) return;
+
+    const result = await this._sdModal.showAsync({
+      ...modalInfo,
+      inputs: {
+        selectMode: this.selectMode(),
+        selectedItemKeys: this.selectedKeys(),
+        ...modalInfo.inputs,
+      } as any,
+    });
+
+    if (result != null) {
+      const newValue =
+        this.selectMode() === "multi"
+          ? result.selectedItemKeys
+          : result.selectedItemKeys[0];
+      this.value.set(newValue);
+    }
+  }
+
+  async onEditModalButtonClick(event: MouseEvent): Promise<void> {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const modalInfo = this.editModal();
+    if (modalInfo == null) return;
+
+    await this._sdModal.showAsync(modalInfo);
+  }
+
+  protected readonly tablerSearch = tablerSearch;
+  protected readonly tablerEdit = tablerEdit;
+}