Added Paperless display POC

.wundergraph/operations/Cloudron.graphql

@@ -1,5 +0,0 @@
-query {
-  cloudron_getProfile {
-    email
-  }
-}

.wundergraph/operations/getBalance.ts

@@ -6,15 +6,15 @@ export default createOperation.query({
     address: z.string(),
   }),
   handler: async ({ input }) => {
-    console.log('Making request with input:', input); // Log the input
+    console.log('Making request with input:', input);
 
     const { data } = await axios.get('https://api.gnosisscan.io/api', {
       params: {
         module: 'account',
         action: 'balance',
         address: input.address,
-        // tag: 'latest',
+        tag: 'latest',
-        // apikey: process.env.GNOSISSCAN_API,
+        apikey: process.env.GNOSISSCAN_API,
       },
       timeout: 10000,
     });

.wundergraph/operations/getPaperless.ts

@@ -0,0 +1,39 @@
+// .wundergraph/operations/getPaperless.ts
+import { createOperation, z } from '../generated/wundergraph.factory';
+import axios from 'axios';
+
+export default createOperation.query({
+    input: z.object({}),
+    handler: async () => {
+        console.log('Making request to Paperless API');
+
+        const { data } = await axios.get('https://paperless.andert.me/api/documents/', {
+            headers: {
+                Authorization: process.env.PAPERLESS_TOKEN,
+            },
+        });
+
+        console.log('Received response:', data.results);
+
+        // Add download link, thumbnail link, preview link, and PDF data to each document
+        const documentsWithLinksAndData = await Promise.all(data.results.map(async doc => {
+            const response = await axios.get(`https://paperless.andert.me/api/documents/${doc.id}/preview/`, {
+                responseType: 'arraybuffer',
+                headers: {
+                    Authorization: process.env.PAPERLESS_TOKEN,
+                },
+            });
+            const pdfData = Buffer.from(response.data, 'binary').toString('base64');
+
+            return {
+                ...doc,
+                downloadLink: `https://paperless.andert.me/api/documents/${doc.id}/download/`,
+                thumbnailLink: `https://paperless.andert.me/api/documents/${doc.id}/thumb/`,
+                previewLink: `https://paperless.andert.me/api/documents/${doc.id}/preview/`,
+                pdfData,
+            };
+        }));
+
+        return documentsWithLinksAndData;
+    },
+});

.wundergraph/wundergraph.config.ts

@@ -26,16 +26,6 @@ const placeholder = introspect.openApiV2({
 	baseURL: 'https://jsonplaceholder.typicode.com',
 });
 
-const cloudron = introspect.openApiV2({
-	apiNamespace: 'cloudron',
-	source: {
-		kind: "file",
-		filePath: "./schemas/cloudron.json"
-	},
-	headers: (builder) => builder
-		.addStaticHeader('Authorization', new EnvironmentVariable('CLOUDRON_API', process.env.CLOUDRON_API))
-});
-
 const system_db = introspect.graphql({
 	apiNamespace: 'system_db',
 	loadSchemaFromString: directusSystemSchema,
@@ -46,7 +36,7 @@ const system_db = introspect.graphql({
 
 // configureWunderGraph emits the configuration
 configureWunderGraphApplication({
-	apis: [db, system_db, placeholder, cloudron],
+	apis: [db, system_db, placeholder],
 	server,
 	operations,
 	generate: {

package.json

@@ -70,6 +70,7 @@
     "path": "^0.12.7",
     "sqlite3": "^5.1.6",
     "svelte-kit-cookie-session": "^4.0.0",
+    "svelte-pdf-simple": "^2.0.0",
     "url": "^0.11.1",
     "xstate": "^4.38.2"
   },

pnpm-lock.yaml

@@ -88,6 +88,9 @@ dependencies:
   svelte-kit-cookie-session:
     specifier: ^4.0.0
     version: 4.0.0
+  svelte-pdf-simple:
+    specifier: ^2.0.0
+    version: 2.0.0
   url:
     specifier: ^0.11.1
     version: 0.11.1
@@ -6380,7 +6383,7 @@ packages:
     resolution: {integrity: sha512-c27loCv9QkZinsa5ProX751khO9DJl/AcB5c2KNtA6NRvHKS0PgLfcftz72KVq504vB0Gku5s2kUZzDBvQWvHg==}
     engines: {node: '>=4'}
     dependencies:
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: false
 
   /astral-regex@1.0.0:
@@ -10828,6 +10831,17 @@ packages:
       through: 2.3.8
     dev: false
 
+  /pdfjs-dist@2.13.216:
+    resolution: {integrity: sha512-qn/9a/3IHIKZarTK6ajeeFXBkG15Lg1Fx99PxU09PAU2i874X8mTcHJYyDJxu7WDfNhV6hM7bRQBZU384anoqQ==}
+    peerDependencies:
+      worker-loader: ^3.0.8
+    peerDependenciesMeta:
+      worker-loader:
+        optional: true
+    dependencies:
+      web-streams-polyfill: 3.2.1
+    dev: false
+
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 
@@ -11462,7 +11476,7 @@ packages:
       ast-types: 0.15.2
       esprima: 4.0.1
       source-map: 0.6.1
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: false
 
   /receptacle@1.3.2:
@@ -12299,6 +12313,14 @@ packages:
       '@noble/ciphers': 0.2.0
     dev: false
 
+  /svelte-pdf-simple@2.0.0:
+    resolution: {integrity: sha512-XiRyw2vWt2VGBx7vpyUcEJ6Ug1T2yboVXVnsiqBmB8ApDxysfi/ju0OfHvHO3Yd6GJiX7hlloOHwIZn8d9FEPQ==}
+    dependencies:
+      pdfjs-dist: 2.13.216
+    transitivePeerDependencies:
+      - worker-loader
+    dev: false
+
   /svelte-preprocess@5.0.4(@babel/core@7.22.17)(postcss@8.4.29)(svelte@3.54.0)(typescript@4.9.5):
     resolution: {integrity: sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==}
     engines: {node: '>= 14.10.0'}
@@ -13097,6 +13119,11 @@ packages:
       defaults: 1.0.4
     dev: false
 
+  /web-streams-polyfill@3.2.1:
+    resolution: {integrity: sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==}
+    engines: {node: '>= 8'}
+    dev: false
+
   /web-vitals@3.4.0:
     resolution: {integrity: sha512-n9fZ5/bG1oeDkyxLWyep0eahrNcPDF6bFqoyispt7xkW0xhDzpUBTgyDKqWDi1twT0MgH4HvvqzpUyh0ZxZV4A==}
     dev: false

src/lib/mockApps.js

@@ -2,6 +2,7 @@ export const mockApps = [
     {  name: 'cloud' },
     { name: 'pass'},
     {  name: 'directus' },
-    { name: 'penpot'}
+    { name: 'penpot'},
+    { name: 'paperless'}
   ];
   

src/routes/me/+layout.svelte

@@ -5,12 +5,12 @@
       <ul>
         <li><a href="/me">Dashboard</a></li>
         <li><a href="/me/projects">My Projects</a></li>
-        <li><a href="/me/documents">My Documents</a></li>
+        <!-- <li><a href="/me/documents">My Documents</a></li> -->
         <li><a href="/me/banking">Banking</a></li>
-        <li><a href="/me/bookmarks">Bookmarks</a></li>
+        <!-- <li><a href="/me/bookmarks">Bookmarks</a></li> -->
+        <li><a href="/me/paperless">Paperless</a></li>
         <li><a href="/me/acc">Access Control</a></li>
-        <li><a href="/me/apps">Apps</a></li>
+        <!-- <li><a href="/me/apps">Apps</a></li> -->
-        <li><a href="/me/resttest">REST</a></li>
       </ul>
     </nav>
   </aside>

src/routes/me/apps/[name]/+page.svelte

@@ -3,9 +3,8 @@
   export let data;
 </script>
 
-<!-- 
 <iframe
   src={`https://${data.props.app.name}.andert.me`}
   width="100%"
   height="100%"
-/> -->
+/>

src/routes/me/paperless/+page.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import HeaderMain from "$lib/layouts/HeaderMain.svelte";
+  import { createQuery } from "../../../lib/wundergraph";
+
+  const paperlessQuery = createQuery({
+    operationName: "getPaperless",
+  });
+
+  let pdfDataUrls = [];
+  let selectedPdfUrl = null;
+
+  $: if ($paperlessQuery.data) {
+    pdfDataUrls = $paperlessQuery.data.map((document) => {
+      const pdfData = atob(document.pdfData);
+      const pdfDataArray = new Uint8Array(pdfData.length);
+      for (let i = 0; i < pdfData.length; i++) {
+        pdfDataArray[i] = pdfData.charCodeAt(i);
+      }
+      const blob = new Blob([pdfDataArray], { type: "application/pdf" });
+      return URL.createObjectURL(blob);
+    });
+  }
+
+  function selectPdf(i) {
+    selectedPdfUrl = pdfDataUrls[i];
+  }
+</script>
+
+<HeaderMain>
+  <!-- <div slot="header">
+    <h1>Paperless Documents</h1>
+  </div> -->
+
+  <div slot="main" class="h-full w-full overflow-scroll flex">
+    <div class="w-1/4 h-full overflow-scroll">
+      {#if $paperlessQuery.isLoading}
+        <p>Loading...</p>
+      {:else if $paperlessQuery.error}
+        <pre>Error: {JSON.stringify($paperlessQuery.error, null, 2)}</pre>
+      {:else}
+        {#each $paperlessQuery.data as document, i}
+          <a href="#" on:click|preventDefault={() => selectPdf(i)}>
+            <div
+              class="my-4 p-2 border border-gray-200 rounded-md hover:bg-gray-100 cursor-pointer"
+            >
+              <h2 class="text-lg font-semibold">
+                {document.archived_file_name}
+              </h2>
+            </div>
+          </a>
+        {/each}
+      {/if}
+    </div>
+    <div class="w-3/4 h-full overflow-scroll">
+      {#if selectedPdfUrl}
+        <object
+          data={selectedPdfUrl}
+          type="application/pdf"
+          width="100%"
+          height="100%"
+        />
+      {/if}
+    </div>
+  </div>
+</HeaderMain>

src/routes/me/resttest/+page.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-  import HeaderMain from "$lib/layouts/HeaderMain.svelte";
-  import { createQuery } from "../../../lib/wundergraph";
-
-  const cloudronQuery = createQuery({
-    operationName: "Cloudron",
-  });
-</script>
-
-<HeaderMain>
-  <div slot="header">
-    <h1>Cloudron Test</h1>
-  </div>
-
-  <div slot="main" class="h-full w-full overflow-scroll">
-    <div class="w-full h-full overflow-scroll">
-      {#if $cloudronQuery.isLoading}
-        <p>Loading...</p>
-      {:else if $cloudronQuery.error}
-        <pre>Error: {JSON.stringify($cloudronQuery.error, null, 2)}</pre>
-      {:else}
-        <pre>{JSON.stringify($cloudronQuery.data, null, 2)}</pre>
-      {/if}
-    </div>
-  </div>
-</HeaderMain>