From c0b445b06ed86a07c4b9aa1803b29b9384021d54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Thu, 30 Sep 2021 01:58:57 +0300 Subject: [PATCH] Refactor --- src/index.ts | 1 + .../listing/listing-component.directive.ts | 5 +- .../models/table-column-config.model.ts | 2 +- src/lib/listing/sync-width.directive.ts | 26 ++++---- src/lib/listing/table/table.component.html | 8 +-- src/lib/listing/table/table.component.scss | 60 ++++++++++--------- 6 files changed, 56 insertions(+), 46 deletions(-) diff --git a/src/index.ts b/src/index.ts index 0a56bbd..c2a574e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -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'; diff --git a/src/lib/listing/listing-component.directive.ts b/src/lib/listing/listing-component.directive.ts index 571de6d..26baee4 100644 --- a/src/lib/listing/listing-component.directive.ts +++ b/src/lib/listing/listing-component.directive.ts @@ -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 extends AutoUnsubscr abstract readonly tableColumnConfigs: readonly TableColumnConfig[]; abstract readonly tableHeaderLabel: string; + @ViewChild('tableItemTemplate') readonly tableItemTemplate?: TemplateRef; + @ViewChild('worflowItemTemplate') readonly workflowItemTemplate?: TemplateRef; + private readonly _listingMode$ = new BehaviorSubject(ListingModes.table); protected constructor(protected readonly _injector: Injector) { diff --git a/src/lib/listing/models/table-column-config.model.ts b/src/lib/listing/models/table-column-config.model.ts index 34679b8..a19e040 100644 --- a/src/lib/listing/models/table-column-config.model.ts +++ b/src/lib/listing/models/table-column-config.model.ts @@ -10,7 +10,7 @@ export interface TableColumnConfig { readonly rightIconTooltip?: string; readonly notTranslatable?: boolean; readonly width?: string; - readonly template: TemplateRef; + readonly template?: TemplateRef; readonly extra?: unknown; last?: boolean; } diff --git a/src/lib/listing/sync-width.directive.ts b/src/lib/listing/sync-width.directive.ts index d2f4693..d5a1a03 100644 --- a/src/lib/listing/sync-width.directive.ts +++ b/src/lib/listing/sync-width.directive.ts @@ -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): { - 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 }; } } diff --git a/src/lib/listing/table/table.component.html b/src/lib/listing/table/table.component.html index 54bce21..c85292f 100644 --- a/src/lib/listing/table/table.component.html +++ b/src/lib/listing/table/table.component.html @@ -34,13 +34,7 @@ - - - - -
- -
+
diff --git a/src/lib/listing/table/table.component.scss b/src/lib/listing/table/table.component.scss index 6486db2..d0a4c4a 100644 --- a/src/lib/listing/table/table.component.scss +++ b/src/lib/listing/table/table.component.scss @@ -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); + } } } }