From 5eb284577338cd06425a44792f0072e2d7439494 Mon Sep 17 00:00:00 2001
From: Aidan Sun <aidansun05@gmail.com>
Date: Sat, 6 Jan 2024 19:14:47 -0500
Subject: [PATCH] Add "exclude headers" option

---
 docs/CHANGELOG.md                   |  6 ++++++
 src/common/stores.ts                |  4 ++--
 src/components/FormDownloadPage.vue | 26 +++++++++++++++++---------
 3 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 7d6f654..497c1e0 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 This document tracks the changes between Black Hawks Scouting versions. Dates are written in the MM/DD/YYYY format.
 
+## 2024.1 (Unreleased)
+
+### Additions
+
+- Added an "exclude headers" option for QR code generation (#8).
+
 ## 2024.0 (01/06/2024)
 
 ### Additions
diff --git a/src/common/stores.ts b/src/common/stores.ts
index c959aed..689a0e8 100755
--- a/src/common/stores.ts
+++ b/src/common/stores.ts
@@ -58,7 +58,7 @@ export const useWidgetsStore = defineStore("widgets", () => {
   }
 
   // Turns to given data object into a CSV string.
-  function toCSVString(data: SavedData): string {
+  function toCSVString(data: SavedData, excludeHeaders?: boolean): string {
     // Transforms an array of strings into valid CSV by escaping quotes, then joining each value.
     // https://en.wikipedia.org/wiki/Comma-separated_values
     const escape = (s: string[]) => s.map(i => `"${i.replaceAll('"', '""')}"`).join();
@@ -66,7 +66,7 @@ export const useWidgetsStore = defineStore("widgets", () => {
     // Escape the header and list of records, then put them together into a blob for downloading
     const header = escape(data.header);
     const records = data.values.map(escape);
-    return [header, ...records].join("\n");
+    return (excludeHeaders ? records : [header, ...records]).join("\n");
   }
 
   // Creates a download link for a given data object.
diff --git a/src/components/FormDownloadPage.vue b/src/components/FormDownloadPage.vue
index 3220e98..54abcb6 100755
--- a/src/components/FormDownloadPage.vue
+++ b/src/components/FormDownloadPage.vue
@@ -1,7 +1,7 @@
 <template>
   <FormPage title="Download Data" ref="page">
     <FormGroup :label-type="LabelType.None" :colspan="2" align="center">
-      <button @click="generateQRCode">Generate QR Code</button>
+      <button @click="qrContainer?.showModal()">Generate QR Code</button>
     </FormGroup>
     <FormGroup :label-type="LabelType.None" :colspan="2" align="center">
       <button @click="clearForm">Save and Clear Form</button>
@@ -23,6 +23,10 @@
   <dialog ref="qrContainer">
     <div id="qr-dialog-contents">
       <button id="qr-dialog-close" @click="qrContainer?.close">Close</button>
+      <div>
+        <input type="checkbox" v-model="excludeHeaders" id="exclude-headers" />
+        <label for="exclude-headers">Exclude headers in code</label>
+      </div>
       <qrcode-vue :value="qrData" level="M" render-as="svg" :size="350" />
     </div>
   </dialog>
@@ -44,26 +48,30 @@ const router = useRouter();
 
 const page = $ref<InstanceType<typeof FormPage>>();
 const qrContainer = $ref<HTMLDialogElement>();
-let qrData = $ref("");
+const qrData = $computed(() => widgets.toCSVString(widgets.getWidgetsAsCSV(), excludeHeaders));
+const excludeHeaders = $ref(false);
 
 function clearForm() {
   widgets.save();
   router.go(0); // Reload the page
 }
 
-function generateQRCode() {
-  qrData = widgets.toCSVString(widgets.getWidgetsAsCSV());
-  qrContainer?.showModal();
-}
-
 defineExpose({ title: computed(() => page?.title), setShown: computed(() => page?.setShown) });
 </script>
 
-<style>
+<style lang="postcss">
 #qr-dialog-contents {
   display: flex;
   flex-direction: column;
   gap: 4px;
-  align-items: flex-end;
+  align-items: flex-start;
+
+  button {
+    align-self: flex-end;
+  }
+
+  label {
+    color: black;
+  }
 }
 </style>