Add LendingStation table and page

src/app/app-routing.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { BikeComponent } from './pages/dataPages/bike/bike.component';
+import { LendingStationComponent } from './pages/dataPages/lending-station/lending-station.component';
 import { LoginComponent} from './pages/login/login.component'
 import { TableOverviewComponent } from './pages/table-overview/table-overview.component';
 import { BikesComponent} from './pages/tables/bikes/bikes.component'
@@ -16,6 +17,7 @@ const routes: Routes = [
   { path: 'tableOverview', component: TableOverviewComponent },
   { path: 'table/bikes', component: BikesComponent },
   { path: 'bike/:id', component: BikeComponent },
+  { path: 'lendingStation/:id', component: LendingStationComponent },
   { path: 'table/participants', component: ParticipantsComponent },
   { path: 'table/lendingStations', component: LendingStationsComponent },
   { path: 'table/equipmentTypes', component: EquipmentTypesComponent },

src/app/app.component.html

@@ -39,14 +39,6 @@
         <app-menu-list-item *ngFor="let item of navItems" [item]="item"></app-menu-list-item>
       </mat-nav-list>
     </mat-sidenav>
-    <!--<mat-sidenav #sidenav>
-      <mat-nav-list (click)="sidenav.toggle()">
-        <a mat-list-item [routerLink]="'/tableOverview'"> Tabellenübersicht </a>
-        <a mat-list-item [routerLink]="'/table/bikes'"> Lastenräder </a>
-        <a mat-list-item [routerLink]="'/table/participants'"> Beteiligte </a>
-        <a mat-list-item [routerLink]="'/table/lendingStations'"> Ausleihstationen </a>
-      </mat-nav-list>
-    </mat-sidenav>-->
     <mat-sidenav-content>
         <router-outlet></router-outlet>
     </mat-sidenav-content>

src/app/app.component.ts

@@ -38,7 +38,7 @@ export class AppComponent {
           route: 'table/participants'
         },
         {
-          displayName: 'Ausleihstationen',
+          displayName: 'Standorte',
           iconName: 'group',
           route: 'table/lendingStations'
         }]

src/app/app.module.ts

@@ -64,6 +64,7 @@ import { NumberRangeCellComponent } from './components/tableComponents/number-ra
 import { DateRangeCellComponent } from './components/tableComponents/date-range-cell/date-range-cell.component';
 import { SelectObjectDialogComponent } from './components/tableComponents/select-object-dialog/select-object-dialog.component';
 import { AutocompleteSelectComponent } from './components/autocomplete-select/autocomplete-select.component';
+import { LendingStationComponent } from './pages/dataPages/lending-station/lending-station.component';
 
 
 
@@ -92,6 +93,7 @@ import { AutocompleteSelectComponent } from './components/autocomplete-select/au
     DateRangeCellComponent,
     SelectObjectDialogComponent,
     AutocompleteSelectComponent,
+    LendingStationComponent,
   ],
   imports: [
     BrowserModule,

src/app/components/table/table.component.ts

@@ -212,7 +212,6 @@ export class TableComponent implements AfterViewInit {
           ? column.acceptedForCreation
           : typeInformation.isPartOfType;
     }
-    console.log(this.columnInfo);
   }
 
   getTranslation(dataPath: string) {
@@ -333,8 +332,6 @@ export class TableComponent implements AfterViewInit {
   }
 
   openSelectObjectDialog(row: any, column: any) {
-    console.log(row);
-    console.log(column);
     const dialogRef = this.dialog.open(SelectObjectDialogComponent, {
       width: 'auto',
       autoFocus: false,

src/app/graphqlOperations/fragments/contactInformation.graphql

@@ -1,16 +1,11 @@
-fragment ContactInformationFields on ContactInformation {
+fragment ContactInformationFieldsGeneral on ContactInformation {
     id
     person {
-      ...PersonFields
+      ...PersonFieldsGeneral
     }
     phone
     phone2
     email
     email2
     note
-
-    isLocked
-  isLockedByMe
-  lockedBy
-  lockedUntil
 }

src/app/graphqlOperations/fragments/lendingStation.graphql

@@ -5,6 +5,43 @@ fragment LendingStationFieldsForBikePage on LendingStation {
     ...AddressFields
   }
   organisation {
-    ...OrganisationFieldsForTimeFrame
+    ...OrganisationFieldsGeneral
   }
 }
+
+fragment LendingStationFieldsForTable on LendingStation {
+  id
+  name
+  contactInformationIntern {
+    ...ContactInformationFieldsGeneral
+  }
+  contactInformationExtern {
+    ...ContactInformationFieldsGeneral
+  }
+  address {
+    ...AddressFields
+  }
+  organisation {
+    ...OrganisationFieldsGeneral
+  }
+  isLocked
+  isLockedByMe
+  lockedBy
+  lockedUntil
+}
+
+fragment LendingStationFieldsForPage on LendingStation {
+  ...LendingStationFieldsForTable
+  cargoBikes {
+    id
+    name
+  }
+  timeFrames {
+    ...TimeFrameFieldsForLendingStation
+  }
+  # loanPeriod {
+  #  generalRemark
+  #  notes
+  #  loanTimes
+  #}
+}

src/app/graphqlOperations/fragments/organisation.graphql

@@ -1,4 +1,4 @@
-fragment OrganisationFieldsForTimeFrame on Organisation {
+fragment OrganisationFieldsGeneral on Organisation {
   id
   name
   address {

src/app/graphqlOperations/fragments/participant.graphql

@@ -5,7 +5,7 @@ fragment ParticipantFieldsForBikePage on Participant {
     usernamefLotte
     usernameSlack
     contactInformation {
-        ...ContactInformationFields
+        ...ContactInformationFieldsGeneral
     }
 
     isLocked

src/app/graphqlOperations/fragments/person.graphql

@@ -1,9 +1,5 @@
-fragment PersonFields on Person {
+fragment PersonFieldsGeneral on Person {
   id
   name
   firstName
-  isLocked
-  isLockedByMe
-  lockedBy
-  lockedUntil
 }

src/app/graphqlOperations/fragments/timeFrames.graphql

@@ -8,10 +8,19 @@ fragment TimeFrameFieldsForBikePage on TimeFrame {
   lendingStation {
     ...LendingStationFieldsForBikePage
   }
-  isLocked
+}
-  isLockedByMe
+
-  lockedBy
+fragment TimeFrameFieldsForLendingStation on TimeFrame {
-  lockedUntil
+  id
+  dateRange {
+    from
+    to
+  }
+  note
+  cargoBike {
+    id
+    name
+  }
 }
 
 fragment TimeFrameFields on TimeFrame {
@@ -34,3 +43,5 @@ fragment TimeFrameFields on TimeFrame {
   lockedBy
   lockedUntil
 }
+
+

src/app/graphqlOperations/lendingStation.graphql

@@ -0,0 +1,45 @@
+query GetLendingStations {
+  lendingStations {
+    ...LendingStationFieldsForTable   
+  }
+}
+
+query GetLendingStationById($id: ID!) {
+  lendingStationById(id: $id) {
+    ...LendingStationFieldsForPage
+  }
+}
+
+query ReloadLendingStationById($id: ID!) {
+  lendingStationById(id: $id) {
+    ...LendingStationFieldsForTable
+  }
+}
+
+mutation CreateLendingStation($lendingStation: LendingStationCreateInput!) {
+  createLendingStation(lendingStation: $lendingStation) {
+    ...LendingStationFieldsForTable
+  }
+}
+
+mutation UpdateLendingStation($lendingStation: LendingStationUpdateInput!) {
+  updateLendingStation(lendingStation: $lendingStation) {
+    ...LendingStationFieldsForPage
+  }
+}
+
+mutation LockLendingStation($id: ID!) {
+  lockLendingStation(id: $id) {
+    ...LendingStationFieldsForPage
+  }
+}
+
+mutation UnlockLendingStation($id: ID!) {
+  unlockLendingStation(id: $id) {
+    ...LendingStationFieldsForPage
+  }
+}
+
+mutation DeleteLendingStation($id: ID!) {
+  deleteLendingStation(id: $id)
+}

src/app/pages/dataPages/bike/bike.component.ts

@@ -15,7 +15,6 @@ export class BikeComponent implements OnInit {
       title: 'Allgemein',
       properties: [
         { dataPath: 'name', translation: 'Name' },
-        { dataPath: 'id', translation: 'ID', readonly: true },
         { dataPath: 'Group', translation: 'Gruppe' },
         { dataPath: 'modelName', translation: 'Modell' },
       ],

src/app/pages/dataPages/lending-station/lending-station.component.html

@@ -0,0 +1,10 @@
+<app-data-page
+  [dataService]="dataService"
+  [propertiesInfo]="propertiesInfo"
+  [headlineDataPath]="headlineDataPath"
+  [pageDataGQLType]="pageDataGQLType"
+  [pageDataGQLUpdateInputType]="pageDataGQLUpdateInputType"
+  (lockEvent)="lock($event)"
+  (saveEvent)="save($event)"
+  (cancelEvent)="cancel($event)"
+></app-data-page>

src/app/pages/dataPages/lending-station/lending-station.component.ts

@@ -0,0 +1,147 @@
+import { Component, OnInit } from '@angular/core';
+import { LendingStationsService } from 'src/app/services/lending-stations.service';
+
+@Component({
+  selector: 'app-lending-station',
+  templateUrl: './lending-station.component.html',
+  styleUrls: ['./lending-station.component.scss'],
+})
+export class LendingStationComponent implements OnInit {
+  propertiesInfo = [
+    {
+      type: 'Group',
+      title: 'Allgemein',
+      properties: [
+        { dataPath: 'name', translation: 'Name' },
+        { dataPath: 'organisation.name', translation: 'Organisation' },
+      ],
+    },
+    {
+      type: 'Group',
+      title: 'Adresse',
+      properties: [
+        { dataPath: 'address.number', translation: 'Hausnummer' },
+        { dataPath: 'address.street', translation: 'Straße' },
+        { dataPath: 'address.zip', translation: 'Postleitzahl' },
+      ],
+    },
+    {
+      type: 'Group',
+      title: 'Öffnungszeiten',
+      properties: [
+        
+      ],
+    },
+    {
+      type: 'Group',
+      title: 'Kontaktinformationen intern',
+      properties: [
+        {
+          dataPath: 'contactInformationIntern.person.firstName',
+          translation: 'Vorname Ansprechpartner intern',
+        },
+        {
+          dataPath: 'contactInformationIntern.person.name',
+          translation: 'Nachname Ansprechpartner intern',
+        },
+        {
+          dataPath: 'contactInformationIntern.phone',
+          translation: 'Telefonnummer',
+        },
+        {
+          dataPath: 'contactInformationIntern.phone2',
+          translation: 'Telefonnummer 2',
+        },
+        { dataPath: 'contactInformationIntern.email', translation: 'Email' },
+        { dataPath: 'contactInformationIntern.email2', translation: 'Email 2' },
+      ],
+    },
+    {
+      type: 'Group',
+      title: 'Kontaktinformationen extern',
+      properties: [
+        {
+          dataPath: 'contactInformationExtern.person.firstName',
+          translation: 'Vorname Ansprechpartner extern',
+        },
+        {
+          dataPath: 'contactInformationExtern.person.name',
+          translation: 'Nachname Ansprechpartner extern',
+        },
+        {
+          dataPath: 'contactInformationExtern.phone',
+          translation: 'Telefonnummer',
+        },
+        {
+          dataPath: 'contactInformationExtern.phone2',
+          translation: 'Telefonnummer 2',
+        },
+        { dataPath: 'contactInformationExtern.email', translation: 'Email' },
+        { dataPath: 'contactInformationExtern.email2', translation: 'Email 2' },
+      ],
+    },
+    /*
+    {
+      type: 'ReferenceTable',
+      title: 'Equipment',
+      dataPath: 'equipment',
+      dataService: null,
+      columnInfo: [
+        { dataPath: 'serialNo', translation: 'Seriennummer' },
+        { dataPath: 'title', translation: 'Name' },
+        { dataPath: 'description', translation: 'Beschreibung' },
+      ],
+      nameToShowInSelection: (element) => {
+        return element.title + ' (' + element.serialNo + ')';
+      },
+      linkToTable: (element) => '/table/equipment',
+      linkToTableParams: (lendingStation) => {
+        return { filter: lendingStation.name };
+      },
+      propertyNameOfUpdateInput: 'equipmentIds',
+    },
+    {
+      type: 'ReferenceTable',
+      title: 'Zeitscheiben',
+      dataPath: 'timeFrames',
+      dataService: null,
+      columnInfo: [
+        { dataPath: 'dateRange', translation: 'Zeitraum' },
+        { dataPath: 'lendingStation.name', translation: 'Standort' },
+      ],
+      editableReferences: false,
+      linkToTable: (element) => '/table/timeFrames',
+      linkToTableParams: (lendingStation) => {
+        return { filter: lendingStation.name };
+      },
+    },*/
+  ];
+
+  headlineDataPath = 'name';
+  pageDataGQLType: string = 'LendingStation';
+  pageDataGQLUpdateInputType: string = 'LendingStationUpdateInput';
+
+  dataService: any;
+
+  constructor(private lendingStationsService: LendingStationsService) {
+    /*this.propertiesInfo.find(
+      (prop) => prop.dataPath === 'equipmentType'
+    ).dataService = this.equipmentTypeService;*/
+  }
+
+  ngOnInit(): void {
+    this.dataService = this.lendingStationsService;
+  }
+
+  lock(row: any) {
+    this.lendingStationsService.lockLendingStation({ id: row.id });
+  }
+
+  save(row: any) {
+    this.lendingStationsService.updateLendingStation({ lendingStation: row });
+  }
+
+  cancel(row: any) {
+    this.lendingStationsService.unlockLendingStation({ id: row.id });
+  }
+}

src/app/pages/tables/bikes/bikes.component.ts

@@ -16,7 +16,6 @@ export class BikesComponent implements OnInit {
         return '/bike/' + row.id;
       },
     },
-    { dataPath: 'id', translation: 'ID', readonly: true },
     { dataPath: 'group', translation: 'Gruppe' },
     { dataPath: 'modelName', translation: 'Modell' },
     {

src/app/pages/tables/lending-stations/lending-stations.component.html

@@ -1 +1,13 @@
-<p>lending-stations works!</p>
+<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>

src/app/pages/tables/lending-stations/lending-stations.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { LendingStationsComponent } from './lending-stations.component';
-
-describe('LendingStationsComponent', () => {
-  let component: LendingStationsComponent;
-  let fixture: ComponentFixture<LendingStationsComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ LendingStationsComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(LendingStationsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/pages/tables/lending-stations/lending-stations.component.ts

@@ -1,15 +1,100 @@
 import { Component, OnInit } from '@angular/core';
+import { LendingStationsService } from 'src/app/services/lending-stations.service';
 
 @Component({
   selector: 'app-lending-stations',
   templateUrl: './lending-stations.component.html',
-  styleUrls: ['./lending-stations.component.scss']
+  styleUrls: ['./lending-stations.component.scss'],
 })
 export class LendingStationsComponent implements OnInit {
+  columnInfo = [
+    {
+      dataPath: 'name',
+      translation: 'Name',
+      sticky: true,
+      link: (row: any) => {
+        return '/lendingStation/' + row.id;
+      },
+    },
+    { dataPath: 'address.number', translation: 'Hausnummer' },
+    { dataPath: 'address.street', translation: 'Straße' },
+    { dataPath: 'address.zip', translation: 'Postleitzahl' },
 
-  constructor() { }
+    { dataPath: 'organisation.name', translation: 'Organisation' },
 
-  ngOnInit(): void {
+    {
+      dataPath: 'contactInformationIntern.person.firstName',
+      translation: 'Vorname Ansprechpartner intern',
+    },
+    {
+      dataPath: 'contactInformationIntern.person.name',
+      translation: 'Nachname Ansprechpartner intern',
+    },
+    {
+      dataPath: 'contactInformationIntern.phone',
+      translation: 'Telefonnummer',
+    },
+    {
+      dataPath: 'contactInformationIntern.phone2',
+      translation: 'Telefonnummer 2',
+    },
+    { dataPath: 'contactInformationIntern.email', translation: 'Email' },
+    { dataPath: 'contactInformationIntern.email2', translation: 'Email 2' },
+
+    {
+      dataPath: 'contactInformationExtern.person.firstName',
+      translation: 'Vorname Ansprechpartner extern',
+    },
+    {
+      dataPath: 'contactInformationExtern.person.name',
+      translation: 'Nachname Ansprechpartner extern',
+    },
+    {
+      dataPath: 'contactInformationExtern.phone',
+      translation: 'Telefonnummer',
+    },
+    {
+      dataPath: 'contactInformationExtern.phone2',
+      translation: 'Telefonnummer 2',
+    },
+    { dataPath: 'contactInformationExtern.email', translation: 'Email' },
+    { dataPath: 'contactInformationExtern.email2', translation: 'Email 2' },
+  ];
+
+  dataService: any;
+
+  tableDataGQLType: string = 'LendingStation';
+  tableDataGQLCreateInputType: string = 'LendingStationCreateInput';
+  tableDataGQLUpdateInputType: string = 'LendingStationUpdateInput';
+
+  headline = 'Standorte';
+
+  loadingRowIds: string[] = [];
+  constructor(private lendingStationsService: LendingStationsService) {}
+
+  ngOnInit() {
+    this.dataService = this.lendingStationsService;
+  }
+
+  create(object: { currentId: string; row: any }) {
+    this.lendingStationsService.createLendingStation(object.currentId, {
+      lendingStation: object.row,
+    });
   }
 
+  lock(row: any) {
+    this.lendingStationsService.lockLendingStation({ id: row.id });
+  }
+
+  save(row: any) {
+    this.lendingStationsService.updateLendingStation({ lendingStation: row });
+  }
+
+  cancel(row: any) {
+    this.lendingStationsService.unlockLendingStation({ id: row.id });
+  }
+
+  delete(row: any) {
+    this.lendingStationsService.deleteLendingStation({ id: row.id });
+  }
 }

src/app/services/lending-stations.service.ts

@@ -1,9 +1,160 @@
 import { Injectable } from '@angular/core';
+import { BehaviorSubject, Subject } from 'rxjs';
+import {
+  GetLendingStationsGQL,
+  ReloadLendingStationByIdGQL,
+  ReloadLendingStationByIdQueryVariables,
+  UpdateLendingStationGQL,
+  UpdateLendingStationMutationVariables,
+  LockLendingStationGQL,
+  LockLendingStationMutationVariables,
+  UnlockLendingStationGQL,
+  UnlockLendingStationMutationVariables,
+  CreateLendingStationGQL,
+  CreateLendingStationMutationVariables,
+  DeleteLendingStationGQL,
+  DeleteLendingStationMutationVariables,
+  GetLendingStationByIdGQL,
+  GetLendingStationByIdQueryVariables,
+} from '../../generated/graphql';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class LendingStationsService {
+  /** LendingStations Array */
+  tableData: BehaviorSubject<any[]> = new BehaviorSubject(null);
+  loadingRowIds: BehaviorSubject<string[]> = new BehaviorSubject([]);
+  successfullyCreatedRowWithId: Subject<string> = new Subject();
+  pageData: BehaviorSubject<any> = new BehaviorSubject(null);
+  isLoadingPageData: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
-  constructor() { }
+  constructor(
+    private getLendingStationsGQL: GetLendingStationsGQL,
+    private getLendingStationByIdGQL: GetLendingStationByIdGQL,
+    private reloadLendingStationByIdGQL: ReloadLendingStationByIdGQL,
+    private updateLendingStationGQL: UpdateLendingStationGQL,
+    private lockLendingStationGQL: LockLendingStationGQL,
+    private unlockLendingStationGQL: UnlockLendingStationGQL,
+    private createLendingStationGQL: CreateLendingStationGQL,
+    private deleteLendingStationGQL: DeleteLendingStationGQL
+  ) {}
+
+  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.getLendingStationsGQL.fetch().subscribe((result) => {
+      this.tableData.next(result.data?.lendingStations);
+    });
+  }
+
+  loadPageData(variables: GetLendingStationByIdQueryVariables) {
+    this.pageData.next(null);
+    this.isLoadingPageData.next(true);
+    this.getLendingStationByIdGQL
+      .fetch(variables)
+      .subscribe((result) => {
+        this.pageData.next(result.data.lendingStationById);
+      })
+      .add(() => {
+        this.isLoadingPageData.next(false);
+      });
+  }
+
+  reloadLendingStation(variables: ReloadLendingStationByIdQueryVariables) {
+    this.addLoadingRowId(variables.id);
+    this.reloadLendingStationByIdGQL
+      .fetch(variables)
+      .subscribe((result) => {
+        this.updateDataRowFromResponse(result.data.lendingStationById);
+      })
+      .add(() => {
+        this.removeLoadingRowId(variables.id);
+      });
+  }
+
+  createLendingStation(currentId: string, variables: CreateLendingStationMutationVariables) {
+    this.createLendingStationGQL.mutate(variables).subscribe((result) => {
+      const newLendingStation = result.data.createLendingStation;
+      this.tableData.next([newLendingStation, ...this.tableData.value]);
+      this.successfullyCreatedRowWithId.next(currentId);
+    });
+  }
+
+  updateLendingStation(variables: UpdateLendingStationMutationVariables) {
+    this.addLoadingRowId(variables.lendingStation.id);
+    this.updateLendingStationGQL
+      .mutate(variables)
+      .subscribe((result) => {
+        this.updateDataRowFromResponse(result.data.updateLendingStation);
+      })
+      .add(() => {
+        this.removeLoadingRowId(variables.lendingStation.id);
+      });
   }
+
+  lockLendingStation(variables: LockLendingStationMutationVariables) {
+    this.addLoadingRowId(variables.id);
+    this.lockLendingStationGQL
+      .mutate(variables)
+      .subscribe((result) => {
+        this.updateDataRowFromResponse(result.data.lockLendingStation);
+      })
+      .add(() => {
+        this.removeLoadingRowId(variables.id);
+      });
+  }
+
+  unlockLendingStation(variables: UnlockLendingStationMutationVariables) {
+    this.addLoadingRowId(variables.id);
+    this.unlockLendingStationGQL
+      .mutate(variables)
+      .subscribe((result) => {
+        this.updateDataRowFromResponse(result.data.unlockLendingStation);
+      })
+      .add(() => {
+        this.removeLoadingRowId(variables.id);
+      });
+  }
+
+  deleteLendingStation(variables: DeleteLendingStationMutationVariables) {
+    this.addLoadingRowId(variables.id);
+    this.deleteLendingStationGQL
+      .mutate(variables)
+      .subscribe((result) => {
+        if (result.data) {
+          this.tableData.next(
+            [...this.tableData.value].filter((lendingStation) => lendingStation.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);
+    }
+    if (rowFromResponse.id === this.pageData?.value?.id) {
+      this.pageData.next(rowFromResponse);
+    }
+  }
+}
+

src/generated/graphql.ts

@@ -1997,9 +1997,9 @@ export type BikeEventFieldsForBikePageFragment = { __typename?: 'BikeEvent', id:
 
 export type BikeEventTypeFieldsFragment = { __typename?: 'BikeEventType', id: string, name: string, isLocked: boolean, isLockedByMe: boolean, lockedUntil?: Maybe<any> };
 
-export type ContactInformationFieldsFragment = { __typename?: 'ContactInformation', id: string, phone?: Maybe<string>, phone2?: Maybe<string>, email?: Maybe<string>, email2?: Maybe<string>, note?: Maybe<string>, isLocked: boolean, isLockedByMe: boolean, lockedBy?: Maybe<string>, lockedUntil?: Maybe<any>, person: (
+export type ContactInformationFieldsGeneralFragment = { __typename?: 'ContactInformation', id: string, phone?: Maybe<string>, phone2?: Maybe<string>, email?: Maybe<string>, email2?: Maybe<string>, note?: Maybe<string>, person: (
     { __typename?: 'Person' }
-    & PersonFieldsFragment
+    & PersonFieldsGeneralFragment
   ) };
 
 export type EngagementFieldsForBikePageFragment = { __typename?: 'Engagement', id: string, isLocked: boolean, isLockedByMe: boolean, lockedBy?: Maybe<string>, lockedUntil?: Maybe<any>, engagementType: (
@@ -2023,30 +2023,129 @@ export type LendingStationFieldsForBikePageFragment = { __typename?: 'LendingSta
     & AddressFieldsFragment
   ), organisation?: Maybe<(
     { __typename?: 'Organisation' }
-    & OrganisationFieldsForTimeFrameFragment
+    & OrganisationFieldsGeneralFragment
   )> };
 
-export type OrganisationFieldsForTimeFrameFragment = { __typename?: 'Organisation', id: string, name: string, address?: Maybe<(
+export type LendingStationFieldsForTableFragment = { __typename?: 'LendingStation', id: string, name: string, isLocked: boolean, isLockedByMe: boolean, lockedBy?: Maybe<string>, lockedUntil?: Maybe<any>, contactInformationIntern?: Maybe<(
+    { __typename?: 'ContactInformation' }
+    & ContactInformationFieldsGeneralFragment
+  )>, contactInformationExtern?: Maybe<(
+    { __typename?: 'ContactInformation' }
+    & ContactInformationFieldsGeneralFragment
+  )>, address: (
+    { __typename?: 'Address' }
+    & AddressFieldsFragment
+  ), organisation?: Maybe<(
+    { __typename?: 'Organisation' }
+    & OrganisationFieldsGeneralFragment
+  )> };
+
+export type LendingStationFieldsForPageFragment = (
+  { __typename?: 'LendingStation', cargoBikes?: Maybe<Array<{ __typename?: 'CargoBike', id: string, name: string }>>, timeFrames: Array<(
+    { __typename?: 'TimeFrame' }
+    & TimeFrameFieldsForLendingStationFragment
+  )> }
+  & LendingStationFieldsForTableFragment
+);
+
+export type OrganisationFieldsGeneralFragment = { __typename?: 'Organisation', id: string, name: string, address?: Maybe<(
     { __typename?: 'Address' }
     & AddressFieldsFragment
   )> };
 
 export type ParticipantFieldsForBikePageFragment = { __typename?: 'Participant', id: string, start: any, end?: Maybe<any>, usernamefLotte?: Maybe<string>, usernameSlack?: Maybe<string>, isLocked: boolean, isLockedByMe: boolean, lockedBy?: Maybe<string>, lockedUntil?: Maybe<any>, contactInformation: (
     { __typename?: 'ContactInformation' }
-    & ContactInformationFieldsFragment
+    & ContactInformationFieldsGeneralFragment
   ) };
 
-export type PersonFieldsFragment = { __typename?: 'Person', id: string, name: string, firstName: string, isLocked: boolean, isLockedByMe: boolean, lockedBy?: Maybe<string>, lockedUntil?: Maybe<any> };
+export type PersonFieldsGeneralFragment = { __typename?: 'Person', id: string, name: string, firstName: string };
 
 export type ProviderFieldsGeneralFragment = { __typename?: 'Provider', id: string, formName?: Maybe<string>, privatePerson?: Maybe<{ __typename?: 'ContactInformation', id: string, person: { __typename?: 'Person', id: string, name: string, firstName: string, contactInformation?: Maybe<Array<{ __typename?: 'ContactInformation', email?: Maybe<string> }>> } }> };
 
-export type TimeFrameFieldsForBikePageFragment = { __typename?: 'TimeFrame', id: string, note?: Maybe<string>, isLocked: boolean, isLockedByMe: boolean, lockedBy?: Maybe<string>, lockedUntil?: Maybe<any>, dateRange: { __typename?: 'DateRange', from: any, to?: Maybe<any> }, lendingStation: (
+export type TimeFrameFieldsForBikePageFragment = { __typename?: 'TimeFrame', id: string, note?: Maybe<string>, dateRange: { __typename?: 'DateRange', from: any, to?: Maybe<any> }, lendingStation: (
     { __typename?: 'LendingStation' }
     & LendingStationFieldsForBikePageFragment
   ) };
 
+export type TimeFrameFieldsForLendingStationFragment = { __typename?: 'TimeFrame', id: string, note?: Maybe<string>, dateRange: { __typename?: 'DateRange', from: any, to?: Maybe<any> }, cargoBike: { __typename?: 'CargoBike', id: string, name: string } };
+
 export type TimeFrameFieldsFragment = { __typename?: 'TimeFrame', id: string, note?: Maybe<string>, isLocked: boolean, isLockedByMe: boolean, lockedBy?: Maybe<string>, lockedUntil?: Maybe<any>, dateRange: { __typename?: 'DateRange', from: any, to?: Maybe<any> }, lendingStation: { __typename?: 'LendingStation', id: string, name: string }, cargoBike: { __typename?: 'CargoBike', id: string, name: string } };
 
+export type GetLendingStationsQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type GetLendingStationsQuery = { __typename?: 'Query', lendingStations: Array<(
+    { __typename?: 'LendingStation' }
+    & LendingStationFieldsForTableFragment
+  )> };
+
+export type GetLendingStationByIdQueryVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type GetLendingStationByIdQuery = { __typename?: 'Query', lendingStationById?: Maybe<(
+    { __typename?: 'LendingStation' }
+    & LendingStationFieldsForPageFragment
+  )> };
+
+export type ReloadLendingStationByIdQueryVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type ReloadLendingStationByIdQuery = { __typename?: 'Query', lendingStationById?: Maybe<(
+    { __typename?: 'LendingStation' }
+    & LendingStationFieldsForTableFragment
+  )> };
+
+export type CreateLendingStationMutationVariables = Exact<{
+  lendingStation: LendingStationCreateInput;
+}>;
+
+
+export type CreateLendingStationMutation = { __typename?: 'Mutation', createLendingStation: (
+    { __typename?: 'LendingStation' }
+    & LendingStationFieldsForTableFragment
+  ) };
+
+export type UpdateLendingStationMutationVariables = Exact<{
+  lendingStation: LendingStationUpdateInput;
+}>;
+
+
+export type UpdateLendingStationMutation = { __typename?: 'Mutation', updateLendingStation: (
+    { __typename?: 'LendingStation' }
+    & LendingStationFieldsForPageFragment
+  ) };
+
+export type LockLendingStationMutationVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type LockLendingStationMutation = { __typename?: 'Mutation', lockLendingStation: (
+    { __typename?: 'LendingStation' }
+    & LendingStationFieldsForPageFragment
+  ) };
+
+export type UnlockLendingStationMutationVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type UnlockLendingStationMutation = { __typename?: 'Mutation', unlockLendingStation: (
+    { __typename?: 'LendingStation' }
+    & LendingStationFieldsForPageFragment
+  ) };
+
+export type DeleteLendingStationMutationVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type DeleteLendingStationMutation = { __typename?: 'Mutation', deleteLendingStation: boolean };
+
 export type GetTimeFramesQueryVariables = Exact<{ [key: string]: never; }>;
 
 
@@ -2126,8 +2225,8 @@ export const AddressFieldsFragmentDoc = gql`
   zip
 }
     `;
-export const OrganisationFieldsForTimeFrameFragmentDoc = gql`
+export const OrganisationFieldsGeneralFragmentDoc = gql`
-    fragment OrganisationFieldsForTimeFrame on Organisation {
+    fragment OrganisationFieldsGeneral on Organisation {
   id
   name
   address {
@@ -2143,11 +2242,11 @@ export const LendingStationFieldsForBikePageFragmentDoc = gql`
     ...AddressFields
   }
   organisation {
-    ...OrganisationFieldsForTimeFrame
+    ...OrganisationFieldsGeneral
   }
 }
     ${AddressFieldsFragmentDoc}
-${OrganisationFieldsForTimeFrameFragmentDoc}`;
+${OrganisationFieldsGeneralFragmentDoc}`;
 export const CargoBikeFieldsForTableFragmentDoc = gql`
     fragment CargoBikeFieldsForTable on CargoBike {
   id
@@ -2271,34 +2370,26 @@ export const BikeEventTypeFieldsFragmentDoc = gql`
   lockedUntil
 }
     `;
-export const PersonFieldsFragmentDoc = gql`
+export const PersonFieldsGeneralFragmentDoc = gql`
-    fragment PersonFields on Person {
+    fragment PersonFieldsGeneral on Person {
   id
   name
   firstName
-  isLocked
-  isLockedByMe
-  lockedBy
-  lockedUntil
 }
     `;
-export const ContactInformationFieldsFragmentDoc = gql`
+export const ContactInformationFieldsGeneralFragmentDoc = gql`
-    fragment ContactInformationFields on ContactInformation {
+    fragment ContactInformationFieldsGeneral on ContactInformation {
   id
   person {
-    ...PersonFields
+    ...PersonFieldsGeneral
   }
   phone
   phone2
   email
   email2
   note
-  isLocked
-  isLockedByMe
-  lockedBy
-  lockedUntil
 }
-    ${PersonFieldsFragmentDoc}`;
+    ${PersonFieldsGeneralFragmentDoc}`;
 export const ParticipantFieldsForBikePageFragmentDoc = gql`
     fragment ParticipantFieldsForBikePage on Participant {
   id
@@ -2307,14 +2398,14 @@ export const ParticipantFieldsForBikePageFragmentDoc = gql`
   usernamefLotte
   usernameSlack
   contactInformation {
-    ...ContactInformationFields
+    ...ContactInformationFieldsGeneral
   }
   isLocked
   isLockedByMe
   lockedBy
   lockedUntil
 }
-    ${ContactInformationFieldsFragmentDoc}`;
+    ${ContactInformationFieldsGeneralFragmentDoc}`;
 export const BikeEventFieldsForBikePageFragmentDoc = gql`
     fragment BikeEventFieldsForBikePage on BikeEvent {
   id
@@ -2393,10 +2484,6 @@ export const TimeFrameFieldsForBikePageFragmentDoc = gql`
   lendingStation {
     ...LendingStationFieldsForBikePage
   }
-  isLocked
-  isLockedByMe
-  lockedBy
-  lockedUntil
 }
     ${LendingStationFieldsForBikePageFragmentDoc}`;
 export const CargoBikeFieldsForPageFragmentDoc = gql`
@@ -2443,6 +2530,57 @@ export const EquipmentFieldsForTableFragmentDoc = gql`
   lockedUntil
 }
     `;
+export const LendingStationFieldsForTableFragmentDoc = gql`
+    fragment LendingStationFieldsForTable on LendingStation {
+  id
+  name
+  contactInformationIntern {
+    ...ContactInformationFieldsGeneral
+  }
+  contactInformationExtern {
+    ...ContactInformationFieldsGeneral
+  }
+  address {
+    ...AddressFields
+  }
+  organisation {
+    ...OrganisationFieldsGeneral
+  }
+  isLocked
+  isLockedByMe
+  lockedBy
+  lockedUntil
+}
+    ${ContactInformationFieldsGeneralFragmentDoc}
+${AddressFieldsFragmentDoc}
+${OrganisationFieldsGeneralFragmentDoc}`;
+export const TimeFrameFieldsForLendingStationFragmentDoc = gql`
+    fragment TimeFrameFieldsForLendingStation on TimeFrame {
+  id
+  dateRange {
+    from
+    to
+  }
+  note
+  cargoBike {
+    id
+    name
+  }
+}
+    `;
+export const LendingStationFieldsForPageFragmentDoc = gql`
+    fragment LendingStationFieldsForPage on LendingStation {
+  ...LendingStationFieldsForTable
+  cargoBikes {
+    id
+    name
+  }
+  timeFrames {
+    ...TimeFrameFieldsForLendingStation
+  }
+}
+    ${LendingStationFieldsForTableFragmentDoc}
+${TimeFrameFieldsForLendingStationFragmentDoc}`;
 export const TimeFrameFieldsFragmentDoc = gql`
     fragment TimeFrameFields on TimeFrame {
   id
@@ -2815,6 +2953,148 @@ export const DeleteEquipmentTypeDocument = gql`
   export class DeleteEquipmentTypeGQL extends Apollo.Mutation<DeleteEquipmentTypeMutation, DeleteEquipmentTypeMutationVariables> {
     document = DeleteEquipmentTypeDocument;
     
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
+export const GetLendingStationsDocument = gql`
+    query GetLendingStations {
+  lendingStations {
+    ...LendingStationFieldsForTable
+  }
+}
+    ${LendingStationFieldsForTableFragmentDoc}`;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class GetLendingStationsGQL extends Apollo.Query<GetLendingStationsQuery, GetLendingStationsQueryVariables> {
+    document = GetLendingStationsDocument;
+    
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
+export const GetLendingStationByIdDocument = gql`
+    query GetLendingStationById($id: ID!) {
+  lendingStationById(id: $id) {
+    ...LendingStationFieldsForPage
+  }
+}
+    ${LendingStationFieldsForPageFragmentDoc}`;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class GetLendingStationByIdGQL extends Apollo.Query<GetLendingStationByIdQuery, GetLendingStationByIdQueryVariables> {
+    document = GetLendingStationByIdDocument;
+    
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
+export const ReloadLendingStationByIdDocument = gql`
+    query ReloadLendingStationById($id: ID!) {
+  lendingStationById(id: $id) {
+    ...LendingStationFieldsForTable
+  }
+}
+    ${LendingStationFieldsForTableFragmentDoc}`;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class ReloadLendingStationByIdGQL extends Apollo.Query<ReloadLendingStationByIdQuery, ReloadLendingStationByIdQueryVariables> {
+    document = ReloadLendingStationByIdDocument;
+    
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
+export const CreateLendingStationDocument = gql`
+    mutation CreateLendingStation($lendingStation: LendingStationCreateInput!) {
+  createLendingStation(lendingStation: $lendingStation) {
+    ...LendingStationFieldsForTable
+  }
+}
+    ${LendingStationFieldsForTableFragmentDoc}`;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class CreateLendingStationGQL extends Apollo.Mutation<CreateLendingStationMutation, CreateLendingStationMutationVariables> {
+    document = CreateLendingStationDocument;
+    
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
+export const UpdateLendingStationDocument = gql`
+    mutation UpdateLendingStation($lendingStation: LendingStationUpdateInput!) {
+  updateLendingStation(lendingStation: $lendingStation) {
+    ...LendingStationFieldsForPage
+  }
+}
+    ${LendingStationFieldsForPageFragmentDoc}`;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class UpdateLendingStationGQL extends Apollo.Mutation<UpdateLendingStationMutation, UpdateLendingStationMutationVariables> {
+    document = UpdateLendingStationDocument;
+    
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
+export const LockLendingStationDocument = gql`
+    mutation LockLendingStation($id: ID!) {
+  lockLendingStation(id: $id) {
+    ...LendingStationFieldsForPage
+  }
+}
+    ${LendingStationFieldsForPageFragmentDoc}`;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class LockLendingStationGQL extends Apollo.Mutation<LockLendingStationMutation, LockLendingStationMutationVariables> {
+    document = LockLendingStationDocument;
+    
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
+export const UnlockLendingStationDocument = gql`
+    mutation UnlockLendingStation($id: ID!) {
+  unlockLendingStation(id: $id) {
+    ...LendingStationFieldsForPage
+  }
+}
+    ${LendingStationFieldsForPageFragmentDoc}`;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class UnlockLendingStationGQL extends Apollo.Mutation<UnlockLendingStationMutation, UnlockLendingStationMutationVariables> {
+    document = UnlockLendingStationDocument;
+    
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
+export const DeleteLendingStationDocument = gql`
+    mutation DeleteLendingStation($id: ID!) {
+  deleteLendingStation(id: $id)
+}
+    `;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class DeleteLendingStationGQL extends Apollo.Mutation<DeleteLendingStationMutation, DeleteLendingStationMutationVariables> {
+    document = DeleteLendingStationDocument;
+    
     constructor(apollo: Apollo.Apollo) {
       super(apollo);
     }