Add date range filter to table component

backend/app/Http/Controllers/ServiceController.php

@@ -6,6 +6,7 @@ use App\Models\Place;
 use App\Models\Service;
 use App\Models\User;
 use Illuminate\Http\Request;
+use Illuminate\Support\Carbon;
 use Illuminate\Support\Facades\Http;
 use App\Utils\Logger;
 
@@ -18,15 +19,27 @@ class ServiceController extends Controller
     {
         User::where('id', $request->user()->id)->update(['last_access' => now()]);
 
+        $query = Service::join('users', 'users.id', '=', 'chief_id')
+            ->join('services_types', 'services_types.id', '=', 'type_id')
+            ->select('services.*', 'users.name as chief', 'services_types.name as type')
+            ->with('drivers:name')
+            ->with('crew:name')
+            ->with('place')
+            ->orderBy('start', 'desc');
+        if($request->has('from')) {
+            try {
+                $from = Carbon::parse($request->input('from'));
+                $query->whereDate('start', '>=', $from->toDateString());
+            } catch (\Carbon\Exceptions\InvalidFormatException $e) { }
+        }
+        if($request->has('to')) {
+            try {
+                $to = Carbon::parse($request->input('to'));
+                $query->whereDate('start', '<=', $to->toDateString());
+            } catch (\Carbon\Exceptions\InvalidFormatException $e) { }
+        }
         return response()->json(
-            Service::join('users', 'users.id', '=', 'chief_id')
-                ->join('services_types', 'services_types.id', '=', 'type_id')
-                ->select('services.*', 'users.name as chief', 'services_types.name as type')
-                ->with('drivers:name')
-                ->with('crew:name')
-                ->with('place')
-                ->orderBy('start', 'desc')
-                ->get()
+            $query->get()
         );
     }
 

backend/app/Http/Controllers/StatsController.php

@@ -2,9 +2,7 @@
 
 namespace App\Http\Controllers;
 
-use App\Models\Place;
 use App\Models\Service;
-use App\Models\User;
 
 use Illuminate\Http\Request;
 use Illuminate\Support\Carbon;

backend/app/Http/Controllers/TrainingController.php

@@ -5,6 +5,7 @@ namespace App\Http\Controllers;
 use App\Models\Training;
 use App\Models\User;
 use Illuminate\Http\Request;
+use Illuminate\Support\Carbon;
 use App\Utils\Logger;
 
 class TrainingController extends Controller
@@ -16,12 +17,25 @@ class TrainingController extends Controller
     {
         User::where('id', $request->user()->id)->update(['last_access' => now()]);
 
+        $query = Training::join('users', 'users.id', '=', 'chief_id')
+            ->select('trainings.*', 'users.name as chief')
+            ->with('crew:name')
+            ->orderBy('start', 'desc')
+            ->get();
+        if($request->has('from')) {
+            try {
+                $from = Carbon::parse($request->input('from'));
+                $query->whereDate('start', '>=', $from->toDateString());
+            } catch (\Carbon\Exceptions\InvalidFormatException $e) { }
+        }
+        if($request->has('to')) {
+            try {
+                $to = Carbon::parse($request->input('to'));
+                $query->whereDate('start', '<=', $to->toDateString());
+            } catch (\Carbon\Exceptions\InvalidFormatException $e) { }
+        }
         return response()->json(
-            Training::join('users', 'users.id', '=', 'chief_id')
-                ->select('trainings.*', 'users.name as chief')
-                ->with('crew:name')
-                ->orderBy('start', 'desc')
-                ->get()
+            $query->get()
         );
     }
 

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

@@ -1,10 +1,13 @@
 <ng-container *ngIf="sourceType && enablePaginationTypes.includes(sourceType)">
-    <div class="row mt-5">
+    <div class="row mt-5 mb-3">
         <div class="col-xs-12 col-12">
             <input type="text" class="form-control" placeholder="{{ 'search'|translate|titlecase }}" [(ngModel)]="searchText" (ngModelChange)="onSearchTextChange($event)">
         </div>
     </div>
 </ng-container>
+<ng-container *ngIf="sourceType && enableDateRangePickerTypes.includes(sourceType)">
+    <daterange-picker [(ngModel)]="range" (ngModelChange)="filterDateRangeChanged($event)"></daterange-picker>
+</ng-container>
 
 <div id="list" class="table-responsive mt-4">
     <table *ngIf="sourceType === 'list'" id="table" class="table table-striped table-bordered dt-responsive nowrap">
@@ -88,7 +91,8 @@
         </thead>
         <tbody id="table_body">
             <tr *ngFor="let row of displayedData; index as i">
-                <td>{{ data.length - (rowsPerPage * (currentPage-1) + i) }}</td>
+                <td *ngIf="rangePicked"></td>
+                <td *ngIf="!rangePicked">{{ data.length - (rowsPerPage * (currentPage-1) + i) }}</td>
                 <td>{{ row.start | date:'dd/MM/YYYY, HH:mm' }}</td>
                 <td>{{ row.end | date:'dd/MM/YYYY, HH:mm' }}</td>
                 <td>{{ row.code }}</td>

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

@@ -33,7 +33,14 @@ export class TableComponent implements OnInit, OnDestroy {
     "updated_by_id",
     "changed_id",
     "editor_id"
-  ]
+  ];
+
+  enableDateRangePickerTypes: string[] = ['services', 'trainings'];
+  range: (Date | undefined)[] | undefined = undefined;
+  lastRange: (Date | undefined)[] | undefined = undefined;
+  rangePicked = false;
+  filterStart: Date | undefined;
+  filterEnd: Date | undefined;
 
   _maxPaginationSize: number = 10;
   _rowsPerPage: number = 20;
@@ -80,7 +87,10 @@ export class TableComponent implements OnInit, OnDestroy {
 
   loadTableData() {
     if(!this.sourceType) this.sourceType = "list";
-    this.api.get(this.sourceType, {}, this.etag).then((data: any) => {
+    this.api.get(this.sourceType, this.rangePicked ? {
+      from: this.filterStart ? this.filterStart.toISOString() : undefined,
+      to: this.filterEnd ? this.filterEnd.toISOString() : undefined
+    } : {}, this.etag).then((data: any) => {
       if(this.api.isLastSame) return;
       this.etag = this.api.lastEtag;
       this.data = data.filter((row: any) => typeof row.hidden !== 'undefined' ? !row.hidden : true);
@@ -96,6 +106,21 @@ export class TableComponent implements OnInit, OnDestroy {
     });
   }
 
+  filterDateRangeChanged($event: Date[]) {
+    console.log($event);
+    if (typeof($event) !== "object" || ($event !== null && $event.length === 0)) {
+      this.filterStart = undefined;
+      this.filterEnd = undefined;
+      this.rangePicked = false;
+    } else {
+      this.filterStart = $event[0];
+      this.filterEnd = $event[1];
+      this.rangePicked = true;
+    }
+    if(this.lastRange !== this.range) this.loadTableData();
+    this.lastRange = this.range;
+  }
+
   pageChanged(event: PageChangedEvent): void {
     const startItem = (event.page - 1) * event.itemsPerPage;
     const endItem = event.page * event.itemsPerPage;

frontend/src/app/app.module.ts

@@ -25,6 +25,8 @@ import { ModalAvailabilityScheduleComponent } from './_components/modal-availabi
 import { ModalAlertComponent } from './_components/modal-alert/modal-alert.component';
 import { OwnerImageComponent } from './_components/owner-image/owner-image.component';
 
+import { DaterangePickerModule } from './_components/daterange-picker/daterange-picker.module';
+
 import { LoginComponent } from './_routes/login/login.component';
 
 import { ListComponent } from './_routes/list/list.component';
@@ -67,6 +69,7 @@ import { AuthInterceptor } from './_providers/auth-interceptor.provider';
     TooltipModule.forRoot(),
     CollapseModule.forRoot(),
     AlertModule.forRoot(),
+    DaterangePickerModule,
     PaginationModule.forRoot(),
     ServiceWorkerModule.register('ngsw-worker.js', {
       enabled: false && environment.production,