Fansoa · Fansoa · Aug 23, 2024
diff --git a/app/(protected)/modules/mealworm/components/ActionInterface/index.tsx b/app/(protected)/modules/mealworm/components/ActionInterface/index.tsx
@@ -7,14 +7,39 @@ import {
   getFormattedCrateActions,
   getSelectedItemType,
 } from "@/app/(protected)/modules/mealworm/utils/methods/index.ts";
+import DrawerForm from "@/components/DrawerForm/index.tsx";
+import LabelInputControlled from "@/components/LabelInputControlled/index.tsx";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+
+const Toto = ({ setIsOpen }) => {
+  return (
+    <button
+      type="button"
+      className="block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+      onClick={() => setIsOpen((prev) => !prev)}
+    >
+      Add user
+    </button>
+  );
+};
 
 const ActionInterface = () => {
   const { rackList } = useRackListContext();
+  const [isOpen, setIsOpen] = useState(false);
+  const methods = useForm();
 
   const selectedItem = useSelectedItemContext();
 
   const selectedItemType = getSelectedItemType(selectedItem);
 
+  let itemList;
+  let description;
+  let messageIfItemListIsEmpty;
+  let renderFeedingFormButton;
+  let renderHarvestFormButton;
+  let renderTransferFormButton;
+
   if (selectedItem) {
     const rack = rackList.find((rack) => rack.id === selectedItem.rackId);
 
@@ -25,51 +50,60 @@ const ActionInterface = () => {
           )
         : [[]];
 
-      const rackActionList = formattedCrateActionsOfRack.flat();
-
-      return (
-        <TableList
-          itemList={rackActionList}
-          title="Action list"
-          description={`A list of all actions carried out on crates of rack: ${rack.name}`}
-          messageIfItemListIsEmpty={`${rack.name} does not contain any actions`}
-        />
-      );
+      itemList = formattedCrateActionsOfRack.flat();
+      description = `A list of all actions carried out on crates of rack: ${rack.name}`;
+      messageIfItemListIsEmpty = `${rack.name} does not contain any actions`;
     }
 
     if (selectedItemType === "crate") {
       const crate = rack.crate.find(
         (crate) => crate.id === selectedItem.crateId,
       );
-      const crateActionList = crate.action
-        ? getFormattedCrateActions(crate)
-        : [];
-      return (
-        <TableList
-          itemList={crateActionList}
-          title="Action list"
-          description={`A list of all actions carried out on the crate: ${crate.name}`}
-          messageIfItemListIsEmpty="The selected element does not contain any actions"
-        />
-      );
+      itemList = crate.action ? getFormattedCrateActions(crate) : [];
+
+      description = `A list of all actions carried out on the crate: ${crate.name}`;
+      messageIfItemListIsEmpty =
+        "The selected element does not contain any actions";
+      renderFeedingFormButton = <Toto setIsOpen={setIsOpen} />;
+      // renderHarvestFormButton = () => <Toto />;
+      // renderTransferFormButton = () => <Toto />;
     }
   }
+  if (!selectedItem) {
+    itemList = rackList
+      ?.map((rack) =>
+        rack?.crate
+          .map((crate) => crate.action && getFormattedCrateActions(crate))
+          .flat(),
+      )
+      .flat();
 
-  const actionList = rackList
-    ?.map((rack) =>
-      rack?.crate
-        .map((crate) => crate.action && getFormattedCrateActions(crate))
-        .flat(),
-    )
-    .flat();
+    description = "A list of all actions carried out";
+    messageIfItemListIsEmpty =
+      "The selected element does not contain any actions";
+  }
 
   return (
-    <TableList
-      itemList={actionList}
-      title="Action list"
-      description="A list of all actions carried out"
-      messageIfItemListIsEmpty="The selected element does not contain any actions"
-    />
+    <>
+      <TableList
+        itemList={itemList}
+        tableHeaderList={["id", "name", "action", "weight", "created_at"]}
+        title="Action list"
+        description={description}
+        messageIfItemListIsEmpty={messageIfItemListIsEmpty}
+        renderFeedingFormButton={renderFeedingFormButton}
+        renderHarvestFormButton={renderHarvestFormButton}
+        renderTransferFormButton={renderTransferFormButton}
+      />
+      <DrawerForm
+        methods={{ ...methods }}
+        panelTitle="FeedingForm"
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+      >
+        <LabelInputControlled label="toto" name="toto" />
+      </DrawerForm>
+    </>
   );
 };
 

diff --git a/components/TableList/components/TableLayout/index.tsx b/components/TableList/components/TableLayout/index.tsx
@@ -1,6 +1,13 @@
 import { TableLayoutProps } from "@/components/TableList/components/TableLayout/types.ts";
 
-const TableLayout = ({ title, description, children }: TableLayoutProps) => {
+const TableLayout = ({
+  title,
+  description,
+  renderFeedingFormButton,
+  renderHarvestFormButton,
+  renderTransferFormButton,
+  children,
+}: TableLayoutProps) => {
   return (
     <div className="px-4 sm:px-6 lg:px-8">
       <div className="sm:flex sm:items-center">
@@ -10,14 +17,9 @@ const TableLayout = ({ title, description, children }: TableLayoutProps) => {
           </h1>
           <p className="mt-2 text-sm text-gray-700">{description}</p>
         </div>
-        {/* <div className="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
-      <button
-        type="button"
-        className="block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-      >
-        Add user
-      </button>
-    </div> */}
+        <div className="flex gap-2 mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
+          {renderFeedingFormButton && renderFeedingFormButton}
+        </div>
       </div>
       <div className="mt-8 flow-root">
         <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">

diff --git a/components/TableList/components/TableLayout/types.ts b/components/TableList/components/TableLayout/types.ts
@@ -4,4 +4,7 @@ export type TableLayoutProps = {
   title: string;
   description: string;
   children: ReactNode;
+  renderFeedingFormButton: ReactNode;
+  renderHarvestFormButton: ReactNode;
+  renderTransferFormButton: ReactNode;
 };
diff --git a/components/TableList/components/skeleton/TableRowSkeleton.tsx b/components/TableList/components/skeleton/TableRowSkeleton.tsx
@@ -0,0 +1,25 @@
+import { TableRowSkeletonProps } from "@/components/TableList/components/skeleton/types.ts";
+import { useId } from "react";
+
+const TableRowSkeleton = ({
+  rowNumber,
+  columnNumber,
+}: TableRowSkeletonProps) => {
+  const componentId = useId();
+  return Array.from({ length: rowNumber }).map((_, i) => (
+    <tr key={`tr-${componentId}-${i}`}>
+      {Array.from({ length: columnNumber }).map((_, i) => (
+        <td
+          key={`td-${componentId}-${i}`}
+          className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0"
+        >
+          <div className="h-4 w-full bg-gray-200 dark:bg-gray-300 animate-pulse">
+            {" "}
+          </div>
+        </td>
+      ))}
+    </tr>
+  ));
+};
+
+export default TableRowSkeleton;
diff --git a/components/TableList/components/skeleton/types.ts b/components/TableList/components/skeleton/types.ts
@@ -0,0 +1,4 @@
+export type TableRowSkeletonProps = {
+  rowNumber: number;
+  columnNumber: number;
+};
diff --git a/components/TableList/index.tsx b/components/TableList/index.tsx
@@ -4,85 +4,32 @@ import { TableListProps } from "@/components/TableList/types.ts";
 import TableHeaderElement from "@/components/TableList/components/TableHeaderElement/index.tsx";
 import TableDataCellElement from "@/components/TableList/components/TableDataCellElement/index.tsx";
 import TableLayout from "@/components/TableList/components/TableLayout/index.tsx";
+import TableRowSkeleton from "@/components/TableList/components/skeleton/TableRowSkeleton.tsx";
 
 export default function TableList({
   itemList,
+  tableHeaderList,
   title,
   description,
   messageIfItemListIsEmpty,
+  renderFeedingFormButton,
+  renderHarvestFormButton,
+  renderTransferFormButton,
 }: TableListProps) {
   const componentId = useId();
 
-  if (!itemList) {
-    return (
-      <TableLayout title={title} description={description}>
-        <table className="min-w-full divide-y divide-gray-300">
-          <thead>
-            <tr>
-              {["id", "name", "action", "weight", "created_at"].map(
-                (tableHeaderElement, i) => (
-                  <TableHeaderElement
-                    key={`th-${componentId}-${i}`}
-                    label={tableHeaderElement}
-                  />
-                ),
-              )}
-            </tr>
-          </thead>
-          <tbody>
-            {Array.from({ length: 3 }).map((_, i) => (
-              <tr key={`tr-${componentId}-${i}`}>
-                {Array.from({ length: 5 }).map((_, i) => (
-                  <td
-                    key={`td-${componentId}-${i}`}
-                    className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0"
-                  >
-                    <div className="h-4 w-full bg-gray-200 dark:bg-gray-300 animate-pulse">
-                      {" "}
-                    </div>
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </TableLayout>
-    );
-  }
-
-  if (Array.isArray(itemList) && itemList.length === 0) {
-    return (
-      <TableLayout title={title} description={description}>
-        <table className="min-w-full divide-y divide-gray-300">
-          <thead>
-            <tr>
-              {["id", "name", "action", "weight", "created_at"].map(
-                (tableHeaderElement, i) => (
-                  <TableHeaderElement
-                    key={`th-${componentId}-${i}`}
-                    label={tableHeaderElement}
-                  />
-                ),
-              )}
-            </tr>
-          </thead>
-          <tbody>
-            <tr />
-          </tbody>
-        </table>
-        <p className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">
-          {messageIfItemListIsEmpty}
-        </p>
-      </TableLayout>
-    );
-  }
-
   return (
-    <TableLayout title={title} description={description}>
+    <TableLayout
+      title={title}
+      description={description}
+      renderFeedingFormButton={renderFeedingFormButton}
+      renderHarvestFormButton={renderHarvestFormButton}
+      renderTransferFormButton={renderTransferFormButton}
+    >
       <table className="min-w-full divide-y divide-gray-300">
         <thead>
           <tr>
-            {Object.keys(itemList[0]).map((tableHeaderElement, i) => (
+            {tableHeaderList.map((tableHeaderElement, i) => (
               <TableHeaderElement
                 key={`th-${componentId}-${i}`}
                 label={tableHeaderElement}
@@ -91,18 +38,27 @@ export default function TableList({
           </tr>
         </thead>
         <tbody className="divide-y divide-gray-200">
-          {itemList.map((item, i) => (
-            <tr key={`tr-${componentId}-${i}`}>
-              {Object.values(item).map((attribute, i) => (
-                <TableDataCellElement
-                  key={`td-${componentId}-${i}`}
-                  label={attribute}
-                />
-              ))}
-            </tr>
-          ))}
+          {itemList ? (
+            itemList.map((item, i) => (
+              <tr key={`tr-${componentId}-${i}`}>
+                {Object.values(item).map((attribute, i) => (
+                  <TableDataCellElement
+                    key={`td-${componentId}-${i}`}
+                    label={attribute}
+                  />
+                ))}
+              </tr>
+            ))
+          ) : (
+            <TableRowSkeleton rowNumber={3} columnNumber={5} />
+          )}
         </tbody>
       </table>
+      {Array.isArray(itemList) && itemList.length === 0 && (
+        <p className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">
+          {messageIfItemListIsEmpty}
+        </p>
+      )}
     </TableLayout>
   );
 }
diff --git a/components/TableList/types.ts b/components/TableList/types.ts
@@ -1,6 +1,12 @@
+import { ReactNode } from "react";
+
 export type TableListProps = {
   itemList?: { [key: string]: any }[] | undefined;
+  tableHeaderList: string[];
   title: string;
   description: string;
   messageIfItemListIsEmpty: string;
+  renderFeedingFormButton: ReactNode;
+  renderHarvestFormButton: ReactNode;
+  renderTransferFormButton: ReactNode;
 };