[WEB-554] feat: modules filtering, searching and ordering (#3947)

* feat: modules filtering, searching and ordering implemented

* fix: modules ordering

* chore: total issues in list endpoint

* fix: modules ordering

* fix: build errors

---------

Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>

web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx

@@ -1,30 +1,58 @@
-import { ReactElement } from "react";
+import { ReactElement, useCallback } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 // layouts
 // components
 import { PageHead } from "components/core";
 import { ModulesListHeader } from "components/headers";
-import { ModulesListView } from "components/modules";
+import { ModuleAppliedFiltersList, ModulesListView } from "components/modules";
 // types
 // hooks
-import { useProject } from "hooks/store";
+import { useModuleFilter, useProject } from "hooks/store";
 import { AppLayout } from "layouts/app-layout";
 import { NextPageWithLayout } from "lib/types";
+import { calculateTotalFilters } from "helpers/filter.helper";
+import { TModuleFilters } from "@plane/types";
 
 const ProjectModulesPage: NextPageWithLayout = observer(() => {
   const router = useRouter();
   const { projectId } = router.query;
   // store
   const { getProjectById } = useProject();
+  const { currentProjectFilters, clearAllFilters, updateFilters } = useModuleFilter();
   // derived values
   const project = projectId ? getProjectById(projectId.toString()) : undefined;
   const pageTitle = project?.name ? `${project?.name} - Modules` : undefined;
 
+  const handleRemoveFilter = useCallback(
+    (key: keyof TModuleFilters, value: string | null) => {
+      if (!projectId) return;
+      let newValues = currentProjectFilters?.[key] ?? [];
+
+      if (!value) newValues = [];
+      else newValues = newValues.filter((val) => val !== value);
+
+      updateFilters(projectId.toString(), { [key]: newValues });
+    },
+    [currentProjectFilters, projectId, updateFilters]
+  );
+
   return (
     <>
       <PageHead title={pageTitle} />
-      <ModulesListView />
+      <div className="h-full w-full flex flex-col">
+        {calculateTotalFilters(currentProjectFilters ?? {}) !== 0 && (
+          <div className="border-b border-custom-border-200 px-5 py-3">
+            <ModuleAppliedFiltersList
+              appliedFilters={currentProjectFilters ?? {}}
+              handleClearAllFilters={() => clearAllFilters(`${projectId}`)}
+              handleRemoveFilter={handleRemoveFilter}
+              alwaysAllowEditing
+            />
+          </div>
+        )}
+        <ModulesListView />
+      </div>
     </>
   );
 });