import {
ChangeDetectionStrategy,
Component,
effect,
forwardRef,
input,
output,
signal,
ViewEncapsulation,
} from "@angular/core";
import type { SdModalContentDef } from "../../core/modal/sd-modal.provider";
import type { SdSheetConfig } from "./types";
import type { SdSheetColumn } from "./sd-sheet-column";
import { SdSheet } from "./sd-sheet";
import { SdSheetColumn as SdSheetColumnDir } from "./sd-sheet-column";
import { SdSheetColumnCellTemplate } from "./sd-sheet-column-cell-template";
import { SdButton } from "../../controls/button/sd-button";
import { SdCheckbox } from "../../controls/checkbox/sd-checkbox";
import { SdTextfield } from "../../controls/input/sd-textfield";
import { SdAnchor } from "../../controls/button/sd-anchor";
import { SdBusyContainer } from "../../core/busy/sd-busy-container";
import { NgIcon } from "@ng-icons/core";
import { tablerChevronUp, tablerChevronDown, tablerX } from "@ng-icons/tabler-icons";
import { mark } from "../../core/mark";
interface ConfigItem {
key: string;
header: string;
disableResizing: boolean;
fixed: boolean;
hidden: boolean;
width: string | undefined;
ordering: number | undefined;
}
@Component({
selector: "sd-sheet-config-modal",
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
imports: [
forwardRef(() => SdSheet),
SdSheetColumnDir,
SdSheetColumnCellTemplate,
SdButton,
SdCheckbox,
SdTextfield,
SdAnchor,
SdBusyContainer,
NgIcon,
],
template: `
@if (initialized()) {
{{ item.header }}
@if (!item.disableResizing) {
}
}
`,
})
export class SdSheetConfigModal implements SdModalContentDef {
initialized = signal(false);
close = output();
sheetKey = input.required();
controls = input.required();
config = input.required();
items = signal([]);
trackByFn = (item: ConfigItem): string => item.key;
protected readonly tablerChevronUp = tablerChevronUp;
protected readonly tablerChevronDown = tablerChevronDown;
protected readonly tablerX = tablerX;
protected readonly mark = mark;
constructor() {
effect(() => {
const cfg = this.config();
const items = this.controls()
.map((ctrl): ConfigItem => {
const key = ctrl.key();
const cfgCol = cfg?.columnRecord[key];
return {
key,
header: Array.isArray(ctrl.header())
? (ctrl.header() as string[]).join(" > ")
: (ctrl.header() as string),
disableResizing: ctrl.disableResizing(),
fixed: cfgCol?.fixed ?? ctrl.fixed(),
hidden: cfgCol?.hidden ?? ctrl.hidden(),
width: cfgCol?.width ?? ctrl.width(),
ordering: cfgCol?.ordering ?? ctrl.ordering(),
};
})
.orderBy((i) => i.ordering ?? 0)
.orderBy((i) => (i.fixed ? 0 : 1));
this.items.set(items);
this.initialized.set(true);
});
}
onMoveUp(item: ConfigItem): void {
this.items.update((v) => {
const r = [...v];
const index = r.indexOf(item);
r.splice(index, 1);
r.splice(index - 1, 0, item);
for (let i = 0; i < r.length; i++) {
r[i].ordering = i;
}
return r;
});
}
onMoveDown(item: ConfigItem): void {
this.items.update((v) => {
const r = [...v];
const index = r.indexOf(item);
r.splice(index, 1);
r.splice(index + 1, 0, item);
for (let i = 0; i < r.length; i++) {
r[i].ordering = i;
}
return r;
});
}
onOkClick(): void {
const result: SdSheetConfig = { columnRecord: {} };
for (const item of this.items()) {
result.columnRecord[item.key] = {
fixed: item.fixed,
width: item.width,
ordering: item.ordering,
hidden: item.hidden,
};
}
this.close.emit(result);
}
onCancelClick(): void {
this.close.emit(undefined);
}
onResetClick(): void {
if (confirm("설정값이 모두 초기화 됩니다.")) {
this.close.emit({ columnRecord: {} });
}
}
}