Merge pull request #68 from cph-cachet/feature/fix-issues

Fix issues
cph-cachet · Jan 31, 2025 · 9b20529 · 9b20529
2 parents d707ae7 + 693b18c
commit 9b20529
Show file tree

Hide file tree

Showing 12 changed files with 137 additions and 23 deletions.
diff --git a/src/assets/languageMap.ts b/src/assets/languageMap.ts
@@ -39,7 +39,7 @@ type LanguageLabelsMapping = {
 export const languageLabels: LanguageLabelsMapping = {
   BG: { primary: "Bulgarian", secondary: "bg" },
   HR: { primary: "Croatian", secondary: "hr" },
-  CZ: { primary: "Czech", secondary: "cs" },
+  CZ: { primary: "Czech", secondary: "cz" },
   DK: { primary: "Danish", secondary: "da" },
   NL: { primary: "Dutch", secondary: "nl" },
   GB: { primary: "English", secondary: "en" },

diff --git a/src/pages/Deployment/InformedConsentCard/index.tsx b/src/pages/Deployment/InformedConsentCard/index.tsx
@@ -144,7 +144,7 @@ const InformedConsentCard = () => {
                   <DownloadButton onClick={() => downloadPdf(consent)}>
                     <FileDownloadOutlinedIcon />
                     <Typography variant="h6">
-                      {t("common:export_data")}
+                      {t("common:download_pdf")}
                     </Typography>
                   </DownloadButton>
                 </Right>

diff --git a/src/pages/Deployments/DeploymentCard/index.tsx b/src/pages/Deployments/DeploymentCard/index.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-underscore-dangle */
 import CopyButton from "@Components/Buttons/CopyButton";
-import { ParticipantGroup } from "@carp-dk/client";
+import { ParticipantGroup } from "@carp-dk/client/models/ParticipantGroups";
 import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
 import { Skeleton, Typography } from "@mui/material";
 import { useEffect, useMemo, useState } from "react";
@@ -79,7 +79,11 @@ const DeploymentCard = ({
             )
           }
         >
-          {names && names[0].length > 0 ? names : <i>Generated deployment</i>}
+          {!deployment.participants.every((p) => p.email == null) ? (
+            names
+          ) : (
+            <i>Generated deployment</i>
+          )}
         </Names>
         <StyledDivider />
         <HorizontalStatusContainer>

diff --git a/src/pages/Export/ExportsTable/index.tsx b/src/pages/Export/ExportsTable/index.tsx
@@ -53,7 +53,7 @@ const ExportsTable = memo(({ exports, exportsLoading }: Props) => {
       },
       {
         accessorKey: "download",
-        header: "Export",
+        header: "Download",
         Cell: DownloadButton,
         enableSorting: false,
         size: 100,

diff --git a/src/pages/Participant/InformedConsent/index.tsx b/src/pages/Participant/InformedConsent/index.tsx
@@ -114,7 +114,7 @@ const InformedConsent = () => {
           <>
             <StyledDivider />
             <DownloadButton onClick={() => downloadPdf()}>
-              <Typography variant="h6">Export</Typography>
+              <Typography variant="h6">Download PDF</Typography>
               <FileDownloadOutlinedIcon fontSize="small" />
             </DownloadButton>
           </>

diff --git a/src/pages/Participants/ParticipantsTable/index.tsx b/src/pages/Participants/ParticipantsTable/index.tsx
@@ -4,7 +4,7 @@ import {
   useParticipantsAccounts,
 } from "@Utils/queries/participants";
 import { useStudyDetails } from "@Utils/queries/studies";
-import { formatDate } from "@Utils/utility";
+import { formatDateTime } from "@Utils/utility";
 import carpStudies from "@cachet/carp-studies-core";
 import { ParticipantAccount } from "@carp-dk/client";
 import AddRoundedIcon from "@mui/icons-material/AddRounded";
@@ -90,7 +90,11 @@ const ParticipantsTable = ({
         if (deployment) {
           return (
             <Typography variant="h5">
-              {formatDate(deployment.invitedOn.toEpochMilliseconds())}
+              {formatDateTime(deployment.invitedOn.toEpochMilliseconds(), {
+                year: "numeric",
+                month: "short",
+                day: "numeric",
+              })}
             </Typography>
           );
         }

diff --git a/src/pages/StudyOverview/Overview/DeploymentStatus/TooltipContent/index.tsx b/src/pages/StudyOverview/Overview/DeploymentStatus/TooltipContent/index.tsx
@@ -14,7 +14,7 @@ const TooltipContent = () => {
       </Typography>
       <Typography variant="h5">
         <span style={{ color: getDeploymentStatusColor("DeployingDevices") }}>
-          Deploying Devices
+          Deploying
         </span>
         : Participants have started registering devices, but are remaining
         devices.

diff --git a/src/pages/StudyOverview/Overview/DeploymentStatus/index.tsx b/src/pages/StudyOverview/Overview/DeploymentStatus/index.tsx
@@ -66,7 +66,7 @@ const DeploymentStatus = () => {
         deploying: {
           id: 1,
           value: 0,
-          label: "Deploying Devices",
+          label: "Deploying",
           color: getDeploymentStatusColor("DeployingDevices"),
         },
         running: {

diff --git a/src/pages/StudySettings/StudyData/index.tsx b/src/pages/StudySettings/StudyData/index.tsx
@@ -18,6 +18,7 @@ import LinkIcon from "@mui/icons-material/Link";
 import { useFormik } from "formik";
 import { useNavigate, useParams } from "react-router";
 import * as yup from "yup";
+import { formatDateTime } from "@Utils/utility";
 import StudySetupSkeleton from "../StudySetupSkeleton";
 import {
   Heading,
@@ -175,7 +176,17 @@ const StudyData = () => {
             key={protocol.id.stringRepresentation}
             value={protocol.id.stringRepresentation}
           >
-            {protocol.name}
+            <Stack
+              width="100%"
+              direction="row"
+              alignItems="center"
+              justifyContent="space-between"
+            >
+              <Typography>{protocol.name}</Typography>
+              <Typography variant="caption">
+                {formatDateTime(protocol.createdOn.toEpochMilliseconds())}
+              </Typography>
+            </Stack>
           </MenuItem>
         ))}
       </Select>

diff --git a/src/pages/Translation/AddTranslationModal/index.tsx b/src/pages/Translation/AddTranslationModal/index.tsx
@@ -1,12 +1,21 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import { languageLabels } from "@Assets/languageMap";
 import DragAndDrop from "@Components/DragAndDrop";
-import { FormLabel, Modal } from "@mui/material";
+import {
+  Autocomplete,
+  FormLabel,
+  InputAdornment,
+  MenuItem,
+  Modal,
+  Stack,
+  TextField,
+} from "@mui/material";
 import { useCreateTranslation } from "@Utils/queries/studies";
 import { useFormik } from "formik";
 import { useEffect, useState } from "react";
-import ReactFlagsSelect from "react-flags-select";
 import { useParams } from "react-router-dom";
 import * as yup from "yup";
+import * as flags from "react-flags-select";
 import {
   CancelButton,
   DoneButton,
@@ -121,14 +130,99 @@ const AddTranslationModal = ({ open, onClose }: Props) => {
         </ModalDescription>
         <ModalContainer>
           <ModalContent>
-            <FormLabel required>Language</FormLabel>
-            <ReactFlagsSelect
-              countries={[...Object.keys(languageLabels)]}
-              customLabels={languageLabels}
-              placeholder="Select Language"
-              selected={formik.values.language}
-              // eslint-disable-next-line @typescript-eslint/no-misused-promises, @typescript-eslint/no-unsafe-member-access
-              onSelect={(code) => formik.setFieldValue("language", code)}
+            <FormLabel id="languageLabel" required>
+              Language
+            </FormLabel>
+            <Autocomplete
+              options={Object.keys(languageLabels)}
+              value={formik.values.language || null}
+              onChange={(_, newValue) => {
+                formik.setFieldValue("language", newValue);
+              }}
+              filterOptions={(options, params) => {
+                return options.filter((option) =>
+                  languageLabels[option].primary
+                    .toLowerCase()
+                    .includes(params.inputValue.toLowerCase()),
+                );
+              }}
+              onBlur={formik.handleBlur}
+              fullWidth
+              getOptionLabel={(option) =>
+                `${languageLabels[option].primary} ${
+                  languageLabels[option].secondary
+                }`
+              }
+              renderInput={(params) => {
+                if (!formik.values.language) {
+                  return (
+                    <TextField
+                      {...params}
+                      placeholder="Select Language"
+                      size="small"
+                    />
+                  );
+                }
+                const countryCode =
+                  formik.values.language[0].toUpperCase() +
+                  formik.values.language[1].toLowerCase();
+                let CountryFlag;
+                if (countryCode in flags) {
+                  CountryFlag = flags[countryCode];
+                } else {
+                  CountryFlag = "div";
+                }
+                return (
+                  <TextField
+                    {...params}
+                    placeholder="Select Language"
+                    size="small"
+                    // eslint-disable-next-line react/no-unstable-nested-components
+                    InputProps={{
+                      ...params.InputProps,
+                      startAdornment: (
+                        <InputAdornment
+                          position="start"
+                          sx={{ marginRight: 0 }}
+                        >
+                          <CountryFlag
+                            name={formik.values.language}
+                            selected=""
+                            onSelect={undefined}
+                            width={25}
+                            style={{ marginLeft: "10px" }}
+                          />
+                        </InputAdornment>
+                      ),
+                    }}
+                  />
+                );
+              }}
+              renderOption={(props, option) => {
+                // eslint-disable-next-line react/prop-types
+                const { key, ...optionProps } = props;
+                const countryCode =
+                  option[0].toUpperCase() + option[1].toLowerCase();
+                let CountryFlag;
+                if (countryCode in flags) {
+                  CountryFlag = flags[countryCode];
+                } else {
+                  CountryFlag = "div";
+                }
+                return (
+                  <MenuItem key={key} {...optionProps}>
+                    <Stack direction="row" alignItems="center" gap={1}>
+                      <CountryFlag
+                        name={option}
+                        selected=""
+                        onSelect={undefined}
+                        width={30}
+                      />
+                      {languageLabels[option].primary}
+                    </Stack>
+                  </MenuItem>
+                );
+              }}
             />
             <FormLabel required>Upload Translation File</FormLabel>
             <DragAndDrop

diff --git a/src/public/locales/en/common.json b/src/public/locales/en/common.json
@@ -12,5 +12,6 @@
   "last_data_zero": "Last data: Today",
   "last_data_one": "Last data: {{count}} day ago",
   "last_data_other": "Last data: {{count}} days ago",
-  "participant_id": "Participant ID: {{participantId}}"
+  "participant_id": "Participant ID: {{participantId}}",
+  "download_pdf": "Download PDF"
 }
diff --git a/src/utils/utility.tsx b/src/utils/utility.tsx
@@ -68,7 +68,7 @@ export const formatDateTime = (
   },
 ) => {
   const date = new Date(dateString);
-  return `${date.toLocaleString("en-GB", options)}`;
+  return `${date.toLocaleString("en-US", options)}`;
 };
 
 export const formatDate = (dateString: number | string) => {