Skip to content

Commit c3cebe5

Browse files
Mutugiiidogi
Mutugiii
and
dogi
authored
manager: smoother report details navigation (fixes #9044) (#9045)
Co-authored-by: dogi <[email protected]>
1 parent eed6b4f commit c3cebe5

File tree

3 files changed

+86
-132
lines changed

3 files changed

+86
-132
lines changed

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
22
"name": "planet",
33
"license": "AGPL-3.0",
4-
"version": "0.20.9",
4+
"version": "0.20.10",
55
"myplanet": {
6-
"latest": "v0.29.23",
7-
"min": "v0.28.23"
6+
"latest": "v0.29.75",
7+
"min": "v0.28.75"
88
},
99
"scripts": {
1010
"ng": "ng",

‎src/app/manager-dashboard/reports/reports-detail.component.html‎

Lines changed: 81 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,137 +1,107 @@
11
<mat-toolbar>
22
<ng-container *ngIf="deviceType === deviceTypes.DESKTOP; else mobileView">
3-
<button class="btnBack" mat-icon-button (click)="goBack()">
4-
<mat-icon>arrow_back</mat-icon>
5-
</button>
6-
<span i18n>Reports</span>
7-
<span class="toolbar-fill"></span>
8-
<form [formGroup]="dateFilterForm" *ngIf="showCustomDateFields">
9-
<mat-form-field class="margin-lr-5 font-size-1">
10-
<mat-label i18n>Start Date</mat-label>
11-
<input matInput formControlName="startDate" [matDatepicker]="startPicker" [min]="minDate" [max]="dateFilterForm.value.endDate || today">
12-
<mat-datepicker-toggle matSuffix [for]="startPicker"></mat-datepicker-toggle>
13-
<mat-datepicker #startPicker></mat-datepicker>
14-
<mat-error i18n *ngIf="dateFilterForm.value.startDate > dateFilterForm.value.endDate">Start date must be before end date</mat-error>
15-
</mat-form-field>
16-
<mat-form-field class="margin-lr-5 font-size-1">
17-
<mat-label i18n>End Date</mat-label>
18-
<input matInput formControlName="endDate" [matDatepicker]="endPicker" [min]="dateFilterForm.value.startDate || minDate" [max]="today">
19-
<mat-datepicker-toggle matSuffix [for]="endPicker"></mat-datepicker-toggle>
20-
<mat-datepicker #endPicker></mat-datepicker>
21-
</mat-form-field>
22-
</form>
23-
<mat-form-field class="margin-lr-5 font-size-1">
24-
<mat-select i18n-placeholder placeholder="Time Frame" (selectionChange)="onTimeFilterChange($event.value)" [value]="selectedTimeFilter">
25-
<mat-option *ngFor="let option of timeFilterOptions" [value]="option.value">{{option.label}}</mat-option>
26-
</mat-select>
27-
</mat-form-field>
28-
<mat-form-field class="font-size-1 margin-lr-5">
29-
<mat-select i18n-placeholder placeholder="Filter Members" (selectionChange)="onTeamsFilterChange($event.value)" [value]="selectedTeam">
30-
<mat-option i18n value="All">All Members</mat-option>
31-
<mat-optgroup label="Teams" i18n-label>
32-
<mat-option *ngFor="let team of teams?.team" [value]="team">{{team.name}}</mat-option>
33-
</mat-optgroup>
34-
<mat-optgroup label="Enterprises" i18n-label>
35-
<mat-option *ngFor="let team of teams?.enterprise" [value]="team">{{team.name}}</mat-option>
36-
</mat-optgroup>
37-
</mat-select>
38-
</mat-form-field>
39-
<mat-button-toggle-group
40-
class="font-size-1 margin-lr-5"
41-
(change)="onFilterChange($event.value)"
42-
#filterGroup="matButtonToggleGroup">
43-
<mat-button-toggle value="planet" [checked]="this.filter.app === 'planet'" i18n>
44-
Planet
45-
</mat-button-toggle>
46-
<mat-button-toggle value="myplanet" [checked]="this.filter.app === 'myplanet'" i18n>
47-
myPlanet
48-
</mat-button-toggle>
49-
<mat-button-toggle value="" [checked]="this.filter.app === ''" i18n>
50-
Both
51-
</mat-button-toggle>
52-
</mat-button-toggle-group>
53-
<button mat-raised-button color="primary" (click)="clearFilters()" class="margin-lr-5">
54-
<span i18n>Clear</span>
55-
</button>
3+
<mat-toolbar-row>
4+
<ng-container *ngTemplateOutlet="backBtn"></ng-container>
5+
<ng-container *ngIf="showCustomDateFields">
6+
<ng-container *ngTemplateOutlet="startDateField"></ng-container>
7+
<ng-container *ngTemplateOutlet="endDateField"></ng-container>
8+
</ng-container>
9+
<ng-container *ngTemplateOutlet="timeFilterSelect"></ng-container>
10+
<ng-container *ngTemplateOutlet="teamsFilterSelect"></ng-container>
11+
<ng-container *ngTemplateOutlet="planetToggleGroup"></ng-container>
12+
<ng-container *ngTemplateOutlet="clearBtn"></ng-container>
13+
</mat-toolbar-row>
5614
</ng-container>
5715

5816
<ng-template #mobileView>
5917
<mat-toolbar-row>
60-
<button class="btnBack" mat-icon-button (click)="goBack()">
61-
<mat-icon>arrow_back</mat-icon>
62-
</button>
63-
<span i18n>Reports</span>
64-
<span class="toolbar-fill"></span>
18+
<ng-container *ngTemplateOutlet="backBtn"></ng-container>
6519
<button mat-icon-button (click)="showFiltersRow = !showFiltersRow">
6620
<mat-icon>filter_list</mat-icon>
6721
</button>
6822
</mat-toolbar-row>
6923
<mat-toolbar-row *ngIf="showFiltersRow">
70-
<mat-form-field class="margin-lr-5 font-size-1">
71-
<mat-select i18n-placeholder placeholder="Time Frame" (selectionChange)="onTimeFilterChange($event.value)" [value]="selectedTimeFilter">
72-
<mat-option *ngFor="let option of timeFilterOptions" [value]="option.value">{{option.label}}</mat-option>
73-
</mat-select>
74-
</mat-form-field>
24+
<ng-container *ngTemplateOutlet="timeFilterSelect"></ng-container>
7525
</mat-toolbar-row>
76-
<!-- Start date row -->
7726
<mat-toolbar-row *ngIf="showFiltersRow && showCustomDateFields">
78-
<form [formGroup]="dateFilterForm" class="date-form">
79-
<mat-form-field class="start-date full-width">
80-
<mat-label i18n>Start Date</mat-label>
81-
<input matInput formControlName="startDate" [matDatepicker]="startDateMobile" [min]="minDate" [max]="dateFilterForm.value.endDate || today">
82-
<mat-datepicker-toggle matSuffix [for]="startDateMobile"></mat-datepicker-toggle>
83-
<mat-datepicker #startDateMobile></mat-datepicker>
84-
<mat-error i18n *ngIf="dateFilterForm.value.startDate > dateFilterForm.value.endDate">Start date must be before end date</mat-error>
85-
</mat-form-field>
86-
</form>
27+
<div class="full-width">
28+
<ng-container *ngTemplateOutlet="startDateField"></ng-container>
29+
</div>
8730
</mat-toolbar-row>
8831
<mat-toolbar-row *ngIf="showFiltersRow && showCustomDateFields">
89-
<form [formGroup]="dateFilterForm" class="date-form">
90-
<mat-form-field class="end-date full-width">
91-
<!-- End date row -->
92-
<mat-label i18n>End Date</mat-label>
93-
<input matInput formControlName="endDate" [matDatepicker]="endDateMobile" [min]="dateFilterForm.value.startDate || minDate" [max]="today">
94-
<mat-datepicker-toggle matSuffix [for]="endDateMobile"></mat-datepicker-toggle>
95-
<mat-datepicker #endDateMobile></mat-datepicker>
96-
</mat-form-field>
97-
</form>
32+
<div class="full-width">
33+
<ng-container *ngTemplateOutlet="endDateField"></ng-container>
34+
</div>
9835
</mat-toolbar-row>
9936
<mat-toolbar-row *ngIf="showFiltersRow">
100-
<mat-form-field class="font-size-1">
101-
<mat-select i18n-placeholder placeholder="Filter Members" (selectionChange)="onTeamsFilterChange($event.value)" [value]="selectedTeam">
102-
<mat-option i18n value="All">All Members</mat-option>
103-
<mat-optgroup label="Teams" i18n-label>
104-
<mat-option *ngFor="let team of teams?.team" [value]="team">{{team.name}}</mat-option>
105-
</mat-optgroup>
106-
<mat-optgroup label="Enterprises" i18n-label>
107-
<mat-option *ngFor="let team of teams?.enterprise" [value]="team">{{team.name}}</mat-option>
108-
</mat-optgroup>
109-
</mat-select>
110-
</mat-form-field>
37+
<ng-container *ngTemplateOutlet="teamsFilterSelect"></ng-container>
11138
</mat-toolbar-row>
112-
<!-- App filter toggle group row -->
11339
<mat-toolbar-row *ngIf="showFiltersRow">
114-
<mat-button-toggle-group
115-
class="font-size-1"
116-
(change)="onFilterChange($event.value)"
117-
#filterGroup="matButtonToggleGroup">
118-
<mat-button-toggle value="planet" [checked]="this.filter.app === 'planet'" i18n>
119-
Planet
120-
</mat-button-toggle>
121-
<mat-button-toggle value="myplanet" [checked]="this.filter.app === 'myplanet'" i18n>
122-
myPlanet
123-
</mat-button-toggle>
124-
<mat-button-toggle value="" [checked]="this.filter.app === ''" i18n>
125-
Both
126-
</mat-button-toggle>
127-
</mat-button-toggle-group>
40+
<ng-container *ngTemplateOutlet="planetToggleGroup"></ng-container>
12841
<span class="toolbar-fill"></span>
129-
<button mat-raised-button color="primary" (click)="clearFilters()" class="margin-lr-5">
130-
<span i18n>Clear</span>
131-
</button>
42+
<ng-container *ngTemplateOutlet="clearBtn"></ng-container>
13243
</mat-toolbar-row>
13344
</ng-template>
13445
</mat-toolbar>
46+
47+
<!-- Shared templates -->
48+
<ng-template #backBtn>
49+
<button class="btnBack" mat-icon-button (click)="goBack()"><mat-icon>arrow_back</mat-icon></button>
50+
<span i18n>Reports</span>
51+
<span class="toolbar-fill"></span>
52+
</ng-template>
53+
<ng-template #timeFilterSelect>
54+
<mat-form-field class="margin-lr-5 font-size-1">
55+
<mat-select i18n-placeholder placeholder="Time Frame" (selectionChange)="onTimeFilterChange($event.value)" [value]="selectedTimeFilter">
56+
<mat-option *ngFor="let option of timeFilterOptions" [value]="option.value">{{option.label}}</mat-option>
57+
</mat-select>
58+
</mat-form-field>
59+
</ng-template>
60+
<ng-template #teamsFilterSelect>
61+
<mat-form-field class="font-size-1 margin-lr-5">
62+
<mat-select i18n-placeholder placeholder="Filter Members" (selectionChange)="onTeamsFilterChange($event.value)" [value]="selectedTeam">
63+
<mat-option i18n value="All">All Members</mat-option>
64+
<mat-optgroup label="Teams" i18n-label>
65+
<mat-option *ngFor="let team of teams?.team" [value]="team">{{team.name}}</mat-option>
66+
</mat-optgroup>
67+
<mat-optgroup label="Enterprises" i18n-label>
68+
<mat-option *ngFor="let team of teams?.enterprise" [value]="team">{{team.name}}</mat-option>
69+
</mat-optgroup>
70+
</mat-select>
71+
</mat-form-field>
72+
</ng-template>
73+
<ng-template #planetToggleGroup>
74+
<mat-button-toggle-group class="font-size-1 margin-lr-5" (change)="onFilterChange($event.value)" #filterGroup="matButtonToggleGroup">
75+
<mat-button-toggle value="planet" [checked]="this.filter.app === 'planet'" i18n>Planet</mat-button-toggle>
76+
<mat-button-toggle value="myplanet" [checked]="this.filter.app === 'myplanet'" i18n>myPlanet</mat-button-toggle>
77+
<mat-button-toggle value="" [checked]="this.filter.app === ''" i18n>Both</mat-button-toggle>
78+
</mat-button-toggle-group>
79+
</ng-template>
80+
<ng-template #clearBtn>
81+
<button mat-raised-button color="primary" (click)="clearFilters()" class="margin-lr-5"><span i18n>Clear</span></button>
82+
</ng-template>
83+
<ng-template #startDateField>
84+
<div [formGroup]="dateFilterForm">
85+
<mat-form-field class="margin-lr-5 font-size-1">
86+
<mat-label i18n>Start Date</mat-label>
87+
<input matInput formControlName="startDate" [matDatepicker]="startPicker" [min]="minDate" [max]="dateFilterForm.value.endDate || today">
88+
<mat-datepicker-toggle matSuffix [for]="startPicker"></mat-datepicker-toggle>
89+
<mat-datepicker #startPicker></mat-datepicker>
90+
<mat-error i18n *ngIf="dateFilterForm.value.startDate > dateFilterForm.value.endDate">Start date must be before end date</mat-error>
91+
</mat-form-field>
92+
</div>
93+
</ng-template>
94+
<ng-template #endDateField>
95+
<div [formGroup]="dateFilterForm">
96+
<mat-form-field class="margin-lr-5 font-size-1">
97+
<mat-label i18n>End Date</mat-label>
98+
<input matInput formControlName="endDate" [matDatepicker]="endPicker" [min]="dateFilterForm.value.startDate || minDate" [max]="today">
99+
<mat-datepicker-toggle matSuffix [for]="endPicker"></mat-datepicker-toggle>
100+
<mat-datepicker #endPicker></mat-datepicker>
101+
</mat-form-field>
102+
</div>
103+
</ng-template>
104+
135105
<div class="space-container">
136106
<mat-toolbar>
137107
<mat-toolbar-row class="primary-color font-size-1">

‎src/app/manager-dashboard/reports/reports-detail.scss‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
$screen-md: 1200px;
44

55
:host {
6-
@include screen-sizes($screen-md, $screen-sm);
6+
@include screen-sizes($screen-md);
77
}
88

99
mat-toolbar mat-form-field {
@@ -13,10 +13,6 @@ mat-toolbar mat-form-field {
1313
}
1414
}
1515

16-
.diagnosis-trend {
17-
line-height: 3.7em;
18-
}
19-
2016
.subheading {
2117
font-weight: bold;
2218
}
@@ -49,27 +45,15 @@ mat-toolbar mat-form-field {
4945
}
5046
}
5147

52-
.mobile-view-styles {
53-
display: none;
54-
}
55-
5648
@media(max-width: #{$screen-md}) {
57-
.mobile-view-styles {
58-
display: block;
59-
}
60-
6149
.mat-form-field {
6250
width: 100%;
6351
}
6452

65-
.date-form {
66-
width: 100%;
67-
}
68-
6953
mat-button-toggle-group {
7054
width: 100%;
7155
display: flex;
72-
56+
7357
.mat-button-toggle {
7458
flex: 1;
7559
}

0 commit comments

Comments
 (0)