Merge pull request EGCETSII#37 from Full-Tortuga/feature/EGCETSII#30-…

…action-bar-component

Feature/EGCETSII#30 action bar component

decide/administration/frontend/src/components/02-molecules/Table/table.tsx

@@ -2,14 +2,23 @@ import * as React from "react";
 
 import { DataGrid, GridColDef } from "@mui/x-data-grid";
 
-const Component = (props: { rows: any[]; columns: GridColDef[] }) => {
+const Component = (props: {
+  rows: any[];
+  columns: GridColDef[];
+  setSelected: any;
+}) => {
+  const filterRows = (ids: any[]) => {
+    return props.rows.filter((row: any) => ids.includes(row.id));
+  };
+
   return (
     <div className="w-full">
       <DataGrid
         autoHeight
         rows={props.rows}
         columns={props.columns}
         checkboxSelection
+        onSelectionModelChange={(e) => props.setSelected(filterRows(e))}
       />
     </div>
   );

decide/administration/frontend/src/components/03-organisms/Actions/actionBar.tsx

@@ -0,0 +1,60 @@
+import React, { ReactElement } from "react";
+
+import { Box } from "@mui/system";
+import { Divider } from "@mui/material";
+import { IconButton } from "components/01-atoms";
+
+type Action = {
+  title: string;
+  icon: ReactElement;
+  onClick?: () => void;
+};
+
+const Component = (props: {
+  selection?: any[];
+  actions?: ReactElement[];
+  selectedActions?: Action[];
+  bulkActions?: Action[];
+}) => {
+  const individualEnabled = React.useMemo(
+    () => props.selection && props.selection?.length === 1,
+    [props.selection]
+  );
+  const bulkEnabled = React.useMemo(
+    () => props.selection && props.selection.length >= 1,
+    [props.selection]
+  );
+
+  return (
+    <Box
+      id="actions"
+      className="inline-block w-1/12 h-screen py-1 md:py-5 xl:py-48 px-2"
+    >
+      <Box className="h-full w-12 flex flex-col border rounded p-2 gap-3">
+        {props.actions}
+        <Divider />
+        {props.selectedActions?.map((action, index) => (
+          <IconButton
+            key={index}
+            title={action.title}
+            icon={action.icon}
+            onClick={action.onClick}
+            disabled={!individualEnabled}
+          />
+        ))}
+        <Divider />
+        {props.bulkActions?.map((action, index) => (
+          <IconButton
+            key={index}
+            title={action.title}
+            icon={action.icon}
+            onClick={action.onClick}
+            disabled={!bulkEnabled}
+          />
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+export default Component;

decide/administration/frontend/src/components/03-organisms/Actions/index.ts

@@ -0,0 +1,3 @@
+import ActionBar from "./actionBar";
+
+export { ActionBar };

decide/administration/frontend/src/components/03-organisms/index.ts

@@ -1 +1,3 @@
-export {};
+import { ActionBar } from "./Actions";
+
+export { ActionBar };

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

@@ -9,15 +9,12 @@ const Page = (props: {
 }) => {
   return (
     <>
-      <Box className="w-10/12 h-screen p-1 md:p-5 xl:p-10 justify-center">
+      <Box className="inline-block w-10/12 h-screen p-1 md:p-5 xl:p-10">
         <Title title={props.title} variant="h2" />
         <Box id="content" className="m-2 inline-block w-10/12">
           {props.children}
         </Box>
       </Box>
-      <Box id="actions" className="m-2 inline-block w-1/12">
-        {" "}
-      </Box>
     </>
   );
 };

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

@@ -1,8 +1,13 @@
 import React from "react";
+import { Delete } from "@mui/icons-material";
+
+import { userApi } from "api";
+import { userType } from "types";
+
+import { ActionBar } from "components/03-organisms";
 import { NewUserForm, UserTable } from "components/templates/users";
 
 import Page from "../page";
-import { userApi } from "api";
 
 // todo: fetch users from api and set rows to the response
 const rows = [
@@ -19,6 +24,7 @@ const rows = [
 
 const UsersPage = () => {
   const [users, setUsers] = React.useState(rows);
+  const [selected, setSelected] = React.useState([]);
 
   React.useEffect(() => {
     userApi.getUsers().then((response) => {
@@ -27,11 +33,39 @@ const UsersPage = () => {
     });
   }, []);
 
+  const idList = React.useMemo(
+    () => selected.map((user: userType.User) => user.id),
+    [selected]
+  );
+
+  const handleDelete = () => {
+    console.log(idList);
+  };
+
   return (
-    <Page title="Users">
-      <UserTable users={users || rows} />
-      <NewUserForm />
-    </Page>
+    <>
+      <Page title="Users">
+        <UserTable users={users || rows} setSelected={setSelected} />
+      </Page>
+      <ActionBar
+        selection={selected}
+        actions={[
+          <NewUserForm
+            initialUser={selected.length === 1 ? selected[0] : undefined}
+          />,
+        ]}
+        bulkActions={[
+          {
+            icon: <Delete />,
+            title: "Delete",
+            onClick: () => {
+              console.log("delete");
+              handleDelete();
+            },
+          },
+        ]}
+      />
+    </>
   );
 };
 

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

@@ -2,16 +2,18 @@ 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 { Add, Edit } from "@mui/icons-material";
 import { FormItem } from "components/01-atoms/Input";
 
-const Component = (props: { initialUser?: userType.User[] }) => {
+const Component = (props: { initialUser?: userType.User }) => {
   const {
     control,
     getValues,
     setError,
     formState: { errors },
-  } = useForm<{ username: string; username2: string }>();
+  } = useForm<{ username: string; username2: string }>({
+    defaultValues: { username: props.initialUser?.firstName || "" },
+  });
 
   const [sent, setSent] = React.useState(false);
 
@@ -23,6 +25,8 @@ const Component = (props: { initialUser?: userType.User[] }) => {
   const onSubmit: SubmitHandler<{ username: string; username2: string }> = (
     data
   ) => {
+    //todo: if initialUser empty then call create new user
+    //todo: if initialUser is not empty, then call update
     console.log("submit:", data);
     //Todo: call api and create user,
     //Todo: if created then close modal if not, call onSubmitFailed
@@ -35,15 +39,15 @@ const Component = (props: { initialUser?: userType.User[] }) => {
     <Modal
       onSubmit={() => onSubmit(getValues())}
       title="New User"
-      openerIcon={<Add />}
+      openerIcon={props.initialUser ? <Edit /> : <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>,
       ]}
     />

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

@@ -7,7 +7,6 @@ import { Table } from "components/02-molecules";
 // todo: set correct columns
 
 const columns: GridColDef[] = [
-  { field: "id", headerName: "ID" },
   {
     field: "firstName",
     headerName: "First name",
@@ -26,8 +25,14 @@ const columns: GridColDef[] = [
   },
 ];
 
-const Component = (props: { users: userType.User[] }) => {
-  return <Table rows={props.users} columns={columns} />;
+const Component = (props: { users: userType.User[]; setSelected: any }) => {
+  return (
+    <Table
+      rows={props.users}
+      columns={columns}
+      setSelected={props.setSelected}
+    />
+  );
 };
 
 export default Component;