From 4ecb21e0aed656405a83985d2f4803d9f08933be Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Thu, 11 Apr 2024 11:23:13 +0100
Subject: [PATCH] ENCOA-4: Added the ability to filter by Creator on the Code
 List

---
 src/components/Low/Select.tsx        |  4 +-
 src/pages/(admin)/Lists/CodeList.tsx | 60 +++++++++++++++++++++++-----
 2 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/src/components/Low/Select.tsx b/src/components/Low/Select.tsx
index 4c336202..4381455c 100644
--- a/src/components/Low/Select.tsx
+++ b/src/components/Low/Select.tsx
@@ -17,9 +17,10 @@ interface Props {
 	onChange: (value: Option | null) => void;
 	isClearable?: boolean;
 	styles?: StylesConfig<Option, boolean, GroupBase<Option>>;
+	className?: string;
 }
 
-export default function Select({value, defaultValue, options, placeholder, disabled, onChange, styles, isClearable}: Props) {
+export default function Select({value, defaultValue, options, placeholder, disabled, onChange, styles, isClearable, className}: Props) {
 	const [target, setTarget] = useState<HTMLElement>();
 
 	useEffect(() => {
@@ -34,6 +35,7 @@ export default function Select({value, defaultValue, options, placeholder, disab
 					: clsx(
 							"placeholder:text-mti-gray-cool border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none",
 							disabled && "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
+							className,
 					  )
 			}
 			options={options}
diff --git a/src/pages/(admin)/Lists/CodeList.tsx b/src/pages/(admin)/Lists/CodeList.tsx
index 4f7f318a..cfdf4554 100644
--- a/src/pages/(admin)/Lists/CodeList.tsx
+++ b/src/pages/(admin)/Lists/CodeList.tsx
@@ -1,5 +1,6 @@
 import Button from "@/components/Low/Button";
 import Checkbox from "@/components/Low/Checkbox";
+import Select from "@/components/Low/Select";
 import useCodes from "@/hooks/useCodes";
 import useUser from "@/hooks/useUser";
 import useUsers from "@/hooks/useUsers";
@@ -31,10 +32,18 @@ const CreatorCell = ({id, users}: {id: string; users: User[]}) => {
 
 export default function CodeList({user}: {user: User}) {
 	const [selectedCodes, setSelectedCodes] = useState<string[]>([]);
+	const [filteredCorporate, setFilteredCorporate] = useState<User | undefined>(user?.type === "corporate" ? user : undefined);
+	const [filteredCodes, setFilteredCodes] = useState<Code[]>([]);
 
 	const {users} = useUsers();
 	const {codes, reload} = useCodes(user?.type === "corporate" ? user?.id : undefined);
 
+	useEffect(() => {
+		if (!filteredCorporate) return setFilteredCodes(codes);
+
+		setFilteredCodes(codes.filter((x) => x.creator === filteredCorporate.id));
+	}, [codes, filteredCorporate]);
+
 	const toggleCode = (id: string) => {
 		setSelectedCodes((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
 	};
@@ -139,23 +148,52 @@ export default function CodeList({user}: {user: User}) {
 	];
 
 	const table = useReactTable({
-		data: codes,
+		data: filteredCodes,
 		columns: defaultColumns,
 		getCoreRowModel: getCoreRowModel(),
 	});
 
 	return (
 		<>
-			<div className="flex items-center justify-between pb-4 pt-1 px-4">
-				<span>{selectedCodes.length} code(s) selected</span>
-				<Button
-					disabled={selectedCodes.length === 0}
-					variant="outline"
-					color="red"
-					className="!py-1 px-10"
-					onClick={() => deleteCodes(selectedCodes)}>
-					Delete
-				</Button>
+			<div className="flex items-center justify-between pb-4 pt-1">
+				<Select
+					className="!w-96 !py-1"
+					disabled={user?.type === "corporate"}
+					isClearable
+					value={
+						filteredCorporate
+							? {
+									label: `${
+										filteredCorporate.type === "corporate"
+											? filteredCorporate.corporateInformation?.companyInformation?.name || filteredCorporate.name
+											: filteredCorporate.name
+									} (${USER_TYPE_LABELS[filteredCorporate.type]})`,
+									value: filteredCorporate.id,
+							  }
+							: null
+					}
+					options={users
+						.filter((x) => ["admin", "developer", "corporate"].includes(x.type))
+						.map((x) => ({
+							label: `${x.type === "corporate" ? x.corporateInformation?.companyInformation?.name || x.name : x.name} (${
+								USER_TYPE_LABELS[x.type]
+							})`,
+							value: x.id,
+							user: x,
+						}))}
+					onChange={(value) => setFilteredCorporate(value ? users.find((x) => x.id === value?.value) : undefined)}
+				/>
+				<div className="flex gap-4 items-center">
+					<span>{selectedCodes.length} code(s) selected</span>
+					<Button
+						disabled={selectedCodes.length === 0}
+						variant="outline"
+						color="red"
+						className="!py-1 px-10"
+						onClick={() => deleteCodes(selectedCodes)}>
+						Delete
+					</Button>
+				</div>
 			</div>
 			<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
 				<thead>