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

Default colors, dictionaries, dossier templates

Browse Source
This commit is contained in:
Adina Țeudan 2021-10-01 15:51:00 +03:00
parent 0f93837529
commit ed3eba9083
11 changed files with 164 additions and 254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,7 +11,6 @@
[itemSize]="80"
[noDataText]="'downloads-list.no-data.title' | translate"
[selectionEnabled]="true"
emptyColumnWidth="auto"
noDataIcon="red:download"
></iqser-table>
</div>
@ -52,27 +51,25 @@
<div class="small-label">
{{ download.status }}
</div>
</div>
<div></div>
<div class="action-buttons">
<iqser-circle-button
(action)="downloadItem(download)"
*ngIf="download.status === 'READY' && !download.inProgress"
[tooltip]="'downloads-list.actions.download' | translate"
[type]="circleButtonTypes.dark"
icon="red:download"
></iqser-circle-button>
<div [class.active]="download.inProgress" class="action-buttons">
<iqser-circle-button
(action)="downloadItem(download)"
*ngIf="download.status === 'READY' && !download.inProgress"
[tooltip]="'downloads-list.actions.download' | translate"
[type]="circleButtonTypes.dark"
icon="red:download"
></iqser-circle-button>
<iqser-circle-button
(action)="deleteItems([download])"
[tooltip]="'downloads-list.actions.delete' | translate"
[type]="circleButtonTypes.dark"
icon="red:trash"
></iqser-circle-button>
<iqser-circle-button
(action)="deleteItems([download])"
[tooltip]="'downloads-list.actions.delete' | translate"
[type]="circleButtonTypes.dark"
icon="red:trash"
></iqser-circle-button>
<mat-spinner *ngIf="download.inProgress" diameter="15"></mat-spinner>
<mat-spinner *ngIf="download.inProgress" diameter="15"></mat-spinner>
</div>
</div>
</div>
</ng-template>

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

@ -20,31 +20,31 @@
<redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
<div class="content-container">
<iqser-table [actionsTemplate]="actionsTemplate" [itemSize]="80" emptyColumnWidth="2fr"></iqser-table>
<iqser-table [itemSize]="80" emptyColumnWidth="2fr"></iqser-table>
</div>
</div>
</section>
<ng-template #nameTemplate let-color="entity">
<div class="cell">
<div [translate]="translations[color.key]" class="table-item-title heading"></div>
</div>
</ng-template>
<ng-template #tableItemTemplate let-color="entity">
<div>
<div class="cell">
<div [translate]="translations[color.key]" class="table-item-title heading"></div>
</div>
<ng-template #colorTemplate let-color="entity">
<div class="cell color-wrapper">
<div [ngStyle]="{ 'background-color': color.value }" class="color-square"></div>
</div>
</ng-template>
<div class="cell color-wrapper">
<div [ngStyle]="{ 'background-color': color.value }" class="color-square"></div>
</div>
<ng-template #actionsTemplate let-color="entity">
<div class="action-buttons">
<iqser-circle-button
(action)="openEditColorDialog($event, color)"
*ngIf="currentUser.isAdmin"
[tooltip]="'default-colors-screen.action.edit' | translate"
[type]="circleButtonTypes.dark"
icon="iqser:edit"
></iqser-circle-button>
<div class="cell">
<div class="action-buttons">
<iqser-circle-button
(action)="openEditColorDialog($event, color)"
*ngIf="currentUser.isAdmin"
[tooltip]="'default-colors-screen.action.edit' | translate"
[type]="circleButtonTypes.dark"
icon="iqser:edit"
></iqser-circle-button>
</div>
</div>
</div>
</ng-template>

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

@ -1,15 +1,9 @@
:host ::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell {
&: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;
}
}

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

@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, forwardRef, Injector, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { ChangeDetectionStrategy, Component, forwardRef, Injector, OnInit } from '@angular/core';
import { AppStateService } from '@state/app-state.service';
import { Colors } from '@redaction/red-ui-http';
import { ActivatedRoute } from '@angular/router';
@ -29,13 +29,14 @@ interface ListItem extends IListable {
providers: [...DefaultListingServices, { provide: ListingComponent, useExisting: forwardRef(() => DefaultColorsScreenComponent) }]
})
export class DefaultColorsScreenComponent extends ListingComponent<ListItem> implements OnInit {
@ViewChild('nameTemplate', { static: true }) nameTemplate: TemplateRef<unknown>;
@ViewChild('colorTemplate', { static: true }) colorTemplate: TemplateRef<unknown>;
readonly circleButtonTypes = CircleButtonTypes;
readonly currentUser = this._userService.currentUser;
readonly translations = defaultColorsTranslations;
readonly tableHeaderLabel = _('default-colors-screen.table-header.title');
tableColumnConfigs: TableColumnConfig<ListItem>[];
readonly tableColumnConfigs: TableColumnConfig<ListItem>[] = [
{ label: _('default-colors-screen.table-col-names.key'), sortByKey: 'searchKey', width: '2fr' },
{ label: _('default-colors-screen.table-col-names.color'), class: 'flex-center' }
];
private _colorsObj: Colors;
constructor(
@ -52,7 +53,6 @@ export class DefaultColorsScreenComponent extends ListingComponent<ListItem> imp
}
async ngOnInit() {
this._configureTableColumns();
await this._loadColors();
}
@ -72,22 +72,6 @@ export class DefaultColorsScreenComponent extends ListingComponent<ListItem> imp
);
}
private _configureTableColumns() {
this.tableColumnConfigs = [
{
label: _('default-colors-screen.table-col-names.key'),
sortByKey: 'searchKey',
template: this.nameTemplate,
width: '2fr'
},
{
label: _('default-colors-screen.table-col-names.color'),
class: 'flex-center',
template: this.colorTemplate
}
];
}
private async _loadColors() {
this._loadingService.start();
const data = await this._appStateService.loadColors(this._appStateService.activeDossierTemplateId).toPromise();

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

@ -22,7 +22,6 @@
<div class="content-container">
<iqser-table
(noDataAction)="openAddEditDictionaryDialog()"
[actionsTemplate]="actionsTemplate"
[bulkActions]="bulkActions"
[headerTemplate]="headerTemplate"
[itemSize]="80"
@ -78,53 +77,51 @@
</div>
</ng-template>
<ng-template #labelTemplate let-entity="entity">
<div class="cell">
<div [ngStyle]="{ 'background-color': entity.hexColor }" class="color-square"></div>
<div class="dict-name">
<div class="table-item-title heading">
{{ entity.label }}
<ng-template #tableItemTemplate let-dict="entity">
<div>
<div class="cell">
<div [ngStyle]="{ 'background-color': dict.hexColor }" class="color-square"></div>
<div class="dict-name">
<div class="table-item-title heading">
{{ dict.label }}
</div>
<div class="small-label stats-subtitle">
<div>
<mat-icon svgIcon="red:entries"></mat-icon>
{{ dict.entries?.length }}
</div>
<div *ngIf="!dict.caseInsensitive">
<mat-icon svgIcon="red:case-sensitive"></mat-icon>
{{ 'dictionary-listing.case-sensitive' | translate }}
</div>
</div>
</div>
<div class="small-label stats-subtitle">
<div>
<mat-icon svgIcon="red:entries"></mat-icon>
{{ entity.entries?.length }}
</div>
<div *ngIf="!entity.caseInsensitive">
<mat-icon svgIcon="red:case-sensitive"></mat-icon>
{{ 'dictionary-listing.case-sensitive' | translate }}
</div>
</div>
<div class="cell center small-label">
{{ dict.rank }}
</div>
<div class="cell center">
<redaction-annotation-icon [dictType]="dict" [type]="dict.hint ? 'circle' : 'square'"></redaction-annotation-icon>
</div>
<div class="cell">
<div *ngIf="currentUser.isAdmin" class="action-buttons">
<iqser-circle-button
(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, dict)"
[tooltip]="'dictionary-listing.action.edit' | translate"
[type]="circleButtonTypes.dark"
icon="iqser:edit"
></iqser-circle-button>
</div>
</div>
</div>
</ng-template>
<ng-template #rankTemplate let-dict="entity">
<div class="cell center small-label">
{{ dict.rank }}
</div>
</ng-template>
<ng-template #iconTemplate let-dict="entity">
<div class="cell center">
<redaction-annotation-icon [dictType]="dict" [type]="dict.hint ? 'circle' : 'square'"></redaction-annotation-icon>
</div>
</ng-template>
<ng-template #actionsTemplate let-dict="entity">
<div *ngIf="currentUser.isAdmin" class="action-buttons">
<iqser-circle-button
(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, dict)"
[tooltip]="'dictionary-listing.action.edit' | translate"
[type]="circleButtonTypes.dark"
icon="iqser:edit"
></iqser-circle-button>
</div>
</ng-template>

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

@ -1,39 +1,36 @@
: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;
.cell {
flex-direction: row !important;
align-items: 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;
}
&:not(.center) {
justify-content: flex-start !important;
}
.right-container {
display: flex;
width: 353px;
min-width: 353px;
justify-content: center;
padding: 50px 20px 30px 20px;
.color-square {
width: 16px;
height: 16px;
min-width: 16px;
margin-right: 16px;
}
&.has-scrollbar:hover {
padding-right: 9px;
}
.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;
}
}

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

@ -1,4 +1,4 @@
import { Component, forwardRef, Injector, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { Component, forwardRef, Injector, OnInit } from '@angular/core';
import { DoughnutChartConfig } from '@shared/components/simple-doughnut-chart/simple-doughnut-chart.component';
import { AppStateService } from '@state/app-state.service';
import { catchError, defaultIfEmpty, tap } from 'rxjs/operators';
@ -36,11 +36,12 @@ export class DictionaryListingScreenComponent extends ListingComponent<TypeValue
readonly circleButtonTypes = CircleButtonTypes;
readonly currentUser = this._userService.currentUser;
readonly tableHeaderLabel = _('dictionary-listing.table-header.title');
tableColumnConfigs: TableColumnConfig<TypeValue>[];
readonly tableColumnConfigs: TableColumnConfig<TypeValue>[] = [
{ label: _('dictionary-listing.table-col-names.type'), sortByKey: 'searchKey', width: '2fr' },
{ label: _('dictionary-listing.table-col-names.order-of-importance'), sortByKey: 'rank', class: 'flex-center' },
{ label: _('dictionary-listing.table-col-names.hint-redaction'), class: 'flex-center' }
];
chartData: DoughnutChartConfig[] = [];
@ViewChild('labelTemplate', { static: true }) labelTemplate: TemplateRef<never>;
@ViewChild('rankTemplate', { static: true }) rankTemplate: TemplateRef<never>;
@ViewChild('iconTemplate', { static: true }) iconTemplate: TemplateRef<never>;
constructor(
protected readonly _injector: Injector,
@ -58,7 +59,6 @@ export class DictionaryListingScreenComponent extends ListingComponent<TypeValue
}
ngOnInit(): void {
this._configureTableColumns();
this._loadDictionaryData();
}
@ -97,28 +97,6 @@ export class DictionaryListingScreenComponent extends ListingComponent<TypeValue
);
}
private _configureTableColumns() {
this.tableColumnConfigs = [
{
label: _('dictionary-listing.table-col-names.type'),
sortByKey: 'searchKey',
width: '2fr',
template: this.labelTemplate
},
{
label: _('dictionary-listing.table-col-names.order-of-importance'),
sortByKey: 'rank',
class: 'flex-center',
template: this.rankTemplate
},
{
label: _('dictionary-listing.table-col-names.hint-redaction'),
class: 'flex-center',
template: this.iconTemplate
}
];
}
private _loadDictionaryData(loadEntries = true): void {
const appStateDictionaryData = this._appStateService.dictionaryData[this._appStateService.activeDossierTemplateId];
const entities = Object.values(appStateDictionaryData).filter(d => !d.virtual);

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

@ -61,37 +61,33 @@
</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 } }}
<ng-template #tableItemTemplate let-dossierTemplate="entity">
<div>
<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>
</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 class="cell user-column">
<redaction-initials-avatar [userId]="dossierTemplate.createdBy" [withName]="true"></redaction-initials-avatar>
</div>
<div class="cell small-label">
{{ dossierTemplate.dateAdded | date: 'd MMM. yyyy' }}
</div>
<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-container *ngTemplateOutlet="actionsTemplate; context: { entity: dossierTemplate }"></ng-container>
</div>
</ng-template>

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

@ -1,15 +1,7 @@
: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-title {
max-width: 100%;
}
}
.page-header .actions > *:not(:last-child) {
margin-right: 16px;
}
.stats-subtitle {
margin-top: 4px;
}
.table-item-title {
max-width: 100%;
}

39
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, forwardRef, Injector, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { ChangeDetectionStrategy, Component, forwardRef, Injector, OnInit } from '@angular/core';
import { AppStateService } from '@state/app-state.service';
import { UserPreferenceService } from '@services/user-preference.service';
import { AdminDialogService } from '../../services/admin-dialog.service';
@ -31,11 +31,12 @@ export class DossierTemplatesListingScreenComponent extends ListingComponent<Dos
readonly circleButtonTypes = CircleButtonTypes;
readonly currentUser = this._userService.currentUser;
readonly tableHeaderLabel = _('dossier-templates-listing.table-header.title');
tableColumnConfigs: TableColumnConfig<DossierTemplate>[];
@ViewChild('nameTemplate', { static: true }) nameTemplate: TemplateRef<unknown>;
@ViewChild('userTemplate', { static: true }) userTemplate: TemplateRef<unknown>;
@ViewChild('dateAddedTemplate', { static: true }) dateAddedTemplate: TemplateRef<unknown>;
@ViewChild('dateModifiedTemplate', { static: true }) dateModifiedTemplate: TemplateRef<unknown>;
readonly tableColumnConfigs: TableColumnConfig<DossierTemplate>[] = [
{ label: _('dossier-templates-listing.table-col-names.name'), sortByKey: 'searchKey' },
{ 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' }
];
constructor(
protected readonly _injector: Injector,
@ -52,7 +53,6 @@ export class DossierTemplatesListingScreenComponent extends ListingComponent<Dos
}
ngOnInit(): void {
this._configureTableColumns();
this.loadDossierTemplatesData();
}
@ -74,31 +74,6 @@ export class DossierTemplatesListingScreenComponent extends ListingComponent<Dos
});
}
private _configureTableColumns() {
this.tableColumnConfigs = [
{
label: _('dossier-templates-listing.table-col-names.name'),
sortByKey: 'searchKey',
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)

2
libs/common-ui

@ -1 +1 @@
Subproject commit 551db967e2d747932579464f00e4e497c91dc628
Subproject commit c0b445b06ed86a07c4b9aa1803b29b9384021d54