Skip to content

Commit d4b11cd

Browse files
Mutugiiidogi
Mutugiii
and
dogi
authored
manager: smoother myplanet logs and reports (fixes #9021) (#9190)
Co-authored-by: dogi <[email protected]>
1 parent 93f6bc6 commit d4b11cd

16 files changed

+380
-497
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "planet",
33
"license": "AGPL-3.0",
4-
"version": "0.20.49",
4+
"version": "0.20.50",
55
"myplanet": {
66
"latest": "v0.34.54",
77
"min": "v0.33.54"

‎src/app/home/home.module.ts‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { HomeComponent } from './home.component';
77
import { DashboardComponent } from '../dashboard/dashboard.component';
88
import { HomeRouterModule } from './home-router.module';
99
import { PlanetFormsModule } from '../shared/forms/planet-forms.module';
10-
1110
import { MaterialModule } from '../shared/material.module';
1211
import { DashboardTileComponent, DashboardTileTitleComponent } from '../dashboard/dashboard-tile.component';
1312
import { NotificationsComponent } from '../notifications/notifications.component';
@@ -17,7 +16,6 @@ import { UpgradeComponent } from '../upgrade/upgrade.component';
1716
import { SharedComponentsModule } from '../shared/shared-components.module';
1817
import { UsersAchievementsModule } from '../users/users-achievements/users-achievements.module';
1918
import { NewsModule } from '../news/news.module';
20-
import { LogsMyPlanetComponent } from '../manager-dashboard/reports/myplanet/logs-myplanet.component';
2119
import { TeamsModule } from '../teams/teams.module';
2220
import { CommunityComponent } from '../community/community.component';
2321
import { PlanetCalendarModule } from '../shared/calendar.module';
@@ -57,10 +55,9 @@ import { SurveysModule } from '../surveys/surveys.module';
5755
NotificationsComponent,
5856
PulsateIconDirective,
5957
UpgradeComponent,
60-
LogsMyPlanetComponent,
6158
CommunityComponent,
6259
CommunityLinkDialogComponent,
63-
HealthListComponent,
60+
HealthListComponent,
6461
]
6562
})
6663
export class HomeModule {}

‎src/app/manager-dashboard/manager-dashboard-router.module.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { NgModule } from '@angular/core';
2-
import { ManagerDashboardComponent } from './manager-dashboard.component';
32
import { Routes, RouterModule } from '@angular/router';
3+
import { ManagerDashboardComponent } from './manager-dashboard.component';
4+
import { RequestsComponent } from './requests/requests.component';
45
import { ManagerSyncComponent } from './manager-sync.component';
56
import { ManagerFetchComponent } from './manager-fetch.component';
67
import { ManagerAIServicesComponent } from './manager-aiservices.component';
@@ -10,7 +11,6 @@ import { ReportsComponent } from './reports/reports.component';
1011
import { ReportsDetailComponent } from './reports/reports-detail.component';
1112
import { ReportsPendingComponent } from './reports/reports-pending.component';
1213
import { ReportsMyPlanetComponent } from './reports/myplanet/reports-myplanet.component';
13-
import { RequestsComponent } from './requests/requests.component';
1414
import { LogsMyPlanetComponent } from './reports/myplanet/logs-myplanet.component';
1515

1616
const routes: Routes = [

‎src/app/manager-dashboard/manager-dashboard.module.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@ import { ReportsDetailComponent } from './reports/reports-detail.component';
2020
import { ReportsPendingComponent } from './reports/reports-pending.component';
2121
import { PendingTableComponent } from './reports/pending-table.component';
2222
import { ReportsMyPlanetComponent } from './reports/myplanet/reports-myplanet.component';
23+
import { LogsMyPlanetComponent } from './reports/myplanet/logs-myplanet.component';
24+
import { MyPlanetToolbarComponent } from './reports/myplanet/myplanet-toolbar.component';
25+
import { MyPlanetTableComponent } from './reports/myplanet/myplanet-table.component';
2326
import { SharedComponentsModule } from '../shared/shared-components.module';
2427
import { ReportsDetailActivitiesComponent } from './reports/reports-detail-activities.component';
2528
import { ReportsHealthComponent } from './reports/reports-health.component';
@@ -53,6 +56,9 @@ import { ManagerCurrencyComponent } from './manager-currency.component';
5356
ReportsPendingComponent,
5457
PendingTableComponent,
5558
ReportsMyPlanetComponent,
59+
LogsMyPlanetComponent,
60+
MyPlanetToolbarComponent,
61+
MyPlanetTableComponent,
5662
ReportsDetailActivitiesComponent,
5763
ReportsHealthComponent,
5864
ManagerCurrencyComponent

‎src/app/manager-dashboard/reports/myplanet/filter.base.ts‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
2+
import { ReportsService } from '../reports.service';
3+
4+
export abstract class MyPlanetFiltersBase {
5+
6+
private readonly defaultTimeFilter: string;
7+
selectedVersion = '';
8+
selectedTimeFilter: string;
9+
searchValue = '';
10+
showCustomDateFields = false;
11+
isEmpty = false;
12+
isLoading = false;
13+
versions: string[] = [];
14+
showFiltersRow = false;
15+
timeFilterOptions: any[] = this.activityService.standardTimeFilters;
16+
minDate: Date = new Date();
17+
today: Date = new Date();
18+
startDate: Date = this.minDate;
19+
endDate: Date = this.today;
20+
filtersForm: FormGroup<{ startDate: FormControl<Date>; endDate: FormControl<Date>; }>;
21+
get isDefaultTimeFilter(): boolean {
22+
return this.selectedTimeFilter === this.defaultTimeFilter;
23+
}
24+
25+
protected constructor(
26+
protected fb: FormBuilder,
27+
protected activityService: ReportsService,
28+
defaultTimeFilter: string
29+
) {
30+
this.defaultTimeFilter = defaultTimeFilter;
31+
this.selectedTimeFilter = defaultTimeFilter;
32+
33+
this.filtersForm = this.fb.group({
34+
startDate: this.fb.control(this.minDate, { nonNullable: true }),
35+
endDate: this.fb.control(this.today, { nonNullable: true })
36+
}, {
37+
validators: (ac) => {
38+
const { startDate, endDate } = ac.value;
39+
return startDate > endDate ? { invalidDates: true } : null;
40+
}
41+
});
42+
this.updateFormValidators();
43+
this.filtersForm.valueChanges.subscribe(({ startDate, endDate }) => {
44+
this.startDate = startDate;
45+
this.endDate = endDate;
46+
if (!this.filtersForm.errors?.invalidDates) {
47+
this.applyFilters();
48+
}
49+
});
50+
}
51+
52+
resetDateFilter() {
53+
this.onTimeFilterChange(this.defaultTimeFilter);
54+
}
55+
56+
onTimeFilterChange(timeFilter: string) {
57+
this.selectedTimeFilter = timeFilter;
58+
const { startDate, endDate, showCustomDateFields } = this.activityService.getDateRange(timeFilter, this.minDate);
59+
this.showCustomDateFields = showCustomDateFields;
60+
if (timeFilter === 'custom') {
61+
this.filtersForm.patchValue({ startDate: this.startDate, endDate: this.endDate }, { emitEvent: false });
62+
return;
63+
}
64+
this.startDate = startDate;
65+
this.endDate = endDate;
66+
this.filtersForm.patchValue({ startDate, endDate }, { emitEvent: false });
67+
this.applyFilters();
68+
}
69+
70+
filterData(filterValue: string) {
71+
this.searchValue = filterValue;
72+
this.applyFilters();
73+
}
74+
75+
onVersionChange(version: string) {
76+
this.selectedVersion = version;
77+
this.applyFilters();
78+
}
79+
80+
clearFilters() {
81+
this.selectedVersion = '';
82+
this.searchValue = '';
83+
this.resetDateFilter();
84+
this.applyFilters();
85+
}
86+
87+
protected updateMinDate(newMinDate: Date) {
88+
this.minDate = newMinDate;
89+
this.updateFormValidators();
90+
this.onTimeFilterChange(this.selectedTimeFilter);
91+
}
92+
93+
private updateFormValidators() {
94+
this.filtersForm.get('startDate')?.setValidators(
95+
[ Validators.required, Validators.min(this.minDate.getTime()), Validators.max(this.today.getTime()) ]
96+
);
97+
this.filtersForm.get('endDate')?.setValidators(
98+
[ Validators.required, Validators.min(this.minDate.getTime()), Validators.max(this.today.getTime()) ]
99+
);
100+
this.filtersForm.updateValueAndValidity();
101+
}
102+
103+
abstract applyFilters(): void;
104+
}

‎src/app/manager-dashboard/reports/myplanet/logs-myplanet.component.html‎

Lines changed: 21 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,24 @@
1-
<mat-toolbar>
2-
<ng-container *ngIf="deviceType === deviceTypes.DESKTOP; else mobileView">
3-
<button class="btnBack" mat-icon-button routerLink="/manager">
4-
<mat-icon>arrow_back</mat-icon>
5-
</button>
6-
<span i18n>Logs</span>
7-
<span class="toolbar-fill"></span>
8-
<mat-form-field class="margin-lr-5 font-size-1">
9-
<mat-select i18n-placeholder placeholder="Type" (selectionChange)="onTypeChange($event.value)" [value]="selectedType">
10-
<mat-option [value]="" i18n>All Types</mat-option>
11-
<mat-option *ngFor="let type of types" [value]="type">{{type}}</mat-option>
12-
</mat-select>
13-
</mat-form-field>
14-
<mat-form-field class="margin-lr-5 font-size-1">
15-
<mat-select i18n-placeholder placeholder="Version" (selectionChange)="onVersionChange($event.value)" [value]="selectedVersion">
16-
<mat-option [value]="" i18n>All Versions</mat-option>
17-
<mat-option *ngFor="let version of versions" [value]="version">{{version}}</mat-option>
18-
</mat-select>
19-
</mat-form-field>
20-
<form [formGroup]="logsForm" *ngIf="showCustomDateFields">
21-
<mat-form-field class="margin-lr-5 font-size-1">
22-
<input matInput [matDatepicker]="startPicker" i18n-placeholder placeholder="Start Date" formControlName="startDate" [min]="minDate" [max]="logsForm.get('endDate').value">
23-
<mat-datepicker-toggle matSuffix [for]="startPicker"></mat-datepicker-toggle>
24-
<mat-datepicker #startPicker></mat-datepicker>
25-
<mat-error i18n *ngIf="logsForm.errors?.invalidDates">Start date must be before end date</mat-error>
26-
</mat-form-field>
27-
<mat-form-field class="margin-lr-5 font-size-1">
28-
<input matInput [matDatepicker]="endPicker" i18n-placeholder placeholder="End Date" formControlName="endDate" [min]="logsForm.get('startDate').value" [max]="today">
29-
<mat-datepicker-toggle matSuffix [for]="endPicker"></mat-datepicker-toggle>
30-
<mat-datepicker #endPicker></mat-datepicker>
31-
</mat-form-field>
32-
</form>
33-
<mat-form-field class="margin-lr-5 font-size-1">
34-
<mat-select i18n-placeholder placeholder="Time Frame" (selectionChange)="onTimeFilterChange($event.value)" [value]="selectedTimeFilter">
35-
<mat-option *ngFor="let option of timeFilterOptions" [value]="option.value">{{option.label}}</mat-option>
36-
</mat-select>
37-
</mat-form-field>
38-
<button mat-raised-button (click)="clearFilters()" color="primary" [disabled]="!searchValue && !selectedVersion && !selectedType && isDefaultTimeFilter" class="margin-lr-5">
39-
<span i18n>Clear</span>
40-
</button>
41-
<mat-icon>search</mat-icon>
42-
<mat-form-field class="font-size-1">
43-
<input matInput (keyup)="filterData($event.target.value)" [value]="searchValue" i18n-placeholder placeholder="Search">
44-
</mat-form-field>
45-
</ng-container>
46-
47-
<ng-template #mobileView>
48-
<mat-toolbar-row>
49-
<button class="btnBack" mat-icon-button routerLink="/manager">
50-
<mat-icon>arrow_back</mat-icon>
51-
</button>
52-
<span i18n>Logs</span>
53-
<span class="toolbar-fill"></span>
54-
<button mat-icon-button (click)="this.showFiltersRow = !this.showFiltersRow"><mat-icon>filter_list</mat-icon></button>
55-
</mat-toolbar-row>
56-
<mat-toolbar-row *ngIf="showFiltersRow">
57-
<mat-form-field class="margin-lr-5 font-size-1">
58-
<mat-select i18n-placeholder placeholder="Type" (selectionChange)="onTypeChange($event.value)" [value]="selectedType">
59-
<mat-option [value]="" i18n>All Types</mat-option>
60-
<mat-option *ngFor="let type of types" [value]="type">{{type}}</mat-option>
61-
</mat-select>
62-
</mat-form-field>
63-
<mat-form-field class="margin-lr-5 font-size-1">
64-
<mat-select i18n-placeholder placeholder="Version" (selectionChange)="onVersionChange($event.value)" [value]="selectedVersion">
65-
<mat-option [value]="" i18n>All Versions</mat-option>
66-
<mat-option *ngFor="let version of versions" [value]="version">{{version}}</mat-option>
67-
</mat-select>
68-
</mat-form-field>
69-
</mat-toolbar-row>
70-
<mat-toolbar-row *ngIf="showFiltersRow">
71-
<mat-form-field class="margin-lr-5 font-size-1">
72-
<mat-select i18n-placeholder placeholder="Time Frame" (selectionChange)="onTimeFilterChange($event.value)" [value]="selectedTimeFilter">
73-
<mat-option *ngFor="let option of timeFilterOptions" [value]="option.value">{{option.label}}</mat-option>
74-
</mat-select>
75-
</mat-form-field>
76-
</mat-toolbar-row>
77-
<mat-toolbar-row *ngIf="showFiltersRow && showCustomDateFields">
78-
<form [formGroup]="logsForm">
79-
<mat-form-field class="margin-lr-5 font-size-1">
80-
<input matInput [matDatepicker]="startPicker" i18n-placeholder placeholder="Start Date" formControlName="startDate" [min]="minDate" [max]="logsForm.get('endDate').value">
81-
<mat-datepicker-toggle matSuffix [for]="startPicker"></mat-datepicker-toggle>
82-
<mat-datepicker #startPicker></mat-datepicker>
83-
<mat-error i18n *ngIf="logsForm.errors?.invalidDates">Start date must be before end date</mat-error>
84-
</mat-form-field>
85-
</form>
86-
</mat-toolbar-row>
87-
<mat-toolbar-row *ngIf="showFiltersRow && showCustomDateFields">
88-
<form [formGroup]="logsForm">
89-
<mat-form-field class="margin-lr-5 font-size-1">
90-
<input matInput [matDatepicker]="endPicker" i18n-placeholder placeholder="End Date" formControlName="endDate" [min]="logsForm.get('startDate').value" [max]="today">
91-
<mat-datepicker-toggle matSuffix [for]="endPicker"></mat-datepicker-toggle>
92-
<mat-datepicker #endPicker></mat-datepicker>
93-
</mat-form-field>
94-
</form>
95-
</mat-toolbar-row>
96-
<mat-toolbar-row *ngIf="showFiltersRow">
97-
<button mat-raised-button color="primary" (click)="clearFilters()" [disabled]="!searchValue && !selectedVersion && !selectedType && isDefaultTimeFilter" class="margin-lr-5">
98-
<span i18n>Clear</span>
99-
</button>
100-
<mat-icon>search</mat-icon>
101-
<mat-form-field class="font-size-1">
102-
<input matInput (keyup)="filterData($event.target.value)" [value]="searchValue" i18n-placeholder placeholder="Search">
103-
</mat-form-field>
104-
</mat-toolbar-row>
105-
</ng-template>
106-
</mat-toolbar>
1+
<planet-myplanet-toolbar i18n-title title="Logs"
2+
[types]="types"
3+
[showTypeFilter]="true"
4+
[versions]="versions"
5+
[selectedVersion]="selectedVersion"
6+
[selectedType]="selectedType"
7+
[timeFilterOptions]="timeFilterOptions"
8+
[selectedTimeFilter]="selectedTimeFilter"
9+
[formGroup]="filtersForm"
10+
[showCustomDateFields]="showCustomDateFields"
11+
[minDate]="minDate"
12+
[today]="today"
13+
[searchValue]="searchValue"
14+
[disableShowAllTime]="isDefaultTimeFilter"
15+
(typeChange)="onTypeChange($event)"
16+
(versionChange)="onVersionChange($event)"
17+
(timeFilterChange)="onTimeFilterChange($event)"
18+
(search)="filterData($event)"
19+
(clear)="clearFilters()"
20+
(resetDateFilter)="resetDateFilter()"
21+
></planet-myplanet-toolbar>
10722
<div class="space-container">
10823
<mat-toolbar>
10924
<mat-toolbar-row class="primary-color font-size-1">

0 commit comments

Comments
 (0)