feat: add list filter to board view (#241)

* feat: add list filter to board view

* feat: implement API-driven list filtering

* refactor: remove unnecessary list join from card filtering queries

* feat: enable list filter options for public boards

* refactor(perf): move to main query

---------

Co-authored-by: Henry <henry_ball@hotmail.co.uk>

apps/web/src/views/board/components/DeleteListConfirmation.tsx

@@ -12,6 +12,7 @@ interface QueryParams {
   boardPublicId: string;
   members: string[];
   labels: string[];
+  lists: string[];
 }
 
 export function DeleteListConfirmation({

apps/web/src/views/board/components/Filters.tsx

@@ -2,6 +2,7 @@ import { useRouter } from "next/router";
 import { t } from "@lingui/core/macro";
 import {
   HiMiniXMark,
+  HiOutlineSquare3Stack3D,
   HiOutlineTag,
   HiOutlineUserCircle,
 } from "react-icons/hi2";
@@ -32,15 +33,22 @@ interface Label {
   colourCode: string | null;
 }
 
+interface List {
+  publicId: string;
+  name: string;
+}
+
 const Filters = ({
   position = "right",
   labels,
   members,
+  lists,
   isLoading,
 }: {
   position?: "left" | "right";
   labels: Label[];
   members: Member[];
+  lists: List[];
   isLoading: boolean;
 }) => {
   const router = useRouter();
@@ -52,7 +60,7 @@ const Filters = ({
     try {
       await router.push({
         pathname: router.pathname,
-        query: { ...router.query, members: [], labels: [] },
+        query: { ...router.query, members: [], labels: [], lists: [] },
       });
     } catch (error) {
       console.error(error);
@@ -85,6 +93,12 @@ const Filters = ({
     leftIcon: <LabelIcon colourCode={label.colourCode} />,
   }));
 
+  const formattedLists = lists.map((list) => ({
+    key: list.publicId,
+    value: list.name,
+    selected: !!router.query.lists?.includes(list.publicId),
+  }));
+
   const groups = [
     ...(formattedMembers.length
       ? [
@@ -102,6 +116,16 @@ const Filters = ({
       icon: <HiOutlineTag size={16} />,
       items: formattedLabels,
     },
+    ...(formattedLists.length
+      ? [
+          {
+            key: "lists",
+            label: t`Lists`,
+            icon: <HiOutlineSquare3Stack3D size={16} />,
+            items: formattedLists,
+          },
+        ]
+      : []),
   ];
 
   const handleSelect = async (
@@ -131,6 +155,7 @@ const Filters = ({
   const numOfFilters = [
     ...formatToArray(router.query.members),
     ...formatToArray(router.query.labels),
+    ...formatToArray(router.query.lists),
   ].length;
 
   return (

apps/web/src/views/board/components/NewCardForm.tsx

@@ -33,6 +33,7 @@ interface QueryParams {
   boardPublicId: string;
   members: string[];
   labels: string[];
+  lists: string[];
 }
 
 interface NewCardFormProps {

apps/web/src/views/board/components/NewListForm.tsx

@@ -21,6 +21,7 @@ interface QueryParams {
   boardPublicId: string;
   members: string[];
   labels: string[];
+  lists: string[];
 }
 
 export function NewListForm({

apps/web/src/views/board/components/UpdateBoardSlugForm.tsx

@@ -17,6 +17,7 @@ interface QueryParams {
   boardPublicId: string;
   members: string[];
   labels: string[];
+  lists: string[];
 }
 
 export function UpdateBoardSlugForm({

apps/web/src/views/board/components/VisibilityButton.tsx

@@ -11,6 +11,7 @@ interface QueryParams {
   boardPublicId: string;
   members: string[];
   labels: string[];
+  lists: string[];
 }
 
 const VisibilityButton = ({