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: handled build issues

Browse Source
This commit is contained in:
gurusainath 2023-09-19 12:50:27 +05:30
parent 12ce6e78e2
commit 906caa636b
32 changed files with 245 additions and 424 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/components/issue-layouts/display-filters/extra-options.tsx
View File

@ -23,9 +23,9 @@ export const FilterExtraOptions = observer(() => {
const handleExtraOptionsSectionVisibility = (key: string) =>
issueFilterStore?.issueView &&
issueFilterStore?.issueLayout &&
issueFilterVisibilityData[
issueFilterStore?.issueView === "my_issues" ? "my_issues" : "others"
]?.extra_options?.[issueFilterStore?.issueLayout].values?.includes(key);
issueFilterVisibilityData[issueFilterStore?.issueView === "my_issues" ? "my_issues" : "issues"]?.extra_options?.[
issueFilterStore?.issueLayout
].values?.includes(key);
return (
<div>
@ -43,11 +43,7 @@ export const FilterExtraOptions = observer(() => {
handleExtraOptionsSectionVisibility(_extraProperties?.key) && (
<FilterOption
key={_extraProperties?.key}
isChecked={
issueFilterStore?.userFilters?.display_filters?.[_extraProperties?.key]
? true
: false
}
isChecked={issueFilterStore?.userFilters?.display_filters?.[_extraProperties?.key] ? true : false}
onClick={() =>
handleExtraOptions(
_extraProperties?.key,

6
web/components/issue-layouts/display-filters/group-by.tsx
View File

@ -32,11 +32,7 @@ export const FilterGroupBy = observer(() => {
issueFilterStore?.issueRenderFilters?.group_by.map((_groupBy) => (
<FilterOption
key={_groupBy?.key}
isChecked={
issueFilterStore?.userFilters?.display_filters?.group_by === _groupBy?.key
? true
: false
}
isChecked={issueFilterStore?.userFilters?.display_filters?.group_by === _groupBy?.key ? true : false}
onClick={() => handleGroupBy("group_by", _groupBy?.key)}
title={_groupBy.title}
multiple={false}

13
web/components/issue-layouts/display-filters/index.tsx
View File

@ -20,21 +20,22 @@ export const DisplayFiltersSelection = observer(() => {
const handleDisplayPropertiesSectionVisibility =
issueFilterStore?.issueView &&
issueFilterStore?.issueLayout &&
issueFilterVisibilityData[issueFilterStore?.issueView === "my_issues" ? "my_issues" : "others"]
issueFilterVisibilityData[issueFilterStore?.issueView === "my_issues" ? "my_issues" : "issues"]
?.display_properties?.[issueFilterStore?.issueLayout];
const handleDisplayFilterSectionVisibility = (section_key: string) =>
issueFilterStore?.issueView &&
issueFilterStore?.issueLayout &&
issueFilterVisibilityData[
issueFilterStore?.issueView === "my_issues" ? "my_issues" : "others"
]?.display_filters?.[issueFilterStore?.issueLayout].includes(section_key);
issueFilterVisibilityData[issueFilterStore?.issueView === "my_issues" ? "my_issues" : "issues"]?.display_filters?.[
issueFilterStore?.issueLayout
].includes(section_key);
const handleExtraOptionsSectionVisibility =
issueFilterStore?.issueView &&
issueFilterStore?.issueLayout &&
issueFilterVisibilityData[issueFilterStore?.issueView === "my_issues" ? "my_issues" : "others"]
?.extra_options?.[issueFilterStore?.issueLayout].access;
issueFilterVisibilityData[issueFilterStore?.issueView === "my_issues" ? "my_issues" : "issues"]?.extra_options?.[
issueFilterStore?.issueLayout
].access;
return (
<div className="w-full h-full overflow-hidden select-none relative flex flex-col divide-y divide-custom-border-200">

6
web/components/issue-layouts/display-filters/issue-type.tsx
View File

@ -32,11 +32,7 @@ export const FilterIssueType = observer(() => {
issueFilterStore?.issueRenderFilters?.issue_type.map((_issueType) => (
<FilterOption
key={_issueType?.key}
isChecked={
issueFilterStore?.userFilters?.display_filters?.type === _issueType?.key
? true
: false
}
isChecked={issueFilterStore?.userFilters?.display_filters?.type === _issueType?.key ? true : false}
onClick={() => handleIssueType("type", _issueType?.key)}
title={_issueType.title}
multiple={false}

6
web/components/issue-layouts/display-filters/order-by.tsx
View File

@ -32,11 +32,7 @@ export const FilterOrderBy = observer(() => {
issueFilterStore?.issueRenderFilters?.order_by.map((_orderBy) => (
<FilterOption
key={_orderBy?.key}
isChecked={
issueFilterStore?.userFilters?.display_filters?.order_by === _orderBy?.key
? true
: false
}
isChecked={issueFilterStore?.userFilters?.display_filters?.order_by === _orderBy?.key ? true : false}
onClick={() => handleOrderBy("order_by", _orderBy?.key)}
title={_orderBy.title}
multiple={false}

23
web/components/issue-layouts/filters-preview/assignees.tsx
View File

@ -9,13 +9,7 @@ import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root";
export const MemberIcons = ({
display_name,
avatar,
}: {
display_name: string;
avatar: string | null;
}) => (
export const MemberIcons = ({ display_name, avatar }: { display_name: string; avatar: string | null }) => (
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[16px] h-[16px] flex justify-center items-center">
{avatar ? (
<img src={avatar} alt={display_name || ""} className="" />
@ -49,9 +43,7 @@ export const FilterAssignees = observer(() => {
<div className="border border-custom-border-200 bg-custom-background-80 rounded-full overflow-hidden flex items-center gap-2 px-2 py-1">
<div className="flex-shrink-0">
<FilterPreviewHeader
title={`Assignees (${
issueFilterStore?.userFilters?.filters?.assignees?.length || 0
})`}
title={`Assignees (${issueFilterStore?.userFilters?.filters?.assignees?.length || 0})`}
/>
</div>
<div className="relative flex items-center flex-wrap gap-2">
@ -60,17 +52,10 @@ export const FilterAssignees = observer(() => {
issueFilterStore?.projectMembers.map(
(_member) =>
issueFilterStore?.userFilters?.filters?.assignees != null &&
issueFilterStore?.userFilters?.filters?.assignees.includes(
_member?.member?.id
) && (
issueFilterStore?.userFilters?.filters?.assignees.includes(_member?.member?.id) && (
<FilterPreviewContent
key={`assignees-${_member?.member?.id}`}
icon={
<MemberIcons
display_name={_member?.member.display_name}
avatar={_member?.member.avatar}
/>
}
icon={<MemberIcons display_name={_member?.member.display_name} avatar={_member?.member.avatar} />}
title={`${_member?.member?.display_name}`}
onClick={() => handleFilter("assignees", _member?.member?.id)}
className="border border-custom-border-100 bg-custom-background-100"

15
web/components/issue-layouts/filters-preview/created-by.tsx
View File

@ -32,9 +32,7 @@ export const FilterCreatedBy = observer(() => {
<div className="border border-custom-border-200 bg-custom-background-80 rounded-full overflow-hidden flex items-center gap-2 px-2 py-1">
<div className="flex-shrink-0">
<FilterPreviewHeader
title={`Created By (${
issueFilterStore?.userFilters?.filters?.created_by?.length || 0
})`}
title={`Created By (${issueFilterStore?.userFilters?.filters?.created_by?.length || 0})`}
/>
</div>
@ -44,18 +42,11 @@ export const FilterCreatedBy = observer(() => {
issueFilterStore?.projectMembers.map(
(_member) =>
issueFilterStore?.userFilters?.filters?.created_by != null &&
issueFilterStore?.userFilters?.filters?.created_by.includes(
_member?.member?.id
) && (
issueFilterStore?.userFilters?.filters?.created_by.includes(_member?.member?.id) && (
<FilterPreviewContent
key={`create-by-${_member?.member?.id}`}
title={`${_member?.member?.display_name}`}
icon={
<MemberIcons
display_name={_member?.member.display_name}
avatar={_member?.member.avatar}
/>
}
icon={<MemberIcons display_name={_member?.member.display_name} avatar={_member?.member.avatar} />}
onClick={() => handleFilter("created_by", _member?.member?.id)}
className="border border-custom-border-100 bg-custom-background-100"
/>

8
web/components/issue-layouts/filters-preview/helpers/content.tsx
View File

@ -8,13 +8,7 @@ interface IFilterPreviewContent {
style?: any;
}
export const FilterPreviewContent = ({
icon,
title,
onClick,
className,
style,
}: IFilterPreviewContent) => (
export const FilterPreviewContent = ({ icon, title, onClick, className, style }: IFilterPreviewContent) => (
<div
className={`flex-shrink-0 flex items-center gap-1.5 rounded-full px-[8px] transition-all ${className}`}
style={style ? style : {}}

92
web/components/issue-layouts/filters-preview/index copy.tsx
View File

@ -1,92 +0,0 @@
import React from "react";
// components
import { FilterPriority } from "./priority";
import { FilterState } from "./state";
import { FilterStateGroup } from "./state-group";
import { FilterAssignees } from "./assignees";
import { FilterCreatedBy } from "./created-by";
import { FilterLabels } from "./labels";
import { FilterStartDate } from "./start-date";
import { FilterTargetDate } from "./target-date";
// mobx react lite
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root";
// default data
import { issueFilterVisibilityData } from "store/issue-views/issue_data";
export const FilterSelection = observer(() => {
const store: RootStore = useMobxStore();
const { issueFilters: issueFilterStore } = store;
const handleFilterSectionVisibility = (section_key: string) =>
issueFilterStore?.issueView &&
issueFilterStore?.issueLayout &&
issueFilterVisibilityData[
issueFilterStore?.issueView === "my_issues" ? "my_issues" : "others"
]?.filters?.[issueFilterStore?.issueLayout]?.includes(section_key);
return (
<div className="w-full h-full overflow-hidden select-none relative flex flex-col divide-y divide-custom-border-200">
<div className="flex-shrink-0 p-2 text-sm ">Search container</div>
<div className="w-full h-full overflow-hidden overflow-y-auto relative pb-2 divide-y divide-custom-border-200">
{/* priority */}
{handleFilterSectionVisibility("priority") && (
<div className="pb-1 px-2">
<FilterPriority />
</div>
)}
{/* state group */}
{handleFilterSectionVisibility("state_group") && (
<div className="py-1 px-2">
<FilterStateGroup />
</div>
)}
{/* state */}
{handleFilterSectionVisibility("state") && (
<div className="py-1 px-2">
<FilterState />
</div>
)}
{/* assignees */}
{handleFilterSectionVisibility("assignees") && (
<div className="py-1 px-2">
<FilterAssignees />
</div>
)}
{/* created_by */}
{handleFilterSectionVisibility("created_by") && (
<div className="py-1 px-2">
<FilterCreatedBy />
</div>
)}
{/* labels */}
{handleFilterSectionVisibility("labels") && (
<div className="py-1 px-2">
<FilterLabels />
</div>
)}
{/* start_date */}
{handleFilterSectionVisibility("start_date") && (
<div className="py-1 px-2">
<FilterStartDate />
</div>
)}
{/* due_date */}
{handleFilterSectionVisibility("due_date") && (
<div className="pt-1 px-2">
<FilterTargetDate />
</div>
)}
</div>
</div>
);
});

6
web/components/issue-layouts/filters-preview/index.tsx
View File

@ -23,9 +23,9 @@ export const FilterPreview = observer(() => {
const handleFilterSectionVisibility = (section_key: string) =>
issueFilterStore?.issueView &&
issueFilterStore?.issueLayout &&
issueFilterVisibilityData[
issueFilterStore?.issueView === "my_issues" ? "my_issues" : "others"
]?.filters?.[issueFilterStore?.issueLayout]?.includes(section_key);
issueFilterVisibilityData[issueFilterStore?.issueView === "my_issues" ? "my_issues" : "issues"]?.filters?.[
issueFilterStore?.issueLayout
]?.includes(section_key);
const validateFiltersAvailability =
issueFilterStore?.userFilters?.filters != null &&

4
web/components/issue-layouts/filters-preview/labels.tsx
View File

@ -43,9 +43,7 @@ export const FilterLabels = observer(() => {
{issueFilterStore?.userFilters?.filters?.labels != null && (
<div className="border border-custom-border-200 bg-custom-background-80 rounded-full overflow-hidden flex items-center gap-2 px-2 py-1">
<div className="flex-shrink-0">
<FilterPreviewHeader
title={`Labels (${issueFilterStore?.userFilters?.filters?.labels?.length || 0})`}
/>
<FilterPreviewHeader title={`Labels (${issueFilterStore?.userFilters?.filters?.labels?.length || 0})`} />
</div>
<div className="relative flex items-center flex-wrap gap-2">

46
web/components/issue-layouts/filters-preview/state-group.tsx
View File

@ -18,53 +18,27 @@ import { RootStore } from "store/root";
// constants
import { STATE_GROUP_COLORS } from "constants/state";
export const StateGroupIcons = ({
stateGroup,
color = null,
}: {
stateGroup: string;
color?: string | null;
}) => {
export const StateGroupIcons = ({ stateGroup, color = null }: { stateGroup: string; color?: string | null }) => {
if (stateGroup === "cancelled")
return (
<StateGroupCancelledIcon
width={"12px"}
height={"12px"}
color={color ? color : STATE_GROUP_COLORS[stateGroup]}
/>
<StateGroupCancelledIcon width={"12px"} height={"12px"} color={color ? color : STATE_GROUP_COLORS[stateGroup]} />
);
if (stateGroup === "completed")
return (
<StateGroupCompletedIcon
width={"12px"}
height={"12px"}
color={color ? color : STATE_GROUP_COLORS[stateGroup]}
/>
<StateGroupCompletedIcon width={"12px"} height={"12px"} color={color ? color : STATE_GROUP_COLORS[stateGroup]} />
);
if (stateGroup === "started")
return (
<StateGroupStartedIcon
width={"12px"}
height={"12px"}
color={color ? color : STATE_GROUP_COLORS[stateGroup]}
/>
<StateGroupStartedIcon width={"12px"} height={"12px"} color={color ? color : STATE_GROUP_COLORS[stateGroup]} />
);
if (stateGroup === "unstarted")
return (
<StateGroupUnstartedIcon
width={"12px"}
height={"12px"}
color={color ? color : STATE_GROUP_COLORS[stateGroup]}
/>
<StateGroupUnstartedIcon width={"12px"} height={"12px"} color={color ? color : STATE_GROUP_COLORS[stateGroup]} />
);
if (stateGroup === "backlog")
return (
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] flex justify-center items-center">
<StateGroupBacklogIcon
width={"12px"}
height={"12px"}
color={color ? color : STATE_GROUP_COLORS[stateGroup]}
/>
<StateGroupBacklogIcon width={"12px"} height={"12px"} color={color ? color : STATE_GROUP_COLORS[stateGroup]} />
</div>
);
return <></>;
@ -125,9 +99,7 @@ export const FilterStateGroup = observer(() => {
<div className="border border-custom-border-200 bg-custom-background-80 rounded-full overflow-hidden flex items-center gap-2 px-2 py-1">
<div className="flex-shrink-0">
<FilterPreviewHeader
title={`State Group (${
issueFilterStore?.userFilters?.filters?.state_group?.length || 0
})`}
title={`State Group (${issueFilterStore?.userFilters?.filters?.state_group?.length || 0})`}
/>
</div>
<div className="relative flex items-center flex-wrap gap-2">
@ -136,9 +108,7 @@ export const FilterStateGroup = observer(() => {
issueFilterStore?.issueRenderFilters?.state_group.map(
(_stateGroup) =>
issueFilterStore?.userFilters?.filters?.state_group != null &&
issueFilterStore?.userFilters?.filters?.state_group.includes(
_stateGroup?.key
) && (
issueFilterStore?.userFilters?.filters?.state_group.includes(_stateGroup?.key) && (
<FilterPreviewContent
key={_stateGroup?.key}
icon={<StateGroupIcons stateGroup={_stateGroup.key} />}

16
web/components/issue-layouts/filters-preview/state.tsx
View File

@ -10,7 +10,7 @@ import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root";
// store default data
import { issueStateGroupKeys } from "store/issue-views/issue_data";
import { stateGroups } from "store/issue-views/issue_data";
export const FilterState = observer(() => {
const store: RootStore = useMobxStore();
@ -33,23 +33,21 @@ export const FilterState = observer(() => {
{issueFilterStore?.userFilters?.filters?.state != null && (
<div className="border border-custom-border-200 bg-custom-background-80 rounded-full overflow-hidden flex items-center gap-2 px-2 py-1">
<div className="flex-shrink-0">
<FilterPreviewHeader
title={`State (${issueFilterStore?.userFilters?.filters?.state?.length || 0})`}
/>
<FilterPreviewHeader title={`State (${issueFilterStore?.userFilters?.filters?.state?.length || 0})`} />
</div>
<div className="relative flex items-center flex-wrap gap-2">
{issueStateGroupKeys.map(
{stateGroups.map(
(_stateGroup) =>
issueFilterStore?.projectStates &&
issueFilterStore?.projectStates[_stateGroup] &&
issueFilterStore?.projectStates[_stateGroup].length > 0 &&
issueFilterStore?.projectStates[_stateGroup].map(
issueFilterStore?.projectStates[_stateGroup?.key] &&
issueFilterStore?.projectStates[_stateGroup?.key].length > 0 &&
issueFilterStore?.projectStates[_stateGroup?.key].map(
(_state: any) =>
issueFilterStore?.userFilters?.filters?.state != null &&
issueFilterStore?.userFilters?.filters?.state.includes(_state?.id) && (
<FilterPreviewContent
key={_state?.id}
icon={<StateGroupIcons stateGroup={_stateGroup} color={_state?.color} />}
icon={<StateGroupIcons stateGroup={_stateGroup?.key} color={_state?.color} />}
title={_state?.name}
style={stateStyles(_state?.group, _state?.color)}
onClick={() => handleFilter("state", _state?.id)}

15
web/components/issue-layouts/filters/assignees.tsx
View File

@ -8,13 +8,7 @@ import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root";
export const MemberIcons = ({
display_name,
avatar,
}: {
display_name: string;
avatar: string | null;
}) => (
export const MemberIcons = ({ display_name, avatar }: { display_name: string; avatar: string | null }) => (
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] flex justify-center items-center">
{avatar ? (
<img src={avatar} alt={display_name || ""} className="" />
@ -64,12 +58,7 @@ export const FilterAssignees = observer(() => {
: false
}
onClick={() => handleFilter("assignees", _member?.member?.id)}
icon={
<MemberIcons
display_name={_member?.member.display_name}
avatar={_member?.member.avatar}
/>
}
icon={<MemberIcons display_name={_member?.member.display_name} avatar={_member?.member.avatar} />}
title={`${_member?.member?.display_name} (${_member?.member?.first_name} ${_member?.member?.last_name})`}
/>
))}

7
web/components/issue-layouts/filters/created-by.tsx
View File

@ -47,12 +47,7 @@ export const FilterCreatedBy = observer(() => {
: false
}
onClick={() => handleFilter("created_by", _member?.member?.id)}
icon={
<MemberIcons
display_name={_member?.member.display_name}
avatar={_member?.member.avatar}
/>
}
icon={<MemberIcons display_name={_member?.member.display_name} avatar={_member?.member.avatar} />}
title={`${_member?.member?.display_name} (${_member?.member?.first_name} ${_member?.member?.last_name})`}
/>
))}

2
web/components/issue-layouts/filters/index.tsx
View File

@ -23,7 +23,7 @@ export const FilterSelection = observer(() => {
const handleFilterSectionVisibility = (section_key: string) =>
issueFilterStore?.issueView &&
issueFilterStore?.issueLayout &&
issueFilterVisibilityData[issueFilterStore?.issueView === "my_issues" ? "my_issues" : "others"]?.filters?.[
issueFilterVisibilityData[issueFilterStore?.issueView === "my_issues" ? "my_issues" : "issues"]?.filters?.[
issueFilterStore?.issueLayout
]?.includes(section_key);

30
web/components/issue-layouts/filters/state-group.tsx
View File

@ -31,51 +31,31 @@ export const StateGroupIcons = ({
if (stateGroup === "cancelled")
return (
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] flex justify-center items-center">
<StateGroupCancelledIcon
width={width}
height={height}
color={color ? color : STATE_GROUP_COLORS[stateGroup]}
/>
<StateGroupCancelledIcon width={width} height={height} color={color ? color : STATE_GROUP_COLORS[stateGroup]} />
</div>
);
if (stateGroup === "completed")
return (
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] flex justify-center items-center">
<StateGroupCompletedIcon
width={width}
height={height}
color={color ? color : STATE_GROUP_COLORS[stateGroup]}
/>
<StateGroupCompletedIcon width={width} height={height} color={color ? color : STATE_GROUP_COLORS[stateGroup]} />
</div>
);
if (stateGroup === "started")
return (
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] flex justify-center items-center">
<StateGroupStartedIcon
width={width}
height={height}
color={color ? color : STATE_GROUP_COLORS[stateGroup]}
/>
<StateGroupStartedIcon width={width} height={height} color={color ? color : STATE_GROUP_COLORS[stateGroup]} />
</div>
);
if (stateGroup === "unstarted")
return (
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] flex justify-center items-center">
<StateGroupUnstartedIcon
width={width}
height={height}
color={color ? color : STATE_GROUP_COLORS[stateGroup]}
/>
<StateGroupUnstartedIcon width={width} height={height} color={color ? color : STATE_GROUP_COLORS[stateGroup]} />
</div>
);
if (stateGroup === "backlog")
return (
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] flex justify-center items-center">
<StateGroupBacklogIcon
width={width}
height={height}
color={color ? color : STATE_GROUP_COLORS[stateGroup]}
/>
<StateGroupBacklogIcon width={width} height={height} color={color ? color : STATE_GROUP_COLORS[stateGroup]} />
</div>
);
return <></>;

16
web/components/issue-layouts/filters/state.tsx
View File

@ -9,7 +9,7 @@ import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root";
// store default data
import { issueStateGroupKeys } from "store/issue-views/issue_data";
import { stateGroups } from "store/issue-views/issue_data";
export const FilterState = observer(() => {
const store: RootStore = useMobxStore();
@ -28,8 +28,8 @@ export const FilterState = observer(() => {
issueFilterStore.handleUserFilter("filters", key, _value);
};
const countAllState = issueStateGroupKeys
.map((_stateGroup) => issueFilterStore?.projectStates?.[_stateGroup].length || 0)
const countAllState = stateGroups
.map((_stateGroup) => issueFilterStore?.projectStates?.[_stateGroup?.key].length || 0)
.reduce((sum: number, currentValue: number) => sum + currentValue, 0);
console.log("countAllState", countAllState);
@ -43,12 +43,12 @@ export const FilterState = observer(() => {
/>
{previewEnabled && (
<div className="space-y-[2px] pt-1">
{issueStateGroupKeys.map(
{stateGroups.map(
(_stateGroup) =>
issueFilterStore?.projectStates &&
issueFilterStore?.projectStates[_stateGroup] &&
issueFilterStore?.projectStates[_stateGroup].length > 0 &&
issueFilterStore?.projectStates[_stateGroup].map((_state: any) => (
issueFilterStore?.projectStates[_stateGroup?.key] &&
issueFilterStore?.projectStates[_stateGroup?.key].length > 0 &&
issueFilterStore?.projectStates[_stateGroup?.key].map((_state: any) => (
<FilterOption
key={_state?.id}
isChecked={
@ -58,7 +58,7 @@ export const FilterState = observer(() => {
: false
}
onClick={() => handleFilter("state", _state?.id)}
icon={<StateGroupIcons stateGroup={_stateGroup} color={_state?.color} />}
icon={<StateGroupIcons stateGroup={_stateGroup?.key} color={_state?.color} />}
title={_state?.name}
/>
))

6
web/components/issue-layouts/helpers/dropdown.tsx
View File

@ -21,11 +21,7 @@ export const IssueDropdown = ({ children, title = "Dropdown" }: IIssueDropdown)
>
<div className="font-medium">{title}</div>
<div className="w-[14px] h-[14px] flex justify-center items-center">
{open ? (
<ChevronUp width={14} strokeWidth={2} />
) : (
<ChevronDown width={14} strokeWidth={2} />
)}
{open ? <ChevronUp width={14} strokeWidth={2} /> : <ChevronDown width={14} strokeWidth={2} />}
</div>
</Popover.Button>
<Transition

6
web/components/issue-layouts/helpers/filter-header.tsx
View File

@ -8,11 +8,7 @@ interface IFilterHeader {
handleIsPreviewEnabled: () => void;
}
export const FilterHeader = ({
title,
isPreviewEnabled,
handleIsPreviewEnabled,
}: IFilterHeader) => (
export const FilterHeader = ({ title, isPreviewEnabled, handleIsPreviewEnabled }: IFilterHeader) => (
<div className="flex items-center justify-between gap-2 p-[6px] pb-1 bg-custom-background-100 sticky top-0">
<div className="text-gray-500 text-xs text-custom-text-300 font-medium">{title}</div>
<div

8
web/components/issue-layouts/helpers/filter-option.tsx
View File

@ -10,13 +10,7 @@ interface IFilterOption {
onClick?: () => void;
}
export const FilterOption = ({
isChecked,
icon,
title,
multiple = true,
onClick,
}: IFilterOption) => (
export const FilterOption = ({ isChecked, icon, title, multiple = true, onClick }: IFilterOption) => (
<div
className="flex items-center gap-3 cursor-pointer rounded p-[6px] py-[5px] transition-all hover:bg-custom-border-100"
onClick={onClick}

10
web/components/issue-layouts/layout-selection.tsx
View File

@ -44,9 +44,9 @@ export const LayoutSelection = observer(() => {
const handleLayoutSectionVisibility = (layout_key: string) =>
issueFilterStore?.issueView &&
issueFilterVisibilityData[
issueFilterStore?.issueView === "my_issues" ? "my_issues" : "others"
].layout.includes(layout_key);
issueFilterVisibilityData[issueFilterStore?.issueView === "my_issues" ? "my_issues" : "issues"].layout.includes(
layout_key
);
const handleLayoutSelection = (_layoutKey: string) => {
issueFilterStore.handleUserFilter("display_filters", "layout", _layoutKey);
@ -76,9 +76,7 @@ export const LayoutSelection = observer(() => {
<div
key={_layout?.key}
className={`w-[28px] h-[22px] rounded flex justify-center items-center cursor-pointer transition-all hover:bg-custom-background-100 overflow-hidden group ${
issueFilterStore?.issueLayout == _layout?.key
? `bg-custom-background-100 shadow shadow-gray-200`
: ``
issueFilterStore?.issueLayout == _layout?.key ? `bg-custom-background-100 shadow shadow-gray-200` : ``
}}`}
onClick={() => handleLayoutSelection(_layout?.key)}
>

20
web/components/issue-layouts/list/group-header.tsx
View File

@ -11,30 +11,20 @@ export interface IIssueListGroupHeader {
export const IssueListGroupHeader: FC<IIssueListGroupHeader> = (props) => {
const { groupId, groupBy } = props;
const { issueView: issueViewStore, issueFilters: issueFilterStore }: RootStore = useMobxStore();
const { issueFilters: issueFilterStore }: RootStore = useMobxStore();
return (
<div>
{groupBy === "state" && <>{issueFilterStore.getProjectStateById(groupId)?.name}</>}
{groupBy === "state_detail.group" && <>{groupId}</>}
{groupBy === "priority" && <>{groupId}</>}
{groupBy === "project" && (
<>{issueFilterStore.workspaceProjects?.find((p) => (p.id = groupId))}</>
)}
{groupBy === "labels" && (
<>{issueFilterStore.projectLabels?.find((p) => p.id === groupId)?.name || " None"}</>
)}
{groupBy === "project" && <>{issueFilterStore.workspaceProjects?.find((p) => (p.id = groupId))}</>}
{groupBy === "labels" && <>{issueFilterStore.projectLabels?.find((p) => p.id === groupId)?.name || " None"}</>}
{groupBy === "assignees" && (
<>
{issueFilterStore.projectMembers?.find((p) => p?.member?.id === groupId)?.member
?.display_name || " None"}
</>
<>{issueFilterStore.projectMembers?.find((p) => p?.member?.id === groupId)?.member?.display_name || " None"}</>
)}
{groupBy === "created_by" && (
<>
{issueFilterStore.projectMembers?.find((p) => p?.member?.id === groupId)?.member
?.display_name || " None"}
</>
<>{issueFilterStore.projectMembers?.find((p) => p?.member?.id === groupId)?.member?.display_name || " None"}</>
)}
</div>
);

10
web/components/issue-layouts/list/list.tsx
View File

@ -4,17 +4,11 @@ import { IssueListItem } from "./item";
import { observer } from "mobx-react-lite";
export interface IIssueListView {
issues: IIssue[];
issues: IIssue[] | null;
groupId: string;
}
export const IssueListView: FC<IIssueListView> = observer((props) => {
const { issues = [], groupId } = props;
return (
<div>
{issues.map((issue) => (
<IssueListItem issue={issue} groupId={groupId} />
))}
</div>
);
return <div>{issues && issues.map((issue) => <IssueListItem issue={issue} groupId={groupId} />)}</div>;
});

7
web/components/issue-layouts/list/root.tsx
View File

@ -20,7 +20,7 @@ export const IssueListViewRoot = observer(() => {
<div>Loading...</div>
) : (
<>
{Object.keys(issueViewStore?.getIssues).map((groupId) => (
{Object.keys(issueViewStore?.getIssues).map((groupId: any) => (
<Disclosure key={groupId}>
{({ open }) => (
<>
@ -31,7 +31,10 @@ export const IssueListViewRoot = observer(() => {
/>
</Disclosure.Button>
<Disclosure.Panel className="px-4 pt-4 pb-2">
<IssueListView issues={issueViewStore?.getIssues?.[groupId]} groupId={groupId} />
<IssueListView
issues={(groupId && issueViewStore?.getIssues?.[groupId]) ?? null}
groupId={groupId}
/>
</Disclosure.Panel>
</>
)}

28
web/store/issue-views/Issues.ts
View File

@ -14,11 +14,11 @@ export interface IIssues {
}
export interface IIssuesLayout {
list: IIssues;
kanban: IIssues;
calendar: IIssues;
spreadsheet: IIssues;
gantt_chart: IIssues;
list: IIssues[];
kanban: IIssues[];
calendar: IIssues[];
spreadsheet: IIssues[];
gantt_chart: IIssues[];
}
export interface IIssueState {
@ -143,14 +143,14 @@ class IssueViewStore implements IIssueViewStore {
return null;
}
updateIssues = (group_id: string | null, issue_id: string | null, data: any) => {
updateIssues = (group_id: any = null, issue_id: string | null, data: any) => {
const currentWorkspaceId: string | null = this.rootStore.issueFilters.workspaceId;
const currentProjectId: string | null = this.rootStore.issueFilters.projectId;
const currentModuleId: string | null = this.rootStore.issueFilters.moduleId;
const currentCycleId: string | null = this.rootStore.issueFilters.cycleId;
const currentViewId: string | null = this.rootStore.issueFilters.viewId;
// const currentModuleId: string | null = this.rootStore.issueFilters.moduleId;
// const currentCycleId: string | null = this.rootStore.issueFilters.cycleId;
// const currentViewId: string | null = this.rootStore.issueFilters.viewId;
const currentView: TIssueViews | null = this.rootStore.issueFilters.issueView;
const currentLayout: TIssueLayouts | null | undefined = this.rootStore.issueFilters.issueLayout;
const currentLayout: TIssueLayouts | null = this.rootStore.issueFilters.issueLayout;
if (!currentView || !currentWorkspaceId || !currentLayout || !issue_id) return null;
@ -170,7 +170,7 @@ class IssueViewStore implements IIssueViewStore {
},
},
},
};
} as any;
} else {
this.issues = {
...this.issues,
@ -183,7 +183,7 @@ class IssueViewStore implements IIssueViewStore {
),
},
},
};
} as any;
}
}
@ -210,7 +210,7 @@ class IssueViewStore implements IIssueViewStore {
},
},
},
};
} as any;
} else {
this.issues = {
...this.issues,
@ -229,7 +229,7 @@ class IssueViewStore implements IIssueViewStore {
},
},
},
};
} as any;
}
}
};

79
web/store/issue-views/issue_data.ts
View File

@ -1,4 +1,6 @@
import { renderDateFormat } from "helpers/date-time.helper";
// types
import { TIssueLayouts, TIssueParams } from "./issue_filters";
export type TStateGroup = "backlog" | "unstarted" | "started" | "completed" | "cancelled";
@ -153,6 +155,83 @@ export const issueFilterVisibilityData: any = {
},
};
export const handleIssueQueryParamsByLayout = (_layout: TIssueLayouts | undefined): TIssueParams[] | null => {
if (_layout === "list")
return [
"priority",
"state_group",
"state",
"assignees",
"created_by",
"labels",
"start_date",
"target_date",
"group_by",
"order_by",
"type",
"sub_issue",
"show_empty_groups",
];
if (_layout === "kanban")
return [
"priority",
"state_group",
"state",
"assignees",
"created_by",
"labels",
"start_date",
"target_date",
"group_by",
"order_by",
"type",
"sub_issue",
"show_empty_groups",
];
if (_layout === "calendar")
return [
"priority",
"state_group",
"state",
"assignees",
"created_by",
"labels",
"start_date",
"target_date",
"type",
"calendar_date_range",
];
if (_layout === "spreadsheet")
return [
"priority",
"state_group",
"state",
"assignees",
"created_by",
"labels",
"start_date",
"target_date",
"type",
"sub_issue",
];
if (_layout === "gantt_chart")
return [
"priority",
"state",
"assignees",
"created_by",
"labels",
"start_date",
"target_date",
"order_by",
"type",
"sub_issue",
"start_target_date",
];
return null;
};
export const handleIssueParamsDateFormat = (key: string, start_date: any | null, target_date: any | null) => {
if (key === "last_week")
return `${renderDateFormat(new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000))};after,${renderDateFormat(

2
web/store/issue-views/issue_detail.ts
View File

@ -143,7 +143,7 @@ class IssueViewDetailStore implements IIssueViewDetailStore {
this.rootStore.issueFilters.issueView || "issues"
);
const issueResponse = await this.issueService.patchIssue(workspaceId, projectId, issueId, data, undefined);
const issueList = await this.issueService.getIssuesWithParams(workspaceId, projectId, filteredParams);
const issueList = (await this.issueService.getIssuesWithParams(workspaceId, projectId, filteredParams)) as any;
console.log("issueList", issueList);
if (issueResponse) {

120
web/store/issue-views/issue_filters.ts
View File

@ -1,4 +1,4 @@
import { observable, action, computed, makeObservable, runInAction, autorun } from "mobx";
import { observable, action, computed, makeObservable, runInAction } from "mobx";
// types
import { RootStore } from "../root";
// services
@ -11,20 +11,22 @@ import { ProjectCycleServices } from "services/cycles.service";
import { ViewServices as ProjectViewServices } from "services/views.service";
// default data
import {
filtersPriority,
filterStateGroup,
filtersStartDate,
filtersDueDate,
displayPropertyGroupBy,
displayPropertyOrderBy,
displayPropertyIssueType,
priorities,
stateGroups,
startDateOptions,
dueDateOptions,
groupByOptions,
orderByOptions,
issueTypes,
displayProperties,
extraProperties,
handleIssueQueryParamsByLayout,
} from "./issue_data";
import { IIssueState } from "./Issues";
export type TIssueViews = "my_issues" | "issues" | "modules" | "views" | "cycles";
export type TIssueLayouts = "list" | "kanban" | "calendar" | "spreadsheet" | "gantt_chart";
export type TIssueParams =
| "priority"
| "state_group"
@ -149,7 +151,6 @@ export interface IIssueFilterStore {
error: any | null;
// current workspace and project id
myUserId: string | null;
workspaceId: string | null;
projectId: string | null;
moduleId: string | null;
@ -205,13 +206,13 @@ class IssueFilterStore implements IIssueFilterStore {
issueView: TIssueViews | null = null;
issueRenderFilters: IIssueRenderFilters = {
priority: filtersPriority,
state_group: filterStateGroup,
start_date: filtersStartDate,
due_date: filtersDueDate,
group_by: displayPropertyGroupBy,
order_by: displayPropertyOrderBy,
issue_type: displayPropertyIssueType,
priority: priorities,
state_group: stateGroups,
start_date: startDateOptions,
due_date: dueDateOptions,
group_by: groupByOptions,
order_by: orderByOptions,
issue_type: issueTypes,
display_properties: displayProperties,
extra_properties: extraProperties,
workspace_properties: {},
@ -235,7 +236,6 @@ class IssueFilterStore implements IIssueFilterStore {
loader: observable,
error: observable,
myUserId: observable,
workspaceId: observable,
projectId: observable,
moduleId: observable,
@ -311,6 +311,8 @@ class IssueFilterStore implements IIssueFilterStore {
this.issueFilters?.[this.workspaceId]?.project_issue_properties?.[this.projectId]?.issues?.display_filters
?.layout || null
);
return null;
}
get workspaceProjects() {
@ -692,81 +694,8 @@ class IssueFilterStore implements IIssueFilterStore {
// in spreadsheet sub issue is false for sure
// in gantt start_target_date is true for sure
let filteredParams: TIssueParams[] = [];
if (_layout === "list")
filteredParams = [
"priority",
"state_group",
"state",
"assignees",
"created_by",
"labels",
"start_date",
"target_date",
"group_by",
"order_by",
"type",
"sub_issue",
"show_empty_groups",
];
if (_layout === "kanban")
filteredParams = [
"priority",
"state_group",
"state",
"assignees",
"created_by",
"labels",
"start_date",
"target_date",
"group_by",
"order_by",
"type",
"sub_issue",
"show_empty_groups",
];
if (_layout === "calendar")
filteredParams = [
"priority",
"state_group",
"state",
"assignees",
"created_by",
"labels",
"start_date",
"target_date",
"type",
"calendar_date_range",
];
if (_layout === "spreadsheet")
filteredParams = [
"priority",
"state_group",
"state",
"assignees",
"created_by",
"labels",
"start_date",
"target_date",
"type",
"sub_issue",
];
if (_layout === "gantt_chart")
filteredParams = [
"priority",
"state",
"assignees",
"created_by",
"labels",
"start_date",
"target_date",
"order_by",
"type",
"sub_issue",
"start_target_date",
];
filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
const filteredParams: TIssueParams[] | null = handleIssueQueryParamsByLayout(_layout);
if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
return filteredRouteParams;
};
@ -1054,10 +983,10 @@ class IssueFilterStore implements IIssueFilterStore {
this.loader = true;
this.error = null;
await this.rootStore.user.setCurrentUser();
const issuesDisplayPropertiesResponse = await this.issueService.getIssueProperties(workspaceId, projectId);
if (issuesDisplayPropertiesResponse) {
const _myUserId: string = issuesDisplayPropertiesResponse?.user;
const _issuesDisplayPropertiesResponse: any = {
...this.issueFilters,
[workspaceId]: {
@ -1076,7 +1005,6 @@ class IssueFilterStore implements IIssueFilterStore {
};
runInAction(() => {
this.myUserId = _myUserId;
this.issueFilters = _issuesDisplayPropertiesResponse;
this.loader = false;
this.error = null;
@ -1103,7 +1031,7 @@ class IssueFilterStore implements IIssueFilterStore {
const payload = {
properties: data,
user: this.myUserId,
user: this.rootStore?.user?.currentUser?.id,
};
const issuesDisplayPropertiesResponse = await this.issueService.patchIssueProperties(
workspaceId,

21
web/store/issue-views/project.ts Normal file
View File

@ -0,0 +1,21 @@
import { action, computed, makeObservable } from "mobx";
// types
import { RootStore } from "../root";
export interface IIssueProject {}
class IssueProject implements IIssueProject {
// root store
rootStore;
constructor(_rootStore: RootStore) {
makeObservable(this, {
// computed
// actions
});
this.rootStore = _rootStore;
}
}
export default IssueProject;

21
web/store/issue-views/workspace.ts Normal file
View File

@ -0,0 +1,21 @@
import { action, computed, makeObservable } from "mobx";
// types
import { RootStore } from "../root";
export interface IIssueWorkspace {}
class IssueWorkspace implements IIssueWorkspace {
// root store
rootStore;
constructor(_rootStore: RootStore) {
makeObservable(this, {
// computed
// actions
});
this.rootStore = _rootStore;
}
}
export default IssueWorkspace;

8
web/store/root.ts
View File

@ -7,6 +7,8 @@ import ProjectStore, { IProjectStore } from "./project";
import ProjectPublishStore, { IProjectPublishStore } from "./project-publish";
import IssuesStore from "./issues";
// issues views and filters
import IssueWorkspace from "./issue-views/workspace";
import IssueProject from "./issue-views/project";
import IssueFilterStore from "./issue-views/issue_filters";
import IssueViewStore from "./issue-views/Issues";
import IssueViewDetailStore from "./issue-views/issue_detail";
@ -20,6 +22,9 @@ export class RootStore {
project: IProjectStore;
projectPublish: IProjectPublishStore;
issues: IssuesStore;
// issues views and filters
issueWorkspace: IssueWorkspace;
issueProject: IssueProject;
issueFilters: IssueFilterStore;
issueView: IssueViewStore;
issueDetail: IssueViewDetailStore;
@ -31,6 +36,9 @@ export class RootStore {
this.project = new ProjectStore(this);
this.projectPublish = new ProjectPublishStore(this);
this.issues = new IssuesStore(this);
// issues views and filters
this.issueWorkspace = new IssueWorkspace(this);
this.issueProject = new IssueProject(this);
this.issueFilters = new IssueFilterStore(this);
this.issueView = new IssueViewStore(this);
this.issueDetail = new IssueViewDetailStore(this);