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

Pull request #82: RED-902: Enhance Manual Redaction Dictionary Dropdown

Browse Source 
Merge in RED/ui from RED-902 to master

* commit '3b56abf1a6d53e4bc702a2065767a0644251c0b2':
  Enhance Manual Redaction Dictionary Dropdown
This commit is contained in:
Timo Bejan 2021-01-05 23:12:16 +01:00
commit 34ed255fb2
3 changed files with 30 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
View File

@ -38,9 +38,12 @@
<div class="red-input-group required w-300" *ngIf="isDictionaryRequest && !isFalsePositiveRequest">
<label translate="manual-annotation.dialog.content.dictionary"></label>
<mat-select formControlName="dictionary">
<mat-select panelClass="description-select" formControlName="dictionary">
<mat-select-trigger>{{ displayedDictionaryLabel }}</mat-select-trigger>
<mat-option *ngFor="let dictionary of redactionDictionaries" [value]="dictionary.type">
{{ dictionary.label }}
<br />
<span class="description">{{ dictionaryDescriptions[dictionary.label] }}</span>
</mat-option>
</mat-select>
</div>

15
apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts
View File

@ -31,6 +31,13 @@ export class ManualAnnotationDialogComponent implements OnInit {
redactionDictionaries: TypeValue[] = [];
legalOptions: LegalBasisOption[] = [];
public dictionaryDescriptions = {
'CBI Address': 'Laboratory Address: Redaction in combination with vertebrates',
'CBI Author': 'Study Author: Redaction in combination with vertebrates',
'CBI Sponsor': 'Batch Sponsor: Redaction in combination with "batches produced at"',
PII: 'Personal Identification Information: Employee name, email, phone, fax, ...'
};
get title() {
return this._manualAnnotationService.getTitle(this.manualRedactionEntryWrapper.type);
}
@ -83,6 +90,14 @@ export class ManualAnnotationDialogComponent implements OnInit {
this.redactionDictionaries.sort((a, b) => a.label.localeCompare(b.label));
}
public get displayedDictionaryLabel() {
const dictType = this.redactionForm.get('dictionary').value;
if (dictType) {
return this.redactionDictionaries.find((d) => d.type === dictType).label;
}
return null;
}
handleAddRedaction() {
this._enhanceManualRedaction(this.manualRedactionEntryWrapper.manualRedactionEntry);
this._manualAnnotationService.addAnnotation(this.manualRedactionEntryWrapper.manualRedactionEntry).subscribe(

52
apps/red-ui/src/assets/styles/red-select.scss
View File

@ -1,48 +1,18 @@
@import 'red-variables';
.red-select {
.mat-select-value-text {
font-family: Inter, sans-serif;
color: $grey-1;
font-size: 13px;
line-height: 14px;
}
.mat-select-panel.description-select mat-option.mat-option {
height: unset;
.mat-form-field-infix {
padding: 0;
border: none;
width: fit-content;
}
.mat-option-text.mat-option-text {
white-space: normal;
line-height: 16px;
margin: 12px auto;
font-weight: 500;
.mat-select-value {
max-width: none;
}
.mat-select-arrow-wrapper {
padding-left: 5px;
.mat-select-arrow {
color: $grey-1 !important;
}
}
}
.red-select-panel {
border-radius: 0 !important;
.mat-option {
background: $white !important;
font-family: Inter, sans-serif;
color: $grey-1;
font-size: 13px;
line-height: 14px;
&.mat-selected.mat-active {
color: $primary;
}
&:hover {
background: $grey-2 !important;
.description {
font-size: 12px;
font-weight: initial;
opacity: 0.6;
}
}
}