Feature/284 new ui statics page (#288)

code4romania · Oct 27, 2020 · 7582e8c · 7582e8c · vercel · Oct 27, 2020
1 parent 68e83d7
commit 7582e8c
Show file tree

Hide file tree

Showing 13 changed files with 100 additions and 126 deletions.
diff --git a/src/_variables.scss b/src/_variables.scss
@@ -6,7 +6,7 @@ $yellow: #fbd844;
 $danger: #fd0001;
 $gray: #ddd2e7;
 $gray-dark: #7b8184;
-
+$gray-light: #eee;
 $base-gray: #AFAFAF;
 $light-gray: #F3F1F1;
 $muted-gray: #B6B6B6;
@@ -15,3 +15,4 @@ $darker-gray: #454545;
 
 $primary-purple: #5F288D;
 $delete-color: #F16359;
+
diff --git a/src/app/components/forms/form-create/form-create.component.scss b/src/app/components/forms/form-create/form-create.component.scss
@@ -1,6 +1,7 @@
 
 
 
+@import "../../../../variables";
 .form-create { //? this isn't on the form
   .back-button {
     font-weight: bold;
@@ -9,7 +10,7 @@
   }
 
   .add-section-button {
-    color: rebeccapurple;
+    color: $primary;
     cursor: pointer;
     font-weight: bold;
   }
@@ -44,7 +45,7 @@
 
 
 .section-add {
-  color: rebeccapurple;
+  color: $primary;
     cursor: pointer;
 }
 

diff --git a/src/app/components/forms/question/question.component.scss b/src/app/components/forms/question/question.component.scss
@@ -1,4 +1,5 @@
 
+ @import "../../../../variables";
  span {
    &.rotate {
     img {
@@ -8,7 +9,7 @@
  }
 
  .add-option-button {
-  color: rebeccapurple;
+  color: $primary;
   cursor: pointer;
 }
 

diff --git a/src/app/components/forms/section/section.component.scss b/src/app/components/forms/section/section.component.scss
@@ -1,3 +1,4 @@
+@import "../../../../variables";
 .section-create {
   margin-top:20px; // this matches that margin on the header-row bottom
   .section-details {
@@ -6,7 +7,7 @@
   }
 
   .add-question-button {
-    color: rebeccapurple;
+    color: $primary;
     cursor: pointer;
   }
 

diff --git a/src/app/components/statistics/statistics-card/statistics-card.component.html b/src/app/components/statistics/statistics-card/statistics-card.component.html
@@ -1,10 +1,10 @@
-<div class="card">
+<div class="card" [ngClass]="{'dialog': dialog}">
   <div class="card-header">
     <div class="card-header-contents">
-      <h3 *ngIf="item.header" style="margin: 0">
+      <h3 *ngIf="item.header" class="m-0">
         {{ item.header }}
       </h3>
-      <h4 *ngIf="item.subHeader" style="margin: 0">
+      <h4 *ngIf="item.subHeader" class="m-0">
         {{ item.subHeader }}
       </h4>
     </div>
@@ -27,9 +27,9 @@ <h4 *ngIf="item.subHeader" style="margin: 0">
         </app-statistics-value>
       </div>
 
-      <div class="row card-footer">
-        <div class="col-xs-12 text-right">
-          <a class="" [routerLink]="['/statistics', item.key]">
+      <div class="card-footer" *ngIf="!dialog">
+        <div class="justify-content-end d-flex">
+          <a (click)="openDetail(item)">
             {{ "SEE_COMPLETE_LIST" | translate }}
           </a>
         </div>

diff --git a/src/app/components/statistics/statistics-card/statistics-card.component.scss b/src/app/components/statistics/statistics-card/statistics-card.component.scss
@@ -1,6 +1,6 @@
 @import "../../../../variables";
 .card-header {
-  background: $gray;
+  background:#fff;
   padding: 10px 25px;
   height: 100px;
   display: flex;
@@ -9,14 +9,18 @@
   margin: auto 0;
 }
 .card-row {
-  &:nth-child(2n) {
-    background: $gray;
+  &:nth-child(odd) {
+    background:$gray-light;
   }
 }
 .card-footer {
   padding: 10px 25px;
+  background-color:#fff;
   a {
-    text-decoration: underline;
-    color: blue;
+    color: $primary;
+    cursor: pointer;
   }
 }
+.dialog {
+  margin: -1rem;
+}
diff --git a/src/app/components/statistics/statistics-card/statistics-card.component.ts b/src/app/components/statistics/statistics-card/statistics-card.component.ts
@@ -1,5 +1,8 @@
 import { StatisticsStateItem } from '../../../store/statistics/statistics.state';
 import { Component, Input, OnInit } from '@angular/core';
+import { StatisticsDetailsComponent } from '../statistics-details/statistics-details.component';
+
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'app-statistics-card',
@@ -8,22 +11,34 @@ import { Component, Input, OnInit } from '@angular/core';
 })
 export class StatisticsCardComponent implements OnInit {
 
-  @Input()
-  item: StatisticsStateItem;
+  @Input() item: StatisticsStateItem;
+
+  @Input() sliceNumber: number
+
+  @Input() dialog: boolean;
 
 
+  constructor( private modalService: NgbModal) { }
+
+  ngOnInit() {
+  }
   get itemValues(){
     if (!this.item.values){
       return [];
     }
-    return this.item.values.slice(0, 5);
-  }
+    if (this.sliceNumber) {
+      return this.item.values.slice(0, this.sliceNumber);
+    } else {
+      return this.item.values;
+    }
 
+  }
 
-  constructor() { }
 
-  ngOnInit() {
 
+  public openDetail(item: StatisticsStateItem): void {
+    const modalRef = this.modalService.open(StatisticsDetailsComponent);
+    modalRef.componentInstance.item = item;
   }
 
 }
diff --git a/src/app/components/statistics/statistics-details/statistics-details.component.html b/src/app/components/statistics/statistics-details/statistics-details.component.html
@@ -1,65 +1,14 @@
-<div
-  class="card col-xs-12 col-lg-6 col-md-8 col-md-offset-2 col-lg-offset-3"
-  style="padding: 0"
->
-  <div class="card-header">
-    <div class="card-header-contents">
-      <h3 *ngIf="state.header" style="margin: 0">
-        {{ state.header }}
-      </h3>
-      <h4 *ngIf="state.subHeader" style="margin: 0">
-        {{ state.subHeader }}
-      </h4>
-    </div>
-  </div>
-  <div>
-    <div *ngIf="state.error">
-      <app-error-indicator (retry)="(retry)"> </app-error-indicator>
-    </div>
-    <div>
-      <app-pagination
-        *ngIf="!state.error && !state.loading"
-        class="col-md-1-2"
-        [page]="state.page"
-        [pageSize]="state.pageSize"
-        [totalItems]="state.totalItems"
-        [nextEnabled]="!state.loading"
-        (pageChanged)="pageChanged($event)"
-      >
-      </app-pagination>
-    </div>
-  </div>
-  <div *ngIf="!state.error">
-    <div *ngIf="state.loading">
-      {{ "LOADING" | translate }}
-    </div>
-    <div *ngIf="!state.loading">
-      <div *ngFor="let list of splitList(); let listIndex = index" class="">
-        <div *ngFor="let model of list; let i = index" class="card-row">
-          <app-statistics-value
-            class="col-md-1-1"
-            [index]="rowIndex(i, listIndex)"
-            [label]="model.label"
-            [value]="model.value"
-          >
-          </app-statistics-value>
-        </div>
-      </div>
-      <div *ngIf="state.loading" class="center-block">
-        <app-loading-indicator></app-loading-indicator>
-      </div>
-      <div>
-        <app-pagination
-          *ngIf="!state.error && !state.loading"
-          class="col-md-1-2"
-          [page]="state.page"
-          [pageSize]="state.pageSize"
-          [totalItems]="state.totalItems"
-          [nextEnabled]="!state.loading"
-          (pageChanged)="pageChanged($event)"
-        >
-        </app-pagination>
-      </div>
-    </div>
-  </div>
+
+<!--  <div class="modal-header">
+  <h4 class="modal-title">Hi there!</h4>
+  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div> -->
+<div class="modal-body">
+  <app-statistics-card [item]="item" [dialog]="true">
+  </app-statistics-card>
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-link" (click)="activeModal.close('Close click')">Close</button>
 </div>
diff --git a/src/app/components/statistics/statistics-details/statistics-details.component.ts b/src/app/components/statistics/statistics-details/statistics-details.component.ts
@@ -5,8 +5,9 @@ import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { AppState } from '../../../store/store.module';
 import { StatisticsStateItem } from '../../../store/statistics/statistics.state';
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
+import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'app-statistics-details',
@@ -15,10 +16,26 @@ import { Subscription } from 'rxjs';
 })
 export class StatisticsDetailsComponent implements OnInit, OnDestroy {
 
-  state: StatisticsStateItem;
+/*   state: StatisticsStateItem;
 
-  subs: Subscription[];
+  subs: Subscription[]; */
 
+  @Input() item: StatisticsStateItem;
+
+  constructor(private store: Store<AppState>, private route: ActivatedRoute, public activeModal: NgbActiveModal) { }
+
+  // ! This is not a dialog, there isn't a paginated list anymore.  Too new not to delete this yet.  Please REVIEW!!!
+  ngOnInit() {
+    /*  this.subs = [this.route.params.pipe(
+       map(p => p['key']),
+       mergeMap(key => this.store.select(s => s.statistics).pipe(map(s => s[key]))), )
+       .subscribe(s => this.state = s)]; */
+
+   }
+   ngOnDestroy() {
+     //this.subs.map(sub => sub.unsubscribe());
+   }
+/*
   currentValues() {
     const startPage = this.state.page - 1,
       pageSize = this.state.pageSize,
@@ -51,17 +68,7 @@ export class StatisticsDetailsComponent implements OnInit, OnDestroy {
   pageChanged(event) {
     this.store.dispatch(new LoadStatisticAction(this.state.key, event.page, event.pageSize));
   }
+ */
 
-  constructor(private store: Store<AppState>, private route: ActivatedRoute) { }
 
-  ngOnInit() {
-    this.subs = [this.route.params.pipe(
-      map(p => p['key']),
-      mergeMap(key => this.store.select(s => s.statistics).pipe(map(s => s[key]))), )
-      .subscribe(s => this.state = s)];
-
-  }
-  ngOnDestroy() {
-    this.subs.map(sub => sub.unsubscribe());
-  }
 }
diff --git a/src/app/components/statistics/statistics-value/statistics-value.component.html b/src/app/components/statistics/statistics-value/statistics-value.component.html
@@ -1,15 +1,7 @@
-<div class="row">
-    <div class="col-xs-8">
-        <span style="margin-right:10px">
-            <strong>{{index | number:'2.0-0'}}</strong>
-        </span>
-        <span>
-            <strong>
-            {{label}}
-          </strong>
-        </span>
-    </div>
-    <div class="col-xs-4 text-center">
-        {{value}}
-    </div>
-</div>
+ <div class="d-flex flex-row justify-content-between p-2">
+     <div class="d-flex flex-row">
+        <div class="mr-4 ml-1">{{index}}</div>
+        <div>{{label}}</div>
+     </div>
+     <div class="mr-4">{{value}}</div>
+ </div>
diff --git a/src/app/components/statistics/statistics-value/statistics-value.component.scss b/src/app/components/statistics/statistics-value/statistics-value.component.scss
@@ -1,3 +0,0 @@
-.row {
-  padding: 10px 25px;
-}

diff --git a/src/app/components/statistics/statistics.component.html b/src/app/components/statistics/statistics.component.html
@@ -1,9 +1,11 @@
-<div *ngIf="anyStatistics" class="row">
-    <div class="col-md-6 col-lg-4" style="margin-top:20px" [class.hidden]="!canShowItem(item)" *ngFor="let item of statisticsState">
-        <app-statistics-card *ngIf="canShowItem(item)" [item]="item">
-        </app-statistics-card>
+<div class="container-fluid">
+    <div *ngIf="anyStatistics" class="row">
+        <div class="col-md-6 col-lg-4 mb-4" [class.hidden]="!canShowItem(item)" *ngFor="let item of statisticsState">
+            <app-statistics-card *ngIf="canShowItem(item)" [item]="item" [sliceNumber]="5">
+            </app-statistics-card>
+        </div>
+    </div>
+    <div *ngIf="!anyStatistics">
+        <app-loading-indicator></app-loading-indicator>
     </div>
-</div>
-<div *ngIf="!anyStatistics">
-    <app-loading-indicator></app-loading-indicator>
 </div>
diff --git a/src/app/components/statistics/statistics.component.ts b/src/app/components/statistics/statistics.component.ts
@@ -8,6 +8,8 @@ import { Subscription } from 'rxjs';
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import {values} from 'lodash';
 
+
+
 @Component({
   selector: 'app-statistics',
   templateUrl: './statistics.component.html',
@@ -20,7 +22,7 @@ export class StatisticsComponent implements OnInit, OnDestroy {
 
   anyStatistics = false;
 
-  constructor(private http: ApiService, private store: Store<AppState>) { }
+  constructor(private store: Store<AppState>) { }
 
 
   canShowItem(item: StatisticsStateItem) {
@@ -42,4 +44,6 @@ export class StatisticsComponent implements OnInit, OnDestroy {
     this.sub.unsubscribe();
   }
 
+
+
 }