diff --git a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts index db4e6259c..04d84bd9e 100644 --- a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts +++ b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts @@ -2,8 +2,7 @@ import { Component, Injector, OnInit } from '@angular/core'; import { FileDownloadService } from '@upload-download/services/file-download.service'; 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, TableColumnConfig } from '@iqser/common-ui'; +import { CircleButtonTypes, DefaultListingServices, ListingComponent, TableColumnConfig } from '@iqser/common-ui'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { LoadingService } from '@services/loading.service'; @@ -13,7 +12,7 @@ import { LoadingService } from '@services/loading.service'; styleUrls: ['./downloads-list-screen.component.scss'], providers: [...DefaultListingServices] }) -export class DownloadsListScreenComponent extends BaseListingComponent implements OnInit { +export class DownloadsListScreenComponent extends ListingComponent implements OnInit { readonly itemSize = 80; protected readonly _primaryKey = 'storageId'; readonly circleButtonTypes = CircleButtonTypes; diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts index c761b964d..508c5a280 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts @@ -8,13 +8,13 @@ import { Toaster } from '@services/toaster.service'; import { DossierAttributesService } from '@shared/services/controller-wrappers/dossier-attributes.service'; import { dossierAttributeTypesTranslations } from '../../translations/dossier-attribute-types-translations'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; -import { AutoUnsubscribeComponent } from '@iqser/common-ui'; +import { AutoUnsubscribe } from '@iqser/common-ui'; @Component({ templateUrl: './add-edit-dossier-attribute-dialog.component.html', styleUrls: ['./add-edit-dossier-attribute-dialog.component.scss'] }) -export class AddEditDossierAttributeDialogComponent extends AutoUnsubscribeComponent implements OnDestroy { +export class AddEditDossierAttributeDialogComponent extends AutoUnsubscribe implements OnDestroy { dossierAttributeForm: FormGroup; dossierAttribute: DossierAttributeConfig; readonly translations = dossierAttributeTypesTranslations; diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html index d2637374c..eccad5fb4 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html +++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html @@ -1,13 +1,99 @@ -
- - - {{ 'file-attributes-csv-import.table-header.title' | translate: { length: (entitiesService.allLength$ | async) } }} - + + + + +
+
+ +
+
+
+ {{ field.name }} +
+ +
+
+ +
+
+ + + + + + + + +
+
+
+ + + + {{ translations[type] | translate }} + + + +
+
+ +
+ +
+ +
+ +
+ +
+
+ +
+
+
+
+ + + -
- -
-
- - - - - - - - - -
-
-
- - - - - -
-
- -
-
-
- {{ field.name }} -
-
-
- -
-
- - - - - -
-
-
- - - - {{ translations[type] | translate }} - - - -
-
-
- -
-
- -
-
-
- -
-
-
-
- + diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss index 7af2b2f30..19436f681 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss +++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss @@ -1,16 +1,14 @@ @import '../../../../../../assets/styles/variables'; -iqser-table-column-name::ng-deep { - > div { - padding: 0 13px 0 10px !important; +iqser-table-column-name::ng-deep > div { + padding: 0 13px 0 10px !important; - &.name { - padding-left: 22px !important; - } + &.name { + padding-left: 22px !important; } } -.header-item { +redaction-table-header::ng-deep .header-item { padding: 0 24px 0 10px; box-shadow: none; border-top: 1px solid $separator; diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts index 016cdcc13..1c1eaf30a 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts @@ -1,9 +1,9 @@ import { Component, EventEmitter, Injector, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; import { Field } from '../file-attributes-csv-import-dialog.component'; import { FileAttributeConfig } from '@redaction/red-ui-http'; -import { CircleButtonTypes } from '@iqser/common-ui'; -import { BaseListingComponent, DefaultListingServices } from '@shared/base/base-listing.component'; +import { CircleButtonTypes, DefaultListingServices, ListingComponent, TableColumnConfig } from '@iqser/common-ui'; import { fileAttributeTypesTranslations } from '../../../translations/file-attribute-types-translations'; +import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; @Component({ selector: 'redaction-active-fields-listing', @@ -11,10 +11,29 @@ import { fileAttributeTypesTranslations } from '../../../translations/file-attri styleUrls: ['./active-fields-listing.component.scss'], providers: [...DefaultListingServices] }) -export class ActiveFieldsListingComponent extends BaseListingComponent implements OnChanges { +export class ActiveFieldsListingComponent extends ListingComponent implements OnChanges { protected readonly _primaryKey = 'csvColumn'; readonly circleButtonTypes = CircleButtonTypes; readonly translations = fileAttributeTypesTranslations; + readonly tableHeaderLabel = _('file-attributes-csv-import.table-header.title'); + readonly tableColumnConfigs: TableColumnConfig[] = [ + { + label: _('file-attributes-csv-import.table-col-names.name'), + class: 'name' + }, + { label: _('file-attributes-csv-import.table-col-names.type') }, + { + label: _('file-attributes-csv-import.table-col-names.read-only'), + class: 'flex-center', + leftIcon: 'red:read-only' + }, + { + label: _('file-attributes-csv-import.table-col-names.primary'), + class: 'flex-center', + rightIcon: 'red:status-info', + rightIconTooltip: _('file-attributes-csv-import.table-col-names.primary-info-tooltip') + } + ]; readonly typeOptions = [ FileAttributeConfig.TypeEnum.TEXT, FileAttributeConfig.TypeEnum.NUMBER, diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html index 5ff6e9262..142aee418 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html +++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html @@ -4,7 +4,7 @@
-
{{ csvFile.name }}
+
{{ data.csv.name }}
{{ 'file-attributes-csv-import.total-rows' | translate: { rows: parseResult?.data?.length } }}
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts index 8ccc251f2..ede2f7481 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts @@ -1,14 +1,12 @@ import { Component, Inject, Injector } from '@angular/core'; import { AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms'; -import { AppStateService } from '@state/app-state.service'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import * as Papa from 'papaparse'; import { FileAttributeConfig, FileAttributesConfig, FileAttributesControllerService } from '@redaction/red-ui-http'; import { Observable } from 'rxjs'; import { map, startWith } from 'rxjs/operators'; import { Toaster } from '@services/toaster.service'; -import { TranslateService } from '@ngx-translate/core'; -import { BaseListingComponent, DefaultListingServices } from '@shared/base/base-listing.component'; +import { DefaultListingServices, ListingComponent, TableColumnConfig } from '@iqser/common-ui'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; export interface Field { @@ -27,15 +25,14 @@ export interface Field { styleUrls: ['./file-attributes-csv-import-dialog.component.scss'], providers: [...DefaultListingServices] }) -export class FileAttributesCsvImportDialogComponent extends BaseListingComponent { +export class FileAttributesCsvImportDialogComponent extends ListingComponent { protected readonly _primaryKey = 'csvColumn'; + readonly tableColumnConfigs: TableColumnConfig[] = []; - csvFile: File; - dossierTemplateId: string; parseResult: { data: any[]; errors: any[]; meta: any; fields: Field[] }; hoveredColumn: string; activeFields: Field[] = []; - baseConfigForm: FormGroup; + readonly baseConfigForm: FormGroup; isSearchOpen = false; previewExpanded = true; filteredKeyOptions: Observable; @@ -44,23 +41,19 @@ export class FileAttributesCsvImportDialogComponent extends BaseListingComponent initialParseConfig: { delimiter?: string; encoding?: string } = {}; constructor( - private readonly _appStateService: AppStateService, - private readonly _fileAttributesControllerService: FileAttributesControllerService, - private readonly _translateService: TranslateService, private readonly _toaster: Toaster, + protected readonly _injector: Injector, private readonly _formBuilder: FormBuilder, readonly dialogRef: MatDialogRef, - protected readonly _injector: Injector, + private readonly _fileAttributesControllerService: FileAttributesControllerService, @Inject(MAT_DIALOG_DATA) readonly data: { - csv: File; - dossierTemplateId: string; - existingConfiguration: FileAttributesConfig; + readonly csv: File; + readonly dossierTemplateId: string; + readonly existingConfiguration: FileAttributesConfig; } ) { super(_injector); - this.csvFile = data.csv; - this.dossierTemplateId = data.dossierTemplateId; this.baseConfigForm = this._formBuilder.group({ filenameMappingColumnHeaderName: ['', [Validators.required, this._autocompleteStringValidator()]], @@ -132,7 +125,7 @@ export class FileAttributesCsvImportDialogComponent extends BaseListingComponent encoding: this.baseConfigForm.get('encoding').value }; }); - reader.readAsText(this.csvFile, this.baseConfigForm.get('encoding').value); + reader.readAsText(this.data.csv, this.baseConfigForm.get('encoding').value); } getSample(csvColumn: string) { @@ -199,7 +192,7 @@ export class FileAttributesCsvImportDialogComponent extends BaseListingComponent }; try { - await this._fileAttributesControllerService.setFileAttributesConfig(fileAttributes, this.dossierTemplateId).toPromise(); + await this._fileAttributesControllerService.setFileAttributesConfig(fileAttributes, this.data.dossierTemplateId).toPromise(); this._toaster.success(_('file-attributes-csv-import.save.success'), { params: { count: this.activeFields.length } }); } catch (e) { this._toaster.error(_('file-attributes-csv-import.save.error')); diff --git a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.ts index f0c2f60e4..611657206 100644 --- a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.ts @@ -4,7 +4,7 @@ import { AuditControllerService, AuditResponse, AuditSearchRequest } from '@reda import { Moment } from 'moment'; import { applyIntervalConstraints } from '@utils/date-inputs-utils'; import { LoadingService } from '@services/loading.service'; -import { AutoUnsubscribeComponent } from '@iqser/common-ui'; +import { AutoUnsubscribe } from '@iqser/common-ui'; import { auditCategoriesTranslations } from '../../translations/audit-categories-translations'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { UserService } from '@services/user.service'; @@ -16,7 +16,7 @@ const PAGE_SIZE = 50; templateUrl: './audit-screen.component.html', styleUrls: ['./audit-screen.component.scss'] }) -export class AuditScreenComponent extends AutoUnsubscribeComponent implements OnDestroy { +export class AuditScreenComponent extends AutoUnsubscribe implements OnDestroy { readonly ALL_CATEGORIES = 'allCategories'; readonly ALL_USERS = _('audit-screen.all-users'); readonly translations = auditCategoriesTranslations; diff --git a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html index 7751a4b12..a75233396 100644 --- a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html @@ -20,30 +20,13 @@
-
- - {{ 'default-colors-screen.table-header.title' | translate: { length: entitiesService.allLength$ | async } }} - -
- -
- - - - -
-
-
+ -
@@ -57,7 +40,7 @@
div:not(.scrollbar-placeholder) { - padding-left: 24px; - } + .table-item { + > div:not(.scrollbar-placeholder) { + padding-left: 24px; + } - .color-wrapper { - align-items: center; + .color-wrapper { + align-items: center; - .color-square { - width: 16px; - height: 16px; - min-width: 16px; - } + .color-square { + width: 16px; + height: 16px; + min-width: 16px; } } } + } - &.has-scrollbar:hover { - ::ng-deep.cdk-virtual-scroll-content-wrapper { - grid-template-columns: 2fr 1fr 2fr; - } - } + &.has-scrollbar:hover ::ng-deep.cdk-virtual-scroll-content-wrapper { + grid-template-columns: 2fr 1fr 2fr; } } diff --git a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts index 31735d502..d3565b06f 100644 --- a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts @@ -2,13 +2,18 @@ import { ChangeDetectionStrategy, Component, Injector, OnInit } from '@angular/c import { AppStateService } from '@state/app-state.service'; import { Colors, DictionaryControllerService } from '@redaction/red-ui-http'; import { ActivatedRoute } from '@angular/router'; -import { PermissionsService } from '@services/permissions.service'; import { AdminDialogService } from '../../services/admin-dialog.service'; import { LoadingService } from '@services/loading.service'; -import { CircleButtonTypes } from '@iqser/common-ui'; -import { BaseListingComponent, DefaultListingServices } from '@shared/base/base-listing.component'; +import { CircleButtonTypes, DefaultListingServices, ListingComponent, TableColumnConfig } from '@iqser/common-ui'; import { DefaultColorType } from '@models/default-color-key.model'; import { defaultColorsTranslations } from '../../translations/default-colors-translations'; +import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; +import { UserService } from '@services/user.service'; + +interface ListItem { + readonly key: string; + readonly value: string; +} @Component({ templateUrl: './default-colors-screen.component.html', @@ -16,26 +21,31 @@ import { defaultColorsTranslations } from '../../translations/default-colors-tra changeDetection: ChangeDetectionStrategy.OnPush, providers: [...DefaultListingServices] }) -export class DefaultColorsScreenComponent - extends BaseListingComponent<{ - key: string; - value: string; - }> - implements OnInit -{ - readonly circleButtonTypes = CircleButtonTypes; - readonly translations = defaultColorsTranslations; +export class DefaultColorsScreenComponent extends ListingComponent implements OnInit { protected readonly _primaryKey = 'key'; + readonly circleButtonTypes = CircleButtonTypes; + readonly currentUser = this._userService.currentUser; + readonly translations = defaultColorsTranslations; + readonly tableHeaderLabel = _('default-colors-screen.table-header.title'); + readonly tableColumnConfigs: TableColumnConfig[] = [ + { + label: _('default-colors-screen.table-col-names.key'), + withSort: true, + column: 'key' + }, + { label: _('default-colors-screen.table-col-names.color'), class: 'flex-center' } + ]; + private _colorsObj: Colors; constructor( - private readonly _appStateService: AppStateService, - private readonly _activatedRoute: ActivatedRoute, - private readonly _dictionaryControllerService: DictionaryControllerService, - private readonly _dialogService: AdminDialogService, + protected readonly _injector: Injector, + private readonly _userService: UserService, private readonly _loadingService: LoadingService, - readonly permissionsService: PermissionsService, - protected readonly _injector: Injector + private readonly _activatedRoute: ActivatedRoute, + private readonly _appStateService: AppStateService, + private readonly _dialogService: AdminDialogService, + private readonly _dictionaryControllerService: DictionaryControllerService ) { super(_injector); _appStateService.activateDossierTemplate(_activatedRoute.snapshot.params.dossierTemplateId); diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html index 486f7251f..9c0be9858 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html @@ -20,72 +20,19 @@
-
- - - - {{ 'dictionary-listing.table-header.title' | translate: { length: (entitiesService.displayedLength$ | async) } }} - - - - -
- -
- -
-
-
- -
-
- - - - - - -
-
-
+ @@ -133,7 +80,7 @@
-
+
+ + + + +
+ +
+ +
+
+ diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.scss index 18cdad7f0..fa2c8322c 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.scss @@ -1,67 +1,55 @@ @import '../../../../../assets/styles/variables'; @import '../../../../../assets/styles/red-mixins'; -.header-item { - padding: 0 16px 0 10px; +redaction-table-header::ng-deep .header-item { + padding-right: 16px; +} - .attributes-actions-container { - display: flex; - flex: 1; - justify-content: flex-end; +.attributes-actions-container { + display: flex; + flex: 1; + justify-content: flex-end; - > *:not(:last-child) { - margin-right: 16px; - } + > *:not(:last-child) { + margin-right: 16px; } } -iqser-table-column-name::ng-deep { - > div { - padding-left: 10px !important; +.content-container cdk-virtual-scroll-viewport { + ::ng-deep.cdk-virtual-scroll-content-wrapper { + grid-template-columns: auto 2fr 1fr 1fr 1fr 11px; + + .table-item > div:not(.scrollbar-placeholder) { + display: flex; + flex-direction: row; + padding-left: 10px; + align-items: center; + justify-content: flex-start; + + &.center { + justify-content: center; + } + + .color-square { + width: 16px; + height: 16px; + min-width: 16px; + margin-right: 16px; + } + + .dict-name { + z-index: 1; + max-width: 100%; + } + + .stats-subtitle { + margin-top: 4px; + } + } } -} -.content-container { - cdk-virtual-scroll-viewport { - ::ng-deep.cdk-virtual-scroll-content-wrapper { - grid-template-columns: auto 2fr 1fr 1fr 1fr 11px; - - .table-item { - > div:not(.scrollbar-placeholder) { - display: flex; - flex-direction: row; - padding-left: 10px; - align-items: center; - justify-content: flex-start; - - &.center { - justify-content: center; - } - - .color-square { - width: 16px; - height: 16px; - min-width: 16px; - margin-right: 16px; - } - - .dict-name { - z-index: 1; - max-width: 100%; - } - - .stats-subtitle { - margin-top: 4px; - } - } - } - } - - &.has-scrollbar:hover { - ::ng-deep.cdk-virtual-scroll-content-wrapper { - grid-template-columns: auto 2fr 1fr 1fr 1fr; - } - } + &.has-scrollbar:hover ::ng-deep.cdk-virtual-scroll-content-wrapper { + grid-template-columns: auto 2fr 1fr 1fr 1fr; } } diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts index 8085ba4fe..b8a099343 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts @@ -4,14 +4,14 @@ import { DictionaryControllerService } from '@redaction/red-ui-http'; import { AppStateService } from '@state/app-state.service'; import { catchError, defaultIfEmpty, tap } from 'rxjs/operators'; import { forkJoin, of } from 'rxjs'; -import { PermissionsService } from '@services/permissions.service'; import { ActivatedRoute } from '@angular/router'; import { TypeValueWrapper } from '@models/file/type-value.wrapper'; import { TranslateService } from '@ngx-translate/core'; import { LoadingService } from '@services/loading.service'; -import { CircleButtonTypes, IconButtonTypes } from '@iqser/common-ui'; -import { BaseListingComponent, DefaultListingServices } from '@shared/base/base-listing.component'; +import { CircleButtonTypes, DefaultListingServices, IconButtonTypes, ListingComponent, TableColumnConfig } from '@iqser/common-ui'; import { AdminDialogService } from '../../services/admin-dialog.service'; +import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; +import { UserService } from '@services/user.service'; const toChartConfig = (dict: TypeValueWrapper): DoughnutChartConfig => ({ value: dict.entries?.length ?? 0, @@ -25,23 +25,41 @@ const toChartConfig = (dict: TypeValueWrapper): DoughnutChartConfig => ({ styleUrls: ['./dictionary-listing-screen.component.scss'], providers: [...DefaultListingServices] }) -export class DictionaryListingScreenComponent extends BaseListingComponent implements OnInit { +export class DictionaryListingScreenComponent extends ListingComponent implements OnInit { + protected readonly _primaryKey = 'label'; readonly iconButtonTypes = IconButtonTypes; readonly circleButtonTypes = CircleButtonTypes; + readonly currentUser = this._userService.currentUser; + readonly tableHeaderLabel = _('dictionary-listing.table-header.title'); + readonly tableColumnConfigs: TableColumnConfig[] = [ + { + label: _('dictionary-listing.table-col-names.type'), + withSort: true, + column: 'label' + }, + { + label: _('dictionary-listing.table-col-names.order-of-importance'), + withSort: true, + column: 'rank', + class: 'flex-center' + }, + { + label: _('dictionary-listing.table-col-names.hint-redaction'), + class: 'flex-center' + } + ]; chartData: DoughnutChartConfig[] = []; - protected readonly _primaryKey = 'label'; - constructor( - private readonly _dialogService: AdminDialogService, - private readonly _dictionaryControllerService: DictionaryControllerService, + protected readonly _injector: Injector, + private readonly _userService: UserService, private readonly _activatedRoute: ActivatedRoute, - private readonly _appStateService: AppStateService, private readonly _loadingService: LoadingService, + private readonly _appStateService: AppStateService, + private readonly _dialogService: AdminDialogService, private readonly _translateService: TranslateService, - readonly permissionsService: PermissionsService, - protected readonly _injector: Injector + private readonly _dictionaryControllerService: DictionaryControllerService ) { super(_injector); _loadingService.start(); diff --git a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts index 9e1768712..c161cd8a4 100644 --- a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts @@ -3,7 +3,7 @@ import { DigitalSignature, DigitalSignatureControllerService } from '@redaction/ import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { Toaster } from '@services/toaster.service'; import { lastIndexOfEnd } from '@utils/functions'; -import { AutoUnsubscribeComponent, IconButtonTypes } from '@iqser/common-ui'; +import { AutoUnsubscribe, IconButtonTypes } from '@iqser/common-ui'; import { LoadingService } from '@services/loading.service'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { UserService } from '@services/user.service'; @@ -13,7 +13,7 @@ import { UserService } from '@services/user.service'; templateUrl: './digital-signature-screen.component.html', styleUrls: ['./digital-signature-screen.component.scss'] }) -export class DigitalSignatureScreenComponent extends AutoUnsubscribeComponent implements OnDestroy { +export class DigitalSignatureScreenComponent extends AutoUnsubscribe implements OnDestroy { readonly iconButtonTypes = IconButtonTypes; readonly currentUser = this._userService.currentUser; diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html index c12b709fb..6ba4110cf 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html @@ -20,72 +20,19 @@
-
- - - - {{ - 'dossier-attributes-listing.table-header.title' | translate: { length: (entitiesService.displayedLength$ | async) } - }} - - - - -
- - - -
-
- -
-
- - - - - - - -
-
-
+ @@ -116,7 +63,7 @@ {{ translations[attribute.type] | translate }}
-
+
+ + + + +
+ + + +
+ diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts index d78abd454..b60c10eef 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts @@ -1,25 +1,40 @@ import { Component, Injector, OnInit } from '@angular/core'; -import { BaseListingComponent, DefaultListingServices } from '@shared/base/base-listing.component'; +import { CircleButtonTypes, DefaultListingServices, IconButtonTypes, ListingComponent, TableColumnConfig } from '@iqser/common-ui'; import { DossierAttributeConfig } from '@redaction/red-ui-http'; import { AppStateService } from '@state/app-state.service'; import { ActivatedRoute } from '@angular/router'; import { AdminDialogService } from '../../services/admin-dialog.service'; import { LoadingService } from '@services/loading.service'; -import { CircleButtonTypes, IconButtonTypes } from '@iqser/common-ui'; -import { PermissionsService } from '@services/permissions.service'; import { DossierAttributesService } from '@shared/services/controller-wrappers/dossier-attributes.service'; import { dossierAttributeTypesTranslations } from '../../translations/dossier-attribute-types-translations'; +import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; +import { UserService } from '@services/user.service'; @Component({ templateUrl: './dossier-attributes-listing-screen.component.html', styleUrls: ['./dossier-attributes-listing-screen.component.scss'], providers: [...DefaultListingServices] }) -export class DossierAttributesListingScreenComponent extends BaseListingComponent implements OnInit { +export class DossierAttributesListingScreenComponent extends ListingComponent implements OnInit { + protected readonly _primaryKey = 'label'; readonly iconButtonTypes = IconButtonTypes; readonly circleButtonTypes = CircleButtonTypes; + readonly currentUser = this._userService.currentUser; readonly translations = dossierAttributeTypesTranslations; - protected readonly _primaryKey = 'label'; + readonly tableHeaderLabel = _('dossier-attributes-listing.table-header.title'); + readonly tableColumnConfigs: TableColumnConfig[] = [ + { + label: _('dossier-attributes-listing.table-col-names.label'), + withSort: true, + column: 'label' + }, + { label: _('dossier-attributes-listing.table-col-names.placeholder') }, + { + label: _('dossier-attributes-listing.table-col-names.type'), + withSort: true, + column: 'type' + } + ]; constructor( protected readonly _injector: Injector, @@ -28,7 +43,7 @@ export class DossierAttributesListingScreenComponent extends BaseListingComponen private readonly _dialogService: AdminDialogService, private readonly _loadingService: LoadingService, private readonly _dossierAttributesService: DossierAttributesService, - readonly permissionsService: PermissionsService + private readonly _userService: UserService ) { super(_injector); _appStateService.activateDossierTemplate(_activatedRoute.snapshot.params.dossierTemplateId); diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html index f956818ae..a5c1b3a87 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html @@ -94,7 +94,7 @@ implements OnInit { +export class DossierTemplatesListingScreenComponent extends ListingComponent implements OnInit { protected readonly _primaryKey = 'name'; readonly iconButtonTypes = IconButtonTypes; readonly circleButtonTypes = CircleButtonTypes; diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html index 40423855e..325bf6532 100644 --- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html @@ -20,89 +20,13 @@
-
- - - - {{ 'file-attributes-listing.table-header.title' | translate: { length: (entitiesService.displayedLength$ | async) } }} - - - - -
- - - - - - -
-
- -
-
- - - - - - - - - - - -
- -
-
+ -
@@ -143,7 +66,7 @@
-
+
+ + + + +
+ + + + + + + +
+ diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss index 89eddfa02..e0f7e6e67 100644 --- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss @@ -5,60 +5,48 @@ justify-content: flex-end; } -.header-item { +redaction-table-header::ng-deep .header-item { padding: 0 24px 0 10px; } -iqser-table-column-name::ng-deep { - > div { - padding-left: 10px !important; +.content-container cdk-virtual-scroll-viewport { + ::ng-deep.cdk-virtual-scroll-content-wrapper { + grid-template-columns: auto 2fr 1fr 1fr 1fr 1fr 1fr 11px; + + .table-item { + > div:not(.scrollbar-placeholder) { + padding-left: 10px; + } + + > div { + &.center { + align-items: center; + } + + &.label span { + @include line-clamp(1); + } + + &.read-only mat-icon { + width: 14px; + height: 34px; + } + } + } + } + + &.has-scrollbar:hover ::ng-deep.cdk-virtual-scroll-content-wrapper { + grid-template-columns: auto 2fr 1fr 1fr 1fr 1fr 1fr; } } -.content-container { - .header-item { - .attributes-actions-container { - display: flex; - flex: 1; - justify-content: flex-end; +.attributes-actions-container { + display: flex; + flex: 1; + justify-content: flex-end; - > *:not(:last-child) { - margin-right: 10px; - } - } - } - - cdk-virtual-scroll-viewport { - ::ng-deep.cdk-virtual-scroll-content-wrapper { - grid-template-columns: auto 2fr 1fr 1fr 1fr 1fr 1fr 11px; - - .table-item { - > div:not(.scrollbar-placeholder) { - padding-left: 10px; - } - - > div { - &.center { - align-items: center; - } - - &.label span { - @include line-clamp(1); - } - - &.read-only mat-icon { - width: 14px; - height: 34px; - } - } - } - } - - &.has-scrollbar:hover { - ::ng-deep.cdk-virtual-scroll-content-wrapper { - grid-template-columns: auto 2fr 1fr 1fr 1fr 1fr 1fr; - } - } + > *:not(:last-child) { + margin-right: 10px; } } diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts index a0ba6da26..6f245c474 100644 --- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts @@ -1,13 +1,13 @@ import { ChangeDetectionStrategy, Component, ElementRef, Injector, OnDestroy, OnInit, ViewChild } from '@angular/core'; -import { PermissionsService } from '@services/permissions.service'; import { FileAttributeConfig, FileAttributesConfig, FileAttributesControllerService } from '@redaction/red-ui-http'; import { AppStateService } from '@state/app-state.service'; import { ActivatedRoute } from '@angular/router'; import { AdminDialogService } from '../../services/admin-dialog.service'; import { LoadingService } from '@services/loading.service'; -import { CircleButtonTypes, IconButtonTypes } from '@iqser/common-ui'; -import { BaseListingComponent, DefaultListingServices } from '@shared/base/base-listing.component'; +import { CircleButtonTypes, DefaultListingServices, IconButtonTypes, ListingComponent, TableColumnConfig } from '@iqser/common-ui'; import { fileAttributeTypesTranslations } from '../../translations/file-attribute-types-translations'; +import { UserService } from '@services/user.service'; +import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; @Component({ templateUrl: './file-attributes-listing-screen.component.html', @@ -15,22 +15,50 @@ import { fileAttributeTypesTranslations } from '../../translations/file-attribut changeDetection: ChangeDetectionStrategy.OnPush, providers: [...DefaultListingServices] }) -export class FileAttributesListingScreenComponent extends BaseListingComponent implements OnInit, OnDestroy { +export class FileAttributesListingScreenComponent extends ListingComponent implements OnInit, OnDestroy { + protected readonly _primaryKey = 'label'; readonly iconButtonTypes = IconButtonTypes; readonly circleButtonTypes = CircleButtonTypes; + readonly currentUser = this._userService.currentUser; readonly translations = fileAttributeTypesTranslations; - protected readonly _primaryKey = 'label'; + readonly tableHeaderLabel = _('file-attributes-listing.table-header.title'); + readonly tableColumnConfigs: TableColumnConfig[] = [ + { + label: _('file-attributes-listing.table-col-names.name'), + withSort: true, + column: 'label' + }, + { + label: _('file-attributes-listing.table-col-names.type'), + withSort: true, + column: 'type' + }, + { + label: _('file-attributes-listing.table-col-names.read-only'), + withSort: true, + column: 'editable', + class: 'flex-center' + }, + { label: _('file-attributes-listing.table-col-names.csv-column') }, + { + label: _('file-attributes-listing.table-col-names.primary'), + class: 'flex-center', + rightIcon: 'red:status-info', + rightIconTooltip: _('file-attributes-listing.table-col-names.primary-info-tooltip') + } + ]; + private _existingConfiguration: FileAttributesConfig; @ViewChild('fileInput') private _fileInput: ElementRef; constructor( - readonly permissionsService: PermissionsService, - private readonly _fileAttributesService: FileAttributesControllerService, - private readonly _appStateService: AppStateService, + protected readonly _injector: Injector, + private readonly _userService: UserService, private readonly _activatedRoute: ActivatedRoute, - private readonly _dialogService: AdminDialogService, private readonly _loadingService: LoadingService, - protected readonly _injector: Injector + private readonly _appStateService: AppStateService, + private readonly _dialogService: AdminDialogService, + private readonly _fileAttributesService: FileAttributesControllerService ) { super(_injector); _appStateService.activateDossierTemplate(_activatedRoute.snapshot.params.dossierTemplateId); diff --git a/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.ts index 8a09b2144..d01200f55 100644 --- a/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.ts @@ -8,7 +8,7 @@ import { SMTPConfigurationModel } from '@redaction/red-ui-http'; import { AppConfigService } from '@app-config/app-config.service'; -import { AutoUnsubscribeComponent, IconButtonTypes } from '@iqser/common-ui'; +import { AutoUnsubscribe, IconButtonTypes } from '@iqser/common-ui'; import { Toaster } from '@services/toaster.service'; import { LoadingService } from '@services/loading.service'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; @@ -19,7 +19,7 @@ import { UserService } from '@services/user.service'; templateUrl: './general-config-screen.component.html', styleUrls: ['./general-config-screen.component.scss'] }) -export class GeneralConfigScreenComponent extends AutoUnsubscribeComponent implements OnInit, OnDestroy { +export class GeneralConfigScreenComponent extends AutoUnsubscribe implements OnInit, OnDestroy { readonly iconButtonTypes = IconButtonTypes; readonly currentUser = this._userService.currentUser; diff --git a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts index f8d283271..b10ccb54b 100644 --- a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts @@ -4,8 +4,7 @@ import { Dossier } from '@redaction/red-ui-http'; import { LoadingService } from '@services/loading.service'; import { AppConfigKey, AppConfigService } from '@app-config/app-config.service'; import * as moment from 'moment'; -import { CircleButtonTypes, TableColumnConfig } from '@iqser/common-ui'; -import { BaseListingComponent, DefaultListingServices } from '@shared/base/base-listing.component'; +import { CircleButtonTypes, DefaultListingServices, ListingComponent, TableColumnConfig } from '@iqser/common-ui'; import { DossiersService } from '../../../dossier/services/dossiers.service'; import { AdminDialogService } from '../../services/admin-dialog.service'; import { ConfirmationDialogInput, TitleColors } from '@shared/dialogs/confirmation-dialog/confirmation-dialog.component'; @@ -25,7 +24,7 @@ interface DossierListItem extends Dossier { changeDetection: ChangeDetectionStrategy.OnPush, providers: [...DefaultListingServices, DossiersService] }) -export class TrashScreenComponent extends BaseListingComponent implements OnInit { +export class TrashScreenComponent extends ListingComponent implements OnInit { readonly itemSize = 80; readonly circleButtonTypes = CircleButtonTypes; readonly tableHeaderLabel = _('trash.table-header.title'); diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html index 38cab06b3..2997e0421 100644 --- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html @@ -33,49 +33,13 @@
-
- - - - {{ 'user-listing.table-header.title' | translate: { length: (entitiesService.displayedLength$ | async) } }} - - - -
- -
-
- - - - - - - - - -
-
-
+ @@ -129,3 +93,17 @@
+ + + + diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts index 248a9afe3..95a6cded1 100644 --- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts @@ -7,24 +7,31 @@ import { DoughnutChartConfig } from '@shared/components/simple-doughnut-chart/si import { TranslateChartService } from '@services/translate-chart.service'; import { LoadingService } from '@services/loading.service'; import { InitialsAvatarComponent } from '@shared/components/initials-avatar/initials-avatar.component'; -import { CircleButtonTypes, IconButtonTypes } from '@iqser/common-ui'; -import { BaseListingComponent, DefaultListingServices } from '@shared/base/base-listing.component'; +import { CircleButtonTypes, DefaultListingServices, IconButtonTypes, ListingComponent, TableColumnConfig } from '@iqser/common-ui'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; import { rolesTranslations } from '../../../../translations/roles-translations'; +import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; @Component({ templateUrl: './user-listing-screen.component.html', styleUrls: ['./user-listing-screen.component.scss'], providers: [...DefaultListingServices] }) -export class UserListingScreenComponent extends BaseListingComponent implements OnInit { +export class UserListingScreenComponent extends ListingComponent implements OnInit { protected readonly _primaryKey = 'id'; readonly translations = rolesTranslations; readonly iconButtonTypes = IconButtonTypes; readonly circleButtonTypes = CircleButtonTypes; readonly currentUser = this.userService.currentUser; readonly canDeleteSelected$ = this._canDeleteSelected$; + readonly tableHeaderLabel = _('user-listing.table-header.title'); + readonly tableColumnConfigs: TableColumnConfig[] = [ + { label: _('user-listing.table-col-names.name') }, + { label: _('user-listing.table-col-names.email') }, + { label: _('user-listing.table-col-names.active'), class: 'flex-center' }, + { label: _('user-listing.table-col-names.roles') } + ]; collapsedDetails = false; chartData: DoughnutChartConfig[] = []; @@ -43,7 +50,7 @@ export class UserListingScreenComponent extends BaseListingComponent { + private get _canDeleteSelected$(): Observable { const entities$ = this.entitiesService.selected$; return entities$.pipe(map(all => all.indexOf(this.currentUser) === -1)); } diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts index da559d2f5..fa94e8a2b 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts @@ -16,8 +16,7 @@ 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, TableColumnConfig } from '@iqser/common-ui'; -import { BaseListingComponent, DefaultListingServices } from '@shared/base/base-listing.component'; +import { DefaultListingServices, ListingComponent, NestedFilter, TableColumnConfig } from '@iqser/common-ui'; import { workloadTranslations } from '../../translations/workload-translations'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { fileStatusTranslations } from '../../translations/file-status-translations'; @@ -38,7 +37,7 @@ const isLeavingScreen = event => event instanceof NavigationStart && event.url ! providers: [...DefaultListingServices] }) export class DossierListingScreenComponent - extends BaseListingComponent + extends ListingComponent implements OnInit, AfterViewInit, OnDestroy, OnAttach, OnDetach { readonly itemSize = 85; diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts index bb2517e42..4338f7bc2 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts @@ -21,8 +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, TableColumnConfig } from '@iqser/common-ui'; -import { BaseListingComponent, DefaultListingServices } from '@shared/base/base-listing.component'; +import { CircleButtonTypes, DefaultListingServices, keyChecker, ListingComponent, NestedFilter, TableColumnConfig } from '@iqser/common-ui'; import { LoadingService } from '@services/loading.service'; import { DossierAttributesService } from '@shared/services/controller-wrappers/dossier-attributes.service'; import { DossierAttributeWithValue } from '@models/dossier-attributes.model'; @@ -39,10 +38,7 @@ import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; styleUrls: ['./dossier-overview-screen.component.scss'], providers: [...DefaultListingServices] }) -export class DossierOverviewScreenComponent - extends BaseListingComponent - implements OnInit, OnDestroy, OnDetach, OnAttach -{ +export class DossierOverviewScreenComponent extends ListingComponent implements OnInit, OnDestroy, OnDetach, OnAttach { readonly itemSize = 80; readonly circleButtonTypes = CircleButtonTypes; readonly currentUser = this._userService.currentUser; diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts index 56a7d8a1d..f6c1068d3 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts @@ -33,7 +33,7 @@ import { OnAttach, OnDetach } from '@utils/custom-route-reuse.strategy'; import { LoadingService } from '@services/loading.service'; import { stampPDFPage } from '@utils/page-stamper'; import { TranslateService } from '@ngx-translate/core'; -import { AutoUnsubscribeComponent, CircleButtonTypes, NestedFilter, processFilters } from '@iqser/common-ui'; +import { AutoUnsubscribe, CircleButtonTypes, NestedFilter, processFilters } from '@iqser/common-ui'; import { fileStatusTranslations } from '../../translations/file-status-translations'; import { handleFilterDelta } from '@shared/components/filters/popup-filter/utils/filter-utils'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; @@ -45,7 +45,7 @@ const ALL_HOTKEY_ARRAY = ['Escape', 'F', 'f']; templateUrl: './file-preview-screen.component.html', styleUrls: ['./file-preview-screen.component.scss'] }) -export class FilePreviewScreenComponent extends AutoUnsubscribeComponent implements OnInit, OnDestroy, OnAttach, OnDetach { +export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnInit, OnDestroy, OnAttach, OnDetach { readonly circleButtonTypes = CircleButtonTypes; readonly translations = fileStatusTranslations; diff --git a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts index d539d7ca4..b0c4a2b50 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts @@ -1,10 +1,9 @@ import { Component, Injector, OnDestroy } from '@angular/core'; -import { BaseListingComponent, DefaultListingServices } from '@shared/base/base-listing.component'; +import { DefaultListingServices, keyChecker, ListingComponent, TableColumnConfig } from '@iqser/common-ui'; import { MatchedDocument, SearchControllerService, SearchResult } from '@redaction/red-ui-http'; import { BehaviorSubject, Observable } from 'rxjs'; import { debounceTime, map, skip, switchMap, tap } from 'rxjs/operators'; import { ActivatedRoute, Router } from '@angular/router'; -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'; @@ -35,7 +34,7 @@ interface SearchInput { styleUrls: ['./search-screen.component.scss'], providers: [...DefaultListingServices] }) -export class SearchScreenComponent extends BaseListingComponent implements OnDestroy { +export class SearchScreenComponent extends ListingComponent implements OnDestroy { readonly fileStatusTranslations = fileStatusTranslations; readonly searchPositions = SearchPositions; diff --git a/apps/red-ui/src/app/modules/shared/base/base-listing.component.ts b/apps/red-ui/src/app/modules/shared/base/base-listing.component.ts deleted file mode 100644 index cb72ea82b..000000000 --- a/apps/red-ui/src/app/modules/shared/base/base-listing.component.ts +++ /dev/null @@ -1,90 +0,0 @@ -import { Directive, Injector, OnDestroy } from '@angular/core'; -import { - AutoUnsubscribeComponent, - Bind, - EntitiesService, - FilterService, - KeysOf, - SearchService, - SortingOrders, - SortingService, - TableColumnConfig -} from '@iqser/common-ui'; -import { combineLatest, Observable } from 'rxjs'; -import { distinctUntilChanged, map, switchMap } from 'rxjs/operators'; - -export const DefaultListingServices = [FilterService, SearchService, EntitiesService, SortingService] as const; - -@Directive() -export abstract class BaseListingComponent extends AutoUnsubscribeComponent implements OnDestroy { - readonly filterService = this._injector.get(FilterService); - readonly searchService = this._injector.get>(SearchService); - readonly sortingService = this._injector.get>(SortingService); - readonly entitiesService = this._injector.get>(EntitiesService); - - readonly noMatch$ = this._noMatch$; - readonly sortedDisplayedEntities$ = this._sortedDisplayedEntities$; - - readonly tableColumnConfigs: TableColumnConfig[]; - /** - * Key used in the *trackBy* function with **ngFor* or **cdkVirtualFor* - * and in the default sorting and as the search field - * @protected - */ - protected readonly _primaryKey: KeysOf; - - protected constructor(protected readonly _injector: Injector) { - super(); - setTimeout(() => this.setInitialConfig()); - } - - get allEntities(): T[] { - return this.entitiesService.all; - } - - private get _sortedDisplayedEntities$(): Observable { - const sort = entities => this.sortingService.defaultSort(entities); - const sortedEntities = () => this.entitiesService.displayed$.pipe(map(sort)); - return this.sortingService.sortingOption$.pipe(switchMap(sortedEntities)); - } - - private get _noMatch$(): Observable { - return combineLatest([this.entitiesService.allLength$, this.entitiesService.displayedLength$]).pipe( - map(([hasEntities, hasDisplayedEntities]) => hasEntities && !hasDisplayedEntities), - distinctUntilChanged() - ); - } - - setInitialConfig() { - this.sortingService.setSortingOption({ - column: this._primaryKey, - order: SortingOrders.asc - }); - this.searchService.setSearchKey(this._primaryKey); - } - - canBulkDelete$(hasPermission = true): Observable { - return this.entitiesService.areSomeSelected$.pipe( - map(areSomeEntitiesSelected => areSomeEntitiesSelected && hasPermission), - distinctUntilChanged() - ); - } - - toggleSelectAll() { - return this.entitiesService.selectAll(); - } - - toggleEntitySelected(event: MouseEvent, entity: T) { - event.stopPropagation(); - return this.entitiesService.select(entity); - } - - isSelected(entity: T): boolean { - return this.entitiesService.isSelected(entity); - } - - @Bind() - trackByPrimaryKey(index: number, item: T) { - return item[this._primaryKey]; - } -} diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts b/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts index 3bb732613..d45738b4f 100644 --- a/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts @@ -4,7 +4,7 @@ import { DossierWrapper } from '@state/model/dossier.wrapper'; import { FileStatusWrapper } from '@models/file/file-status.wrapper'; import { FileDownloadService } from '@upload-download/services/file-download.service'; import { Toaster } from '@services/toaster.service'; -import { AutoUnsubscribeComponent, CircleButtonType, CircleButtonTypes } from '@iqser/common-ui'; +import { AutoUnsubscribe, CircleButtonType, CircleButtonTypes } from '@iqser/common-ui'; import { TranslateService } from '@ngx-translate/core'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; @@ -16,7 +16,7 @@ export type MenuState = 'OPEN' | 'CLOSED'; styleUrls: ['./file-download-btn.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) -export class FileDownloadBtnComponent extends AutoUnsubscribeComponent implements OnDestroy { +export class FileDownloadBtnComponent extends AutoUnsubscribe implements OnDestroy { @Input() dossier: DossierWrapper; @Input() file: FileStatusWrapper | FileStatusWrapper[]; @Input() tooltipPosition: 'above' | 'below' | 'before' | 'after' = 'above'; diff --git a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts index 0db332be9..945913d13 100644 --- a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy } from '@angular/core'; import { UserService, UserWrapper } from '@services/user.service'; import { TranslateService } from '@ngx-translate/core'; -import { AutoUnsubscribeComponent } from '@iqser/common-ui'; +import { AutoUnsubscribe } from '@iqser/common-ui'; @Component({ selector: 'redaction-initials-avatar', @@ -9,7 +9,7 @@ import { AutoUnsubscribeComponent } from '@iqser/common-ui'; styleUrls: ['./initials-avatar.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) -export class InitialsAvatarComponent extends AutoUnsubscribeComponent implements OnChanges, OnDestroy { +export class InitialsAvatarComponent extends AutoUnsubscribe implements OnChanges, OnDestroy { @Input() userId: string; @Input() color = 'lightgray'; @Input() size: 'small' | 'large' = 'small'; diff --git a/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html b/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html index abec8eb74..796907993 100644 --- a/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html +++ b/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html @@ -12,7 +12,7 @@ - + diff --git a/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.ts b/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.ts index 24bdc72db..f3f4e98ba 100644 --- a/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.ts @@ -1,5 +1,6 @@ import { ChangeDetectionStrategy, Component, Input, TemplateRef } from '@angular/core'; -import { EntitiesService, Required, TableColumnConfig } from '@iqser/common-ui'; +import { EntitiesService, FilterService, Required, TableColumnConfig } from '@iqser/common-ui'; +import { map } from 'rxjs/operators'; @Component({ selector: 'redaction-table-header', @@ -14,5 +15,7 @@ export class TableHeaderComponent { @Input() selectionEnabled = false; @Input() bulkActions: TemplateRef; - constructor(readonly entitiesService: EntitiesService) {} + readonly hasQuickFilters$ = this.filterService.getGroup$('quickFilters').pipe(map(filters => !!filters)); + + constructor(readonly entitiesService: EntitiesService, readonly filterService: FilterService) {} } diff --git a/apps/red-ui/src/app/modules/shared/directives/sync-width.directive.ts b/apps/red-ui/src/app/modules/shared/directives/sync-width.directive.ts index 123f88eb1..dcf09fafc 100644 --- a/apps/red-ui/src/app/modules/shared/directives/sync-width.directive.ts +++ b/apps/red-ui/src/app/modules/shared/directives/sync-width.directive.ts @@ -25,8 +25,7 @@ export class SyncWidthDirective implements AfterViewInit, OnDestroy { @Debounce(10) matchWidth() { const headerItems = this._elementRef.nativeElement.children; - const tableRows = document.getElementsByClassName(this.redactionSyncWidth); - // const tableRows = this._elementRef.nativeElement.parentElement.getElementsByClassName(this.redactionSyncWidth); + const tableRows = this._elementRef.nativeElement.parentElement.parentElement.getElementsByClassName(this.redactionSyncWidth); if (!tableRows || !tableRows.length) { return;