merge dev

package.json

@@ -7,6 +7,7 @@
     "start": "ng serve --proxyConfig proxy.conf.json",
     "start-qa": "ng serve --configuration=qa",
     "start-prod": "ng serve --configuration=prod",
+    "start-local": "ng serve --configuration=local",
     "build": "ng build --prod",
     "build-token": "npm run build -- --configuration=token",
     "lint": "tslint \"src/**/*.ts\""

src/_variables.scss

@@ -16,3 +16,6 @@ $darker-gray: #454545;
 $primary-purple: #5F288D;
 $delete-color: #F16359;
 
+$font-weight-medium: 500;
+$primary-gray: #707070;
+

src/app/components/answer/answer.component.html

@@ -1,112 +1,49 @@
 <div class="container-fluid">
-  <form
-    (ngSubmit)="requestFilteredData()"
-    name="filtreazaDupa"
-    class="form-row mb-4"
-  >
-    <div class="col-auto form-group">
-      <label for="countyCode">{{ "COUNTY_CODE" | translate }}</label>
-      <input
-        [(ngModel)]="countyCode"
-        name="countyCode"
-        class="form-control"
-        id="countyCode"
-      />
-    </div>
-    <div class="col-auto form-group">
-      <label for="pollingStationNumber">{{
-        "POLLING_STATION_NUMBER" | translate
-      }}</label>
-      <input
-        [(ngModel)]="pollingStationNumber"
-        name="pollingStationNumber"
-        class="form-control"
-        id="pollingStationNumber"
-      />
-    </div>
-    <div class="col-auto form-group">
-      <label for="observerId">{{ "OBSERVER_ID" | translate }}</label>
-      <input
-        [(ngModel)]="observerId"
-        name="observerId"
-        class="form-control"
-        id="observerId"
-      />
-    </div>
-    <div class="col-auto form-group">
-      <label for="fromTime">{{ "FROM" | translate }}</label>
-      <input
-        [(ngModel)]="fromTime"
-        name="fromTime"
-        class="form-control"
-        id="fromTime"
-        type="datetime-local"
-        placeholder="yyyy-MM-dd hh:mm"
-      />
-    </div>
-    <div class="col-auto form-group">
-      <label for="toTime">{{ "TO" | translate }}</label>
-      <input
-        [(ngModel)]="toTime"
-        name="toTime"
-        class="form-control"
-        id="toTime"
-        type="datetime-local"
-        placeholder="yyyy-MM-dd hh:mm"
-      />
+  <form (ngSubmit)="requestFilteredData()" name="filtreazaDupa">
+    <div class="form-row">
+      <div class="col-md-2 mb-3">
+        <label for="countyCode" class="control-label">{{'COUNTY_CODE' | translate}}</label>
+        <input [(ngModel)]="countyCode" name="countyCode" class="form-control" id="countyCode">
+      </div>
+      <div class="col-md-2 mb-3">
+        <label for="pollingStationNumber" class="control-label">{{'POLLING_STATION_NUMBER' | translate}}</label>
+        <input [(ngModel)]="pollingStationNumber" name="pollingStationNumber" class="form-control"
+          id="pollingStationNumber">
+      </div>
+      <div class="col-md-2 mb-3">
+        <label for="observerPhone" class="control-label">{{'OBSERVER_PHONE' | translate}}</label>
+        <input [(ngModel)]="observerPhone" name="observerPhone" class="form-control" id="observerId">
+      </div>
+      <div class="col-md-2 mb-3">
+        <label for="fromTime" class="control-label">{{'FROM' | translate }}</label>
+        <input [(ngModel)]="fromTime" name="fromTime" class="form-control" id="fromTime" placeholder="yyyy-MM-dd hh:mm">
+      </div>
+
+      <div class="col-md-2 mb-3">
+        <label for="toTime" class="control-label">{{'TO' | translate}}</label>
+        <input [(ngModel)]="toTime" name="toTime" class="form-control" id="toTime" placeholder="yyyy-MM-dd hh:mm">
+      </div>
     </div>
-    <div class="col-auto form-group align-self-end">
-      <button type="submit" class="btn btn-sm btn-primary mr-2">Filter</button>
-      <button class="btn btn-sm btn-danger" (click)="resetFilters()">
-        Reset
-      </button>
+    <div class="col-md-2 mb-3">
+      <div class="form-group action-buttons">
+        <button type="submit" class="btn btn-success">Filter</button>
+        <button class="btn btn-secondary" (click)="resetFilters()">Reset</button>
+      </div>
     </div>
   </form>
 
-  <div class="row mb-4">
-    <div class="col">
-      <h3>
-        {{
-          ((answerState | async)?.urgent
-            ? "URGENT_HEADER"
-            : "NOT_URGENT_HEADER"
-          ) | translate
-        }}
-      </h3>
-      <p>
-        {{
-          ((answerState | async)?.urgent
-            ? "URGENT_SUBHEADER"
-            : "NOT_URGENT_SUBHEADER"
-          ) | translate
-        }}
-      </p>
-      <button
-        (click)="downloadAnswers()"
-        class="btn btn-light"
-        [disabled]="isLoading"
-      >
-        <span
-          *ngIf="isLoading"
-          class="spinner-border spinner-border-sm"
-          role="status"
-          aria-hidden="true"
-        ></span>
-        {{ "DOWNLOAD_ANSWERS" | translate }}
-      </button>
-    </div>
+  <div class="list-header col-md-12">
+    <h3>{{((answerState | async)?.urgent ? 'URGENT_HEADER' : 'NOT_URGENT_HEADER') | translate}}</h3>
+    <h5>{{((answerState | async)?.urgent ? 'URGENT_SUBHEADER' : 'NOT_URGENT_SUBHEADER') | translate}}</h5>
+    <button (click)="downloadAnswers()" class="btn btn-default mb-2">{{'DOWNLOAD_ANSWERS' | translate }}</button>
   </div>
-  <div class="row">
-    <div class="col-md-3">
-      <app-answer-list
-        [answerState]="answerState | async"
-        (reload)="redoAnswerListAction()"
-        (pageChanged)="pageChanged($event)"
-      >
-      </app-answer-list>
-    </div>
-    <div class="col-md-9">
-      <router-outlet> </router-outlet>
-    </div>
+  <div class="col-md-3">
+    <app-answer-list [answerState]="answerState | async" (reload)="redoAnswerListAction()"
+      (pageChanged)="pageChanged($event)">
+    </app-answer-list>
+  </div>
+  <div class="col-md-8">
+    <router-outlet>
+    </router-outlet>
   </div>
 </div>

src/app/components/answer/answer.component.ts

@@ -23,7 +23,7 @@ export class AnswerComponent implements OnInit {
 
     countyCode: string;
     pollingStationNumber: string;
-    observerId: number;
+    observerPhone: number;
     isUrgent: boolean;
     fromTime: string;
     toTime: string;
@@ -41,13 +41,13 @@ export class AnswerComponent implements OnInit {
             this.isUrgent = value.urgent || false;
             this.countyCode = value.answerFilters.county;
             this.pollingStationNumber = value.answerFilters.pollingStationNumber;
-            this.observerId = value.answerFilters.observerId;
+            this.observerPhone = value.answerFilters.observerPhone;
         });
     }
 
     requestFilteredData() {
         this.store.dispatch(new LoadAnswerPreviewAction(this.isUrgent, 1, 5, true, {
-            observerId: this.observerId,
+            observerPhone: this.observerPhone,
             pollingStationNumber: this.pollingStationNumber,
             county: this.countyCode
         }));
@@ -81,7 +81,7 @@ export class AnswerComponent implements OnInit {
     resetFilters(): void {
         this.countyCode = null;
         this.pollingStationNumber = null;
-        this.observerId = null;
+        this.observerPhone = null;
         this.fromTime = null;
         this.toTime = null;
     }
@@ -104,8 +104,8 @@ export class AnswerComponent implements OnInit {
             filter.pollingStationNumber = this.pollingStationNumber as any;
         }
 
-        if (this.isValidValue(this.observerId)) {
-            filter.idObserver = this.observerId;
+        if (this.isValidValue(this.observerPhone)) {
+            filter.phoneObserver = this.observerPhone;
         }
 
         if (this.isValidValue(this.fromTime)) {

src/app/components/components.module.ts

@@ -1,72 +1,74 @@
-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 {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 {TableModule} from '../table/table.module'
+import {ObserverImportComponent} from './observers/observer-import/observer-import.component';
 
 export let components = [
-    AnswerComponent,
-    AnswerListComponent,
-    AnswerDetailsComponent,
-    AnswerFormListComponent,
-    AnswerNoteComponent,
-    CategoricalQuestionComponent,
-    AnswerExtraQuestionsComponent,
-    ObserversComponent,
-    ObserverCardComponent,
-    OberverRowComponent,
-    ObserverProfileComponent,
-    FormsComponent,
-    FormCreateComponent,
-    SectionComponent,
-    QuestionComponent,
-    OptionComponent,
-    HeaderComponent,
-    StatisticsComponent,
-    StatisticsCardComponent,
-    StatisticsDetailsComponent,
-    StatisticsValueComponent,
-    NotificationsComponent,
-    LoginComponent,
-    ObserverImportComponent,
+  AnswerComponent,
+  AnswerListComponent,
+  AnswerDetailsComponent,
+  AnswerFormListComponent,
+  AnswerNoteComponent,
+  CategoricalQuestionComponent,
+  AnswerExtraQuestionsComponent,
+  ObserversComponent,
+  ObserverCardComponent,
+  OberverRowComponent,
+  ObserverProfileComponent,
+  FormsComponent,
+  FormCreateComponent,
+  SectionComponent,
+  QuestionComponent,
+  PredefinedOptionsModalComponent,
+  OptionComponent,
+  HeaderComponent,
+  StatisticsComponent,
+  StatisticsCardComponent,
+  StatisticsDetailsComponent,
+  StatisticsValueComponent,
+  NotificationsComponent,
+  LoginComponent,
+  ObserverImportComponent,
 ];
 
 @NgModule({
-    declarations: components,
-    exports: components,
-    imports: [
-      SharedModule,
-      NgMultiSelectDropDownModule.forRoot(),
-      DragDropModule,
-      TableModule,
-    ]
+  declarations: components,
+  exports: components,
+  imports: [
+    SharedModule,
+    NgMultiSelectDropDownModule.forRoot(),
+    DragDropModule,
+    TableModule,
+  ]
 })
-export  class ComponentsModule {
+export class ComponentsModule {
 
 }
 

src/app/components/forms/predefined-options-modal/predefined-options-modal.component.html

@@ -0,0 +1,17 @@
+<div class="modal-header">
+  <h6 class="modal-title">{{'PREDEFINED_OPTIONS_MODAL.TITLE' | translate}}</h6>
+</div>
+<div class="modal-body">
+  <p>{{'PREDEFINED_OPTIONS_MODAL.NOTE' | translate}}</p>
+  <div *ngFor="let category of data">
+    {{ category.label | translate }}
+    <div *ngFor="let option of category.options" class="node-children">
+      <input type="checkbox" [ngModel]="option.check"
+             (ngModelChange)="check(option,$event);"/>  {{ option.label | translate }}
+    </div>
+  </div>
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-outline-secondary" (click)="modal.dismiss()">{{'CANCEL' | translate}}</button>
+  <button type="button" class="btn btn-warning" (click)="modal.close(getChecked())">{{'ADD' | translate}}</button>
+</div>

src/app/components/forms/predefined-options-modal/predefined-options-modal.component.scss

@@ -0,0 +1,4 @@
+.node-children {
+  margin: 1.5px 1.5px 1.5px 15px;
+  padding-left: 10px;
+}