Feature/221 counties reorder list

src/app/answers/answers/answers.component.ts

@@ -1,5 +1,5 @@
 
-import {map, shareReplay, finalize} from 'rxjs/operators';
+import { map, shareReplay, finalize, take, filter } from 'rxjs/operators';
 import { LoadAnswerDetailsAction, LoadAnswerPreviewAction, updateFilters, updatePageInfo } from '../../store/answer/answer.actions';
 import { AnswerState } from '../../store/answer/answer.reducer';
 import { FormState } from '../../store/form/form.reducer';
@@ -16,7 +16,7 @@ import { AnswerThread } from 'src/app/models/answer.thread.model';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AnswerFilters } from 'src/app/models/answer.filters.model';
 import { getAnswerThreads, getFilters } from 'src/app/store/answer/answer.selectors';
-import { fetchCountiesFromAnswers } from 'src/app/store/county/county.actions';
+import { CountryAnswersFetchAction } from 'src/app/store/county/county.actions';
 import { County } from 'src/app/store/county/county.state';
 import { getCounties } from 'src/app/store/county/county.selectors';
 import { AnswerExtra } from 'src/app/models/answer.extra.model';
@@ -63,9 +63,12 @@ export class AnswersComponent implements OnInit {
     map(threads => threads.map(c => ({ ...c, locationType: (c as any).urbanArea ? 'Urban' : 'Rural' })))
   );
   filters$: Observable<AnswerFilters> = this.store.select(getFilters);
-  counties$: Observable<Partial<County>[]> = this.store.select(getCounties).pipe(
-    map((counties: County[]) => [{ name: '' }, ...(counties || [])]),
-  );
+
+  public counties$ = this.store.select(state => state.county).pipe(
+    map(countyList => countyList?.counties),
+    filter(counties => !!counties),
+    map((counties: County[]) => [{ name: '' }, ...(counties || [])])
+  )
 
   constructor(
     private store: Store<AppState>,
@@ -83,11 +86,16 @@ export class AnswersComponent implements OnInit {
 
   ngOnInit() {
     this.formState = this.store.pipe(select(state => state.form));
-
-    this.store.dispatch(fetchCountiesFromAnswers());
+    this.store
+      .pipe(
+        select(s => s.county),
+        take(1),
+        map(_ => new CountryAnswersFetchAction())
+      )
+      .subscribe(action => this.store.dispatch(action));
   }
 
-  requestFilteredData (filters) {
+  requestFilteredData(filters) {
     this.store.dispatch(updateFilters(filters));
     this.store.dispatch(new LoadAnswerPreviewAction(1, undefined, true));
   }
@@ -102,7 +110,7 @@ export class AnswersComponent implements OnInit {
     // TODO: call proper API
   }
 
-  onResetFilters () {
+  onResetFilters() {
     this.store.dispatch(updateFilters({}));
     this.store.dispatch(new LoadAnswerPreviewAction(1, undefined, true));
   }
@@ -121,7 +129,7 @@ export class AnswersComponent implements OnInit {
     return value !== null && value !== '';
   }
 
-  downloadAnswers (rawFilters) {
+  downloadAnswers(rawFilters) {
     if (!confirm(this.translate.instant('ANSWERS_DOWNLOAD_CONFIRMATION'))) {
       return;
     }

src/app/components/components.module.ts

@@ -1,35 +1,36 @@
-import {SharedModule} from '../shared/shared.module';
-import {NgModule} from '@angular/core';
-import {AnswerExtraQuestionsComponent} from './answer/answer-extra-questions/answer-extra-questions.component';
-import {LoginComponent} from './login/login.component';
-import {StatisticsValueComponent} from './statistics/statistics-value/statistics-value.component';
-import {AnswerNoteComponent} from './answer/answer-note/answer-note.component';
-import {StatisticsDetailsComponent} from './statistics/statistics-details/statistics-details.component';
-import {CategoricalQuestionComponent} from './answer/categorical-question/categorical-question.component';
-import {StatisticsCardComponent} from './statistics/statistics-card/statistics-card.component';
-import {StatisticsComponent} from './statistics/statistics.component';
-import {AnswerFormListComponent} from './answer/answer-form-list/answer-form-list.component';
-import {AnswerDetailsComponent} from './answer/answer-details/answer-details.component';
-import {AnswerComponent} from './answer/answer.component';
-import {ObserversComponent} from './observers/observers.component';
-import {AnswerListComponent} from './answer/answers-list/answer-list.component';
-import {HeaderComponent} from './header/header.component';
-import {ObserverCardComponent} from './observers/observer-card/observer-card.component';
-import {OberverRowComponent} from './observers/oberver-row/oberver-row.component';
-import {ObserverProfileComponent} from './observers/observer-profile/observer-profile.component';
-import {NotificationsComponent} from './notifications/notifications.component';
-import {NgMultiSelectDropDownModule} from 'ng-multiselect-dropdown';
-import {FormCreateComponent} from './forms/form-create/form-create.component';
-import {SectionComponent} from './forms/section/section.component';
-import {QuestionComponent} from './forms/question/question.component';
-import {PredefinedOptionsModalComponent} from './forms/predefined-options-modal/predefined-options-modal.component';
-import {OptionComponent} from './forms/option/option.component';
-import {FormsComponent} from './forms/forms.component';
-import {DragDropModule} from '@angular/cdk/drag-drop';
+import { PollingStationsComponent } from './polling-stations/polling-stations.component';
+import { SharedModule } from '../shared/shared.module';
+import { NgModule } from '@angular/core';
+import { AnswerExtraQuestionsComponent } from './answer/answer-extra-questions/answer-extra-questions.component';
+import { LoginComponent } from './login/login.component';
+import { StatisticsValueComponent } from './statistics/statistics-value/statistics-value.component';
+import { AnswerNoteComponent } from './answer/answer-note/answer-note.component';
+import { StatisticsDetailsComponent } from './statistics/statistics-details/statistics-details.component';
+import { CategoricalQuestionComponent } from './answer/categorical-question/categorical-question.component';
+import { StatisticsCardComponent } from './statistics/statistics-card/statistics-card.component';
+import { StatisticsComponent } from './statistics/statistics.component';
+import { AnswerFormListComponent } from './answer/answer-form-list/answer-form-list.component';
+import { AnswerDetailsComponent } from './answer/answer-details/answer-details.component';
+import { AnswerComponent } from './answer/answer.component';
+import { ObserversComponent } from './observers/observers.component';
+import { AnswerListComponent } from './answer/answers-list/answer-list.component';
+import { HeaderComponent } from './header/header.component';
+import { ObserverCardComponent } from './observers/observer-card/observer-card.component';
+import { OberverRowComponent } from './observers/oberver-row/oberver-row.component';
+import { ObserverProfileComponent } from './observers/observer-profile/observer-profile.component';
+import { NotificationsComponent } from './notifications/notifications.component';
+import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
+import { FormCreateComponent } from './forms/form-create/form-create.component';
+import { SectionComponent } from './forms/section/section.component';
+import { QuestionComponent } from './forms/question/question.component';
+import { PredefinedOptionsModalComponent } from './forms/predefined-options-modal/predefined-options-modal.component';
+import { OptionComponent } from './forms/option/option.component';
+import { FormsComponent } from './forms/forms.component';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 
-import {TableModule} from '../table/table.module'
-import {ObserverImportComponent} from './observers/observer-import/observer-import.component';
-import {NotificationHistoryComponent} from './notifications/notification-history/notification-history.component';
+import { TableModule } from '../table/table.module'
+import { ObserverImportComponent } from './observers/observer-import/observer-import.component';
+import { NotificationHistoryComponent } from './notifications/notification-history/notification-history.component';
 
 export let components = [
   AnswerComponent,
@@ -58,6 +59,7 @@ export let components = [
   NotificationHistoryComponent,
   LoginComponent,
   ObserverImportComponent,
+  PollingStationsComponent
 ];
 
 @NgModule({

src/app/components/header/header.component.html

@@ -1,51 +1,32 @@
 <nav class="navbar navbar-expand-lg navbar-light mb-4">
   <a class="navbar-brand" [routerLink]="['/']">
-    <img
-      src="../../../assets/vote_monitor.png"
-      class="brand-logo"
-      width="50"
-      alt=""
-    />
+    <img src="../../../assets/vote_monitor.png" class="brand-logo" width="50" alt="" />
   </a>
-  <button
-    (click)="isHamburgerClicked = !isHamburgerClicked"
-    class="navbar-toggler"
-    type="button"
-    data-toggle="collapse"
-    data-target="#navbarSupportedContent"
-    aria-controls="navbarSupportedContent"
-    aria-expanded="false"
-    aria-label="Toggle navigation"
-  >
+  <button (click)="isHamburgerClicked = !isHamburgerClicked" class="navbar-toggler" type="button" data-toggle="collapse"
+    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+    aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
 
   <div [ngbCollapse]="!isHamburgerClicked" class="collapse navbar-collapse" id="navbarSupportedContent">
     <ul class="navbar-nav mr-auto">
       <li class="nav-item">
-        <a
-          [routerLink]="['/answers']"
-          routerLinkActive="active"
-          class="nav-link"
-        >
+        <a [routerLink]="['/polling-stations']" routerLinkActive="active" class="nav-link">
+          {{ "STATION" | translate }}
+        </a>
+      </li>
+      <li class="nav-item">
+        <a [routerLink]="['/answers']" routerLinkActive="active" class="nav-link">
           {{ "ANSWERS" | translate }}
         </a>
       </li>
       <li class="nav-item">
-        <a
-          [routerLink]="['/statistics']"
-          routerLinkActive="active"
-          class="nav-link"
-        >
+        <a [routerLink]="['/statistics']" routerLinkActive="active" class="nav-link">
           {{ "STATISTICS" | translate }}
         </a>
       </li>
       <li class="nav-item">
-        <a
-          [routerLink]="['/observatori']"
-          routerLinkActive="active"
-          class="nav-link"
-        >
+        <a [routerLink]="['/observatori']" routerLinkActive="active" class="nav-link">
           {{ "OBSERVERS" | translate }}
         </a>
       </li>
@@ -55,20 +36,12 @@
         </a>
       </li>
       <li class="nav-item">
-        <a
-          [routerLink]="['/formulare']"
-          routerLinkActive="active"
-          class="nav-link"
-        >
+        <a [routerLink]="['/formulare']" routerLinkActive="active" class="nav-link">
           {{ "FORMS" | translate }}
         </a>
       </li>
       <li class="nav-item">
-        <a
-          [routerLink]="['/notifications']"
-          routerLinkActive="active"
-          class="nav-link"
-        >
+        <a [routerLink]="['/notifications']" routerLinkActive="active" class="nav-link">
           {{ "NOTIFICATIONS" | translate }}
         </a>
       </li>
@@ -80,7 +53,7 @@
       </span>
       <div ngbDropdownMenu aria-labelledby="selectedLanguage" class="dropdown-menu dropdown-menu-right">
         <a ngbDropdownItem *ngFor="let language of getAvailableLanguages()" (click)="setLanguage(language)"
-           class="cursor-pointer">
+          class="cursor-pointer">
           {{ language | uppercase }}
         </a>
       </div>
@@ -89,16 +62,12 @@
     <div *ngIf="isLoggedIn()" class="nav-item" ngbDropdown>
 
       <span class="nav-link cursor-pointer" tabindex="0" ngbDropdownToggle id="loggedInUser" role="button">
-        <img
-        src="../../../assets/user-icon.svg"
-        width="20"
-        alt=""
-      />
+        <img src="../../../assets/user-icon.svg" width="20" alt="" />
         {{ userName | titlecase }}
       </span>
       <div ngbDropdownMenu aria-labelledby="loggedInUser" class="dropdown-menu dropdown-menu-right">
         <a ngbDropdownItem class="cursor-pointer" (click)="logout()">{{ "LOGOUT" | translate }}</a>
       </div>
     </div>
   </div>
-</nav>
+</nav>