web: add filter to measures page, cleanup styling.

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'"

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

web/src/models.d.ts

@@ -16,6 +16,7 @@ export interface LoginSubmit {
 
 export interface MeasureConfig {
   type: MeasureType;
+  isVisible: boolean;
 }
 
 export interface ListMeasureConfig extends MeasureConfig { }

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;