feat: add CSV upload instructions dialog

- Create informative step-by-step guide for academic record export - Add example CSV file with view/download options - Include responsive layout with mobile optimization - Implement scrollable dialog with aspect-ratio maintained screenshots
ligsnf · Dec 24, 2024 · e17aff5 · e17aff5
1 parent 2b9c9d6
commit e17aff5
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 4 deletions.
diff --git a/public/example_results.csv b/public/example_results.csv
@@ -0,0 +1,28 @@
+Year,Unit code,Unit title,Teaching period,Credit points,Mark,Grade
+2021,ENG1002,"ENGINEERING DESIGN: CLEANER, SAFER, SMARTER",1,6,75,D
+2021,ENG1003,ENGINEERING MOBILE APPS,1,6,80,HD
+2021,ENG1090,FOUNDATION MATHEMATICS,1,6,75,D
+2021,PHS1001,FOUNDATION PHYSICS,1,6,71,D
+2021,ECE2072,DIGITAL SYSTEMS,2,6,50,P
+2021,ENG1001,"ENGINEERING DESIGN: LIGHTER, FASTER, STRONGER",2,6,70,D
+2021,ENG1005,ENGINEERING MATHEMATICS,2,6,83,HD
+2021,ENG1060,COMPUTING FOR ENGINEERS,2,6,89,HD
+2022,FIT1045,ALGORITHMS AND PROGRAMMING FUNDAMENTALS IN PYTHON,1,6,95,HD
+2022,FIT2085,INTRODUCTION TO COMPUTER SCIENCE FOR ENGINEERS,1,6,79,D
+2022,FIT2099,OBJECT ORIENTED DESIGN AND IMPLEMENTATION,1,6,77,D
+2022,MAT1830,DISCRETE MATHEMATICS FOR COMPUTER SCIENCE,1,6,83,HD
+2022,FIT2004,ALGORITHMS AND DATA STRUCTURES,2,6,52,P
+2022,FIT2100,OPERATING SYSTEMS,2,6,79,D
+2022,FIT2101,SOFTWARE ENGINEERING PROCESS AND MANAGEMENT,2,6,82,HD
+2022,FIT2107,SOFTWARE QUALITY AND TESTING,2,6,64,C
+2023,FIT3175,USABILITY,SB,6,80,HD
+2023,FIT3170,SOFTWARE ENGINEERING PRACTICE,FY,12,77,D
+2023,FIT3077,SOFTWARE ENGINEERING: ARCHITECTURE AND DESIGN,1,6,78,D
+2023,FIT3159,COMPUTER ARCHITECTURE,1,6,86,HD
+2023,FIT3178,IOS APP DEVELOPMENT,1,6,86,HD
+2023,FIT2095,E-BUSINESS SOFTWARE TECHNOLOGIES,2,6,99,HD
+2024,FIT4165,COMPUTER NETWORKS,1,6,91,HD
+2024,FIT5145,FOUNDATIONS OF DATA SCIENCE,1,6,88,HD
+2024,FIT3171,DATABASES,2,6,85,HD
+2024,FIT3179,DATA VISUALISATION,2,6,83,HD
+2024,FIT4005,RESEARCH METHODS IN INFORMATION TECHNOLOGY,2,6,86,HD
diff --git a/public/img/save-dialog.png b/public/img/save-dialog.png
diff --git a/public/img/select-results.png b/public/img/select-results.png
diff --git a/public/img/spreadsheet-view.png b/public/img/spreadsheet-view.png
diff --git a/src/components/csv/csv-information-dialog.tsx b/src/components/csv/csv-information-dialog.tsx
@@ -1,4 +1,4 @@
-import { Info } from "lucide-react"
+import { Download, ExternalLink, FileText, Info } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import {
   Dialog,
@@ -8,6 +8,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog"
+import { ScrollArea } from "@/components/ui/scroll-area"
 
 export function CSVInformationDialog() {
   return (
@@ -17,13 +18,93 @@ export function CSVInformationDialog() {
           <Info className="text-primary" strokeWidth={2.5} />
         </Button>
       </DialogTrigger>
-      <DialogContent>
+      <DialogContent className="max-h-[80vh]">
         <DialogHeader>
-          <DialogTitle>Instructions for preparing CSV</DialogTitle>
+          <DialogTitle>
+            <span className="sm:hidden">How to Export Your Academic Record</span>
+            <span className="hidden sm:inline">How to Export Your Academic Record as CSV</span>
+          </DialogTitle>
           <DialogDescription>
-            yeah mate
+            <span className="sm:hidden">Steps to prepare your record for upload</span>
+            <span className="hidden sm:inline">Follow these steps to prepare your academic record for upload</span>
           </DialogDescription>
         </DialogHeader>
+
+        <ScrollArea className="h-[calc(80vh-8rem)]">
+          <div className="grid gap-4 py-1 pr-4">
+            <section className="space-y-1">
+              <h3 className="font-medium">1. Access Your Academic Record</h3>
+              <p className="text-sm text-muted-foreground">
+                Navigate to WES → <a href="https://my.monash.edu/wes/exam/results/" className="underline hover:text-primary" target="_blank" rel="noreferrer">Unofficial Academic Record</a>
+              </p>
+            </section>
+
+            <section className="space-y-1">
+              <h3 className="font-medium">2. Select Your Results</h3>
+              <p className="text-sm text-muted-foreground">
+                Highlight the entire results table <span className="sm:hidden">along with</span> <span className="hidden sm:inline">including the</span> headers
+              </p>
+              <img
+                src="/monash-grades-calculator/img/select-results.png"
+                alt="Selecting academic results table in WES"
+                className="rounded-md border w-full aspect-[26/9] object-cover object-bottom"
+              />
+            </section>
+
+            <section className="space-y-1">
+              <h3 className="font-medium">3. Copy to Spreadsheet</h3>
+              <p className="text-sm text-muted-foreground">
+                Copy and paste into <a href="https://docs.google.com/spreadsheets/" className="underline hover:text-primary" target="_blank" rel="noreferrer">Google Sheets</a> or <span className="hidden sm:inline">Microsoft</span> Excel
+              </p>
+              <img 
+                src="/monash-grades-calculator/img/spreadsheet-view.png" 
+                alt="Pasted data in Google Sheets"
+                className="hidden sm:block rounded-md border w-full h-auto object-cover"
+              />
+            </section>
+
+            <section className="space-y-1">
+              <h3 className="font-medium">4. Export as CSV</h3>
+              <p className="text-sm text-muted-foreground">
+                File → Download → <span className="hidden sm:inline">Comma-separated values</span> (.csv)
+              </p>
+              <img
+                src="/monash-grades-calculator/img/save-dialog.png"
+                alt="Saving as CSV in Google Sheets"
+                className="rounded-md border w-full aspect-video object-cover"
+              />
+            </section>
+
+            <section>
+              <p className="text-xs text-muted-foreground mb-2">Sample file showing the expected format</p>
+              <div className="flex items-center gap-2 rounded-lg border p-2">
+                <FileText className="h-6 w-6 text-muted-foreground" />
+                <div className="flex flex-1 flex-col">
+                  <p className="text-sm font-medium">example_results.csv</p>
+                  {/* <p className="text-xs text-muted-foreground">2.5 KB</p> */}
+                </div>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => window.open('https://github.com/ligsnf/monash-grades-calculator/blob/main/public/example_results.csv', '_blank')}
+                >
+                  <ExternalLink />
+                  <span className="hidden sm:inline">View</span>
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => window.open('/monash-grades-calculator/example_results.csv', '_blank')}
+                >
+                  <Download />
+                  <span className="hidden sm:inline">Download</span>
+                </Button>
+              </div>
+            </section>
+          </div>
+        </ScrollArea>
       </DialogContent>
     </Dialog>
   )