Merge remote-tracking branch 'origin/master'

package-lock.json

@@ -730,6 +730,14 @@
         "tslib": "^2.0.0"
       }
     },
+    "@angular/flex-layout": {
+      "version": "11.0.0-beta.33",
+      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-11.0.0-beta.33.tgz",
+      "integrity": "sha512-unfhw3abZuKtdwQicRStHCYGbANPTHYg4WNRQk/RC5Mxq+4WOp4Q8HI7GqRHCGUYDCGUP7w1sU/oDt8f09nM8w==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@angular/forms": {
       "version": "10.0.14",
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-10.0.14.tgz",

package.json

@@ -18,6 +18,7 @@
     "@angular/common": "~10.0.14",
     "@angular/compiler": "~10.0.14",
     "@angular/core": "~10.0.14",
+    "@angular/flex-layout": "^11.0.0-beta.33",
     "@angular/forms": "~10.0.14",
     "@angular/localize": "^10.2.3",
     "@angular/material": "^10.2.7",

src/app/app.component.ts

@@ -22,14 +22,10 @@ export class AppComponent {
 
 
   navItems: NavItem[] = [
-    {
-      displayName: 'Tabellenübersicht  ',
-      iconName: 'recent_actors',
-      route: 'tableOverview'
-    },
     {
       displayName: 'Tabellen',
       iconName: 'recent_actors',
+      route: 'tableOverview',
       children: [
         {
           displayName: 'Lastenräder',

src/app/app.module.ts

@@ -4,6 +4,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 
 import { DragDropModule } from '@angular/cdk/drag-drop';
+import { FlexLayoutModule } from '@angular/flex-layout';
 
 // Angular Material Components
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -58,6 +59,7 @@ import { TokenInterceptor } from './helper/token.interceptor'
     AppRoutingModule,
     BrowserAnimationsModule,
     FormsModule,
+    FlexLayoutModule,
     ReactiveFormsModule,
     MatToolbarModule,
     MatButtonModule,

src/app/components/menu-list-item/menu-list-item.component.html

@@ -1,16 +1,15 @@
-<a mat-list-item [ngStyle]="{'padding-left': (depth * 12) + 'px'}" (click)="onItemSelected(item)"
-   [ngClass]="{'active': item.route ? router.isActive(item.route, true): false, 'expanded': expanded}"
-   class="menu-list-item">
-  <mat-icon class="routeIcon">{{item.iconName}}</mat-icon>
-  {{item.displayName}}
-  <span fxFlex *ngIf="item.children && item.children.length">
-    <span fxFlex></span>
-    <mat-icon [@indicatorRotate]="expanded ? 'expanded': 'collapsed'">
-      expand_more
-    </mat-icon>
+<a mat-list-item [ngStyle]="{'padding-left': (depth * 12) + 'px'}" [ngClass]="{'active': item.route ? router.isActive(item.route, true): false, 'expanded': expanded}" class="menu-list-item">
+  <span (click)="onItemSelected(item)">
+      <mat-icon class="routeIcon">{{item.iconName}}</mat-icon>
+      {{item.displayName}}
+  </span>
+  <span fxFlex *ngIf="item.children && item.children.length" (click)="expand(item)">
+      <span fxFlex></span>
+      <mat-icon [@indicatorRotate]="expanded ? 'expanded': 'collapsed'">
+          expand_more
+      </mat-icon>
   </span>
 </a>
 <div *ngIf="expanded">
-  <app-menu-list-item *ngFor="let child of item.children" [item]="child" [depth]="depth+1">
-  </app-menu-list-item>
+  <app-menu-list-item *ngFor="let child of item.children" [item]="child" [depth]="depth+1"> </app-menu-list-item>
 </div>

src/app/components/menu-list-item/menu-list-item.component.scss

@@ -26,3 +26,8 @@
     margin-right: 40px;
   }
 }
+
+span {
+  display: inline-flex;
+  vertical-align: middle;
+}

src/app/components/menu-list-item/menu-list-item.component.ts

@@ -43,12 +43,19 @@ export class MenuListItemComponent implements OnInit {
   }
 
   onItemSelected(item: NavItem) {
-    if (!item.children || !item.children.length) {
+    /*if (!item.children || !item.children.length) {
       this.router.navigate([item.route]);
       this.navService.closeNav();
     }
     if (item.children && item.children.length) {
       this.expanded = !this.expanded;
-    }
+    }*/
+    
+    this.router.navigate([item.route]);
+    this.navService.closeNav();
+  }
+
+  expand(item: NavItem) {
+    this.expanded = !this.expanded;
   }
 }

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

@@ -15,7 +15,7 @@
     <button
       mat-raised-button
       class="table-control-button"
-      (click)="addEmptyRow()"
+      
       [disabled]="reloadingTable"
     >
       <mat-icon class="spin">add</mat-icon>
@@ -35,6 +35,7 @@
     ></mat-paginator>
   </div>
   <div class="table-container">
+    
     <table
       mat-table
       class="mat-elevation-z8"
@@ -157,9 +158,19 @@
         </td>
       </ng-container>
 
+      <mat-spinner
+      [diameter]="32"
+      *ngIf="!isLoaded"
+    ></mat-spinner>
+     
+
       <!-- Table Definition -->
       <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
+
+    <mat-card *ngIf="!isLoaded" style="display: flex; justify-content: center; align-items: center">
+      <mat-spinner [diameter]="320"></mat-spinner>
+    </mat-card>
   </div>
 </div>

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

@@ -11,7 +11,9 @@
   }
   .table-container {
     flex: 1;
-    width: 100%;
+    width: auto;
+    margin-left: 0.5em;
+    margin-right: 0.5em;
     max-width: 100%;
     overflow: auto;
     table {

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

@@ -10,6 +10,7 @@ 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';
 
 @Component({
   selector: 'app-bikes',
@@ -127,6 +128,7 @@ export class BikesComponent {
 
   relockingInterval = null;
   relockingDuration = 1000 * 60 * 1;
+  isLoaded = false;
 
   constructor(
     private bikesService: BikesService,
@@ -159,6 +161,7 @@ export class BikesComponent {
       this.reloadingTable = false;
       const tempDataSource = [];
       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) {
@@ -173,6 +176,7 @@ export class BikesComponent {
     });
     this.bikesService.loadBikes();
 
+
     this.relockingInterval = setInterval(() => {
       for (const row of this.data.data) {
         if (row.isLockedByMe) {
@@ -251,6 +255,8 @@ export class BikesComponent {
 
   reloadTable() {
     this.reloadingTable = true;
+    this.isLoaded = false;
+    this.data.data = [];
     this.bikesService.loadBikes();
   }
 

src/styles.scss

@@ -16,4 +16,8 @@ h1:before {
     height: 1px;
     bottom: 0;
     border-bottom: 3px solid #7fc600;
+}
+
+.mat-list-item-content {
+    width: 100%;
 }