@oscarpalmer/tabela 0.11.0 → 0.13.0

package/src/managers/data.manager.ts

@@ -1,9 +1,15 @@
-import {push, sort} from '@oscarpalmer/atoms/array';
+import {chunk, select, sort} from '@oscarpalmer/atoms/array';
 import {toMap} from '@oscarpalmer/atoms/array/to-map';
+import {toRecord} from '@oscarpalmer/atoms/array/to-record';
 import {isPlainObject} from '@oscarpalmer/atoms/is';
 import type {Key, PlainObject} from '@oscarpalmer/atoms/models';
-import type {DataValues} from '../models/data.model';
-import type {TabelaData, TabelaState} from '../models/tabela.model';
+import {delay} from '@oscarpalmer/atoms/promise/delay';
+import {getValue} from '@oscarpalmer/atoms/value/handle';
+import {GroupComponent, updateGroup} from '../components/group.component';
+import type {DataItem, DataState, TabelaData} from '../models/data.model';
+import type {State} from '../models/tabela.model';
+import {sortWithGroups} from './sort.manager';
+import type {ColumnComponent} from '../components/column.component';
 
 export class DataManager {
 	handlers = Object.freeze({
@@ -15,127 +21,322 @@ export class DataManager {
 		update: data => void this.update(data),
 	} satisfies TabelaData);
 
-	values: DataValues = {
-		keys: {
-			original: [],
-		},
-		objects: {
-			mapped: new Map(),
-			array: [],
-		},
-	};
+	state: DataState;
+
+	get items(): DataItem[] {
+		return this.state.items.active ?? this.state.items.original;
+	}
 
 	get size(): number {
-		return this.values.keys.active?.length ?? this.values.keys.original.length;
+		return this.items.length;
 	}
 
-	constructor(public state: TabelaState) {}
+	constructor(state: State) {
+		this.state = {
+			...state,
+			items: {
+				original: [],
+			},
+			values: {
+				array: [],
+				mapped: new Map(),
+			},
+		};
+	}
 
 	async add(data: PlainObject[], render: boolean): Promise<void> {
-		const {state, values} = this;
+		const {state} = this;
 
-		push(values.objects.array, data);
+		const groups: GroupComponent[] = [];
+		const updates: PlainObject[] = [];
 
-		values.objects.mapped = toMap(values.objects.array, state.key) as Map<Key, PlainObject>;
+		let groupColumn: ColumnComponent | undefined;
+		let {length} = data;
 
-		if (render) {
+		for (let index = 0; index < length; index += 1) {
+			const item = data[index];
+			const key = getValue(item, state.key) as Key;
+
+			if (state.values.mapped.has(key)) {
+				updates.push(item);
+
+				continue;
+			}
+
+			state.values.array.push(item);
+			state.values.mapped.set(key, item);
+
+			if (!state.managers.group.enabled) {
+				continue;
+			}
+
+			const groupValue = getValue(item, state.managers.group.field) as unknown;
+
+			let group = state.managers.group.get(groupValue);
+
+			if (group == null) {
+				groupColumn ??= state.managers.column.get(state.managers.group.field);
+
+				group = new GroupComponent(
+					`${groupColumn?.options.title ?? state.managers.group.field}: ${groupValue}`,
+					groupValue,
+				);
+
+				state.values.array.push(group);
+				state.managers.group.add(group);
+			}
+
+			if (!group.expanded) {
+				state.managers.group.collapsed.add(key);
+			}
+
+			group.total += 1;
+
+			groups.push(group);
+		}
+
+		length = groups.length;
+
+		for (let index = 0; index < length; index += 1) {
+			updateGroup(state, groups[index]);
+		}
+
+		if (updates.length > 0) {
+			void this.update(updates);
+		} else if (render) {
 			this.render();
 		}
 	}
 
 	clear(): void {
-		if (this.values.objects.array.length > 0) {
-			this.set([]);
+		if (this.state.values.array.length > 0) {
+			void this.removeItems([], true, true);
 		}
 	}
 
 	destroy(): void {
-		const {values} = this;
+		const {state} = this;
 
-		values.objects.mapped.clear();
+		state.values.mapped.clear();
 
-		values.keys.active = undefined;
-		values.keys.original.length = 0;
-		values.objects.array.length = 0;
+		state.items.active = undefined;
+		state.items.original.length = 0;
+		state.values.array.length = 0;
 
 		this.handlers = undefined as never;
 		this.state = undefined as never;
-		this.values = undefined as never;
 	}
 
 	get(active?: boolean): PlainObject[] {
-		const {values} = this;
+		const {state} = this;
 
 		return (active ?? false)
-			? (values.keys.active?.map(key => values.objects.mapped.get(key) as PlainObject) ?? [])
-			: values.objects.array;
+			? select(
+					state.items.active ?? [],
+					key => !(key instanceof GroupComponent),
+					key => state.values.mapped.get(key as Key)!,
+				)
+			: (state.values.array.filter(item => !(item instanceof GroupComponent)) as PlainObject[]);
 	}
 
-	getIndex(key: Key): number {
-		const {values} = this;
+	getIndex(item: DataItem): number {
+		if (item instanceof GroupComponent) {
+			return this.items.indexOf(item);
+		}
 
-		return (values.keys.active ?? values.keys.original).indexOf(key);
+		return this.items.findIndex(value =>
+			value instanceof GroupComponent ? value.key === item : value === item,
+		);
 	}
 
 	async remove(items: Array<Key | PlainObject>, render: boolean): Promise<void> {
-		const {state, values} = this;
+		const {state} = this;
 
-		const keys = items
-			.map(value => (isPlainObject(value) ? value[state.key] : value) as Key)
-			.filter(key => values.objects.mapped.has(key)) as Key[];
+		const keys = items.map(
+			value => (isPlainObject(value) ? getValue(value, state.key) : value) as Key,
+		);
 
 		const {length} = keys;
 
-		if (length === 0) {
-			return;
+		if (length > 0) {
+			return this.removeItems(keys, false, render === true);
 		}
+	}
+
+	async removeItems(items: DataItem[], clear: boolean, render: boolean): Promise<void> {
+		const {state} = this;
 
-		for (let keyIndex = 0; keyIndex < length; keyIndex += 1) {
-			const key = keys[keyIndex];
+		if (clear) {
+			state.items.active = undefined;
+			state.items.original = [];
+			state.values.array = [];
 
-			values.objects.mapped.delete(key);
+			state.values.mapped.clear();
 
-			const arrayIndex = values.objects.array.findIndex(object => object[state.key] === key);
+			state.managers.row.clear();
 
-			if (arrayIndex > -1) {
-				values.objects.array.splice(arrayIndex, 1);
+			if (state.managers.group.enabled) {
+				state.managers.group.clear();
 			}
 
-			values.keys.original.splice(values.keys.original.indexOf(key), 1);
+			return this.render();
+		}
+
+		const groups: GroupComponent[] = [];
+
+		const chunked = chunk(items);
+		const chunkedLength = chunked.length;
+
+		for (let chunkedIndex = 0; chunkedIndex < chunkedLength; chunkedIndex += 1) {
+			const chunk = chunked[chunkedIndex];
+			const chunkLength = chunk.length;
+
+			for (let itemIndex = 0; itemIndex < chunkLength; itemIndex += 1) {
+				const item = chunk[itemIndex];
+				const dataIndex = state.items.original.indexOf(item);
+
+				let dataValue: PlainObject | undefined;
+
+				[dataValue] = state.values.array.splice(dataIndex, 1) as PlainObject[];
 
-			state.managers.row.remove(key);
+				state.items.original.splice(dataIndex, 1);
+				state.managers.row.remove(item as never);
+				state.values.mapped.delete(item as Key);
+
+				if (!state.managers.group.enabled || item instanceof GroupComponent) {
+					continue;
+				}
+
+				state.managers.group.collapsed.delete(item as never);
+
+				const groupKey = getValue(dataValue, state.managers.group.field) as unknown;
+
+				const group = state.managers.group.get(groupKey);
+
+				if (group == null) {
+					continue;
+				}
+
+				group.total -= 1;
+
+				if (group.total > 0) {
+					groups.push(group);
+
+					continue;
+				}
+
+				let groupIndex = groups.indexOf(group);
+
+				if (groupIndex > -1) {
+					groups.splice(groupIndex, 1);
+				}
+
+				groupIndex = state.values.array.indexOf(group);
+
+				if (groupIndex > -1) {
+					state.items.original.splice(groupIndex, 1);
+					state.values.array.splice(groupIndex, 1);
+				}
+
+				state.managers.group.remove(group);
+
+				if (items.length >= 10_000) {
+					await delay(25);
+				}
+			}
+		}
+
+		const {length} = groups;
+
+		for (let index = 0; index < length; index += 1) {
+			updateGroup(state, groups[index]);
 		}
 
 		if (render) {
-			this.render();
+			return this.render();
 		}
 	}
 
 	render(): void {
-		const {state, values} = this;
+		const {state} = this;
+
+		if (state.managers.group.enabled) {
+			sortWithGroups(state, state.values.array, [
+				{
+					direction: 'ascending',
+					key: state.key,
+				},
+			]);
+		} else {
+			sort(state.values.array as PlainObject[], [
+				{
+					direction: 'ascending',
+					key: state.key,
+				},
+			]);
+		}
 
-		values.keys.original = sort(values.objects.array.map(item => item[state.key] as Key));
+		state.items.original = state.values.array.map(item =>
+			item instanceof GroupComponent ? item : (getValue(item, state.key) as Key),
+		);
+
+		state.values.mapped = toMap(
+			state.values.array.filter(item => !(item instanceof GroupComponent)) as PlainObject[],
+			item => getValue(item, state.key) as Key,
+		);
 
 		if (Object.keys(state.managers.filter.items).length > 0) {
 			state.managers.filter.filter();
 		} else if (state.managers.sort.items.length > 0) {
 			state.managers.sort.sort();
 		} else {
-			state.managers.render.update(true);
+			state.managers.render.update(true, true);
 		}
 	}
 
 	set(data: PlainObject[]): void {
-		const {state, values} = this;
+		const {state} = this;
+
+		const array: Array<GroupComponent | PlainObject> = data.slice();
+
+		if (state.managers.group.enabled) {
+			const column = state.managers.column.get(state.managers.group.field);
+
+			const grouped = toRecord.arrays(data, state.managers.group.field) as Record<
+				string,
+				PlainObject[]
+			>;
+
+			const entries = Object.entries(grouped);
+			const {length} = entries;
+
+			const groups: GroupComponent[] = [];
 
-		values.objects.mapped = toMap(data, state.key) as Map<Key, PlainObject>;
-		values.objects.array = data;
+			for (let index = 0; index < length; index += 1) {
+				const [value, items] = entries[index];
+
+				const group = new GroupComponent(
+					`${column?.options.title ?? state.managers.group.field}: ${value}`,
+					value,
+				);
+
+				group.total = items.length;
+
+				groups.push(group);
+
+				array.push(group);
+			}
+
+			state.managers.group.set(groups);
+		}
+
+		state.values.array = array;
 
 		this.render();
 	}
 
 	async synchronize(data: PlainObject[], remove?: boolean): Promise<void> {
-		const {state, values} = this;
+		const {state} = this;
 
 		const add: PlainObject[] = [];
 		const updated: PlainObject[] = [];
@@ -146,9 +347,9 @@ export class DataManager {
 
 		for (let index = 0; index < length; index += 1) {
 			const object = data[index];
-			const key = object[state.key] as Key;
+			const key = getValue(object, state.key) as Key;
 
-			if (values.objects.mapped.has(key)) {
+			if (state.values.mapped.has(key)) {
 				updated.push(object);
 			} else {
 				add.push(object);
@@ -162,7 +363,9 @@ export class DataManager {
 		}
 
 		if (remove ?? false) {
-			const toRemove = values.keys.original.filter(key => !keys.has(key));
+			const toRemove = state.items.original.filter(
+				key => !(key instanceof GroupComponent) && !keys.has(key),
+			) as Key[];
 
 			if (toRemove.length > 0) {
 				await this.remove(toRemove, false);
@@ -181,17 +384,18 @@ export class DataManager {
 	}
 
 	async update(data: PlainObject[]): Promise<void> {
-		const {state, values} = this;
+		const {state} = this;
 
 		const {length} = data;
 
 		for (let index = 0; index < length; index += 1) {
 			const object = data[index];
-			const key = object[state.key] as Key;
-			const value = values.objects.mapped.get(key);
+
+			const key = getValue(object, state.key) as Key;
+			const value = state.values.mapped.get(key);
 
 			if (value != null) {
-				values.objects.mapped.set(key, {...value, ...object} as PlainObject);
+				state.values.mapped.set(key, {...value, ...object} as PlainObject);
 
 				state.managers.row.update(key);
 			}

package/src/managers/event.manager.ts

@@ -1,9 +1,9 @@
 import {on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
-import type {TabelaState} from '../models/tabela.model';
+import type {State} from '../models/tabela.model';
 
 export class EventManager {
-	constructor(public state: TabelaState) {
+	constructor(public state: State) {
 		mapped.set(state.element, this);
 	}
 
@@ -25,7 +25,7 @@ export class EventManager {
 
 function onClick(event: MouseEvent): void {
 	const target = findAncestor(event, '[data-event]');
-	const table = findAncestor(event, '.tabela');
+	const table = findAncestor(event, '.tabela__table');
 
 	if (!(target instanceof HTMLElement) || !(table instanceof HTMLElement)) {
 		return;
@@ -40,6 +40,10 @@ function onClick(event: MouseEvent): void {
 	const type = target?.getAttribute('data-event');
 
 	switch (type) {
+		case 'group':
+			manager.state.managers.group.handle(target);
+			break;
+
 		case 'heading':
 			manager.onSort(event, target);
 			break;
@@ -55,7 +59,7 @@ function onClick(event: MouseEvent): void {
 
 function onKeydown(event: KeyboardEvent): void {
 	const target = findAncestor(event, '[data-event]');
-	const table = findAncestor(event, '.tabela');
+	const table = findAncestor(event, '.tabela__table');
 
 	if (!(target instanceof HTMLElement) || !(table instanceof HTMLElement)) {
 		return;
@@ -67,16 +71,15 @@ function onKeydown(event: KeyboardEvent): void {
 		return;
 	}
 
-	const type = target?.getAttribute('data-event');
+	if (event.key === ' ') {
+		event.preventDefault();
 
-	switch (type) {
-		case 'body':
-			manager.state.managers.navigation.handle(event);
-			break;
+		// TODO: it's on the way
 
-		default:
-			break;
+		return;
 	}
+
+	manager.state.managers.navigation.handle(event);
 }
 
 const mapped = new WeakMap<HTMLElement, EventManager>();

package/src/managers/filter.manager.ts

@@ -1,10 +1,11 @@
-import type {Key} from '@oscarpalmer/atoms/models';
 import {getNumber} from '@oscarpalmer/atoms/number';
 import {getString} from '@oscarpalmer/atoms/string';
 import {endsWith, includes, startsWith} from '@oscarpalmer/atoms/string/match';
 import {equal} from '@oscarpalmer/atoms/value/equal';
-import type {FilterComparison, FilterItem} from '../models/filter.model';
-import type {TabelaFilter, TabelaState} from '../models/tabela.model';
+import {GroupComponent} from '../components/group.component';
+import type {DataItem} from '../models/data.model';
+import type {TabelaFilter, TabelaFilterComparison, TabelaFilterItem} from '../models/filter.model';
+import type {State} from '../models/tabela.model';
 
 export class FilterManager {
 	handlers = Object.freeze({
@@ -14,17 +15,17 @@ export class FilterManager {
 		set: items => this.set(items),
 	} satisfies TabelaFilter);
 
-	items: Record<string, FilterItem[]> = {};
+	items: Record<string, TabelaFilterItem[]> = {};
 
-	constructor(public state: TabelaState) {}
+	constructor(public state: State) {}
 
-	add(item: FilterItem): void {
+	add(item: TabelaFilterItem): void {
 		if (this.items[item.field] == null) {
 			this.items[item.field] = [];
 		} else {
 			const index = this.items[item.field].findIndex(existing => equal(existing, item));
 
-			if (index !== -1) {
+			if (index > -1) {
 				return;
 			}
 		}
@@ -51,14 +52,21 @@ export class FilterManager {
 	filter(): void {
 		const {state} = this;
 
-		const filtered: Key[] = [];
+		const filtered: DataItem[] = [];
 		const filters = Object.entries(this.items);
 
-		const keysLength = state.managers.data.values.keys.original.length;
+		const itemsLength = state.managers.data.state.items.original.length;
 
-		rowLoop: for (let keyIndex = 0; keyIndex < keysLength; keyIndex += 1) {
-			const key = state.managers.data.values.keys.original[keyIndex];
-			const row = state.managers.data.values.objects.mapped.get(key);
+		rowLoop: for (let itemIndex = 0; itemIndex < itemsLength; itemIndex += 1) {
+			const item = state.managers.data.state.items.original[itemIndex];
+
+			if (item instanceof GroupComponent) {
+				filtered.push(item);
+
+				continue;
+			}
+
+			const row = state.managers.data.state.values.mapped.get(item);
 
 			if (row == null) {
 				continue;
@@ -80,10 +88,10 @@ export class FilterManager {
 				continue rowLoop;
 			}
 
-			filtered.push(key);
+			filtered.push(item);
 		}
 
-		state.managers.data.values.keys.active = filtered;
+		state.managers.data.state.items.active = filtered;
 
 		if (state.managers.sort.items.length > 0) {
 			state.managers.sort.sort();
@@ -92,13 +100,24 @@ export class FilterManager {
 		}
 	}
 
-	remove(value: string | FilterItem): void {
+	remove(value: string | TabelaFilterItem): void {
 		if (typeof value === 'string') {
 			if (this.items[value] == null) {
 				return;
 			}
 
-			const keyed: Record<string, FilterItem[]> = {};
+			const keyed: Record<string, TabelaFilterItem[]> = {};
+
+			const filters = Object.keys(this.items);
+			const {length} = filters;
+
+			for (let index = 0; index < length; index += 1) {
+				const field = filters[index];
+
+				if (field !== value) {
+					keyed[field] = this.items[field];
+				}
+			}
 
 			this.items = keyed;
 		} else {
@@ -118,8 +137,8 @@ export class FilterManager {
 		this.filter();
 	}
 
-	set(items: FilterItem[]): void {
-		const keyed: Record<string, FilterItem[]> = {};
+	set(items: TabelaFilterItem[]): void {
+		const keyed: Record<string, TabelaFilterItem[]> = {};
 
 		const {length} = items;
 
@@ -137,7 +156,7 @@ export class FilterManager {
 	}
 }
 
-const comparators: Record<FilterComparison, (row: unknown, filter: unknown) => boolean> = {
+const comparators: Record<TabelaFilterComparison, (row: unknown, filter: unknown) => boolean> = {
 	contains: (row, filter) => includes(getString(row), getString(filter), true),
 	'ends-with': (row, filter) => endsWith(getString(row), getString(filter), true),
 	equals: (row, filter) => equalizer(row, filter),