fix: expedition caused rxjs issues

webapp/src/app/app.module.ts

@@ -3,18 +3,12 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { HeaderComponent } from './components/header/header.component';
-import { FooterComponent } from './components/footer/footer.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatButtonModule } from '@angular/material/button';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { NgcCookieConsentConfig, NgcCookieConsentModule, NgcCookieConsentService } from 'ngx-cookieconsent';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatIconModule } from '@angular/material/icon';
 import { LoginGuard } from './guards/login.guard';
 import { AdminGuard } from './guards/admin.guard';
 import { ConfigService } from './services/config/config.service';
-import { MatMenuModule } from '@angular/material/menu';
 import { ReactiveFormsModule } from '@angular/forms';
 import { TranslateLoader, TranslateModule, TranslateModuleConfig } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
@@ -24,17 +18,16 @@ import { UserModule } from './services/user/user.module';
 import { NavigationModule } from './services/navigation/navigation.module';
 import { AdminModule } from './services/admin/admin.module';
 import { CharacterModule } from './services/character/character.module';
-import { SnackbarModule } from './services/snackbar/snackbar.module';
 import { InterceptorModule } from './interceptor/interceptor.module';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
 import { FullCalendarModule } from '@fullcalendar/angular';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import { ExpeditionModule } from './services/expedition/expedition.module';
-import { CharacterDetailComponent } from './components/character-detail/character-detail.component';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatDialogModule } from '@angular/material/dialog';
+import { SnackbarModule } from './services/snackbar/snackbar.module';
+import { HeaderModule } from './components/header/header.module';
+import { FooterModule } from './components/footer/footer.module';
 
 const cookieConfig: NgcCookieConsentConfig = {
   cookie: {
@@ -68,7 +61,7 @@ const i18nConfig: TranslateModuleConfig = {
 FullCalendarModule.registerPlugins([dayGridPlugin, timeGridPlugin, interactionPlugin]);
 
 @NgModule({
-  declarations: [AppComponent, HeaderComponent, FooterComponent, CharacterDetailComponent],
+  declarations: [AppComponent],
   imports: [
     NgcCookieConsentModule.forRoot(cookieConfig),
     TranslateModule.forRoot(i18nConfig),
@@ -77,25 +70,21 @@ FullCalendarModule.registerPlugins([dayGridPlugin, timeGridPlugin, interactionPl
     BrowserAnimationsModule,
     HttpClientModule,
     ReactiveFormsModule,
+    MatMomentDateModule,
+    // Interceptors
     InterceptorModule,
+    // Services
     ConfigModule,
-    PluginModule,
     AdminModule,
     CharacterModule,
-    ConfigModule,
     ExpeditionModule,
     NavigationModule,
     PluginModule,
     SnackbarModule,
     UserModule,
-    NavigationModule,
-    MatToolbarModule,
-    MatMenuModule,
-    MatIconModule,
-    MatButtonModule,
-    MatMomentDateModule,
-    MatProgressBarModule,
-    MatDialogModule
+    // Global Components
+    HeaderModule,
+    FooterModule
   ],
   providers: [{ provide: LOCALE_ID, useValue: 'en-GB' }, AppComponent, LoginGuard, AdminGuard],
   bootstrap: [AppComponent],

webapp/src/app/components/character-detail/character-detail.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Attribute, Character } from '@nw-company-tool/model';
 import { CharacterService } from '../../services/character/character.service';
 
@@ -60,7 +60,6 @@ export class CharacterDetailComponent implements OnInit {
   ];
 
   constructor(
-    public dialogRef: MatDialogRef<CharacterDetailComponent>,
     @Inject(MAT_DIALOG_DATA) public dialogData: CharacterDetailDialogData,
     private characterService: CharacterService
   ) {}

webapp/src/app/components/character-detail/character-detail.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CharacterDetailComponent } from './character-detail.component';
+import { MatDialogModule } from '@angular/material/dialog';
+import { CommonModule } from '@angular/common';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatButtonModule } from '@angular/material/button';
+
+@NgModule({
+  imports: [MatDialogModule, CommonModule, MatProgressBarModule, TranslateModule, MatButtonModule],
+  declarations: [CharacterDetailComponent],
+  exports: [CharacterDetailComponent]
+})
+export class CharacterDetailModule {}

webapp/src/app/components/footer/footer.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { FooterComponent } from './footer.component';
+
+@NgModule({
+  imports: [],
+  declarations: [FooterComponent],
+  exports: [FooterComponent]
+})
+export class FooterModule {}

webapp/src/app/components/header/header.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { HeaderComponent } from './header.component';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  imports: [MatMenuModule, MatToolbarModule, MatIconModule, MatButtonModule, CommonModule],
+  declarations: [HeaderComponent],
+  exports: [HeaderComponent]
+})
+export class HeaderModule {}

webapp/src/app/interceptor/interceptor.module.ts

@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { TokenInterceptor } from './token.interceptor';
-import { SnackbarModule } from '../services/snackbar/snackbar.module';
 
 @NgModule({
   providers: [
@@ -11,6 +10,6 @@ import { SnackbarModule } from '../services/snackbar/snackbar.module';
       multi: true
     }
   ],
-  imports: [HttpClientModule, SnackbarModule]
+  imports: [HttpClientModule]
 })
 export class InterceptorModule {}

webapp/src/app/pages/company/company-page.module.ts

@@ -18,6 +18,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { MatCardModule } from '@angular/material/card';
 import { MatTabsModule } from '@angular/material/tabs';
 import { CommonModule } from '@angular/common';
+import { CharacterDetailModule } from '../../components/character-detail/character-detail.module';
 
 @NgModule({
   imports: [
@@ -37,7 +38,8 @@ import { CommonModule } from '@angular/common';
     TranslateModule,
     CommonModule,
     MatCardModule,
-    MatTabsModule
+    MatTabsModule,
+    CharacterDetailModule
   ],
   declarations: [CompanyComponent, CharactersTableComponent],
   providers: [],

webapp/src/app/pages/expedition/components/expedition-table/expedition-table.component.ts

@@ -12,7 +12,7 @@ import {
 } from '../../../../components/character-detail/character-detail.component';
 import { UserService } from '../../../../services/user/user.service';
 import { Observable, of } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { first, map } from 'rxjs/operators';
 import { ExpeditionJoinComponent, ExpeditionJoinDialogData } from '../expedition-join/expedition-join.component';
 import { SnackbarService } from '../../../../services/snackbar/snackbar.service';
 
@@ -35,7 +35,7 @@ export class ExpeditionTableComponent implements OnInit, AfterViewInit {
 
   constructor(
     private expeditionService: ExpeditionService,
-    public dialog: MatDialog,
+    private dialog: MatDialog,
     private userService: UserService,
     private snackbarService: SnackbarService
   ) {}
@@ -114,31 +114,34 @@ export class ExpeditionTableComponent implements OnInit, AfterViewInit {
     }
   }
 
-  slotClick(slot: Slot, expedition: Expedition) {
-    this.userService.getUser$().subscribe((user) => {
-      if (slot.participant) {
-        if (slot.participant.userId === user.id) {
-          this.expeditionService.leaveExpedition({ id: expedition.id });
+  slotClick(slot: Slot, expedition: Expedition): void {
+    this.userService
+      .getUser$()
+      .pipe(first())
+      .subscribe((user) => {
+        if (slot.participant) {
+          if (slot.participant.userId === user.id) {
+            this.expeditionService.leaveExpedition({ id: expedition.id });
+            return;
+          }
+          this.showCharacterDetails(slot.participant);
           return;
         }
-        this.showCharacterDetails(slot.participant);
-        return;
-      }
-
-      if (slot.open && !expedition.participants.map((participant) => participant.userId).includes(user.id)) {
-        const data: ExpeditionJoinDialogData = {
-          slot,
-          expedition
-        };
-        this.dialog.open(ExpeditionJoinComponent, { data });
-        return;
-      }
-
-      const self = expedition.participants.filter((participant) => participant.userId === user.id)[0];
-      if (slot.open && self) {
-        this.snackbarService.open(`you are already part of this expedition as role ${self.role}!`);
-      }
-    });
+
+        if (slot.open && !expedition.participants.map((participant) => participant.userId).includes(user.id)) {
+          const data: ExpeditionJoinDialogData = {
+            slot,
+            expedition
+          };
+          this.dialog.open(ExpeditionJoinComponent, { data });
+          return;
+        }
+
+        const self = expedition.participants.filter((participant) => participant.userId === user.id)[0];
+        if (slot.open && self) {
+          this.snackbarService.open(`you are already part of this expedition as role ${self.role}!`);
+        }
+      });
   }
 
   showCharacterDetails(participant: Participant): void {

webapp/src/app/pages/expedition/expedition-page.module.ts

@@ -18,24 +18,26 @@ import { CommonModule } from '@angular/common';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { ExpeditionJoinComponent } from './components/expedition-join/expedition-join.component';
+import { CharacterDetailModule } from '../../components/character-detail/character-detail.module';
 
 @NgModule({
   imports: [
     ExpeditionRoutingModule,
+    MatDialogModule,
+    CommonModule,
     MatCardModule,
     MatButtonModule,
     MatTableModule,
     MatPaginatorModule,
     MatInputModule,
     MatIconModule,
-    MatDialogModule,
     MatSelectModule,
     MatDatepickerModule,
     MatSlideToggleModule,
     ReactiveFormsModule,
-    CommonModule,
     MatTooltipModule,
-    TranslateModule
+    TranslateModule,
+    CharacterDetailModule
   ],
   declarations: [ExpeditionComponent, ExpeditionTableComponent, ExpeditionCreateComponent, ExpeditionJoinComponent],
   providers: [],

webapp/src/app/services/snackbar/snackbar.module.ts

@@ -1,11 +1,10 @@
 import { NgModule } from '@angular/core';
-import { HttpClientModule } from '@angular/common/http';
 import { SnackbarService } from './snackbar.service';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 
 @NgModule({
   providers: [SnackbarService],
-  imports: [HttpClientModule, MatSnackBarModule],
-  exports: [MatSnackBarModule]
+  imports: [MatSnackBarModule],
+  exports: []
 })
 export class SnackbarModule {}

webapp/src/app/services/snackbar/snackbar.service.ts

@@ -19,8 +19,8 @@ export class SnackbarService {
   error(message: string, duration = 3000): void {
     this.snackBar.open(message, 'OK', {
       duration,
-      horizontalPosition: 'start',
-      verticalPosition: 'bottom',
+      horizontalPosition: 'center',
+      verticalPosition: 'top',
       panelClass: ['snackbar-error']
     });
   }