Merge pull request EGCETSII#35 from Full-Tortuga/feature/EGCETSII#29-…

…modal-component

Feature/EGCETSII#29 modal component

decide/administration/frontend/src/components/01-atoms/Button/iconButton.tsx

@@ -0,0 +1,26 @@
+import React, { ReactElement } from "react";
+
+import { IconButton, Tooltip } from "@mui/material";
+
+const Component = (props: {
+  title: string;
+  icon: ReactElement;
+  type?: "submit" | "button" | "reset";
+  disabled?: boolean;
+  onClick?: () => void;
+}) => {
+  return (
+    <Tooltip title={props.title}>
+      <IconButton
+        color="primary"
+        type={props.type || "button"}
+        onClick={props.onClick}
+        disabled={props.disabled}
+      >
+        {props.icon}
+      </IconButton>
+    </Tooltip>
+  );
+};
+
+export default Component;

decide/administration/frontend/src/components/01-atoms/Button/index.ts

@@ -1,3 +1,4 @@
-import component from "./button";
+import Button from "./button";
+import IconButton from "./iconButton";
 
-export { component as Button };
+export { Button, IconButton };

decide/administration/frontend/src/components/01-atoms/index.ts

@@ -1,5 +1,5 @@
-import { Button } from "./Button";
+import { Button, IconButton } from "./Button";
 import { Loader } from "./Loader";
 import { Title } from "./Title";
 
-export { Button, Loader, Title };
+export { Button, IconButton, Loader, Title };

decide/administration/frontend/src/components/02-molecules/Modal/index.ts

@@ -0,0 +1,4 @@
+import Modal from "./modal";
+import ModalPage from "./modalPage";
+
+export { Modal, ModalPage };

decide/administration/frontend/src/components/02-molecules/Modal/modal.tsx

@@ -0,0 +1,81 @@
+import React, { ReactElement } from "react";
+
+import { Dialog, DialogActions, DialogTitle } from "@mui/material";
+
+import { Button, IconButton } from "components/01-atoms";
+
+const Component = (props: {
+  title: string;
+  openerIcon: ReactElement;
+  pages: ReactElement[];
+  externalClose?: boolean;
+  onSubmit: () => void;
+}) => {
+  const [open, setOpen] = React.useState(false);
+  const [page, setPage] = React.useState(1);
+
+  const handleBack = () => {
+    setPage(page - 1);
+  };
+  const handleNext = () => {
+    setPage(page + 1);
+  };
+
+  const handleOpen = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  React.useEffect(() => {
+    if (props.externalClose) handleClose();
+  }, [props.externalClose]);
+
+  return (
+    <>
+      <IconButton
+        title={props.title}
+        onClick={handleOpen}
+        icon={props.openerIcon}
+      />
+      <Dialog open={open} onClose={handleClose} fullWidth>
+        <DialogTitle>{props.title}</DialogTitle>
+        <form
+          className="space-y-5"
+          onSubmit={(e) => {
+            e.preventDefault();
+            props.onSubmit();
+          }}
+        >
+          {props.pages.map((p, i) => (
+            <div hidden={page !== i + 1} key={i}>
+              {p}
+            </div>
+          ))}
+          <DialogActions className="gap-11">
+            {props.pages.length > 1 && (
+              <div className="flex items-end gap-5">
+                <Button
+                  onClick={handleBack}
+                  title="Back"
+                  disabled={page === 1}
+                />
+                {page} / {props.pages.length}
+                <Button
+                  onClick={handleNext}
+                  title="Next"
+                  disabled={page === props.pages.length}
+                />
+              </div>
+            )}
+
+            <Button onClick={props.onSubmit} title="Submit" type="submit" />
+          </DialogActions>
+        </form>
+      </Dialog>
+    </>
+  );
+};
+
+export default Component;

decide/administration/frontend/src/components/02-molecules/Modal/modalPage.tsx

@@ -0,0 +1,17 @@
+import React, { ReactElement } from "react";
+
+import { DialogContent, DialogContentText } from "@mui/material";
+
+const Component = (props: { description?: string; children: ReactElement }) => {
+  return (
+    <>
+      <DialogContent>
+        <DialogContentText>{props.description}</DialogContentText>
+        <br />
+        <div className="flex flex-col items-center">{props.children}</div>
+      </DialogContent>
+    </>
+  );
+};
+
+export default Component;

decide/administration/frontend/src/components/02-molecules/index.ts

@@ -1,3 +1,4 @@
 import { Table } from "./Table";
+import { Modal, ModalPage } from "./Modal";
 
-export { Table };
+export { Table, Modal, ModalPage };

decide/administration/frontend/src/components/pages/users/users.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { UserTable } from "components/templates/users";
+import { NewUserForm, UserTable } from "components/templates/users";
 
 import Page from "../page";
 import { userApi } from "api";
@@ -30,6 +30,7 @@ const UsersPage = () => {
   return (
     <Page title="Users">
       <UserTable users={users || rows} />
+      <NewUserForm />
     </Page>
   );
 };

decide/administration/frontend/src/components/templates/users/index.ts

@@ -1,3 +1,4 @@
-import Component from "./userTable";
+import UserTable from "./userTable";
+import NewUserForm from "./newUserForm";
 
-export { Component as UserTable };
+export { NewUserForm, UserTable };

decide/administration/frontend/src/components/templates/users/newUserForm.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { userType } from "types";
+import { ModalPage, Modal } from "components/02-molecules";
+import { Add } from "@mui/icons-material";
+import { FormItem } from "components/01-atoms/Input";
+
+const Component = (props: { initialUser?: userType.User[] }) => {
+  const {
+    control,
+    getValues,
+    setError,
+    formState: { errors },
+  } = useForm<{ username: string; username2: string }>();
+
+  const [sent, setSent] = React.useState(false);
+
+  const onSubmitFailed = (e: any) => {
+    console.log("error", e);
+    setError("username", { type: "manual", message: "Fake Error" });
+  };
+
+  const onSubmit: SubmitHandler<{ username: string; username2: string }> = (
+    data
+  ) => {
+    console.log("submit:", data);
+    //Todo: call api and create user,
+    //Todo: if created then close modal if not, call onSubmitFailed
+    setSent(true);
+
+    onSubmitFailed("not failed");
+  };
+
+  return (
+    <Modal
+      onSubmit={() => onSubmit(getValues())}
+      title="New User"
+      openerIcon={<Add />}
+      externalClose={sent}
+      pages={[
+        <ModalPage description="Indique la información del Usuario">
+          <FormItem.TextInput
+            control={control}
+            name="username"
+            error={errors.username?.message}
+          ></FormItem.TextInput>
+        </ModalPage>,
+      ]}
+    />
+  );
+};
+
+export default Component;

decide/administration/urls.py

@@ -1,3 +1,4 @@
+from django.conf.urls import url
 from django.urls import path
 from django.urls.conf import re_path
 
@@ -15,6 +16,6 @@
     path('api/base/key/<int:key_id>', views.KeyAPI.as_view()),
     path('api/users/state', views.UpdateUserStateAPI.as_view()),
 
-    # match react-app routed pages
-    re_path(r'(^(?!(api)).*$)', views.index),
+    # react-app
+    url('', views.index)
 ]