RED-6801 - WIP on Effective dossier dictionary in Dossier Settings
This commit is contained in:
parent
9816cc0ec2
commit
a7001188ac
@ -1,28 +1,72 @@
|
||||
<div class="header-wrapper">
|
||||
<div class="header-left">
|
||||
<div class="heading">
|
||||
<div>{{ dossierDictionary?.label }}</div>
|
||||
<div class="small-label stats-subtitle">
|
||||
<div>
|
||||
<mat-icon svgIcon="red:entries"></mat-icon>
|
||||
{{ 'edit-dossier-dialog.dictionary.entries' | translate : { length: (dossierDictionary?.entries || []).length } }}
|
||||
<div class="dictionary-content">
|
||||
<div class="dictionaries">
|
||||
<div
|
||||
class="dictionary"
|
||||
[class.active]="dictionary.id === selectedDictionary.id"
|
||||
*ngFor="let dictionary of dictionaries"
|
||||
(click)="selectedDictionary = dictionary"
|
||||
>
|
||||
<redaction-annotation-icon [color]="dictionary.hexColor" label="R" type="square"></redaction-annotation-icon>
|
||||
<div class="details">
|
||||
<span> {{ dictionary.label }} </span>
|
||||
<div class="small-label stats-subtitle">
|
||||
<div>
|
||||
<mat-icon svgIcon="red:entries"></mat-icon>
|
||||
{{ dictionary.entries.length }} entries
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="entries">
|
||||
<div class="header-wrapper">
|
||||
<div class="header-left">
|
||||
<div class="heading">
|
||||
<div class="flex-align-items-center">
|
||||
{{ dossierDictionary?.label }}
|
||||
<iqser-circle-button
|
||||
(action)="openEditDetailsDialog()"
|
||||
[icon]="canEdit ? 'iqser:edit' : 'red:info'"
|
||||
[tooltip]="
|
||||
canEdit
|
||||
? ('edit-dossier-dialog.dictionary.edit' | translate)
|
||||
: ('edit-dossier-dialog.dictionary.info' | translate)
|
||||
"
|
||||
></iqser-circle-button>
|
||||
</div>
|
||||
<div class="small-label stats-subtitle">
|
||||
<div>
|
||||
<mat-icon svgIcon="red:entries"></mat-icon>
|
||||
{{
|
||||
'edit-dossier-dialog.dictionary.entries' | translate : { length: (dossierDictionary?.entries || []).length }
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-right flex">
|
||||
<iqser-icon-button
|
||||
[label]="'edit-dossier-dialog.dictionary.to-redact' | translate"
|
||||
[active]="activeDictionaryTab === dictionaryTab.TO_REDACT"
|
||||
(click)="selectDictionaryTab(dictionaryTab.TO_REDACT)"
|
||||
></iqser-icon-button>
|
||||
<iqser-icon-button
|
||||
[label]="'edit-dossier-dialog.dictionary.false-positives' | translate"
|
||||
[active]="activeDictionaryTab === dictionaryTab.FALSE_POSITIVES"
|
||||
(click)="selectDictionaryTab(dictionaryTab.FALSE_POSITIVES)"
|
||||
></iqser-icon-button>
|
||||
<iqser-icon-button
|
||||
[label]="'edit-dossier-dialog.dictionary.false-recommendations' | translate"
|
||||
[active]="activeDictionaryTab === dictionaryTab.FALSE_RECOMMENDATIONS"
|
||||
(click)="selectDictionaryTab(dictionaryTab.FALSE_RECOMMENDATIONS)"
|
||||
></iqser-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<iqser-circle-button
|
||||
(action)="openEditDetailsDialog()"
|
||||
[icon]="canEdit ? 'iqser:edit' : 'red:info'"
|
||||
[tooltip]="canEdit ? ('edit-dossier-dialog.dictionary.edit' | translate) : ('edit-dossier-dialog.dictionary.info' | translate)"
|
||||
class="mt-20"
|
||||
></iqser-circle-button>
|
||||
<redaction-dictionary-manager
|
||||
[canEdit]="canEdit"
|
||||
[initialEntries]="dossierDictionary?.entries || []"
|
||||
[withFloatingActions]="false"
|
||||
></redaction-dictionary-manager>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<redaction-dictionary-manager
|
||||
[canEdit]="canEdit"
|
||||
[initialEntries]="dossierDictionary?.entries || []"
|
||||
[withFloatingActions]="false"
|
||||
></redaction-dictionary-manager>
|
||||
|
||||
@ -1,29 +1,68 @@
|
||||
:host {
|
||||
flex: 1;
|
||||
:host ::ng-deep .content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dictionary-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.dictionaries {
|
||||
border-right: 1px solid var(--iqser-separator);
|
||||
width: 30%;
|
||||
overflow-y: scroll;
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
.dictionary {
|
||||
height: 40px;
|
||||
padding: 15px;
|
||||
border: 1px solid var(--iqser-separator);
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
.iqser-input-group {
|
||||
margin-left: 24px;
|
||||
span {
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--iqser-grey-8);
|
||||
box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.2);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
.entries {
|
||||
width: 100%;
|
||||
padding: 24px 32px;
|
||||
.header-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.display-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
.header-left {
|
||||
display: flex;
|
||||
|
||||
> div {
|
||||
font-weight: 600;
|
||||
.iqser-input-group {
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.display-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
|
||||
> div {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,8 +5,14 @@ import { PermissionsService } from '@services/permissions.service';
|
||||
import { DictionaryManagerComponent } from '@shared/components/dictionary-manager/dictionary-manager.component';
|
||||
import { DictionaryService } from '@services/entity-services/dictionary.service';
|
||||
import { CircleButtonTypes, LoadingService } from '@iqser/common-ui';
|
||||
import { firstValueFrom } from 'rxjs';
|
||||
import { DossiersDialogService } from '../../../services/dossiers-dialog.service';
|
||||
import { tap } from 'rxjs/operators';
|
||||
|
||||
enum DictionaryTab {
|
||||
TO_REDACT,
|
||||
FALSE_POSITIVES,
|
||||
FALSE_RECOMMENDATIONS,
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'redaction-edit-dossier-dictionary',
|
||||
@ -18,8 +24,12 @@ export class EditDossierDictionaryComponent implements EditDossierSectionInterfa
|
||||
|
||||
canEdit = false;
|
||||
dossierDictionary: Dictionary;
|
||||
dictionaries: Dictionary[];
|
||||
selectedDictionary: Dictionary;
|
||||
activeDictionaryTab = DictionaryTab.TO_REDACT;
|
||||
|
||||
readonly circleButtonTypes = CircleButtonTypes;
|
||||
readonly dictionaryTab = DictionaryTab;
|
||||
@ViewChild(DictionaryManagerComponent, { static: false }) private readonly _dictionaryManager: DictionaryManagerComponent;
|
||||
|
||||
constructor(
|
||||
@ -77,8 +87,16 @@ export class EditDossierDictionaryComponent implements EditDossierSectionInterfa
|
||||
});
|
||||
}
|
||||
|
||||
selectDictionaryTab(selectedDictionaryTab: DictionaryTab) {
|
||||
this.activeDictionaryTab = selectedDictionaryTab;
|
||||
}
|
||||
|
||||
async #updateDossierDictionary() {
|
||||
const { dossierId, dossierTemplateId } = this.dossier;
|
||||
this.dossierDictionary = await this._dictionaryService.loadDossierDictionary(dossierTemplateId, dossierId);
|
||||
|
||||
this.dictionaries = this._dictionaryService.getPossibleDictionaries(dossierTemplateId, false);
|
||||
this.dictionaries.forEach(d => console.log(d.hexColor));
|
||||
this.selectedDictionary = this.dictionaries[0];
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,14 +13,16 @@
|
||||
flex: 1;
|
||||
|
||||
.content {
|
||||
padding: 24px 32px;
|
||||
overflow: auto;
|
||||
@include common-mixins.scroll-bar;
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
padding: 24px 32px;
|
||||
margin-right: 16px;
|
||||
|
||||
&.no-padding {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&.no-actions {
|
||||
|
||||
@ -89,7 +89,7 @@ export class EditDossierDialogComponent extends BaseDialogComponent implements A
|
||||
}
|
||||
|
||||
get noPaddingTab(): boolean {
|
||||
return ['dossierAttributes'].includes(this.activeNav);
|
||||
return ['dossierAttributes', 'dossierDictionary'].includes(this.activeNav);
|
||||
}
|
||||
|
||||
get showHeading(): boolean {
|
||||
|
||||
@ -1132,7 +1132,10 @@
|
||||
"dictionary": {
|
||||
"edit": "",
|
||||
"entries": "{length} {length, plural, one{entry} other{entries}}",
|
||||
"info": ""
|
||||
"false-positives": "",
|
||||
"false-recommendations": "",
|
||||
"info": "",
|
||||
"to-redact": ""
|
||||
},
|
||||
"general-info": {
|
||||
"form": {
|
||||
@ -1647,8 +1650,6 @@
|
||||
"license-info-screen": {
|
||||
"backend-version": "Backend-Version der Anwendung",
|
||||
"chart": {
|
||||
"cumulative": "Seiten insgesamt",
|
||||
"legend": "",
|
||||
"pages-per-month": "Seiten pro Monat",
|
||||
"total-pages": "Gesamtzahl der Seiten"
|
||||
},
|
||||
|
||||
@ -686,7 +686,7 @@
|
||||
},
|
||||
"revert-changes": "Revert",
|
||||
"save-changes": "Save Changes",
|
||||
"search": "Search...",
|
||||
"search": "Search entries ...",
|
||||
"select-dictionary": "Select a dictionary above to compare with the current one.",
|
||||
"success": {
|
||||
"generic": "Dictionary updated!"
|
||||
@ -1131,8 +1131,11 @@
|
||||
"delete-successful": "Dossier {dossierName} was deleted.",
|
||||
"dictionary": {
|
||||
"edit": "Edit",
|
||||
"entries": "{length} {length, plural, one{entry} other{entries}}",
|
||||
"info": "Info"
|
||||
"entries": "{length} {length, plural, one{entry} other{entries}} to redact",
|
||||
"false-positives": "False Positives",
|
||||
"false-recommendations": "False Recommendations",
|
||||
"info": "Info",
|
||||
"to-redact": "To Redact"
|
||||
},
|
||||
"general-info": {
|
||||
"form": {
|
||||
@ -1647,8 +1650,6 @@
|
||||
"license-info-screen": {
|
||||
"backend-version": "Backend Application Version",
|
||||
"chart": {
|
||||
"cumulative": "Cumulative Pages",
|
||||
"legend": "Legend",
|
||||
"pages-per-month": "Pages per Month",
|
||||
"total-pages": "Total Pages"
|
||||
},
|
||||
|
||||
@ -1132,7 +1132,10 @@
|
||||
"dictionary": {
|
||||
"edit": "",
|
||||
"entries": "{length} {length, plural, one{entry} other{entries}}",
|
||||
"info": ""
|
||||
"false-positives": "",
|
||||
"false-recommendations": "",
|
||||
"info": "",
|
||||
"to-redact": ""
|
||||
},
|
||||
"general-info": {
|
||||
"form": {
|
||||
@ -1647,8 +1650,6 @@
|
||||
"license-info-screen": {
|
||||
"backend-version": "Backend-Version der Anwendung",
|
||||
"chart": {
|
||||
"cumulative": "Seiten insgesamt",
|
||||
"legend": "",
|
||||
"pages-per-month": "Seiten pro Monat",
|
||||
"total-pages": "Gesamtzahl der Seiten"
|
||||
},
|
||||
|
||||
@ -686,7 +686,7 @@
|
||||
},
|
||||
"revert-changes": "Revert",
|
||||
"save-changes": "Save Changes",
|
||||
"search": "Search...",
|
||||
"search": "Search entries ...",
|
||||
"select-dictionary": "Select a dictionary above to compare with the current one.",
|
||||
"success": {
|
||||
"generic": "Dictionary updated!"
|
||||
@ -1131,8 +1131,11 @@
|
||||
"delete-successful": "Dossier {dossierName} was deleted.",
|
||||
"dictionary": {
|
||||
"edit": "Edit",
|
||||
"entries": "{length} {length, plural, one{entry} other{entries}}",
|
||||
"info": "Info"
|
||||
"entries": "{length} {length, plural, one{entry} other{entries}} to redact",
|
||||
"false-positives": "False Positives",
|
||||
"false-recommendations": "False Recommendations",
|
||||
"info": "Info",
|
||||
"to-redact": "To Redact"
|
||||
},
|
||||
"general-info": {
|
||||
"form": {
|
||||
@ -1647,8 +1650,6 @@
|
||||
"license-info-screen": {
|
||||
"backend-version": "Backend Application Version",
|
||||
"chart": {
|
||||
"cumulative": "Cumulative Pages",
|
||||
"legend": "Legend",
|
||||
"pages-per-month": "Pages per Month",
|
||||
"total-pages": "Total Pages"
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user