From ad180b00cc2a99929860666804029431b87ccef8 Mon Sep 17 00:00:00 2001
From: Patrick Gebhardt <pjgebhardt@icloud.com>
Date: Mon, 22 Jun 2020 18:33:26 +0200
Subject: [PATCH] Change simple search to stepper

---
 frontend/src/app/app.module.ts                |  8 +-
 .../search-input/search-input.component.html  | 74 +++++++++----------
 .../search-input/search-input.component.scss  | 24 +++++-
 3 files changed, 66 insertions(+), 40 deletions(-)

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index da36f83..af16803 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -22,10 +22,13 @@ import {TranslateModule, TranslateService} from '@ngx-translate/core';
 import * as enLang from '../assets/i18n/en.json';
 import {HttpClientModule} from '@angular/common/http';
 import {
+  MatBadgeModule,
   MatButtonToggleModule,
   MatCheckboxModule,
   MatDialogModule,
   MatDividerModule,
+  MatRadioModule,
+  MatStepperModule,
   MatTabsModule,
   MatTooltipModule
 } from '@angular/material';
@@ -83,7 +86,10 @@ import {DeviceDetectorModule} from 'ngx-device-detector';
     MatTooltipModule,
     MatDialogModule,
     DeviceDetectorModule,
-    MatTabsModule
+    MatTabsModule,
+    MatBadgeModule,
+    MatStepperModule,
+    MatRadioModule
   ],
   providers: [],
   bootstrap: [AppComponent],
diff --git a/frontend/src/app/components/search-input/search-input.component.html b/frontend/src/app/components/search-input/search-input.component.html
index b596e30..477c50a 100644
--- a/frontend/src/app/components/search-input/search-input.component.html
+++ b/frontend/src/app/components/search-input/search-input.component.html
@@ -1,41 +1,41 @@
 <mat-card class="search-container">
-  <section class="group">
-    <h2>When is your trip?</h2>
-    <mat-form-field appearance="outline">
-      <mat-label>Start</mat-label>
-      <input (change)="checkDates()" [(ngModel)]="from" [min]="today" matInput required type="date">
-    </mat-form-field>
-    <mat-form-field appearance="outline">
-      <mat-label>End</mat-label>
-      <input (change)="checkDates()" [(ngModel)]="to" [min]="from" matInput required type="date">
-    </mat-form-field>
-  </section>
-
-  <section>
-    <h2>What would you prefer?</h2>
-    <div *ngFor="let key of multiPresetsKeys" class="sub-group">
-      <span class="label">{{key|translate}}:</span><br>
-      <mat-button-toggle-group [ngModel]="multiPresetSelection[key]" [value]="undefined">
-        <mat-button-toggle
-          #btn
-          (click)="btn.checked = onMultiPresetSelect(preset)"
-          *ngFor="let preset of multiPresets.get(key)"
-          [value]="preset.preset_id"
-        >
-          {{preset.tag_label|translate}}
-        </mat-button-toggle>
-      </mat-button-toggle-group>
-    </div>
-  </section>
-
-  <section>
-    <h2>Whats most important to you?</h2>
-    <div class="vertical">
-      <mat-checkbox *ngFor="let preset of singlePresets"
-                    [(ngModel)]="singlePresetSelection[preset.preset_id]">{{preset.tag_label|translate}}</mat-checkbox>
-    </div>
-  </section>
-
+  <span matCardTitle>Search</span>
+  <mat-vertical-stepper>
+    <mat-step>
+      <ng-template matStepLabel>When is your trip?</ng-template>
+      <div class="vertical-wrap">
+        <mat-form-field appearance="outline">
+          <mat-label>Start</mat-label>
+          <input (change)="checkDates()" [(ngModel)]="from" [min]="today" matInput required type="date">
+        </mat-form-field>
+        <mat-form-field appearance="outline">
+          <mat-label>End</mat-label>
+          <input (change)="checkDates()" [(ngModel)]="to" [min]="from" matInput required type="date">
+        </mat-form-field>
+      </div>
+    </mat-step>
+    <mat-step>
+      <ng-template matStepLabel>What climate would you prefer?</ng-template>
+      <div *ngFor="let key of multiPresetsKeys" class="sub-group">
+        <span class="label">{{key|translate}}:</span><br>
+        <mat-radio-group [ngModel]="multiPresetSelection[key]" [value]="undefined">
+          <mat-radio-button
+            #btn
+            (click)="btn.checked = onMultiPresetSelect(preset)"
+            *ngFor="let preset of multiPresets.get(key)"
+            [value]="preset.preset_id"
+          >{{preset.tag_label|translate}}</mat-radio-button>
+        </mat-radio-group>
+      </div>
+    </mat-step>
+    <mat-step>
+      <ng-template matStepLabel>Whats most important to you?</ng-template>
+      <div class="vertical">
+        <mat-checkbox *ngFor="let preset of singlePresets"
+                      [(ngModel)]="singlePresetSelection[preset.preset_id]">{{preset.tag_label|translate}}</mat-checkbox>
+      </div>
+    </mat-step>
+  </mat-vertical-stepper>
   <button (click)="onSearch()" [disabled]="!from || !to" class="search-btn" color="primary" mat-flat-button>Search
     <mat-icon matSuffix>search</mat-icon>
   </button>
diff --git a/frontend/src/app/components/search-input/search-input.component.scss b/frontend/src/app/components/search-input/search-input.component.scss
index af4bcc8..dde2a4f 100644
--- a/frontend/src/app/components/search-input/search-input.component.scss
+++ b/frontend/src/app/components/search-input/search-input.component.scss
@@ -15,14 +15,34 @@
 }
 
 .sub-group {
-  margin-bottom: 0.5rem;
+  margin-bottom: 2rem;
+  display: flex;
+  flex-direction: column;
 
-  > .label {
+  .label {
     font-weight: bold;
   }
+
+  mat-radio-group {
+    display: flex;
+    flex-direction: column;
+  }
+
+  mat-radio-button {
+    margin: 0 1rem 0.5rem 0;
+    width: 40%;
+  }
 }
 
 .vertical {
   display: flex;
   flex-direction: column;
 }
+
+.vertical-wrap {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+