Reimplement <dougal-project-settings-online-line-name-format/>.

Closes #297.

lib/www/client/source/src/views/ProjectSettings.vue

@@ -67,6 +67,7 @@
           :is="activeComponent"
           v-bind="activeValues"
           v-model.sync="configuration"
+          @update="activeUpdateHandler"
           @close="deselect"
         ></component>
       </v-col>
@@ -279,6 +280,7 @@ export default {
   data () {
     return {
       configuration: null,
+      settings: null,
       active: [],
       open: [],
       files: [],
@@ -420,8 +422,17 @@ export default {
           id: "line_name_format",
           name: "Line name format",
           values: (obj) => ({
-            lineNameInfo: obj?.online?.line?.lineNameInfo
-          })
+            fields: this.makeSection(obj, "online.line.lineNameBuilder.fields", []),
+            values: this.makeSection(obj, "online.line.lineNameBuilder.values",
+              Object.fromEntries(
+                Object.keys(this.settings.lineNameBuilder.properties ?? {}).map( k => [k, undefined] ))),
+            properties: this.settings.lineNameBuilder.properties ?? {}
+          }),
+          update: (obj) => {
+            const configuration = structuredClone(this.configuration);
+            deepSet(configuration, ["online", "line", "lineNameBuilder"], obj);
+            this.configuration = configuration;
+          }
         },
         {
           id: "planner_settings",
@@ -518,6 +529,12 @@ export default {
         this.activeItem.values(this.configuration);
     },
 
+    activeUpdateHandler () {
+      return this.activeItem?.update ?? ((obj) => {
+        console.warn("Unhandled update event on", this.activeItem?.id, obj);
+      })
+    },
+
     surveyState: {
       get () {
         return !this.configuration?.archived;
@@ -559,6 +576,35 @@ export default {
 
   methods: {
 
+    makeSection (obj, path, defaultVaue) {
+
+      function reduced (obj = {}, path = []) {
+        return path.reduce( (acc, cur) =>
+          {
+            if (!(cur in acc)) {
+              acc[cur] = {} ;
+            };
+            return acc[cur]
+          }, obj);
+      }
+
+      if (!obj) {
+        obj = {};
+      }
+
+      if (typeof path == "string") {
+        path = path.split(".");
+      }
+
+      let value = reduced(obj, path);
+
+      const key = path.pop();
+      if (!Object.keys(value ?? {}).length && defaultVaue !== undefined) {
+        reduced(obj, path)[key] = defaultVaue;
+      }
+      return reduced(obj, path)[key];
+    },
+
     async getConfiguration () {
       this.configuration = null;
       const url = `/project/${this.$route.params.project}/configuration`;
@@ -571,6 +617,21 @@ export default {
       this.dirty = false;
     },
 
+    async getSettings () {
+      this.settings = null;
+      let url = `/project/${this.$route.params.project}/linename/properties`;
+      const init = {
+        headers: {
+          "If-None-Match": "" // Ensure we get a fresh response
+        }
+      };
+      this.settings = {
+        lineNameBuilder: {
+          properties: await this.api([url, init])
+        }
+      };
+    },
+
     makeTree (obj, id=0) {
       const isObject = typeof obj === "object" && !Array.isArray(obj) && obj !== null;
       return isObject
@@ -681,6 +742,7 @@ export default {
   },
 
   async mounted () {
+    this.getSettings();
     this.getConfiguration();
   },