From ce23c2e5bf755d46c2893079443e030fc1d6aad7 Mon Sep 17 00:00:00 2001
From: Peter Joles <jolzee@gmail.com>
Date: Tue, 6 Oct 2020 09:47:49 -0500
Subject: [PATCH] :sparkles: feat: Allow escaped HTML to be added to rows in
 Table Component

---
 src/components/Table.vue | 56 +++++++++++++++++++++++++++++-----------
 1 file changed, 41 insertions(+), 15 deletions(-)

diff --git a/src/components/Table.vue b/src/components/Table.vue
index f05d58c1..1c2bbccd 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -2,27 +2,24 @@
   <v-data-table
     v-if="items && items.length"
     :headers="headers"
-    :items="items"
+    :items="makeHtml()"
     :search="search"
     :footer-props="{
       itemsPerPageOptions: calcRowsPerPage
     }"
   >
-    <template slot="
-    items" slot-scope="props">
-      <td
-        v-for="(header, key) in headers"
-        :key="key"
-        class="text-left"
-        v-html="props.item[header.value]"
-      ></td>
+    <template v-slot:body="{ items }">
+      <tbody>
+        <tr v-for="(item, dex) in items" :key="dex + getUuid">
+          <template v-for="(cellValue, j) in getValues(item)">
+            <td v-html="cellValue" :key="j + getUuid"></td>
+          </template>
+        </tr>
+      </tbody>
     </template>
-    <v-alert
-      slot="no-results"
-      :value="true"
-      color="error"
-      icon="mdi-alert-octagram"
-    >Your search for "{{ search }}" found no results.</v-alert>
+    <v-alert slot="no-results" :value="true" color="error" icon="mdi-alert-octagram"
+      >Your search for "{{ search }}" found no results.</v-alert
+    >
     <template v-if="footer" slot="footer">
       <td colspan="100%">
         <strong>{{ footer }}</strong>
@@ -32,6 +29,8 @@
 </template>
 
 <script>
+const logger = require("@/utils/logging").getLogger("Table.vue");
+import { uuid } from "@/utils/utils";
 export default {
   props: {
     headers: {
@@ -55,6 +54,33 @@ export default {
       required: true
     }
   },
+  methods: {
+    getValues(item) {
+      return Object.values(item);
+    },
+    getUuid() {
+      return uuid();
+    },
+    isEnabled(slot) {
+      return this.enabled === slot;
+    },
+    unescapeHTML(html) {
+      var txt = document.createElement("textarea");
+      txt.innerHTML = html;
+      return txt.value;
+    },
+    makeHtml() {
+      let that = this;
+      const unescapedItems = this.items.map(item => {
+        Object.keys(item).forEach(function (key) {
+          item[key] = that.unescapeHTML(item[key]);
+        });
+        return item;
+      });
+      console.log(unescapedItems);
+      return unescapedItems;
+    }
+  },
   computed: {
     calcRowsPerPage() {
       const rowsPerPageArray = [{ text: "All", value: -1 }];