Add "exclude headers" option

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

src/common/stores.ts

@@ -58,15 +58,15 @@ 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();
 
     // 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.

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>