From bbe74395522b4a1022bb6a03004dc347e1dd4718 Mon Sep 17 00:00:00 2001
From: duynndu <duynnz2812@gmail.com>
Date: Wed, 15 Apr 2026 20:52:06 +0700
Subject: [PATCH] =?UTF-8?q?S=E1=BB=ADa=20l=E1=BB=97i=20convert=20sai=20xml?=
 =?UTF-8?q?=20cho=20component=20xmlViewer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 projects/shared/utils/virtual-html-parser.ts  |   1 +
 projects/shell/src/app/pages/home/home.ts     |   3 +
 .../src/components/preview/PreviewWrapper.vue |   2 +-
 .../src/components/preview/TreeView.vue       | 229 +++++++++++-------
 .../src/components/preview/XmlViewer.vue      |  69 ++++--
 5 files changed, 185 insertions(+), 119 deletions(-)

diff --git a/projects/shared/utils/virtual-html-parser.ts b/projects/shared/utils/virtual-html-parser.ts
index 90e611b..af1dd9c 100644
--- a/projects/shared/utils/virtual-html-parser.ts
+++ b/projects/shared/utils/virtual-html-parser.ts
@@ -19,6 +19,7 @@ export class VirtualHTMLParser {
     'wbr',
     'Textarea',
     'InputOTP',
+    'XmlViewer',
   ];
   static parseToTree(
     htmlString: string,
diff --git a/projects/shell/src/app/pages/home/home.ts b/projects/shell/src/app/pages/home/home.ts
index ac8ef78..a882d37 100644
--- a/projects/shell/src/app/pages/home/home.ts
+++ b/projects/shell/src/app/pages/home/home.ts
@@ -61,6 +61,9 @@ export class Home{
       <div>Ảnh đã lưu:</div>
       <img :src="data.signature" alt="signature" style="max-width:200px;border:1px solid #ccc;" />
     </div>
+  </PageA4>
+  <PageA4 style="padding:5mm">
+    <XmlViewer url="https://sample-files.com/downloads/data/xml/international.xml" />
   </PageA4>`;
   editMode = true;
   context = {
diff --git a/projects/template-editor/src/components/preview/PreviewWrapper.vue b/projects/template-editor/src/components/preview/PreviewWrapper.vue
index 56bc0e8..39b62f4 100644
--- a/projects/template-editor/src/components/preview/PreviewWrapper.vue
+++ b/projects/template-editor/src/components/preview/PreviewWrapper.vue
@@ -94,7 +94,7 @@ export default {
           size="md" v-model="hsBenhAn.NguyenNhanTuVong" value="DO_BENH" />
       </PageA4>
       <PageA4 style="padding:5mm">
-        <XmlViewer url="http://localhost:5000/Content/Upload/2026/04/13/BA26000003_du_lieu.xml" />
+        <XmlViewer url="https://sample-files.com/downloads/data/xml/international.xml" />
       </PageA4>
       `,
       context: {
diff --git a/projects/template-editor/src/components/preview/TreeView.vue b/projects/template-editor/src/components/preview/TreeView.vue
index 8ea2cf5..87180d9 100644
--- a/projects/template-editor/src/components/preview/TreeView.vue
+++ b/projects/template-editor/src/components/preview/TreeView.vue
@@ -1,75 +1,88 @@
 <template>
   <ul class="tree-view">
-    <template v-for="(value, key) in data">
-      <li v-if="key === '#text'" :key="key + '-text'">
-        <span
-          v-if="typeof value === 'string' && value.length > 80"
-          class="tree-value-block"
-          >{{ value }}</span
-        >
-        <span v-else class="tree-value">{{ value }}</span>
-      </li>
-      <template v-else-if="Array.isArray(value)">
-        <li v-for="(item, idx) in value" :key="key + '-' + idx">
-          <span @click="toggle(key + '-' + idx)" class="tree-key">
-            <span class="arrow" :class="{ open: isOpen(key + '-' + idx) }"
-              >▶</span
-            >
-            &lt;{{ key }}&gt;
-          </span>
-          <template v-if="isOpen(key + '-' + idx)">
-            <TreeView :data="item" />
-            <span class="tree-key tree-close">&lt;/{{ key }}&gt;</span>
+    <template v-if="Array.isArray(data)">
+      <TreeView v-for="(item, idx) in data" :key="idx" :data="item" />
+    </template>
+
+    <template v-else>
+      <template v-for="(value, key) in filteredEntries(data)" :key="key">
+        
+        <!-- COMMENT -->
+        <li v-if="key === '#comment'">
+          <span class="tree-comment">&lt;!-- {{ value }} --&gt;</span>
+        </li>
+
+        <!-- TEXT -->
+        <li v-else-if="key === '#text'">
+          <span class="tree-value">{{ value }}</span>
+        </li>
+
+        <!-- ARRAY -->
+        <li v-else-if="Array.isArray(value)">
+          <div v-for="(item, idx) in value" :key="idx">
+            <span class="tree-key">
+              <span @click="toggle(String(key) + idx)" class="arrow" :class="{ open: isOpen(String(key) + idx) }">▶</span>
+              &lt;{{ key }}{{ formatAttrs(item) }}&gt;
+            </span>
+
+            <template v-if="isOpen(String(key) + idx)">
+              <TreeView :data="item" />
+              <span class="tree-key">&lt;/{{ key }}&gt;</span>
+            </template>
+
+            <template v-else>
+              <div class="tree-key">&lt;/{{ key }}&gt;</div>
+            </template>
+          </div>
+        </li>
+
+        <!-- OBJECT -->
+        <li v-else-if="isObject(value)">
+          <template v-if="Object.keys(value).length === 0">
+            <span class="tree-key">
+              &lt;{{ key }}{{ formatAttrs(value) }}/&gt;
+            </span>
+          </template>
+
+          <template v-else-if="value['#text'] && Object.keys(value).length === 1">
+            <span class="tree-key">
+              &lt;{{ key }}{{ formatAttrs(value) }}&gt;
+            </span>
+            <span class="tree-value">{{ value['#text'] }}</span>
+            <span class="tree-key">&lt;/{{ key }}&gt;</span>
           </template>
+
           <template v-else>
-            <div class="tree-collapsed">
-              ...<br />
-              <span class="tree-key tree-close">&lt;/{{ key }}&gt;</span>
-            </div>
+            <span class="tree-key">
+              <span @click="toggle(key)" class="arrow" :class="{ open: isOpen(key) }">▶</span>
+              &lt;{{ key }}{{ formatAttrs(value) }}&gt;
+            </span>
+
+            <template v-if="isOpen(key)">
+              <TreeView :data="value" />
+              <span class="tree-key">&lt;/{{ key }}&gt;</span>
+            </template>
+
+            <template v-else>
+              <div class="tree-key">&lt;/{{ key }}&gt;</div>
+            </template>
           </template>
         </li>
-      </template>
-      <li v-else-if="isObject(value)" :key="key + '-obj'">
-        <template v-if="Object.keys(value).length === 0">
-          <span class="tree-key">&lt;{{ key }}/&gt;</span>
-        </template>
-        <template v-else-if="Object.keys(value).length === 1 && value['#text']">
+
+        <!-- VALUE -->
+        <li v-else>
           <span class="tree-key">&lt;{{ key }}&gt;</span>
-          <span class="tree-value">{{ value['#text'] }}</span>
-          <span class="tree-key tree-close">&lt;/{{ key }}&gt;</span>
-        </template>
-        <template v-else>
-          <span @click="toggle(key)" class="tree-key">
-            <span class="arrow" :class="{ open: isOpen(key) }">▶</span>
-            &lt;{{ key }}&gt;
-          </span>
-          <template v-if="isOpen(key)">
-            <TreeView :data="value" />
-            <span class="tree-key tree-close">&lt;/{{ key }}&gt;</span>
-          </template>
-          <template v-else>
-            <div class="tree-collapsed">
-              ...<br />
-              <span class="tree-key tree-close">&lt;/{{ key }}&gt;</span>
-            </div>
-          </template>
-        </template>
-      </li>
-      <li v-else :key="key + '-val'">
-        <span class="tree-key">&lt;{{ key }}&gt;:</span>
-        <span
-          v-if="typeof value === 'string' && value.length > 80"
-          class="tree-value-block"
-          >{{ value }}</span
-        >
-        <span v-else class="tree-value">{{ value }}</span>
-      </li>
+          <span class="tree-value">{{ value }}</span>
+          <span class="tree-key">&lt;/{{ key }}&gt;</span>
+        </li>
+
+      </template>
     </template>
   </ul>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "vue";
+import { defineComponent, ref, watch, onMounted } from "vue";
 
 export default defineComponent({
   name: "TreeView",
@@ -78,14 +91,65 @@ export default defineComponent({
   },
   setup(props) {
     const openKeys = ref<Record<string, boolean>>({});
+
     const isObject = (val: any) =>
       val && typeof val === "object" && !Array.isArray(val);
+
+    // Recursively collect all keys for open state
+    function collectKeys(obj: any, prefix = ""): string[] {
+      if (!obj || typeof obj !== "object") return [];
+      let keys: string[] = [];
+      for (const [key, value] of Object.entries(obj)) {
+        if (key === "@attributes") continue;
+        if (Array.isArray(value)) {
+          value.forEach((item, idx) => {
+            keys.push(prefix + key + idx);
+            keys = keys.concat(collectKeys(item, prefix + key + idx));
+          });
+        } else if (isObject(value)) {
+          keys.push(prefix + key);
+          keys = keys.concat(collectKeys(value, prefix + key));
+        }
+      }
+      return keys;
+    }
+
+    // Set all keys to open
+    function openAllKeys(data: any) {
+      const allKeys = collectKeys(data);
+      const openObj: Record<string, boolean> = {};
+      allKeys.forEach(k => { openObj[k] = true; });
+      openKeys.value = openObj;
+    }
+
+    // Watch for data changes to open all
+    watch(() => props.data, (val) => {
+      openAllKeys(val);
+    }, { immediate: true, deep: true });
+
     const isOpen = (key: string | number) => openKeys.value[String(key)];
+
     const toggle = (key: string | number) => {
       const k = String(key);
       openKeys.value[k] = !openKeys.value[k];
     };
-    return { isObject, isOpen, toggle };
+
+    const formatAttrs = (obj: any) => {
+      if (!obj || !obj['@attributes']) return '';
+      return ' ' + Object.entries(obj['@attributes'])
+        .map(([k, v]) => `${k}="${v}"`)
+        .join(' ');
+    };
+
+
+    const filteredEntries = (obj: any): Record<string, any> | any[] => {
+      if (!obj || typeof obj !== 'object') return {};
+      return Object.fromEntries(
+        Object.entries(obj).filter(([key]) => key !== '@attributes')
+      );
+    };
+
+    return { isObject, isOpen, toggle, formatAttrs, filteredEntries };
   },
 });
 </script>
@@ -94,49 +158,30 @@ export default defineComponent({
 .tree-view {
   list-style: none;
   padding-left: 18px;
-  font-family: "Fira Mono", "Consolas", "Menlo", "Monaco", monospace;
-  font-size: 16px;
+  font-family: monospace;
 }
+
 .tree-key {
-  cursor: pointer;
   color: #8e24aa;
-  user-select: none;
-  font-weight: 500;
-  transition: color 0.2s;
 }
+
 .tree-value {
   color: #333;
 }
+
 .arrow {
+  cursor: pointer;
+  user-select: none;
   display: inline-block;
   width: 1em;
-  color: #888;
-  transition:
-    transform 0.2s,
-    color 0.2s;
-  vertical-align: middle;
-  margin-right: 2px;
-  font-size: 1em;
+  transition: transform 0.2s;
 }
+
 .arrow.open {
   transform: rotate(90deg);
-  color: #8e24aa;
 }
-.tree-key {
-  display: inline-flex;
-  align-items: center;
-}
-.tree-value-block {
-  display: block;
-  background: #f8f8f8;
-  color: #444;
-  border-radius: 4px;
-  padding: 8px;
-  margin: 4px 0 4px 16px;
-  font-family: inherit;
-  font-size: 15px;
-  white-space: pre-wrap;
-  overflow-x: auto;
-  max-width: 100%;
+
+.tree-comment {
+  color: green;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/projects/template-editor/src/components/preview/XmlViewer.vue b/projects/template-editor/src/components/preview/XmlViewer.vue
index 0ffcf49..b9f89bd 100644
--- a/projects/template-editor/src/components/preview/XmlViewer.vue
+++ b/projects/template-editor/src/components/preview/XmlViewer.vue
@@ -1,7 +1,9 @@
 <template>
-  <div v-if="loading">Đang tải...</div>
-  <div v-else class="xml-viewer-container">
-    <TreeView v-if="parsedObject" :data="parsedObject" />
+  <div class="xml-viewer-container">
+    <div v-if="loading">Đang tải...</div>
+    <template v-else>
+      <TreeView v-if="parsedObject" :data="parsedObject" />
+    </template>
   </div>
 </template>
 
@@ -19,8 +21,6 @@
 }
 </style>
 
-
-
 <script lang="ts">
 import { defineComponent, ref, onMounted } from 'vue';
 import TreeView from './TreeView.vue';
@@ -37,68 +37,86 @@ export default defineComponent({
     const loading = ref(true);
     const error = ref('');
 
-
-
     function domToObj(node: Node): any {
-      // Nếu là text node
+      if (node.nodeType === 8) {
+        const comment = node.nodeValue?.trim();
+        return comment ? { '#comment': comment } : undefined;
+      }
       if (node.nodeType === 3) {
         const text = node.nodeValue?.trim();
         return text ? text : undefined;
       }
-      // Nếu là element node
       if (node.nodeType === 1) {
         const obj: any = {};
         const el = node as Element;
-        // Thuộc tính
+
         if (el.attributes && el.attributes.length > 0) {
           obj['@attributes'] = {};
           for (let attr of Array.from(el.attributes)) {
             obj['@attributes'][attr.name] = attr.value;
           }
         }
-        // Child nodes
+
         for (let child of Array.from(node.childNodes)) {
           const childObj = domToObj(child);
           if (childObj === undefined) continue;
+
           if (child.nodeType === 3) {
-            // text node
             if (!obj['#text']) obj['#text'] = '';
             obj['#text'] += childObj;
           } else if (child.nodeType === 1) {
-            // element node
-            const childEl = child as Element;
-            const tag = childEl.tagName;
+            const tag = (child as Element).tagName;
             if (!obj[tag]) obj[tag] = [];
             obj[tag].push(childObj);
+          } else if (child.nodeType === 8) {
+            if (!obj['#comment']) obj['#comment'] = [];
+            obj['#comment'].push(childObj['#comment']);
           }
         }
-        // Nếu chỉ có 1 phần tử trong mảng thì trả về object thay vì array
+
         for (let key in obj) {
           if (Array.isArray(obj[key]) && obj[key].length === 1) {
             obj[key] = obj[key][0];
           }
         }
+
         return obj;
       }
       return undefined;
     }
 
+    function domListToArray(nodeList: NodeList): any {
+      const arr: any[] = [];
+      let elementCount = 0;
+
+      for (let node of Array.from(nodeList)) {
+        if (node.nodeType === 1) {
+          elementCount++;
+          arr.push({ [node.nodeName]: domToObj(node) });
+        } else {
+          const obj = domToObj(node);
+          if (obj !== undefined) arr.push(obj);
+        }
+      }
+
+      if (elementCount === 1 && arr.length === 1) {
+        return arr[0];
+      }
+      return arr;
+    }
+
     const fetchXml = async () => {
       loading.value = true;
       error.value = '';
       try {
-        const res = await fetch(props.url, {
-          headers: {
-            'Content-Type': 'text/xml'
-          }
-        });
+        const res = await fetch(props.url);
         if (!res.ok) throw new Error('Không thể tải XML');
+
         xmlContent.value = await res.text();
         const parser = new DOMParser();
         const xmlDoc = parser.parseFromString(xmlContent.value, 'text/xml');
-        // Lấy node gốc
-        const root = xmlDoc.documentElement;
-        parsedObject.value = { [root.tagName]: domToObj(root) };
+
+        parsedObject.value = domListToArray(xmlDoc.childNodes);
       } catch (e: any) {
         error.value = e.message || 'Lỗi không xác định';
       } finally {
@@ -108,8 +126,7 @@ export default defineComponent({
 
     onMounted(fetchXml);
 
-
     return { xmlContent, parsedObject, loading, error };
   }
 });
-</script>
+</script>
\ No newline at end of file