feat: Füge Eingaben für die Umschlagstabelle und Statusfilteroptionen hinzu
- `data`, `displayedColumns` und `schema` wurden als `@Input`-Eigenschaften für die Umschlagstabelle hinzugefügt. - `min`, `max` und `ignore` Statusfilter wurden als Objekt-Eingaben für Statusbeschränkungen eingeführt. - Die Methode `getEnvelopeReceiver` wurde aktualisiert, um Statusfilter über Abfrageparameter zu unterstützen. - `getEnvelopeReceiverAsync` wurde für die Promise-basierte Verarbeitung von Status-gefilterten Anfragen hinzugefügt. - Die Umschlag-Tab-Konfiguration wurde geändert, um Statusfilter dynamisch anzuwenden.
This commit is contained in:
parent
9cc15f9beb
commit
83ce528e2f
@ -1,10 +1,11 @@
|
|||||||
import { Component, ViewChild } from '@angular/core';
|
import { Component, Input, ViewChild } from '@angular/core';
|
||||||
import { EnvelopeReceiverService } from '../../services/envelope-receiver.service';
|
import { EnvelopeReceiverService } from '../../services/envelope-receiver.service';
|
||||||
import { MatTable, MatTableModule } from '@angular/material/table';
|
import { MatTable, MatTableModule } from '@angular/material/table';
|
||||||
import { CommonModule } from '@angular/common'
|
import { CommonModule } from '@angular/common'
|
||||||
import {MatIconModule} from '@angular/material/icon';
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
import {MatButtonModule} from '@angular/material/button';
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
import {animate, state, style, transition, trigger} from '@angular/animations';
|
import { animate, state, style, transition, trigger } from '@angular/animations';
|
||||||
|
import { Status } from '../../enums/envelope-const'
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-envelope-table',
|
selector: 'app-envelope-table',
|
||||||
@ -13,8 +14,8 @@ import {animate, state, style, transition, trigger} from '@angular/animations';
|
|||||||
templateUrl: './envelope-table.component.html',
|
templateUrl: './envelope-table.component.html',
|
||||||
animations: [
|
animations: [
|
||||||
trigger('detailExpand', [
|
trigger('detailExpand', [
|
||||||
state('collapsed,void', style({height: '0px', minHeight: '0'})),
|
state('collapsed,void', style({ height: '0px', minHeight: '0' })),
|
||||||
state('expanded', style({height: '*'})),
|
state('expanded', style({ height: '*' })),
|
||||||
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
||||||
]),
|
]),
|
||||||
],
|
],
|
||||||
@ -22,12 +23,13 @@ import {animate, state, style, transition, trigger} from '@angular/animations';
|
|||||||
})
|
})
|
||||||
export class EnvelopeTableComponent {
|
export class EnvelopeTableComponent {
|
||||||
|
|
||||||
data: Array<any> = []
|
@Input() data: Array<any> = []
|
||||||
|
|
||||||
public displayedColumns: string[] = ['title', 'status', 'type', 'privateMessage', 'addedWhen'];
|
@Input() options?: { min_status?: number; max_status?: number; ignore_status?: number[] }
|
||||||
columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];
|
|
||||||
|
@Input() displayedColumns: string[] = ['title', 'status', 'type', 'privateMessage', 'addedWhen'];
|
||||||
schema: any = {
|
|
||||||
|
@Input() schema: Record<string, { header: string; field: (element: any) => any; }> = {
|
||||||
'title': {
|
'title': {
|
||||||
header: 'Title',
|
header: 'Title',
|
||||||
field: (element: any) => element.envelope.title
|
field: (element: any) => element.envelope.title
|
||||||
@ -50,6 +52,8 @@ export class EnvelopeTableComponent {
|
|||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];
|
||||||
|
|
||||||
expandedElement: any | null;
|
expandedElement: any | null;
|
||||||
|
|
||||||
@ViewChild(MatTable) table!: MatTable<any>;
|
@ViewChild(MatTable) table!: MatTable<any>;
|
||||||
@ -57,7 +61,8 @@ export class EnvelopeTableComponent {
|
|||||||
constructor(private erService: EnvelopeReceiverService) { }
|
constructor(private erService: EnvelopeReceiverService) { }
|
||||||
|
|
||||||
async ngOnInit() {
|
async ngOnInit() {
|
||||||
this.data = await this.erService.getEnvelopeReceiver();
|
if (this.data.length === 0)
|
||||||
|
this.data = await this.erService.getEnvelopeReceiverAsync(this.options);
|
||||||
}
|
}
|
||||||
|
|
||||||
public updateTable() {
|
public updateTable() {
|
||||||
@ -66,5 +71,5 @@ export class EnvelopeTableComponent {
|
|||||||
|
|
||||||
isExpandedRow(index: number, row: any): boolean {
|
isExpandedRow(index: number, row: any): boolean {
|
||||||
return (row?.envelopeId === this.expandedElement?.envelopeId) && (row?.receiverId === this.expandedElement?.receiverId);
|
return (row?.envelopeId === this.expandedElement?.envelopeId) && (row?.receiverId === this.expandedElement?.receiverId);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,4 +1,4 @@
|
|||||||
export enum Status {
|
enum Status {
|
||||||
Invalid = 0,
|
Invalid = 0,
|
||||||
EnvelopeCreated = 1001,
|
EnvelopeCreated = 1001,
|
||||||
EnvelopeSaved = 1002,
|
EnvelopeSaved = 1002,
|
||||||
@ -20,4 +20,6 @@ export enum Status {
|
|||||||
MessageConfirmationSent = 3003,
|
MessageConfirmationSent = 3003,
|
||||||
MessageDeletionSent = 3004,
|
MessageDeletionSent = 3004,
|
||||||
MessageCompletionSent = 3005
|
MessageCompletionSent = 3005
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export { Status }
|
||||||
@ -1,10 +1,10 @@
|
|||||||
<div id="table">
|
<div id="table">
|
||||||
<mat-tab-group>
|
<mat-tab-group>
|
||||||
<mat-tab label="Offene Umschläge">
|
<mat-tab label="Offene Umschläge">
|
||||||
<app-envelope-table></app-envelope-table>
|
<app-envelope-table [options]="{max_status: Status.EnvelopePartlySigned}"></app-envelope-table>
|
||||||
</mat-tab>
|
</mat-tab>
|
||||||
<mat-tab label="Abgeschlossene Umschläge">
|
<mat-tab label="Abgeschlossene Umschläge">
|
||||||
<app-envelope-table></app-envelope-table>
|
<app-envelope-table [options]="{min_status: Status.EnvelopeCompletelySigned, ignore_status: [Status.EnvelopeDeleted]}"></app-envelope-table>
|
||||||
</mat-tab>
|
</mat-tab>
|
||||||
</mat-tab-group>
|
</mat-tab-group>
|
||||||
</div>
|
</div>
|
||||||
@ -2,8 +2,7 @@ import { Component } from '@angular/core';
|
|||||||
import { EnvelopeTableComponent } from "../../components/envelope-table/envelope-table.component";
|
import { EnvelopeTableComponent } from "../../components/envelope-table/envelope-table.component";
|
||||||
import { MatTabsModule } from '@angular/material/tabs';
|
import { MatTabsModule } from '@angular/material/tabs';
|
||||||
import { LocalizationService } from '../../services/localization.service';
|
import { LocalizationService } from '../../services/localization.service';
|
||||||
import { firstValueFrom } from 'rxjs/internal/firstValueFrom';
|
import { Status } from '../../enums/envelope-const'
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-envelope',
|
selector: 'app-envelope',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
@ -13,6 +12,8 @@ import { firstValueFrom } from 'rxjs/internal/firstValueFrom';
|
|||||||
})
|
})
|
||||||
export class EnvelopeComponent {
|
export class EnvelopeComponent {
|
||||||
|
|
||||||
|
readonly Status = Status;
|
||||||
|
|
||||||
private localizer: any = {};
|
private localizer: any = {};
|
||||||
|
|
||||||
constructor(private localizationService: LocalizationService) {
|
constructor(private localizationService: LocalizationService) {
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import { Injectable, inject } from '@angular/core';
|
import { Injectable, inject } from '@angular/core';
|
||||||
import { HttpClient } from '@angular/common/http';
|
import { HttpClient, HttpParams } from '@angular/common/http';
|
||||||
import { Observable, firstValueFrom } from 'rxjs';
|
import { Observable, firstValueFrom } from 'rxjs';
|
||||||
import { API_URL } from '../tokens/index';
|
import { API_URL } from '../tokens/index';
|
||||||
|
|
||||||
@ -14,7 +14,19 @@ export class EnvelopeReceiverService {
|
|||||||
this.url = `${api_url}/envelopereceiver`;
|
this.url = `${api_url}/envelopereceiver`;
|
||||||
}
|
}
|
||||||
|
|
||||||
getEnvelopeReceiver(): Promise<any> {
|
getEnvelopeReceiver(options?: { min_status?: number; max_status?: number; ignore_status?: number[] }): Observable<any> {
|
||||||
return firstValueFrom(this.http.get<any>(this.url));
|
let params = new HttpParams();
|
||||||
|
if (options?.min_status !== undefined)
|
||||||
|
params = params.set('min_status', options?.min_status.toString());
|
||||||
|
if (options?.max_status !== undefined)
|
||||||
|
params = params.set('max_status', options?.max_status.toString());
|
||||||
|
if (options?.ignore_status !== undefined)
|
||||||
|
params = params.set('ignore_status', options?.ignore_status.join(','));
|
||||||
|
return this.http.get<any>(this.url, { params });
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
getEnvelopeReceiverAsync(options?: { min_status?: number; max_status?: number; ignore_status?: number[] }): Promise<any> {
|
||||||
|
return firstValueFrom(this.getEnvelopeReceiver(options));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user