@kris701/ez-ui 0.0.8 → 0.0.10

package/src/components/floattable/floattable.ts

@@ -1,309 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, ContentChild, EventEmitter, Input, OnChanges, Output, signal, SimpleChanges, TemplateRef, ViewChild } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { TuiTable, TuiTablePagination } from '@taiga-ui/addon-table';
-import { TuiButton, TuiDropdown, TuiHint, TuiIcon, TuiInput, TuiLoader, TuiScrollbar } from "@taiga-ui/core";
-import { TuiChevron, TuiDataListWrapper } from '@taiga-ui/kit';
-import { TuiBlockStatus } from '@taiga-ui/layout';
-import { FloatTablePresets } from './floattable.presets';
-import { FloatTableFilter } from './models/FloatTableFilter';
-import { FloatTableSort } from './models/FloatTableSort';
-import { FloatTableSortFilterPreset } from './models/FloatTableSortFilterPreset';
-import { FloatTableFilterService } from './services/floattable.filterservice';
-
-@Component({
-    selector: 'app-floattable',
-    imports: [FormsModule, CommonModule, TuiTable, TuiScrollbar, TuiButton, TuiChevron, TuiDropdown, TuiDataListWrapper, TuiTablePagination, TuiLoader, TuiBlockStatus, TuiIcon, TuiInput, FloatTablePresets, TuiHint],
-    template: `
-		<div class="app-floattable">
-			<tui-loader [inheritColor]="true" [overlay]="true" size="xxl" [loading]="isLoading()">
-				@if(values.length == 0){
-					<tui-block-status>
-						<tui-icon tuiSlot="top" icon="grid-2x2-x" />
-
-						<h3>No Data</h3>
-
-						No data to display.
-					</tui-block-status>
-				}
-				@else {
-					@if(showAdd || showRefresh || showClearFilters){
-						<div class="flex flex-row gap-2 p-2" style="padding-bottom:0px">
-							@if(showRefresh){
-								<button tuiButton iconStart="rotate-cw" size="s" appearance="info" (click)="onLoadItems.emit()" tuiHint="Refresh the table"></button>
-							}
-							@if(showAdd){
-								<button tuiButton iconStart="plus" size="s" appearance="info" (click)="onAddItem.emit()" tuiHint="Add new item"></button>
-							}
-							@if(showClearFilters){
-								<button tuiButton iconStart="funnel-x" size="s" appearance="info" (click)="clearFilters()" tuiHint="Clear filters"></button>
-							}
-						</div>
-					}
-					@if(allowPresets){
-						<app-floattable-presets #presetHeader [storageKey]="storageKey" (onPresetChange)="onPresetChange.emit($event)">
-						</app-floattable-presets>
-					}
-					<tui-scrollbar class="w-full h-full">
-						<table tuiTable class="w-full h-full">
-							<thead>
-								<tr>
-									@if(expandable){
-										<th tuiTh></th>
-									}
-									<ng-container [ngTemplateOutlet]="tableHeader"></ng-container>
-								</tr>
-							</thead>
-							@for (item of displayValues(); track page() * pageSize() + i; let i = $index){
-								@let fullIndex = page() * pageSize() + i;
-								<tbody tuiTbody>
-									<tr>
-										@if(expandable){
-											<td tuiTd class="app-floattable-expander">
-												<button
-													appearance="flat-grayscale"
-													size="xs"
-													tuiIconButton
-													type="button"
-													[tuiChevron]="state[fullIndex] ?? false"
-													(click)="state[fullIndex] = !state[fullIndex];onRowExpanded.emit(item)"
-												>
-													Toggle
-												</button>
-											</td>
-										}
-										<ng-container [ngTemplateOutlet]="tableRows" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
-									</tr>
-								</tbody>
-
-								<tbody tuiTableExpand [expanded]="state[fullIndex] ?? false">
-									@if(state[fullIndex] ?? false){
-										<tr>
-											<ng-container [ngTemplateOutlet]="tableExpandedrow" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
-										</tr>
-									}
-								</tbody>
-							}
-						</table>
-					</tui-scrollbar>
-					<div class="app-floattable-footer">
-						<tui-table-pagination
-								[(size)]="pageSize"
-								[(page)]="page"
-								[total]="internalValues.length"
-								[items]="pageSizes"
-								(pageChange)="processPage()"
-								(sizeChange)="processPage()"
-							/>
-					</div>
-				}
-			</tui-loader>
-		</div>
-    `,
-    host: {
-		class:'w-full h-full'
-    },
-    styles: `
-		.app-floattable {
-			border: 2px solid var(--tui-border-normal);
-			border-radius: var(--tui-radius-l);
-			display:flex;
-			height:100%;
-			width:100%;
-			overflow:hidden;
-
-			::ng-deep tui-loader {
-				display:flex;
-				height:100%;
-				width:100%;
-				flex-direction: column;
-
-				> .t-content {
-					display:flex;
-					height:100%;
-					width:100%;
-					flex-direction: column;
-					gap:0.5rem;
-					overflow-x:auto;
-				}
-
-				> .t-loader {
-					position:absolute;
-					width:100%;
-					height:100%;
-				}
-			}
-
-			::ng-deep tui-scrollbar {
-				> .t-content {
-					display:flex;
-					gap:10px;
-					width:0px;
-				}
-			}
-
-			.app-floattable-footer {
-				display:flex;
-				margin-bottom:0.5rem;
-				padding-left:2rem;
-				padding-right:2rem;
-
-				tui-table-pagination {
-					flex: 1
-				}
-			}
-
-			::ng-deep table {
-				border-radius: var(--tui-radius-l);
-			}
-
-			::ng-deep th {
-				background-color: var(--tui-background-base-alt) !important;
-			}
-
-			::ng-deep .app-floattable-expander {
-				padding:0px;
-
-				button {
-					width:100%;
-					height:100%;
-					border-radius: 0px;
-				}
-			}
-
-			th[tuiTh] {
-				align-items:center;
-			}
-		}
-    `
-})
-export class FloatTable implements OnChanges {
-    @ContentChild('tableHeader', { static: false }) tableHeader: TemplateRef<any> | undefined;
-    @ContentChild('tableRows', { static: false }) tableRows: TemplateRef<any> | undefined;
-    @ContentChild('tableExpandedrow', { static: false }) tableExpandedrow: TemplateRef<any> | undefined;
-
-    @ViewChild('presetHeader', { static: false }) presetHeader: FloatTablePresets | undefined;
-
-    @Input() disabled: boolean = false;
-    @Input() isLoading = signal<boolean>(false);
-
-    @Input() showAdd: boolean = false;
-    @Input() showRefresh: boolean = false;
-    @Input() showClearFilters: boolean = false;
-
-	@Input() expandable: boolean = false;
-
-    @Input() values: any[] = [];
-	internalValues: any[] = [];
-    displayValues = signal<any[]>([]);
-
-	sorts = signal<FloatTableSort[]>([]);
-	filters = signal<FloatTableFilter[]>([]);
-
-	@Input() storageKey: string | null = null;
-	@Input() allowPresets: boolean = false;
-
-	constructor(private filterService : FloatTableFilterService){
-
-	}
-
-	async ngOnChanges(changes: SimpleChanges) {
-		if (changes['values'] && changes['values'].previousValue != changes['values'].currentValue) {
-			this.values = changes['values'].currentValue;
-			this.applyFilter();
-		}
-	}
-
-    @Output() onAddItem: EventEmitter<any> = new EventEmitter();
-    @Output() onLoadItems: EventEmitter<any> = new EventEmitter();
-    @Output() onRowExpanded: EventEmitter<any> = new EventEmitter();
-	@Output() onPresetChange: EventEmitter<FloatTableSortFilterPreset | null> = new EventEmitter<FloatTableSortFilterPreset | null>();
-
-    @Input() pageSize = signal<number>(25);
-	page = signal<number>(0);
-	pages = signal<number>(0);
-	readonly pageSizes = [10, 25, 50, 100, 1000];
-	processPage(){
-		var fromIndex = this.pageSize() * this.page();
-		var toIndex = fromIndex + this.pageSize();
-		this.displayValues.set(this.internalValues.slice(fromIndex, toIndex));
-	}
-
-	applySorts(){
-		var sorted = [...this.internalValues]
-		for(var sort of this.sorts())
-			sorted = this.filterService.sort(sorted, sort);
-		this.internalValues = sorted;
-	}
-
-	applyFilter(){
-		var filtered = [...this.values]
-		for(var filter of this.filters())
-			filtered = this.filterService.filter(filtered, filter);
-		this.internalValues = filtered;
-		this.applySorts();
-		this.state = [];
-		this.page.set(0);
-		this.pages.set(Math.floor(this.internalValues.length / this.pageSize()) + 1)
-		this.processPage();
-
-		this.presetHeader?.saveCurrentPreset();
-	}
-
-	state: Record<number, boolean> = {};
-
-	setSort(sort : FloatTableSort){
-		var sorts = this.sorts();
-		var target = sorts.findIndex(x => x.column == sort.column);
-		if (target != -1)
-			sorts[target] = sort;
-		else
-			sorts.push(sort);
-		this.sorts.set(sorts);
-
-		this.applyFilter();
-	}
-
-	clearSort(column : string){
-		var sorts = this.sorts();
-		var target = sorts.findIndex(x => x.column == column);
-		if (target != -1)
-			sorts.splice(target, 1)
-		this.sorts.set(sorts);
-
-		this.applyFilter();
-	}
-
-	setFilter(filter : FloatTableFilter){
-		var filters = this.filters();
-		var target = filters.findIndex(x => x.column == filter.column);
-		if (target != -1){
-			filters[target] = filter;
-		}
-		else
-			filters.push(filter);
-		this.filters.set(filters);
-
-		this.applyFilter();
-	}
-
-	clearFilter(column : string){
-		var filters = this.filters();
-		var target = filters.findIndex(x => x.column == column);
-		if (target != -1)
-			filters.splice(target, 1)
-		this.filters.set(filters);
-
-		this.applyFilter();
-	}
-
-	clearFilters(){
-		this.presetHeader?.currentPreset.set(null);
-		this.onPresetChange.emit(null);
-		this.sorts.set([])
-		this.filters.set([])
-		this.presetHeader?.savePresets();
-		this.applyFilter();
-	}
-}
-

package/src/components/floattable/helpers/floattable.filterhelpers.ts

@@ -1,23 +0,0 @@
-export class FilterHelpers {
-	public static textFilter(values: any[], fn : (i : string) => boolean, column : string) : any[]{
-		var filtered = []
-		for(let value of values)
-		{
-			var asStr : string = value[column];
-			if (fn(asStr))
-				filtered.push(value);
-		}
-		return filtered;
-	}
-
-	public static dateFilter(values: any[], fn : (i : Date) => boolean, column : string) : any[]{
-		var filtered = []
-		for(let value of values)
-		{
-			var asDate : Date = new Date(value[column]);
-			if (fn(asDate))
-				filtered.push(value);
-		}
-		return filtered;
-	}
-}

package/src/components/floattable/models/FloatTableFilter.ts

@@ -1,5 +0,0 @@
-export interface FloatTableFilter {
-	column : string;
-	value : any;
-	expression : string;
-}

package/src/components/floattable/models/FloatTableFilterMethod.ts

@@ -1,5 +0,0 @@
-export interface FloatTableFilterMethod {
-	key : string;
-	action : string;
-	filter(values : any[], column : string, value : any) : any[];
-}

package/src/components/floattable/models/FloatTableSort.ts

@@ -1,4 +0,0 @@
-export interface FloatTableSort {
-	column : string;
-	state : 'asc' | 'desc' | 'none';
-}

package/src/components/floattable/models/FloatTableSortFilterPreset.ts

@@ -1,10 +0,0 @@
-import { FloatTableFilter } from "./FloatTableFilter";
-import { FloatTableSort } from "./FloatTableSort";
-
-export interface FloatTableSortFilterPreset {
-	id : string;
-	name : string;
-	sorts : FloatTableSort[];
-	filters : FloatTableFilter[];
-	edit: boolean;
-}

package/src/components/floattable/models/FloatTableSortFilterPresetSave.ts

@@ -1,6 +0,0 @@
-import { FloatTableSortFilterPreset } from "./FloatTableSortFilterPreset";
-
-export interface FloatTableSortFilterPresetSave {
-	current : string | null;
-	presets : FloatTableSortFilterPreset[];
-}

package/src/components/floattable/models/FloatTableSortMethod.ts

@@ -1,4 +0,0 @@
-export interface FloatTableSortMethod {
-	state : 'asc' | 'desc' | 'none';
-	sort(a : any, b : any, column : string) : number;
-}

package/src/components/floattable/services/floattable.filterservice.ts

@@ -1,110 +0,0 @@
-import { FilterHelpers } from "../helpers/floattable.filterhelpers";
-import { FloatTableFilter } from "../models/FloatTableFilter";
-import { FloatTableFilterMethod } from "../models/FloatTableFilterMethod";
-import { FloatTableSort } from "../models/FloatTableSort";
-import { FloatTableSortMethod } from "../models/FloatTableSortMethod";
-
-export class FloatTableFilterService {
-	public sortMethods : FloatTableSortMethod[] = [
-		{
-			state: 'asc',
-			sort: (a: any, b: any, column : string) => {
-				if (a[column] < b[column])
-					return 1;
-				if (a[column] > b[column])
-					return -1;
-				return 0;
-			}
-		} as FloatTableSortMethod,
-		{
-			state: 'desc',
-			sort: (a: any, b: any, column : string) => {
-				if (a[column] < b[column])
-					return -1;
-				if (a[column] > b[column])
-					return 1;
-				return 0;
-			}
-		} as FloatTableSortMethod
-	]
-
-	public filterMethods : FloatTableFilterMethod[] = [
-		// Text filters
-		{
-			key: 'str',
-			action: 'con',
-			filter: (values : any[], column : string, value : any) => FilterHelpers.textFilter(values, (i : string) => i.includes(value), column)
-		},
-		{
-			key: 'str',
-			action: 'ncon',
-			filter: (values : any[], column : string, value : any) => FilterHelpers.textFilter(values, (i : string) => !i.includes(value), column)
-		},
-		{
-			key: 'str',
-			action: 'sta',
-			filter: (values : any[], column : string, value : any) => FilterHelpers.textFilter(values, (i : string) => i.startsWith(value), column)
-		},
-		{
-			key: 'str',
-			action: 'end',
-			filter: (values : any[], column : string, value : any) => FilterHelpers.textFilter(values, (i : string) => i.endsWith(value), column)
-		},
-
-		// Select filters
-		{
-			key: 'sel',
-			action: 'con',
-			filter: (values : any[], column : string, value : any) => FilterHelpers.textFilter(values, (i : string) => value.includes(i), column)
-		},
-		{
-			key: 'sel',
-			action: 'ncon',
-			filter: (values : any[], column : string, value : any) => FilterHelpers.textFilter(values, (i : string) => !value.includes(i), column)
-		},
-
-		// Date filters
-		{
-			key: 'dat',
-			action: 'bef',
-			filter: (values : any[], column : string, value : any) =>
-				FilterHelpers.dateFilter(
-					values,
-					(i : Date) => {
-						var normal = value[0].toLocalNativeDate()
-						normal.setMilliseconds(value[1].toAbsoluteMilliseconds());
-						return i.getTime() < normal.getTime()
-					},
-					column)
-		},
-		{
-			key: 'dat',
-			action: 'aft',
-			filter: (values : any[], column : string, value : any) =>
-				FilterHelpers.dateFilter(
-					values,
-					(i : Date) => {
-						var normal = value[0].toLocalNativeDate()
-						normal.setMilliseconds(value[1].toAbsoluteMilliseconds());
-						return i.getTime() > normal.getTime()
-					},
-					column)
-		},
-	]
-
-	public sort(values : any[], sort : FloatTableSort) : any[]{
-		var target = this.sortMethods.find(x => x.state == sort.state);
-		if (target)
-			return values.sort((a : any, b: any) => target!.sort(a,b,sort.column));
-		return values;
-	}
-
-	public filter(values : any[], filter : FloatTableFilter) : any[]{
-		var split = filter.expression.split(';');
-		var target = this.filterMethods.find(x => split[0] == x.key && split[1] == x.action);
-		if (target)
-			return target!.filter(values, filter.column, filter.value);
-		return values;
-	}
-}
-

package/src/components/floattable/sorts/tuiThSortable.ts

@@ -1,75 +0,0 @@
-import { CommonModule } from "@angular/common";
-import { Component, Input, signal } from "@angular/core";
-import { TuiButton } from "@taiga-ui/core";
-import { FloatTable } from "../floattable";
-import { FloatTableSort } from "../models/FloatTableSort";
-
-@Component({
-    selector: 'tuiThSortable',
-    imports: [CommonModule, TuiButton],
-    template: `
-		@if(tuiThSortable){
-			<button tuiButton style="opacity:0.72" [iconStart]="icon()" size="s" appearance="flat-grayscale" (click)="sort()"></button>
-		}
-    `
-})
-export class TableSortableColumn {
-    @Input() tuiThSortable!: string;
-
-	table : FloatTable;
-	state : 'asc' | 'desc' | 'none' = 'none';
-	icon = signal<string | null | undefined>("text-align-justify");
-
-	constructor(table : FloatTable){
-		this.table = table;
-
-		this.table.onPresetChange.subscribe(x => {
-			if (!x)
-			{
-				this.state = 'none'
-				this.icon.set('text-align-justify');
-				return;
-			}
-			var sort = x.sorts.find(x => x.column == this.tuiThSortable);
-			if (!sort)
-			{
-				this.state = 'none'
-				this.icon.set('text-align-justify');
-				return;
-			}
-			this.state = sort.state;
-
-			switch(sort.state){
-				case 'none':
-					this.icon.set('text-align-justify');
-					break;
-				case 'asc':
-					this.icon.set('arrow-up-wide-narrow');
-					break;
-				case 'desc':
-					this.icon.set('arrow-down-wide-narrow');
-					break;
-			}
-		})
-	}
-
-	sort(){
-		switch(this.state){
-			case 'none':
-				this.state = 'asc';
-				this.table.setSort({ column: this.tuiThSortable, state: this.state } as FloatTableSort)
-				this.icon.set('arrow-up-wide-narrow');
-				break;
-			case 'asc':
-				this.state = 'desc';
-				this.table.setSort({ column: this.tuiThSortable, state: this.state } as FloatTableSort)
-				this.icon.set('arrow-down-wide-narrow');
-				break;
-			case 'desc':
-				this.state = 'none';
-				this.table.clearSort(this.tuiThSortable);
-				this.icon.set('text-align-justify');
-				break;
-		}
-	}
-}