Add date range filter to table component
This commit is contained in:
parent
5f6432de36
commit
9a6a163229
|
@ -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()]);
|
||||
|
||||
return response()->json(
|
||||
Service::join('users', 'users.id', '=', 'chief_id')
|
||||
$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')
|
||||
->get()
|
||||
->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(
|
||||
$query->get()
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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()]);
|
||||
|
||||
return response()->json(
|
||||
Training::join('users', 'users.id', '=', 'chief_id')
|
||||
$query = Training::join('users', 'users.id', '=', 'chief_id')
|
||||
->select('trainings.*', 'users.name as chief')
|
||||
->with('crew:name')
|
||||
->orderBy('start', 'desc')
|
||||
->get()
|
||||
->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(
|
||||
$query->get()
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue