UI Improvements

frontend/src/app/_components/daterange-picker/daterange-picker.component.html

@@ -1,6 +1,6 @@
 <div class="input-group flex-nowrap">
-    <span class="input-group-text" id="addon-wrapping" translate>select_date_range</span>
+    <span class="input-group-text" id="dateRangeLabel" (click)="dp.show()" translate>select_date_range</span>
     <input type="text" [disabled]="disabled" [placeholder]="'select_date_range'|translate" class="form-control" placement="bottom"
-        bsDaterangepicker [bsConfig]="dateRangePickerOptions" [maxDate]="maxDate" [(bsValue)]="range" (bsValueChange)="updateValue($event)">
+        bsDaterangepicker [bsConfig]="dateRangePickerOptions" [maxDate]="maxDate" [(bsValue)]="range" (bsValueChange)="updateValue($event)" #dp="bsDaterangepicker">
     <button class="btn btn-outline-secondary" type="button" (click)="resetRange()" translate>remove_date_filters</button>
 </div>

frontend/src/app/_components/daterange-picker/daterange-picker.component.scss

@@ -1,3 +1,10 @@
 .date-picker {
     width: 85%
-}
+}
+
+/* Hide #dateRangeLabel on mobile */
+@media (max-width: 767px) {
+    #dateRangeLabel {
+        display: none;
+    }
+}

frontend/src/app/_components/table/table.component.html

@@ -177,7 +177,7 @@
 
 <ng-container *ngIf="sourceType && enablePaginationTypes.includes(sourceType)">
     <div class="row mt-5">
-        <div class="col-xs-12 col-12">
+        <div class="col-xs-12 col-12 pagination-parent">
             <pagination
               [totalItems]="totalElements"
               [(ngModel)]="currentPage"

frontend/src/app/_components/table/table.component.scss

@@ -32,3 +32,8 @@ img {
   text-decoration: underline;
   color: #0d6efd;
 }
+
+.pagination-parent {
+  overflow-y: scroll !important;
+}
+

frontend/src/app/_routes/services/services.component.html

@@ -3,8 +3,6 @@
     <button type="button" class="btn btn-primary" (click)="addService()">{{ 'add'|translate|ftitlecase }} {{ 'service'|translate }}</button>
 </div>
 <div class="text-center">
-    <div class="alert alert-primary mt-4" role="alert">
-        Per visualizzare statistiche e mappa degli interventi, <a routerLinkActive="active" routerLink="/stats/services">vai alla sezione "Statistiche > Interventi"</a>.
-    </div>
+    <div class="alert alert-primary mt-4" role="alert" (click)="goToStats()" translate>open_services_stats</div>
 </div>
 <app-table [sourceType]="'services'" [refreshInterval]="1200000"></app-table>

frontend/src/app/_routes/services/services.component.ts

@@ -17,4 +17,8 @@ export class ServicesComponent implements OnInit {
     this.router.navigate(['services', 'new']);
   }
 
+  goToStats() {
+    this.router.navigate(['stats', 'services']);
+  }
+
 }

frontend/src/app/app.component.html

@@ -3,6 +3,7 @@
   <a routerLinkActive="active" (click)="menuButtonClicked = false" routerLink="/services" translate>menu.services</a>
   <a routerLinkActive="active" (click)="menuButtonClicked = false" routerLink="/trainings" translate>menu.trainings</a>
   <a routerLinkActive="active" (click)="menuButtonClicked = false" routerLink="/logs" translate>menu.logs</a>
+  <a routerLinkActive="active" (click)="menuButtonClicked = false" routerLink="/stats/services" translate>menu.stats</a>
   <a *ngIf="auth.profile.can('admin-read')" routerLinkActive="active" (click)="menuButtonClicked = false" routerLink="/admin" translate>menu.admin</a>
   <a style="float: right;" id="logout" routerLinkActive="active" [routerLink]="auth.profile.profilePageLink">{{ 'menu.hi'|translate|ftitlecase }}, {{ auth.profile.name }}. <b id="logout-text" (click)="logout($event)" translate *ngIf="!auth.profile.impersonating_user">menu.logout</b><b id="logout-text" (click)="auth.logout()" translate *ngIf="auth.profile.impersonating_user">menu.stop_impersonating</b></a>
   <a class="icon" id="menuButton" (click)="menuButtonClicked = !menuButtonClicked">☰</a>

frontend/src/app/app.component.scss

@@ -3,6 +3,7 @@
   background-color: red;
   overflow: hidden;
   margin-bottom: 2em;
+  z-index: 10000;
 }
 
 /* Style the links inside the navigation bar */

frontend/src/assets/i18n/en.json

@@ -4,6 +4,7 @@
         "services": "Services",
         "trainings": "Trainings",
         "logs": "Logs",
+        "stats": "Stats",
         "admin": "Admin",
         "logout": "Logout",
         "stop_impersonating": "Stop impersonating",
@@ -298,6 +299,7 @@
     "never": "never",
     "optional": "optional",
     "not_enough_permissions": "You don't have enough permissions to access this page.",
+    "open_services_stats": "To view the statistics, go to the \"Stats\" page.",
     "error_title": "Error",
     "success_title": "Success",
     "select_date_range": "Select date range",

frontend/src/assets/i18n/it.json

@@ -4,6 +4,7 @@
         "services": "Interventi",
         "trainings": "Esercitazioni",
         "logs": "Logs",
+        "stats": "Statistiche",
         "admin": "Amministrazione",
         "logout": "Logout",
         "stop_impersonating": "Torna al vero account",
@@ -298,6 +299,7 @@
     "never": "mai",
     "optional": "opzionale",
     "not_enough_permissions": "Non hai i permessi necessari per accedere a questa pagina.",
+    "open_services_stats": "Per visualizzare statistiche e mappa degli interventi, vai alla sezione \"Statistiche\".",
     "error_title": "Errore",
     "success_title": "Successo",
     "select_date_range": "Seleziona un intervallo di date",