init
This commit is contained in:
@@ -0,0 +1,39 @@
|
||||
<div class="flex column fill">
|
||||
<div class="flex wrap filter-container">
|
||||
<a mat-icon-button (click)="filterOpen=!filterOpen" title="{{'turnovers.filter' | i18n}}"
|
||||
[color]="filterOpen ? 'primary': 'accent'">
|
||||
<mat-icon>filter_alt</mat-icon>
|
||||
</a>
|
||||
|
||||
<form class="flex wrap filter" *ngIf="filterOpen">
|
||||
<mat-form-field class="margin">
|
||||
<mat-label>{{'turnovers.filter.created' | i18n}}</mat-label>
|
||||
<mat-date-range-input [rangePicker]="picker">
|
||||
<input matStartDate placeholder="{{'turnovers.filter.created.from' | i18n}}"
|
||||
[value]="turnovers && turnovers.filter && turnovers.filter.from"
|
||||
(dateChange)="setFilter('from', $event.value && $event.value.toISOString() || undefined)">
|
||||
<input matEndDate placeholder="{{'turnovers.filter.created.to' | i18n}}"
|
||||
[value]="turnovers && turnovers.filter && turnovers.filter.to"
|
||||
(dateChange)="setFilter('to', $event.value && $event.value.endOf('day').toISOString() || undefined)">
|
||||
</mat-date-range-input>
|
||||
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
|
||||
<mat-date-range-picker #picker></mat-date-range-picker>
|
||||
</mat-form-field>
|
||||
|
||||
|
||||
<mat-form-field class="margin">
|
||||
<mat-label>{{'turnovers.filter.username' | i18n}}</mat-label>
|
||||
<input type="text" matInput [matAutocomplete]="auto" [formControl]="usersFormControl"
|
||||
(change)="setInputFilter('username', $event.target)">
|
||||
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="setFilter('username', $event.option.value)">
|
||||
@for (user of users | async; track user.username) {
|
||||
<mat-option [value]="user.username">{{user.username}}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<ui-turnovers class="flex column grow" [turnovers]="turnovers" (page)="applyPage($event)" (sort)="applySort($event)"
|
||||
[username]="true"></ui-turnovers>
|
||||
</div>
|
||||
@@ -0,0 +1,22 @@
|
||||
.filter-container {
|
||||
padding-left: 15px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.filter {
|
||||
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
max-height: 70px;
|
||||
|
||||
&>* {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ui-turnovers {
|
||||
min-height: 0;
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormControl } from '@angular/forms';
|
||||
import { PageEvent } from '@angular/material/paginator';
|
||||
import { Sort } from '@angular/material/sort';
|
||||
import { debounceTime, Observable, switchMap } from 'rxjs';
|
||||
import { TurnoverManagementService } from 'src/app/services/turnover.management.service';
|
||||
import { UserManagementService } from 'src/app/services/user.management.service';
|
||||
|
||||
@Component({
|
||||
selector: 'page-turnovers-manage',
|
||||
templateUrl: './manage.page.html',
|
||||
styleUrls: ['./manage.page.scss']
|
||||
})
|
||||
export class PageTurnoversManage implements OnInit {
|
||||
|
||||
turnovers: any;
|
||||
sort: string = "created";
|
||||
descending: boolean = true;
|
||||
filterOpen: boolean = false;
|
||||
|
||||
users: Observable<any>;
|
||||
usersFormControl = new FormControl();
|
||||
|
||||
constructor(
|
||||
private turnoverManagementService: TurnoverManagementService,
|
||||
private userManagementService: UserManagementService
|
||||
) { }
|
||||
|
||||
|
||||
ngOnInit(): void {
|
||||
this.turnovers = {};
|
||||
this.update();
|
||||
this.users = this.usersFormControl
|
||||
.valueChanges
|
||||
.pipe(
|
||||
debounceTime(300),
|
||||
switchMap(value => this.userManagementService.pick(value))
|
||||
);
|
||||
}
|
||||
|
||||
update() {
|
||||
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({
|
||||
next: (data: any) => {
|
||||
this.turnovers = data;
|
||||
this.turnovers.filter = filter;
|
||||
}, error: (error) => {
|
||||
this.turnovers = { error: error };
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
applyPage(event: PageEvent) {
|
||||
this.turnovers.limit = event.pageSize;
|
||||
this.turnovers.offset = event.pageSize * event.pageIndex;
|
||||
this.update();
|
||||
}
|
||||
|
||||
applySort(event: Sort) {
|
||||
this.sort = event.direction ? event.active : 'created';
|
||||
this.descending = event.direction !== 'asc';
|
||||
this.update();
|
||||
}
|
||||
|
||||
setInputFilter(key: string, target: EventTarget) {
|
||||
this.setFilter(key, (target as HTMLInputElement).value);
|
||||
}
|
||||
|
||||
setFilter(key: string, value) {
|
||||
if (value != this.turnovers.filter[key]) {
|
||||
this.turnovers.filter[key] = value;
|
||||
this.turnovers.offset = 0;
|
||||
this.update();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
<div class="flex column fill">
|
||||
<div class="flex wrap filter-container">
|
||||
<a mat-icon-button (click)="filterOpen=!filterOpen" title="{{'turnovers.filter' | i18n}}"
|
||||
[color]="filterOpen ? 'primary': 'accent'">
|
||||
<mat-icon>filter_alt</mat-icon>
|
||||
</a>
|
||||
|
||||
<form class="flex wrap filter" *ngIf="filterOpen">
|
||||
<mat-form-field class="margin">
|
||||
<mat-label>{{'turnovers.filter.created' | i18n}}</mat-label>
|
||||
<mat-date-range-input [rangePicker]="picker">
|
||||
<input matStartDate placeholder="{{'turnovers.filter.created.from' | i18n}}"
|
||||
[value]="turnovers && turnovers.filter && turnovers.filter.from"
|
||||
(dateChange)="setFilter('from', $event.value && $event.value.toISOString() || undefined)">
|
||||
<input matEndDate placeholder="{{'turnovers.filter.created.to' | i18n}}"
|
||||
[value]="turnovers && turnovers.filter && turnovers.filter.to"
|
||||
(dateChange)="setFilter('to', $event.value && $event.value.endOf('day').toISOString() || undefined)">
|
||||
</mat-date-range-input>
|
||||
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
|
||||
<mat-date-range-picker #picker></mat-date-range-picker>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<ui-turnovers class="flex column grow" [turnovers]="turnovers" (page)="applyPage($event)"
|
||||
(sort)="applySort($event)"></ui-turnovers>
|
||||
</div>
|
||||
@@ -0,0 +1,23 @@
|
||||
.filter-container {
|
||||
padding-left: 15px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.filter {
|
||||
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
max-height: 70px;
|
||||
|
||||
&>* {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
ui-turnovers {
|
||||
min-height: 0;
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormControl } from '@angular/forms';
|
||||
import { PageEvent } from '@angular/material/paginator';
|
||||
import { Sort } from '@angular/material/sort';
|
||||
import { debounceTime, Observable, switchMap } from 'rxjs';
|
||||
import { TurnoverService } from 'src/app/services/turnover.service';
|
||||
import { UserManagementService } from 'src/app/services/user.management.service';
|
||||
|
||||
@Component({
|
||||
selector: 'page-turnovers',
|
||||
templateUrl: './turnovers.page.html',
|
||||
styleUrls: ['./turnovers.page.scss']
|
||||
})
|
||||
export class PageTurnovers implements OnInit {
|
||||
|
||||
turnovers: any;
|
||||
sort: string = "created";
|
||||
descending: boolean = true;
|
||||
filterOpen: boolean = false;
|
||||
|
||||
users: Observable<any>;
|
||||
usersFormControl = new FormControl();
|
||||
|
||||
constructor(
|
||||
private turnoverService: TurnoverService
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.turnovers = {};
|
||||
this.update();
|
||||
}
|
||||
|
||||
update() {
|
||||
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) => {
|
||||
this.turnovers = data;
|
||||
this.turnovers.filter = filter;
|
||||
}, error: (error) => {
|
||||
this.turnovers = { error: error };
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
applyPage(event: PageEvent) {
|
||||
this.turnovers.limit = event.pageSize;
|
||||
this.turnovers.offset = event.pageSize * event.pageIndex;
|
||||
this.update();
|
||||
}
|
||||
|
||||
applySort(event: Sort) {
|
||||
this.sort = event.direction ? event.active : 'created';
|
||||
this.descending = event.direction !== 'asc';
|
||||
this.update();
|
||||
}
|
||||
|
||||
setFilter(key: string, value) {
|
||||
if (value != this.turnovers.filter[key]) {
|
||||
this.turnovers.filter[key] = value;
|
||||
this.turnovers.offset = 0;
|
||||
this.update();
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user