Main view improvements

Frontend/src/app/app-routing.module.ts

@@ -12,7 +12,13 @@ const routes: Routes = [
   {
     path: 'app',
     component: MainViewComponent,
-    canActivate: [AuthGuard]
+    canActivate: [AuthGuard],
+    children: [
+        {
+          path: '',
+          loadChildren: () => import('./modules/dashboard/dashboard.module').then(m => m.DashboardModule)
+        },
+    ]
   }
 ];
 

Frontend/src/app/app.module.ts

@@ -7,8 +7,9 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MainViewComponent } from './main-view/main-view.component';
 import { MaterialModule } from './material.module';
 import { LoginPageComponent } from './components/login-page/login-page.component';
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { ServiceWorkerModule } from '@angular/service-worker';
+import { LoaderInterceptor } from './interceptors/loader.interceptor';
 
 
 @NgModule({
@@ -30,7 +31,13 @@ import { ServiceWorkerModule } from '@angular/service-worker';
       registrationStrategy: 'registerWhenStable:30000'
     })
   ],
-  providers: [],
+  providers: [
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: LoaderInterceptor,
+      multi: true
+    },
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

Frontend/src/app/components/login-page/login-page.component.scss

@@ -39,4 +39,8 @@ mat-form-field {
     .container {
         width: 90%;
     }
+    .logo {
+        width: 150px;
+        height: 150px;
+    }
 }

Frontend/src/app/components/login-page/login-page.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, NgZone, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import jwt_decode from "jwt-decode";
 import { AuthService } from 'src/app/auth/auth.service';
@@ -16,7 +16,8 @@ export class LoginPageComponent implements OnInit {
   constructor(
     private data$: DataService,
     private router$: Router,
-    private auth$: AuthService
+    private auth$: AuthService,
+    private ngZone$: NgZone
   ) {}
 
   ngOnInit(): void {
@@ -51,10 +52,12 @@ export class LoginPageComponent implements OnInit {
         avatar: responsePayload.picture
       });
       // this.auth$.loadDbUser();
-      this.router$.navigate(['/app']);
       console.log("USer", this.data$.currentUser);
       await this.auth$.getAPIToken(response.credential);
-      this.auth$.loadDbUser();
+      // this.auth$.loadDbUser();
+      this.ngZone$.run(() => { 
+        this.router$.navigate(['/app']);
+      });
     } catch (e) {
       console.error('Get user error', e);
     }

Frontend/src/app/interceptors/loader.interceptor.ts

@@ -0,0 +1,42 @@
+import { Injectable } from '@angular/core';
+import {
+  HttpRequest,
+  HttpHandler,
+  HttpEvent,
+  HttpInterceptor
+} from '@angular/common/http';
+import { finalize, Observable } from 'rxjs';
+import { DataService } from '../services/data.service';
+
+@Injectable()
+export class LoaderInterceptor implements HttpInterceptor {
+
+  private tasks: number = 0;
+
+  constructor(
+    private _data: DataService
+  ) { }
+
+  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
+    this.addTask();
+    return next.handle(request).pipe(
+      finalize(() => {
+        this.removeTask();
+      })
+    );
+  }
+
+  addTask() {
+    this.tasks++;
+    if (this.tasks === 1) {
+      this._data.showLoader.next(true);
+    }
+  }
+
+  removeTask() {
+    this.tasks--;
+    if (this.tasks === 0) {
+      this._data.showLoader.next(false);
+    }
+  }
+}

Frontend/src/app/main-view/main-view.component.html

@@ -12,7 +12,7 @@
         <button mat-icon-button (click)="snav.toggle()">
             <mat-icon>menu</mat-icon>
         </button>
-        <h1>Diuna</h1>
+        <h1 class="topbar-app-name">Diuna</h1>
         <span class="fill-to-right"></span>
         <span class="topbar-user-name" *ngIf="data$.currentUser">
             <img *ngIf="data$.currentUser.avatar" src="{{data$.currentUser.avatar}}" class="avatar">

Frontend/src/app/main-view/main-view.component.scss

@@ -33,7 +33,7 @@ span.topbar-user-name {
   font-size: small;
 }
 h1.topbar-app-name {
-  margin-left: 8px;
+  margin-bottom: 0px;
 }
 mat-sidenav {
   width: 200px;

Frontend/src/app/main-view/main-view.component.ts

@@ -1,8 +1,10 @@
 import { Component, ViewChild } from '@angular/core';
 import { MatSidenav } from '@angular/material/sidenav';
-import { Router } from '@angular/router';
+import { NavigationStart, Router } from '@angular/router';
+import { SwUpdate } from '@angular/service-worker';
 import * as moment from 'moment';
 import packageInfo from 'package.json';
+import { delay } from 'rxjs';
 import { DataService } from '../services/data.service';
 import { DeviceService } from '../services/device.service';
 
@@ -15,9 +17,6 @@ export class MainViewComponent {
   @ViewChild('snav') snav?: MatSidenav;
   appVersion = packageInfo.version;
 
-  submenus = {
-    administration: false,
-  };
   currentDate = moment().toDate();
   flipPhone: boolean = false;
   loading: boolean = false;
@@ -25,8 +24,23 @@ export class MainViewComponent {
   constructor(
     public data$: DataService,
     public device$: DeviceService,
-    private router$: Router
-  ) { }
+    private router$: Router,
+    private swUpdate$: SwUpdate,
+  ) { 
+    this.swUpdate$.versionUpdates.subscribe(() => {
+      this.reloadApp();
+    });
+    this.router$.events.subscribe((event) => {
+      if (event instanceof NavigationStart && device$.isMobile()) {
+        this.snav?.close();
+      }
+    });
+
+    //listen to loading subject
+    data$.showLoader.pipe(delay(0)).subscribe(loading => {
+      this.loading = loading;
+    })
+  }
 
   reloadApp() {
     document.location.reload();

Frontend/src/app/modules/dashboard/board/board.component.html

@@ -0,0 +1 @@
+{{ _device.toString()}}

Frontend/src/app/modules/dashboard/board/board.component.spec.ts

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

Frontend/src/app/modules/dashboard/board/board.component.ts

@@ -0,0 +1,19 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import moment, { Moment } from 'moment';
+import { DeviceService } from 'src/app/services/device.service';
+import { environment } from 'src/environments/environment';
+
+
+@Component({
+  selector: 'b-crm-board',
+  templateUrl: './board.component.html',
+  styleUrls: ['./board.component.scss']
+})
+export class BoardComponent {
+
+  constructor(
+    public _device: DeviceService
+  ) { }
+
+}

Frontend/src/app/modules/dashboard/dashboard-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { BoardComponent } from './board/board.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: BoardComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class DashboardRoutingModule { }

Frontend/src/app/modules/dashboard/dashboard.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { DashboardRoutingModule } from './dashboard-routing.module';
+import { BoardComponent } from './board/board.component';
+
+
+@NgModule({
+  declarations: [
+    BoardComponent
+  ],
+  imports: [
+    CommonModule,
+    DashboardRoutingModule
+  ]
+})
+export class DashboardModule { }

Frontend/src/environments/environment.ts

@@ -5,7 +5,8 @@
 export const environment = {
   production: false,
   api: {
-    url: "http://localhost:5183/api"
+    //url: "http://localhost:5183/api"
+    url: "https://diuna.bim-it.pl/api"
   },
   google: {
     clientId: "107631825312-bkfe438ehr9k9ecb2h76g802tj6advma.apps.googleusercontent.com"

Frontend/src/manifest.webmanifest

@@ -1,11 +1,12 @@
 {
   "name": "Diuna",
   "short_name": "Diuna",
-  "theme_color": "#1976d2",
+  "theme_color": "#FF9800",
   "background_color": "#fafafa",
   "display": "standalone",
   "scope": "./",
   "start_url": "./",
+  "orientation": "landscape",
   "icons": [
     {
       "src": "assets/icons/icon-72x72.png",

Frontend/src/styles.scss

@@ -2,7 +2,7 @@
 
 @include mat.core();
 
-$my-app-primary: mat.define-palette(mat.$indigo-palette);
+$my-app-primary: mat.define-palette(mat.$orange-palette);
 $my-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
 $my-app-warn: mat.define-palette(mat.$red-palette);
 

WebAPI/appsettings.json

@@ -7,7 +7,7 @@
   },
   "AllowedHosts": "*",
   "ConnectionStrings": {
-    "SQLDatabase": "Server=tcp:localhost,1433;Initial Catalog=diuna;Persist Security Info=False;User ID=SA;Password=v](8Lc|RfG;MultipleActiveResultSets=False;Encrypt=False;TrustServerCertificate=False;Connection Timeout=30;"
+    "SQLDatabase": "Server=tcp:127.0.0.1,1433;Initial Catalog=diuna;Persist Security Info=False;User ID=SA;Password=v](8Lc|RfG;MultipleActiveResultSets=False;Encrypt=False;TrustServerCertificate=False;Connection Timeout=30;"
   },
   "GoogleCLientId": "107631825312-bkfe438ehr9k9ecb2h76g802tj6advma.apps.googleusercontent.com",
   "Secret": "8393AF8EAEF8478CB738D44858690F9C7E2D19F65896DD9FBAA3EB2A6F493E80",