red-ui/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html
2020-12-09 13:29:25 +02:00

132 lines
5.3 KiB
HTML

<section>
<div class="page-header">
<redaction-admin-breadcrumbs></redaction-admin-breadcrumbs>
<div class="actions">
<redaction-circle-button
(action)="openDeleteDictionaryDialog($event)"
*ngIf="permissionsService.isAdmin()"
tooltip="dictionary-overview.action.delete"
tooltipPosition="below"
type="dark-bg"
icon="red:trash"
>
</redaction-circle-button>
<redaction-circle-button
(action)="download()"
tooltip="dictionary-overview.action.download"
tooltipPosition="below"
icon="red:download"
></redaction-circle-button>
<redaction-circle-button
(action)="openEditDictionaryDialog($event)"
*ngIf="permissionsService.isAdmin()"
tooltip="dictionary-overview.action.edit"
tooltipPosition="below"
type="dark-bg"
icon="red:edit"
>
</redaction-circle-button>
<redaction-circle-button
class="ml-6"
[routerLink]="['/ui/admin/dictionaries/']"
tooltip="common.close"
tooltipPosition="before"
icon="red:close"
></redaction-circle-button>
</div>
</div>
<div class="flex red-content-inner">
<div class="left-container">
<div class="red-input-group">
<input
[class.with-matches]="searchText.length > 0"
type="text"
[(ngModel)]="searchText"
(keyup)="searchChanged(searchText)"
#inputElement
placeholder="{{ 'dictionary-overview.search' | translate }}"
/>
<div class="input-icons">
<div class="no-input" *ngIf="searchText.length === 0">
<mat-icon svgIcon="red:search"></mat-icon>
</div>
<div class="with-input" *ngIf="searchText.length > 0">
<div class="search-match-text">
{{ currentMatch + '/' + searchPositions.length }}
</div>
<mat-icon svgIcon="red:arrow-down" class="transform-180 pointer" (click)="previousSearchMatch()"></mat-icon>
<mat-icon svgIcon="red:arrow-down" class="pointer" (click)="nextSearchMatch()"></mat-icon>
<mat-icon svgIcon="red:close" (click)="searchChanged(''); inputElement.focus()" class="pointer"></mat-icon>
</div>
</div>
</div>
<div class="editor-container">
<ace-editor
#editorComponent
[mode]="'text'"
[theme]="'eclipse'"
[options]="aceOptions"
[readOnly]="!permissionsService.isAdmin()"
(textChanged)="textChanged($event)"
[autoUpdateContent]="true"
[text]="dictionaryEntriesAsText"
class="ace-redaction"
>
</ace-editor>
</div>
<div class="changes-box" *ngIf="hasChanges">
<redaction-icon-button
*ngIf="permissionsService.isAdmin()"
icon="red:check"
(action)="saveEntries()"
text="dictionary-overview.save-changes"
[primary]="true"
></redaction-icon-button>
<redaction-icon-button
*ngIf="permissionsService.isAdmin()"
(action)="revert()"
text="dictionary-overview.revert-changes"
[linkButton]="true"
></redaction-icon-button>
</div>
</div>
<div class="right-container">
<div class="dictionary-header">
<div class="color-box" [style.backgroundColor]="dictionary.hexColor"></div>
<div class="heading-xl">
{{ dictionary.type | humanize }}
</div>
</div>
<div class="small-label stats-subtitle">
<div>
<mat-icon svgIcon="red:entries"></mat-icon>
{{ initialDictionaryEntries?.length }}
</div>
</div>
<div class="small-label stats-subtitle">
<div *ngIf="!dictionary.caseInsensitive">
<mat-icon svgIcon="red:case-sensitive"></mat-icon>
{{ 'dictionary-listing.case-sensitive' | translate }}
</div>
</div>
<div class="indicator">
<redaction-dictionary-annotation-icon [dictionaryKey]="dictionary.hint ? 'hint' : 'redaction'"></redaction-dictionary-annotation-icon>
<div class="large-label">
{{ (dictionary.hint ? 'hint' : 'redaction') | translate }}
</div>
</div>
</div>
</div>
</section>
<redaction-full-page-loading-indicator [displayed]="processing"></redaction-full-page-loading-indicator>