From f48d05b5188df06e3e4494510cb6f780d6b8c982 Mon Sep 17 00:00:00 2001
From: Baptiste Lemoine <contact@cipherbliss.com>
Date: Wed, 2 Oct 2019 14:45:50 +0200
Subject: [PATCH] :zap: choice component JS logic and type constraints. demo
 for dev environment

---
 .../vote-choice/vote-choice.component.html    | 59 ++++++++++++++-----
 .../vote-choice/vote-choice.component.scss    | 44 ++++++++------
 src/app/vote-choice/vote-choice.component.ts  | 56 +++++++++++++++---
 3 files changed, 118 insertions(+), 41 deletions(-)

diff --git a/src/app/vote-choice/vote-choice.component.html b/src/app/vote-choice/vote-choice.component.html
index 63f167a4..ef5aae72 100644
--- a/src/app/vote-choice/vote-choice.component.html
+++ b/src/app/vote-choice/vote-choice.component.html
@@ -1,15 +1,46 @@
 <div class="choice_container">
-  <section id="info">
-  <h3>Jeudi <span>17</span> aout</h3>
-  <h3>08:00</h3>
-  </section>
-  <section id="nombre_vote">
-    <p>14</p><img width="20px" height="21px" src="../../assets/img/votant-sur.svg">
-    <p>76</p><img width="22px" height="24px" src="../../assets/img/votant-pas-sur.svg">
-    </section>
-<section id="vote">
-  <img width="16px" height="12px" src="../../assets/img/check.svg">
-  <img width="19px" height="15px" src="../../assets/img/check-2.svg">
-  <img width="12px" height="12px" src="../../assets/img/croix.svg">
-  </section>
-  </div>
+    <div class="info">
+        <div class="date" *ngIf="choice.date">
+            <div class="date-day">
+                {{choice.date | date:'Y-m-d'}}
+            </div>
+            <div class="date-hour">
+                {{choice.date | date:'H:i:s'}}
+            </div>
+
+            <div class="description">
+                {{choice.text}}
+            </div>
+            <h3>Jeudi <span>17</span> aout</h3>
+            <h3>08:00</h3>
+        </div>
+        <div id="nombre_vote">
+        <span class="count-yes">
+            <p>{{choice.votesCount.yes}}</p><img width="20px" height="21px" src="../../assets/img/votant-sur.svg">
+        </span>
+            <span class="count-maybe">
+            <p>{{choice.votesCount.maybe}}</p><img width="22px" height="24px" src="../../assets/img/votant-pas-sur.svg">
+        </span>
+            <span class="count-no">
+            <p>{{choice.votesCount.no}}</p>
+        </span>
+            <span class="count-didnt-answer">
+            <p>{{choice.votesCount.notAnswered}}</p>
+        </span>
+        </div>
+        <div class="vote">
+            <!-- show only the yes check if the config is set to simpleAnswer -->
+            <img width="16px" height="12px"
+                 src="../../assets/img/check.svg"
+                 (click)="setAnswserTo('yes')">
+            <img width="19px" height="15px"
+                 src="../../assets/img/check-2.svg"
+                 (click)="setAnswserTo('maybe')"
+                 *ngIf="!choice.simpleAnswer">
+            <img width="12px" height="12px"
+                 src="../../assets/img/croix.svg"
+                 (click)="setAnswserTo('no')"
+                 *ngIf="!choice.simpleAnswer">
+        </div>
+    </div>
+</div>
diff --git a/src/app/vote-choice/vote-choice.component.scss b/src/app/vote-choice/vote-choice.component.scss
index 5695896c..f33bae66 100644
--- a/src/app/vote-choice/vote-choice.component.scss
+++ b/src/app/vote-choice/vote-choice.component.scss
@@ -1,26 +1,32 @@
-.choice_container{
-  width:320px;
-  height:172px;
-  box-shadow: 0 3px 6px 0 rgba(black, 0.2);
-  overflow: auto;
-  display:flex;
+.choice_container {
+    width: 320px;
+    height: 172px;
+    box-shadow: 0 3px 6px 0 rgba(black, 0.2);
+    overflow: auto;
+    display: flex;
 }
-#vote img{
-border: 1px solid  #aeafb1;
-border-radius: 48px;
+
+#vote img {
+    border: 1px solid #aeafb1;
+    border-radius: 48px;
 }
-h2,h3{
-  font-weight: normal;
+
+h2, h3 {
+    font-weight: normal;
 }
-span{
-  font-weight: bold;
-  font-size:24px;
+
+span {
+    font-weight: bold;
+    font-size: 24px;
 }
-#nombre_vote{
-  vertical-align: middle;
-  float:left;
+
+#nombre_vote {
+    vertical-align: middle;
+    float: left;
 
 }
-#nombre_vote p{
-  line-height: 20px;
+
+// TODO intricate selectors
+#nombre_vote p {
+    line-height: 20px;
 }
diff --git a/src/app/vote-choice/vote-choice.component.ts b/src/app/vote-choice/vote-choice.component.ts
index 32b684dc..95097f32 100644
--- a/src/app/vote-choice/vote-choice.component.ts
+++ b/src/app/vote-choice/vote-choice.component.ts
@@ -1,15 +1,55 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, Input} from '@angular/core';
+import {environment} from "../../environments/environment";
 
+interface VoteChoice {
+    votesCount: {
+        yes: number
+        no: number
+        maybe: number
+        notAnswered: number
+    };
+    text: string;
+    date: Date;
+    answer: 'yes' | 'no' | 'maybe' | null;
+    simpleAnswer: boolean; // enable if we display only a togglable "yes"
+}
+
+/**
+ * each vote choice takes a configuration from the container of all choices.
+ * this component is used to select a date choice, or a text answer
+ */
 @Component({
-  selector: 'framadate-vote-choice',
-  templateUrl: './vote-choice.component.html',
-  styleUrls: ['./vote-choice.component.scss']
+    selector: 'framadate-vote-choice',
+    templateUrl: './vote-choice.component.html',
+    styleUrls: ['./vote-choice.component.scss']
 })
-export class VoteChoiceComponent implements OnInit {
+export class VoteChoiceComponent {
 
-  constructor() { }
+    @Input() choice: VoteChoice;
 
-  ngOnInit() {
-  }
+    constructor() {
+        if (!environment.production) {
+            // demo content for dev env
+            this.choice = {
+                date: new Date(),
+                text: 'description ',
+                simpleAnswer: false
+            }
+        }
+    }
+
+    setAnswserTo(newAnswer: 'yes' | 'no' | 'maybe' | null) {
+        if (this.choice.simpleAnswer) {
+            // only toggle yes to no
+            if (this.choice.answer && this.choice.answer === 'yes') {
+                this.choice.answer = 'no';
+            } else {
+                this.choice.answer = 'yes';
+            }
+
+        } else {
+            this.choice.answer = newAnswer;
+        }
+    }
 
 }