Add simple delivery UI component (#73)

GeoWerkstatt · Nov 20, 2023 · 3987ce9 · 3987ce9
2 parents b608d84 + 1eb5691
commit 3987ce9
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 50 deletions.
diff --git a/src/GeoCop.Frontend/src/Delivery.jsx b/src/GeoCop.Frontend/src/Delivery.jsx
@@ -0,0 +1,58 @@
+import { Button, Container, Card, Collapse, Spinner } from "react-bootstrap";
+import { useState, useEffect } from "react";
+
+const DeliveryState = Object.freeze({
+  Unavailable: "unavailable",
+  Available: "available",
+  Running: "running",
+  Completed: "completed",
+});
+
+export const Delivery = ({ statusData, validationRunning }) => {
+  const [deliveryState, setDeliveryState] = useState(DeliveryState.Unavailable);
+
+  useEffect(() => {
+    setDeliveryState(DeliveryState.Unavailable);
+  }, [statusData?.jobId]);
+
+  useEffect(() => {
+    if (statusData?.status === "completed" && !validationRunning) {
+      setDeliveryState(DeliveryState.Available);
+    }
+  }, [statusData?.status, validationRunning]);
+
+  const executeDelivery = () => {
+    setDeliveryState(DeliveryState.Running);
+    setTimeout(() => setDeliveryState(DeliveryState.Completed), 600);
+  };
+
+  return (
+    <Collapse in={deliveryState !== DeliveryState.Unavailable}>
+      <Container>
+        <Card>
+          <Card.Body>
+            <p>Die Validierung war erfolgreich. Sie können die Abgabe nun erstellen.</p>
+          </Card.Body>
+          <Card.Footer>
+            {deliveryState === DeliveryState.Available && (
+              <Button variant="primary" onClick={executeDelivery}>
+                Abgabe erstellen
+              </Button>
+            )}
+            {deliveryState === DeliveryState.Running && (
+              <Button variant="primary">
+                <Spinner as="span" animation="border" size="sm" aria-hidden="true" />
+                <span>Abgabe läuft…</span>
+              </Button>
+            )}
+            {deliveryState === DeliveryState.Completed && (
+              <Button variant="success" disabled>
+                Abgabe erfolgreich
+              </Button>
+            )}
+          </Card.Footer>
+        </Card>
+      </Container>
+    </Collapse>
+  );
+};
diff --git a/src/GeoCop.Frontend/src/Home.jsx b/src/GeoCop.Frontend/src/Home.jsx
@@ -1,9 +1,10 @@
 import "./app.css";
 import { useState, useEffect, useRef, useCallback } from "react";
-import { Container } from "react-bootstrap";
+import { Container, Stack } from "react-bootstrap";
 import { FileDropzone } from "./FileDropzone";
 import { Title } from "./Title";
 import { Protokoll } from "./Protokoll";
+import { Delivery } from "./Delivery";
 
 export const Home = ({
   clientSettings,
@@ -126,28 +127,31 @@ export const Home = ({
 
   return (
     <main>
-      <Container className="main-container">
-        <Title clientSettings={clientSettings} quickStartContent={quickStartContent} />
-        <FileDropzone
-          setUploadLogsEnabled={setUploadLogsEnabled}
-          setFileToCheck={setFileToCheck}
-          fileToCheck={fileToCheck}
-          nutzungsbestimmungenAvailable={nutzungsbestimmungenAvailable}
-          checkedNutzungsbestimmungen={checkedNutzungsbestimmungen}
-          checkFile={checkFile}
+      <Stack gap={3}>
+        <Container className="main-container">
+          <Title clientSettings={clientSettings} quickStartContent={quickStartContent} />
+          <FileDropzone
+            setUploadLogsEnabled={setUploadLogsEnabled}
+            setFileToCheck={setFileToCheck}
+            fileToCheck={fileToCheck}
+            nutzungsbestimmungenAvailable={nutzungsbestimmungenAvailable}
+            checkedNutzungsbestimmungen={checkedNutzungsbestimmungen}
+            checkFile={checkFile}
+            validationRunning={validationRunning}
+            setCheckedNutzungsbestimmungen={setCheckedNutzungsbestimmungen}
+            showNutzungsbestimmungen={showNutzungsbestimmungen}
+            acceptedFileTypes={uploadSettings?.allowedFileExtensions}
+            fileToCheckRef={fileToCheckRef}
+          />
+        </Container>
+        <Protokoll
+          log={log}
+          statusData={statusData}
+          fileName={fileToCheck ? fileToCheck.name : ""}
           validationRunning={validationRunning}
-          setCheckedNutzungsbestimmungen={setCheckedNutzungsbestimmungen}
-          showNutzungsbestimmungen={showNutzungsbestimmungen}
-          acceptedFileTypes={uploadSettings?.allowedFileExtensions}
-          fileToCheckRef={fileToCheckRef}
         />
-      </Container>
-      <Protokoll
-        log={log}
-        statusData={statusData}
-        fileName={fileToCheck ? fileToCheck.name : ""}
-        validationRunning={validationRunning}
-      />
+        <Delivery statusData={statusData} validationRunning={validationRunning} />
+      </Stack>
     </main>
   );
 };

diff --git a/src/GeoCop.Frontend/src/Protokoll.jsx b/src/GeoCop.Frontend/src/Protokoll.jsx
@@ -2,7 +2,7 @@ import "./app.css";
 import { ValidatorResult } from "./ValidatorResult";
 import { useState, useRef, useEffect } from "react";
 import DayJS from "dayjs";
-import { Card, Container } from "react-bootstrap";
+import { Card, Collapse, Container } from "react-bootstrap";
 
 export const Protokoll = ({ log, statusData, fileName, validationRunning }) => {
   const [indicateWaiting, setIndicateWaiting] = useState(false);
@@ -27,32 +27,34 @@ export const Protokoll = ({ log, statusData, fileName, validationRunning }) => {
   });
 
   return (
-    <Container>
-      {log.length > 0 && (
-        <Card className="protokoll-card">
-          <Card.Body>
-            <div className="protokoll">
-              {log.map((logEntry, index) => (
-                <div key={index}>
-                  {logEntry}
-                  {indicateWaiting && index === log.length - 1 && "."}
-                </div>
-              ))}
-              <div ref={logEndRef} />
-            </div>
-            {statusData &&
-              Object.entries(statusData.validatorResults).map(([validatorName, result]) => (
-                <ValidatorResult
-                  key={validatorName}
-                  jobId={statusData.jobId}
-                  protokollFileName={protokollFileName}
-                  validatorName={validatorName}
-                  result={result}
-                />
-              ))}
-          </Card.Body>
-        </Card>
-      )}
-    </Container>
+    <Collapse in={log.length > 0}>
+      <Container>
+        {log.length > 0 && (
+          <Card className="protokoll-card">
+            <Card.Body>
+              <div className="protokoll">
+                {log.map((logEntry, index) => (
+                  <div key={index}>
+                    {logEntry}
+                    {indicateWaiting && index === log.length - 1 && "."}
+                  </div>
+                ))}
+                <div ref={logEndRef} />
+              </div>
+              {statusData &&
+                Object.entries(statusData.validatorResults).map(([validatorName, result]) => (
+                  <ValidatorResult
+                    key={validatorName}
+                    jobId={statusData.jobId}
+                    protokollFileName={protokollFileName}
+                    validatorName={validatorName}
+                    result={result}
+                  />
+                ))}
+            </Card.Body>
+          </Card>
+        )}
+      </Container>
+    </Collapse>
   );
 };
diff --git a/src/GeoCop.Frontend/src/app.css b/src/GeoCop.Frontend/src/app.css
@@ -72,7 +72,6 @@ header {
 
 .protokoll-card {
   color: black;
-  margin-top: 30px;
   max-width: 95vw;
   min-height: 150px;
 }