Lurkars/buntspecht
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve filter, add url parameter, overview improvements

Browse Source
This commit is contained in:
Lurkars
2024-10-05 15:14:46 +02:00
parent 4dda02c231
commit 0913d090b4
23 changed files with 630 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files
buntspecht-frontend/src/app/pages/turnovers/manage/manage.page.html
+8 -3
View File
@@ -5,7 +5,8 @@
<mat-icon>filter_alt</mat-icon>
</a>
<form class="flex wrap filter" *ngIf="filterOpen">
@if(filterOpen) {
<form class="flex wrap filter">
<mat-form-field class="margin">
<mat-label>{{'turnovers.filter.created' | i18n}}</mat-label>
<mat-date-range-input [rangePicker]="picker">
@@ -24,6 +25,7 @@
<mat-form-field class="margin">
<mat-label>{{'turnovers.filter.username' | i18n}}</mat-label>
<input type="text" matInput [matAutocomplete]="auto" [formControl]="usersFormControl"
[value]="turnovers && turnovers.filter && turnovers.filter.username || ''"
(change)="setInputFilter('username', $event.target)">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="setFilter('username', $event.option.value)">
@for (user of users | async; track user.username) {
@@ -34,14 +36,17 @@
<mat-form-field class="margin">
<mat-label>{{'turnovers.filter.customer' | i18n}}</mat-label>
<input type="text" matInput (input)="setInputFilter('customer', $event.target)">
<input type="text" matInput [value]="turnovers && turnovers.filter && turnovers.filter.customer || ''"
(input)="setInputFilter('customer', $event.target)">
</mat-form-field>
<mat-form-field class="margin">
<mat-label>{{'turnovers.filter.motif' | i18n}}</mat-label>
<input type="text" matInput (input)="setInputFilter('motif', $event.target)">
<input type="text" matInput [value]="turnovers && turnovers.filter && turnovers.filter.motif || ''"
(input)="setInputFilter('motif', $event.target)">
</mat-form-field>
</form>
}
</div>
<ui-turnovers class="flex column grow" [turnovers]="turnovers" (page)="applyPage($event)" (sort)="applySort($event)"
buntspecht-frontend/src/app/pages/turnovers/manage/manage.page.scss
-2
View File
@@ -4,10 +4,8 @@
align-items: center;
.filter {
justify-content: flex-start;
align-items: center;
max-height: 70px;
&>* {
margin-top: 5px;
buntspecht-frontend/src/app/pages/turnovers/manage/manage.page.ts
+81 -4
View File
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { PageEvent } from '@angular/material/paginator';
import { Sort } from '@angular/material/sort';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { debounceTime, Observable, switchMap } from 'rxjs';
import { TurnoverManagementService } from 'src/app/services/turnover.management.service';
import { UserManagementService } from 'src/app/services/user.management.service';
@@ -23,24 +24,64 @@ export class PageTurnoversManage implements OnInit {
constructor(
private turnoverManagementService: TurnoverManagementService,
private userManagementService: UserManagementService
private userManagementService: UserManagementService,
private router: Router,
private route: ActivatedRoute
) { }
ngOnInit(): void {
this.turnovers = {};
this.update();
this.users = this.usersFormControl
.valueChanges
.pipe(
debounceTime(300),
switchMap(value => this.userManagementService.pick(value))
);
this.route.queryParams.subscribe({
next: (params) => {
this.turnovers = { filter: {} };
if (params['l']) {
this.turnovers.limit = +params['l'];
if (this.turnovers.limit < 1) {
this.turnovers.limit = 1;
}
}
if (params['o']) {
this.turnovers.offset = +params['o'];
if (this.turnovers.offset < 0) {
this.turnovers.offset = 0;
}
}
if (params['s']) {
this.sort = params['s'];
}
if (params['a']) {
this.descending = false;
} else {
this.descending = true;
}
for (const param in params) {
if (param != 'l' && param != 'o' && param != 's' && param != 'a') {
this.filterOpen = true;
this.turnovers.filter[param] = params[param];
if (param == 'username') {
this.usersFormControl.setValue(params[param]);
}
}
}
this.refresh();
}
});
}
update() {
refresh() {
const filter = JSON.parse(JSON.stringify(this.turnovers.filter || {}));
this.turnoverManagementService.fetch(this.turnovers.limit || 15, this.turnovers.offset || 0, this.sort, this.descending, this.turnovers.filter).subscribe({
this.turnoverManagementService.fetch(this.turnovers.limit || 15, this.turnovers.offset || 0, this.sort, this.descending, filter).subscribe({
next: (data: any) => {
this.turnovers = data;
this.turnovers.filter = filter;
@@ -50,6 +91,42 @@ export class PageTurnoversManage implements OnInit {
})
}
update() {
const filter = JSON.parse(JSON.stringify(this.turnovers.filter || {}));
const params: Params = { l: null, o: null, s: null, a: null };
if ((this.turnovers.limit || 15) != 15) {
params['l'] = this.turnovers.limit;
}
if ((this.turnovers.offset || 0) != 0) {
params['o'] = this.turnovers.offset;
}
if (this.sort != 'created') {
params['s'] = this.sort;
}
if (!this.descending) {
params['a'] = true;
}
if (filter) {
for (const param in filter) {
params[param] = filter[param] || null;
}
}
this.router.navigate(
[],
{
relativeTo: this.route,
queryParams: params,
queryParamsHandling: 'replace'
});
}
applyPage(event: PageEvent) {
this.turnovers.limit = event.pageSize;
this.turnovers.offset = event.pageSize * event.pageIndex;
buntspecht-frontend/src/app/pages/turnovers/turnovers.page.html
+7 -3
View File
@@ -5,7 +5,8 @@
<mat-icon>filter_alt</mat-icon>
</a>
<form class="flex wrap filter" *ngIf="filterOpen">
@if (filterOpen) {
<form class="flex wrap filter">
<mat-form-field class="margin">
<mat-label>{{'turnovers.filter.created' | i18n}}</mat-label>
<mat-date-range-input [rangePicker]="picker">
@@ -22,14 +23,17 @@
<mat-form-field class="margin">
<mat-label>{{'turnovers.filter.customer' | i18n}}</mat-label>
<input type="text" matInput (input)="setInputFilter('customer', $event.target)">
<input type="text" matInput [value]="turnovers && turnovers.filter && turnovers.filter.customer || ''"
(input)="setInputFilter('customer', $event.target)">
</mat-form-field>
<mat-form-field class="margin">
<mat-label>{{'turnovers.filter.motif' | i18n}}</mat-label>
<input type="text" matInput (input)="setInputFilter('motif', $event.target)">
<input type="text" matInput [value]="turnovers && turnovers.filter && turnovers.filter.motif || ''"
(input)="setInputFilter('motif', $event.target)">
</mat-form-field>
</form>
}
</div>
<ui-turnovers class="flex column grow" [turnovers]="turnovers" [overview]="overview" (page)="applyPage($event)"
buntspecht-frontend/src/app/pages/turnovers/turnovers.page.scss
-1
View File
@@ -7,7 +7,6 @@
justify-content: flex-start;
align-items: center;
max-height: 70px;
&>* {
margin-top: 5px;
buntspecht-frontend/src/app/pages/turnovers/turnovers.page.ts
+77 -6
View File
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { PageEvent } from '@angular/material/paginator';
import { Sort } from '@angular/material/sort';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { debounceTime, Observable, switchMap } from 'rxjs';
import { TurnoverService } from 'src/app/services/turnover.service';
import { UserManagementService } from 'src/app/services/user.management.service';
@@ -18,20 +19,54 @@ export class PageTurnovers implements OnInit {
sort: string = "created";
descending: boolean = true;
filterOpen: boolean = false;
users: Observable<any>;
usersFormControl = new FormControl();
init: boolean = true;
constructor(
private turnoverService: TurnoverService
private turnoverService: TurnoverService,
private router: Router,
private route: ActivatedRoute
) { }
ngOnInit(): void {
this.turnovers = {};
this.update();
this.route.queryParams.subscribe({
next: (params) => {
this.turnovers = { filter: {} };
if (params['l']) {
this.turnovers.limit = +params['l'];
if (this.turnovers.limit < 1) {
this.turnovers.limit = 1;
}
}
if (params['o']) {
this.turnovers.offset = +params['o'];
if (this.turnovers.offset < 0) {
this.turnovers.offset = 0;
}
}
if (params['s']) {
this.sort = params['s'];
}
if (params['a']) {
this.descending = false;
} else {
this.descending = true;
}
for (const param in params) {
if (param != 'l' && param != 'o' && param != 's' && param != 'a') {
this.filterOpen = true;
this.turnovers.filter[param] = params[param];
}
}
this.refresh();
}
});
}
update() {
refresh() {
const filter = JSON.parse(JSON.stringify(this.turnovers.filter || {}));
this.turnoverService.fetch(this.turnovers.limit || 15, this.turnovers.offset || 0, this.sort, this.descending, this.turnovers.filter).subscribe({
next: (data: any) => {
@@ -54,6 +89,42 @@ export class PageTurnovers implements OnInit {
})
}
update() {
const filter = JSON.parse(JSON.stringify(this.turnovers.filter || {}));
const params: Params = { l: null, o: null, s: null, a: null };
if ((this.turnovers.limit || 15) != 15) {
params['l'] = this.turnovers.limit;
}
if ((this.turnovers.offset || 0) != 0) {
params['o'] = this.turnovers.offset;
}
if (this.sort != 'created') {
params['s'] = this.sort;
}
if (!this.descending) {
params['a'] = true;
}
if (filter) {
for (const param in filter) {
params[param] = filter[param] || null;
}
}
this.router.navigate(
[],
{
relativeTo: this.route,
queryParams: params,
queryParamsHandling: 'replace'
});
}
applyPage(event: PageEvent) {
this.turnovers.limit = event.pageSize;
this.turnovers.offset = event.pageSize * event.pageIndex;