namirasoft-account-react 1.4.418 → 1.4.421

package/src/components/NSATable.tsx

@@ -0,0 +1,490 @@
+import { FilterItem, FilterItemColumnType, NamingConvention, ObjectService, SearchOperation, SortItem } from "namirasoft-core";
+import { CategoryRow, FieldRow } from "namirasoft-field";
+import { FilterItemColumnTypeBuilder, VariableType } from "namirasoft-schema";
+import { IBaseComponentProps, NSButtonProps, NSFilterBox, NSFilterBoxItems, NSFilterBoxProps_Table, NSTable, TableColumnInfo, TableRowInfo } from "namirasoft-site-react";
+import { Component, ReactNode, createRef } from "react";
+import { IEntityInfo } from "../IEntityInfo";
+import { NSACacheService } from "../NSACacheService";
+import { NSAQuickFilterBar } from "./NSAQuickFilter/NSAQuickFilterBar";
+import { NSAQuickFilterDialog, QuickFilterConfig } from "./NSAQuickFilter/NSAQuickFilterDialog";
+import { NSAReorderDialog } from "./NSAReorderDialog";
+import { NSASortDialog } from "./NSASortDialog";
+
+export interface NSATableUIProps<RowType>
+{
+	getRowAttributes?: (row_value: RowType, row_index: number, res: { rows: RowType[]; count: number; } | null) => { [key: string]: any };
+	getColumnAttributes?: (column: TableColumnInfo) => { [key: string]: any };
+	getCellFormattedValue?: (value: any, column: TableColumnInfo, row: TableRowInfo<RowType>) => any;
+	search_box?: {
+		exclude?: {
+			show?: {
+				table?: (table: string) => boolean;
+				column?: (table: string, column: string) => boolean;
+			},
+			load_value?: (table: string, column: string) => boolean;
+		}
+	};
+}
+
+export interface NSATableProps<RowType extends { id: string }, RowTypeInput = RowType> extends IBaseComponentProps
+{
+	entity: IEntityInfo<RowType, RowTypeInput>;
+	ctf: {
+		enabled: boolean;
+		fields: FieldRow[] | null;
+		categories: CategoryRow[] | null;
+	};
+	url: { getQuery(name: string, base64?: boolean, remove?: boolean): string };
+	ui?: NSATableUIProps<RowType>;
+	checkbox?: boolean;
+	buttons?: NSButtonProps[];
+	onSelectionChanged?: () => void;
+}
+
+interface NSATableState<RowType>
+{
+	res: { rows: RowType[]; count: number; } | null;
+	sorts: SortItem[];
+	visible_column_keys: string[];
+	quick_filter_configs: QuickFilterConfig[];
+	show_sort_dialog: boolean;
+	show_reorder_dialog: boolean;
+	show_quick_filter_dialog: boolean;
+	filter_revision: number;
+}
+
+export class NSATable<RowType extends { id: string }, RowTypeInput = RowType>
+	extends Component<NSATableProps<RowType, RowTypeInput>, NSATableState<RowType>>
+{
+	public NSTable_Main = createRef<NSTable<RowType>>();
+	public NSFilterBox_Top = createRef<NSFilterBox>();
+	public NSAQuickFilterBar_Ref = createRef<NSAQuickFilterBar>();
+
+	constructor(props: NSATableProps<RowType, RowTypeInput>)
+	{
+		super(props);
+		this.state = {
+			res: null,
+			sorts: [],
+			visible_column_keys: [],
+			quick_filter_configs: [],
+			show_sort_dialog: false,
+			show_reorder_dialog: false,
+			show_quick_filter_dialog: false,
+			filter_revision: 0,
+		};
+	}
+
+	override componentDidMount()
+	{
+		const visible = this.NSTable_Main.current?.getVisibleColumns() ?? [];
+		if (visible.length > 0)
+			this.setState({ visible_column_keys: visible.map(v => v.table + "." + v.column) });
+
+		let quick_filter_configs = NSACacheService.loadQuickFilters(this.props.entity.name);
+		if (quick_filter_configs.length === 0)
+			quick_filter_configs = this.buildDefaultQuickFilters();
+		// Re-render so the filter chips reflect any incoming filter items.
+		this.setState(prev => ({ quick_filter_configs, filter_revision: prev.filter_revision + 1 }));
+	}
+
+	private getColumns(): TableColumnInfo[]
+	{
+		let columns = Object.values(this.props.entity.client.getColumns()).flat();
+		columns.forEach(col =>
+		{
+			col.text = NamingConvention.auto.convert(col.text, NamingConvention.Pascal_Case_Space);
+		});
+		return columns;
+	}
+
+	private buildDefaultQuickFilters(): QuickFilterConfig[]
+	{
+		const getDefaults = this.props.entity.client.getQuickFilters;
+		if (!getDefaults)
+			return [];
+
+		const columns = this.getColumns();
+		const ans: QuickFilterConfig[] = [];
+		for (const def of getDefaults())
+		{
+			const col = columns.find(c => c.name === def.column);
+			if (!col)
+				continue;
+			const columnType = new ObjectService(col.type).getEnum(VariableType, VariableType.Any);
+			ans.push({
+				id: `default-${col.table.name}-${col.name}`,
+				column: {
+					table: { name: col.table.name, text: col.table.text },
+					name: col.name,
+					text: col.text,
+					type: col.type,
+					columnType,
+				},
+				operatorName: (def as { operator?: string }).operator,
+			});
+		}
+		return ans;
+	}
+
+	private filterItemTypeConverter(type: string): FilterItemColumnType
+	{
+		let t = new ObjectService(type).getEnum(VariableType, VariableType.Any);
+		let builder = new FilterItemColumnTypeBuilder(t);
+		return builder.runSynch(() => { }) ?? FilterItemColumnType.Unknown;
+	}
+
+	private getIncomingFilterItems(): FilterItem[] | undefined
+	{
+		try
+		{
+			let encoded = this.props.url.getQuery("filters");
+			if (encoded)
+				return FilterItem.decode(encoded) ?? undefined;
+		} catch (error)
+		{
+		}
+		return undefined;
+	}
+
+	public reload(page: number | null, size: number | null): Promise<void> | undefined
+	{
+		return this.NSTable_Main.current?.reload(page, size);
+	}
+	public getSelectedIDs(): string[]
+	{
+		return this.NSTable_Main.current?.getSelectedIDs() ?? [];
+	}
+	public getSelectedRows(): RowType[]
+	{
+		return this.NSTable_Main.current?.getSelectedRows() ?? [];
+	}
+	public setSelectedIDs(ids: string[], rows: RowType[], callback?: () => void)
+	{
+		this.NSTable_Main.current?.setSelectedIDs(ids, rows, callback);
+	}
+	public getSortItems(): SortItem[]
+	{
+		return this.NSTable_Main.current?.getSortItems() ?? [];
+	}
+	public setSortItems(items: SortItem[] | null)
+	{
+		this.NSTable_Main.current?.setSortItems(items);
+	}
+	public getVisibleColumns(): { table: string, column: string }[]
+	{
+		return this.NSTable_Main.current?.getVisibleColumns() ?? [];
+	}
+	public setVisibleColumns(visible_columns: { table: string, column: string }[])
+	{
+		this.NSTable_Main.current?.setVisibleColumns(visible_columns);
+	}
+	public getFilterBoxItems(): FilterItem[]
+	{
+		return this.NSFilterBox_Top.current?.getFilterItems() ?? [];
+	}
+	public getQuickFilterItems(): FilterItem[]
+	{
+		return this.NSAQuickFilterBar_Ref.current?.getFilterItems() ?? [];
+	}
+	public getFilterItems(): FilterItem[]
+	{
+		return [...this.getFilterBoxItems(), ...this.getQuickFilterItems()];
+	}
+
+	private reloadFromFilters()
+	{
+		this.NSTable_Main.current?.setSelectedIDs([], []);
+		this.NSTable_Main.current?.reload(null, null);
+	}
+
+	private onFilterBoxChanged = () =>
+	{
+		this.reloadFromFilters();
+		this.setState(prev => ({ filter_revision: prev.filter_revision + 1 }));
+	};
+
+	private buildButtons(): NSButtonProps[]
+	{
+		const buttons: NSButtonProps[] = [
+			{
+				title: "",
+				icon: { src: "https://static.namirasoft.com/image/concept/grip-vertical/blue.svg", alt: "reorder" },
+				attributes: { title: "Reorder" },
+				onClick: {
+					action: () => this.setState({ show_reorder_dialog: true, visible_column_keys: this.getVisibleColumns().map(c => c.table + "." + c.column) }),
+					showLoading: false,
+				},
+			},
+			{
+				title: "",
+				icon: { src: "https://static.namirasoft.com/image/concept/arrow-down-short-wide/blue.svg", alt: "sort" },
+				attributes: { title: "Sort" },
+				onClick: {
+					action: () => this.setState({ show_sort_dialog: true, sorts: this.getSortItems() }),
+					showLoading: false,
+				},
+			},
+			{
+				title: "",
+				icon: { src: "https://static.namirasoft.com/image/concept/sliders/blue.svg", alt: "filter" },
+				attributes: { title: "Quick Filters" },
+				onClick: {
+					action: () => this.setState({ show_quick_filter_dialog: true }),
+					showLoading: false,
+				},
+			},
+		];
+		return [...buttons, ...(this.props.buttons ?? [])];
+	}
+
+	private renderFilterHeader(): ReactNode
+	{
+		return (
+			<NSFilterBox
+				ref={this.NSFilterBox_Top}
+				filterItems={this.getIncomingFilterItems()}
+				getTables={() =>
+				{
+					return this.props.entity.tables.map(table =>
+					{
+						let columns = table.table.getColumns().map(c => ({ id: c.name, ...c, type: this.filterItemTypeConverter(c.type) }));
+						columns = columns.filter(c =>
+						{
+							if (this.props.ui?.search_box?.exclude?.show?.column)
+								if (this.props.ui?.search_box?.exclude.show?.column(table.table.name, c.name))
+									return false;
+							return true;
+						});
+						return { name: table.table.name, text: table.table.text, columns, required: table.required };
+					}).filter(t =>
+					{
+						if (this.props.ui?.search_box?.exclude?.show?.table)
+							if (this.props.ui?.search_box?.exclude.show.table(t.name))
+								return false;
+						return true;
+					});
+				}}
+				getMoreTables={async () =>
+				{
+					let ans: NSFilterBoxProps_Table[] = [];
+					if (this.props.ctf.enabled)
+						try
+						{
+							if (this.props.ctf.fields)
+								if (this.props.ctf.fields.length > 0)
+								{
+									let name = this.props.entity.name + "_field";
+									ans.push({
+										name,
+										text: "Fields",
+										columns: [{
+											id: "field_id",
+											name: "field_id",
+											text: "ID",
+											type: FilterItemColumnType.Unknown,
+											getValues: async (search) =>
+											{
+												return this.props.ctf.fields?.filter(c => SearchOperation.match(c.id, search)).map(c => { return { value: c.id, title: c.id } }) ?? [];
+											}
+										}, {
+											id: "field_name",
+											name: "field_id",
+											text: "Name",
+											type: FilterItemColumnType.Unknown,
+											getValues: async (search) =>
+											{
+												return this.props.ctf.fields?.filter(c => SearchOperation.match(c.name, search)).map(c => { return { value: c.id, title: c.name } }) ?? [];
+											}
+										}, {
+											id: "field_value",
+											name: "value",
+											text: "Value",
+											type: FilterItemColumnType.Unknown
+										},
+										...this.props.ctf.fields.map(f =>
+										{
+											return {
+												id: f.id,
+												name: f.id,
+												text: f.name,
+												type: this.filterItemTypeConverter(f.type.type.type),
+												getValues: async (search: string) =>
+												{
+													let values = await this.props.entity.server.value_list(name, "value", search, f.id, null);
+													return values.map(v => { return { value: v, title: v } });
+												}
+											};
+										}),],
+										required: false
+									});
+								}
+
+							if (this.props.ctf.categories)
+								if (this.props.ctf.categories.length > 0)
+									ans.push({
+										name: this.props.entity.name + "_category",
+										text: "Categories",
+										columns: [{
+											id: "category_id",
+											name: "category_id",
+											text: "ID",
+											type: FilterItemColumnType.Unknown,
+											getValues: async (search) =>
+											{
+												return this.props.ctf.categories?.filter(c => SearchOperation.match(c.id, search)).map(c => { return { value: c.id, title: c.id } }) ?? [];
+											}
+										}, {
+											id: "category_name",
+											name: "category_id",
+											text: "Name",
+											type: FilterItemColumnType.Unknown,
+											getValues: async (search) =>
+											{
+												return this.props.ctf.categories?.filter(c => SearchOperation.match(c.name, search)).map(c => { return { value: c.id, title: c.name } }) ?? [];
+											}
+										}],
+										required: false
+									});
+
+						} catch (error)
+						{
+						}
+					// todo add tags
+					return ans;
+				}}
+				getValues={async (table, column, value) =>
+				{
+					if (this.props.ui?.search_box?.exclude?.load_value)
+						if (this.props.ui?.search_box?.exclude?.load_value(table.name, column.name))
+							return [];
+					let values = await this.props.entity.server.value_list(table.name, column.name, value, null, null);
+					return values.map(v => { return { value: v, title: v } });
+				}}
+				onChanged={this.onFilterBoxChanged}
+			/>
+		);
+	}
+
+	private getOrderedColumns(): TableColumnInfo[]
+	{
+		const all = this.getColumns();
+		const vk = this.state.visible_column_keys;
+		if (vk.length === 0)
+			return all;
+		const ordered = vk.map(k => all.find(c => c.table.name + "." + c.name === k)).filter((c): c is TableColumnInfo => !!c);
+		const rest = all.filter(c => !vk.includes(c.table.name + "." + c.name));
+		return [...ordered, ...rest];
+	}
+
+	override render(): ReactNode
+	{
+		const filterBoxItems = this.NSFilterBox_Top.current?.getFilterItems() ?? [];
+		const filterChips = filterBoxItems.length > 0 && (
+			<NSFilterBoxItems
+				filterItems={filterBoxItems}
+				onClearFilterItems={() => this.NSFilterBox_Top.current?.setFilterItems([])}
+				onRemoveFilterItem={(item) => this.NSFilterBox_Top.current?.removeFilterItem(item)}
+			/>
+		);
+
+		const quickFilterBar = this.state.quick_filter_configs.length > 0 && (
+			<NSAQuickFilterBar
+				key={this.state.quick_filter_configs.map(c => c.id).join("-")}
+				ref={this.NSAQuickFilterBar_Ref}
+				configs={this.state.quick_filter_configs}
+				getValues={async (tableName, columnName, search) =>
+				{
+					const values = await this.props.entity.server.value_list(tableName, columnName, search, null, null);
+					const col = this.getColumns().find(c => c.table.name === tableName && c.name === columnName);
+					return values.map(v =>
+					{
+						const formatted = col ? col.formatter.format(v, col, { value: {} } as any, true) : null;
+						return { value: v, title: formatted != null ? String(formatted) : v };
+					});
+				}}
+				onChanged={() => this.reloadFromFilters()}
+			/>
+		);
+
+		return (
+			<>
+				<NSTable<RowType>
+					id={this.props.id}
+					classList={this.props.classList}
+					style={this.props.style}
+					ref={this.NSTable_Main}
+					name={NamingConvention.lower_case_dash.convert(this.props.entity.name, NamingConvention.Pascal_Case_Space)}
+					checkbox={this.props.checkbox ?? true}
+					headerChildren={this.renderFilterHeader()}
+					buttons={this.buildButtons()}
+					columns={this.getOrderedColumns()}
+					getRows={async (page, size, sorts) =>
+					{
+						let res: { rows: RowType[], count: number } = { rows: [], count: 0 };
+						if (this.props.entity.server.list)
+							res = await this.props.entity.server.list(this.getFilterItems(), page, size, sorts, null);
+						this.setState({ res });
+						return res;
+					}}
+					getRowKey={(row) => row.value.id.toString()}
+					getRowAttributes={(row_value, row_index) => this.props.ui?.getRowAttributes?.(row_value, row_index, this.state.res) ?? {}}
+					getColumnAttributes={this.props.ui?.getColumnAttributes}
+					getCellFormattedValue={this.props.ui?.getCellFormattedValue}
+					onVisibleColumnsChanged={(visible_columns) => this.setState({ visible_column_keys: visible_columns.map(c => c.table + "." + c.column) })}
+					onSelectedIDsChanged={() => this.props.onSelectionChanged?.()}
+				>
+					{filterChips}
+					{quickFilterBar}
+				</NSTable>
+				{
+					this.state.show_sort_dialog &&
+					<NSASortDialog
+						sorts={this.state.sorts}
+						getColumns={() => this.getColumns()}
+						onCancel={() => this.setState({ show_sort_dialog: false })}
+						onApply={sorts =>
+						{
+							this.setSortItems(sorts);
+							this.setState({ show_sort_dialog: false, sorts: sorts ?? [] });
+						}}
+					/>
+				}
+				{
+					this.state.show_reorder_dialog &&
+					<NSAReorderDialog
+						visibleColumnKeys={this.state.visible_column_keys}
+						getColumns={() => this.getColumns()}
+						onCancel={() => this.setState({ show_reorder_dialog: false })}
+						onApply={orderedKeys =>
+						{
+							const cs_all = this.getColumns();
+							const cs = orderedKeys.map((v: string) => cs_all.find((c: TableColumnInfo) => v === c.table.name + "." + c.name)).filter(Boolean) as TableColumnInfo[];
+							this.setVisibleColumns(cs.map(c => ({ table: c.table.name, column: c.name })));
+							this.setState({ show_reorder_dialog: false, visible_column_keys: orderedKeys });
+						}}
+					/>
+				}
+				{
+					this.state.show_quick_filter_dialog &&
+					<NSAQuickFilterDialog
+						configs={this.state.quick_filter_configs}
+						getColumns={() => this.getColumns()}
+						typeConverter={(type: string) => new ObjectService(type).getEnum(VariableType, VariableType.Any)}
+						onSave={configs =>
+						{
+							NSACacheService.saveQuickFilters(this.props.entity.name, configs);
+							this.setState({ quick_filter_configs: configs }, () => this.reloadFromFilters());
+						}}
+						onConfirm={configs =>
+						{
+							NSACacheService.saveQuickFilters(this.props.entity.name, configs);
+							this.setState({ quick_filter_configs: configs, show_quick_filter_dialog: false }, () => this.reloadFromFilters());
+						}}
+						onClose={() => this.setState({ show_quick_filter_dialog: false })}
+					/>
+				}
+			</>
+		);
+	}
+}

package/src/layouts/NSASectionList.module.css

@@ -1,22 +1,19 @@
-.nsa_section_list_items {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    gap: 16px;
-    width: 100%;
+.nsa_section_list_btn {
+    width: 48px;
+    border: 1px solid #a0a0a0;
 }
 
-@media screen and (min-width: 1024px) {
+.nsa_section_list_btn img {
+    width: 24px;
+    height: 24px;
+}
 
-    .nsa_section_list_items {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        justify-content: end;
-        align-items: center;
-        flex: 1;
-        width: unset;
-    }
+.nsa_section_list_actions {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
 }