Add cell types

src/app/app.module.ts

@@ -22,6 +22,8 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import {MatCardModule} from '@angular/material/card';
 import {MatGridListModule} from '@angular/material/grid-list';
 import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatSelectModule} from '@angular/material/select';
+
 
 
 import { AppRoutingModule } from './app-routing.module';
@@ -72,7 +74,8 @@ import { NavService }from './components/menu-list-item/nav.service';
     MatCheckboxModule,
     GraphQLModule,
     DragDropModule,
-    MatTooltipModule
+    MatTooltipModule,
+    MatSelectModule,
   ],
   providers: [NavService],
   bootstrap: [AppComponent],

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

@@ -1,6 +1,35 @@
+<div #booleanInputType *ngIf="inputType == 'boolean'">
+  <mat-checkbox
+    class="checkbox"
+    [disabled]="!editable"
+    [ngModel]="value"
+    (ngModelChange)="change($event)"
+  ></mat-checkbox>
+</div>
+
+<div #enumInputType *ngIf="inputType == 'enum'">
   <mat-form-field *ngIf="editable; else nonEditableText">
-  <input matInput [type]="inputType" [ngModel]="value" (ngModelChange)="change($event)"/>
+    <mat-select [(ngModel)]="value" (ngModelChange)="change($event)">
+      <mat-option *ngFor="let option of enumValues" [value]="option">
+        {{ option }}
+      </mat-option>
+    </mat-select>
   </mat-form-field>
   <ng-template #nonEditableText>
     {{ value }}
   </ng-template>
+</div>
+
+<div #otherInputType *ngIf="inputType != 'enum' && inputType != 'boolean'">
+  <mat-form-field *ngIf="editable; else nonEditableText">
+    <input
+      matInput
+      [type]="inputType"
+      [ngModel]="value"
+      (ngModelChange)="change($event)"
+    />
+  </mat-form-field>
+  <ng-template #nonEditableText>
+    {{ value }}
+  </ng-template>
+</div>

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

@@ -0,0 +1,4 @@
+::ng-deep.mat-form-field-infix {
+    width: auto !important;
+    min-width: 50px !important;
+}

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

@@ -8,12 +8,14 @@ import { catchError } from 'rxjs/operators';
 })
 export class CellComponent {
   @Input()
-  value: number | string;
-  @Output() valueChange = new EventEmitter<number | string>();
+  value: number | string | boolean;
+  @Output() valueChange = new EventEmitter<number | string | boolean>();
   @Input()
   editable = false;
   @Input()
   inputType = 'text';
+  @Input()
+  enumValues: string[] = [];
 
   change(newValue) {
     this.value = this.inputType === 'number' ? +newValue : newValue;

src/app/graphqlOperations/bikes.graphql

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

src/app/graphqlOperations/fragments/bikeFragment.graphql

@@ -57,9 +57,6 @@ fragment CargoBikeFieldsMutable on CargoBike {
     projectAllowance
     notes
   }
-  lendingStation {
-    ...LendingStationFieldsGeneral
-  }
   taxes {
     costCenter
     organisationArea
@@ -71,6 +68,9 @@ fragment CargoBikeFields on CargoBike {
   provider {
     ...ProviderFieldsGeneral
   }
+  lendingStation {
+    ...LendingStationFieldsGeneral
+  }
   isLocked
   isLockedByMe
   lockedBy

src/app/graphqlOperations/fragments/introspection.graphql

@@ -0,0 +1,8 @@
+fragment Introspection on Query {
+  __type(name: "Group") {
+    name
+    enumValues {
+      name
+    }
+  }
+}

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

@@ -64,6 +64,21 @@
         <td mat-cell *matCellDef="let element">{{ element.id }}</td>
       </ng-container>
 
+      <!-- Group Column -->
+      <ng-container matColumnDef="group">
+        <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header>
+          Gruppe
+        </th>
+        <td mat-cell *matCellDef="let element">
+          <app-cell
+            [editable]="element.isLockedByMe"
+            [(value)]="element.group"
+            inputType="enum"
+            [(enumValues)]="groupEnum"
+          ></app-cell>
+        </td>
+      </ng-container>
+
       <!-- FrameNumber Column -->
       <ng-container matColumnDef="frameNumber">
         <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header>
@@ -77,6 +92,20 @@
         </td>
       </ng-container>
 
+      <!-- ForChildren Column -->
+      <ng-container matColumnDef="forChildren">
+        <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header>
+          Für Kinder
+        </th>
+        <td mat-cell *matCellDef="let element">
+          <app-cell
+            [editable]="element.isLockedByMe"
+            [(value)]="element.forChildren"
+            inputType="boolean"
+          ></app-cell>
+        </td>
+      </ng-container>
+
       <!-- NumberOfChildren Column -->
       <ng-container matColumnDef="numberOfChildren">
         <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header>
@@ -105,6 +134,20 @@
         </td>
       </ng-container>
 
+      <!-- ForCargo Column -->
+      <ng-container matColumnDef="forCargo">
+        <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header>
+          Für Lasten
+        </th>
+        <td mat-cell *matCellDef="let element">
+          <app-cell
+            [editable]="element.isLockedByMe"
+            [(value)]="element.forCargo"
+            inputType="boolean"
+          ></app-cell>
+        </td>
+      </ng-container>
+
       <!-- Buttons Column -->
       <ng-container matColumnDef="buttons" stickyEnd>
         <th mat-header-cell *matHeaderCellDef></th>

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

@@ -25,13 +25,17 @@ export class BikesComponent {
     'select',
     'name',
     'id',
+    'group',
     'frameNumber',
+    'forChildren',
     'numberOfChildren',
     'numberOfWheels',
+    'forCargo',
     'buttons',
   ];
 
   bikes = <Array<any>>[];
+  groupEnum: string[] = [];
   selection = new SelectionModel<CargoBikeDataRow>(true, []);
 
   reloadingTable = false;
@@ -40,6 +44,10 @@ export class BikesComponent {
   relockingDuration = 1000 * 60 * 1;
 
   constructor(private bikesService: BikesService) {
+    bikesService.groupEnum.subscribe(groupEnum => {
+      this.groupEnum = groupEnum;
+    })
+
     bikesService.bikes.subscribe((bikes) => {
       this.reloadingTable = false;
       this.bikes = bikes.map((bike) => {
@@ -68,7 +76,6 @@ export class BikesComponent {
   }
 
   reloadTable() {
-    console.log("reload")
     this.reloadingTable = true;
     this.bikesService.loadBikes();
   }

src/app/services/bikes.service.ts

@@ -24,6 +24,7 @@ export type CargoBikeResult = DeepExtractTypeSkipArrays<
 })
 export class BikesService {
   bikes: BehaviorSubject<CargoBikeResult[]> = new BehaviorSubject([]);
+  groupEnum: BehaviorSubject<string[]> = new BehaviorSubject<string[]>([]);
 
   constructor(
     private getCargoBikesGQL: GetCargoBikesGQL,
@@ -36,6 +37,8 @@ export class BikesService {
   loadBikes() {
     this.getCargoBikesGQL.fetch().subscribe((result) => {
       this.bikes.next(result.data.cargoBikes);
+      let enumValues = result.data.__type.enumValues.map(value => value.name);
+      this.groupEnum.next(enumValues);
     });
   }
 
@@ -72,7 +75,7 @@ export class BikesService {
     })
   }
 
-  unlockBike(variables: LockCargoBikeMutationVariables) {
+  unlockBike(variables: UnlockCargoBikeMutationVariables) {
     this.unlockCargoBikeGQL.mutate(variables).subscribe((result) => {
       const unlockedBike = result.data.unlockCargoBike;
       this.bikes.next(

src/generated/graphql.ts

@@ -1668,6 +1668,95 @@ export enum CacheControlScope {
 }
 
 
+/**
+ * The fundamental unit of any GraphQL Schema is the type. There are many kinds of types in GraphQL as represented by the `__TypeKind` enum.
+ * 
+ * Depending on the kind of a type, certain fields describe information about that type. Scalar types provide no information beyond a name, description and optional `specifiedByUrl`, while Enum types provide their values. Object and Interface types provide the fields they describe. Abstract types, Union and Interface, provide the Object types possible at runtime. List and NonNull types compose other types.
+ */
+export type __Type = {
+  __typename?: '__Type';
+  kind: __TypeKind;
+  name?: Maybe<Scalars['String']>;
+  description?: Maybe<Scalars['String']>;
+  specifiedByUrl?: Maybe<Scalars['String']>;
+  fields?: Maybe<Array<__Field>>;
+  interfaces?: Maybe<Array<__Type>>;
+  possibleTypes?: Maybe<Array<__Type>>;
+  enumValues?: Maybe<Array<__EnumValue>>;
+  inputFields?: Maybe<Array<__InputValue>>;
+  ofType?: Maybe<__Type>;
+};
+
+
+/**
+ * The fundamental unit of any GraphQL Schema is the type. There are many kinds of types in GraphQL as represented by the `__TypeKind` enum.
+ * 
+ * Depending on the kind of a type, certain fields describe information about that type. Scalar types provide no information beyond a name, description and optional `specifiedByUrl`, while Enum types provide their values. Object and Interface types provide the fields they describe. Abstract types, Union and Interface, provide the Object types possible at runtime. List and NonNull types compose other types.
+ */
+export type __TypeFieldsArgs = {
+  includeDeprecated?: Maybe<Scalars['Boolean']>;
+};
+
+
+/**
+ * The fundamental unit of any GraphQL Schema is the type. There are many kinds of types in GraphQL as represented by the `__TypeKind` enum.
+ * 
+ * Depending on the kind of a type, certain fields describe information about that type. Scalar types provide no information beyond a name, description and optional `specifiedByUrl`, while Enum types provide their values. Object and Interface types provide the fields they describe. Abstract types, Union and Interface, provide the Object types possible at runtime. List and NonNull types compose other types.
+ */
+export type __TypeEnumValuesArgs = {
+  includeDeprecated?: Maybe<Scalars['Boolean']>;
+};
+
+/** An enum describing what kind of type a given `__Type` is. */
+export enum __TypeKind {
+  /** Indicates this type is a scalar. */
+  Scalar = 'SCALAR',
+  /** Indicates this type is an object. `fields` and `interfaces` are valid fields. */
+  Object = 'OBJECT',
+  /** Indicates this type is an interface. `fields`, `interfaces`, and `possibleTypes` are valid fields. */
+  Interface = 'INTERFACE',
+  /** Indicates this type is a union. `possibleTypes` is a valid field. */
+  Union = 'UNION',
+  /** Indicates this type is an enum. `enumValues` is a valid field. */
+  Enum = 'ENUM',
+  /** Indicates this type is an input object. `inputFields` is a valid field. */
+  InputObject = 'INPUT_OBJECT',
+  /** Indicates this type is a list. `ofType` is a valid field. */
+  List = 'LIST',
+  /** Indicates this type is a non-null. `ofType` is a valid field. */
+  NonNull = 'NON_NULL'
+}
+
+/** Object and Interface types are described by a list of Fields, each of which has a name, potentially a list of arguments, and a return type. */
+export type __Field = {
+  __typename?: '__Field';
+  name: Scalars['String'];
+  description?: Maybe<Scalars['String']>;
+  args: Array<__InputValue>;
+  type: __Type;
+  isDeprecated: Scalars['Boolean'];
+  deprecationReason?: Maybe<Scalars['String']>;
+};
+
+/** Arguments provided to Fields or Directives and the input fields of an InputObject are represented as Input Values which describe their type and optionally a default value. */
+export type __InputValue = {
+  __typename?: '__InputValue';
+  name: Scalars['String'];
+  description?: Maybe<Scalars['String']>;
+  type: __Type;
+  /** A GraphQL-formatted string representing the default value for this input value. */
+  defaultValue?: Maybe<Scalars['String']>;
+};
+
+/** One possible value for a given Enum. Enum values are unique values, not a placeholder for a string or numeric value. However an Enum value is returned in a JSON response as a string. */
+export type __EnumValue = {
+  __typename?: '__EnumValue';
+  name: Scalars['String'];
+  description?: Maybe<Scalars['String']>;
+  isDeprecated: Scalars['Boolean'];
+  deprecationReason?: Maybe<Scalars['String']>;
+};
+
 export type GetCargoBikeByIdQueryVariables = Exact<{
   id: Scalars['ID'];
 }>;
@@ -1729,6 +1818,7 @@ export type GetCargoBikesQuery = (
     { __typename?: 'CargoBike' }
     & CargoBikeFieldsFragment
   )>> }
+  & IntrospectionFragment
 );
 
 export type BikeEventFieldsFragment = (
@@ -1758,9 +1848,6 @@ export type CargoBikeFieldsMutableFragment = (
   ), technicalEquipment?: Maybe<(
     { __typename?: 'TechnicalEquipment' }
     & Pick<TechnicalEquipment, 'bicycleShift' | 'isEBike' | 'hasLightSystem' | 'specialFeatures'>
-  )>, lendingStation?: Maybe<(
-    { __typename?: 'LendingStation' }
-    & LendingStationFieldsGeneralFragment
   )>, taxes?: Maybe<(
     { __typename?: 'Taxes' }
     & Pick<Taxes, 'costCenter' | 'organisationArea'>
@@ -1773,10 +1860,25 @@ export type CargoBikeFieldsFragment = (
   & { provider?: Maybe<(
     { __typename?: 'Provider' }
     & ProviderFieldsGeneralFragment
+  )>, lendingStation?: Maybe<(
+    { __typename?: 'LendingStation' }
+    & LendingStationFieldsGeneralFragment
   )> }
   & CargoBikeFieldsMutableFragment
 );
 
+export type IntrospectionFragment = (
+  { __typename?: 'Query' }
+  & { __type?: Maybe<(
+    { __typename?: '__Type' }
+    & Pick<__Type, 'name'>
+    & { enumValues?: Maybe<Array<(
+      { __typename?: '__EnumValue' }
+      & Pick<__EnumValue, 'name'>
+    )>> }
+  )> }
+);
+
 export type LendingStationFieldsGeneralFragment = (
   { __typename?: 'LendingStation' }
   & Pick<LendingStation, 'id' | 'name'>
@@ -1818,17 +1920,6 @@ export const BikeEventFieldsFragmentDoc = gql`
   }
 }
     `;
-export const LendingStationFieldsGeneralFragmentDoc = gql`
-    fragment LendingStationFieldsGeneral on LendingStation {
-  id
-  name
-  address {
-    number
-    street
-    zip
-  }
-}
-    `;
 export const CargoBikeFieldsMutableFragmentDoc = gql`
     fragment CargoBikeFieldsMutable on CargoBike {
   id
@@ -1908,15 +1999,12 @@ export const CargoBikeFieldsMutableFragmentDoc = gql`
     projectAllowance
     notes
   }
-  lendingStation {
-    ...LendingStationFieldsGeneral
-  }
   taxes {
     costCenter
     organisationArea
   }
 }
-    ${LendingStationFieldsGeneralFragmentDoc}`;
+    `;
 export const ProviderFieldsGeneralFragmentDoc = gql`
     fragment ProviderFieldsGeneral on Provider {
   id
@@ -1934,19 +2022,44 @@ export const ProviderFieldsGeneralFragmentDoc = gql`
   }
 }
     `;
+export const LendingStationFieldsGeneralFragmentDoc = gql`
+    fragment LendingStationFieldsGeneral on LendingStation {
+  id
+  name
+  address {
+    number
+    street
+    zip
+  }
+}
+    `;
 export const CargoBikeFieldsFragmentDoc = gql`
     fragment CargoBikeFields on CargoBike {
   ...CargoBikeFieldsMutable
   provider {
     ...ProviderFieldsGeneral
   }
+  lendingStation {
+    ...LendingStationFieldsGeneral
+  }
   isLocked
   isLockedByMe
   lockedBy
   lockedUntil
 }
     ${CargoBikeFieldsMutableFragmentDoc}
-${ProviderFieldsGeneralFragmentDoc}`;
+${ProviderFieldsGeneralFragmentDoc}
+${LendingStationFieldsGeneralFragmentDoc}`;
+export const IntrospectionFragmentDoc = gql`
+    fragment Introspection on Query {
+  __type(name: "Group") {
+    name
+    enumValues {
+      name
+    }
+  }
+}
+    `;
 export const GetCargoBikeByIdDocument = gql`
     query GetCargoBikeById($id: ID!) {
   cargoBikeById(id: $id) {
@@ -2021,10 +2134,12 @@ export const UnlockCargoBikeDocument = gql`
   }
 export const GetCargoBikesDocument = gql`
     query GetCargoBikes {
+  ...Introspection
   cargoBikes(limit: 100, offset: 0) {
     ...CargoBikeFields
   }
 }
+    ${IntrospectionFragmentDoc}
 ${CargoBikeFieldsFragmentDoc}`;
 
   @Injectable({