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

Filter annotations logic

Browse Source
This commit is contained in:
Adina Țeudan 2020-10-15 07:02:07 +03:00
parent 84c6612ccb
commit f97f9bac62
4 changed files with 40 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -81,29 +81,14 @@
<div *ngFor="let item of quickNavigation | sortBy:'asc':'number'"
class="page-navigation"
[id]="'quick-nav-page-'+item.pageNumber"
[ngClass]="{ active: item.pageNumber === activeViewerPage }"
[ngClass]="{ active: item.pageNumber === activeViewerPage, hidden: !showQuickNavigationItem(item) }"
(click)="selectPage(item.pageNumber)"
>
<div class="page-number subtitle">{{ item.pageNumber }}</div>
<div *ngIf="item.hints" class="page-stats subtitle">
<div class="oval darkgray-white x-small">H</div>
{{item.hints}}
</div>
<div *ngIf="item.redactions" class="page-stats subtitle">
<div class="square darkgray-white x-small">R</div>
{{item.redactions}}
</div>
<div *ngIf="item.comments" class="page-stats subtitle">
<div class="oval darkgray-white x-small">C</div>
{{item.comments}}
</div>
<div *ngIf="item.requests" class="page-stats subtitle">
<div class="oval red-white x-small">S</div>
{{item.requests}}
</div>
<div *ngIf="item.ignore" class="page-stats subtitle">
<div class="oval lightgray-white x-small">I</div>
{{item.ignore}}
<div *ngFor="let key of filterKeys"
[ngClass]="{ hidden: !showAnnotations(item, key)}" class="page-stats subtitle">
<div [class]="filters[key].class + ' x-small'">{{ filters[key].symbol }}</div>
{{item[key]}}
</div>
</div>
</div>

36
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
View File

@ -24,6 +24,15 @@ import { ConfirmationDialogComponent } from '../../../common/confirmation-dialog
import { AnnotationFilters } from '../../../utils/types';
import { FiltersService } from '../service/filters.service';
class QuickNavigationItem {
pageNumber: number;
hints: number;
redactions: number;
comments: number;
suggestions: number;
ignored: number;
}
@Component({
selector: 'redaction-file-preview-screen',
templateUrl: './file-preview-screen.component.html',
@ -47,14 +56,7 @@ export class FilePreviewScreenComponent implements OnInit {
public fileId: string;
public annotations: Annotations.Annotation[] = [];
public selectedAnnotation: Annotations.Annotation;
public quickNavigation: {
pageNumber: number,
hints: number,
redactions: number,
comments: number;
suggestions: number,
ignore: number;
}[] = [];
public quickNavigation: QuickNavigationItem[] = [];
public filters: AnnotationFilters;
@ -154,14 +156,14 @@ export class FilePreviewScreenComponent implements OnInit {
const pageNumber = annotation.getPageNumber();
let el = this.quickNavigation.find((page) => page.pageNumber === pageNumber);
if (!el) {
el = { pageNumber, redactions: 0, hints: 0, ignore: 0, comments: 0, suggestions: 0 };
el = { pageNumber, redactions: 0, hints: 0, ignored: 0, comments: 0, suggestions: 0 };
this.quickNavigation.push(el);
}
if (annotation.Id.startsWith('hint:')) {
el.hints++;
}
if (annotation.Id.startsWith('ignore:')) {
el.ignore++;
el.ignored++;
}
if (annotation.Id.startsWith('redaction:')) {
el.redactions++;
@ -171,6 +173,16 @@ export class FilePreviewScreenComponent implements OnInit {
this.annotations = AnnotationUtils.sortAnnotations(this.annotations);
}
public showQuickNavigationItem(item: QuickNavigationItem): boolean {
let showItem = false;
Object.keys(this.filters).map((key) => {
if (this.showAnnotations(item, key)) {
showItem = true;
}
})
return showItem;
}
public handleAnnotationSelected(annotation: Annotations.Annotation) {
this.selectedAnnotation = annotation;
this.selectTab('ANNOTATIONS');
@ -336,4 +348,8 @@ export class FilePreviewScreenComponent implements OnInit {
});
return activeFilters;
}
public showAnnotations(item: QuickNavigationItem, type: string): boolean {
return item[type] && (!this.hasActiveFilters || (this.hasActiveFilters && this.filters[type]?.value));
}
}

8
apps/red-ui/src/app/screens/file/service/filters.service.ts
View File

@ -9,10 +9,10 @@ export class FiltersService {
}
private _filters: AnnotationFilters = {
hint: { label: 'file-preview.filter-menu.hint.label', value: false, class: 'oval darkgray-white', symbol: 'H' },
redaction: { label: 'file-preview.filter-menu.redaction.label', value: false, class: 'square darkgray-white', symbol: 'R' },
comment: { label: 'file-preview.filter-menu.comment.label', value: false, class: 'oval darkgray-white', symbol: 'C' },
suggestion: { label: 'file-preview.filter-menu.suggestion.label', value: false, class: 'oval red-white', symbol: 'S' },
hints: { label: 'file-preview.filter-menu.hint.label', value: false, class: 'oval darkgray-white', symbol: 'H' },
redactions: { label: 'file-preview.filter-menu.redaction.label', value: false, class: 'square darkgray-white', symbol: 'R' },
comments: { label: 'file-preview.filter-menu.comment.label', value: false, class: 'oval darkgray-white', symbol: 'C' },
suggestions: { label: 'file-preview.filter-menu.suggestion.label', value: false, class: 'oval red-white', symbol: 'S' },
ignored: { label: 'file-preview.filter-menu.ignored.label', value: false, class: 'oval lightgray-white', symbol: 'I' },
}

5
apps/red-ui/src/assets/styles/red-button.scss
View File

@ -5,6 +5,11 @@
font-weight: 400 !important;
border-radius: 25px !important;
.mat-button-wrapper {
display: flex;
align-items: center;
}
.dropdown-icon {
width: 16px;
}