OH2-415 | OH2-316 | Types / Ages CRUD (#689)

* chore:align API spec file

* chore:align API spec file

* chore:align with API spec

* feat:add age types management

* chore:add e2e tests

* chore:add validation

* Update src/resources/i18n/en.json

* chore:code refactoring

api/oh.yaml

@@ -1904,15 +1904,19 @@ paths:
         content:
           application/json:
             schema:
-              $ref: "#/components/schemas/AgeTypeDTO"
+              type: array
+              items:
+                $ref: "#/components/schemas/AgeTypeDTO"
         required: true
       responses:
         "200":
           description: OK
           content:
             application/json:
               schema:
-                $ref: "#/components/schemas/AgeTypeDTO"
+                type: array
+                items:
+                  $ref: "#/components/schemas/AgeTypeDTO"
       security:
       - bearerAuth: []
   /admissiontypes:
@@ -6949,11 +6953,11 @@ components:
           type: string
           description: "Flag record deleted, values are 'Y' OR 'N' "
           example: "N"
+        fhu:
+          type: string
         yprog:
           type: integer
           format: int32
-        fhu:
-          type: string
       description: The admission
     AdmissionTypeDTO:
       required:

cypress/integrations/admin_activities/types_activities/ages_activities/edit_ages_activity.cy.ts

@@ -0,0 +1,50 @@
+/// <reference types="cypress" />
+
+const AGE_TYPE_START_PATH = "/admin/types/ages";
+
+describe("Admission types Edit Activity specs", () => {
+  it("should render the ui", () => {
+    cy.authenticate(AGE_TYPE_START_PATH);
+    cy.dataCy("sub-activity-title").contains("Manage age types");
+  });
+
+  it("should show age types edit form", () => {
+    cy.dataCy("edit-age-types").click();
+    cy.dataCy("sub-activity-title").contains("Edit age types");
+  });
+
+  it("should fail to edit the age type", () => {
+    cy.byId("ageTypes\\[0\\]\\.to").type("1");
+    cy.dataCy("submit-form").click();
+    cy.dataCy("dialog-info").should("not.exist");
+  });
+
+  it("should successfully save age types changes", () => {
+    cy.byId("ageTypes\\[0\\]\\.to").clear().type("0");
+    cy.byId("ageTypes\\[5\\]\\.to").clear().type("104");
+    cy.dataCy("submit-form").click();
+    cy.dataCy("dialog-info").contains("have been updated successfully!");
+    cy.dataCy("approve-dialog").click();
+  });
+
+  it("should redirect after age types update", () => {
+    cy.dataCy("sub-activity-title").contains("Manage age types");
+  });
+
+  it("should cancel the cancellation of the age types update", () => {
+    cy.dataCy("edit-age-types").click();
+    cy.dataCy("cancel-form").click();
+    cy.dataCy("dialog-info").contains(
+      "Are you sure to cancel the age types update?"
+    );
+    cy.dataCy("close-dialog").click();
+    cy.dataCy("dialog-info").should("not.exist");
+  });
+
+  it("should cancel the age types update", () => {
+    cy.dataCy("cancel-form").click();
+    cy.dataCy("approve-dialog").click();
+    cy.dataCy("dialog-info").should("not.exist");
+    cy.dataCy("sub-activity-title").contains("Manage age types");
+  });
+});

cypress/integrations/admin_activities/types_activities/ages_activities/manage_ages_activity.cy.ts

@@ -0,0 +1,19 @@
+/// <reference types="cypress" />
+
+const AGE_TYPES_START_PATH = "/admin/types/ages";
+
+describe("Age types Activity specs", () => {
+  it("should render the ui", () => {
+    cy.authenticate(AGE_TYPES_START_PATH);
+    cy.dataCy("sub-activity-title").contains("Manage age types");
+  });
+
+  it("should present the table with 6 rows", () => {
+    cy.dataCy("age-types-table")
+      .find("table")
+      .then(($table) => {
+        const rows = $table.find("tbody tr");
+        expect(rows.length).equal(6);
+      });
+  });
+});

src/components/accessories/admin/types/TypesAdmin.tsx

@@ -29,14 +29,15 @@ const TypesAdmin = () => {
     [
       defaultTypeOption,
       { label: t("types.exams"), value: "exams" },
+      { label: t("types.ages"), value: "ages" },
       { label: t("types.vaccines"), value: "vaccines" },
-      { label: t("types.operations"), value: "operations" },
+      { label: t("types.medicals"), value: "medicals" },
       { label: t("types.diseases"), value: "diseases" },
-      { label: t("types.deliveries"), value: "deliveries" },
       { label: t("types.admissions"), value: "admissions" },
-      { label: t("types.deliveryResultType"), value: "deliveryresulttypes" },
+      { label: t("types.deliveries"), value: "deliveries" },
       { label: t("types.discharges"), value: "discharges" },
-      { label: t("types.medicals"), value: "medicals" },
+      { label: t("types.operations"), value: "operations" },
+      { label: t("types.deliveryResultType"), value: "deliveryresulttypes" },
       { label: t("types.pregnantTreatment"), value: "pregnanttreatmenttypes" },
     ],
     (type) => type.label

src/components/accessories/admin/types/components/agetypes/AgeTypes.tsx

@@ -0,0 +1,47 @@
+import { useAppDispatch } from "libraries/hooks/redux";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router";
+import { getAgeTypes } from "state/types/ageTypes";
+import { setTypeMode } from "../../../../../../state/types/config";
+import Button from "../../../../button/Button";
+import AgeTypesTable from "./ageTypesTable";
+import "./styles.scss";
+
+const AgeTypes = () => {
+  const navigate = useNavigate();
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch(getAgeTypes());
+    dispatch(setTypeMode("manage"));
+  }, [dispatch]);
+
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <h3 data-cy="sub-activity-title">{t("ageTypes.title")}</h3>
+
+      <div className="ageTypes" data-cy="age-types-table">
+        <AgeTypesTable
+          headerActions={
+            <Button
+              onClick={() => {
+                navigate("./edit");
+              }}
+              type="button"
+              variant="contained"
+              color="primary"
+              dataCy="edit-age-types"
+            >
+              {t("ageTypes.editAgeTypes")}
+            </Button>
+          }
+        />
+      </div>
+    </>
+  );
+};
+
+export default AgeTypes;

src/components/accessories/admin/types/components/agetypes/ageTypesForm/AgeTypeFields.tsx

@@ -0,0 +1,44 @@
+import TextField from "components/accessories/textField/TextField";
+import React, { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { IAgeTypeFieldsProps } from "./types";
+
+const AgeTypeFields: FC<IAgeTypeFieldsProps> = ({
+  formik,
+  getErrorText,
+  isValid,
+  index,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <tr className="ageTypeFormRow">
+      <td>{formik.values.ageTypes[index].code}</td>
+      <td className="fromField">
+        <TextField
+          field={formik.getFieldProps(`ageTypes[${index}].from`)}
+          theme="regular"
+          label={t("ageTypes.from")}
+          isValid={isValid("from", index)}
+          errorText={getErrorText("from", index)}
+          onBlur={formik.handleBlur}
+          type="number"
+        />
+      </td>
+      <td className="toField">
+        <TextField
+          field={formik.getFieldProps(`ageTypes[${index}].to`)}
+          theme="regular"
+          label={t("ageTypes.to")}
+          isValid={isValid("to", index)}
+          errorText={getErrorText("to", index)}
+          onBlur={formik.handleBlur}
+          type="number"
+        />
+      </td>
+      <td>{t(formik.values.ageTypes[index].description)}</td>
+    </tr>
+  );
+};
+
+export default AgeTypeFields;