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

Reset filter button in project listing & overview

Browse Source
This commit is contained in:
Adina Țeudan 2021-01-08 21:32:06 +02:00
parent 902f518357
commit 9ca7b93d2b
8 changed files with 61 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/red-ui/src/app/common/filter/filter.component.ts
View File

@ -49,15 +49,15 @@ export class FilterComponent {
this.applyFilters();
}
activateAllFilters() {
public activateAllFilters() {
this._setAllFilters(true);
}
deactivateAllFilters() {
public deactivateAllFilters() {
this._setAllFilters(false);
}
get hasActiveFilters(): boolean {
public get hasActiveFilters(): boolean {
for (const filter of this.filters ? this.filters : []) {
if (filter.checked || filter.indeterminate) {
return true;
@ -66,7 +66,7 @@ export class FilterComponent {
return false;
}
applyFilters() {
public applyFilters() {
this.filtersChanged.emit(this.filters);
}

2
apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
View File

@ -40,7 +40,7 @@
<textarea
redactionHasScrollbar
formControlName="text"
[placeholder]="'watermark-screen.placeholder' | translate"
[placeholder]="'watermark-screen.form.text-placeholder' | translate"
(mousemove)="triggerChanges()"
class="w-full"
name="text"

5
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
View File

@ -3,18 +3,21 @@
<div class="filters">
<div translate="filters.filter-by"></div>
<redaction-filter
#statusFilter
(filtersChanged)="filtersChanged()"
[filterLabel]="'filters.status'"
[filters]="statusFilters"
[icon]="'red:status'"
></redaction-filter>
<redaction-filter
#peopleFilter
(filtersChanged)="filtersChanged()"
[filterLabel]="'filters.people'"
[filters]="peopleFilters"
[icon]="'red:user'"
></redaction-filter>
<redaction-filter
#needsWorkFilter
(filtersChanged)="filtersChanged()"
[filterLabel]="'filters.needs-work'"
[filterTemplate]="needsWorkTemplate"
@ -43,6 +46,8 @@
<span class="all-caps-label">
{{ 'project-listing.table-header.title' | translate: { length: displayedProjects.length || 0 } }}
</span>
<div class="reset-filters" *ngIf="hasActiveFilters"><span (click)="resetFilters()" translate="reset-filters"></span></div>
</div>
<div [class.no-data]="noData" class="table-header" redactionSyncWidth="table-item">

18
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
View File

@ -25,6 +25,7 @@ import { StatusSorter } from '../../common/sorters/status-sorter';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup } from '@angular/forms';
import { debounce } from '../../utils/debounce';
import { FilterComponent } from '../../common/filter/filter.component';
@Component({
selector: 'redaction-project-listing-screen',
@ -51,6 +52,10 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy {
public displayedProjects: ProjectWrapper[] = [];
private projectAutoUpdateTimer: Subscription;
@ViewChild('statusFilter') private _statusFilterComponent: FilterComponent;
@ViewChild('peopleFilter') private _peopleFilterComponent: FilterComponent;
@ViewChild('needsWorkFilter') private _needsWorkFilterComponent: FilterComponent;
constructor(
public readonly appStateService: AppStateService,
public readonly userService: UserService,
@ -90,10 +95,23 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy {
this.projectAutoUpdateTimer.unsubscribe();
}
public get hasActiveFilters() {
return (
this._statusFilterComponent?.hasActiveFilters || this._peopleFilterComponent?.hasActiveFilters || this._needsWorkFilterComponent?.hasActiveFilters
);
}
public get noData() {
return this.displayedProjects?.length === 0;
}
public resetFilters() {
this._statusFilterComponent.deactivateAllFilters();
this._peopleFilterComponent.deactivateAllFilters();
this._needsWorkFilterComponent.deactivateAllFilters();
this.filtersChanged();
}
private _calculateData() {
this._computeAllFilters();
this._filterProjects();

5
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
View File

@ -3,18 +3,21 @@
<div class="filters">
<div translate="filters.filter-by"></div>
<redaction-filter
#statusFilter
(filtersChanged)="filtersChanged()"
[filterLabel]="'filters.status'"
[filters]="statusFilters"
[icon]="'red:status'"
></redaction-filter>
<redaction-filter
#peopleFilter
(filtersChanged)="filtersChanged()"
[filterLabel]="'filters.assigned-people'"
[filters]="peopleFilters"
[icon]="'red:user'"
></redaction-filter>
<redaction-filter
#needsWorkFilter
(filtersChanged)="filtersChanged()"
[filterLabel]="'filters.needs-work'"
[filterTemplate]="needsWorkTemplate"
@ -120,6 +123,8 @@
</span>
<redaction-bulk-actions [selectedFileIds]="selectedFileIds" (reload)="bulkActionPerformed()"></redaction-bulk-actions>
<div class="reset-filters" *ngIf="hasActiveFilters"><span (click)="resetFilters()" translate="reset-filters"></span></div>
</div>
<div class="table-header" redactionSyncWidth="table-item" [class.no-data]="noData">

18
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
View File

@ -27,6 +27,7 @@ import { FormBuilder, FormGroup } from '@angular/forms';
import { debounce } from '../../utils/debounce';
import { download } from '../../utils/file-download-utils';
import { convertFiles, handleFileDrop } from '../../utils/file-drop-utils';
import { FilterComponent } from '../../common/filter/filter.component';
@Component({
selector: 'redaction-project-overview-screen',
@ -52,6 +53,10 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
private _projectDetailsComponent: ProjectDetailsComponent;
private filesAutoUpdateTimer: Subscription;
@ViewChild('statusFilter') private _statusFilterComponent: FilterComponent;
@ViewChild('peopleFilter') private _peopleFilterComponent: FilterComponent;
@ViewChild('needsWorkFilter') private _needsWorkFilterComponent: FilterComponent;
constructor(
public readonly appStateService: AppStateService,
public readonly userService: UserService,
@ -136,6 +141,19 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
this._sortingService.toggleSort('project-overview', $event);
}
public get hasActiveFilters() {
return (
this._statusFilterComponent?.hasActiveFilters || this._peopleFilterComponent?.hasActiveFilters || this._needsWorkFilterComponent?.hasActiveFilters
);
}
public resetFilters() {
this._statusFilterComponent.deactivateAllFilters();
this._peopleFilterComponent.deactivateAllFilters();
this._needsWorkFilterComponent.deactivateAllFilters();
this.filtersChanged();
}
reloadProjects() {
this.appStateService.getFiles().then(() => {
this.calculateData();

4
apps/red-ui/src/assets/i18n/en.json
View File

@ -667,7 +667,6 @@
"revert-changes": "Revert"
},
"watermark-screen": {
"placeholder": "Watermark ... ",
"form": {
"text-placeholder": "Enter text",
"opacity": "Opacity",
@ -695,5 +694,6 @@
},
"rule-editor": "Rule Editor",
"watermark": "Watermark",
"pending-changes-guard": "WARNING: You have unsaved changes. Press Cancel to go back and save these changes, or OK to lose these changes."
"pending-changes-guard": "WARNING: You have unsaved changes. Press Cancel to go back and save these changes, or OK to lose these changes.",
"reset-filters": "Reset Filters"
}

10
apps/red-ui/src/assets/styles/red-grid.scss
View File

@ -25,7 +25,13 @@
}
}
&.justify-end {
justify-content: flex-end;
.reset-filters {
flex: 1;
text-align: end;
color: $primary;
span {
cursor: pointer;
}
}
}