Adding row details on expansion

METS-Programme · Jul 18, 2024 · 6350abc · 6350abc
1 parent 8d1e987
commit 6350abc
Show file tree

Hide file tree

Showing 6 changed files with 282 additions and 3 deletions.
diff --git a/src/constants.ts b/src/constants.ts
@@ -117,3 +117,78 @@ export const incomingTransactionsHeaders = [
     accessor: "actions",
   },
 ];
+
+export const syncTaskTypeDataTypes = [
+  {
+    id: "dataType1",
+    label: "java.lang.Boolean",
+  },
+  {
+    id: "dataType1",
+    label: "java.lang.Character",
+  },
+  {
+    id: "dataType1",
+    label: "java.lang.Float",
+  },
+  {
+    id: "dataType1",
+    label: "java.lang.Integer",
+  },
+  {
+    id: "dataType1",
+    label: "java.lang.String",
+  },
+  {
+    id: "dataType1",
+    label: "java.lang.Boolean",
+  },
+  {
+    id: "dataType1",
+    label: "org.openmrs.Concept",
+  },
+  {
+    id: "dataType1",
+    label: "org.openmrs.Drug",
+  },
+  {
+    id: "dataType1",
+    label: "org.openmrs.Encounter",
+  },
+  {
+    id: "dataType1",
+    label: "org.openmrs.Order",
+  },
+  {
+    id: "dataType1",
+    label: "org.openmrs.TestOrder",
+  },
+  {
+    id: "dataType1",
+    label: "org.openmrs.Location",
+  },
+  {
+    id: "dataType1",
+    label: "org.openmrs.Patient",
+  },
+  {
+    id: "dataType1",
+    label: "org.openmrs.Person",
+  },
+  {
+    id: "dataType1",
+    label: "org.openmrs.ProgramWorkflow",
+  },
+  {
+    id: "dataType1",
+    label: "org.openmrs.Provider",
+  },
+  {
+    id: "dataType1",
+    label: "org.openmrs.User",
+  },
+  {
+    id: "dataType1",
+    label: "org.openmrs.util.AttributableDate",
+  },
+];
diff --git a/src/fhir/sync-task-types/sync-task-type/sync-task-type.component.tsx b/src/fhir/sync-task-types/sync-task-type/sync-task-type.component.tsx
@@ -0,0 +1,170 @@
+import React, { useState } from "react";
+import {
+  Button,
+  Dropdown,
+  Form,
+  FormGroup,
+  Stack,
+  TextInput,
+} from "@carbon/react";
+import { Edit, Save } from "@carbon/react/icons";
+import { useTranslation } from "react-i18next";
+import { syncTaskTypeDataTypes } from "../../../constants";
+import styles from "./sync-task-type.scss";
+
+export const SyncTaskTypeRow = ({ rowData }) => {
+  const { t } = useTranslation();
+
+  const [isEditMode, setIsEditMode] = useState(false);
+
+  const dataTypesList = syncTaskTypeDataTypes.map((type) => ({
+    id: type.id,
+    label: type.label,
+  }));
+
+  const normalizeString = (str) => str?.toLowerCase().replace(/\s+/g, "");
+
+  const findItemByLabel = (apiValue, items) => {
+    const normalizedApiValue = normalizeString(apiValue);
+    return items?.find(
+      (item) => normalizeString(item.label) === normalizedApiValue
+    );
+  };
+
+  const [selectedDataTypeType, setSelectedDataTypeType] = useState(() =>
+    findItemByLabel(rowData?.dataType, dataTypesList)
+  );
+
+  const handleEdit = () => {
+    setIsEditMode(true);
+  };
+
+  const handleSubmit = () => {
+    setIsEditMode(false);
+  };
+
+  const handleCancel = () => {
+    setIsEditMode(false);
+  };
+
+  return (
+    <>
+      <div className={styles.formContainer}>
+        <div className={`${styles.form} ${styles.formFirst}`}>
+          <Form>
+            <Stack gap={2}>
+              <FormGroup>
+                <TextInput
+                  type="text"
+                  labelText={t("syncTaskTypeName", "Sync Task Type Name")}
+                  id="sync-task-type-name"
+                  value={rowData?.name}
+                  disabled={!isEditMode}
+                />
+              </FormGroup>
+              <FormGroup>
+                <TextInput
+                  type="text"
+                  labelText={t("url", "Url")}
+                  id="sync-task-type-url"
+                  value={rowData?.url}
+                  disabled={!isEditMode}
+                />
+              </FormGroup>
+              <FormGroup>
+                <TextInput
+                  type="text"
+                  labelText={t("username", "Username")}
+                  id="sync-task-type-username"
+                  value={rowData?.username}
+                  disabled={!isEditMode}
+                />
+              </FormGroup>
+              <FormGroup>
+                <TextInput
+                  type="text"
+                  labelText={t("password", "Password")}
+                  id="sync-task-type-password"
+                  value={rowData?.password}
+                  disabled={!isEditMode}
+                />
+              </FormGroup>
+            </Stack>
+          </Form>
+        </div>
+        <div className={`${styles.form} ${styles.formFirst}`}>
+          <Form>
+            <Stack>
+              <FormGroup>
+                <Dropdown
+                  id="sync-task-type-data-type"
+                  titleText={t("dataType", "Data Type")}
+                  itemToString={(item) => (item ? item.label : "")}
+                  items={dataTypesList}
+                  label="Select Data Type"
+                  selectedItem={selectedDataTypeType}
+                  onChange={(event) =>
+                    setSelectedDataTypeType(event.selectedItem)
+                  }
+                  disabled={!isEditMode}
+                />
+              </FormGroup>
+              <FormGroup>
+                <TextInput
+                  type="text"
+                  labelText={t(
+                    "dataTypeIdentifier",
+                    "Data Type Identifier (eg uuid for enounter type)"
+                  )}
+                  id="data-type-identifier"
+                  value={rowData?.dataTypeIdentifier}
+                  disabled={!isEditMode}
+                />
+              </FormGroup>
+              <FormGroup>
+                <TextInput
+                  type="text"
+                  labelText={t("authToken", "Auth Token")}
+                  id="auth-token"
+                  value={rowData?.authToken}
+                  disabled={!isEditMode}
+                />
+              </FormGroup>
+            </Stack>
+          </Form>
+        </div>
+      </div>
+      <div className={styles.editButtonsContainer}>
+        {!isEditMode && (
+          <Button
+            kind="primary"
+            size="md"
+            className={styles.actionButton}
+            onClick={handleEdit}
+          >
+            <Edit />
+            <span>{t("edit", "Edit")}</span>
+          </Button>
+        )}
+        {isEditMode && (
+          <>
+            <Button kind="secondary" onClick={handleCancel}>
+              <span>{t("cancel", "Cancel")}</span>
+            </Button>
+            <Button
+              kind="primary"
+              size="md"
+              className={styles.actionButton}
+              onClick={handleSubmit}
+            >
+              <Save />
+              <span>{t("save", "Save")}</span>
+            </Button>
+          </>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default SyncTaskTypeRow;
diff --git a/src/fhir/sync-task-types/sync-task-type/sync-task-type.scss b/src/fhir/sync-task-types/sync-task-type/sync-task-type.scss
@@ -0,0 +1,30 @@
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+.formContainer {
+    width: 100%;
+    display: flex;
+}
+
+.form {
+    width: 50%;
+}
+
+.formFirst {
+    margin-right: 2rem;
+}
+
+.formRight {
+    margin-top: 0.3rem;
+}
+
+.editButtonsContainer {
+    display: flex;
+    margin-top: 1rem;
+    justify-content: flex-end;
+    .actionButton {
+        svg {
+            margin-right: 0.5rem;
+        }
+    }
+}
diff --git a/src/fhir/sync-task-types/sync-task-types-list.component.tsx b/src/fhir/sync-task-types/sync-task-types-list.component.tsx
@@ -24,7 +24,7 @@ import {
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styles from "../../components/data-table/data-tables.scss";
-// import RowDetails from "./fhir-detail.component";
+import SyncTaskTypeRow from "./sync-task-type/sync-task-type.component";
 
 type FilterProps = {
   rowIds: Array<string>;
@@ -151,7 +151,7 @@ const SyncTaskTypeList: React.FC<ListProps> = ({ columns, data }) => {
                           className={styles.expandedActiveVisitRow}
                           colSpan={headers.length + 1}
                         >
-                          {/* <RowDetails selectedProfileData={data[index]} /> */}
+                          <SyncTaskTypeRow rowData={data[index]} />
                         </TableExpandedRow>
                       ) : (
                         <TableExpandedRow

diff --git a/src/fhir/sync-task-types/sync-task-types.resource.ts b/src/fhir/sync-task-types/sync-task-types.resource.ts
@@ -13,7 +13,7 @@ export interface Result {
 }
 
 export function useGetSyncTaskTypes() {
-  const apiUrl = `${restBaseUrl}/synctasktype`;
+  const apiUrl = `${restBaseUrl}/synctasktype?v=full`;
   const { data, error, isLoading } = useSWR<
     { data: SyncTaskTypeResponse },
     Error

diff --git a/src/routes.json b/src/routes.json
@@ -40,6 +40,10 @@
             "name": "sync-task-types-component",
             "component": "SyncTaskTypesComponent"
         },
+        {
+            "name": "sync-tasktype-row-details",
+            "component": "SyncTaskTypeRow"
+        },
         {
             "name": "ai-predictions-workspace",
             "component": "VLSuppressionPredictionWorkspace"