feat: copy table button

README.md

@@ -10,7 +10,7 @@
 - [x] Empty project from template
 - [x] Configuration
 - [x] Generate table
-- [ ] Copy table option
+- [x] Copy table option
 - [x] Save last state in cookies
 - [ ] Other format: raw text
 - [ ] Other format: SVG

index.html

@@ -95,7 +95,7 @@
     </table>
     <template v-if="table.length">
       <h2>Output Table</h2>
-      <table class="output">
+      <table id="output" class="output">
         <colgroup>
           <col style="width: 25%">
           <col>
@@ -104,9 +104,16 @@
           <td v-for="item in row">{{item}}</td>
         </tr>
       </table>
+      <br>
+      <p>
+        <button @click="copyTable">
+          <i icon="table"></i>&nbsp;
+          <span v-if="copyTableOverride">{{copyTableOverride}}</span>
+          <span v-else>Copy table</span>
+        </button>
+      </p>
     </template>
     <h2 v-else>Add more vegetables !</h2>
-    <br />
     <small class="footer">
       <i icon="at-sign"></i>&nbsp;<a href="https://github.com/klemek" target="_blank">klemek</a>
       -

main.js

@@ -231,6 +231,7 @@ const app = createApp({
         mix: 25,
       },
       table: [],
+      copyTableOverride: null,
     };
   },
   computed: {
@@ -333,6 +334,7 @@ const app = createApp({
       }
     },
     generateData() {
+      this.table.splice(0, this.table.length);
       if (this.candidates.length <= 2) {
         return;
       }
@@ -360,9 +362,21 @@ const app = createApp({
         table[table.length - 1][1] = "🥗 SALAD 🥗";
       }
 
-      this.table.splice(0, this.table.length);
       this.table.push(...table);
     },
+    async copyTable() {
+      const csvTable = this.table.map((row) => row.join("\t")).join("\n");
+      try {
+        await navigator.clipboard.writeText(csvTable);
+        this.copyTableOverride = "Table Copied";
+      } catch (error) {
+        console.error(error.message);
+        this.copyTableOverride = "Error";
+      }
+      setTimeout(() => {
+        this.copyTableOverride = null;
+      }, 1000);
+    },
   },
 });