#19 create results layout (#22)

* created result component

* recreated result component, created list & map components with routes

* added routes for map and show-data components, saved current view

* added app-result tag

* fixed pull request

src/app/app.module.ts

@@ -1,35 +1,21 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-<<<<<<< HEAD
 import { AppRoutingModule } from './app-routing.module';
-=======
+import { AppComponent } from './app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HeaderComponent } from './header/header.component';
 import { ShellModule } from './shell/shell.module';
->>>>>>> origin/develop
 import { FlexLayoutModule } from '@angular/flex-layout';
-
-
 import { AppState } from './shared/store/app.state';
 import { NgxsModule } from '@ngxs/store';
 import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
 import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
 import { environment } from 'src/environments/environment';
 
-import { AppComponent } from './app.component';
-import { HeaderComponent } from './header/header.component';
-import { ShellModule } from './shell/shell.module';
-import { ShellComponent } from './shell/shell.component';
-
 @NgModule({
   declarations: [
     AppComponent,
-<<<<<<< HEAD
-    HeaderComponent,
-    ShellComponent,
-=======
     HeaderComponent
->>>>>>> origin/develop
   ],
   imports: [
     BrowserModule,

src/app/shared/result.actions.ts

@@ -0,0 +1,4 @@
+export class UpdateCurrentView {
+  static readonly type = '[Result] EditView';
+  constructor(public payload: string) {}
+}

src/app/shell/main/main.component.html

@@ -1 +1,2 @@
 <app-filters-list></app-filters-list>
+<app-result></app-result>

src/app/shell/main/result/hobby-groups-list/hobby-groups-list.component.html

@@ -0,0 +1 @@
+<p>hobby-groups-list works!</p>

src/app/shell/main/result/hobby-groups-list/hobby-groups-list.component.spec.ts

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

src/app/shell/main/result/hobby-groups-list/hobby-groups-list.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Store } from '@ngxs/store';
+
+@Component({
+  selector: 'app-hobby-groups-list',
+  templateUrl: './hobby-groups-list.component.html',
+  styleUrls: ['./hobby-groups-list.component.scss']
+})
+export class HobbyGroupsListComponent implements OnInit {
+  stateCards: Observable<Object[]>;
+  public cards: Array<Object> = [];
+
+  constructor(private store: Store) {
+    this.stateCards = this.store.select(state => state.ShowData);
+    // To do: change "state.ShowData" when state will be configured
+  }
+
+  ngOnInit(): void {
+    this.stateCards.subscribe((data) => this.cards = data);
+  }
+
+}

src/app/shell/main/result/map/map.component.html

@@ -0,0 +1 @@
+<p>map works!</p>

src/app/shell/main/result/map/map.component.spec.ts

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

src/app/shell/main/result/map/map.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Store } from '@ngxs/store';
+
+@Component({
+  selector: 'app-map',
+  templateUrl: './map.component.html',
+  styleUrls: ['./map.component.scss']
+})
+export class MapComponent implements OnInit {
+  stateMarkers: Observable<Object[]>;
+  public markers: Array<Object> = [];
+
+  constructor(private store: Store) { 
+    this.stateMarkers = this.store.select(state => state.ShowData);
+    // To do: change "state.ShowData" when state will be configured
+  }
+
+  ngOnInit(): void {
+    this.stateMarkers.subscribe((data) => this.markers = data);
+  }
+
+}

src/app/shell/main/result/result.component.html

@@ -0,0 +1,14 @@
+<mat-button-toggle-group #group="matButtonToggleGroup" [value]="currentView" (change)="SetCurrentView(group.value)">
+  <mat-button-toggle value="show-data" aria-label="show-data">
+    Список
+  </mat-button-toggle>
+  <mat-button-toggle value="map" aria-label="map">
+    Карта
+  </mat-button-toggle>
+</mat-button-toggle-group>
+<div *ngIf="group.value==='map'; else ShowData">
+  <app-map></app-map>
+</div>
+<ng-template #ShowData>
+  <app-hobby-groups-list></app-hobby-groups-list>
+</ng-template>  

src/app/shell/main/result/result.component.spec.ts

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

src/app/shell/main/result/result.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { UpdateCurrentView } from '../../../shared/result.actions';
+import { Store } from '@ngxs/store';
+
+@Component({
+  selector: 'app-result',
+  templateUrl: './result.component.html',
+  styleUrls: ['./result.component.scss']
+})
+export class ResultComponent implements OnInit {
+  public currentView: string;
+
+  constructor(private store: Store) {}
+
+  ngOnInit(): void {
+    this.currentView ='show-data';
+  }
+
+  public SetCurrentView(view: string) {
+    this.currentView = view;
+    this.store.dispatch(new UpdateCurrentView(view));
+    // To do: finish action when state will be configured
+  }
+
+}

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

@@ -1,9 +1,11 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { MainComponent } from './main/main.component';
+import { ResultComponent } from './main/result/result.component';
 
 const routes: Routes = [
-  { path: '', component: MainComponent }
+  { path: '', component: MainComponent },
+  { path: 'result', component: ResultComponent }
 ];
 
 @NgModule({

src/app/shell/shell.component.html

@@ -1 +1 @@
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

src/app/shell/shell.module.ts

@@ -6,6 +6,10 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { ShellRoutingModule } from './shell-routing.module';
 import { ShellComponent } from './shell.component';
+import { ResultComponent } from './main/result/result.component';
+import { HobbyGroupsListComponent } from './main/result/hobby-groups-list/hobby-groups-list.component';
+import { MapComponent } from './main/result/map/map.component';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
 
 import { MainComponent } from './main/main.component';
 import { FiltersListComponent } from './main/filters-list/filters-list.component';
@@ -18,29 +22,25 @@ import { CategoriesFilterComponent } from './main/filters-list/categories-filter
 @NgModule({
   declarations: [
     MainComponent,
-<<<<<<< HEAD
+    ShellComponent,
+    ResultComponent,
+    HobbyGroupsListComponent,
+    MapComponent,
     FiltersListComponent,
     AgeFilterComponent,
     SearchbarComponent,
     OwnershipTypeFilterComponent,
     CategoriesFilterComponent
-=======
-    ShellComponent
->>>>>>> origin/develop
   ],
   imports: [
     CommonModule,
     RouterModule,
-<<<<<<< HEAD
     ShellRoutingModule,
     MatButtonModule,
     FlexLayoutModule
-=======
-    ShellRoutingModule
   ],
   exports: [
     ShellComponent
->>>>>>> origin/develop
   ]
 })
 export class ShellModule { }