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

move table column name to common lib

Browse Source
This commit is contained in:
Dan Percic 2021-08-06 17:30:42 +03:00
parent 9d7c343d5f
commit d7e4090f4d
37 changed files with 123 additions and 297 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
View File

@ -7,7 +7,7 @@
[bulkActions]="bulkActions"
[hasEmptyColumn]="true"
[selectionEnabled]="true"
[tableColConfigs]="tableColConfigs"
[tableColumnConfigs]="tableColConfigs"
[tableHeaderLabel]="tableHeaderLabel"
></redaction-table-header>

9
apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts
View File

@ -3,9 +3,8 @@ import { FileDownloadService } from '@upload-download/services/file-download.ser
import { DownloadStatusWrapper } from '@upload-download/model/download-status.wrapper';
import { DownloadControllerService } from '@redaction/red-ui-http';
import { BaseListingComponent, DefaultListingServices } from '@shared/base/base-listing.component';
import { CircleButtonTypes } from '@iqser/common-ui';
import { CircleButtonTypes, TableColumnConfig } from '@iqser/common-ui';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { TableColConfig } from '@shared/components/table-col-name/table-col-name.component';
@Component({
selector: 'redaction-downloads-list-screen',
@ -16,14 +15,14 @@ import { TableColConfig } from '@shared/components/table-col-name/table-col-name
export class DownloadsListScreenComponent extends BaseListingComponent<DownloadStatusWrapper> implements OnInit {
readonly circleButtonTypes = CircleButtonTypes;
readonly itemSize = 80;
readonly tableColConfigs: TableColConfig[] = [
protected readonly _primaryKey = 'storageId';
readonly tableHeaderLabel = _('downloads-list.table-header.title');
readonly tableColConfigs: TableColumnConfig<DownloadStatusWrapper>[] = [
{ label: _('downloads-list.table-col-names.name') },
{ label: _('downloads-list.table-col-names.size') },
{ label: _('downloads-list.table-col-names.date') },
{ label: _('downloads-list.table-col-names.status') }
];
protected readonly _primaryKey = 'storageId';
protected readonly _tableHeaderLabel = _('downloads-list.table-header.title');
constructor(
readonly fileDownloadService: FileDownloadService,

15
apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
View File

@ -54,25 +54,22 @@
<div class="table-header" redactionSyncWidth="table-item">
<div class="select-oval-placeholder"></div>
<redaction-table-col-name
[label]="'file-attributes-csv-import.table-col-names.name' | translate"
class="name"
></redaction-table-col-name>
<iqser-table-column-name [label]="'file-attributes-csv-import.table-col-names.name' | translate" class="name"></iqser-table-column-name>
<redaction-table-col-name [label]="'file-attributes-csv-import.table-col-names.type' | translate"></redaction-table-col-name>
<iqser-table-column-name [label]="'file-attributes-csv-import.table-col-names.type' | translate"></iqser-table-column-name>
<redaction-table-col-name
<iqser-table-column-name
[label]="'file-attributes-csv-import.table-col-names.read-only' | translate"
class="flex-center"
leftIcon="red:read-only"
></redaction-table-col-name>
></iqser-table-column-name>
<redaction-table-col-name
<iqser-table-column-name
[label]="'file-attributes-csv-import.table-col-names.primary' | translate"
[rightIconTooltip]="'file-attributes-csv-import.table-col-names.primary-info-tooltip' | translate"
class="flex-center"
rightIcon="red:status-info"
></redaction-table-col-name>
></iqser-table-column-name>
<div></div>
<div class="scrollbar-placeholder"></div>

2
apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss
View File

@ -1,6 +1,6 @@
@import '../../../../../../assets/styles/variables';
redaction-table-col-name::ng-deep {
iqser-table-column-name::ng-deep {
> div {
padding: 0 13px 0 10px !important;

16
apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
View File

@ -87,23 +87,23 @@
</div>
<div class="table-header" redactionSyncWidth="table-item">
<redaction-table-col-name
<iqser-table-column-name
[label]="'audit-screen.table-col-names.message' | translate"
column="message"
></redaction-table-col-name>
<redaction-table-col-name
></iqser-table-column-name>
<iqser-table-column-name
[label]="'audit-screen.table-col-names.date' | translate"
column="date"
></redaction-table-col-name>
<redaction-table-col-name
></iqser-table-column-name>
<iqser-table-column-name
[label]="'audit-screen.table-col-names.user' | translate"
class="user-column"
column="user"
></redaction-table-col-name>
<redaction-table-col-name
></iqser-table-column-name>
<iqser-table-column-name
[label]="'audit-screen.table-col-names.category' | translate"
column="category"
></redaction-table-col-name>
></iqser-table-column-name>
<div class="scrollbar-placeholder"></div>
</div>

8
apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
View File

@ -27,16 +27,16 @@
</div>
<div class="table-header" redactionSyncWidth="table-item">
<redaction-table-col-name
<iqser-table-column-name
[label]="'default-colors-screen.table-col-names.key' | translate"
[withSort]="true"
column="key"
></redaction-table-col-name>
></iqser-table-column-name>
<redaction-table-col-name
<iqser-table-column-name
[label]="'default-colors-screen.table-col-names.color' | translate"
class="flex-center"
></redaction-table-col-name>
></iqser-table-column-name>
<div></div>
<div class="scrollbar-placeholder"></div>

12
apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
View File

@ -60,23 +60,23 @@
<div [class.no-data]="screenStateService.noData$ | async" class="table-header" redactionSyncWidth="table-item">
<div class="select-oval-placeholder"></div>
<redaction-table-col-name
<iqser-table-column-name
[label]="'dictionary-listing.table-col-names.type' | translate"
[withSort]="true"
column="label"
></redaction-table-col-name>
></iqser-table-column-name>
<redaction-table-col-name
<iqser-table-column-name
[label]="'dictionary-listing.table-col-names.order-of-importance' | translate"
[withSort]="true"
class="flex-center"
column="rank"
></redaction-table-col-name>
></iqser-table-column-name>
<redaction-table-col-name
<iqser-table-column-name
[label]="'dictionary-listing.table-col-names.hint-redaction' | translate"
class="flex-center"
></redaction-table-col-name>
></iqser-table-column-name>
<div></div>
<div class="scrollbar-placeholder"></div>
</div>

2
apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.scss
View File

@ -15,7 +15,7 @@
}
}
redaction-table-col-name::ng-deep {
iqser-table-column-name::ng-deep {
> div {
padding-left: 10px !important;
}

12
apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
View File

@ -62,21 +62,21 @@
<div *ngIf="(screenStateService.noData$ | async) === false" class="table-header" redactionSyncWidth="table-item">
<div class="select-oval-placeholder"></div>
<redaction-table-col-name
<iqser-table-column-name
[label]="'dossier-attributes-listing.table-col-names.label' | translate"
[withSort]="true"
column="label"
></redaction-table-col-name>
></iqser-table-column-name>
<redaction-table-col-name
<iqser-table-column-name
[label]="'dossier-attributes-listing.table-col-names.placeholder' | translate"
></redaction-table-col-name>
></iqser-table-column-name>
<redaction-table-col-name
<iqser-table-column-name
[label]="'dossier-attributes-listing.table-col-names.type' | translate"
[withSort]="true"
column="type"
></redaction-table-col-name>
></iqser-table-column-name>
<div></div>
<div class="scrollbar-placeholder"></div>

2
apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.scss
View File

@ -9,7 +9,7 @@
padding: 0 24px 0 10px;
}
redaction-table-col-name::ng-deep {
iqser-table-column-name::ng-deep {
> div {
padding-left: 10px !important;
}

16
apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
View File

@ -53,25 +53,25 @@
<div [class.no-data]="screenStateService.noData$ | async" class="table-header" redactionSyncWidth="table-item">
<div class="select-oval-placeholder"></div>
<redaction-table-col-name
<iqser-table-column-name
[label]="'dossier-templates-listing.table-col-names.name' | translate"
[withSort]="true"
column="name"
></redaction-table-col-name>
<redaction-table-col-name
></iqser-table-column-name>
<iqser-table-column-name
[label]="'dossier-templates-listing.table-col-names.created-by' | translate"
class="user-column"
></redaction-table-col-name>
<redaction-table-col-name
></iqser-table-column-name>
<iqser-table-column-name
[label]="'dossier-templates-listing.table-col-names.created-on' | translate"
[withSort]="true"
column="dateAdded"
></redaction-table-col-name>
<redaction-table-col-name
></iqser-table-column-name>
<iqser-table-column-name
[label]="'dossier-templates-listing.table-col-names.modified-on' | translate"
[withSort]="true"
column="dateModified"
></redaction-table-col-name>
></iqser-table-column-name>
<div class="scrollbar-placeholder"></div>
</div>

2
apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.scss
View File

@ -5,7 +5,7 @@
padding: 0 24px 0 10px;
}
redaction-table-col-name::ng-deep {
iqser-table-column-name::ng-deep {
> div {
padding-left: 10px !important;
}

20
apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
View File

@ -71,35 +71,35 @@
<div [class.no-data]="screenStateService.noData$ | async" class="table-header" redactionSyncWidth="table-item">
<div class="select-oval-placeholder"></div>
<redaction-table-col-name
<iqser-table-column-name
[label]="'file-attributes-listing.table-col-names.name' | translate"
[withSort]="true"
column="label"
></redaction-table-col-name>
></iqser-table-column-name>
<redaction-table-col-name
<iqser-table-column-name
[label]="'file-attributes-listing.table-col-names.type' | translate"
[withSort]="true"
column="type"
></redaction-table-col-name>
></iqser-table-column-name>
<redaction-table-col-name
<iqser-table-column-name
[label]="'file-attributes-listing.table-col-names.read-only' | translate"
[withSort]="true"
class="flex-center"
column="editable"
></redaction-table-col-name>
></iqser-table-column-name>
<redaction-table-col-name
<iqser-table-column-name
[label]="'file-attributes-listing.table-col-names.csv-column' | translate"
></redaction-table-col-name>
></iqser-table-column-name>
<redaction-table-col-name
<iqser-table-column-name
[label]="'file-attributes-listing.table-col-names.primary' | translate"
[rightIconTooltip]="'file-attributes-listing.table-col-names.primary-info-tooltip' | translate"
class="flex-center"
rightIcon="red:status-info"
></redaction-table-col-name>
></iqser-table-column-name>
<div></div>

2
apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
View File

@ -9,7 +9,7 @@
padding: 0 24px 0 10px;
}
redaction-table-col-name::ng-deep {
iqser-table-column-name::ng-deep {
> div {
padding-left: 10px !important;
}

17
apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html
View File

@ -36,25 +36,22 @@
<div [class.no-data]="screenStateService.noData$ | async" class="table-header" redactionSyncWidth="table-item">
<div class="select-oval-placeholder"></div>
<redaction-table-col-name
<iqser-table-column-name
[label]="'trash.table-col-names.name' | translate"
[withSort]="true"
column="dossierName"
></redaction-table-col-name>
<redaction-table-col-name
[label]="'trash.table-col-names.owner' | translate"
class="user-column"
></redaction-table-col-name>
<redaction-table-col-name
></iqser-table-column-name>
<iqser-table-column-name [label]="'trash.table-col-names.owner' | translate" class="user-column"></iqser-table-column-name>
<iqser-table-column-name
[label]="'trash.table-col-names.deleted-on' | translate"
[withSort]="true"
column="softDeletedTime"
></redaction-table-col-name>
<redaction-table-col-name
></iqser-table-column-name>
<iqser-table-column-name
[label]="'trash.table-col-names.time-to-restore' | translate"
[withSort]="true"
column="softDeletedTime"
></redaction-table-col-name>
></iqser-table-column-name>
<div class="scrollbar-placeholder"></div>
</div>

2
apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.scss
View File

@ -9,7 +9,7 @@
}
}
redaction-table-col-name::ng-deep {
iqser-table-column-name::ng-deep {
> div {
padding-left: 10px !important;
}

10
apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
View File

@ -62,16 +62,16 @@
<div class="table-header" redactionSyncWidth="table-item">
<div class="select-oval-placeholder"></div>
<redaction-table-col-name [label]="'user-listing.table-col-names.name' | translate"></redaction-table-col-name>
<iqser-table-column-name [label]="'user-listing.table-col-names.name' | translate"></iqser-table-column-name>
<redaction-table-col-name [label]="'user-listing.table-col-names.email' | translate"></redaction-table-col-name>
<iqser-table-column-name [label]="'user-listing.table-col-names.email' | translate"></iqser-table-column-name>
<redaction-table-col-name
<iqser-table-column-name
[label]="'user-listing.table-col-names.active' | translate"
class="flex-center"
></redaction-table-col-name>
></iqser-table-column-name>
<redaction-table-col-name [label]="'user-listing.table-col-names.roles' | translate"></redaction-table-col-name>
<iqser-table-column-name [label]="'user-listing.table-col-names.roles' | translate"></iqser-table-column-name>
<div></div>
<div class="scrollbar-placeholder"></div>

2
apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss
View File

@ -3,7 +3,7 @@
padding: 0 24px 0 10px;
}
redaction-table-col-name::ng-deep {
iqser-table-column-name::ng-deep {
> div {
padding: 0 13px 0 10px !important;
}

5
apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html
View File

@ -8,7 +8,10 @@
<div class="red-content-inner">
<div class="content-container">
<redaction-table-header [tableColConfigs]="tableColConfigs" [tableHeaderLabel]="tableHeaderLabel"></redaction-table-header>
<redaction-table-header
[tableColumnConfigs]="tableColumnConfigs"
[tableHeaderLabel]="tableHeaderLabel"
></redaction-table-header>
<redaction-empty-state
(action)="openAddDossierDialog()"

9
apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts
View File

@ -16,9 +16,8 @@ import { DossiersDialogService } from '../../services/dossiers-dialog.service';
import { OnAttach, OnDetach } from '@utils/custom-route-reuse.strategy';
import { UserPreferenceService } from '@services/user-preference.service';
import { ButtonConfig } from '@shared/components/page-header/models/button-config.model';
import { NestedFilter } from '@iqser/common-ui';
import { NestedFilter, TableColumnConfig } from '@iqser/common-ui';
import { BaseListingComponent, DefaultListingServices } from '@shared/base/base-listing.component';
import { TableColConfig } from '@shared/components/table-col-name/table-col-name.component';
import { workloadTranslations } from '../../translations/workload-translations';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { fileStatusTranslations } from '../../translations/file-status-translations';
@ -41,6 +40,8 @@ export class DossierListingScreenComponent
implements OnInit, AfterViewInit, OnDestroy, OnAttach, OnDetach
{
readonly itemSize = 95;
protected readonly _primaryKey = 'dossierName';
readonly tableHeaderLabel = _('dossier-listing.table-header.title');
readonly buttonConfigs: ButtonConfig[] = [
{
label: _('dossier-listing.add-new'),
@ -50,7 +51,7 @@ export class DossierListingScreenComponent
type: 'primary'
}
];
readonly tableColConfigs: TableColConfig[] = [
readonly tableColumnConfigs: TableColumnConfig<DossierWrapper>[] = [
{
label: _('dossier-listing.table-col-names.name'),
withSort: true,
@ -70,8 +71,6 @@ export class DossierListingScreenComponent
];
dossiersChartData: DoughnutChartConfig[] = [];
documentsChartData: DoughnutChartConfig[] = [];
protected readonly _primaryKey = 'numberOfMembers';
protected _tableHeaderLabel = _('dossier-listing.table-header.title');
private _lastScrollPosition: number;
@ViewChild('needsWorkTemplate', { read: TemplateRef, static: true })
private readonly _needsWorkTemplate: TemplateRef<any>;

2
apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
View File

@ -39,7 +39,7 @@
<redaction-table-header
[bulkActions]="bulkActions"
[selectionEnabled]="true"
[tableColConfigs]="tableColConfigs"
[tableColumnConfigs]="tableColumnConfigs"
[tableHeaderLabel]="tableHeaderLabel"
></redaction-table-header>

2
apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss
View File

@ -9,7 +9,7 @@
padding: 0 24px 0 10px;
}
redaction-table-col-name::ng-deep {
iqser-table-column-name::ng-deep {
> div {
padding-left: 10px !important;
}

18
apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
View File

@ -21,7 +21,7 @@ import { DossierWrapper } from '@state/model/dossier.wrapper';
import { OnAttach, OnDetach } from '@utils/custom-route-reuse.strategy';
import { AppConfigKey, AppConfigService } from '@app-config/app-config.service';
import { ActionConfig } from '@shared/components/page-header/models/action-config.model';
import { CircleButtonTypes, keyChecker, NestedFilter } from '@iqser/common-ui';
import { CircleButtonTypes, keyChecker, NestedFilter, TableColumnConfig } from '@iqser/common-ui';
import { BaseListingComponent, DefaultListingServices } from '@shared/base/base-listing.component';
import { LoadingService } from '@services/loading.service';
import { DossierAttributesService } from '@shared/services/controller-wrappers/dossier-attributes.service';
@ -30,7 +30,6 @@ import { UserPreferenceService } from '@services/user-preference.service';
import { workloadTranslations } from '../../translations/workload-translations';
import { fileStatusTranslations } from '../../translations/file-status-translations';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { TableColConfig } from '@shared/components/table-col-name/table-col-name.component';
import { annotationFilterChecker } from '@shared/components/filters/popup-filter/utils/filter-utils';
@Component({
@ -42,13 +41,12 @@ export class DossierOverviewScreenComponent
extends BaseListingComponent<FileStatusWrapper>
implements OnInit, OnDestroy, OnDetach, OnAttach
{
private readonly _lastOpenedFileKey = 'Dossier-Recent-' + this.activeDossier.dossierId;
protected readonly _primaryKey = 'filename';
readonly circleButtonTypes = CircleButtonTypes;
protected readonly _tableHeaderLabel = _('dossier-overview.table-header.title');
readonly itemSize = 80;
collapsedDetails = false;
protected readonly _primaryKey = 'filename';
readonly tableHeaderLabel = _('dossier-overview.table-header.title');
private readonly _lastOpenedFileKey = 'Dossier-Recent-' + this.activeDossier.dossierId;
readonly actionConfigs: ActionConfig[] = [
{
label: this._translateService.instant('dossier-overview.header-actions.edit'),
@ -57,8 +55,7 @@ export class DossierOverviewScreenComponent
hide: !this.permissionsService.isManager()
}
];
dossierAttributes: DossierAttributeWithValue[] = [];
readonly tableColConfigs: TableColConfig[] = [
readonly tableColumnConfigs: TableColumnConfig<FileStatusWrapper>[] = [
{
label: _('dossier-overview.table-col-names.name'),
withSort: true,
@ -90,6 +87,9 @@ export class DossierOverviewScreenComponent
column: 'statusSort'
}
];
collapsedDetails = false;
dossierAttributes: DossierAttributeWithValue[] = [];
@ViewChild(DossierDetailsComponent, { static: false })
private readonly _dossierDetailsComponent: DossierDetailsComponent;
private _lastScrollPosition: number;

5
apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html
View File

@ -10,7 +10,10 @@
<div class="red-content-inner">
<div class="content-container">
<redaction-table-header [tableColConfigs]="tableColConfigs" [tableHeaderLabel]="tableHeaderLabel"></redaction-table-header>
<redaction-table-header
[tableColumnConfigs]="tableColumnConfigs"
[tableHeaderLabel]="tableHeaderLabel"
></redaction-table-header>
<redaction-empty-state
*ngIf="searchResult.length === 0"

27
apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts
View File

@ -4,8 +4,7 @@ import { MatchedDocument, SearchControllerService, SearchResult } from '@redacti
import { BehaviorSubject, Observable } from 'rxjs';
import { debounceTime, map, skip, switchMap, tap } from 'rxjs/operators';
import { ActivatedRoute, Router } from '@angular/router';
import { TableColConfig } from '@shared/components/table-col-name/table-col-name.component';
import { keyChecker } from '@iqser/common-ui';
import { keyChecker, TableColumnConfig } from '@iqser/common-ui';
import { AppStateService } from '@state/app-state.service';
import { FileStatusWrapper } from '@models/file/file-status.wrapper';
import { LoadingService } from '@services/loading.service';
@ -41,6 +40,14 @@ export class SearchScreenComponent extends BaseListingComponent<ListItem> implem
readonly searchPositions = SearchPositions;
readonly itemSize = 85;
protected readonly _primaryKey = 'filename';
readonly tableHeaderLabel = _('search-screen.table-header');
readonly tableColumnConfigs: TableColumnConfig<ListItem>[] = [
{ label: _('search-screen.cols.document') },
{ label: _('search-screen.cols.status') },
{ label: _('search-screen.cols.dossier') },
{ label: _('search-screen.cols.pages') }
];
readonly search$ = new BehaviorSubject<SearchInput>(null);
readonly searchResults$: Observable<ListItem[]> = this.search$.asObservable().pipe(
switchMap(query => this._search(query)),
@ -49,22 +56,6 @@ export class SearchScreenComponent extends BaseListingComponent<ListItem> implem
tap(result => this.screenStateService.setEntities(result)),
tap(() => this._loadingService.stop())
);
readonly tableColConfigs: TableColConfig[] = [
{
label: _('search-screen.cols.document')
},
{
label: _('search-screen.cols.status')
},
{
label: _('search-screen.cols.dossier')
},
{
label: _('search-screen.cols.pages')
}
];
protected readonly _primaryKey = 'filename';
protected readonly _tableHeaderLabel = _('search-screen.table-header');
constructor(
protected readonly _injector: Injector,

2
apps/red-ui/src/app/modules/icons/icons.module.ts
View File

@ -70,8 +70,6 @@ export class IconsModule {
'report',
'search',
'secret',
'sort-asc',
'sort-desc',
'status',
'status-collapse',
'status-expand',

30
apps/red-ui/src/app/modules/shared/base/base-listing.component.ts
View File

@ -1,5 +1,13 @@
import { Component, Injector, OnDestroy, ViewChild } from '@angular/core';
import { AutoUnsubscribeComponent, FilterService, KeysOf, SearchService, SortingOrders, SortingService } from '@iqser/common-ui';
import {
AutoUnsubscribeComponent,
FilterService,
KeysOf,
SearchService,
SortingOrders,
SortingService,
TableColumnConfig
} from '@iqser/common-ui';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { ScreenStateService } from '../services/screen-state.service';
import { combineLatest, Observable } from 'rxjs';
@ -22,7 +30,7 @@ export abstract class BaseListingComponent<T extends object> extends AutoUnsubsc
readonly sortedDisplayedEntities$ = this._sortedDisplayedEntities$;
readonly noMatch$ = this._noMatch$;
protected readonly _tableHeaderLabel: string;
readonly tableColumnConfigs: TableColumnConfig<T>[];
/**
* Key used in the *trackBy* function with **ngFor* or **cdkVirtualFor*
* and in the default sorting and as the search field
@ -36,22 +44,14 @@ export abstract class BaseListingComponent<T extends object> extends AutoUnsubsc
setTimeout(() => this.setInitialConfig());
}
get tableHeaderLabel(): string {
if (!this._tableHeaderLabel) {
throw new Error('Not implemented');
}
return this._tableHeaderLabel;
}
get allEntities(): T[] {
return this.screenStateService.allEntities;
}
private get _sortedDisplayedEntities$(): Observable<T[]> {
return this.sortingService.sortingOption$.pipe(
switchMap(() => this.screenStateService.displayedEntities$.pipe(map(entities => this.sortingService.defaultSort(entities))))
);
const sort = entities => this.sortingService.defaultSort(entities);
const sortedEntities = () => this.screenStateService.displayedEntities$.pipe(map(sort));
return this.sortingService.sortingOption$.pipe(switchMap(sortedEntities));
}
private get _noMatch$(): Observable<boolean> {
@ -69,10 +69,6 @@ export abstract class BaseListingComponent<T extends object> extends AutoUnsubsc
this.searchService.setSearchKey(this._primaryKey);
}
ngOnDestroy(): void {
super.ngOnDestroy();
}
canBulkDelete$(hasPermission = true): Observable<boolean> {
return this.screenStateService.areSomeEntitiesSelected$.pipe(
map(areSomeEntitiesSelected => areSomeEntitiesSelected && hasPermission),

12
apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.html
View File

@ -1,12 +0,0 @@
<div (click)="withSort && sortingService?.toggleSort(column)" [class.pointer]="withSort" [ngClass]="class">
<mat-icon *ngIf="!!leftIcon" [svgIcon]="leftIcon"></mat-icon>
<span class="all-caps-label">{{ label }}</span>
<mat-icon *ngIf="!!rightIcon" [matTooltip]="rightIconTooltip" [svgIcon]="rightIcon" matTooltipPosition="above"></mat-icon>
<ng-container *ngIf="sortingService?.sortingOption$ | async as sortingOption">
<div *ngIf="withSort" [class.force-display]="sortingOption.column === column" class="sort-arrows-container">
<mat-icon *ngIf="sortingOption.order === 'asc'" svgIcon="red:sort-asc"></mat-icon>
<mat-icon *ngIf="sortingOption.order === 'desc'" svgIcon="red:sort-desc"></mat-icon>
</div>
</ng-container>
</div>

51
apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.scss
View File

@ -1,51 +0,0 @@
@import '../../../../../assets/styles/variables';
:host {
display: flex;
height: 30px;
flex: 1;
> div {
align-items: center;
display: flex;
width: 100%;
line-height: 11px;
padding: 0 24px;
> mat-icon {
width: 10px;
height: 10px;
margin-right: 6px;
opacity: 0.7;
&:not(:first-child) {
margin-left: 6px;
}
}
}
.flex-end {
min-width: 58px;
}
.sort-arrows-container {
display: none;
color: $primary;
margin-left: 8px;
mat-icon {
height: 14px;
width: 6px;
}
}
&:hover {
.sort-arrows-container {
display: initial;
}
}
.sort-arrows-container.force-display {
display: initial;
}
}

29
apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.ts
View File

@ -1,29 +0,0 @@
import { Component, Input, Optional } from '@angular/core';
import { KeysOf, SortingService } from '@iqser/common-ui';
export interface TableColConfig {
readonly column?: string;
readonly label: string;
readonly withSort?: boolean;
readonly class?: string;
readonly leftIcon?: string;
readonly rightIcon?: string;
readonly rightIconTooltip?: string;
}
@Component({
selector: 'redaction-table-col-name',
templateUrl: './table-col-name.component.html',
styleUrls: ['./table-col-name.component.scss']
})
export class TableColNameComponent<T extends object> {
@Input() column: KeysOf<T>;
@Input() label: string;
@Input() withSort = false;
@Input() class: string;
@Input() leftIcon: string;
@Input() rightIcon: string;
@Input() rightIconTooltip: string;
constructor(@Optional() readonly sortingService: SortingService<T>) {}
}

6
apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html
View File

@ -18,8 +18,8 @@
<div [class.selection-enabled]="selectionEnabled" class="table-header" redactionSyncWidth="table-item">
<div *ngIf="selectionEnabled" class="select-oval-placeholder"></div>
<redaction-table-col-name
*ngFor="let config of tableColConfigs"
<iqser-table-column-name
*ngFor="let config of tableColumnConfigs"
[class]="config.class"
[column]="config.column"
[label]="config.label | translate"
@ -27,7 +27,7 @@
[rightIconTooltip]="config.rightIconTooltip"
[rightIcon]="config.rightIcon"
[withSort]="config.withSort"
></redaction-table-col-name>
></iqser-table-column-name>
<div *ngIf="hasEmptyColumn"></div>

4
apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.ts
View File

@ -1,6 +1,6 @@
import { ChangeDetectionStrategy, Component, Input, TemplateRef } from '@angular/core';
import { TableColConfig } from '@shared/components/table-col-name/table-col-name.component';
import { ScreenStateService } from '@shared/services/screen-state.service';
import { TableColumnConfig } from '@iqser/common-ui';
@Component({
selector: 'redaction-table-header',
@ -10,7 +10,7 @@ import { ScreenStateService } from '@shared/services/screen-state.service';
})
export class TableHeaderComponent<T extends object> {
@Input() tableHeaderLabel: string;
@Input() tableColConfigs: TableColConfig[];
@Input() tableColumnConfigs: TableColumnConfig<T>[];
@Input() hasEmptyColumn = false;
@Input() selectionEnabled = false;
@Input() bulkActions: TemplateRef<any>;

3
apps/red-ui/src/app/modules/shared/shared.module.ts
View File

@ -4,7 +4,6 @@ import { FullPageLoadingIndicatorComponent } from './components/full-page-loadin
import { TranslateModule } from '@ngx-translate/core';
import { InitialsAvatarComponent } from './components/initials-avatar/initials-avatar.component';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { TableColNameComponent } from './components/table-col-name/table-col-name.component';
import { PaginationComponent } from './components/pagination/pagination.component';
import { FileDownloadBtnComponent } from './components/buttons/file-download-btn/file-download-btn.component';
import { UserButtonComponent } from './components/buttons/user-button/user-button.component';
@ -41,7 +40,7 @@ const buttons = [FileDownloadBtnComponent, UserButtonComponent];
const components = [
FullPageLoadingIndicatorComponent,
InitialsAvatarComponent,
TableColNameComponent,
TableHeaderComponent,
PaginationComponent,
InputWithActionComponent,
AnnotationIconComponent,

11
apps/red-ui/src/assets/icons/general/sort-asc.svg
View File

@ -1,11 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg height="14px" version="1.1" viewBox="0 0 6 14" width="6px" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd" id="Icons" stroke="none" stroke-width="1">
<g id="Artboard" transform="translate(-1212.000000, -325.000000)">
<polygon fill="currentColor" id="Fill-1" points="1215 338 1218 334 1212 334"></polygon>
<polygon fill="#28324180" id="Fill-1"
points="1215 330 1218 326 1212 326"
transform="translate(1215.000000, 328.000000) rotate(-180.000000) translate(-1215.000000, -328.000000) "></polygon>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 669 B

11
apps/red-ui/src/assets/icons/general/sort-desc.svg
View File

@ -1,11 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg height="14px" version="1.1" viewBox="0 0 6 14" width="6px" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd" id="Icons" stroke="none" stroke-width="1">
<g id="Artboard" transform="translate(-1212.000000, -325.000000)">
<polygon fill="#28324180" id="Fill-1" points="1215 338 1218 334 1212 334"></polygon>
<polygon fill="currentColor" id="Fill-1"
points="1215 330 1218 326 1212 326"
transform="translate(1215.000000, 328.000000) rotate(-180.000000) translate(-1215.000000, -328.000000) "></polygon>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 669 B

19
apps/red-ui/src/assets/styles/red-tables.scss
View File

@ -12,25 +12,6 @@
}
}
.table-header {
display: flex;
border-bottom: 1px solid $separator;
&.no-data:not([synced='true']) {
padding-left: 30px;
}
redaction-table-col-name:last-of-type {
> div {
padding-right: 13px;
}
}
&.selection-enabled redaction-table-col-name > div {
padding-left: 10px;
}
}
cdk-virtual-scroll-viewport {
height: calc(100vh - 50px - 31px - 111px);
overflow-y: hidden !important;

23
apps/red-ui/src/assets/styles/red-text-styles.scss
View File

@ -55,29 +55,6 @@ pre {
padding: 0 20px;
}
.all-caps-label {
text-transform: uppercase;
opacity: 0.7;
font-size: 11px;
font-weight: 600;
letter-spacing: 0;
line-height: 14px;
transition: opacity 0.2s;
&.cancel {
cursor: pointer;
&:hover {
opacity: 1;
}
&.disabled {
opacity: 0.3;
cursor: default;
}
}
}
.small-label {
opacity: 0.7;
font-size: 11px;