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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,13 +1,36 @@
|
|||||||
fragment TimeFrameFieldsForBikePage on TimeFrame {
|
fragment TimeFrameFieldsForBikePage on TimeFrame {
|
||||||
id
|
id
|
||||||
from
|
dateRange {
|
||||||
|
from
|
||||||
to
|
to
|
||||||
note
|
}
|
||||||
lendingStation {
|
note
|
||||||
...LendingStationFieldsForBikePage
|
lendingStation {
|
||||||
}
|
...LendingStationFieldsForBikePage
|
||||||
isLocked
|
}
|
||||||
|
isLocked
|
||||||
|
isLockedByMe
|
||||||
|
lockedBy
|
||||||
|
lockedUntil
|
||||||
|
}
|
||||||
|
|
||||||
|
fragment TimeFrameFields on TimeFrame {
|
||||||
|
id
|
||||||
|
dateRange {
|
||||||
|
from
|
||||||
|
to
|
||||||
|
}
|
||||||
|
note
|
||||||
|
lendingStation {
|
||||||
|
id
|
||||||
|
name
|
||||||
|
}
|
||||||
|
cargoBike {
|
||||||
|
id
|
||||||
|
name
|
||||||
|
}
|
||||||
|
isLocked
|
||||||
isLockedByMe
|
isLockedByMe
|
||||||
lockedBy
|
lockedBy
|
||||||
lockedUntil
|
lockedUntil
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue