web: WIP work on adding create measure functionality in the UI.

web/src/components/measure-config/MeasureConfigForm.vue

@@ -2,12 +2,18 @@
   <fieldset>
     <div>
       <label for=measureType>Type</label>
-      <select name=measureType v-model=config.type>
+      <select
+        :disabled=disabled
+        name=measureType
+        v-model=value.type>
         <option value=simple>Simple</option>
         <option value=list>List</option>
       </select>
     </div>
-    <div><input type=checkbox v-model=config.isVisible>Show by default.</input></div>
+    <div>
+      <label for=measureIsVisible>Show by default.</label>
+      <input type=checkbox v-model=value.isVisible :disabled=disabled />
+    </div>
     <!--<ListMeasureConfigForm :config=config v-show="config.type === 'list'"/>-->
   </fieldset>
 </template>

web/src/components/measure-config/measure-config-form.ts

@@ -1,10 +1,17 @@
-import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import { Component, Emit, Prop, Vue, Watch } from 'vue-property-decorator';
 import { logService } from '@/services/logging';
 import { Measure, MeasureConfig, MeasureType } from '@/models';
 
 @Component({})
 export class MeasureConfigForm extends Vue {
-  @Prop({}) public config!: MeasureConfig;
+  @Prop({}) public value!: MeasureConfig;
+  @Prop({}) public disabled: boolean = false;
+
+  @Watch('value', { immediate: true, deep: true })
+  @Emit('input')
+  private onConfigChanged(newVal: MeasureConfig, oldVal: MeasureConfig) {
+    return newVal;
+  }
 }
 
 export default MeasureConfigForm;