Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: editable label option added in all view , fix: view page list and kanban view mutation fix, chore: code refactor #1390

Merged
merged 4 commits into from
Jun 24, 2023
Merged

feat: editable label option added in all view , fix: view page list and kanban view mutation fix, chore: code refactor #1390

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
68c4bd4
feat: editable label select component added in spreadsheet view
anmolsinghbhatia Jun 24, 2023
7b8ce3e
feat: editable label select option added in all view, chore: code ref…
anmolsinghbhatia Jun 24, 2023
97deec5
fix: view page list and kanban view mutation fix and sub issue mutati…
anmolsinghbhatia Jun 24, 2023
0ab103e
fix: build fix
anmolsinghbhatia Jun 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 54 additions & 69 deletions apps/app/components/core/board-view/single-issue.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
ViewAssigneeSelect,
ViewDueDateSelect,
ViewEstimateSelect,
ViewLabelSelect,
ViewPrioritySelect,
ViewStateSelect,
} from "components/issues";
Expand All @@ -44,14 +45,23 @@ import { LayerDiagonalIcon } from "components/icons";
import { handleIssuesMutation } from "constants/issue";
import { copyTextToClipboard, truncateText } from "helpers/string.helper";
// types
import { ICurrentUserResponse, IIssue, Properties, TIssueGroupByOptions, UserAuth } from "types";
import {
ICurrentUserResponse,
IIssue,
ISubIssueResponse,
Properties,
TIssueGroupByOptions,
UserAuth,
} from "types";
// fetch-keys
import {
CYCLE_DETAILS,
CYCLE_ISSUES_WITH_PARAMS,
MODULE_DETAILS,
MODULE_ISSUES_WITH_PARAMS,
PROJECT_ISSUES_LIST_WITH_PARAMS,
SUB_ISSUES,
VIEW_ISSUES,
} from "constants/fetch-keys";

type Props = {
Expand Down Expand Up @@ -101,41 +111,51 @@ export const SingleBoardIssue: React.FC<Props> = ({
const { orderBy, params } = useIssuesView();

const router = useRouter();
const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;

const { setToastAlert } = useToast();

const partialUpdateIssue = useCallback(
(formData: Partial<IIssue>, issueId: string) => {
(formData: Partial<IIssue>, issue: IIssue) => {
if (!workspaceSlug || !projectId) return;

if (cycleId)
mutate<
| {
[key: string]: IIssue[];
}
| IIssue[]
>(
CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params),
(prevData) =>
handleIssuesMutation(
formData,
groupTitle ?? "",
selectedGroup,
index,
orderBy,
prevData
),
const fetchKey = cycleId
? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params)
: moduleId
? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
: viewId
? VIEW_ISSUES(viewId.toString(), params)
: PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params);

if (issue.parent) {
mutate<ISubIssueResponse>(
SUB_ISSUES(issue.parent.toString()),
(prevData) => {
if (!prevData) return prevData;

return {
...prevData,
sub_issues: (prevData.sub_issues ?? []).map((i) => {
if (i.id === issue.id) {
return {
...i,
...formData,
};
}
return i;
}),
};
},
false
);
else if (moduleId)
} else {
mutate<
| {
[key: string]: IIssue[];
}
| IIssue[]
>(
MODULE_ISSUES_WITH_PARAMS(moduleId as string),
fetchKey,
(prevData) =>
handleIssuesMutation(
formData,
Expand All @@ -147,47 +167,20 @@ export const SingleBoardIssue: React.FC<Props> = ({
),
false
);
else {
mutate<
| {
[key: string]: IIssue[];
}
| IIssue[]
>(
PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params),
(prevData) => {
if (!prevData) return prevData;

return handleIssuesMutation(
formData,
groupTitle ?? "",
selectedGroup,
index,
orderBy,
prevData
);
},
false
);
}

issuesService
.patchIssue(workspaceSlug as string, projectId as string, issueId, formData, user)
.patchIssue(workspaceSlug as string, projectId as string, issue.id, formData, user)
.then(() => {
if (cycleId) {
mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
mutate(CYCLE_DETAILS(cycleId as string));
} else if (moduleId) {
mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
mutate(MODULE_DETAILS(moduleId as string));
} else mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params));
mutate(fetchKey);
});
},
[
workspaceSlug,
projectId,
cycleId,
moduleId,
viewId,
groupTitle,
index,
selectedGroup,
Expand Down Expand Up @@ -370,23 +363,15 @@ export const SingleBoardIssue: React.FC<Props> = ({
isNotAllowed={isNotAllowed}
/>
)}
{properties.labels && issue.label_details.length > 0 && (
<div className="flex flex-wrap gap-1">
{issue.label_details.map((label) => (
<div
key={label.id}
className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs text-brand-secondary"
>
<span
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
style={{
backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
}}
/>
{label.name}
</div>
))}
</div>
{properties.labels && (
<ViewLabelSelect
issue={issue}
partialUpdateIssue={partialUpdateIssue}
isNotAllowed={isNotAllowed}
tooltipPosition="left"
user={user}
selfPositioned
/>
)}
{properties.assignee && (
<ViewAssigneeSelect
Expand Down
94 changes: 57 additions & 37 deletions apps/app/components/core/calendar-view/single-issue.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
ViewAssigneeSelect,
ViewDueDateSelect,
ViewEstimateSelect,
ViewLabelSelect,
ViewPrioritySelect,
ViewStateSelect,
} from "components/issues";
Expand All @@ -28,12 +29,13 @@ import { LayerDiagonalIcon } from "components/icons";
// helper
import { copyTextToClipboard, truncateText } from "helpers/string.helper";
// type
import { ICurrentUserResponse, IIssue } from "types";
import { ICurrentUserResponse, IIssue, ISubIssueResponse } from "types";
// fetch-keys
import {
CYCLE_ISSUES_WITH_PARAMS,
MODULE_ISSUES_WITH_PARAMS,
PROJECT_ISSUES_LIST_WITH_PARAMS,
SUB_ISSUES,
VIEW_ISSUES,
} from "constants/fetch-keys";

Expand Down Expand Up @@ -68,7 +70,7 @@ export const SingleCalendarIssue: React.FC<Props> = ({
const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);

const partialUpdateIssue = useCallback(
(formData: Partial<IIssue>, issueId: string) => {
(formData: Partial<IIssue>, issue: IIssue) => {
if (!workspaceSlug || !projectId) return;

const fetchKey = cycleId
Expand All @@ -79,25 +81,54 @@ export const SingleCalendarIssue: React.FC<Props> = ({
? VIEW_ISSUES(viewId.toString(), params)
: PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params);

mutate<IIssue[]>(
fetchKey,
(prevData) =>
(prevData ?? []).map((p) => {
if (p.id === issueId) {
return {
...p,
...formData,
assignees: formData?.assignees_list ?? p.assignees,
};
}
if (issue.parent) {
mutate<ISubIssueResponse>(
SUB_ISSUES(issue.parent.toString()),
(prevData) => {
if (!prevData) return prevData;

return p;
}),
false
);
return {
...prevData,
sub_issues: (prevData.sub_issues ?? []).map((i) => {
if (i.id === issue.id) {
return {
...i,
...formData,
};
}
return i;
}),
};
},
false
);
} else {
mutate<IIssue[]>(
fetchKey,
(prevData) =>
(prevData ?? []).map((p) => {
if (p.id === issue.id) {
return {
...p,
...formData,
assignees: formData?.assignees_list ?? p.assignees,
};
}

return p;
}),
false
);
}

issuesService
.patchIssue(workspaceSlug as string, projectId as string, issueId as string, formData, user)
.patchIssue(
workspaceSlug as string,
projectId as string,
issue.id as string,
formData,
user
)
.then(() => {
mutate(fetchKey);
})
Expand Down Expand Up @@ -207,25 +238,14 @@ export const SingleCalendarIssue: React.FC<Props> = ({
isNotAllowed={isNotAllowed}
/>
)}
{properties.labels && issue.label_details.length > 0 ? (
<div className="flex flex-wrap gap-1">
{issue.label_details.map((label) => (
<span
key={label.id}
className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs text-brand-secondary"
>
<span
className="h-1.5 w-1.5 rounded-full"
style={{
backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
}}
/>
{label.name}
</span>
))}
</div>
) : (
""
{properties.labels && (
<ViewLabelSelect
issue={issue}
partialUpdateIssue={partialUpdateIssue}
position="left"
user={user}
isNotAllowed={isNotAllowed}
/>
)}
{properties.assignee && (
<ViewAssigneeSelect
Expand Down
Loading