U4X-618: UI for Sync task types

src/constants.ts

@@ -19,6 +19,33 @@ export const fhirTableHeaders = [
   },
 ];
 
+export const syncTaskTypeTableHeaders = [
+  {
+    id: "1",
+    key: "name",
+    header: "NAME",
+    accessor: "name",
+  },
+  {
+    id: "2",
+    key: "url",
+    header: "URL",
+    accessor: "url",
+  },
+  {
+    id: "3",
+    key: "dataType",
+    header: "DATA TYPE ID",
+    accessor: "dataType",
+  },
+  {
+    id: "4",
+    key: "uuid",
+    header: "UUID",
+    accessor: "uuid",
+  },
+];
+
 export const profileTransactionsHeaders = [
   {
     id: "1",
@@ -105,3 +132,78 @@ export const caseBasedPrimaryResourceTypes: Array<Item> = [
     label: "Cohort Type",
   },
 ];
+
+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",
+  },
+];

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;

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;
+        }
+    }
+}