github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: cycle and module sidebar state filter implementation (#4522)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2024-05-27 17:51:13 +05:30 committed by GitHub
parent 8730049c00
commit 44f743d52c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 50 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
web/components/core/sidebar/sidebar-progress-stats.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import { observer } from "mobx-react";
import Image from "next/image";
// headless ui
import { Tab } from "@headlessui/react";
@ -15,6 +15,7 @@ import {
// hooks
import { Avatar, StateGroupIcon } from "@plane/ui";
import { SingleProgressStats } from "@/components/core";
import { useProjectState } from "@/hooks/store";
import useLocalStorage from "@/hooks/use-local-storage";
// images
import emptyLabel from "public/empty-state/empty_label.svg";
@ -44,20 +45,23 @@ type Props = {
handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
};
export const SidebarProgressStats: React.FC<Props> = ({
distribution,
groupedIssues,
totalIssues,
module,
roundedTab,
noBackground,
isPeekView = false,
isCompleted = false,
filters,
handleFiltersUpdate,
}) => {
export const SidebarProgressStats: React.FC<Props> = observer((props) => {
const {
distribution,
groupedIssues,
totalIssues,
module,
roundedTab,
noBackground,
isPeekView = false,
isCompleted = false,
filters,
handleFiltersUpdate,
} = props;
const { storedValue: tab, setValue: setTab } = useLocalStorage("tab", "Assignees");
const { groupedProjectStates } = useProjectState();
const currentValue = (tab: string | null) => {
switch (tab) {
case "Assignees":
@ -71,6 +75,12 @@ export const SidebarProgressStats: React.FC<Props> = ({
}
};
const getStateGroupState = (stateGroup: string) => {
const stateGroupStates = groupedProjectStates?.[stateGroup];
const stateGroupStatesId = stateGroupStates?.map((state) => state.id);
return stateGroupStatesId;
};
return (
<Tab.Group
defaultIndex={currentValue(tab)}
@ -261,10 +271,14 @@ export const SidebarProgressStats: React.FC<Props> = ({
}
completed={groupedIssues[group]}
total={totalIssues}
{...(!isPeekView &&
!isCompleted && {
onClick: () => handleFiltersUpdate("state", getStateGroupState(group) ?? []),
})}
/>
))}
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
);
};
});

17
web/components/cycles/sidebar.tsx
View File

@ -1,5 +1,6 @@
import React, { useCallback, useEffect, useState } from "react";
import isEmpty from "lodash/isEmpty";
import isEqual from "lodash/isEqual";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { Controller, useForm } from "react-hook-form";
@ -199,14 +200,18 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
const handleFiltersUpdate = useCallback(
(key: keyof IIssueFilterOptions, value: string | string[]) => {
if (!workspaceSlug || !projectId) return;
const newValues = issueFilters?.filters?.[key] ?? [];
let newValues = issueFilters?.filters?.[key] ?? [];
if (Array.isArray(value)) {
// this validation is majorly for the filter start_date, target_date custom
value.forEach((val) => {
if (!newValues.includes(val)) newValues.push(val);
else newValues.splice(newValues.indexOf(val), 1);
});
if (key === "state") {
if (isEqual(newValues, value)) newValues = [];
else newValues = value;
} else {
value.forEach((val) => {
if (!newValues.includes(val)) newValues.push(val);
else newValues.splice(newValues.indexOf(val), 1);
});
}
} else {
if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
else newValues.push(value);

17
web/components/modules/sidebar.tsx
View File

@ -1,4 +1,5 @@
import React, { useCallback, useEffect, useState } from "react";
import isEqual from "lodash/isEqual";
import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";
import { Controller, useForm } from "react-hook-form";
@ -252,14 +253,18 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
const handleFiltersUpdate = useCallback(
(key: keyof IIssueFilterOptions, value: string | string[]) => {
if (!workspaceSlug || !projectId) return;
const newValues = issueFilters?.filters?.[key] ?? [];
let newValues = issueFilters?.filters?.[key] ?? [];
if (Array.isArray(value)) {
// this validation is majorly for the filter start_date, target_date custom
value.forEach((val) => {
if (!newValues.includes(val)) newValues.push(val);
else newValues.splice(newValues.indexOf(val), 1);
});
if (key === "state") {
if (isEqual(newValues, value)) newValues = [];
else newValues = value;
} else {
value.forEach((val) => {
if (!newValues.includes(val)) newValues.push(val);
else newValues.splice(newValues.indexOf(val), 1);
});
}
} else {
if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
else newValues.push(value);