Add bikepage

src/app/app-routing.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { BikeComponent } from './pages/dataPages/bike/bike.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'
@@ -10,6 +11,7 @@ const routes: Routes = [
   { path: 'login', component: LoginComponent },
   { path: 'tableOverview', component: TableOverviewComponent },
   { path: 'table/bikes', component: BikesComponent },
+  { path: 'bike/:id', component: BikeComponent },
   { path: 'table/participants', component: ParticipantsComponent },
   { path: 'table/lendingStations', component: LendingStationsComponent },
   { path: '', redirectTo: 'tableOverview', pathMatch: 'full' },

src/app/app.module.ts

@@ -43,7 +43,8 @@ import { CellComponent } from './components/tableComponents/cell/cell.component'
 import { MenuListItemComponent } from './components/menu-list-item/menu-list-item.component';
 import {SidenavProfileComponent} from './components/sidenav-profile/sidenav-profile.component';
 import { NavService }from './components/menu-list-item/nav.service';
-import { TokenInterceptor } from './helper/token.interceptor'
+import { TokenInterceptor } from './helper/token.interceptor';
+import { BikeComponent } from './pages/dataPages/bike/bike.component'
 
 
 @NgModule({
@@ -57,7 +58,8 @@ import { TokenInterceptor } from './helper/token.interceptor'
     LendingStationsComponent,
     TableOverviewComponent,
     CellComponent,
-    DeleteConfirmationDialog
+    DeleteConfirmationDialog,
+    BikeComponent
   ],
   imports: [
     BrowserModule,

src/app/components/tableComponents/cell/cell.component.html

@@ -42,6 +42,7 @@
     />
   </mat-form-field>
   <ng-template #nonEditableText>
-    {{ value }}
+    <span *ngIf="!link">{{ value }}</span>
+    <a mat-button color="primary" *ngIf="link" [routerLink]="link">{{value}}</a>
   </ng-template>
 </div>

src/app/components/tableComponents/cell/cell.component.ts

@@ -30,6 +30,8 @@ export class CellComponent {
   }
   @Input()
   required: boolean = false;
+  @Input()
+  link: string = null;
   @Output() validityChange = new EventEmitter<boolean>();
   isValid: boolean = true;
 
@@ -39,8 +41,7 @@ export class CellComponent {
 
   @ViewChild('input') input: any;
 
-  constructor(private cdr: ChangeDetectorRef) {
+  constructor(private cdr: ChangeDetectorRef) {}
-  }
 
   ngAfterViewInit() {
     if (this.required) {
@@ -78,7 +79,7 @@ export class CellComponent {
       newValue = newValue.toString().replace('.', '');
     }
     this.value = this.htmlInputType === 'number' ? +newValue : newValue;
-    if (newValue === "") {
+    if (newValue === '') {
       this.value = null;
     }
     this.valueChange.emit(this.value);

src/app/graphqlOperations/bike.graphql

@@ -1,30 +1,42 @@
+query GetCargoBikes {
+  cargoBikes(limit: 1000, offset: 0) {
+    ...CargoBikeFieldsForTable   
+  }
+}
+
 query GetCargoBikeById($id: ID!) {
   cargoBikeById(id: $id) {
-    ...CargoBikeFields
+    ...CargoBikeFieldsForPage
+  }
+}
+
+query ReloadCargoBikeById($id: ID!) {
+  cargoBikeById(id: $id) {
+    ...CargoBikeFieldsForTable
   }
 }
 
 mutation CreateCargoBike($bike: CargoBikeCreateInput!) {
   createCargoBike(cargoBike: $bike) {
-    ...CargoBikeFields
+    ...CargoBikeFieldsForTable
   }
 }
 
 mutation UpdateCargoBike($bike: CargoBikeUpdateInput!) {
   updateCargoBike(cargoBike: $bike) {
-    ...CargoBikeFields
+    ...CargoBikeFieldsForTable
   }
 }
 
 mutation LockCargoBike($id: ID!) {
   lockCargoBike(id: $id) {
-    ...CargoBikeFields
+    ...CargoBikeFieldsForTable
   }
 }
 
 mutation UnlockCargoBike($id: ID!) {
   unlockCargoBike(id: $id) {
-    ...CargoBikeFields
+    ...CargoBikeFieldsForTable
   }
 }
 

src/app/graphqlOperations/bikes.graphql

@@ -1,5 +0,0 @@
-query GetCargoBikes {
-  cargoBikes(limit: 1000, offset: 0) {
-    ...CargoBikeFields   
-  }
-}

src/app/graphqlOperations/fragments/address.graphql

@@ -0,0 +1,5 @@
+fragment AddressFields on Address {
+    street
+    number
+    zip
+}

src/app/graphqlOperations/fragments/bike.graphql

@@ -1,4 +1,4 @@
-fragment CargoBikeFieldsMutable on CargoBike {
+fragment CargoBikeFieldsForTable on CargoBike {
   id
   group
   name
@@ -61,18 +61,36 @@ fragment CargoBikeFieldsMutable on CargoBike {
     costCenter
     organisationArea
   }
-}
-
-fragment CargoBikeFields on CargoBike {
-  ...CargoBikeFieldsMutable
   provider {
     ...ProviderFieldsGeneral
   }
   lendingStation {
-    ...LendingStationFieldsGeneral
+    ...LendingStationFieldsForBikePage
   }
   isLocked
   isLockedByMe
   lockedBy
   lockedUntil
 }
+
+fragment CargoBikeFieldsForPage on CargoBike {
+...CargoBikeFieldsForTable
+bikeEvents {
+  ...BikeEventFieldsForBikePage
+}
+equipment(offset: 0, limit: 1000) {
+  ...EquipmentFieldsForBikePage
+}
+equipmentType {
+ ...EquipmentTypeFieldsForBikePage 
+}
+engagement(offset: 0, limit: 1000) {
+  ...EngagementFieldsForBikePage
+}
+currentEngagements {
+  ...EngagementFieldsForBikePage
+}
+timeFrames {
+  ...TimeFrameFieldsForBikePage
+}
+}

src/app/graphqlOperations/fragments/bikeEvent.graphql

@@ -1,12 +1,12 @@
-fragment BikeEventFields on BikeEvent {
+fragment BikeEventFieldsForBikePage on BikeEvent {
   id
-  date
   bikeEventType {
-    id
+    ...BikeEventTypeFields
-    name
-    isLocked
-    isLockedByMe
   }
+  responsible {
+    ...ParticipantFieldsForBikePage
+  }
+  date
   responsible {
     id
   }

src/app/graphqlOperations/fragments/bikeEventType.graphql

@@ -0,0 +1,7 @@
+fragment BikeEventTypeFields on BikeEventType {
+  id
+  name
+  isLocked
+  isLockedByMe
+  lockedUntil
+}

src/app/graphqlOperations/fragments/contactInformation.graphql

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

src/app/graphqlOperations/fragments/engagement.graphql

@@ -0,0 +1,15 @@
+fragment EngagementFieldsForBikePage on Engagement {
+    id
+    engagementType {
+        ...EngagementTypeFields
+    }
+    from
+    to
+    participant {
+        ...ParticipantFieldsForBikePage
+    }
+    isLocked
+  isLockedByMe
+  lockedBy
+  lockedUntil
+}

src/app/graphqlOperations/fragments/engagementType.graphql

@@ -0,0 +1,9 @@
+fragment EngagementTypeFields on EngagementType {
+    id
+    name
+    description
+    isLocked
+  isLockedByMe
+  lockedBy
+  lockedUntil
+}

src/app/graphqlOperations/fragments/equipment.graphql

@@ -0,0 +1,10 @@
+fragment EquipmentFieldsForBikePage on Equipment {
+    id
+    serialNo
+    title
+    description
+    isLocked
+    isLockedByMe
+    lockedBy
+    lockedUntil
+}

src/app/graphqlOperations/fragments/equipmentType.graphql

@@ -0,0 +1,9 @@
+fragment EquipmentTypeFieldsForBikePage on EquipmentType {
+  id
+  name
+  description
+  isLocked
+  isLockedByMe
+  lockedBy
+  lockedUntil
+}

src/app/graphqlOperations/fragments/lendingStation.graphql

@@ -1,9 +1,10 @@
-fragment LendingStationFieldsGeneral on LendingStation {
+fragment LendingStationFieldsForBikePage on LendingStation {
   id
   name
   address {
-    number
+    ...AddressFields
-    street
+  }
-    zip
+  organisation {
+    ...OrganisationFieldsForTimeFrame
   }
 }

src/app/graphqlOperations/fragments/organisation.graphql

@@ -0,0 +1,7 @@
+fragment OrganisationFieldsForTimeFrame on Organisation {
+  id
+  name
+  address {
+    ...AddressFields
+  }
+}

src/app/graphqlOperations/fragments/participant.graphql

@@ -0,0 +1,15 @@
+fragment ParticipantFieldsForBikePage on Participant {
+    id
+    start
+    end
+    usernamefLotte
+    usernameSlack
+    contactInformation {
+        ...ContactInformationFields
+    }
+
+    isLocked
+  isLockedByMe
+  lockedBy
+  lockedUntil
+}

src/app/graphqlOperations/fragments/person.graphql

@@ -0,0 +1,10 @@
+fragment PersonFields on Person {
+    id
+    name
+    firstName
+
+    isLocked
+  isLockedByMe
+  lockedBy
+  lockedUntil
+}

src/app/graphqlOperations/fragments/timeFrames.graphql

@@ -0,0 +1,13 @@
+fragment TimeFrameFieldsForBikePage on TimeFrame {
+    id
+    from 
+    to
+    note
+    lendingStation {
+        ...LendingStationFieldsForBikePage
+    }
+    isLocked
+  isLockedByMe
+  lockedBy
+  lockedUntil
+}

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

@@ -0,0 +1,19 @@
+<mat-spinner
+  *ngIf="isLoading"
+  [diameter]="32"
+  class="page-loading-spinner"
+></mat-spinner>
+<div class="page-wrapper" *ngIf="!isLoading && !data">
+  <h1>Seite konnte nicht gefunden werden :(</h1>
+</div>
+<div class="page-wrapper" *ngIf="data">
+  <h1>{{ data[headlineDataPath] }}</h1>
+
+  <div *ngFor="let prop of propertiesInfo">
+    <app-cell
+      [editable]="!prop.readonly && data.isLockedByMe"
+      [(value)]="data[prop.name]"
+      [inputType]="prop.type"
+    ></app-cell>
+  </div>
+</div>

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

@@ -0,0 +1,6 @@
+.page-loading-spinner {
+    margin: 0 auto;
+}
+.page-wrapper {
+    padding: 1em;
+}

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

@@ -0,0 +1,150 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { BikesService } from 'src/app/services/bikes.service';
+import { SchemaService } from 'src/app/services/schema.service';
+
+@Component({
+  selector: 'app-bike',
+  templateUrl: './bike.component.html',
+  styleUrls: ['./bike.component.scss'],
+})
+export class BikeComponent implements OnInit {
+  propertiesInfo: {
+    name: string;
+    translation: string;
+    readonly?: boolean;
+    type?: string;
+  }[] = [
+    { name: 'name', translation: 'Name' },
+    { name: 'id', translation: 'ID', readonly: true },
+    { name: 'group', translation: 'Gruppe' },
+    { name: 'modelName', translation: 'Modell' },
+    { name: 'insuranceData.billing', translation: 'Versicherung Abrechnung' },
+    { name: 'insuranceData.hasFixedRate', translation: 'Pauschale j/n' },
+    { name: 'insuranceData.fixedRate', translation: 'Pauschale Betrag' },
+    { name: 'insuranceData.name', translation: 'Versicherer' },
+    { name: 'insuranceData.benefactor', translation: 'Kostenträger' },
+    { name: 'insuranceData.noPnP', translation: 'Nr. P&P' },
+    {
+      name: 'insuranceData.maintenanceResponsible',
+      translation: 'Wartung zuständig',
+    },
+    {
+      name: 'insuranceData.maintenanceBenefactor',
+      translation: 'Wartung Kostenträger',
+    },
+    {
+      name: 'insuranceData.maintenanceAgreement',
+      translation: 'Wartungsvereinbarung',
+    },
+    { name: 'insuranceData.projectAllowance', translation: 'Projektzuschuss' },
+    { name: 'insuranceData.notes', translation: 'Sonstiges' },
+    { name: 'dimensionsAndLoad.bikeLength', translation: 'Länge' },
+    { name: 'dimensionsAndLoad.bikeWeight', translation: 'Gewicht' },
+    { name: 'dimensionsAndLoad.bikeHeight', translation: 'Höhe' },
+    { name: 'dimensionsAndLoad.bikeWidth', translation: 'Breite' },
+    { name: 'dimensionsAndLoad.boxHeight', translation: 'Boxhöhe' },
+    { name: 'dimensionsAndLoad.boxLength', translation: 'Boxlänge' },
+    { name: 'dimensionsAndLoad.boxWidth', translation: 'Boxbreite' },
+    { name: 'dimensionsAndLoad.hasCoverBox', translation: 'Boxabdeckung j/n' },
+    { name: 'dimensionsAndLoad.lockable', translation: 'Box abschließbar' },
+    { name: 'dimensionsAndLoad.maxWeightBox', translation: 'max Zuladung Box' },
+    {
+      name: 'dimensionsAndLoad.maxWeightLuggageRack',
+      translation: 'max Zuladung Gepäckträger',
+    },
+    {
+      name: 'dimensionsAndLoad.maxWeightTotal',
+      translation: 'max Gesamtgewicht',
+    },
+    { name: 'numberOfChildren', translation: 'Anzahl Kinder' },
+    { name: 'numberOfWheels', translation: 'Anzahl Räder' },
+    { name: 'forCargo', translation: 'für Lasten j/n' },
+    { name: 'forChildren', translation: 'für Kinder j/n' },
+    { name: 'security.frameNumber', translation: 'Rahmennummer' },
+    { name: 'security.adfcCoding', translation: 'ADFC Codierung' },
+    {
+      name: 'security.keyNumberAXAChain',
+      translation: 'Schlüsselnrummer Rahmenschloss',
+    },
+    {
+      name: 'security.keyNumberFrameLock',
+      translation: 'Schlüsselnrummer AXA-Kette',
+    },
+    { name: 'security.policeCoding', translation: 'Polizei Codierung' },
+    { name: 'technicalEquipment.bicycleShift', translation: 'Schaltung' },
+    { name: 'technicalEquipment.isEBike', translation: 'E-Bike j/n' },
+    {
+      name: 'technicalEquipment.hasLightSystem',
+      translation: 'Lichtanlage j/n',
+    },
+    {
+      name: 'technicalEquipment.specialFeatures',
+      translation: 'Besonderheiten',
+    },
+    { name: 'stickerBikeNameState', translation: 'Aufkleber Status' },
+    { name: 'note', translation: 'Aufkleber Kommentar' },
+    { name: 'taxes.costCenter', translation: 'Steuern Kostenstelle' },
+    { name: 'taxes.organisationArea', translation: 'Steuern Vereinsbereich' },
+    { name: 'provider.id', translation: '' },
+    { name: 'provider.formName', translation: '' },
+    { name: 'provider.privatePerson.id', translation: '' },
+    { name: 'provider.privatePerson.person.id', translation: '' },
+    { name: 'provider.privatePerson.person.name', translation: '' },
+    { name: 'provider.privatePerson.person.firstName', translation: '' },
+    {
+      name: 'provider.privatePerson.person.contactInformation.email',
+      translation: '',
+    },
+    { name: 'lendingStation.id', translation: '' },
+    { name: 'lendingStation.name', translation: '' },
+    { name: 'lendingStation.address.number', translation: '' },
+    { name: 'lendingStation.address.street', translation: '' },
+    { name: 'lendingStation.address.zip', translation: '' },
+  ];
+
+  headlineDataPath = 'name';
+  pageDataGQLType: string = "CargoBike";
+  pageDataGQLUpdateInputType: string = "CargoBikeUpdateInput"
+
+  id: string;
+  data: any;
+  isLoading: boolean = false;
+
+  constructor(
+    private route: ActivatedRoute,
+    private bikesService: BikesService,
+    private schemaService: SchemaService
+  ) {
+    this.addPropertiesFromGQLSchemaToPropertiesInfo();
+    console.log(this.propertiesInfo);
+  }
+
+  ngOnInit(): void {
+    this.id = this.route.snapshot.paramMap.get('id');
+    this.bikesService.loadCargoBike({ id: this.id });
+    this.bikesService.bike.subscribe((data) => {
+      this.data = data;
+    });
+    this.bikesService.loadingBike.subscribe(
+      (isLoading) => (this.isLoading = isLoading)
+    );
+  }
+
+  addPropertiesFromGQLSchemaToPropertiesInfo() {
+    for (const column of this.propertiesInfo) {
+      const typeInformation = this.schemaService.getTypeInformation(
+        this.pageDataGQLType,
+        column.name
+      );
+      column.type = column.type || typeInformation.type;
+    }
+    for (const column of this.propertiesInfo) {
+      const typeInformation = this.schemaService.getTypeInformation(
+        this.pageDataGQLUpdateInputType,
+        column.name
+      );
+      column.readonly = column.readonly || !typeInformation.isPartOfType;
+    }
+  }
+}

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

@@ -46,7 +46,11 @@
     >
       {{ countUnsavedRows() }} ungespeicherte(s) Element(e) anzeigen
     </button>
-    <mat-checkbox *ngIf="filter.onlyUnsaved" (change)="showOnlyUnsavedElements(false)" [(ngModel)]="filter.onlyUnsaved">
+    <mat-checkbox
+      *ngIf="filter.onlyUnsaved"
+      (change)="showOnlyUnsavedElements(false)"
+      [(ngModel)]="filter.onlyUnsaved"
+    >
       nur ungespeicherte Elemente anzeigen
     </mat-checkbox>
     <mat-paginator
@@ -113,8 +117,15 @@
             (validityChange)="validityChange(element, column.name, $event)"
             [(value)]="element[column.name]"
             [inputType]="column.type"
+            [link]="column.link ? column.link(element) : null"
           ></app-cell>
-          <ng-template #stringValue>{{ element[column.name] }}</ng-template>
+          <ng-template #stringValue>
+            <span *ngIf="!column.link">{{ element[column.name] }}</span>
+            <a mat-button color="primary" *ngIf="column.link" [routerLink]="column.link(element)">{{
+              element[column.name]
+            }}</a>
+          </ng-template>
+          
         </td>
       </ng-container>
 
@@ -188,7 +199,8 @@
             class="button-wrapper"
             *ngIf="element.newObject"
             [matTooltip]="
-              'Nicht ausgefüllte Pflichtfelder (rot): ' + countUnvalidFields(element)
+              'Nicht ausgefüllte Pflichtfelder (rot): ' +
+              countUnvalidFields(element)
             "
           >
             <button

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

@@ -1,5 +1,5 @@
 import { SelectionModel } from '@angular/cdk/collections';
-import { Component, Inject, ViewChild } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { BikesService, CargoBikeResult } from 'src/app/services/bikes.service';
 import { flatten } from 'src/app/helperFunctions/flattenObject';
@@ -10,11 +10,9 @@ import { logArrayInColumnInfoForm } from 'src/app/helperFunctions/logArrayInColu
 import { MatTableDataSource } from '@angular/material/table';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import { BehaviorSubject } from 'rxjs';
 import {
   MatDialog,
   MatDialogRef,
-  MAT_DIALOG_DATA,
 } from '@angular/material/dialog';
 
 @Component({
@@ -32,8 +30,9 @@ export class BikesComponent {
     sticky?: boolean;
     readonly?: boolean;
     type?: string;
+    link?: (row: any)=> string;
   }[] = [
-    { name: 'name', header: 'Name', sticky: true },
+    { name: 'name', header: 'Name', sticky: true, link: (row: any) => {return "/bike/" + row.id}},
     { name: 'id', header: 'ID', readonly: true },
     { name: 'group', header: 'Gruppe' },
     { name: 'modelName', header: 'Modell' },
@@ -141,7 +140,9 @@ export class BikesComponent {
     private bikesService: BikesService,
     private schemaService: SchemaService,
     public dialog: MatDialog
-  ) {}
+  ) {
+    console.log(this.columnInfo[0].link({id: 66}));
+  }
 
   ngAfterViewInit() {
     this.addColumnPropertiesFromGQLSchemaToColumnInfo();

src/app/services/bikes.service.ts

@@ -1,12 +1,10 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
-import { SchemaService } from './schema.service';
-import { deepCopy } from 'src/app/helperFunctions/deepCopy';
 import {
   GetCargoBikesGQL,
   GetCargoBikesQuery,
-  GetCargoBikeByIdGQL,
+  ReloadCargoBikeByIdGQL,
-  GetCargoBikeByIdQueryVariables,
+  ReloadCargoBikeByIdQueryVariables,
   UpdateCargoBikeGQL,
   UpdateCargoBikeMutationVariables,
   LockCargoBikeGQL,
@@ -17,6 +15,8 @@ import {
   CreateCargoBikeMutationVariables,
   DeleteCargoBikeGQL,
   DeleteCargoBikeMutationVariables,
+  GetCargoBikeByIdGQL,
+  GetCargoBikeByIdQueryVariables,
 } from 'src/generated/graphql';
 import { DeepExtractTypeSkipArrays } from 'ts-deep-extract-types';
 
@@ -31,11 +31,14 @@ export type CargoBikeResult = DeepExtractTypeSkipArrays<
 export class BikesService {
   bikes: BehaviorSubject<CargoBikeResult[]> = new BehaviorSubject([]);
   loadingRowIds: BehaviorSubject<string[]> = new BehaviorSubject([]);
-  groupEnum: BehaviorSubject<string[]> = new BehaviorSubject<string[]>([]);
+  bike: BehaviorSubject<any> = new BehaviorSubject([]);
+  loadingBike: BehaviorSubject<boolean> = new BehaviorSubject(false);
+  
 
   constructor(
     private getCargoBikesGQL: GetCargoBikesGQL,
     private getCargoBikeByIdGQL: GetCargoBikeByIdGQL,
+    private reloadCargoBikeByIdGQL: ReloadCargoBikeByIdGQL,
     private updateCargoBikeGQL: UpdateCargoBikeGQL,
     private lockCargoBikeGQL: LockCargoBikeGQL,
     private unlockCargoBikeGQL: UnlockCargoBikeGQL,
@@ -62,9 +65,22 @@ export class BikesService {
     });
   }
 
-  reloadBike(variables: GetCargoBikeByIdQueryVariables) {
+  loadCargoBike(variables: GetCargoBikeByIdQueryVariables) {
-    this.addLoadingRowId(variables.id);
+    this.bike.next(null);
+    this.loadingBike.next(true);
     this.getCargoBikeByIdGQL
+      .fetch(variables)
+      .subscribe((result) => {
+        this.bike.next(result.data.cargoBikeById);
+      })
+      .add(() => {
+        this.loadingBike.next(false);
+      });
+  }
+
+  reloadBike(variables: ReloadCargoBikeByIdQueryVariables) {
+    this.addLoadingRowId(variables.id);
+    this.reloadCargoBikeByIdGQL
       .fetch(variables)
       .subscribe((result) => {
         const newBike = result.data.cargoBikeById;

src/generated/graphql.ts

@@ -1699,6 +1699,17 @@ export enum CacheControlScope {
 }
 
 
+export type GetCargoBikesQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type GetCargoBikesQuery = (
+  { __typename?: 'Query' }
+  & { cargoBikes: Array<Maybe<(
+    { __typename?: 'CargoBike' }
+    & CargoBikeFieldsForTableFragment
+  )>> }
+);
+
 export type GetCargoBikeByIdQueryVariables = Exact<{
   id: Scalars['ID'];
 }>;
@@ -1708,7 +1719,20 @@ export type GetCargoBikeByIdQuery = (
   { __typename?: 'Query' }
   & { cargoBikeById?: Maybe<(
     { __typename?: 'CargoBike' }
-    & CargoBikeFieldsFragment
+    & CargoBikeFieldsForPageFragment
+  )> }
+);
+
+export type ReloadCargoBikeByIdQueryVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type ReloadCargoBikeByIdQuery = (
+  { __typename?: 'Query' }
+  & { cargoBikeById?: Maybe<(
+    { __typename?: 'CargoBike' }
+    & CargoBikeFieldsForTableFragment
   )> }
 );
 
@@ -1721,7 +1745,7 @@ export type CreateCargoBikeMutation = (
   { __typename?: 'Mutation' }
   & { createCargoBike: (
     { __typename?: 'CargoBike' }
-    & CargoBikeFieldsFragment
+    & CargoBikeFieldsForTableFragment
   ) }
 );
 
@@ -1734,7 +1758,7 @@ export type UpdateCargoBikeMutation = (
   { __typename?: 'Mutation' }
   & { updateCargoBike: (
     { __typename?: 'CargoBike' }
-    & CargoBikeFieldsFragment
+    & CargoBikeFieldsForTableFragment
   ) }
 );
 
@@ -1747,7 +1771,7 @@ export type LockCargoBikeMutation = (
   { __typename?: 'Mutation' }
   & { lockCargoBike: (
     { __typename?: 'CargoBike' }
-    & CargoBikeFieldsFragment
+    & CargoBikeFieldsForTableFragment
   ) }
 );
 
@@ -1760,7 +1784,7 @@ export type UnlockCargoBikeMutation = (
   { __typename?: 'Mutation' }
   & { unlockCargoBike: (
     { __typename?: 'CargoBike' }
-    & CargoBikeFieldsFragment
+    & CargoBikeFieldsForTableFragment
   ) }
 );
 
@@ -1774,32 +1798,14 @@ export type DeleteCargoBikeMutation = (
   & Pick<Mutation, 'deleteCargoBike'>
 );
 
-export type GetCargoBikesQueryVariables = Exact<{ [key: string]: never; }>;
+export type AddressFieldsFragment = (
-
+  { __typename?: 'Address' }
-
+  & Pick<Address, 'street' | 'number' | 'zip'>
-export type GetCargoBikesQuery = (
-  { __typename?: 'Query' }
-  & { cargoBikes: Array<Maybe<(
-    { __typename?: 'CargoBike' }
-    & CargoBikeFieldsFragment
-  )>> }
-);
-
-export type BikeEventFieldsFragment = (
-  { __typename?: 'BikeEvent' }
-  & Pick<BikeEvent, 'id' | 'date'>
-  & { bikeEventType: (
-    { __typename?: 'BikeEventType' }
-    & Pick<BikeEventType, 'id' | 'name' | 'isLocked' | 'isLockedByMe'>
-  ), responsible?: Maybe<(
-    { __typename?: 'Participant' }
-    & Pick<Participant, 'id'>
-  )> }
 );
 
-export type CargoBikeFieldsMutableFragment = (
+export type CargoBikeFieldsForTableFragment = (
   { __typename?: 'CargoBike' }
-  & Pick<CargoBike, 'id' | 'group' | 'name' | 'modelName' | 'numberOfChildren' | 'numberOfWheels' | 'forCargo' | 'forChildren' | 'stickerBikeNameState' | 'note'>
+  & Pick<CargoBike, 'id' | 'group' | 'name' | 'modelName' | 'numberOfChildren' | 'numberOfWheels' | 'forCargo' | 'forChildren' | 'stickerBikeNameState' | 'note' | 'isLocked' | 'isLockedByMe' | 'lockedBy' | 'lockedUntil'>
   & { insuranceData: (
     { __typename?: 'InsuranceData' }
     & Pick<InsuranceData, 'billing' | 'hasFixedRate' | 'name' | 'benefactor' | 'noPnP' | 'maintenanceResponsible' | 'maintenanceBenefactor' | 'maintenanceAgreement' | 'fixedRate' | 'projectAllowance' | 'notes'>
@@ -1815,31 +1821,128 @@ export type CargoBikeFieldsMutableFragment = (
   )>, taxes?: Maybe<(
     { __typename?: 'Taxes' }
     & Pick<Taxes, 'costCenter' | 'organisationArea'>
-  )> }
+  )>, provider?: Maybe<(
-);
-
-export type CargoBikeFieldsFragment = (
-  { __typename?: 'CargoBike' }
-  & Pick<CargoBike, 'isLocked' | 'isLockedByMe' | 'lockedBy' | 'lockedUntil'>
-  & { provider?: Maybe<(
     { __typename?: 'Provider' }
     & ProviderFieldsGeneralFragment
   )>, lendingStation?: Maybe<(
     { __typename?: 'LendingStation' }
-    & LendingStationFieldsGeneralFragment
+    & LendingStationFieldsForBikePageFragment
   )> }
-  & CargoBikeFieldsMutableFragment
 );
 
-export type LendingStationFieldsGeneralFragment = (
+export type CargoBikeFieldsForPageFragment = (
+  { __typename?: 'CargoBike' }
+  & { bikeEvents?: Maybe<Array<Maybe<(
+    { __typename?: 'BikeEvent' }
+    & BikeEventFieldsForBikePageFragment
+  )>>>, equipment?: Maybe<Array<Maybe<(
+    { __typename?: 'Equipment' }
+    & EquipmentFieldsForBikePageFragment
+  )>>>, equipmentType?: Maybe<Array<Maybe<(
+    { __typename?: 'EquipmentType' }
+    & EquipmentTypeFieldsForBikePageFragment
+  )>>>, engagement?: Maybe<Array<Maybe<(
+    { __typename?: 'Engagement' }
+    & EngagementFieldsForBikePageFragment
+  )>>>, currentEngagements?: Maybe<Array<Maybe<(
+    { __typename?: 'Engagement' }
+    & EngagementFieldsForBikePageFragment
+  )>>>, timeFrames?: Maybe<Array<Maybe<(
+    { __typename?: 'TimeFrame' }
+    & TimeFrameFieldsForBikePageFragment
+  )>>> }
+  & CargoBikeFieldsForTableFragment
+);
+
+export type BikeEventFieldsForBikePageFragment = (
+  { __typename?: 'BikeEvent' }
+  & Pick<BikeEvent, 'id' | 'date'>
+  & { bikeEventType: (
+    { __typename?: 'BikeEventType' }
+    & BikeEventTypeFieldsFragment
+  ), responsible?: Maybe<(
+    { __typename?: 'Participant' }
+    & Pick<Participant, 'id'>
+    & ParticipantFieldsForBikePageFragment
+  )> }
+);
+
+export type BikeEventTypeFieldsFragment = (
+  { __typename?: 'BikeEventType' }
+  & Pick<BikeEventType, 'id' | 'name' | 'isLocked' | 'isLockedByMe' | 'lockedUntil'>
+);
+
+export type ContactInformationFieldsFragment = (
+  { __typename?: 'ContactInformation' }
+  & Pick<ContactInformation, 'id' | 'phone' | 'phone2' | 'email' | 'email2' | 'note' | 'isLocked' | 'isLockedByMe' | 'lockedBy' | 'lockedUntil'>
+  & { person: (
+    { __typename?: 'Person' }
+    & PersonFieldsFragment
+  ) }
+);
+
+export type EngagementFieldsForBikePageFragment = (
+  { __typename?: 'Engagement' }
+  & Pick<Engagement, 'id' | 'from' | 'to' | 'isLocked' | 'isLockedByMe' | 'lockedBy' | 'lockedUntil'>
+  & { engagementType: (
+    { __typename?: 'EngagementType' }
+    & EngagementTypeFieldsFragment
+  ), participant: (
+    { __typename?: 'Participant' }
+    & ParticipantFieldsForBikePageFragment
+  ) }
+);
+
+export type EngagementTypeFieldsFragment = (
+  { __typename?: 'EngagementType' }
+  & Pick<EngagementType, 'id' | 'name' | 'description' | 'isLocked' | 'isLockedByMe' | 'lockedBy' | 'lockedUntil'>
+);
+
+export type EquipmentFieldsForBikePageFragment = (
+  { __typename?: 'Equipment' }
+  & Pick<Equipment, 'id' | 'serialNo' | 'title' | 'description' | 'isLocked' | 'isLockedByMe' | 'lockedBy' | 'lockedUntil'>
+);
+
+export type EquipmentTypeFieldsForBikePageFragment = (
+  { __typename?: 'EquipmentType' }
+  & Pick<EquipmentType, 'id' | 'name' | 'description' | 'isLocked' | 'isLockedByMe' | 'lockedBy' | 'lockedUntil'>
+);
+
+export type LendingStationFieldsForBikePageFragment = (
   { __typename?: 'LendingStation' }
   & Pick<LendingStation, 'id' | 'name'>
   & { address: (
     { __typename?: 'Address' }
-    & Pick<Address, 'number' | 'street' | 'zip'>
+    & AddressFieldsFragment
+  ), organisation?: Maybe<(
+    { __typename?: 'Organisation' }
+    & OrganisationFieldsForTimeFrameFragment
+  )> }
+);
+
+export type OrganisationFieldsForTimeFrameFragment = (
+  { __typename?: 'Organisation' }
+  & Pick<Organisation, 'id' | 'name'>
+  & { address?: Maybe<(
+    { __typename?: 'Address' }
+    & AddressFieldsFragment
+  )> }
+);
+
+export type ParticipantFieldsForBikePageFragment = (
+  { __typename?: 'Participant' }
+  & Pick<Participant, 'id' | 'start' | 'end' | 'usernamefLotte' | 'usernameSlack' | 'isLocked' | 'isLockedByMe' | 'lockedBy' | 'lockedUntil'>
+  & { contactInformation: (
+    { __typename?: 'ContactInformation' }
+    & ContactInformationFieldsFragment
   ) }
 );
 
+export type PersonFieldsFragment = (
+  { __typename?: 'Person' }
+  & Pick<Person, 'id' | 'name' | 'firstName' | 'isLocked' | 'isLockedByMe' | 'lockedBy' | 'lockedUntil'>
+);
+
 export type ProviderFieldsGeneralFragment = (
   { __typename?: 'Provider' }
   & Pick<Provider, 'id' | 'formName'>
@@ -1857,23 +1960,63 @@ export type ProviderFieldsGeneralFragment = (
   )> }
 );
 
-export const BikeEventFieldsFragmentDoc = gql`
+export type TimeFrameFieldsForBikePageFragment = (
-    fragment BikeEventFields on BikeEvent {
+  { __typename?: 'TimeFrame' }
+  & Pick<TimeFrame, 'id' | 'from' | 'to' | 'note' | 'isLocked' | 'isLockedByMe' | 'lockedBy' | 'lockedUntil'>
+  & { lendingStation: (
+    { __typename?: 'LendingStation' }
+    & LendingStationFieldsForBikePageFragment
+  ) }
+);
+
+export const ProviderFieldsGeneralFragmentDoc = gql`
+    fragment ProviderFieldsGeneral on Provider {
   id
-  date
+  formName
-  bikeEventType {
+  privatePerson {
+    id
+    person {
       id
       name
-    isLocked
+      firstName
-    isLockedByMe
+      contactInformation {
+        email
+      }
     }
-  responsible {
-    id
   }
 }
     `;
-export const CargoBikeFieldsMutableFragmentDoc = gql`
+export const AddressFieldsFragmentDoc = gql`
-    fragment CargoBikeFieldsMutable on CargoBike {
+    fragment AddressFields on Address {
+  street
+  number
+  zip
+}
+    `;
+export const OrganisationFieldsForTimeFrameFragmentDoc = gql`
+    fragment OrganisationFieldsForTimeFrame on Organisation {
+  id
+  name
+  address {
+    ...AddressFields
+  }
+}
+    ${AddressFieldsFragmentDoc}`;
+export const LendingStationFieldsForBikePageFragmentDoc = gql`
+    fragment LendingStationFieldsForBikePage on LendingStation {
+  id
+  name
+  address {
+    ...AddressFields
+  }
+  organisation {
+    ...OrganisationFieldsForTimeFrame
+  }
+}
+    ${AddressFieldsFragmentDoc}
+${OrganisationFieldsForTimeFrameFragmentDoc}`;
+export const CargoBikeFieldsForTableFragmentDoc = gql`
+    fragment CargoBikeFieldsForTable on CargoBike {
   id
   group
   name
@@ -1955,60 +2098,209 @@ export const CargoBikeFieldsMutableFragmentDoc = gql`
     costCenter
     organisationArea
   }
+  provider {
+    ...ProviderFieldsGeneral
+  }
+  lendingStation {
+    ...LendingStationFieldsForBikePage
+  }
+  isLocked
+  isLockedByMe
+  lockedBy
+  lockedUntil
+}
+    ${ProviderFieldsGeneralFragmentDoc}
+${LendingStationFieldsForBikePageFragmentDoc}`;
+export const BikeEventTypeFieldsFragmentDoc = gql`
+    fragment BikeEventTypeFields on BikeEventType {
+  id
+  name
+  isLocked
+  isLockedByMe
+  lockedUntil
 }
     `;
-export const ProviderFieldsGeneralFragmentDoc = gql`
+export const PersonFieldsFragmentDoc = gql`
-    fragment ProviderFieldsGeneral on Provider {
+    fragment PersonFields on Person {
   id
-  formName
+  name
-  privatePerson {
+  firstName
+  isLocked
+  isLockedByMe
+  lockedBy
+  lockedUntil
+}
+    `;
+export const ContactInformationFieldsFragmentDoc = gql`
+    fragment ContactInformationFields on ContactInformation {
   id
   person {
+    ...PersonFields
+  }
+  phone
+  phone2
+  email
+  email2
+  note
+  isLocked
+  isLockedByMe
+  lockedBy
+  lockedUntil
+}
+    ${PersonFieldsFragmentDoc}`;
+export const ParticipantFieldsForBikePageFragmentDoc = gql`
+    fragment ParticipantFieldsForBikePage on Participant {
   id
-      name
+  start
-      firstName
+  end
+  usernamefLotte
+  usernameSlack
   contactInformation {
-        email
+    ...ContactInformationFields
   }
+  isLocked
+  isLockedByMe
+  lockedBy
+  lockedUntil
+}
+    ${ContactInformationFieldsFragmentDoc}`;
+export const BikeEventFieldsForBikePageFragmentDoc = gql`
+    fragment BikeEventFieldsForBikePage on BikeEvent {
+  id
+  bikeEventType {
+    ...BikeEventTypeFields
+  }
+  responsible {
+    ...ParticipantFieldsForBikePage
+    id
+  }
+  date
+  responsible {
+    id
   }
 }
+    ${BikeEventTypeFieldsFragmentDoc}
+${ParticipantFieldsForBikePageFragmentDoc}`;
+export const EquipmentFieldsForBikePageFragmentDoc = gql`
+    fragment EquipmentFieldsForBikePage on Equipment {
+  id
+  serialNo
+  title
+  description
+  isLocked
+  isLockedByMe
+  lockedBy
+  lockedUntil
 }
     `;
-export const LendingStationFieldsGeneralFragmentDoc = gql`
+export const EquipmentTypeFieldsForBikePageFragmentDoc = gql`
-    fragment LendingStationFieldsGeneral on LendingStation {
+    fragment EquipmentTypeFieldsForBikePage on EquipmentType {
   id
   name
-  address {
+  description
-    number
+  isLocked
-    street
+  isLockedByMe
-    zip
+  lockedBy
+  lockedUntil
 }
+    `;
+export const EngagementTypeFieldsFragmentDoc = gql`
+    fragment EngagementTypeFields on EngagementType {
+  id
+  name
+  description
+  isLocked
+  isLockedByMe
+  lockedBy
+  lockedUntil
 }
     `;
-export const CargoBikeFieldsFragmentDoc = gql`
+export const EngagementFieldsForBikePageFragmentDoc = gql`
-    fragment CargoBikeFields on CargoBike {
+    fragment EngagementFieldsForBikePage on Engagement {
-  ...CargoBikeFieldsMutable
+  id
-  provider {
+  engagementType {
-    ...ProviderFieldsGeneral
+    ...EngagementTypeFields
   }
+  from
+  to
+  participant {
+    ...ParticipantFieldsForBikePage
+  }
+  isLocked
+  isLockedByMe
+  lockedBy
+  lockedUntil
+}
+    ${EngagementTypeFieldsFragmentDoc}
+${ParticipantFieldsForBikePageFragmentDoc}`;
+export const TimeFrameFieldsForBikePageFragmentDoc = gql`
+    fragment TimeFrameFieldsForBikePage on TimeFrame {
+  id
+  from
+  to
+  note
   lendingStation {
-    ...LendingStationFieldsGeneral
+    ...LendingStationFieldsForBikePage
   }
   isLocked
   isLockedByMe
   lockedBy
   lockedUntil
 }
-    ${CargoBikeFieldsMutableFragmentDoc}
+    ${LendingStationFieldsForBikePageFragmentDoc}`;
-${ProviderFieldsGeneralFragmentDoc}
+export const CargoBikeFieldsForPageFragmentDoc = gql`
-${LendingStationFieldsGeneralFragmentDoc}`;
+    fragment CargoBikeFieldsForPage on CargoBike {
+  ...CargoBikeFieldsForTable
+  bikeEvents {
+    ...BikeEventFieldsForBikePage
+  }
+  equipment(offset: 0, limit: 1000) {
+    ...EquipmentFieldsForBikePage
+  }
+  equipmentType {
+    ...EquipmentTypeFieldsForBikePage
+  }
+  engagement(offset: 0, limit: 1000) {
+    ...EngagementFieldsForBikePage
+  }
+  currentEngagements {
+    ...EngagementFieldsForBikePage
+  }
+  timeFrames {
+    ...TimeFrameFieldsForBikePage
+  }
+}
+    ${CargoBikeFieldsForTableFragmentDoc}
+${BikeEventFieldsForBikePageFragmentDoc}
+${EquipmentFieldsForBikePageFragmentDoc}
+${EquipmentTypeFieldsForBikePageFragmentDoc}
+${EngagementFieldsForBikePageFragmentDoc}
+${TimeFrameFieldsForBikePageFragmentDoc}`;
+export const GetCargoBikesDocument = gql`
+    query GetCargoBikes {
+  cargoBikes(limit: 1000, offset: 0) {
+    ...CargoBikeFieldsForTable
+  }
+}
+    ${CargoBikeFieldsForTableFragmentDoc}`;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class GetCargoBikesGQL extends Apollo.Query<GetCargoBikesQuery, GetCargoBikesQueryVariables> {
+    document = GetCargoBikesDocument;
+    
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
 export const GetCargoBikeByIdDocument = gql`
     query GetCargoBikeById($id: ID!) {
   cargoBikeById(id: $id) {
-    ...CargoBikeFields
+    ...CargoBikeFieldsForPage
   }
 }
-    ${CargoBikeFieldsFragmentDoc}`;
+    ${CargoBikeFieldsForPageFragmentDoc}`;
 
   @Injectable({
     providedIn: 'root'
@@ -2016,6 +2308,24 @@ export const GetCargoBikeByIdDocument = gql`
   export class GetCargoBikeByIdGQL extends Apollo.Query<GetCargoBikeByIdQuery, GetCargoBikeByIdQueryVariables> {
     document = GetCargoBikeByIdDocument;
     
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
+export const ReloadCargoBikeByIdDocument = gql`
+    query ReloadCargoBikeById($id: ID!) {
+  cargoBikeById(id: $id) {
+    ...CargoBikeFieldsForTable
+  }
+}
+    ${CargoBikeFieldsForTableFragmentDoc}`;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class ReloadCargoBikeByIdGQL extends Apollo.Query<ReloadCargoBikeByIdQuery, ReloadCargoBikeByIdQueryVariables> {
+    document = ReloadCargoBikeByIdDocument;
+    
     constructor(apollo: Apollo.Apollo) {
       super(apollo);
     }
@@ -2023,10 +2333,10 @@ export const GetCargoBikeByIdDocument = gql`
 export const CreateCargoBikeDocument = gql`
     mutation CreateCargoBike($bike: CargoBikeCreateInput!) {
   createCargoBike(cargoBike: $bike) {
-    ...CargoBikeFields
+    ...CargoBikeFieldsForTable
   }
 }
-    ${CargoBikeFieldsFragmentDoc}`;
+    ${CargoBikeFieldsForTableFragmentDoc}`;
 
   @Injectable({
     providedIn: 'root'
@@ -2041,10 +2351,10 @@ export const CreateCargoBikeDocument = gql`
 export const UpdateCargoBikeDocument = gql`
     mutation UpdateCargoBike($bike: CargoBikeUpdateInput!) {
   updateCargoBike(cargoBike: $bike) {
-    ...CargoBikeFields
+    ...CargoBikeFieldsForTable
   }
 }
-    ${CargoBikeFieldsFragmentDoc}`;
+    ${CargoBikeFieldsForTableFragmentDoc}`;
 
   @Injectable({
     providedIn: 'root'
@@ -2059,10 +2369,10 @@ export const UpdateCargoBikeDocument = gql`
 export const LockCargoBikeDocument = gql`
     mutation LockCargoBike($id: ID!) {
   lockCargoBike(id: $id) {
-    ...CargoBikeFields
+    ...CargoBikeFieldsForTable
   }
 }
-    ${CargoBikeFieldsFragmentDoc}`;
+    ${CargoBikeFieldsForTableFragmentDoc}`;
 
   @Injectable({
     providedIn: 'root'
@@ -2077,10 +2387,10 @@ export const LockCargoBikeDocument = gql`
 export const UnlockCargoBikeDocument = gql`
     mutation UnlockCargoBike($id: ID!) {
   unlockCargoBike(id: $id) {
-    ...CargoBikeFields
+    ...CargoBikeFieldsForTable
   }
 }
-    ${CargoBikeFieldsFragmentDoc}`;
+    ${CargoBikeFieldsForTableFragmentDoc}`;
 
   @Injectable({
     providedIn: 'root'
@@ -2104,24 +2414,6 @@ export const DeleteCargoBikeDocument = gql`
   export class DeleteCargoBikeGQL extends Apollo.Mutation<DeleteCargoBikeMutation, DeleteCargoBikeMutationVariables> {
     document = DeleteCargoBikeDocument;
     
-    constructor(apollo: Apollo.Apollo) {
-      super(apollo);
-    }
-  }
-export const GetCargoBikesDocument = gql`
-    query GetCargoBikes {
-  cargoBikes(limit: 1000, offset: 0) {
-    ...CargoBikeFields
-  }
-}
-    ${CargoBikeFieldsFragmentDoc}`;
-
-  @Injectable({
-    providedIn: 'root'
-  })
-  export class GetCargoBikesGQL extends Apollo.Query<GetCargoBikesQuery, GetCargoBikesQueryVariables> {
-    document = GetCargoBikesDocument;
-    
     constructor(apollo: Apollo.Apollo) {
       super(apollo);
     }