web: add filter to measures page, cleanup styling.

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>

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;
+  }
 }

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;

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;