From e5aa942e31ae32c4d1e3029fe4e17e99a159adee Mon Sep 17 00:00:00 2001
From: Jonathan Bernard <jonathan@jdbernard.com>
Date: Wed, 10 Apr 2019 10:55:16 -0500
Subject: [PATCH] web: add filter to measures page, cleanup styling.

---
 .../measure-summaries/MeasureSummary.vue      |  6 +++--
 .../measure-summaries/measure-summary.scss    |  8 ++++++-
 web/src/models.d.ts                           |  1 +
 web/src/views/Measures.vue                    | 24 ++++++++++++-------
 web/src/views/measures.scss                   | 11 +++++++--
 web/src/views/measures.ts                     |  1 +
 web/src/views/nav-bar.ts                      |  4 +++-
 7 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/web/src/components/measure-summaries/MeasureSummary.vue b/web/src/components/measure-summaries/MeasureSummary.vue
index 1d1836e..a22146c 100644
--- a/web/src/components/measure-summaries/MeasureSummary.vue
+++ b/web/src/components/measure-summaries/MeasureSummary.vue
@@ -1,6 +1,8 @@
 <template>
-  <div class="measure-summary" :data-name="'measure-' + measure.slug">
-    <h2>{{measure.name}}</h2>
+  <div v-if="measure.config.isVisible" class="measure-summary" :data-name="'measure-' + measure.slug">
+    <h2><router-link
+        :to="'/measures/' + measure.slug">
+        {{measure.name}}</router-link></h2>
     <SimpleSummaryGraph v-if="measure.config.type === 'simple'"
       :measure=measure :measurements=measurements />
     <ListSummary v-if="measure.config.type === 'list'"
diff --git a/web/src/components/measure-summaries/measure-summary.scss b/web/src/components/measure-summaries/measure-summary.scss
index 6bb0562..0782a76 100644
--- a/web/src/components/measure-summaries/measure-summary.scss
+++ b/web/src/components/measure-summaries/measure-summary.scss
@@ -3,7 +3,13 @@
 .measure-summary {
   display: inline-block;
 
-  h2 { 
+  h2 {
     border-bottom: solid thin $fg-primary;
+
+    & > a {
+      color: $fg-primary;
+      cursor: pointer;
+      text-decoration: none;
+    }
   }
 }
diff --git a/web/src/models.d.ts b/web/src/models.d.ts
index 937a9bf..5065129 100644
--- a/web/src/models.d.ts
+++ b/web/src/models.d.ts
@@ -16,6 +16,7 @@ export interface LoginSubmit {
 
 export interface MeasureConfig {
   type: MeasureType;
+  isVisible: boolean;
 }
 
 export interface ListMeasureConfig extends MeasureConfig { }
diff --git a/web/src/views/Measures.vue b/web/src/views/Measures.vue
index 6e1248b..c1f0e5f 100644
--- a/web/src/views/Measures.vue
+++ b/web/src/views/Measures.vue
@@ -2,15 +2,23 @@
   <div id="measures">
     <div class=header-action>
       <h1>Things You Are Measuring</h1>
-      <button class=btn-action>Add Measure</button>
+      <input
+        type=text
+        name=measureFilter
+        placeholder='filter by name...'
+        v-model=filter />
+      <router-link to=/new/measure class=btn-action>Add Measure</router-link>
+    </div>
+    <div class=measure-list>
+      <MeasureSummary
+        v-for="(measure, slug) in measures"
+        v-show="measure.slug.startsWith(filter)"
+        :measure=measure />
+      <!--<MeasureSummary
+        v-for="(measure, slug) in measures"
+        :key="slug"
+        :measure=measure />-->
     </div>
-    <MeasureSummary
-      v-for="(measure, slug) in measures"
-      :measure=measure />
-    <!--<MeasureSummary
-      v-for="(measure, slug) in measures"
-      :key="slug"
-      :measure=measure />-->
   </div>
 </template>
 <script lang="ts" src="./measures.ts"></script>
diff --git a/web/src/views/measures.scss b/web/src/views/measures.scss
index c647f19..83a154d 100644
--- a/web/src/views/measures.scss
+++ b/web/src/views/measures.scss
@@ -1,3 +1,10 @@
-#measures {
-  flex-grow: 1;
+@import '~@/styles/vars';
+
+.header-action {
+  input {
+    border: solid 2px $color1;
+    border-radius: 4px;
+    margin-left: auto;
+    margin-right: 2rem;
+  }
 }
diff --git a/web/src/views/measures.ts b/web/src/views/measures.ts
index e391136..be039bf 100644
--- a/web/src/views/measures.ts
+++ b/web/src/views/measures.ts
@@ -8,6 +8,7 @@ import { measureStore } from '@/store';
 })
 export class Measures extends Vue {
   private get measures() { return measureStore.measures; }
+  private filter: string = '';
 }
 
 export default Measures;
diff --git a/web/src/views/nav-bar.ts b/web/src/views/nav-bar.ts
index b2596bd..baf34fe 100644
--- a/web/src/views/nav-bar.ts
+++ b/web/src/views/nav-bar.ts
@@ -13,7 +13,7 @@ library.add(faAngleDoubleLeft, faAngleDoubleRight, faHome, faPencilRuler, faThLa
     // UiIconButton
   }
 })
-export default class NavBar extends Vue {
+export class NavBar extends Vue {
   private collapsed: boolean;
 
   constructor() {
@@ -29,3 +29,5 @@ export default class NavBar extends Vue {
   public get user()     { return userStore.user;        }
   public get measures() { return measureStore.measures; }
 }
+
+export default NavBar;