Finish deployment cards

cph-cachet · Nov 1, 2024 · d72d9bc · d72d9bc
1 parent 09d894a
commit d72d9bc
Show file tree

Hide file tree

Showing 15 changed files with 378 additions and 92 deletions.
diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
     "@babel/plugin-transform-react-jsx-self": "^7.24.7",
     "@babel/plugin-transform-react-jsx-source": "^7.24.7",
     "@carp-dk/authentication-react": "^1.0.1",
-    "@carp-dk/client": "1.3.0",
+    "@carp-dk/client": "1.4.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@js-joda/core": "^5.6.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/CarpAccordion/index.tsx b/src/components/CarpAccordion/index.tsx
@@ -32,7 +32,7 @@ const CarpAccordion = ({ title, description, children }: Props) => {
           />
         }
       >
-        <Stack direction="column" spacing="10px">
+        <Stack direction="column" gap="10px">
           <Title variant="h3">{title}</Title>
           {description && expanded && (
             <StyledTypography variant="h5">{description}</StyledTypography>

diff --git a/src/components/CarpAccordion/styles.ts b/src/components/CarpAccordion/styles.ts
@@ -30,5 +30,4 @@ export const Title = styled(Typography)(({ theme }) => ({
 
 export const StyledTypography = styled(Typography)(({ theme }) => ({
   color: theme.palette.text.secondary,
-  marginTop: 0,
 }));
diff --git a/src/locales/en/error.json b/src/locales/en/error.json
@@ -1,4 +1,5 @@
 {
   "deployment_data": "An error occurred while loading deployment data",
-  "informed_consents": "An error occurred while loading informed consents"
+  "informed_consents": "An error occurred while loading informed consents",
+  "participants": "An error occurred while loading participants"
 }
diff --git a/src/pages/Deployment/BasicInfo/index.tsx b/src/pages/Deployment/BasicInfo/index.tsx
@@ -5,12 +5,13 @@ import { useParticipantGroupsAccountsAndStatus } from "@Utils/queries/participan
 import { ParticipantGroup } from "@carp-dk/client";
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
-import { Stack } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
 import { formatDateTime } from "@Utils/utility";
 import { Stop } from "@mui/icons-material";
 import { useTranslation } from "react-i18next";
 import LoadingSkeleton from "../LoadingSkeleton";
 import {
+  ExportButton,
   Left,
   Right,
   SecondaryText,
@@ -20,6 +21,8 @@ import {
   StyledStatusDot,
   StyledStatusText,
 } from "./styles";
+import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
+import { useCreateSummary, useExports } from "@Utils/queries/studies";
 
 const BasicInfo = () => {
   const { deploymentId, id: studyId } = useParams();
@@ -32,6 +35,8 @@ const BasicInfo = () => {
   } = useParticipantGroupsAccountsAndStatus(studyId);
   const [deployment, setDeployment] = useState<ParticipantGroup | null>(null);
 
+  const generateExport = useCreateSummary();
+
   useEffect(() => {
     if (!participantDataLoading && participantData && participantData.groups) {
       setDeployment(
@@ -53,69 +58,81 @@ const BasicInfo = () => {
     );
 
   return (
-    <StyledCard elevation={2}>
-      <Left>
-        <Stack direction="column" gap="8px" alignItems="center">
-          <StyledStatusDot
-            status={deployment.deploymentStatus.__type.split(".").pop()}
-          />
-          <StyledStatusText
-            variant="h6"
-            status={deployment.deploymentStatus.__type.split(".").pop()}
-          >
-            {deployment.deploymentStatus.__type.split(".").pop()}
-          </StyledStatusText>
-        </Stack>
-        {!deployment.deploymentStatus.__type.includes("Stopped") && (
-          <StyledButton variant="outlined">
-            <Stop />
-            {t("common:stop_deployment")}
-          </StyledButton>
-        )}
-      </Left>
-      <Right>
-        <Stack direction="column" gap="8px">
-          <SecondaryText variant="h6">
-            {`${t("common:created_on", {
-              date: formatDateTime(deployment.deploymentStatus.createdOn, {
-                year: "numeric",
-                month: "numeric",
-                day: "numeric",
-              }),
-            })}`}
-          </SecondaryText>
-          {deployment.deploymentStatus.startedOn && (
+    <>
+      <Box display="flex" justifyContent="flex-end" marginBottom={"16px"}>
+        <ExportButton
+          onClick={() =>
+            generateExport.mutate({ studyId, deploymentIds: [deploymentId] })
+          }
+        >
+          <FileDownloadOutlinedIcon fontSize="small" />
+          <Typography variant="h5">Export Data</Typography>
+        </ExportButton>
+      </Box>
+      <StyledCard elevation={2}>
+        <Left>
+          <Stack direction="column" gap="8px" alignItems="center">
+            <StyledStatusDot
+              status={deployment.deploymentStatus.__type.split(".").pop()}
+            />
+            <StyledStatusText
+              variant="h6"
+              status={deployment.deploymentStatus.__type.split(".").pop()}
+            >
+              {deployment.deploymentStatus.__type.split(".").pop()}
+            </StyledStatusText>
+          </Stack>
+          {!deployment.deploymentStatus.__type.includes("Stopped") && (
+            <StyledButton variant="outlined">
+              <Stop fontSize="small" />
+              {t("common:stop_deployment")}
+            </StyledButton>
+          )}
+        </Left>
+        <Right>
+          <Stack direction="column" gap="8px">
             <SecondaryText variant="h6">
-              {`${t("common:started_on", {
-                date: formatDateTime(deployment.deploymentStatus.startedOn, {
+              {`${t("common:created_on", {
+                date: formatDateTime(deployment.deploymentStatus.createdOn, {
                   year: "numeric",
                   month: "numeric",
                   day: "numeric",
                 }),
               })}`}
             </SecondaryText>
-          )}
-          {deployment.deploymentStatus.stoppedOn && (
+            {deployment.deploymentStatus.startedOn && (
+              <SecondaryText variant="h6">
+                {`${t("common:started_on", {
+                  date: formatDateTime(deployment.deploymentStatus.startedOn, {
+                    year: "numeric",
+                    month: "numeric",
+                    day: "numeric",
+                  }),
+                })}`}
+              </SecondaryText>
+            )}
+            {deployment.deploymentStatus.stoppedOn && (
+              <SecondaryText variant="h6">
+                {`${t("common:stopped_on", {
+                  date: formatDateTime(deployment.deploymentStatus.stoppedOn, {
+                    year: "numeric",
+                    month: "numeric",
+                    day: "numeric",
+                  }),
+                })}`}
+              </SecondaryText>
+            )}
+          </Stack>
+          <StyledDivider />
+          <Stack direction="row" gap="8px" marginTop={1}>
             <SecondaryText variant="h6">
-              {`${t("common:stopped_on", {
-                date: formatDateTime(deployment.deploymentStatus.stoppedOn, {
-                  year: "numeric",
-                  month: "numeric",
-                  day: "numeric",
-                }),
-              })}`}
+              {t("common:deployment_id", { id: deploymentId })}
             </SecondaryText>
-          )}
-        </Stack>
-        <StyledDivider />
-        <Stack direction="row" gap="8px" marginTop={1}>
-          <SecondaryText variant="h6">
-            {t("common:deployment_id", { id: deploymentId })}
-          </SecondaryText>
-          <CopyButton textToCopy={deploymentId} idType="Deployment" />
-        </Stack>
-      </Right>
-    </StyledCard>
+            <CopyButton textToCopy={deploymentId} idType="Deployment" />
+          </Stack>
+        </Right>
+      </StyledCard>
+    </>
   );
 };
 

diff --git a/src/pages/Deployment/BasicInfo/styles.ts b/src/pages/Deployment/BasicInfo/styles.ts
@@ -5,7 +5,7 @@ import { getDeploymentStatusColor } from "@Utils/utility";
 export const StyledCard = styled(Card)(({ theme }) => ({
   display: "flex",
   justifyContent: "space-between",
-  padding: "10px 16px",
+  padding: "12px 16px",
   marginBottom: 32,
   borderRadius: 8,
   border: `1px solid ${theme.palette.grey[700]}`,
@@ -95,11 +95,21 @@ export const StyledStatusText = styled(Typography, {
   textTransform: "uppercase",
 }));
 
+
+export const ExportButton = styled(Button)(({ theme }) => ({
+  border: `1px solid ${theme.palette.grey[700]}`,
+  borderRadius: 16,
+  textTransform: "none",
+  padding: "8px 16px",
+  color: theme.palette.primary.main,
+  gap: 8,
+}));
+
 export const StyledButton = styled(Button)(({ theme }) => ({
   border: `1px solid ${theme.palette.grey[700]}`,
   borderRadius: 16,
   textTransform: "none",
-  padding: "px 16px",
+  padding: "8px 16px",
   color: theme.palette.error.main,
   gap: 8,
   "&:disabled": {