feat: add add file handler

src/components/DropMember.svelte

@@ -1,12 +1,21 @@
 <script lang="ts">
-	import { onDrop } from '$lib';
-    import DropFile from 'svelte-parts/DropFile.svelte'
+	import DropFile from 'svelte-parts/DropFile.svelte';
+	import { data_store } from '../store';
+
+	import { loadFromSheet } from '$lib/utils/sheetService';
+
+	export async function onDrop(files: File[]) {
+		const file = files[0];
+		const raw_sheet = await file.arrayBuffer();
+		console.log(raw_sheet);
+		data_store.set(loadFromSheet(raw_sheet));
+	}
 </script>
 
 <!-- TODO: weird bug with DropFile -->
-<DropFile onDrop={onDrop}>
-    <!-- <div class="text-3xl bg-red-500 hover:bg-red-600 text-gray-800 font-bold py-6 px-6 rounded-2xl inline-flex items-center cursor-pointer">
+<DropFile {onDrop}>
+	<!-- <div class="text-3xl bg-red-500 hover:bg-red-600 text-gray-800 font-bold py-6 px-6 rounded-2xl inline-flex items-center cursor-pointer">
         <svg class="h-6 w-6 mr-2 text-gray-800" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">  <path stroke="none" d="M0 0h24v24H0z"/>  <path d="M7 18a4.6 4.4 0 0 1 0 -9h0a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1" />  <polyline points="9 15 12 12 15 15" />  <line x1="12" y1="12" x2="12" y2="21" /></svg>
         <span class="font-bold text-3xl text-gray-800">Upload file</span>
     </div> -->
-</DropFile>
+</DropFile>

src/components/GroupInformation.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { data } from '../store';
+	import { data_store } from '../store';
 
 	export let group_cnt: number;
 	export let day: number;
@@ -12,7 +12,7 @@
 	<h2 class="py-3 text-2xl flex font-bold">Number of members :</h2>
 	<input
 		type="number"
-		bind:value={$data.length}
+		bind:value={$data_store.length}
 		disabled
 		class="p-2 ml-2 rounded grow"
 		id="n_member"

src/lib/index.ts

@@ -1,13 +1,4 @@
 // place files you want to import through the `$lib` alias in this folder.
-import { read } from 'xlsx';
-
-export async function onDrop(files: File[]) {
-	const file = files[0];
-	const raw_sheet = await file.arrayBuffer();
-	const workbook = read(raw_sheet);
-	console.log(workbook);
-}
-
 export function onDownload() {
 	return;
 }

src/lib/types.ts

@@ -0,0 +1,8 @@
+export interface Person {
+	names: string;
+	roles: string;
+	baan: string;
+	ex_camp: string;
+	gender: string;
+	id: number;
+}

src/lib/utils/sheetService.ts

@@ -0,0 +1,19 @@
+import { read } from 'xlsx';
+
+export function loadFromSheet(raw_sheet: ArrayBuffer) {
+	const workbook = read(raw_sheet);
+	const data = [];
+	for (let i = 2; ; i++) {
+		if (!workbook.Sheets['database'][`A${i}`]) break;
+		data.push({
+			names: workbook.Sheets['database'][`A${i}`].v,
+			roles: workbook.Sheets['database'][`D${i}`].v,
+			baan: workbook.Sheets['database'][`E${i}`].v,
+			ex_camp: workbook.Sheets['database'][`F${i}`].v,
+			gender: workbook.Sheets['database'][`G${i}`].v,
+			id: i - 1
+		});
+	}
+	console.log(data);
+	return data;
+}

src/store.ts

@@ -1,39 +1,4 @@
 import { writable } from 'svelte/store';
-import * as XLSX from 'xlsx';
+import type { Person } from '$lib/types';
 
-export interface Person {
-	names: string;
-	roles: string;
-	baan: string;
-	ex_camp: string;
-	gender: string;
-	id: number;
-}
-
-function createData() {
-	const { subscribe, set } = writable<Person[]>([]);
-
-	function load(raw_sheet: ArrayBuffer) {
-		const workbook = XLSX.read(raw_sheet);
-		const data = [];
-		for (let i = 2; ; i++) {
-			if (!workbook.Sheets['database'][`A${i}`]) break;
-			data.push({
-				names: workbook.Sheets['database'][`A${i}`].v,
-				roles: workbook.Sheets['database'][`D${i}`].v,
-				baan: workbook.Sheets['database'][`E${i}`].v,
-				ex_camp: workbook.Sheets['database'][`F${i}`].v,
-				gender: workbook.Sheets['database'][`G${i}`].v,
-				id: i - 1
-			});
-		}
-		set(data);
-	}
-
-	return {
-		subscribe,
-		load: (raw_sheet: ArrayBuffer) => load(raw_sheet)
-	};
-}
-
-export const data = createData();
+export const data_store = writable<Person[]>([]);