From 5b2ae731c483b823d83d588b780c90f44ff6f98b Mon Sep 17 00:00:00 2001
From: Max Ehrlicher-Schmidt <maxes2000@t-online.de>
Date: Mon, 23 Nov 2020 23:48:34 +0100
Subject: [PATCH] Add equipmentType table and fix creation bug

---
 src/app/app-routing.module.ts                 |   5 +
 src/app/app.module.ts                         |  10 +-
 src/app/components/table/table.component.html |   5 +-
 src/app/components/table/table.component.ts   |  15 +-
 .../graphqlOperations/equipmentType.graphql   |  33 +++
 .../graphqlOperations/fragments/bike.graphql  |   2 +-
 .../fragments/equipmentType.graphql           |   2 +-
 src/app/pages/tables/bikes/bikes.component.ts |  16 +-
 .../engagement-types.component.html           |   1 +
 .../engagement-types.component.scss           |   0
 .../engagement-types.component.spec.ts        |  25 +++
 .../engagement-types.component.ts             |  15 ++
 .../equipment-types.component.html            |  12 ++
 .../equipment-types.component.scss            |   0
 .../equipment-types.component.ts              |  50 +++++
 .../tables/workshops/workshops.component.html |   1 +
 .../tables/workshops/workshops.component.scss |   0
 .../workshops/workshops.component.spec.ts     |  25 +++
 .../tables/workshops/workshops.component.ts   |  15 ++
 src/app/services/bikes.service.ts             |  11 +-
 src/app/services/equipmentType.service.ts     | 124 ++++++++++++
 src/generated/graphql.ts                      | 191 +++++++++++++++++-
 22 files changed, 525 insertions(+), 33 deletions(-)
 create mode 100644 src/app/graphqlOperations/equipmentType.graphql
 create mode 100644 src/app/pages/tables/engagement-types/engagement-types.component.html
 create mode 100644 src/app/pages/tables/engagement-types/engagement-types.component.scss
 create mode 100644 src/app/pages/tables/engagement-types/engagement-types.component.spec.ts
 create mode 100644 src/app/pages/tables/engagement-types/engagement-types.component.ts
 create mode 100644 src/app/pages/tables/equipment-types/equipment-types.component.html
 create mode 100644 src/app/pages/tables/equipment-types/equipment-types.component.scss
 create mode 100644 src/app/pages/tables/equipment-types/equipment-types.component.ts
 create mode 100644 src/app/pages/tables/workshops/workshops.component.html
 create mode 100644 src/app/pages/tables/workshops/workshops.component.scss
 create mode 100644 src/app/pages/tables/workshops/workshops.component.spec.ts
 create mode 100644 src/app/pages/tables/workshops/workshops.component.ts
 create mode 100644 src/app/services/equipmentType.service.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 32199a6..e067b23 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -4,6 +4,8 @@ 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'
+import { EngagementTypesComponent } from './pages/tables/engagement-types/engagement-types.component';
+import { EquipmentTypesComponent } from './pages/tables/equipment-types/equipment-types.component';
 import { LendingStationsComponent } from './pages/tables/lending-stations/lending-stations.component';
 import { ParticipantsComponent } from './pages/tables/participants/participants.component';
 
@@ -14,8 +16,11 @@ const routes: Routes = [
   { path: 'bike/:id', component: BikeComponent },
   { path: 'table/participants', component: ParticipantsComponent },
   { path: 'table/lendingStations', component: LendingStationsComponent },
+  { path: 'table/equipmentTypes', component: EquipmentTypesComponent },
+  { path: 'table/engagementTypes', component: EngagementTypesComponent },
   { path: '', redirectTo: 'tableOverview', pathMatch: 'full' },
   { path: 'table', redirectTo: 'tableOverview', pathMatch: 'full' },
+  { path: '**', redirectTo: 'tableOverview' },
 ];
 
 @NgModule({
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 5edba02..a8d49ef 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -46,7 +46,10 @@ import { NavService }from './components/menu-list-item/nav.service';
 import { TokenInterceptor } from './helper/token.interceptor';
 import { BikeComponent } from './pages/dataPages/bike/bike.component';
 import { TableComponent, DeleteConfirmationDialog } from './components/table/table.component';
-import { DataPageComponent } from './components/data-page/data-page.component'
+import { DataPageComponent } from './components/data-page/data-page.component';
+import { EquipmentTypesComponent } from './pages/tables/equipment-types/equipment-types.component';
+import { EngagementTypesComponent } from './pages/tables/engagement-types/engagement-types.component';
+import { WorkshopsComponent } from './pages/tables/workshops/workshops.component'
 
 
 @NgModule({
@@ -63,7 +66,10 @@ import { DataPageComponent } from './components/data-page/data-page.component'
     DeleteConfirmationDialog,
     BikeComponent,
     TableComponent,
-    DataPageComponent
+    DataPageComponent,
+    EquipmentTypesComponent,
+    EngagementTypesComponent,
+    WorkshopsComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/components/table/table.component.html b/src/app/components/table/table.component.html
index c5b12cb..955a759 100644
--- a/src/app/components/table/table.component.html
+++ b/src/app/components/table/table.component.html
@@ -198,10 +198,7 @@
             <div
               class="button-wrapper"
               *ngIf="element.newObject"
-              [matTooltip]="
-                'Nicht ausgefüllte Pflichtfelder (rot): ' +
-                countUnvalidFields(element)
-              "
+              [matTooltip]="(countUnvalidFields(element) > 0) ? ('Nicht ausgefüllte Pflichtfelder (rot): ' + countUnvalidFields(element)) : 'Erstellen'"
             >
               <button
                 mat-icon-button
diff --git a/src/app/components/table/table.component.ts b/src/app/components/table/table.component.ts
index 0e7a820..42d40f7 100644
--- a/src/app/components/table/table.component.ts
+++ b/src/app/components/table/table.component.ts
@@ -114,11 +114,18 @@ export class TableComponent {
       this.loadingRowIds = rowIds;
     });
 
+    this.dataService.successfullyCreatedRowWithId.subscribe(id => {
+      this.data.data = this.data.data.filter(row => row.id !== id);
+    })
+
     this.dataService.tableData.subscribe((newTableDataSource) => {
       this.reloadingTable = false;
       const tempDataSource = [];
+      if (newTableDataSource === null) {
+        return;  
+      }
+      this.isLoaded = true;
       for (const row of newTableDataSource) {
-        this.isLoaded = true;
         const oldRow = this.getRowById(row.id);
         /** make sure to not overwrite a row that is being edited */
         if (!oldRow) {
@@ -172,8 +179,8 @@ export class TableComponent {
         this.tableDataGQLCreateInputType,
         column.name
       );
-      column.requiredForCreation = typeInformation.isRequired;
-      column.acceptedForCreation = typeInformation.isPartOfType;
+      column.requiredForCreation = column.requiredForCreation || typeInformation.isRequired;
+      column.acceptedForCreation = column.acceptedForCreation || typeInformation.isPartOfType;
     }
   }
 
@@ -249,7 +256,7 @@ export class TableComponent {
       this.tableDataGQLCreateInputType,
       deepen(row)
     );
-    this.createEvent.emit(newRow);
+    this.createEvent.emit({currentId: row.id, row: newRow});
   }
 
   lock(row: any) {
diff --git a/src/app/graphqlOperations/equipmentType.graphql b/src/app/graphqlOperations/equipmentType.graphql
new file mode 100644
index 0000000..9b144dd
--- /dev/null
+++ b/src/app/graphqlOperations/equipmentType.graphql
@@ -0,0 +1,33 @@
+query GetEquipmentTypes {
+  equipmentTypes {
+    ...EquipmentTypeFields
+  }
+}
+
+mutation CreateEquipmentType($equipmentType: EquipmentTypeCreateInput!) {
+  createEquipmentType(equipmentType: $equipmentType) {
+    ...EquipmentTypeFields
+  }
+}
+
+mutation UpdateEquipmentType($equipmentType: EquipmentTypeUpdateInput!) {
+  updateEquipmentType(equipmentType: $equipmentType) {
+    ...EquipmentTypeFields
+  }
+}
+
+mutation LockEquipmentType($id: ID!) {
+  lockEquipmentType(id: $id) {
+    ...EquipmentTypeFields
+  }
+}
+
+mutation UnlockEquipmentType($id: ID!) {
+  unlockEquipmentType(id: $id) {
+    ...EquipmentTypeFields
+  }
+}
+
+mutation DeleteEquipmentType($id: ID!) {
+  deleteEquipmentType(id: $id)
+}
diff --git a/src/app/graphqlOperations/fragments/bike.graphql b/src/app/graphqlOperations/fragments/bike.graphql
index 1b971c3..a05e1bb 100644
--- a/src/app/graphqlOperations/fragments/bike.graphql
+++ b/src/app/graphqlOperations/fragments/bike.graphql
@@ -82,7 +82,7 @@ equipment {
   ...EquipmentFieldsForBikePage
 }
 equipmentType {
- ...EquipmentTypeFieldsForBikePage 
+ ...EquipmentTypeFields
 }
 engagement {
   ...EngagementFieldsForBikePage
diff --git a/src/app/graphqlOperations/fragments/equipmentType.graphql b/src/app/graphqlOperations/fragments/equipmentType.graphql
index ac6b084..e8dc6b4 100644
--- a/src/app/graphqlOperations/fragments/equipmentType.graphql
+++ b/src/app/graphqlOperations/fragments/equipmentType.graphql
@@ -1,4 +1,4 @@
-fragment EquipmentTypeFieldsForBikePage on EquipmentType {
+fragment EquipmentTypeFields on EquipmentType {
   id
   name
   description
diff --git a/src/app/pages/tables/bikes/bikes.component.ts b/src/app/pages/tables/bikes/bikes.component.ts
index c27af9c..9b5e86c 100644
--- a/src/app/pages/tables/bikes/bikes.component.ts
+++ b/src/app/pages/tables/bikes/bikes.component.ts
@@ -1,18 +1,12 @@
-import { SelectionModel } from '@angular/cdk/collections';
-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';
-import { deepen } from 'src/app/helperFunctions/deepenObject';
-import { SchemaService } from 'src/app/services/schema.service';
-import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { Component, OnInit } from '@angular/core';
+import { BikesService } from 'src/app/services/bikes.service';
 
 @Component({
   selector: 'app-bikes',
   templateUrl: './bikes.component.html',
   styleUrls: ['./bikes.component.scss'],
 })
-export class BikesComponent {
+export class BikesComponent implements OnInit {
   columnInfo = [
     {
       name: 'name',
@@ -124,8 +118,8 @@ export class BikesComponent {
     this.dataService = this.bikesService;
   }
 
-  create(row: any) {
-    this.bikesService.createBike({ bike: row });
+  create(object: {currentId: string, row: any}) {
+    this.bikesService.createBike(object.currentId, { bike: object.row });
   }
 
   lock(row: any) {
diff --git a/src/app/pages/tables/engagement-types/engagement-types.component.html b/src/app/pages/tables/engagement-types/engagement-types.component.html
new file mode 100644
index 0000000..2a2a662
--- /dev/null
+++ b/src/app/pages/tables/engagement-types/engagement-types.component.html
@@ -0,0 +1 @@
+<p>engagement-types works!</p>
diff --git a/src/app/pages/tables/engagement-types/engagement-types.component.scss b/src/app/pages/tables/engagement-types/engagement-types.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/tables/engagement-types/engagement-types.component.spec.ts b/src/app/pages/tables/engagement-types/engagement-types.component.spec.ts
new file mode 100644
index 0000000..27ddbdd
--- /dev/null
+++ b/src/app/pages/tables/engagement-types/engagement-types.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EngagementTypesComponent } from './engagement-types.component';
+
+describe('EngagementTypesComponent', () => {
+  let component: EngagementTypesComponent;
+  let fixture: ComponentFixture<EngagementTypesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EngagementTypesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EngagementTypesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/tables/engagement-types/engagement-types.component.ts b/src/app/pages/tables/engagement-types/engagement-types.component.ts
new file mode 100644
index 0000000..bb213fc
--- /dev/null
+++ b/src/app/pages/tables/engagement-types/engagement-types.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-engagement-types',
+  templateUrl: './engagement-types.component.html',
+  styleUrls: ['./engagement-types.component.scss']
+})
+export class EngagementTypesComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/pages/tables/equipment-types/equipment-types.component.html b/src/app/pages/tables/equipment-types/equipment-types.component.html
new file mode 100644
index 0000000..327d791
--- /dev/null
+++ b/src/app/pages/tables/equipment-types/equipment-types.component.html
@@ -0,0 +1,12 @@
+<app-table
+  [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>
\ No newline at end of file
diff --git a/src/app/pages/tables/equipment-types/equipment-types.component.scss b/src/app/pages/tables/equipment-types/equipment-types.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/tables/equipment-types/equipment-types.component.ts b/src/app/pages/tables/equipment-types/equipment-types.component.ts
new file mode 100644
index 0000000..500fead
--- /dev/null
+++ b/src/app/pages/tables/equipment-types/equipment-types.component.ts
@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+import {EquipmentTypeService} from 'src/app/services/equipmentType.service'
+
+@Component({
+  selector: 'app-equipment-types',
+  templateUrl: './equipment-types.component.html',
+  styleUrls: ['./equipment-types.component.scss']
+})
+export class EquipmentTypesComponent implements OnInit {
+  columnInfo = [
+    { name: 'id', translation: 'ID', readonly: true },
+    { name: 'name', translation: 'Name', requiredForCreation: true },
+    { name: 'description', translation: 'Beschreibung' },
+  ];
+
+  dataService: EquipmentTypeService;
+
+  tableDataGQLType: string = 'EquipmentType';
+  tableDataGQLCreateInputType: string = 'EquipmentTypeCreateInput';
+  tableDataGQLUpdateInputType: string = 'EquipmentTypeUpdateInput';
+
+  loadingRowIds: string[] = [];
+  constructor(
+    private service: EquipmentTypeService
+  ) {}
+
+  ngOnInit() {
+    this.dataService = this.service;
+  }
+
+  create(value: {currentId: string, row: any}) {
+    this.dataService.create(value.currentId, { equipmentType: value.row });
+  }
+
+  lock(row: any) {
+    this.dataService.lock({ id: row.id });
+  }
+
+  save(row: any) {
+    this.dataService.update({ equipmentType: row });
+  }
+
+  cancel(row: any) {
+    this.dataService.unlock({ id: row.id });
+  }
+
+  delete(row: any) {
+    this.dataService.delete({ id: row.id });
+  }
+}
\ No newline at end of file
diff --git a/src/app/pages/tables/workshops/workshops.component.html b/src/app/pages/tables/workshops/workshops.component.html
new file mode 100644
index 0000000..d0e6442
--- /dev/null
+++ b/src/app/pages/tables/workshops/workshops.component.html
@@ -0,0 +1 @@
+<p>workshops works!</p>
diff --git a/src/app/pages/tables/workshops/workshops.component.scss b/src/app/pages/tables/workshops/workshops.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/tables/workshops/workshops.component.spec.ts b/src/app/pages/tables/workshops/workshops.component.spec.ts
new file mode 100644
index 0000000..46e2e57
--- /dev/null
+++ b/src/app/pages/tables/workshops/workshops.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WorkshopsComponent } from './workshops.component';
+
+describe('WorkshopsComponent', () => {
+  let component: WorkshopsComponent;
+  let fixture: ComponentFixture<WorkshopsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WorkshopsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WorkshopsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/tables/workshops/workshops.component.ts b/src/app/pages/tables/workshops/workshops.component.ts
new file mode 100644
index 0000000..af08b35
--- /dev/null
+++ b/src/app/pages/tables/workshops/workshops.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-workshops',
+  templateUrl: './workshops.component.html',
+  styleUrls: ['./workshops.component.scss']
+})
+export class WorkshopsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/services/bikes.service.ts b/src/app/services/bikes.service.ts
index be38978..3211dff 100644
--- a/src/app/services/bikes.service.ts
+++ b/src/app/services/bikes.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, Subject } from 'rxjs';
 import {
   GetCargoBikesGQL,
   GetCargoBikesQuery,
@@ -30,9 +30,10 @@ export type CargoBikeResult = DeepExtractTypeSkipArrays<
 })
 export class BikesService {
   /** CargoBikes Array */
-  tableData: BehaviorSubject<CargoBikeResult[]> = new BehaviorSubject([]);
+  tableData: BehaviorSubject<CargoBikeResult[]> = new BehaviorSubject(null);
   loadingRowIds: BehaviorSubject<string[]> = new BehaviorSubject([]);
-  pageData: BehaviorSubject<any> = new BehaviorSubject([]);
+  successfullyCreatedRowWithId: Subject<string> = new Subject();
+  pageData: BehaviorSubject<any> = new BehaviorSubject(null);
   isLoadingPageData: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
   constructor(
@@ -60,6 +61,7 @@ export class BikesService {
   }
 
   loadTableData() {
+    this.tableData.next(null);
     this.getCargoBikesGQL.fetch().subscribe((result) => {
       this.tableData.next(result.data.cargoBikes);
     });
@@ -90,10 +92,11 @@ export class BikesService {
       });
   }
 
-  createBike(variables: CreateCargoBikeMutationVariables) {
+  createBike(currentId: string, variables: CreateCargoBikeMutationVariables) {
     this.createCargoBikeGQL.mutate(variables).subscribe((result) => {
       const newBike = result.data.createCargoBike;
       this.tableData.next([newBike, ...this.tableData.value]);
+      this.successfullyCreatedRowWithId.next(currentId);
     });
   }
 
diff --git a/src/app/services/equipmentType.service.ts b/src/app/services/equipmentType.service.ts
new file mode 100644
index 0000000..30a0dcc
--- /dev/null
+++ b/src/app/services/equipmentType.service.ts
@@ -0,0 +1,124 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Subject } from 'rxjs';
+import {
+  GetEquipmentTypesGQL,
+  GetEquipmentTypesQueryVariables,
+  CreateEquipmentTypeGQL,
+  CreateEquipmentTypeMutationVariables,
+  UpdateEquipmentTypeGQL,
+  UpdateEquipmentTypeMutationVariables,
+  LockEquipmentTypeGQL,
+  LockEquipmentTypeMutationVariables,
+  UnlockEquipmentTypeGQL,
+  UnlockEquipmentTypeMutationVariables,
+  DeleteEquipmentTypeGQL,
+  DeleteEquipmentTypeMutationVariables,
+} from '../../generated/graphql';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class EquipmentTypeService {
+  /** EquipmentTypes 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 getEquipmentTypesGQL: GetEquipmentTypesGQL,
+    private createEquipmentTypeGQL: CreateEquipmentTypeGQL,
+    private updateEquipmentTypeGQL: UpdateEquipmentTypeGQL,
+    private lockEquipmentTypeGQL: LockEquipmentTypeGQL,
+    private unlockEquipmentTypeGQL: UnlockEquipmentTypeGQL,
+    private deleteEquipmentTypeGQL: DeleteEquipmentTypeGQL,
+  ) {}
+
+  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.getEquipmentTypesGQL.fetch().subscribe((result) => {
+      this.tableData.next(result.data.equipmentTypes);
+    });
+  }
+
+  create(currentId: string, variables: CreateEquipmentTypeMutationVariables) {
+    this.createEquipmentTypeGQL.mutate(variables).subscribe((result) => {
+      const newRow = result.data.createEquipmentType;
+      this.tableData.next([newRow, ...this.tableData.value]);
+      this.successfullyCreatedRowWithId.next(currentId);
+    });
+  }
+
+  update(variables: UpdateEquipmentTypeMutationVariables) {
+    this.addLoadingRowId(variables.equipmentType.id);
+    this.updateEquipmentTypeGQL
+      .mutate(variables)
+      .subscribe((result) => {
+        this.updateDataRowFromResponse(result.data.updateEquipmentType);
+      })
+      .add(() => {
+        this.removeLoadingRowId(variables.equipmentType.id);
+      });
+  }
+
+  lock(variables: LockEquipmentTypeMutationVariables) {
+    this.addLoadingRowId(variables.id);
+    this.lockEquipmentTypeGQL
+      .mutate(variables)
+      .subscribe((result) => {
+        this.updateDataRowFromResponse(result.data.lockEquipmentType);
+      })
+      .add(() => {
+        this.removeLoadingRowId(variables.id);
+      });
+  }
+
+  unlock(variables: UnlockEquipmentTypeMutationVariables) {
+    this.addLoadingRowId(variables.id);
+    this.unlockEquipmentTypeGQL
+      .mutate(variables)
+      .subscribe((result) => {
+        this.updateDataRowFromResponse(result.data.unlockEquipmentType);
+      })
+      .add(() => {
+        this.removeLoadingRowId(variables.id);
+      });
+  }
+
+  delete(variables: DeleteEquipmentTypeMutationVariables) {
+    this.addLoadingRowId(variables.id);
+    this.deleteEquipmentTypeGQL
+      .mutate(variables)
+      .subscribe((result) => {
+        if (result.data.deleteEquipmentType) {
+          this.tableData.next(
+            [...this.tableData.value].filter((bike) => bike.id !== variables.id)
+          );
+        }
+      })
+      .add(() => {
+        this.removeLoadingRowId(variables.id);
+      });
+  }
+
+  private updateDataRowFromResponse(rowFromResponse: any) {
+    const newTableData = this.tableData.value.map((row) =>
+      rowFromResponse.id === row.id ? rowFromResponse : row
+    );
+    this.tableData.next(newTableData);
+  }
+}
diff --git a/src/generated/graphql.ts b/src/generated/graphql.ts
index 240644c..4ce2fbf 100644
--- a/src/generated/graphql.ts
+++ b/src/generated/graphql.ts
@@ -1823,6 +1823,79 @@ export type DeleteCargoBikeMutation = (
   & Pick<Mutation, 'deleteCargoBike'>
 );
 
+export type GetEquipmentTypesQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type GetEquipmentTypesQuery = (
+  { __typename?: 'Query' }
+  & { equipmentTypes: Array<(
+    { __typename?: 'EquipmentType' }
+    & EquipmentTypeFieldsFragment
+  )> }
+);
+
+export type CreateEquipmentTypeMutationVariables = Exact<{
+  equipmentType: EquipmentTypeCreateInput;
+}>;
+
+
+export type CreateEquipmentTypeMutation = (
+  { __typename?: 'Mutation' }
+  & { createEquipmentType: (
+    { __typename?: 'EquipmentType' }
+    & EquipmentTypeFieldsFragment
+  ) }
+);
+
+export type UpdateEquipmentTypeMutationVariables = Exact<{
+  equipmentType: EquipmentTypeUpdateInput;
+}>;
+
+
+export type UpdateEquipmentTypeMutation = (
+  { __typename?: 'Mutation' }
+  & { updateEquipmentType: (
+    { __typename?: 'EquipmentType' }
+    & EquipmentTypeFieldsFragment
+  ) }
+);
+
+export type LockEquipmentTypeMutationVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type LockEquipmentTypeMutation = (
+  { __typename?: 'Mutation' }
+  & { lockEquipmentType: (
+    { __typename?: 'EquipmentType' }
+    & EquipmentTypeFieldsFragment
+  ) }
+);
+
+export type UnlockEquipmentTypeMutationVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type UnlockEquipmentTypeMutation = (
+  { __typename?: 'Mutation' }
+  & { unlockEquipmentType: (
+    { __typename?: 'EquipmentType' }
+    & EquipmentTypeFieldsFragment
+  ) }
+);
+
+export type DeleteEquipmentTypeMutationVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type DeleteEquipmentTypeMutation = (
+  { __typename?: 'Mutation' }
+  & Pick<Mutation, 'deleteEquipmentType'>
+);
+
 export type AddressFieldsFragment = (
   { __typename?: 'Address' }
   & Pick<Address, 'street' | 'number' | 'zip'>
@@ -1865,7 +1938,7 @@ export type CargoBikeFieldsForPageFragment = (
     & EquipmentFieldsForBikePageFragment
   )>>>, equipmentType?: Maybe<Array<Maybe<(
     { __typename?: 'EquipmentType' }
-    & EquipmentTypeFieldsForBikePageFragment
+    & EquipmentTypeFieldsFragment
   )>>>, engagement?: Maybe<Array<Maybe<(
     { __typename?: 'Engagement' }
     & EngagementFieldsForBikePageFragment
@@ -1928,7 +2001,7 @@ export type EquipmentFieldsForBikePageFragment = (
   & Pick<Equipment, 'id' | 'serialNo' | 'title' | 'description' | 'isLocked' | 'isLockedByMe' | 'lockedBy' | 'lockedUntil'>
 );
 
-export type EquipmentTypeFieldsForBikePageFragment = (
+export type EquipmentTypeFieldsFragment = (
   { __typename?: 'EquipmentType' }
   & Pick<EquipmentType, 'id' | 'name' | 'description' | 'isLocked' | 'isLockedByMe' | 'lockedBy' | 'lockedUntil'>
 );
@@ -2218,8 +2291,8 @@ export const EquipmentFieldsForBikePageFragmentDoc = gql`
   lockedUntil
 }
     `;
-export const EquipmentTypeFieldsForBikePageFragmentDoc = gql`
-    fragment EquipmentTypeFieldsForBikePage on EquipmentType {
+export const EquipmentTypeFieldsFragmentDoc = gql`
+    fragment EquipmentTypeFields on EquipmentType {
   id
   name
   description
@@ -2283,7 +2356,7 @@ export const CargoBikeFieldsForPageFragmentDoc = gql`
     ...EquipmentFieldsForBikePage
   }
   equipmentType {
-    ...EquipmentTypeFieldsForBikePage
+    ...EquipmentTypeFields
   }
   engagement {
     ...EngagementFieldsForBikePage
@@ -2298,7 +2371,7 @@ export const CargoBikeFieldsForPageFragmentDoc = gql`
     ${CargoBikeFieldsForTableFragmentDoc}
 ${BikeEventFieldsForBikePageFragmentDoc}
 ${EquipmentFieldsForBikePageFragmentDoc}
-${EquipmentTypeFieldsForBikePageFragmentDoc}
+${EquipmentTypeFieldsFragmentDoc}
 ${EngagementFieldsForBikePageFragmentDoc}
 ${TimeFrameFieldsForBikePageFragmentDoc}`;
 export const GetCargoBikesDocument = gql`
@@ -2439,6 +2512,112 @@ export const DeleteCargoBikeDocument = gql`
   export class DeleteCargoBikeGQL extends Apollo.Mutation<DeleteCargoBikeMutation, DeleteCargoBikeMutationVariables> {
     document = DeleteCargoBikeDocument;
     
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
+export const GetEquipmentTypesDocument = gql`
+    query GetEquipmentTypes {
+  equipmentTypes {
+    ...EquipmentTypeFields
+  }
+}
+    ${EquipmentTypeFieldsFragmentDoc}`;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class GetEquipmentTypesGQL extends Apollo.Query<GetEquipmentTypesQuery, GetEquipmentTypesQueryVariables> {
+    document = GetEquipmentTypesDocument;
+    
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
+export const CreateEquipmentTypeDocument = gql`
+    mutation CreateEquipmentType($equipmentType: EquipmentTypeCreateInput!) {
+  createEquipmentType(equipmentType: $equipmentType) {
+    ...EquipmentTypeFields
+  }
+}
+    ${EquipmentTypeFieldsFragmentDoc}`;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class CreateEquipmentTypeGQL extends Apollo.Mutation<CreateEquipmentTypeMutation, CreateEquipmentTypeMutationVariables> {
+    document = CreateEquipmentTypeDocument;
+    
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
+export const UpdateEquipmentTypeDocument = gql`
+    mutation UpdateEquipmentType($equipmentType: EquipmentTypeUpdateInput!) {
+  updateEquipmentType(equipmentType: $equipmentType) {
+    ...EquipmentTypeFields
+  }
+}
+    ${EquipmentTypeFieldsFragmentDoc}`;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class UpdateEquipmentTypeGQL extends Apollo.Mutation<UpdateEquipmentTypeMutation, UpdateEquipmentTypeMutationVariables> {
+    document = UpdateEquipmentTypeDocument;
+    
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
+export const LockEquipmentTypeDocument = gql`
+    mutation LockEquipmentType($id: ID!) {
+  lockEquipmentType(id: $id) {
+    ...EquipmentTypeFields
+  }
+}
+    ${EquipmentTypeFieldsFragmentDoc}`;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class LockEquipmentTypeGQL extends Apollo.Mutation<LockEquipmentTypeMutation, LockEquipmentTypeMutationVariables> {
+    document = LockEquipmentTypeDocument;
+    
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
+export const UnlockEquipmentTypeDocument = gql`
+    mutation UnlockEquipmentType($id: ID!) {
+  unlockEquipmentType(id: $id) {
+    ...EquipmentTypeFields
+  }
+}
+    ${EquipmentTypeFieldsFragmentDoc}`;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class UnlockEquipmentTypeGQL extends Apollo.Mutation<UnlockEquipmentTypeMutation, UnlockEquipmentTypeMutationVariables> {
+    document = UnlockEquipmentTypeDocument;
+    
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
+export const DeleteEquipmentTypeDocument = gql`
+    mutation DeleteEquipmentType($id: ID!) {
+  deleteEquipmentType(id: $id)
+}
+    `;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class DeleteEquipmentTypeGQL extends Apollo.Mutation<DeleteEquipmentTypeMutation, DeleteEquipmentTypeMutationVariables> {
+    document = DeleteEquipmentTypeDocument;
+    
     constructor(apollo: Apollo.Apollo) {
       super(apollo);
     }