Skip to content

Commit a5d8dd7

Browse files
ksambhiksambhi
committed
feat: CSV upload scaffold
1 parent 534c267 commit a5d8dd7

4 files changed

Lines changed: 151 additions & 9 deletions

File tree

‎collection/app/(app)/CSVImport.tsx‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
"use client";
2+
3+
import { Alert, Button, Group, Modal, NativeSelect, rem, Stack, Text } from "@mantine/core";
4+
import { Dropzone } from "@mantine/dropzone";
5+
import "@mantine/dropzone/styles.css";
6+
import { useDisclosure } from "@mantine/hooks";
7+
import React from "react";
8+
import {
9+
FaCircleXmark,
10+
FaDownload,
11+
FaTable,
12+
FaTriangleExclamation,
13+
FaUpload,
14+
} from "react-icons/fa6";
15+
16+
export const CSVImport = () => {
17+
const [opened, { open, close }] = useDisclosure(false);
18+
19+
return (
20+
<>
21+
<Modal opened={opened} onClose={close} title="Import CSV" size="xl">
22+
<Stack>
23+
<Alert
24+
color="yellow"
25+
title="Warning"
26+
variant="light"
27+
icon={<FaTriangleExclamation />}
28+
>
29+
Make sure you have selected the right product below before importing the CSV
30+
- or you will need to rollback the import.
31+
</Alert>
32+
<form>
33+
<Stack gap="xl">
34+
<NativeSelect
35+
label="Product"
36+
name="productId"
37+
//key={form.key("academicYear")}
38+
description="Product to import the CSV into (variants will be detected from the data automatically)"
39+
data={["Product 1", "Product 2", "Product 3"]}
40+
defaultValue={""}
41+
required
42+
//{...form.getInputProps("academicYear")}
43+
/>
44+
45+
<Dropzone
46+
onDrop={(files) => console.log("accepted files", files)}
47+
onReject={(files) => console.log("rejected files", files)}
48+
maxSize={5 * 1024 ** 2}
49+
accept={["text/csv"]}
50+
maxFiles={1}
51+
>
52+
<Group
53+
justify="center"
54+
gap="xl"
55+
mih={220}
56+
style={{ pointerEvents: "none" }}
57+
>
58+
<Dropzone.Accept>
59+
<FaUpload
60+
style={{
61+
width: rem(52),
62+
height: rem(52),
63+
color: "var(--mantine-color-blue-6)",
64+
}}
65+
/>
66+
</Dropzone.Accept>
67+
<Dropzone.Reject>
68+
<FaCircleXmark
69+
style={{
70+
width: rem(52),
71+
height: rem(52),
72+
color: "var(--mantine-color-red-6)",
73+
}}
74+
/>
75+
</Dropzone.Reject>
76+
<Dropzone.Idle>
77+
<FaTable
78+
style={{
79+
width: rem(52),
80+
height: rem(52),
81+
color: "var(--mantine-color-dimmed)",
82+
}}
83+
/>
84+
</Dropzone.Idle>
85+
86+
<div>
87+
<Text size="xl" inline>
88+
Drag CSV from eActivites&apos; Product Summary here or
89+
click to select a file
90+
</Text>
91+
<Text size="sm" c="dimmed" inline mt={7}>
92+
The CSV size should not exceed 5MB
93+
</Text>
94+
</div>
95+
</Group>
96+
</Dropzone>
97+
<Button type="submit" color="green" leftSection={<FaDownload />}>
98+
Import data
99+
</Button>
100+
</Stack>
101+
</form>
102+
</Stack>
103+
</Modal>
104+
105+
<Button leftSection={<FaTable />} onClick={open}>
106+
Import data from CSV
107+
</Button>
108+
</>
109+
);
110+
};

‎collection/app/(app)/PageActions.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { AcademicYear } from "@docsoc/eactivities";
2-
import { Paper, MultiSelect, Group, Button } from "@mantine/core";
2+
import { Paper, MultiSelect, Group } from "@mantine/core";
33
import { UseFormReturnType } from "@mantine/form";
44
import React from "react";
55

6+
import { CSVImport } from "./CSVImport";
7+
68
export const PageActions = ({
79
formHook,
810
academicYears,
@@ -20,7 +22,7 @@ export const PageActions = ({
2022
data={academicYears}
2123
{...formHook.getInputProps("academicYears")}
2224
/>
23-
<Button>Import data from eActivities</Button>{" "}
25+
<CSVImport />
2426
</Group>
2527
</Paper>
2628
);

‎package-lock.json‎

Lines changed: 36 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@
7272
"dependencies": {
7373
"@docsoc/eactivities": "^1.2.1",
7474
"@mantine/core": "^7.12.0",
75+
"@mantine/dropzone": "^7.12.1",
7576
"@mantine/form": "^7.12.0",
7677
"@mantine/hooks": "^7.12.0",
7778
"@prisma/client": "^5.18.0",

0 commit comments

Comments
 (0)