WIP timeframes
Max
4 years ago
parent
010025325e
commit
2fc902403e
@ -0,0 +1,8 @@
|
||||
.number-range-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.range-spacer {
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
query GetTimeFrames {
|
||||
timeFrames {
|
||||
...TimeFrameFields
|
||||
}
|
||||
}
|
||||
|
||||
mutation CreateTimeFrame($timeFrame: TimeFrameCreateInput!) {
|
||||
createTimeFrame(timeFrame: $timeFrame) {
|
||||
...TimeFrameFields
|
||||
}
|
||||
}
|
||||
|
||||
mutation UpdateTimeFrame($timeFrame: TimeFrameUpdateInput!) {
|
||||
updateTimeFrame(timeFrame: $timeFrame) {
|
||||
...TimeFrameFields
|
||||
}
|
||||
}
|
||||
|
||||
mutation LockTimeFrame($id: ID!) {
|
||||
lockTimeFrame(id: $id) {
|
||||
...TimeFrameFields
|
||||
}
|
||||
}
|
||||
|
||||
mutation UnlockTimeFrame($id: ID!) {
|
||||
unlockTimeFrame(id: $id) {
|
||||
...TimeFrameFields
|
||||
}
|
||||
}
|
||||
|
||||
mutation DeleteTimeFrame($id: ID!) {
|
||||
deleteTimeFrame(id: $id)
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
<app-table
|
||||
[headline]="headline"
|
||||
[columnInfo]="columnInfo"
|
||||
[dataService]="dataService"
|
||||
[tableDataGQLType]="tableDataGQLType"
|
||||
[tableDataGQLCreateInputType]="tableDataGQLCreateInputType"
|
||||
[tableDataGQLUpdateInputType]="tableDataGQLUpdateInputType"
|
||||
(createEvent)="create($event)"
|
||||
(lockEvent)="lock($event)"
|
||||
(saveEvent)="save($event)"
|
||||
(cancelEvent)="cancel($event)"
|
||||
(deleteEvent)="delete($event)"
|
||||
></app-table>
|
||||
@ -0,0 +1,61 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { TimeFrameService } from 'src/app/services/timeFrame.service';
|
||||
@Component({
|
||||
selector: 'app-time-frames',
|
||||
templateUrl: './time-frames.component.html',
|
||||
styleUrls: ['./time-frames.component.scss'],
|
||||
})
|
||||
export class TimeFramesComponent implements OnInit {
|
||||
headline = 'Zeitscheiben';
|
||||
|
||||
columnInfo = [
|
||||
{ dataPath: 'dataRange', translation: 'Zeitraum', type: 'DateRange', readonly: false },
|
||||
{
|
||||
dataPath: 'cargoBike.name',
|
||||
translation: 'Lastenrad',
|
||||
link: (element) => {
|
||||
return '/bike/' + element['cargoBike.id'];
|
||||
},
|
||||
},
|
||||
{
|
||||
dataPath: 'lendingStation.name',
|
||||
translation: 'Ausleihstation',
|
||||
link: (element) => {
|
||||
return '/lendingStation/' + element['lendingStation.id'];
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
dataService: TimeFrameService;
|
||||
|
||||
tableDataGQLType: string = 'TimeFrame';
|
||||
tableDataGQLCreateInputType: string = 'TimeFrameCreateInput';
|
||||
tableDataGQLUpdateInputType: string = 'TimeFrameUpdateInput';
|
||||
|
||||
loadingRowIds: string[] = [];
|
||||
constructor(private service: TimeFrameService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.dataService = this.service;
|
||||
}
|
||||
|
||||
create(value: { currentId: string; row: any }) {
|
||||
this.dataService.create(value.currentId, { timeFrame: value.row });
|
||||
}
|
||||
|
||||
lock(row: any) {
|
||||
this.dataService.lock({ id: row.id });
|
||||
}
|
||||
|
||||
save(row: any) {
|
||||
this.dataService.update({ timeFrame: row });
|
||||
}
|
||||
|
||||
cancel(row: any) {
|
||||
this.dataService.unlock({ id: row.id });
|
||||
}
|
||||
|
||||
delete(row: any) {
|
||||
this.dataService.delete({ id: row.id });
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,125 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { BehaviorSubject, Subject } from 'rxjs';
|
||||
import {
|
||||
GetTimeFramesGQL,
|
||||
CreateTimeFrameGQL,
|
||||
CreateTimeFrameMutationVariables,
|
||||
UpdateTimeFrameGQL,
|
||||
UpdateTimeFrameMutationVariables,
|
||||
LockTimeFrameGQL,
|
||||
LockTimeFrameMutationVariables,
|
||||
UnlockTimeFrameGQL,
|
||||
UnlockTimeFrameMutationVariables,
|
||||
DeleteTimeFrameGQL,
|
||||
DeleteTimeFrameMutationVariables,
|
||||
} from '../../generated/graphql';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class TimeFrameService {
|
||||
/** TimeFrames Array */
|
||||
tableData: BehaviorSubject<any[]> = new BehaviorSubject(null);
|
||||
loadingRowIds: BehaviorSubject<string[]> = new BehaviorSubject([]);
|
||||
successfullyCreatedRowWithId: Subject<string> = new Subject();
|
||||
//pageData: BehaviorSubject<any> = new BehaviorSubject([]);
|
||||
//isLoadingPageData: BehaviorSubject<boolean> = new BehaviorSubject(false);
|
||||
|
||||
constructor(
|
||||
private getTimeFramesGQL: GetTimeFramesGQL,
|
||||
private createTimeFrameGQL: CreateTimeFrameGQL,
|
||||
private updateTimeFrameGQL: UpdateTimeFrameGQL,
|
||||
private lockTimeFrameGQL: LockTimeFrameGQL,
|
||||
private unlockTimeFrameGQL: UnlockTimeFrameGQL,
|
||||
private deleteTimeFrameGQL: DeleteTimeFrameGQL
|
||||
) {}
|
||||
|
||||
addLoadingRowId(id: string) {
|
||||
this.loadingRowIds.next([...this.loadingRowIds.value, id]);
|
||||
}
|
||||
|
||||
removeLoadingRowId(id: string) {
|
||||
this.loadingRowIds.value.forEach((item, index) => {
|
||||
if (item === id) {
|
||||
this.loadingRowIds.value.splice(index, 1);
|
||||
}
|
||||
});
|
||||
this.loadingRowIds.next(this.loadingRowIds.value);
|
||||
}
|
||||
|
||||
loadTableData() {
|
||||
this.tableData.next(null);
|
||||
this.getTimeFramesGQL.fetch().subscribe((result) => {
|
||||
this.tableData.next(result.data.timeFrames);
|
||||
});
|
||||
}
|
||||
|
||||
create(currentId: string, variables: CreateTimeFrameMutationVariables) {
|
||||
this.createTimeFrameGQL.mutate(variables).subscribe((result) => {
|
||||
const newRow = result.data.createTimeFrame;
|
||||
this.tableData.next([newRow, ...this.tableData.value]);
|
||||
this.successfullyCreatedRowWithId.next(currentId);
|
||||
});
|
||||
}
|
||||
|
||||
update(variables: UpdateTimeFrameMutationVariables) {
|
||||
this.addLoadingRowId(variables.timeFrame.id);
|
||||
this.updateTimeFrameGQL
|
||||
.mutate(variables)
|
||||
.subscribe((result) => {
|
||||
this.updateDataRowFromResponse(result.data.updateTimeFrame);
|
||||
})
|
||||
.add(() => {
|
||||
this.removeLoadingRowId(variables.timeFrame.id);
|
||||
});
|
||||
}
|
||||
|
||||
lock(variables: LockTimeFrameMutationVariables) {
|
||||
this.addLoadingRowId(variables.id);
|
||||
this.lockTimeFrameGQL
|
||||
.mutate(variables)
|
||||
.subscribe((result) => {
|
||||
this.updateDataRowFromResponse(result.data.lockTimeFrame);
|
||||
})
|
||||
.add(() => {
|
||||
this.removeLoadingRowId(variables.id);
|
||||
});
|
||||
}
|
||||
|
||||
unlock(variables: UnlockTimeFrameMutationVariables) {
|
||||
this.addLoadingRowId(variables.id);
|
||||
this.unlockTimeFrameGQL
|
||||
.mutate(variables)
|
||||
.subscribe((result) => {
|
||||
this.updateDataRowFromResponse(result.data.unlockTimeFrame);
|
||||
})
|
||||
.add(() => {
|
||||
this.removeLoadingRowId(variables.id);
|
||||
});
|
||||
}
|
||||
|
||||
delete(variables: DeleteTimeFrameMutationVariables) {
|
||||
this.addLoadingRowId(variables.id);
|
||||
this.deleteTimeFrameGQL
|
||||
.mutate(variables)
|
||||
.subscribe((result) => {
|
||||
if (result.data) {
|
||||
this.tableData.next(
|
||||
[...this.tableData.value].filter((bike) => bike.id !== variables.id)
|
||||
);
|
||||
}
|
||||
})
|
||||
.add(() => {
|
||||
this.removeLoadingRowId(variables.id);
|
||||
});
|
||||
}
|
||||
|
||||
private updateDataRowFromResponse(rowFromResponse: any) {
|
||||
if (this.tableData.value) {
|
||||
const newTableData = this.tableData.value.map((row) =>
|
||||
rowFromResponse.id === row.id ? rowFromResponse : row
|
||||
);
|
||||
this.tableData.next(newTableData);
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue