Merge pull request EGCETSII#57 from Full-Tortuga/feature/EGCETSII#20-…

…voting-form-census-selector EGCETSII#20-feat: add census selector and improvements to voting form
Full-Tortuga · Jan 1, 2022 · 43136b6 · 43136b6
2 parents 6c98aaf + ad99eda
commit 43136b6
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 30 deletions.
diff --git a/decide/administration/frontend/src/components/02-molecules/Table/table.tsx b/decide/administration/frontend/src/components/02-molecules/Table/table.tsx
@@ -18,20 +18,24 @@ const Component = (props: {
   const [selectionModel, setSelectionModel] =
     React.useState<GridSelectionModel>([]);
 
-  React.useEffect(() => {
-    props.setSelected(filterRows(selectionModel));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectionModel, filterRows, props.setSelected]);
+  const updateSelectionModel = React.useCallback(
+    (newSelection: GridSelectionModel) => {
+      setSelectionModel(newSelection);
+      props.setSelected(filterRows(newSelection));
+    },
+    [props, filterRows]
+  );
 
   return (
     <div className="w-full">
       <DataGrid
         autoHeight
         rows={props.rows}
         columns={props.columns}
+        pageSize={10}
         checkboxSelection
         selectionModel={selectionModel}
-        onSelectionModelChange={(e) => setSelectionModel(e)}
+        onSelectionModelChange={(e) => updateSelectionModel(e)}
       />
     </div>
   );

diff --git a/decide/administration/frontend/src/components/03-organisms/Actions/actionBar.tsx b/decide/administration/frontend/src/components/03-organisms/Actions/actionBar.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement } from "react";
-
 import { Box } from "@mui/system";
 import { Divider } from "@mui/material";
+
 import { IconButton } from "components/01-atoms";
 
 type Action = {
@@ -23,11 +23,8 @@ const Component = (props: {
   );
 
   return (
-    <Box
-      id="actions"
-      className="inline-block w-1/12 h-screen py-1 sm:py-5 md:py-20 my-10 px-2"
-    >
-      <Box className="h-full w-12 flex flex-col border rounded p-2 gap-3">
+    <Box id="actions" className="inline-flex items-center w-1/12 h-screen px-2">
+      <Box className="w-12 flex flex-col border rounded p-2 gap-3">
         {props.actions}
         <Divider />
         {props.individualActions?.map((action, index) => (

diff --git a/decide/administration/frontend/src/components/pages/page.tsx b/decide/administration/frontend/src/components/pages/page.tsx
@@ -11,7 +11,7 @@ const Page = (props: {
     <>
       <Box className="inline-block w-10/12 h-screen p-1 md:p-5 xl:p-10">
         <Box id="content" className="my-2 ml-10 inline-block w-11/12">
-          <Title title={props.title} variant="h2" />
+          <Title title={props.title} variant="h3" />
           {props.children}
         </Box>
       </Box>

diff --git a/decide/administration/frontend/src/components/pages/users/users.tsx b/decide/administration/frontend/src/components/pages/users/users.tsx
@@ -21,10 +21,6 @@ const UsersPage = () => {
   const [selected, setSelected] = React.useState([]);
   const [refetch, setRefetch] = React.useState(false);
 
-  React.useEffect(() => {
-    console.log(selected);
-  }, [selected]);
-
   const refetchUsers = () => {
     setRefetch(!refetch);
   };

diff --git a/decide/administration/frontend/src/components/pages/votings/votings.tsx b/decide/administration/frontend/src/components/pages/votings/votings.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Delete } from "@mui/icons-material";
+import { Delete, Refresh } from "@mui/icons-material";
 
 import { votingType } from "types";
 
@@ -123,6 +123,13 @@ const VotingsPage = () => {
             initialVoting={selected.length === 1 ? selected[0] : undefined}
           />,
         ]}
+        individualActions={[
+          {
+            icon: <Refresh />,
+            title: "Refresh",
+            onClick: () => refetchVotings(),
+          },
+        ]}
         bulkActions={[
           {
             icon: <Delete />,

diff --git a/decide/administration/frontend/src/components/templates/votings/censusInput.tsx b/decide/administration/frontend/src/components/templates/votings/censusInput.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { Controller } from "react-hook-form";
+import { Refresh } from "@mui/icons-material";
+import { FormLabel } from "@mui/material";
+
+import { userApi } from "api";
+import { userType } from "types";
+
+import { IconButton } from "components/01-atoms";
+import { UserTable } from "..";
+
+const Component = (props: { control: any }) => {
+  const [refetch, setRefetch] = React.useState(false);
+  const [users, setUsers] = React.useState<userType.User[]>([]);
+
+  const refetchUsers = () => {
+    setRefetch(!refetch);
+  };
+
+  React.useEffect(() => {
+    userApi
+      .getUsers()
+      .then((response) => {
+        console.log(response);
+        setUsers(response.data);
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  }, [refetch]);
+
+  return (
+    <Controller
+      name="census"
+      control={props.control}
+      render={({ field, fieldState }) => (
+        <>
+          <FormLabel>{"Census".toLowerCase()}</FormLabel>
+          <UserTable
+            setSelected={(selection: userType.User[]) =>
+              field.onChange(selection.map((u) => u.id))
+            }
+            users={users}
+          />
+          <IconButton
+            onClick={refetchUsers}
+            icon={<Refresh />}
+            title="Refetch"
+          />
+        </>
+      )}
+    />
+  );
+};
+
+export default Component;
diff --git a/decide/administration/frontend/src/components/templates/votings/index.ts b/decide/administration/frontend/src/components/templates/votings/index.ts
@@ -1,5 +1,7 @@
 import QuestionInput from "./questionInput";
+import CensusInput from "./censusInput";
+
 import VotingTable from "./votingTable";
 import VotingForm from "./votingForm";
 
-export { VotingForm, VotingTable, QuestionInput };
+export { VotingForm, VotingTable, QuestionInput, CensusInput };
diff --git a/decide/administration/frontend/src/components/templates/votings/votingForm.tsx b/decide/administration/frontend/src/components/templates/votings/votingForm.tsx
@@ -1,10 +1,12 @@
 import React from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
 import { Add, Edit } from "@mui/icons-material";
+
+import { votingType } from "types";
+
 import { Input } from "components/01-atoms";
 import { Modal, ModalPage } from "components/02-molecules";
-import { QuestionInput } from ".";
-import { SubmitHandler, useForm } from "react-hook-form";
-import { votingType } from "types";
+import { CensusInput, QuestionInput } from ".";
 
 const Component = (props: { initialVoting?: votingType.Voting }) => {
   const editMode = React.useMemo(
@@ -15,15 +17,35 @@ const Component = (props: { initialVoting?: votingType.Voting }) => {
   const {
     control,
     getValues,
+    trigger,
     setError,
+    clearErrors,
     formState: { errors },
+    reset,
   } = useForm<votingType.VotingFormFields>({ mode: "onChange" });
 
   const [sent, setSent] = React.useState(false);
 
+  React.useEffect(() => {
+    reset({});
+    clearErrors();
+    trigger();
+    if (props.initialVoting) {
+      const census: number[] = [];
+      const question = {} as votingType.Question;
+
+      control._defaultValues = {
+        name: props.initialVoting?.name,
+        desc: props.initialVoting?.desc,
+        census: census,
+        question: question,
+      };
+    }
+  }, [props.initialVoting, control, reset, clearErrors, trigger]);
+
   const onSubmitFailed = (e: any) => {
     console.log("error", e);
-    setError("name", { type: "manual", message: "Fake Error" });
+    setError("name", { type: "manual", message: e });
   };
 
   const onSubmit: SubmitHandler<votingType.VotingFormFields> = (data) => {
@@ -45,6 +67,7 @@ const Component = (props: { initialVoting?: votingType.Voting }) => {
             control={control}
             name="name"
             error={errors.name?.message}
+            rules={{ required: true }}
           />
           <Input.Text
             control={control}
@@ -55,19 +78,14 @@ const Component = (props: { initialVoting?: votingType.Voting }) => {
         <ModalPage description="Indique la pregunta de la Votación">
           <QuestionInput control={control} />
         </ModalPage>,
-        <ModalPage
-          description="Indique el censo de la Votación
-         (si no selecciona ningún usuario, todos serán añadidos)"
-        >
-          <span>
-            {/* TODO: <CensusInput control={control} /> */}
-            Todo: Census Input
-          </span>
+        <ModalPage description="Indique el censo de la Votación">
+          <CensusInput control={control} />
         </ModalPage>,
         <ModalPage description="Indique la autorización requerida para la Votación">
           <Input.Radio
             control={control}
             name="auth"
+            rules={[{ required: true }]}
             options={[
               {
                 label: "Local (localhost:8000)",