Migrating UI for new data structures

app/imports/ui/properties/forms/shared/IconColorMenu.vue

@@ -0,0 +1,68 @@
+<template lang="html">
+  <v-menu offset-y>
+    <template #activator="{ on, attrs }">
+      <v-badge
+        icon="mdi-pencil"
+        overlap
+      >
+        <v-btn
+          icon
+          :color="model.color"
+          outlined
+          v-bind="attrs"
+          v-on="on"
+        >
+          <property-icon
+            :model="model"
+            :color="model.color"
+          />
+        </v-btn>
+      </v-badge>
+    </template>
+    <v-list>
+      <v-list-item>
+        <v-list-item-title>
+          <icon-picker
+            label="Icon"
+            :value="model.icon"
+            :error-messages="errors.icon"
+            @change="(value, ack) =>$emit('change', {path: ['icon'], value, ack})"
+          />
+        </v-list-item-title>
+      </v-list-item>
+      <v-list-item>
+        <v-list-item-title>
+          <color-picker
+            :value="model.color"
+            @input="value =>$emit('change', {path: ['color'], value})"
+          />
+        </v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script lang="js">
+  import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
+  import ColorPicker from '/imports/ui/components/ColorPicker.vue';
+
+  export default {
+    components: {
+      PropertyIcon,
+      ColorPicker,
+    },
+    props: {
+      model: {
+        type: Object,
+        required: true,
+      },
+      errors: {
+        type: Object,
+        required: true,
+      },
+    },
+  }
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/properties/forms/shared/schemaFormMixin.js

@@ -4,14 +4,23 @@
  */
 import { get, toPath } from 'lodash';
 
-function resolvePath(model, path){
+function resolvePath(model, path, set){
   let arrayPath = toPath(path);
   if (arrayPath.length === 1){
     return { object: model, key: arrayPath[0] };
   }
-  let objectPath = arrayPath.slice(0, -1);
   let key = arrayPath.slice(-1);
-  let object = get(model, objectPath);
+  let objectPath = arrayPath.slice(0, -1);
+  let object = model;
+  // Ensure that nested objects exist before navigating them
+  objectPath.forEach(pathKey => {
+    let newObject = object[pathKey];
+    if (!newObject){
+      newObject = {};
+      set(object, pathKey, newObject);
+    }
+    object = newObject;
+  });
   return {object, key};
 }
 
@@ -41,7 +50,8 @@ const schemaFormMixin = {
 	methods: {
     // Sets the value at the given path
 		change({path, value, ack}){
-      let {object, key} = resolvePath(this.model, path);
+      let {object, key} = resolvePath(this.model, path, this.$set);
+
 			this.$set(object, key, value);
 			if (ack) ack();
 		},
@@ -54,7 +64,7 @@ const schemaFormMixin = {
 			if (ack) ack();
     },
     pull({path, ack}){
-      let {object, key} = resolvePath(this.model, path);
+      let {object, key} = resolvePath(this.model, path, this.$set);
       if (!object || !object.splice){
         throw `${path.join('.')} is ${object}, doesnt have "splice"`
       }