feat(backoffice): Allow users to upload files to modify the data avai…

…lable in the backend through some backoffice views
Vizzuality · Jan 7, 2025 · fe70a91 · fe70a91
1 parent b4dbcb0
commit fe70a91
Show file tree

Hide file tree

Showing 5 changed files with 214 additions and 16 deletions.
diff --git a/backoffice/components/pages/file-ingestion/page.tsx b/backoffice/components/pages/file-ingestion/page.tsx
@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import { Box, H2, Text, Button, Tabs, Tab, DropZone, Icon } from '@adminjs/design-system';
+
+const FileIngestion = () => {
+  const [activeTab, setActiveTab] = useState('first');
+  const [fileOne, setFileOne] = useState<File | null>(null);
+  const [fileTwo, setFileTwo] = useState<File | null>(null);
+
+  const handleFileUpload = (tab: string, file: File) => {
+    if (tab === 'first') {
+      setFileOne(file);
+    } else if (tab === 'second') {
+      setFileTwo(file);
+    }
+  };
+
+  const handleSubmit = async (tab: string) => {
+    const file = tab === 'first' ? fileOne : fileTwo;
+    if (!file) {
+      alert('Please upload a file first!');
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+      // /admin is not exposed when the app runs behind a reverse proxy
+      const response = await fetch('http://localhost:4000/admin/upload/xlsx', {
+        method: 'POST',
+        body: formData,
+        credentials: 'include', // Backoffice cookie will be sent
+      });
+      const result = await response.json();
+      alert(`File uploaded successfully: ${JSON.stringify(result)}`);
+    } catch (error) {
+      alert(`Error uploading file: ${error.message}`);
+    }
+  };
+
+  return (
+    <Box variant="grey">
+      <Box variant="white">
+        <H2>File Ingestion</H2>
+        <Text>Use this page to update the available data</Text>
+      </Box>
+      <Box
+        mt="xxl"
+        display="flex"
+        flexDirection="column"
+        variant="white"
+      >
+        <Tabs currentTab={activeTab} onChange={(index) => setActiveTab(index)}>
+          <Tab id='first' label="Data ingestion WIP">
+            <Box display="flex" flexDirection="column" alignItems="center" justifyContent="center" p="xl">
+              <Box width="100%" maxWidth="400px">
+                <DropZone 
+                  onChange={(files) => handleFileUpload('first', files[0])}
+                  multiple={false}
+                />
+              </Box>
+              {fileOne && <Text mt="md">File selected: {fileOne.name}</Text>}
+              <Box display="flex" justifyContent="flex-end" width="100%" mt="lg">
+                <Button onClick={() => handleSubmit('first')}><Icon icon="Upload"/>Upload</Button>
+              </Box>
+            </Box>
+          </Tab>
+          <Tab id='second' label="Project Scorecards">
+            <Box display="flex" flexDirection="column" alignItems="center" justifyContent="center" p="xl">
+              <Box width="100%" maxWidth="400px">
+                <DropZone
+                  onChange={(files) => handleFileUpload('second', files[0])}
+                  multiple={false}
+                />
+              </Box>
+              {fileTwo && <Text mt="md">File selected: {fileTwo.name}</Text>}
+              <Box display="flex" justifyContent="flex-end" width="100%" mt="lg">
+                <Button onClick={() => handleSubmit('second')}><Icon icon="Upload"/>Upload</Button>
+              </Box>
+            </Box>
+          </Tab>
+        </Tabs>
+      </Box>
+    </Box>
+  );
+};
+
+export default FileIngestion;
diff --git a/backoffice/index.ts b/backoffice/index.ts
@@ -54,6 +54,7 @@ const componentLoader = new ComponentLoader();
 
 const Components = {
   Dashboard: componentLoader.add("Dashboard", "./components/dashboard"),
+  FileIngestion: componentLoader.add("FileIngestion", "./components/pages/file-ingestion/page"),
 };
 const authProvider = new AuthProvider();
 
@@ -161,6 +162,12 @@ const start = async () => {
       ModelAssumptionResource,
       CountryResource,
     ],
+    pages: {
+      fileIngestion: {
+        icon: "File",
+        component: Components.FileIngestion,
+      }
+    },
     locale: {
       language: "en",
       translations: {
@@ -214,7 +221,7 @@ const start = async () => {
   );
 
   app.use(admin.options.rootPath, adminRouter);
-
+  admin.watch()
   app.listen(PORT, () => {
     console.log(
       `AdminJS started on http://localhost:${PORT}${admin.options.rootPath}`

diff --git a/backoffice/package.json b/backoffice/package.json
@@ -24,6 +24,7 @@
     "nodemon": "^3.1.7",
     "pg": "catalog:",
     "reflect-metadata": "catalog:",
+    "styled-components": "^6.1.13",
     "tslib": "^2.7.0",
     "typeorm": "catalog:",
     "typescript": "catalog:"
@@ -35,7 +36,10 @@
     "@types/express-session": "^1.18.1",
     "@types/node": "^22.7.4",
     "@types/pg": "^8.11.10",
+    "@types/react": "^18",
+    "@types/styled-components": "^5.1.34",
     "dotenv": "16.4.5",
+    "react": "^18.3.1",
     "ts-node": "^10.9.1",
     "tsx": "^4.19.1"
   }

diff --git a/backoffice/tsconfig.json b/backoffice/tsconfig.json
@@ -13,6 +13,6 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
   },
-  "include": ["./**/*.ts", "../shared/**/*.ts", "../api/**/*.ts"],
+  "include": ["./**/*.ts", "./**/*.tsx", "../shared/**/*.ts", "../api/**/*.ts"],
   "exclude": ["node_modules"]
 }