Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor

Browse Source
This commit is contained in:
Adina Țeudan 2021-09-30 01:58:57 +03:00
parent 54eb8173cf
commit c0b445b06e
6 changed files with 56 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/index.ts
View File

@ -4,6 +4,7 @@ export * from './lib/buttons';
export * from './lib/listing';
export * from './lib/filtering';
export * from './lib/help-mode';
export * from './lib/icons';
export * from './lib/inputs';
export * from './lib/utils';
export * from './lib/sorting';

5
src/lib/listing/listing-component.directive.ts
View File

@ -1,4 +1,4 @@
import { Directive, Injector, OnDestroy } from '@angular/core';
import { Directive, Injector, OnDestroy, TemplateRef, ViewChild } from '@angular/core';
import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
import { distinctUntilChanged, map, switchMap } from 'rxjs/operators';
import { FilterService } from '../filtering';
@ -25,6 +25,9 @@ export abstract class ListingComponent<T extends IListable> extends AutoUnsubscr
abstract readonly tableColumnConfigs: readonly TableColumnConfig<T>[];
abstract readonly tableHeaderLabel: string;
@ViewChild('tableItemTemplate') readonly tableItemTemplate?: TemplateRef<unknown>;
@ViewChild('worflowItemTemplate') readonly workflowItemTemplate?: TemplateRef<unknown>;
private readonly _listingMode$ = new BehaviorSubject<ListingMode>(ListingModes.table);
protected constructor(protected readonly _injector: Injector) {

2
src/lib/listing/models/table-column-config.model.ts
View File

@ -10,7 +10,7 @@ export interface TableColumnConfig<T> {
readonly rightIconTooltip?: string;
readonly notTranslatable?: boolean;
readonly width?: string;
readonly template: TemplateRef<unknown>;
readonly template?: TemplateRef<unknown>;
readonly extra?: unknown;
last?: boolean;
}

26
src/lib/listing/sync-width.directive.ts
View File

@ -34,8 +34,8 @@ export class SyncWidthDirective implements OnDestroy {
(this._elementRef.nativeElement as HTMLElement).setAttribute('synced', 'true');
const { tableRow, length } = this._sampleRow(tableRows);
if (!tableRow) {
const { columns, length } = this._sampleRow(tableRows);
if (!columns) {
return;
}
@ -44,8 +44,8 @@ export class SyncWidthDirective implements OnDestroy {
for (let idx = 0; idx < length - hasExtraColumns - 1; idx += 1) {
const item = headerItems[idx] as HTMLElement;
if (item) {
item.style.width = `${tableRow.children[idx].getBoundingClientRect().width}px`;
item.style.minWidth = `${tableRow.children[idx].getBoundingClientRect().width}px`;
item.style.width = `${columns[idx].getBoundingClientRect().width}px`;
item.style.minWidth = `${columns[idx].getBoundingClientRect().width}px`;
}
}
@ -58,20 +58,26 @@ export class SyncWidthDirective implements OnDestroy {
}
private _sampleRow(tableRows: HTMLCollectionOf<Element>): {
tableRow?: Element;
columns?: Element[];
length: number;
} {
let length = 0;
let tableRow: Element | undefined;
let columns: Element[] | undefined;
for (let idx = 0; idx < tableRows.length; idx += 1) {
const row = tableRows.item(idx);
if (row && row.children.length > length) {
length = row.children.length;
tableRow = row;
const selectionColumns = Array.from(row?.getElementsByClassName('selection-column') || []);
const cells = Array.from(row?.getElementsByClassName('cell') || []);
const scrollbarPlaceholders = Array.from(row?.getElementsByClassName('scrollbar-placeholder') || []);
const rowColumns = [...selectionColumns, ...cells, ...scrollbarPlaceholders];
if (row && rowColumns && rowColumns.length > length) {
length = rowColumns.length;
columns = rowColumns;
}
}
return { tableRow, length };
return { columns, length };
}
}

8
src/lib/listing/table/table.component.html
View File

@ -34,13 +34,7 @@
<iqser-round-checkbox [active]="listingComponent.isSelected(entity)"></iqser-round-checkbox>
</div>
<ng-container *ngFor="let column of tableColumnConfigs">
<ng-container *ngTemplateOutlet="column.template; context: { entity: entity, extra: column.extra }"></ng-container>
</ng-container>
<div *ngIf="!!actionsTemplate" class="actions-container">
<ng-container *ngTemplateOutlet="actionsTemplate; context: { entity: entity }"></ng-container>
</div>
<ng-container *ngTemplateOutlet="listingComponent.tableItemTemplate; context: { entity: entity }"></ng-container>
<div class="scrollbar-placeholder"></div>
</div>

60
src/lib/listing/table/table.component.scss
View File

@ -19,7 +19,11 @@
.table-item {
display: contents;
> div {
> *:not(.selection-column):not(.scrollbar-placeholder) {
display: contents;
}
> div, .cell {
display: flex;
flex-direction: column;
justify-content: center;
@ -29,38 +33,38 @@
height: var(--itemSize);
padding: 0 10px;
&.cell:first-of-type {
padding: 0 24px;
}
&.cell:last-of-type {
padding: 0 13px 0 10px;
}
&:not(.scrollbar-placeholder):not(.selection-column) {
min-width: 110px;
}
&.center {
align-items: center;
justify-content: center;
}
}
&.selection-column {
padding-right: 0 !important;
.cell {
min-width: 110px;
iqser-round-checkbox .wrapper {
opacity: 0;
transition: opacity 0.2s;
&.active {
opacity: 1;
}
}
&:first-of-type {
padding: 0 24px;
}
}
&.disabled > div {
.selection-column {
padding-right: 0 !important;
iqser-round-checkbox .wrapper {
opacity: 0;
transition: opacity 0.2s;
&.active {
opacity: 1;
}
}
& + * > .cell:first-of-type {
padding: 0 10px;
}
}
&.disabled > div, &.disabled .cell {
background-color: var(--iqser-grey-2);
color: var(--iqser-disabled);
@ -103,7 +107,7 @@
}
&:hover {
> div.selection-column iqser-round-checkbox .wrapper {
.selection-column iqser-round-checkbox .wrapper {
opacity: 1;
}
@ -112,8 +116,10 @@
}
}
&:hover:not(.disabled) > div {
background-color: var(--iqser-not-disabled-table-item);
&:hover:not(.disabled) {
> div, > * > div {
background-color: var(--iqser-not-disabled-table-item);
}
}
}
}