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

Moved empty states, templates listing

Browse Source
This commit is contained in:
Adina Țeudan 2021-08-27 16:58:30 +03:00
parent fbd55abf6c
commit 4d20349512
27 changed files with 202 additions and 291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,11 +14,11 @@
[tableHeaderLabel]="tableHeaderLabel"
></iqser-table-header>
<redaction-empty-state
<iqser-empty-state
*ngIf="entitiesService.noData$ | async"
[text]="'downloads-list.no-data.title' | translate"
icon="red:download"
></redaction-empty-state>
></iqser-empty-state>
<cdk-virtual-scroll-viewport [itemSize]="itemSize" iqserHasScrollbar>
<!-- Table lines -->

4
apps/red-ui/src/app/components/notifications/notifications.component.html
View File

@ -1,11 +1,11 @@
<iqser-circle-button [matMenuTriggerFor]="overlay" [showDot]="hasUnreadNotifications" icon="red:notification"></iqser-circle-button>
<mat-menu #overlay="matMenu" backdropClass="notifications-backdrop" class="notifications-menu" xPosition="before">
<redaction-empty-state
<iqser-empty-state
*ngIf="!groupedNotifications.length"
[horizontalPadding]="40"
[text]="'notifications.no-data' | translate"
[verticalPadding]="0"
></redaction-empty-state>
></iqser-empty-state>
<div *ngFor="let group of groupedNotifications">
<div class="all-caps-label">{{ group.dateString }}</div>

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

@ -6,11 +6,11 @@
[tableHeaderLabel]="tableHeaderLabel"
></iqser-table-header>
<redaction-empty-state
<iqser-empty-state
*ngIf="entitiesService.noData$ | async"
[text]="'file-attributes-csv-import.no-data.title' | translate"
icon="red:attribute"
></redaction-empty-state>
></iqser-empty-state>
<cdk-virtual-scroll-viewport [itemSize]="50" iqserHasScrollbar>
<div

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

@ -107,11 +107,11 @@
<div class="scrollbar-placeholder"></div>
</div>
<redaction-empty-state
<iqser-empty-state
*ngIf="!logs?.totalHits"
[text]="'audit-screen.no-data.title' | translate"
icon="red:document"
></redaction-empty-state>
></iqser-empty-state>
<cdk-virtual-scroll-viewport [itemSize]="80" iqserHasScrollbar>
<div *cdkVirtualFor="let log of logs?.data" class="table-item">

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

@ -21,29 +21,21 @@
<div class="content-container">
<iqser-table
(noDataAction)="openAddEditDictionaryDialog()"
[actionsTemplate]="actionsTemplate"
[bulkActions]="bulkActions"
[itemSize]="80"
[noDataButtonLabel]="'dictionary-listing.no-data.action' | translate"
[noDataIcon]="'red:dictionary'"
[noDataText]="'dictionary-listing.no-data.title' | translate"
[noMatchText]="'dictionary-listing.no-match.title' | translate"
[routerLinkFn]="routerLinkFn"
[selectionEnabled]="true"
[showNoDataButton]="currentUser.isAdmin"
[tableColumnConfigs]="tableColumnConfigs"
[tableHeaderLabel]="tableHeaderLabel"
emptyColumnWidth="1fr"
></iqser-table>
<!-- <redaction-empty-state-->
<!-- (action)="openAddEditDictionaryDialog()"-->
<!-- *ngIf="entitiesService.noData$ | async"-->
<!-- [buttonLabel]="'dictionary-listing.no-data.action' | translate"-->
<!-- [showButton]="currentUser.isAdmin"-->
<!-- [text]="'dictionary-listing.no-data.title' | translate"-->
<!-- icon="red:dictionary"-->
<!-- ></redaction-empty-state>-->
<!-- <redaction-empty-state-->
<!-- *ngIf="noMatch$ | async"-->
<!-- [text]="'dictionary-listing.no-match.title' | translate"-->
<!-- ></redaction-empty-state>-->
</div>
<div class="right-container" iqserHasScrollbar>
@ -107,29 +99,29 @@
</div>
</ng-template>
<ng-template #rankTemplate let-entity="entity">
<ng-template #rankTemplate let-dict="entity">
<div class="cell center small-label">
{{ entity.rank }}
{{ dict.rank }}
</div>
</ng-template>
<ng-template #iconTemplate let-entity="entity">
<ng-template #iconTemplate let-dict="entity">
<div class="cell center">
<redaction-annotation-icon [dictType]="entity" [type]="entity.hint ? 'circle' : 'square'"></redaction-annotation-icon>
<redaction-annotation-icon [dictType]="dict" [type]="dict.hint ? 'circle' : 'square'"></redaction-annotation-icon>
</div>
</ng-template>
<ng-template #actionsTemplate let-entity="entity">
<ng-template #actionsTemplate let-dict="entity">
<div *ngIf="currentUser.isAdmin" class="action-buttons">
<iqser-circle-button
(action)="openDeleteDictionariesDialog($event, [entity])"
(action)="openDeleteDictionariesDialog($event, [dict])"
[tooltip]="'dictionary-listing.action.delete' | translate"
[type]="circleButtonTypes.dark"
icon="red:trash"
></iqser-circle-button>
<iqser-circle-button
(action)="openAddEditDictionaryDialog($event, entity)"
(action)="openAddEditDictionaryDialog($event, dict)"
[tooltip]="'dictionary-listing.action.edit' | translate"
[type]="circleButtonTypes.dark"
icon="iqser:edit"

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

@ -1,43 +1,44 @@
::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
:host {
::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell {
flex-direction: row;
align-items: center;
justify-content: flex-start;
&.center {
&.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;
}
}
.right-container {
display: flex;
width: 353px;
min-width: 353px;
justify-content: center;
padding: 50px 20px 30px 20px;
&.has-scrollbar:hover {
padding-right: 9px;
}
}
.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;
.page-header .actions {
display: flex;
justify-content: flex-end;
}
}
.right-container {
display: flex;
width: 353px;
min-width: 353px;
justify-content: center;
padding: 50px 20px 30px 20px;
&.has-scrollbar:hover {
padding-right: 9px;
}
}
.page-header .actions {
display: flex;
justify-content: flex-end;
}

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

@ -112,13 +112,11 @@ export class DictionaryListingScreenComponent extends ListingComponent<TypeValue
label: _('dictionary-listing.table-col-names.order-of-importance'),
sortByKey: 'rank',
class: 'flex-center',
width: '1fr',
template: this.rankTemplate
},
{
label: _('dictionary-listing.table-col-names.hint-redaction'),
class: 'flex-center',
width: '1fr',
template: this.iconTemplate
}
];

4
apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
View File

@ -16,13 +16,13 @@
<form *ngIf="digitalSignatureForm" [formGroup]="digitalSignatureForm" autocomplete="off">
<input #fileInput (change)="fileChanged($event, fileInput)" class="file-upload-input" hidden type="file" />
<redaction-empty-state
<iqser-empty-state
(action)="fileInput.click()"
*ngIf="!hasDigitalSignatureSet"
[buttonLabel]="'digital-signature-screen.no-data.action' | translate"
[text]="'digital-signature-screen.no-data.title' | translate"
buttonIcon="red:upload"
></redaction-empty-state>
></iqser-empty-state>
<div [class.hidden]="!hasDigitalSignatureSet" class="iqser-input-group required w-300">
<label translate="digital-signature-screen.certificate-name.label"></label>

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

@ -28,19 +28,19 @@
[tableHeaderLabel]="tableHeaderLabel"
></iqser-table-header>
<redaction-empty-state
<iqser-empty-state
(action)="openAddEditAttributeDialog($event)"
*ngIf="entitiesService.noData$ | async"
[buttonLabel]="'dossier-attributes-listing.no-data.action' | translate"
[showButton]="currentUser.isAdmin"
[text]="'dossier-attributes-listing.no-data.title' | translate"
icon="red:attribute"
></redaction-empty-state>
></iqser-empty-state>
<redaction-empty-state
<iqser-empty-state
*ngIf="noMatch$ | async"
[text]="'dossier-attributes-listing.no-match.title' | translate"
></redaction-empty-state>
></iqser-empty-state>
<cdk-virtual-scroll-viewport [itemSize]="50" iqserHasScrollbar>
<div

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

@ -12,83 +12,18 @@
<div class="red-content-inner">
<div class="content-container">
<iqser-table-header
<iqser-table
[bulkActions]="bulkActions"
[headerTemplate]="headerTemplate"
[itemSize]="80"
[noDataIcon]="'red:template'"
[noDataText]="'dossier-templates-listing.no-data.title' | translate"
[noMatchText]="'dossier-templates-listing.no-match.title' | translate"
[routerLinkFn]="routerLinkFn"
[selectionEnabled]="true"
[tableColumnConfigs]="tableColumnConfigs"
[tableHeaderLabel]="tableHeaderLabel"
>
<div class="actions flex-1">
<iqser-input-with-action
[(value)]="searchService.searchValue"
[placeholder]="'dossier-templates-listing.search' | translate"
></iqser-input-with-action>
<iqser-icon-button
(action)="openAddDossierTemplateDialog()"
*ngIf="currentUser.isAdmin && userPreferenceService.areDevFeaturesEnabled"
[label]="'dossier-templates-listing.add-new' | translate"
[type]="iconButtonTypes.primary"
icon="red:plus"
></iqser-icon-button>
</div>
</iqser-table-header>
<redaction-empty-state
*ngIf="entitiesService.noData$ | async"
[text]="'dossier-templates-listing.no-data.title' | translate"
icon="red:template"
></redaction-empty-state>
<redaction-empty-state
*ngIf="noMatch$ | async"
[text]="'dossier-templates-listing.no-match.title' | translate"
></redaction-empty-state>
<cdk-virtual-scroll-viewport [itemSize]="80" iqserHasScrollbar>
<div
*cdkVirtualFor="let dossierTemplate of sortedDisplayedEntities$ | async"
[routerLink]="[dossierTemplate.dossierTemplateId, 'dictionaries']"
class="table-item pointer"
>
<div (click)="toggleEntitySelected($event, dossierTemplate)" class="selection-column">
<iqser-round-checkbox [active]="isSelected(dossierTemplate)"></iqser-round-checkbox>
</div>
<div>
<div class="table-item-title heading">
{{ dossierTemplate.name }}
</div>
<div class="small-label stats-subtitle">
<div>
<mat-icon svgIcon="red:dictionary"></mat-icon>
{{
'dossier-templates-listing.dictionaries' | translate: { length: dossierTemplate.dictionariesCount }
}}
</div>
</div>
</div>
<div class="user-column">
<redaction-initials-avatar [userId]="dossierTemplate.createdBy" [withName]="true"></redaction-initials-avatar>
</div>
<div class="small-label">
{{ dossierTemplate.dateAdded | date: 'd MMM. yyyy' }}
</div>
<div>
<div class="small-label">
{{ dossierTemplate.dateModified | date: 'd MMM. yyyy' }}
</div>
<redaction-dossier-template-actions
(loadDossierTemplatesData)="loadDossierTemplatesData()"
[dossierTemplateId]="dossierTemplate.dossierTemplateId"
class="actions-container"
></redaction-dossier-template-actions>
</div>
<div class="scrollbar-placeholder"></div>
</div>
</cdk-virtual-scroll-viewport>
></iqser-table>
</div>
</div>
</div>
@ -103,3 +38,63 @@
icon="red:trash"
></iqser-circle-button>
</ng-template>
<ng-template #actionsTemplate let-dossierTemplate="entity">
<redaction-dossier-template-actions
(loadDossierTemplatesData)="loadDossierTemplatesData()"
[dossierTemplateId]="dossierTemplate.dossierTemplateId"
class="actions-container"
></redaction-dossier-template-actions>
</ng-template>
<ng-template #headerTemplate>
<div class="actions flex-1">
<iqser-input-with-action
[(value)]="searchService.searchValue"
[placeholder]="'dossier-templates-listing.search' | translate"
></iqser-input-with-action>
<iqser-icon-button
(action)="openAddDossierTemplateDialog()"
*ngIf="currentUser.isAdmin && userPreferenceService.areDevFeaturesEnabled"
[label]="'dossier-templates-listing.add-new' | translate"
[type]="iconButtonTypes.primary"
icon="red:plus"
></iqser-icon-button>
</div>
</ng-template>
<ng-template #nameTemplate let-dossierTemplate="entity">
<div class="cell">
<div class="table-item-title heading">
{{ dossierTemplate.name }}
</div>
<div class="small-label stats-subtitle">
<div>
<mat-icon svgIcon="red:dictionary"></mat-icon>
{{ 'dossier-templates-listing.dictionaries' | translate: { length: dossierTemplate.dictionariesCount } }}
</div>
</div>
</div>
</ng-template>
<ng-template #userTemplate let-dossierTemplate="entity">
<div class="cell user-column">
<redaction-initials-avatar [userId]="dossierTemplate.createdBy" [withName]="true"></redaction-initials-avatar>
</div>
</ng-template>
<ng-template #dateAddedTemplate let-dossierTemplate="entity">
<div class="cell small-label">
{{ dossierTemplate.dateAdded | date: 'd MMM. yyyy' }}
</div>
</ng-template>
<ng-template #dateModifiedTemplate let-dossierTemplate="entity">
<div class="cell">
<div class="small-label">
{{ dossierTemplate.dateModified | date: 'd MMM. yyyy' }}
</div>
<ng-container *ngTemplateOutlet="actionsTemplate; context: { entity: dossierTemplate }"></ng-container>
</div>
</ng-template>

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

@ -1,29 +1,15 @@
cdk-virtual-scroll-viewport {
::ng-deep.cdk-virtual-scroll-content-wrapper {
grid-template-columns: auto 1fr 1fr 1fr 1fr 11px;
:host {
::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell {
.stats-subtitle {
margin-top: 4px;
}
.table-item {
> div:not(.scrollbar-placeholder) {
padding-left: 10px;
.stats-subtitle {
margin-top: 4px;
}
.table-item-title {
max-width: 100%;
}
}
.table-item-title {
max-width: 100%;
}
}
&.has-scrollbar:hover {
::ng-deep.cdk-virtual-scroll-content-wrapper {
grid-template-columns: auto 1fr 1fr 1fr 1fr;
}
.page-header .actions > *:not(:last-child) {
margin-right: 16px;
}
}
.page-header .actions > *:not(:last-child) {
margin-right: 16px;
}

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

@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, Injector, OnInit } from '@angular/core';
import { ChangeDetectionStrategy, Component, forwardRef, Injector, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { AppStateService } from '@state/app-state.service';
import { UserPreferenceService } from '@services/user-preference.service';
import { AdminDialogService } from '../../services/admin-dialog.service';
@ -20,28 +20,21 @@ import { RouterHistoryService } from '@services/router-history.service';
templateUrl: './dossier-templates-listing-screen.component.html',
styleUrls: ['./dossier-templates-listing-screen.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [...DefaultListingServices]
providers: [
...DefaultListingServices,
{ provide: ListingComponent, useExisting: forwardRef(() => DossierTemplatesListingScreenComponent) }
]
})
export class DossierTemplatesListingScreenComponent extends ListingComponent<DossierTemplateModelWrapper> implements OnInit {
readonly iconButtonTypes = IconButtonTypes;
readonly circleButtonTypes = CircleButtonTypes;
readonly currentUser = this._userService.currentUser;
readonly tableHeaderLabel = _('dossier-templates-listing.table-header.title');
readonly tableColumnConfigs: readonly TableColumnConfig<DossierTemplateModelWrapper>[] = [
{
label: _('dossier-templates-listing.table-col-names.name'),
sortByKey: 'name'
},
{ label: _('dossier-templates-listing.table-col-names.created-by'), class: 'user-column' },
{
label: _('dossier-templates-listing.table-col-names.created-on'),
sortByKey: 'dateAdded'
},
{
label: _('dossier-templates-listing.table-col-names.modified-on'),
sortByKey: 'dateModified'
}
];
tableColumnConfigs: TableColumnConfig<DossierTemplateModelWrapper>[];
@ViewChild('nameTemplate', { static: true }) nameTemplate: TemplateRef<never>;
@ViewChild('userTemplate', { static: true }) userTemplate: TemplateRef<never>;
@ViewChild('dateAddedTemplate', { static: true }) dateAddedTemplate: TemplateRef<never>;
@ViewChild('dateModifiedTemplate', { static: true }) dateModifiedTemplate: TemplateRef<never>;
protected readonly _primaryKey = 'name';
constructor(
@ -57,7 +50,10 @@ export class DossierTemplatesListingScreenComponent extends ListingComponent<Dos
super(_injector);
}
routerLinkFn = (dossierTemplate: DossierTemplateModelWrapper) => [dossierTemplate.dossierTemplateId, 'dictionaries'];
ngOnInit(): void {
this._setColumnConfig();
this.loadDossierTemplatesData();
}
@ -79,6 +75,27 @@ export class DossierTemplatesListingScreenComponent extends ListingComponent<Dos
});
}
private _setColumnConfig() {
this.tableColumnConfigs = [
{
label: _('dossier-templates-listing.table-col-names.name'),
sortByKey: 'name',
template: this.nameTemplate
},
{ label: _('dossier-templates-listing.table-col-names.created-by'), class: 'user-column', template: this.userTemplate },
{
label: _('dossier-templates-listing.table-col-names.created-on'),
sortByKey: 'dateAdded',
template: this.dateAddedTemplate
},
{
label: _('dossier-templates-listing.table-col-names.modified-on'),
sortByKey: 'dateModified',
template: this.dateModifiedTemplate
}
];
}
private async _deleteTemplates(templateIds: string[] = this.entitiesService.selected.map(d => d.dossierTemplateId)) {
await this._dossierTemplateControllerService.deleteDossierTemplates(templateIds).toPromise();
this.entitiesService.setSelected([]);

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

@ -28,16 +28,13 @@
[tableHeaderLabel]="tableHeaderLabel"
></iqser-table-header>
<redaction-empty-state
<iqser-empty-state
*ngIf="entitiesService.noData$ | async"
[text]="'file-attributes-listing.no-data.title' | translate"
icon="red:attribute"
></redaction-empty-state>
></iqser-empty-state>
<redaction-empty-state
*ngIf="noMatch$ | async"
[text]="'file-attributes-listing.no-match.title' | translate"
></redaction-empty-state>
<iqser-empty-state *ngIf="noMatch$ | async" [text]="'file-attributes-listing.no-match.title' | translate"></iqser-empty-state>
<cdk-virtual-scroll-viewport [itemSize]="80" iqserHasScrollbar>
<div *cdkVirtualFor="let attribute of sortedDisplayedEntities$ | async" class="table-item">

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

@ -16,13 +16,13 @@
[tableHeaderLabel]="tableHeaderLabel"
></iqser-table-header>
<redaction-empty-state
<iqser-empty-state
*ngIf="entitiesService.noData$ | async"
[text]="'trash.no-data.title' | translate"
icon="red:template"
></redaction-empty-state>
></iqser-empty-state>
<redaction-empty-state *ngIf="noMatch$ | async" [text]="'trash.no-match.title' | translate"></redaction-empty-state>
<iqser-empty-state *ngIf="noMatch$ | async" [text]="'trash.no-match.title' | translate"></iqser-empty-state>
<cdk-virtual-scroll-viewport [itemSize]="itemSize" iqserHasScrollbar>
<div *cdkVirtualFor="let entity of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey" class="table-item">

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

@ -40,7 +40,7 @@
[tableHeaderLabel]="tableHeaderLabel"
></iqser-table-header>
<redaction-empty-state *ngIf="noMatch$ | async" [text]="'user-listing.no-match.title' | translate"></redaction-empty-state>
<iqser-empty-state *ngIf="noMatch$ | async" [text]="'user-listing.no-match.title' | translate"></iqser-empty-state>
<cdk-virtual-scroll-viewport [itemSize]="80" iqserHasScrollbar>
<!-- Table lines -->

4
apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html
View File

@ -138,7 +138,7 @@
tabindex="1"
>
<ng-container *ngIf="activeViewerPage && !displayedAnnotations.get(activeViewerPage)?.length">
<redaction-empty-state
<iqser-empty-state
[horizontalPadding]="24"
[text]="'file-preview.no-data.title' | translate"
[verticalPadding]="40"
@ -154,7 +154,7 @@
</a
>.
</ng-container>
</redaction-empty-state>
</iqser-empty-state>
<div class="no-annotations-buttons-container mt-32">
<iqser-icon-button
(action)="jumpToPreviousWithAnnotations()"

8
apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html
View File

@ -4,11 +4,11 @@
{{ 'edit-dossier-dialog.attributes.custom-attributes' | translate }}
</div>
<redaction-empty-state
<iqser-empty-state
*ngIf="!customAttributes.length"
[text]="'edit-dossier-dialog.attributes.no-custom-attributes' | translate"
icon="red:attribute"
></redaction-empty-state>
></iqser-empty-state>
<div *ngFor="let attr of customAttributes" [class.datepicker-wrapper]="isDate(attr)" class="iqser-input-group">
<label>{{ attr.label }}</label>
@ -34,11 +34,11 @@
{{ 'edit-dossier-dialog.attributes.image-attributes' | translate }}
</div>
<redaction-empty-state
<iqser-empty-state
*ngIf="!imageAttributes.length"
[text]="'edit-dossier-dialog.attributes.no-image-attributes' | translate"
icon="red:attribute"
></redaction-empty-state>
></iqser-empty-state>
<div
*ngFor="let attr of imageAttributes"

4
apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.html
View File

@ -11,11 +11,11 @@
></div>
</iqser-table-header>
<redaction-empty-state
<iqser-empty-state
*ngIf="entitiesService.noData$ | async"
[text]="'edit-dossier-dialog.deleted-documents.no-data.title' | translate"
icon="red:document"
></redaction-empty-state>
></iqser-empty-state>
<cdk-virtual-scroll-viewport *ngIf="(entitiesService.noData$ | async) === false" [itemSize]="itemSize" iqserHasScrollbar>
<div *cdkVirtualFor="let file of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey" class="table-item">

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

@ -10,16 +10,16 @@
<div class="content-container">
<iqser-table-header [tableColumnConfigs]="tableColumnConfigs" [tableHeaderLabel]="tableHeaderLabel"></iqser-table-header>
<redaction-empty-state
<iqser-empty-state
(action)="openAddDossierDialog()"
*ngIf="entitiesService.noData$ | async"
[buttonLabel]="'dossier-listing.no-data.action' | translate"
[showButton]="currentUser.isManager"
[text]="'dossier-listing.no-data.title' | translate"
icon="red:folder"
></redaction-empty-state>
></iqser-empty-state>
<redaction-empty-state *ngIf="noMatch$ | async" [text]="'dossier-listing.no-match.title' | translate"></redaction-empty-state>
<iqser-empty-state *ngIf="noMatch$ | async" [text]="'dossier-listing.no-match.title' | translate"></iqser-empty-state>
<cdk-virtual-scroll-viewport #scrollViewport [itemSize]="itemSize" iqserHasScrollbar>
<div

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

@ -43,16 +43,16 @@
[tableHeaderLabel]="tableHeaderLabel"
></iqser-table-header>
<redaction-empty-state
<iqser-empty-state
(action)="fileInput.click()"
*ngIf="entitiesService.noData$ | async"
[buttonLabel]="'dossier-overview.no-data.action' | translate"
[text]="'dossier-overview.no-data.title' | translate"
buttonIcon="red:upload"
icon="red:document"
></redaction-empty-state>
></iqser-empty-state>
<redaction-empty-state *ngIf="noMatch$ | async" [text]="'dossier-overview.no-match.title' | translate"></redaction-empty-state>
<iqser-empty-state *ngIf="noMatch$ | async" [text]="'dossier-overview.no-match.title' | translate"></iqser-empty-state>
<cdk-virtual-scroll-viewport #scrollViewport [itemSize]="itemSize" iqserHasScrollbar>
<div

4
apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html
View File

@ -147,12 +147,12 @@
</div>
<div class="right-container">
<redaction-empty-state
<iqser-empty-state
*ngIf="appStateService.activeFile.excluded && !viewDocumentInfo && !excludePages"
[horizontalPadding]="40"
[text]="'file-preview.tabs.is-excluded' | translate"
icon="red:needs-work"
></redaction-empty-state>
></iqser-empty-state>
<redaction-document-info
(closeDocumentInfoView)="viewDocumentInfo = false"

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

@ -13,11 +13,11 @@
<div class="content-container">
<iqser-table-header [tableColumnConfigs]="tableColumnConfigs" [tableHeaderLabel]="tableHeaderLabel"></iqser-table-header>
<redaction-empty-state
<iqser-empty-state
*ngIf="searchResult.length === 0"
[icon]="'iqser:search'"
[text]="'search-screen.no-data' | translate"
></redaction-empty-state>
></iqser-empty-state>
<cdk-virtual-scroll-viewport #scrollViewport [itemSize]="itemSize" iqserHasScrollbar>
<div

21
apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.html
View File

@ -1,21 +0,0 @@
<div
[ngStyle]="{
'padding-top': verticalPadding + 'px',
'padding-left': horizontalPadding + 'px',
'padding-right': horizontalPadding + 'px'
}"
class="empty-state"
>
<mat-icon *ngIf="icon" [svgIcon]="icon"></mat-icon>
<div class="ng-content-wrapper heading-l">
<ng-content></ng-content>
</div>
<div class="heading-l">{{ text }}</div>
<iqser-icon-button
(action)="action.emit()"
*ngIf="showButton"
[icon]="buttonIcon"
[label]="buttonLabel"
[type]="iconButtonTypes.primary"
></iqser-icon-button>
</div>

27
apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.scss
View File

@ -1,27 +0,0 @@
@import '../../../../../assets/styles/variables';
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
> mat-icon {
height: 60px;
width: 60px;
opacity: 0.1;
}
.heading-l {
color: $grey-7;
}
> .heading-l,
iqser-icon-button {
margin-top: 24px;
}
.ng-content-wrapper:not(:empty) + .heading-l {
display: none;
}
}

25
apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.ts
View File

@ -1,25 +0,0 @@
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { IconButtonTypes } from '@iqser/common-ui';
@Component({
selector: 'redaction-empty-state',
templateUrl: './empty-state.component.html',
styleUrls: ['./empty-state.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class EmptyStateComponent implements OnInit {
readonly iconButtonTypes = IconButtonTypes;
@Input() text: string;
@Input() icon: string;
@Input() showButton = true;
@Input() buttonIcon = 'red:plus';
@Input() buttonLabel: string;
@Input() horizontalPadding = 100;
@Input() verticalPadding = 120;
@Output() action = new EventEmitter();
ngOnInit(): void {
this.showButton = this.showButton && this.action.observers.length > 0;
}
}

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

@ -13,7 +13,6 @@ import { SimpleDoughnutChartComponent } from './components/simple-doughnut-chart
import { DictionaryAnnotationIconComponent } from './components/dictionary-annotation-icon/dictionary-annotation-icon.component';
import { HiddenActionComponent } from './components/hidden-action/hidden-action.component';
import { ConfirmationDialogComponent } from './dialogs/confirmation-dialog/confirmation-dialog.component';
import { EmptyStateComponent } from './components/empty-state/empty-state.component';
import { CommonUiModule } from '@iqser/common-ui';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
@ -36,7 +35,6 @@ const components = [
DictionaryAnnotationIconComponent,
HiddenActionComponent,
ConfirmationDialogComponent,
EmptyStateComponent,
SelectComponent,
SideNavComponent,
DictionaryManagerComponent,

2
libs/common-ui

@ -1 +1 @@
Subproject commit 1b7104ba14b1e3fae3276fd5f82d098e8a3b90c8
Subproject commit a659dcecd7115eda1320d9d7188788e1e00ccb18