Adding file list get request

kamyabnazari · May 28, 2023 · d9388d1 · d9388d1
1 parent 8a6e426
commit d9388d1
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 44 deletions.
diff --git a/frontend/src/lib/components/FileTable.svelte b/frontend/src/lib/components/FileTable.svelte
@@ -1,16 +1,41 @@
 <script lang="ts">
-	import IconPDF from '~icons/bxs/file-pdf';
-
 	import IconDownload from '~icons/solar/download-square-outline';
 	import IconBin from '~icons/solar/trash-bin-trash-outline';
 	import IconRead from '~icons/solar/chat-unread-outline';
+	import { currentUser, pb } from '$lib/pocketbase';
+	import type { Record } from 'pocketbase';
+	import { onMount } from 'svelte';
 
 	const urlPDF =
 		'https://raw.githubusercontent.com/vinodnimbalkar/svelte-pdf/369db2f9edbf5ab8c87184193e1404340729bb3a/public/sample.pdf';
 
 	const downloadPdf = () => {
 		window.open(urlPDF);
 	};
+
+	onMount(async () => {
+		await fetchDocuments();
+	});
+
+	let documentList: Record[] = [];
+
+	async function fetchDocuments() {
+		try {
+			/*
+			const response = await pb.collection('documents').getFullList({
+				filter: `owner=${$currentUser?.id}`
+			});
+			*/
+			const response = await pb.collection('documents').getFullList({
+				sort: '-created',
+				filter: `owner='${$currentUser?.id}'`
+			});
+			documentList = response || [];
+			console.log(documentList);
+		} catch (error) {
+			console.error('Fetch error:', error);
+		}
+	}
 </script>
 
 <div class="w-full overflow-x-auto">
@@ -26,44 +51,44 @@
 				<th>Name</th>
 				<th>Type</th>
 				<th>Create Date</th>
-				<th />
+				<th>Actions</th>
 			</tr>
 		</thead>
 		<tbody>
-			<tr>
-				<th>
-					<label>
-						<input type="checkbox" class="checkbox" />
-					</label>
-				</th>
-				<td>
-					<div class="flex items-center space-x-3">
-						<div class="mask mask-square flex h-10 w-10 items-center justify-center">
-							<IconPDF style="font-size: x-large" class="text-primary" />
-						</div>
-						<div>
-							<div class="font-bold">file-23.pdf</div>
+			{#each documentList as document}
+				<tr>
+					<th>
+						<label>
+							<input type="checkbox" class="checkbox" />
+						</label>
+					</th>
+					<td>
+						<div class="flex items-center space-x-3">
+							<div>
+								<div class="font-bold">{document.name}</div>
+							</div>
 						</div>
-					</div>
-				</td>
-				<td>
-					<span class="text-sm">Uploaded</span><br />
-					<span class="badge badge-ghost badge-sm">PDF</span>
-				</td>
-				<td>13.05.2023</td>
-				<th>
-					<a href="/dashboard/file-read"
-						><button class="btn btn-square btn-primary"
-							><IconRead style="font-size: x-large;" /></button
-						></a
-					>
-					<button class="btn btn-square btn-info" on:click={downloadPdf}
-						><IconDownload style="font-size: x-large;" />
-					</button>
-					<button class="btn btn-square btn-warning"><IconBin style="font-size: x-large;" /></button
-					>
-				</th>
-			</tr>
+					</td>
+					<td>
+						<span class="text-sm">Uploaded</span><br />
+						<span class="badge badge-ghost badge-sm">PDF</span>
+					</td>
+					<td>13.05.2023</td>
+					<th>
+						<a href="/dashboard/file-read"
+							><button class="btn btn-square btn-primary"
+								><IconRead style="font-size: x-large;" /></button
+							></a
+						>
+						<button class="btn btn-square btn-info" on:click={downloadPdf}
+							><IconDownload style="font-size: x-large;" />
+						</button>
+						<button class="btn btn-square btn-warning"
+							><IconBin style="font-size: x-large;" /></button
+						>
+					</th>
+				</tr>
+			{/each}
 		</tbody>
 		<!-- foot -->
 		<tfoot>
@@ -72,7 +97,7 @@
 				<th>Name</th>
 				<th>Type</th>
 				<th>Create Date</th>
-				<th />
+				<th>Actions</th>
 			</tr>
 		</tfoot>
 	</table>

diff --git a/frontend/src/routes/(auth)/profile/+page.svelte b/frontend/src/routes/(auth)/profile/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { applyAction, enhance } from '$app/forms';
 	import { invalidateAll } from '$app/navigation';
-	import { currentUser, pb } from '$lib/pocketbase';
+	import { currentUser } from '$lib/pocketbase';
 	import { getImageURL, showPreview } from '$lib/utils';
 
 	import IconImageEdit from '~icons/solar/gallery-edit-outline';

diff --git a/frontend/src/routes/dashboard/+page.server.ts b/frontend/src/routes/dashboard/+page.server.ts
@@ -1,4 +1,5 @@
-import { redirect } from '@sveltejs/kit';
+import type { Actions } from './$types';
+import { error, redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ locals }) => {

diff --git a/frontend/src/routes/dashboard/file-upload/+page.server.ts b/frontend/src/routes/dashboard/file-upload/+page.server.ts
@@ -5,18 +5,16 @@ import type { PageServerLoad } from './$types';
 export const actions: Actions = {
 	uploadDocument: async ({ locals, request }) => {
 		const data = await request.formData();
+		const userDocument = data.get('document') as File;
 		data.set('owner', locals.user.id);
-		const userDocument = data.get('document');
+		data.set('name', userDocument?.name ?? 'untitled');
 
 		if (userDocument instanceof Blob && userDocument.size === 0) {
 			throw error(400, 'Please upload a file');
 		}
 
 		try {
-			const { document } = await locals.pb.collection('documents').create(data);
-
-			const previewDocument = document;
-			console.log(previewDocument);
+			await locals.pb.collection('documents').create(data);
 		} catch (err) {
 			console.error(err);
 			throw error(400, 'Something went wrong uploading your document');