From b8b0a43df119370fd9b9eb5fea32f5c764e5bbcc Mon Sep 17 00:00:00 2001
From: Daniel Ceregatti <Daniel.Ceregatti@PolicyMap.com>
Date: Fri, 3 Nov 2023 16:13:14 -0700
Subject: [PATCH] WIP on web UI: Make selected items show as selected. Break
 out XML file handling so the tree component could just handle elements and
 leave the XML parsing to the parent. Sort mods by name, not id.

---
 web/docroot/src/components/Modinfo.vue |   8 +-
 web/docroot/src/components/Mods.vue    |   9 +-
 web/docroot/src/components/XmlFile.vue |  28 +++++
 web/docroot/src/components/XmlTree.vue | 135 +++++++------------------
 web/docroot/src/css/index.css          |   6 +-
 5 files changed, 79 insertions(+), 107 deletions(-)
 create mode 100644 web/docroot/src/components/XmlFile.vue

diff --git a/web/docroot/src/components/Modinfo.vue b/web/docroot/src/components/Modinfo.vue
index d0ef060..61843c3 100644
--- a/web/docroot/src/components/Modinfo.vue
+++ b/web/docroot/src/components/Modinfo.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { useFetch } from "@vueuse/core"
-import xmlTree from '@/components/XmlTree.vue'
+import XmlFile from '@/components/XmlFile.vue'
 import { useAppStore } from '@/stores/app.js'
 const store = useAppStore()
 import { config } from '@/config'
@@ -29,7 +29,7 @@ const { data, error } = useFetch(() => config.baseUrl + `/mod/${store.modId}`, {
           <ul>
             <li v-for="info in data.customXML">
               <a
-                :class="'simulink xmlfile ' + info.name"
+                :class="'simulink xmlfile ' + (store.modFile === info.name ? 'active' : '')"
                 @click="store.modFile=info.name"
               >
                 {{ info.name }}
@@ -39,8 +39,8 @@ const { data, error } = useFetch(() => config.baseUrl + `/mod/${store.modId}`, {
         </div>
       </div>
       <div class="col-1"></div>
-      <div v-if="store.modFile">
-        <xml-tree :file="store.modFile" :mod-id="store.modId" />
+      <div>
+        <XmlFile />
       </div>
     </div>
   </div>
diff --git a/web/docroot/src/components/Mods.vue b/web/docroot/src/components/Mods.vue
index 9d638cf..22b06cc 100644
--- a/web/docroot/src/components/Mods.vue
+++ b/web/docroot/src/components/Mods.vue
@@ -26,7 +26,7 @@ const { data, error } = useFetch(config.baseUrl + '/mods', {
             <th>Mod Name</th>
           </tr>
           <template
-              v-for="mod in data.mods"
+              v-for="mod in data.mods.sort( (a,b) => { return a.name.localeCompare(b.name) } )"
           >
             <tr>
               <td>
@@ -38,7 +38,12 @@ const { data, error } = useFetch(config.baseUrl + '/mods', {
                 </a>
               </td>
               <td>
-                <a class="simulink" @click="store.modId=parseInt(mod.id)">{{ mod.name }}</a>
+                <a
+                    :class="'simulink' + (store.modId === parseInt(mod.id) ? ' active' : '')"
+                    @click="store.modFile='';store.modId=parseInt(mod.id)"
+                >
+                  {{ mod.name }}
+                </a>
               </td>
             </tr>
           </template>
diff --git a/web/docroot/src/components/XmlFile.vue b/web/docroot/src/components/XmlFile.vue
new file mode 100644
index 0000000..4ca0a32
--- /dev/null
+++ b/web/docroot/src/components/XmlFile.vue
@@ -0,0 +1,28 @@
+<script setup>
+import { useFetch } from '@vueuse/core'
+import { config } from '@/config'
+import { useAppStore } from '@/stores/app.js'
+import XmlTree from '@/components/XmlTree.vue'
+const store = useAppStore()
+const { data, error } = await useFetch(() => config.baseUrl + `/mod/${store.modId}/${store.modFile}`, {
+  immediate: false,
+  refetch: true,
+  afterFetch(response) {
+    const parser = new DOMParser()
+    try {
+      response.data = parser.parseFromString(response.data, "text/xml").documentElement
+    } catch(e) {
+      console.error(e)
+      response.error = e
+    }
+    return response
+  }
+}).get()
+</script>
+
+<template>
+  <div v-if="error">{{ error }}</div>
+  <div v-else-if="data">
+    <XmlTree :element="data" :depth="0" />
+  </div>
+</template>
diff --git a/web/docroot/src/components/XmlTree.vue b/web/docroot/src/components/XmlTree.vue
index aaa4d91..23a11da 100644
--- a/web/docroot/src/components/XmlTree.vue
+++ b/web/docroot/src/components/XmlTree.vue
@@ -1,114 +1,49 @@
+<script setup>
+const props = defineProps({
+  depth: Number,
+  element: [Element, Text],
+})
+function collapse(e) {
+  console.log(e)
+  // e.children?.forEach(x => x.classList?.add("d-none"))
+}
+function children(e) {
+  let children = []
+  let node = e.firstChild
+  while (node) {
+    children.push(node)
+    node = node.nextSibling
+  }
+  return children
+}
+</script>
+
 <template>
-  <div
-      v-if="elem.nodeType === 1 && isText"
-      :style="'padding-left: ' + (depth * 10) + 'px'"
-      @click="collapse"
-  >
-    <span class="xml-tree-tag">&lt;{{elem.nodeName}}</span>
-    <span v-if="elem.hasAttributes()" v-for="attribute in elem.attributes">
-        <span class="xml-tree-attr">&nbsp;{{attribute.name}}</span>
-        <span>=</span>
-        <span class="xml-tree-attr">"{{attribute.value}}"</span>
-    </span>
-    <span class="xml-tree-tag">></span>
-    <span>{{this.children[0].data.trim()}}</span>
-    <span class="xml-tree-tag">&lt;/{{elem.nodeName}}></span>
-  </div>
-  <div v-else :style="'padding-left: ' + (depth * 10) + 'px'">
-    <span v-if="elem.nodeType === 1" class="d-flex">
+  <div v-if="props.element.nodeType === 1" :style="'padding-left: ' + (props.depth * 10) + 'px'">
+    <span class="d-flex">
         <span
-            v-if="elem.children.length > 0"
+            v-if="props.element.children.length > 0"
             class="bi-dash simulink text-center"
             @click="collapse"
         />
-        <span v-else></span>
-        <span class="xml-tree-tag">&lt;{{elem.nodeName}}</span>
-        <span v-if="elem.hasAttributes()" v-for="attribute in elem.attributes">
-            <span class="xml-tree-attr">&nbsp;{{attribute.name}}</span>
+        <span>&lt;{{props.element.nodeName}}</span>
+        <span v-if="props.element.hasAttributes()" v-for="attribute in props.element.attributes">
+            <span>&nbsp;{{attribute.name}}</span>
             <span>=</span>
-            <span class="xml-tree-attr">"{{attribute.value}}"</span>
+            <span>"{{attribute.value}}"</span>
         </span>
-        <span v-if="elem.children.length === 0" class="xml-tree-tag">&nbsp;/></span>
-        <span v-else class="xml-tree-tag">></span>
+        <span v-if="props.element.children.length === 0">&nbsp;/</span>
+        <span>></span>
+    </span>
+    <span v-for="child in children(props.element)">
+      <XmlTree v-if="child.nodeType !== 8" :element="child" :depth="props.depth + 1" />
     </span>
-    <span v-if="elem.nodeType === 3">{{elem.data.trim()}}</span>
-    <div v-for="child in children">
-      <xml-tree v-if="child.nodeType !== 8" :element="child" :d="depth" />
-    </div>
     <span
-        v-if="elem.nodeType === 1 && elem.children.length > 0"
+        v-if="props.element.nodeType === 1"
         style="padding-left: -10px"
     >
-        <span style="padding-left: 20px" class="xml-tree-tag">&lt;/{{elem.nodeName}}></span>
+        <span>&lt;/{{props.element.nodeName}}></span>
     </span>
   </div>
+  <span v-if="props.element.nodeType === 3">{{props.element.data.trim()}}</span>
 </template>
-
-<script>
-import { useFetch } from '@vueuse/core'
-import { config } from '@/config'
-export default {
-  name: "xmlTree",
-  props: {
-    d: {
-      type: Number,
-      default: 0
-    },
-    element: {
-      type: [Element, Text],
-      default: undefined
-    },
-    file: {
-      type: String,
-      default: ''
-    },
-    modId: {
-      type: Number,
-      default: 0
-    }
-  },
-  data() {
-    return {
-      depth: 1
-    }
-  },
-  methods: {
-    collapse() {
-      this.children.forEach(x => x.classList?.add("d-none"))
-    },
-    log(message) {
-      console.log(message)
-    }
-  },
-  computed: {
-    async elem() {
-      this.depth = parseInt(this.d) + 1
-      if (this.element) {
-        return this.element
-      } else if(this.file) {
-        const { data } = await useFetch(config.baseUrl + `/mod/${this.modId}/${this.file}`)
-        const parser = new DOMParser()
-        const xmlDoc = parser.parseFromString(data, "text/xml")
-        return xmlDoc.documentElement
-      }
-    },
-    children() {
-      let children = []
-      let node = this.elem.firstChild
-      while (node) {
-        children.push(node)
-        node = node.nextSibling
-      }
-      return children
-    },
-    isText() {
-      if (this.children.length === 1) {
-        if (this.children[0].nodeType === 3) {
-          return true
-        }
-      }
-      return false
-    }
-  }
-}
-</script>
diff --git a/web/docroot/src/css/index.css b/web/docroot/src/css/index.css
index 21fdb4a..e3c12f7 100644
--- a/web/docroot/src/css/index.css
+++ b/web/docroot/src/css/index.css
@@ -7,11 +7,15 @@ th, td {
     padding-right: 10px
 }
 
+.active {
+    background-color: cyan;
+}
+
 .simulink {
     cursor: pointer;
     text-underline: blue;
 }
 
 .simulink:hover {
-    background-color: cyan;
+    background-color: green;
 }