chore: cycle and module sidebar stats filter (#594)

apps/app/components/core/issues-view.tsx

@@ -630,10 +630,13 @@ export const IssuesView: React.FC<Props> = ({
                               if (!label) return null;
 
                               return (
-                                <div className="flex items-center gap-2">
+                                <div className="flex items-center gap-1">
                                   <div
-                                    className="w-4 h-4 rounded-full"
+                                    className="h-2 w-2 rounded-full"
-                                    style={{ backgroundColor: label.color }}
+                                    style={{
+                                      backgroundColor:
+                                        label.color && label.color !== "" ? label.color : "#000000",
+                                    }}
                                   />
                                   {label.name}
                                 </div>

apps/app/components/core/sidebar/sidebar-progress-stats.tsx

@@ -12,6 +12,7 @@ import issuesServices from "services/issues.service";
 import projectService from "services/project.service";
 // hooks
 import useLocalStorage from "hooks/use-local-storage";
+import useIssuesView from "hooks/use-issues-view";
 // components
 import { SingleProgressStats } from "components/core";
 // ui
@@ -49,6 +50,8 @@ export const SidebarProgressStats: React.FC<Props> = ({
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
+  const { filters, setFilters } = useIssuesView();
+
   const { storedValue: tab, setValue: setTab } = useLocalStorage("tab", "Assignees");
 
   const { data: issueLabels } = useSWR<IIssueLabels[]>(
@@ -111,7 +114,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
         </Tab>
         <Tab
           className={({ selected }) =>
-            `w-full rounded px-3 py-1  text-gray-900 ${
+            `w-full rounded px-3 py-1 text-gray-900 ${
               selected ? " bg-theme text-white" : " hover:bg-hover-gray"
             }`
           }
@@ -128,8 +131,8 @@ export const SidebarProgressStats: React.FC<Props> = ({
           States
         </Tab>
       </Tab.List>
-      <Tab.Panels className="flex w-full items-center justify-between p-1">
+      <Tab.Panels className="flex w-full items-center justify-between pt-1">
-        <Tab.Panel as="div" className="flex w-full flex-col text-xs ">
+        <Tab.Panel as="div" className="flex w-full flex-col text-xs">
           {members?.map((member, index) => {
             const totalArray = issues?.filter((i) => i.assignees?.includes(member.member.id));
             const completeArray = totalArray?.filter((i) => i.state_detail.group === "completed");
@@ -146,6 +149,15 @@ export const SidebarProgressStats: React.FC<Props> = ({
                   }
                   completed={completeArray.length}
                   total={totalArray.length}
+                  onClick={() => {
+                    if (filters.assignees?.includes(member.member.id))
+                      setFilters({
+                        assignees: filters.assignees?.filter((a) => a !== member.member.id),
+                      });
+                    else
+                      setFilters({ assignees: [...(filters?.assignees ?? []), member.member.id] });
+                  }}
+                  selected={filters.assignees?.includes(member.member.id)}
                 />
               );
             }
@@ -177,7 +189,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
             ""
           )}
         </Tab.Panel>
-        <Tab.Panel as="div" className="flex w-full flex-col ">
+        <Tab.Panel as="div" className="w-full space-y-1">
           {issueLabels?.map((label, index) => {
             const totalArray = issues?.filter((i) => i.labels?.includes(label.id));
             const completeArray = totalArray?.filter((i) => i.state_detail.group === "completed");
@@ -189,7 +201,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
                   title={
                     <div className="flex items-center gap-2">
                       <span
-                        className="block h-3 w-3 rounded-full "
+                        className="block h-3 w-3 rounded-full"
                         style={{
                           backgroundColor:
                             label.color && label.color !== "" ? label.color : "#000000",
@@ -200,6 +212,14 @@ export const SidebarProgressStats: React.FC<Props> = ({
                   }
                   completed={completeArray.length}
                   total={totalArray.length}
+                  onClick={() => {
+                    if (filters.labels?.includes(label.id))
+                      setFilters({
+                        labels: filters.labels?.filter((l) => l !== label.id),
+                      });
+                    else setFilters({ labels: [...(filters?.labels ?? []), label.id] });
+                  }}
+                  selected={filters.labels?.includes(label.id)}
                 />
               );
             }

apps/app/components/core/sidebar/single-progress-stats.tsx

@@ -18,14 +18,14 @@ export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
   selected = false,
 }) => (
   <div
-    className={`flex w-full items-center justify-between py-3 text-xs ${
+    className={`flex w-full items-center justify-between rounded p-2 text-xs ${
       onClick ? "cursor-pointer hover:bg-gray-100" : ""
     } ${selected ? "bg-gray-100" : ""}`}
     onClick={onClick}
   >
     <div className="flex w-1/2 items-center justify-start gap-2">{title}</div>
     <div className="flex w-1/2 items-center justify-end gap-1 px-2">
-      <div className="flex h-5 items-center justify-center gap-1 ">
+      <div className="flex h-5 items-center justify-center gap-1">
         <span className="h-4 w-4 ">
           <ProgressBar value={completed} maxValue={total} />
         </span>

apps/app/components/views/form.tsx

@@ -225,10 +225,13 @@ export const ViewForm: React.FC<Props> = ({
                           const label = issueLabels?.find((l) => l.id === labelId);
                           if (!label) return null;
                           return (
-                            <div className="flex items-center gap-2 rounded-full border bg-white px-1.5 py-1 text-xs">
+                            <div className="flex items-center gap-1 rounded-full border bg-white px-1.5 py-1 text-xs">
                               <div
-                                className="h-4 w-4 rounded-full"
+                                className="h-2 w-2 rounded-full"
-                                style={{ backgroundColor: label.color }}
+                                style={{
+                                  backgroundColor:
+                                    label.color && label.color !== "" ? label.color : "#000000",
+                                }}
                               />
                               {label.name}
                             </div>