Link needs work filters with project details
This commit is contained in:
Adina Țeudan
parent
b8a35461c2
commit
2a23538ae1
@ -53,29 +53,22 @@
|
||||
[config]="documentsChartData"
|
||||
[radius]="70"
|
||||
[strokeWidth]="15"
|
||||
[subtitle]="'project-overview.project-details.charts.total-documents'"
|
||||
[subtitle]="'project-overview.project-details.charts.documents-in-project'"
|
||||
direction="row"
|
||||
></redaction-simple-doughnut-chart>
|
||||
</div>
|
||||
|
||||
<div class="mt-24 legend" *ngIf="hasFiles">
|
||||
<div>
|
||||
<div
|
||||
*ngFor="let filter of filters.needsWorkFilters"
|
||||
class="annotation"
|
||||
[class.active]="filter.checked"
|
||||
(click)="toggleFilter(filter.key)"
|
||||
>
|
||||
<redaction-annotation-icon
|
||||
[typeValue]="appStateService.getDictionaryTypeValue('hint')"
|
||||
[typeValue]="appStateService.getDictionaryTypeValue(filter.key.slice(0, -1))"
|
||||
></redaction-annotation-icon>
|
||||
{{ 'project-overview.legend.contains-hints' | translate }}
|
||||
</div>
|
||||
<div>
|
||||
<redaction-annotation-icon
|
||||
[typeValue]="appStateService.getDictionaryTypeValue('redaction')"
|
||||
></redaction-annotation-icon>
|
||||
{{ 'project-overview.legend.contains-redactions' | translate }}
|
||||
</div>
|
||||
<div>
|
||||
<redaction-annotation-icon
|
||||
[typeValue]="appStateService.getDictionaryTypeValue('request')"
|
||||
></redaction-annotation-icon>
|
||||
{{ 'project-overview.legend.contains-suggestions' | translate }}
|
||||
{{ 'project-overview.legend.' + filter.key | translate }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import '../../../../assets/styles/red-variables';
|
||||
|
||||
.members-container {
|
||||
gap: 5px;
|
||||
}
|
||||
@ -5,12 +7,24 @@
|
||||
.legend {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
gap: 4px;
|
||||
margin-left: -8px;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
padding: 3px 8px;
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-6;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: rgba($primary, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
|
||||
import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
|
||||
import { AppStateService } from '../../../state/app-state.service';
|
||||
import { UserService } from '../../../user/user.service';
|
||||
import { groupBy } from '../../../utils/functions';
|
||||
import { DoughnutChartConfig } from '../../../components/simple-doughnut-chart/simple-doughnut-chart.component';
|
||||
import { DialogService } from '../../../dialogs/dialog.service';
|
||||
import { Router } from '@angular/router';
|
||||
import { FilterModel } from '../../../common/filter/model/filter.model';
|
||||
|
||||
@Component({
|
||||
selector: 'redaction-project-details',
|
||||
@ -13,7 +14,9 @@ import { Router } from '@angular/router';
|
||||
})
|
||||
export class ProjectDetailsComponent implements OnInit {
|
||||
public documentsChartData: DoughnutChartConfig[] = [];
|
||||
@Output() public reloadProjects = new EventEmitter<void>();
|
||||
@Input() public filters: { needsWorkFilters: FilterModel[] };
|
||||
@Output() public reloadProjects = new EventEmitter();
|
||||
@Output() public filtersChanged = new EventEmitter();
|
||||
|
||||
constructor(
|
||||
public readonly appStateService: AppStateService,
|
||||
@ -55,7 +58,7 @@ export class ProjectDetailsComponent implements OnInit {
|
||||
);
|
||||
}
|
||||
|
||||
public openAssignProjectMembersDialog() {
|
||||
public openAssignProjectMembersDialog(): void {
|
||||
this._dialogService.openAssignProjectMembersAndOwnerDialog(
|
||||
null,
|
||||
this.appStateService.activeProject.project,
|
||||
@ -65,12 +68,12 @@ export class ProjectDetailsComponent implements OnInit {
|
||||
);
|
||||
}
|
||||
|
||||
public downloadRedactionReport($event: MouseEvent) {
|
||||
public downloadRedactionReport($event: MouseEvent): void {
|
||||
$event.stopPropagation();
|
||||
this.appStateService.downloadRedactionReport();
|
||||
}
|
||||
|
||||
public calculateChartConfig() {
|
||||
public calculateChartConfig(): void {
|
||||
if (this.appStateService.activeProject) {
|
||||
const groups = groupBy(this.appStateService.activeProject?.files, 'status');
|
||||
this.documentsChartData = [];
|
||||
@ -80,7 +83,13 @@ export class ProjectDetailsComponent implements OnInit {
|
||||
}
|
||||
}
|
||||
|
||||
get hasFiles() {
|
||||
get hasFiles(): boolean {
|
||||
return this.appStateService.activeProject.hasFiles;
|
||||
}
|
||||
|
||||
public toggleFilter(key: string): void {
|
||||
const filter = this.filters.needsWorkFilters.find((f) => f.key === key);
|
||||
filter.checked = !filter.checked;
|
||||
this.filtersChanged.emit(this.filters);
|
||||
}
|
||||
}
|
||||
|
||||
@ -334,6 +334,8 @@
|
||||
<redaction-project-details
|
||||
#projectDetailsComponent
|
||||
(reloadProjects)="reloadProjects()"
|
||||
[filters]="detailsContainerFilters"
|
||||
(filtersChanged)="filtersChanged($event)"
|
||||
></redaction-project-details>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -19,7 +19,7 @@ import { TranslateService } from '@ngx-translate/core';
|
||||
import { FileActionService } from '../file/service/file-action.service';
|
||||
import { FilterModel } from '../../common/filter/model/filter.model';
|
||||
import * as moment from 'moment';
|
||||
import { SortingComponent, SortingOption } from '../../components/sorting/sorting.component';
|
||||
import { SortingOption } from '../../components/sorting/sorting.component';
|
||||
import { ProjectDetailsComponent } from './project-details/project-details.component';
|
||||
import { FileStatusWrapper } from '../file/model/file-status.wrapper';
|
||||
import {
|
||||
@ -45,6 +45,8 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
|
||||
|
||||
public displayedFiles: FileStatusWrapper[] = [];
|
||||
|
||||
public detailsContainerFilters: { needsWorkFilters: FilterModel[] };
|
||||
|
||||
@ViewChild('projectDetailsComponent', { static: true })
|
||||
private _projectDetailsComponent: ProjectDetailsComponent;
|
||||
|
||||
@ -314,7 +316,12 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
|
||||
});
|
||||
}
|
||||
|
||||
filtersChanged() {
|
||||
filtersChanged(filters?: { [key: string]: FilterModel[] }): void {
|
||||
if (filters) {
|
||||
for (const key of Object.keys(filters)) {
|
||||
this[key] = filters[key];
|
||||
}
|
||||
}
|
||||
this._filterFiles();
|
||||
}
|
||||
|
||||
@ -328,6 +335,9 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
|
||||
this.appStateService.activeProject.files,
|
||||
filters
|
||||
);
|
||||
this.detailsContainerFilters = {
|
||||
needsWorkFilters: this.needsWorkFilters.map((f) => ({ ...f }))
|
||||
};
|
||||
this._changeDetectorRef.detectChanges();
|
||||
}
|
||||
|
||||
|
||||
@ -224,7 +224,7 @@
|
||||
},
|
||||
"project-details": {
|
||||
"charts": {
|
||||
"total-documents": "Total Documents"
|
||||
"documents-in-project": "Documents in Project"
|
||||
},
|
||||
"stats": {
|
||||
"documents": "{{count}} documents",
|
||||
@ -239,9 +239,9 @@
|
||||
"upload-document": "Upload Document",
|
||||
"no-project": "Requested project: {{projectId}} does not exist! <a href='/ui/projects'>Back to Project Listing. <a/>",
|
||||
"legend": {
|
||||
"contains-hints": "Hints only ",
|
||||
"contains-redactions": "Redacted ",
|
||||
"contains-suggestions": "Suggested Redaction "
|
||||
"hints": "Hints only",
|
||||
"redactions": "Redacted",
|
||||
"suggestions": "Suggested Redaction"
|
||||
}
|
||||
},
|
||||
"file-preview": {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user