mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
fix: web-view action permission, logs, archive issue, and more (#2356)
* fix: web-view * feat: select module * dev: select cycle & module * fix: permissions, logs and archive issue * fix: logs for issue select fix: hard-coded web-view validation * fix: attachment confirm delete workflow * fix: typo * fix: logging link instead of redirecting to the link * fix: made editor height 100% * style: due-date select * fix: update comment not working * fix: changed button text style: spacing * fix: due date select not working for today's date * fix: typography * fix: spacing in select parent
This commit is contained in:
Dakshesh Jain
GitHub
parent
58ea4d6ec9
commit
892a30c3a8
@ -13,10 +13,11 @@ import { renderEmoji } from "helpers/emoji.helper";
|
||||
type Props = {
|
||||
projectId?: string | string[];
|
||||
commentId: string;
|
||||
readonly?: boolean;
|
||||
};
|
||||
|
||||
export const CommentReaction: React.FC<Props> = (props) => {
|
||||
const { projectId, commentId } = props;
|
||||
const { projectId, commentId, readonly = false } = props;
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
@ -47,16 +48,18 @@ export const CommentReaction: React.FC<Props> = (props) => {
|
||||
|
||||
return (
|
||||
<div className="flex gap-1.5 items-center mt-2">
|
||||
<ReactionSelector
|
||||
size="md"
|
||||
position="top"
|
||||
value={
|
||||
commentReactions
|
||||
?.filter((reaction) => reaction.actor === user?.id)
|
||||
.map((r) => r.reaction) || []
|
||||
}
|
||||
onSelect={handleReactionClick}
|
||||
/>
|
||||
{!readonly && (
|
||||
<ReactionSelector
|
||||
size="md"
|
||||
position="top"
|
||||
value={
|
||||
commentReactions
|
||||
?.filter((reaction) => reaction.actor === user?.id)
|
||||
.map((r) => r.reaction) || []
|
||||
}
|
||||
onSelect={handleReactionClick}
|
||||
/>
|
||||
)}
|
||||
|
||||
{Object.keys(groupedReactions || {}).map(
|
||||
(reaction) =>
|
||||
@ -64,6 +67,7 @@ export const CommentReaction: React.FC<Props> = (props) => {
|
||||
groupedReactions[reaction].length > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
disabled={readonly}
|
||||
onClick={() => {
|
||||
handleReactionClick(reaction);
|
||||
}}
|
||||
|
||||
@ -47,7 +47,7 @@ export const SidebarCycleSelect: React.FC<Props> = ({
|
||||
|
||||
issuesService
|
||||
.removeIssueFromCycle(workspaceSlug as string, projectId as string, cycleId, bridgeId)
|
||||
.then((res) => {
|
||||
.then(() => {
|
||||
mutate(ISSUE_DETAILS(issueId as string));
|
||||
|
||||
mutate(CYCLE_ISSUES(cycleId));
|
||||
|
||||
@ -41,9 +41,7 @@ const IssueLink = ({ activity }: { activity: IIssueActivity }) => (
|
||||
const UserLink = ({ activity }: { activity: IIssueActivity }) => (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
console.log("user", activity.actor);
|
||||
}}
|
||||
onClick={() => console.log("user", activity.new_identifier ?? activity.old_identifier)}
|
||||
className="font-medium text-custom-text-100 inline-flex items-center hover:underline"
|
||||
>
|
||||
{activity.new_value && activity.new_value !== "" ? activity.new_value : activity.old_value}
|
||||
@ -109,9 +107,25 @@ const activityDetails: {
|
||||
{activity.old_value === ""
|
||||
? "marked this issue is blocking issue "
|
||||
: "removed the blocking issue "}
|
||||
<span className="font-medium text-custom-text-100">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
console.log(
|
||||
"issue",
|
||||
JSON.stringify({
|
||||
project_id: activity.project,
|
||||
issue_id: activity.new_identifier ?? activity.old_identifier,
|
||||
issue_identifier:
|
||||
activity.new_value && activity.new_value !== ""
|
||||
? activity.new_value
|
||||
: activity.old_value,
|
||||
})
|
||||
)
|
||||
}
|
||||
className="font-medium text-custom-text-100"
|
||||
>
|
||||
{activity.old_value === "" ? activity.new_value : activity.old_value}
|
||||
</span>
|
||||
</button>
|
||||
.
|
||||
</>
|
||||
),
|
||||
@ -124,9 +138,25 @@ const activityDetails: {
|
||||
{activity.old_value === ""
|
||||
? "marked this issue is being blocked by issue "
|
||||
: "removed this issue being blocked by issue "}
|
||||
<span className="font-medium text-custom-text-100">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
console.log(
|
||||
"issue",
|
||||
JSON.stringify({
|
||||
project_id: activity.project,
|
||||
issue_id: activity.new_identifier ?? activity.old_identifier,
|
||||
issue_identifier:
|
||||
activity.new_value && activity.new_value !== ""
|
||||
? activity.new_value
|
||||
: activity.old_value,
|
||||
})
|
||||
)
|
||||
}
|
||||
className="font-medium text-custom-text-100"
|
||||
>
|
||||
{activity.old_value === "" ? activity.new_value : activity.old_value}
|
||||
</span>
|
||||
</button>
|
||||
.
|
||||
</>
|
||||
),
|
||||
@ -139,9 +169,25 @@ const activityDetails: {
|
||||
{activity.old_value === ""
|
||||
? "marked this issue as duplicate of "
|
||||
: "removed this issue as a duplicate of "}
|
||||
<span className="font-medium text-custom-text-100">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
console.log(
|
||||
"issue",
|
||||
JSON.stringify({
|
||||
project_id: activity.project,
|
||||
issue_id: activity.new_identifier ?? activity.old_identifier,
|
||||
issue_identifier:
|
||||
activity.new_value && activity.new_value !== ""
|
||||
? activity.new_value
|
||||
: activity.old_value,
|
||||
})
|
||||
)
|
||||
}
|
||||
className="font-medium text-custom-text-100"
|
||||
>
|
||||
{activity.verb === "created" ? activity.new_value : activity.old_value}
|
||||
</span>
|
||||
</button>
|
||||
.
|
||||
</>
|
||||
),
|
||||
@ -154,9 +200,25 @@ const activityDetails: {
|
||||
{activity.old_value === ""
|
||||
? "marked that this issue relates to "
|
||||
: "removed the relation from "}
|
||||
<span className="font-medium text-custom-text-100">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
console.log(
|
||||
"issue",
|
||||
JSON.stringify({
|
||||
project_id: activity.project,
|
||||
issue_id: activity.new_identifier ?? activity.old_identifier,
|
||||
issue_identifier:
|
||||
activity.new_value && activity.new_value !== ""
|
||||
? activity.new_value
|
||||
: activity.old_value,
|
||||
})
|
||||
);
|
||||
}}
|
||||
className="font-medium text-custom-text-100"
|
||||
>
|
||||
{activity.old_value === "" ? activity.new_value : activity.old_value}
|
||||
</span>
|
||||
</button>
|
||||
.
|
||||
</>
|
||||
),
|
||||
@ -175,14 +237,17 @@ const activityDetails: {
|
||||
console.log(
|
||||
"cycle",
|
||||
JSON.stringify({
|
||||
cycle_id: activity.new_identifier,
|
||||
cycle_id: activity.new_identifier ?? activity.old_identifier,
|
||||
project_id: activity.project,
|
||||
cycle_name: activity.verb === "created" ? activity.new_value : activity.old_value,
|
||||
})
|
||||
)
|
||||
}
|
||||
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
|
||||
>
|
||||
{activity.new_value}
|
||||
{activity.verb === "created" || activity.verb === "updated"
|
||||
? activity.new_value
|
||||
: activity.old_value}
|
||||
<Icon iconName="launch" className="!text-xs" />
|
||||
</button>
|
||||
</>
|
||||
@ -295,16 +360,23 @@ const activityDetails: {
|
||||
{activity.verb === "created" && "added this "}
|
||||
{activity.verb === "updated" && "updated this "}
|
||||
{activity.verb === "deleted" && "removed this "}
|
||||
module{" "}
|
||||
<button
|
||||
onClick={() =>
|
||||
console.log(
|
||||
"module",
|
||||
activity.verb === "created" ? activity.new_value : activity.old_value
|
||||
JSON.stringify({
|
||||
module_id: activity.new_identifier ?? activity.old_identifier,
|
||||
project_id: activity.project,
|
||||
module_name: activity.verb === "created" ? activity.new_value : activity.old_value,
|
||||
})
|
||||
)
|
||||
}
|
||||
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
|
||||
>
|
||||
module
|
||||
{activity.verb === "created" || activity.verb === "updated"
|
||||
? activity.new_value
|
||||
: activity.old_value}
|
||||
<Icon iconName="launch" className="!text-xs" />
|
||||
</button>
|
||||
.
|
||||
@ -333,9 +405,25 @@ const activityDetails: {
|
||||
message: (activity, showIssue) => (
|
||||
<>
|
||||
{activity.new_value ? "set the parent to " : "removed the parent "}
|
||||
<span className="font-medium text-custom-text-100">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
console.log(
|
||||
"issue",
|
||||
JSON.stringify({
|
||||
project_id: activity.project,
|
||||
issue_id: activity.new_identifier ?? activity.old_identifier,
|
||||
issue_identifier:
|
||||
activity.new_value && activity.new_value !== ""
|
||||
? activity.new_value
|
||||
: activity.old_value,
|
||||
})
|
||||
);
|
||||
}}
|
||||
className="font-medium text-custom-text-100"
|
||||
>
|
||||
{activity.new_value ? activity.new_value : activity.old_value}
|
||||
</span>
|
||||
</button>
|
||||
{showIssue && (
|
||||
<>
|
||||
{" "}
|
||||
|
||||
215
web/components/web-view/commend-card.tsx
Normal file
215
web/components/web-view/commend-card.tsx
Normal file
@ -0,0 +1,215 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
// react-hook-form
|
||||
import { useForm } from "react-hook-form";
|
||||
// icons
|
||||
import { ChatBubbleLeftEllipsisIcon, CheckIcon, XMarkIcon } from "@heroicons/react/24/outline";
|
||||
// hooks
|
||||
import useUser from "hooks/use-user";
|
||||
// ui
|
||||
import { CustomMenu, Icon } from "components/ui";
|
||||
import { CommentReaction } from "components/issues";
|
||||
import { TipTapEditor } from "components/tiptap";
|
||||
// helpers
|
||||
import { timeAgo } from "helpers/date-time.helper";
|
||||
// types
|
||||
import type { IIssueComment } from "types";
|
||||
|
||||
type Props = {
|
||||
comment: IIssueComment;
|
||||
handleCommentDeletion: (comment: string) => void;
|
||||
onSubmit: (commentId: string, data: Partial<IIssueComment>) => void;
|
||||
showAccessSpecifier?: boolean;
|
||||
workspaceSlug: string;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
export const CommentCard: React.FC<Props> = (props) => {
|
||||
const {
|
||||
comment,
|
||||
handleCommentDeletion,
|
||||
onSubmit,
|
||||
showAccessSpecifier = false,
|
||||
workspaceSlug,
|
||||
disabled,
|
||||
} = props;
|
||||
|
||||
const { user } = useUser();
|
||||
|
||||
const editorRef = React.useRef<any>(null);
|
||||
const showEditorRef = React.useRef<any>(null);
|
||||
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
|
||||
const {
|
||||
formState: { isSubmitting },
|
||||
handleSubmit,
|
||||
setFocus,
|
||||
watch,
|
||||
setValue,
|
||||
} = useForm<IIssueComment>({
|
||||
defaultValues: comment,
|
||||
});
|
||||
|
||||
const onEnter = (formData: Partial<IIssueComment>) => {
|
||||
if (isSubmitting) return;
|
||||
setIsEditing(false);
|
||||
|
||||
onSubmit(comment.id, formData);
|
||||
|
||||
editorRef.current?.setEditorValue(formData.comment_html);
|
||||
showEditorRef.current?.setEditorValue(formData.comment_html);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
isEditing && setFocus("comment");
|
||||
}, [isEditing, setFocus]);
|
||||
|
||||
return (
|
||||
<div className="relative flex items-start space-x-3">
|
||||
<div className="relative px-1">
|
||||
{comment.actor_detail.avatar && comment.actor_detail.avatar !== "" ? (
|
||||
<img
|
||||
src={comment.actor_detail.avatar}
|
||||
alt={
|
||||
comment.actor_detail.is_bot
|
||||
? comment.actor_detail.first_name + " Bot"
|
||||
: comment.actor_detail.display_name
|
||||
}
|
||||
height={30}
|
||||
width={30}
|
||||
className="grid h-7 w-7 place-items-center rounded-full border-2 border-custom-border-200"
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}
|
||||
>
|
||||
{comment.actor_detail.is_bot
|
||||
? comment.actor_detail.first_name.charAt(0)
|
||||
: comment.actor_detail.display_name.charAt(0)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<span className="absolute -bottom-0.5 -right-1 rounded-tl bg-custom-background-80 px-0.5 py-px">
|
||||
<ChatBubbleLeftEllipsisIcon
|
||||
className="h-3.5 w-3.5 text-custom-text-200"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div>
|
||||
<div className="text-xs">
|
||||
{comment.actor_detail.is_bot
|
||||
? comment.actor_detail.first_name + " Bot"
|
||||
: comment.actor_detail.display_name}
|
||||
</div>
|
||||
<p className="mt-0.5 text-xs text-custom-text-200">
|
||||
commented {timeAgo(comment.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="issue-comments-section p-0">
|
||||
<form
|
||||
className={`flex-col gap-2 ${isEditing ? "flex" : "hidden"}`}
|
||||
onSubmit={handleSubmit(onEnter)}
|
||||
>
|
||||
<div>
|
||||
<TipTapEditor
|
||||
workspaceSlug={workspaceSlug as string}
|
||||
ref={editorRef}
|
||||
value={watch("comment_html")}
|
||||
debouncedUpdatesEnabled={false}
|
||||
customClassName="min-h-[50px] p-3 shadow-sm"
|
||||
onChange={(comment_json: Object, comment_html: string) => {
|
||||
setValue("comment_json", comment_json);
|
||||
setValue("comment_html", comment_html);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-1 self-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting || disabled}
|
||||
className="group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500"
|
||||
>
|
||||
<CheckIcon className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="group rounded border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
|
||||
onClick={() => setIsEditing(false)}
|
||||
>
|
||||
<XMarkIcon className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" />
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className={`relative ${isEditing ? "hidden" : ""}`}>
|
||||
{showAccessSpecifier && (
|
||||
<div className="absolute top-1 right-1.5 z-[1] text-custom-text-300">
|
||||
<Icon
|
||||
iconName={comment.access === "INTERNAL" ? "lock" : "public"}
|
||||
className="!text-xs"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<TipTapEditor
|
||||
workspaceSlug={workspaceSlug as string}
|
||||
ref={showEditorRef}
|
||||
value={comment.comment_html}
|
||||
editable={false}
|
||||
customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
|
||||
/>
|
||||
<CommentReaction
|
||||
readonly={disabled}
|
||||
projectId={comment.project}
|
||||
commentId={comment.id}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{user?.id === comment.actor && !disabled && (
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => setIsEditing(true)}
|
||||
className="flex items-center gap-1"
|
||||
>
|
||||
<Icon iconName="edit" />
|
||||
Edit comment
|
||||
</CustomMenu.MenuItem>
|
||||
{showAccessSpecifier && (
|
||||
<>
|
||||
{comment.access === "INTERNAL" ? (
|
||||
<CustomMenu.MenuItem
|
||||
renderAs="button"
|
||||
onClick={() => onSubmit(comment.id, { access: "EXTERNAL" })}
|
||||
className="flex items-center gap-1"
|
||||
>
|
||||
<Icon iconName="public" />
|
||||
Switch to public comment
|
||||
</CustomMenu.MenuItem>
|
||||
) : (
|
||||
<CustomMenu.MenuItem
|
||||
renderAs="button"
|
||||
onClick={() => onSubmit(comment.id, { access: "INTERNAL" })}
|
||||
className="flex items-center gap-1"
|
||||
>
|
||||
<Icon iconName="lock" />
|
||||
Switch to private comment
|
||||
</CustomMenu.MenuItem>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
handleCommentDeletion(comment.id);
|
||||
}}
|
||||
className="flex items-center gap-1"
|
||||
>
|
||||
<Icon iconName="delete" />
|
||||
Delete comment
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
30
web/components/web-view/confirm-delete.tsx
Normal file
30
web/components/web-view/confirm-delete.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import { WebViewModal } from "components/web-view";
|
||||
|
||||
type DeleteConfirmationProps = {
|
||||
isOpen: boolean;
|
||||
title: string;
|
||||
content: string | React.ReactNode;
|
||||
onCancel: () => void;
|
||||
onConfirm: () => void;
|
||||
};
|
||||
|
||||
export const DeleteConfirmation: React.FC<DeleteConfirmationProps> = (props) => {
|
||||
const { isOpen, onCancel, onConfirm, title, content } = props;
|
||||
|
||||
return (
|
||||
<WebViewModal isOpen={isOpen} onClose={onCancel} modalTitle={title}>
|
||||
<div className="text-custom-text-200">
|
||||
<p>{content}</p>
|
||||
</div>
|
||||
<div className="mt-4 flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onConfirm}
|
||||
className="w-full py-2 flex items-center justify-center rounded-[4px] bg-red-500/10 text-red-500 border border-red-500 text-base font-medium"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</WebViewModal>
|
||||
);
|
||||
};
|
||||
188
web/components/web-view/date-selector.tsx
Normal file
188
web/components/web-view/date-selector.tsx
Normal file
@ -0,0 +1,188 @@
|
||||
// react
|
||||
import React, { useState, useEffect } from "react";
|
||||
|
||||
// icons
|
||||
import { ChevronDown } from "lucide-react";
|
||||
|
||||
// react date-picker
|
||||
import DatePicker, { ReactDatePickerProps } from "react-datepicker";
|
||||
|
||||
// components
|
||||
import { WebViewModal } from "./web-view-modal";
|
||||
import { SecondaryButton, PrimaryButton } from "components/ui";
|
||||
|
||||
// helpers
|
||||
import { renderDateFormat } from "helpers/date-time.helper";
|
||||
|
||||
interface Props extends ReactDatePickerProps {
|
||||
value: string | undefined;
|
||||
onChange: (value: any) => void;
|
||||
disabled?: boolean;
|
||||
renderAs?: "input" | "button";
|
||||
error?: any;
|
||||
noBorder?: boolean;
|
||||
}
|
||||
|
||||
export const DateSelector: React.FC<Props> = (props) => {
|
||||
const {
|
||||
value,
|
||||
onChange,
|
||||
disabled = false,
|
||||
renderAs = "button",
|
||||
noBorder = true,
|
||||
error,
|
||||
className,
|
||||
} = props;
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [selectedDate, setSelectedDate] = useState<Date | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (value) setSelectedDate(new Date(value));
|
||||
}, [value]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
|
||||
if (value) setSelectedDate(new Date(value));
|
||||
else setSelectedDate(new Date());
|
||||
}, [isOpen, value]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<WebViewModal
|
||||
isOpen={isOpen}
|
||||
modalTitle="Select due-date"
|
||||
onClose={() => {
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
<div className="w-full flex justify-center items-center">
|
||||
<DatePicker
|
||||
inline
|
||||
selected={selectedDate ? new Date(selectedDate) : null}
|
||||
className={`${
|
||||
renderAs === "input"
|
||||
? "block px-2 py-2 text-sm focus:outline-none"
|
||||
: renderAs === "button"
|
||||
? `px-2 py-1 text-xs shadow-sm ${
|
||||
disabled ? "" : "hover:bg-custom-background-80"
|
||||
} duration-300`
|
||||
: ""
|
||||
} ${error ? "border-red-500 bg-red-100" : ""} ${
|
||||
disabled ? "cursor-not-allowed" : "cursor-pointer"
|
||||
} ${
|
||||
noBorder ? "" : "border border-custom-border-200"
|
||||
} w-full rounded-md caret-transparent outline-none ${className}`}
|
||||
dateFormat="MMM dd, yyyy"
|
||||
{...props}
|
||||
onChange={(val) => {
|
||||
if (!val) setSelectedDate(null);
|
||||
else setSelectedDate(val);
|
||||
}}
|
||||
renderCustomHeader={({
|
||||
date,
|
||||
decreaseMonth,
|
||||
increaseMonth,
|
||||
prevMonthButtonDisabled,
|
||||
nextMonthButtonDisabled,
|
||||
}) => (
|
||||
<div className="flex justify-between px-5 text-lg font-medium">
|
||||
<h4>
|
||||
{date.toLocaleString("default", { month: "long" })} {date.getFullYear()}
|
||||
</h4>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={decreaseMonth}
|
||||
disabled={prevMonthButtonDisabled}
|
||||
className="text-custom-text-100"
|
||||
>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11.2285 14.5416L7.10352 10.4166C7.03407 10.3472 6.98546 10.2778 6.95768 10.2083C6.9299 10.1389 6.91602 10.0625 6.91602 9.97915C6.91602 9.89581 6.9299 9.81942 6.95768 9.74998C6.98546 9.68053 7.03407 9.61109 7.10352 9.54165L11.2493 5.39581C11.3743 5.27081 11.5237 5.20831 11.6973 5.20831C11.8709 5.20831 12.0202 5.27081 12.1452 5.39581C12.2702 5.52081 12.3292 5.67359 12.3223 5.85415C12.3153 6.0347 12.2493 6.18748 12.1243 6.31248L8.45768 9.97915L12.1452 13.6666C12.2702 13.7916 12.3327 13.9375 12.3327 14.1041C12.3327 14.2708 12.2702 14.4166 12.1452 14.5416C12.0202 14.6666 11.8674 14.7291 11.6868 14.7291C11.5063 14.7291 11.3535 14.6666 11.2285 14.5416Z"
|
||||
fill="#171717"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={increaseMonth}
|
||||
disabled={nextMonthButtonDisabled}
|
||||
className="text-custom-text-100"
|
||||
>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M7.37496 14.5417C7.26385 14.4028 7.20482 14.25 7.19788 14.0834C7.19093 13.9167 7.24996 13.7709 7.37496 13.6459L11.0416 9.97919L7.35413 6.29169C7.24302 6.18058 7.19093 6.03128 7.19788 5.84378C7.20482 5.65628 7.26385 5.50697 7.37496 5.39586C7.51385 5.25697 7.66316 5.191 7.82288 5.19794C7.9826 5.20489 8.12496 5.27086 8.24996 5.39586L12.3958 9.54169C12.4652 9.61114 12.5139 9.68058 12.5416 9.75003C12.5694 9.81947 12.5833 9.89586 12.5833 9.97919C12.5833 10.0625 12.5694 10.1389 12.5416 10.2084C12.5139 10.2778 12.4652 10.3473 12.3958 10.4167L8.27079 14.5417C8.14579 14.6667 7.99996 14.7257 7.83329 14.7188C7.66663 14.7118 7.51385 14.6528 7.37496 14.5417Z"
|
||||
fill="#171717"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<WebViewModal.Footer className="flex items-center gap-2">
|
||||
<SecondaryButton
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setIsOpen(false);
|
||||
onChange(null);
|
||||
setSelectedDate(null);
|
||||
}}
|
||||
className="w-full"
|
||||
>
|
||||
Clear
|
||||
</SecondaryButton>
|
||||
<PrimaryButton
|
||||
onClick={() => {
|
||||
if (!selectedDate) onChange(null);
|
||||
else onChange(renderDateFormat(selectedDate));
|
||||
setIsOpen(false);
|
||||
}}
|
||||
type="button"
|
||||
className="w-full"
|
||||
>
|
||||
Apply
|
||||
</PrimaryButton>
|
||||
</WebViewModal.Footer>
|
||||
</WebViewModal>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => setIsOpen(true)}
|
||||
className={
|
||||
"relative w-full px-2.5 py-0.5 text-base flex justify-between items-center gap-0.5 text-custom-text-200"
|
||||
}
|
||||
>
|
||||
{value ? (
|
||||
<div className="-my-0.5 flex items-center gap-2">
|
||||
{new Date(value).toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
"Due date"
|
||||
)}
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -13,6 +13,15 @@ export * from "./select-assignee";
|
||||
export * from "./select-estimate";
|
||||
export * from "./add-comment";
|
||||
export * from "./select-parent";
|
||||
export * from "./select-blocker";
|
||||
export * from "./select-blocked";
|
||||
export * from "./select-blocker-to";
|
||||
export * from "./select-blocked-by";
|
||||
export * from "./activity-message";
|
||||
export * from "./issues-select-bottom-sheet";
|
||||
export * from "./select-relates-to";
|
||||
export * from "./select-duplicate";
|
||||
export * from "./spinner";
|
||||
export * from "./select-module";
|
||||
export * from "./select-cycle";
|
||||
export * from "./confirm-delete";
|
||||
export * from "./commend-card";
|
||||
export * from "./date-selector";
|
||||
|
||||
@ -17,8 +17,7 @@ import issuesService from "services/issues.service";
|
||||
import useUser from "hooks/use-user";
|
||||
|
||||
// components
|
||||
import { CommentCard } from "components/issues/comment";
|
||||
import { Label, AddComment, ActivityMessage, ActivityIcon } from "components/web-view";
|
||||
import { Label, AddComment, ActivityMessage, ActivityIcon, CommentCard } from "components/web-view";
|
||||
|
||||
// helpers
|
||||
import { timeAgo } from "helpers/date-time.helper";
|
||||
@ -54,23 +53,32 @@ export const IssueActivity: React.FC<Props> = (props) => {
|
||||
: null
|
||||
);
|
||||
|
||||
const handleCommentUpdate = async (comment: any) => {
|
||||
if (!workspaceSlug || !projectId || !issueId) return;
|
||||
const handleCommentUpdate = async (comment: any, formData: any) => {
|
||||
if (!workspaceSlug || !projectId || !issueId || !allowed) return;
|
||||
|
||||
await issuesService
|
||||
.patchIssueComment(
|
||||
workspaceSlug as string,
|
||||
projectId as string,
|
||||
issueId as string,
|
||||
comment.id,
|
||||
comment,
|
||||
formData,
|
||||
user
|
||||
)
|
||||
.then(() => mutateIssueActivity());
|
||||
.then(() => mutateIssueActivity())
|
||||
.catch(() =>
|
||||
console.log(
|
||||
"toast",
|
||||
JSON.stringify({
|
||||
type: "error",
|
||||
message: "Comment could not be updated. Please try again.",
|
||||
})
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const handleCommentDelete = async (commentId: string) => {
|
||||
if (!workspaceSlug || !projectId || !issueId) return;
|
||||
if (!workspaceSlug || !projectId || !issueId || !allowed) return;
|
||||
|
||||
mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false);
|
||||
|
||||
@ -82,11 +90,20 @@ export const IssueActivity: React.FC<Props> = (props) => {
|
||||
commentId,
|
||||
user
|
||||
)
|
||||
.then(() => mutateIssueActivity());
|
||||
.then(() => mutateIssueActivity())
|
||||
.catch(() =>
|
||||
console.log(
|
||||
"toast",
|
||||
JSON.stringify({
|
||||
type: "error",
|
||||
message: "Comment could not be deleted. Please try again.",
|
||||
})
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const handleAddComment = async (formData: IIssueComment) => {
|
||||
if (!workspaceSlug || !issueDetails) return;
|
||||
if (!workspaceSlug || !issueDetails || !allowed) return;
|
||||
|
||||
await issuesService
|
||||
.createIssueComment(
|
||||
@ -104,7 +121,6 @@ export const IssueActivity: React.FC<Props> = (props) => {
|
||||
"toast",
|
||||
JSON.stringify({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Comment could not be posted. Please try again.",
|
||||
})
|
||||
)
|
||||
@ -114,7 +130,7 @@ export const IssueActivity: React.FC<Props> = (props) => {
|
||||
return (
|
||||
<div>
|
||||
<Label>Activity</Label>
|
||||
<div className="mt-1 space-y-[6px] p-2 border rounded-[4px]">
|
||||
<div className="mt-1 space-y-[6px] p-2 border border-custom-border-200 rounded-[4px]">
|
||||
<ul role="list" className="-mb-4">
|
||||
{issueActivities?.map((activityItem, index) => {
|
||||
// determines what type of action is performed
|
||||
@ -208,23 +224,31 @@ export const IssueActivity: React.FC<Props> = (props) => {
|
||||
comment={activityItem as any}
|
||||
onSubmit={handleCommentUpdate}
|
||||
handleCommentDeletion={handleCommentDelete}
|
||||
disabled={
|
||||
!allowed ||
|
||||
!issueDetails ||
|
||||
issueDetails.state === "closed" ||
|
||||
issueDetails.state === "archived"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<li>
|
||||
<div className="my-4">
|
||||
<AddComment
|
||||
onSubmit={handleAddComment}
|
||||
disabled={
|
||||
!allowed ||
|
||||
!issueDetails ||
|
||||
issueDetails.state === "closed" ||
|
||||
issueDetails.state === "archived"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
{allowed && (
|
||||
<li>
|
||||
<div className="my-4">
|
||||
<AddComment
|
||||
onSubmit={handleAddComment}
|
||||
disabled={
|
||||
!allowed ||
|
||||
!issueDetails ||
|
||||
issueDetails.state === "closed" ||
|
||||
issueDetails.state === "archived"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -21,8 +21,10 @@ import { ISSUE_ATTACHMENTS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys
|
||||
import { FileText, ChevronRight, X, Image as ImageIcon } from "lucide-react";
|
||||
|
||||
// components
|
||||
import { Label, WebViewModal } from "components/web-view";
|
||||
import { DeleteAttachmentModal } from "components/issues";
|
||||
import { Label, WebViewModal, DeleteConfirmation } from "components/web-view";
|
||||
|
||||
// helpers
|
||||
import { getFileName } from "helpers/attachment.helper";
|
||||
|
||||
// types
|
||||
import type { IIssueAttachment } from "types";
|
||||
@ -47,7 +49,7 @@ export const IssueAttachments: React.FC<Props> = (props) => {
|
||||
|
||||
const onDrop = useCallback(
|
||||
(acceptedFiles: File[]) => {
|
||||
if (!acceptedFiles[0] || !workspaceSlug) return;
|
||||
if (!acceptedFiles[0] || !workspaceSlug || !allowed) return;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("asset", acceptedFiles[0]);
|
||||
@ -97,9 +99,37 @@ export const IssueAttachments: React.FC<Props> = (props) => {
|
||||
);
|
||||
});
|
||||
},
|
||||
[issueId, projectId, workspaceSlug]
|
||||
[issueId, projectId, workspaceSlug, allowed]
|
||||
);
|
||||
|
||||
const handleDeletion = async (assetId: string) => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
mutate<IIssueAttachment[]>(
|
||||
ISSUE_ATTACHMENTS(issueId as string),
|
||||
(prevData) => (prevData ?? [])?.filter((p) => p.id !== assetId),
|
||||
false
|
||||
);
|
||||
|
||||
await issuesService
|
||||
.deleteIssueAttachment(
|
||||
workspaceSlug as string,
|
||||
projectId as string,
|
||||
issueId as string,
|
||||
assetId as string
|
||||
)
|
||||
.then(() => mutate(PROJECT_ISSUES_ACTIVITY(issueId as string)))
|
||||
.catch(() => {
|
||||
console.log(
|
||||
"toast",
|
||||
JSON.stringify({
|
||||
type: "error",
|
||||
message: "Something went wrong please try again.",
|
||||
})
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const { getRootProps, getInputProps } = useDropzone({
|
||||
onDrop,
|
||||
maxSize: 5 * 1024 * 1024,
|
||||
@ -120,10 +150,24 @@ export const IssueAttachments: React.FC<Props> = (props) => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<DeleteAttachmentModal
|
||||
<DeleteConfirmation
|
||||
title="Delete Attachment"
|
||||
content={
|
||||
<p className="text-sm text-custom-text-200">
|
||||
Are you sure you want to delete attachment-{" "}
|
||||
<span className="font-bold">
|
||||
{getFileName(deleteAttachment?.attributes?.name ?? "")}
|
||||
</span>
|
||||
? This attachment will be permanently removed. This action cannot be undone.
|
||||
</p>
|
||||
}
|
||||
isOpen={allowed && attachmentDeleteModal}
|
||||
setIsOpen={setAttachmentDeleteModal}
|
||||
data={deleteAttachment}
|
||||
onCancel={() => setAttachmentDeleteModal(false)}
|
||||
onConfirm={() => {
|
||||
if (!deleteAttachment) return;
|
||||
handleDeletion(deleteAttachment.id);
|
||||
setAttachmentDeleteModal(false);
|
||||
}}
|
||||
/>
|
||||
|
||||
<WebViewModal isOpen={isOpen} onClose={() => setIsOpen(false)} modalTitle="Insert file">
|
||||
@ -179,6 +223,7 @@ export const IssueAttachments: React.FC<Props> = (props) => {
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
disabled={!allowed}
|
||||
onClick={() => setIsOpen(true)}
|
||||
className="bg-custom-primary-100/10 border border-dotted rounded-[4px] border-custom-primary-100 text-center py-2 w-full text-custom-primary-100"
|
||||
>
|
||||
|
||||
@ -16,7 +16,7 @@ import issuesService from "services/issues.service";
|
||||
import { Link as LinkIcon, Plus, Pencil, X } from "lucide-react";
|
||||
|
||||
// components
|
||||
import { Label, WebViewModal, CreateUpdateLinkForm } from "components/web-view";
|
||||
import { Label, WebViewModal, CreateUpdateLinkForm, DeleteConfirmation } from "components/web-view";
|
||||
|
||||
// ui
|
||||
import { SecondaryButton } from "components/ui";
|
||||
@ -39,12 +39,13 @@ export const IssueLinks: React.FC<Props> = (props) => {
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [selectedLink, setSelectedLink] = useState<string | null>(null);
|
||||
const [deleteSelected, setDeleteSelected] = useState<string | null>(null);
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
const handleDeleteLink = async (linkId: string) => {
|
||||
if (!workspaceSlug || !projectId || !issueDetails) return;
|
||||
if (!workspaceSlug || !projectId || !issueDetails || !allowed) return;
|
||||
|
||||
const updatedLinks = issueDetails.issue_link.filter((l) => l.id !== linkId);
|
||||
|
||||
@ -56,7 +57,7 @@ export const IssueLinks: React.FC<Props> = (props) => {
|
||||
|
||||
await issuesService
|
||||
.deleteIssueLink(workspaceSlug as string, projectId as string, issueDetails.id, linkId)
|
||||
.then((res) => {
|
||||
.then(() => {
|
||||
mutate(ISSUE_DETAILS(issueDetails.id));
|
||||
})
|
||||
.catch((err) => {
|
||||
@ -85,6 +86,18 @@ export const IssueLinks: React.FC<Props> = (props) => {
|
||||
/>
|
||||
</WebViewModal>
|
||||
|
||||
<DeleteConfirmation
|
||||
title="Delete Link"
|
||||
content="Are you sure you want to delete this link?"
|
||||
isOpen={!!deleteSelected}
|
||||
onCancel={() => setDeleteSelected(null)}
|
||||
onConfirm={() => {
|
||||
if (!deleteSelected || !allowed) return;
|
||||
handleDeleteLink(deleteSelected);
|
||||
setDeleteSelected(null);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Label>Links</Label>
|
||||
<div className="mt-1 space-y-[6px]">
|
||||
{links?.map((link) => (
|
||||
@ -92,14 +105,18 @@ export const IssueLinks: React.FC<Props> = (props) => {
|
||||
key={link.id}
|
||||
className="px-3 border border-custom-border-200 rounded-[4px] py-2 flex justify-between items-center bg-custom-background-100"
|
||||
>
|
||||
<Link href={link.url}>
|
||||
<a target="_blank" className="text-custom-text-200 truncate">
|
||||
<span>
|
||||
<LinkIcon className="w-4 h-4 inline-block mr-1" />
|
||||
</span>
|
||||
<span>{link.title}</span>
|
||||
</a>
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
console.log("link", link.url);
|
||||
}}
|
||||
className="text-custom-text-200 truncate"
|
||||
>
|
||||
<span>
|
||||
<LinkIcon className="w-4 h-4 inline-block mr-1" />
|
||||
</span>
|
||||
<span>{link.title || link.metadata?.title || link.url}</span>
|
||||
</button>
|
||||
{allowed && (
|
||||
<div className="flex gap-2 items-center">
|
||||
<button
|
||||
@ -114,7 +131,7 @@ export const IssueLinks: React.FC<Props> = (props) => {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
handleDeleteLink(link.id);
|
||||
setDeleteSelected(link.id);
|
||||
}}
|
||||
>
|
||||
<X className="w-[18px] h-[18px] text-custom-text-400" />
|
||||
|
||||
@ -8,26 +8,35 @@ import { useRouter } from "next/router";
|
||||
import { mutate } from "swr";
|
||||
|
||||
// react hook forms
|
||||
import { Control, Controller, useWatch } from "react-hook-form";
|
||||
import { Controller, useFormContext } from "react-hook-form";
|
||||
|
||||
// services
|
||||
import issuesService from "services/issues.service";
|
||||
|
||||
// hooks
|
||||
import useUser from "hooks/use-user";
|
||||
|
||||
// fetch keys
|
||||
import { ISSUE_DETAILS } from "constants/fetch-keys";
|
||||
|
||||
// icons
|
||||
import { BlockedIcon, BlockerIcon } from "components/icons";
|
||||
import { ChevronDown, PlayIcon, User, X, CalendarDays, LayoutGrid, Users } from "lucide-react";
|
||||
|
||||
// hooks
|
||||
import { useProjectMyMembership } from "contexts/project-member.context";
|
||||
import useEstimateOption from "hooks/use-estimate-option";
|
||||
|
||||
// fetch keys
|
||||
import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
|
||||
|
||||
// icons
|
||||
import {
|
||||
ChevronDown,
|
||||
PlayIcon,
|
||||
User,
|
||||
X,
|
||||
CalendarDays,
|
||||
LayoutGrid,
|
||||
Users,
|
||||
CopyPlus,
|
||||
} from "lucide-react";
|
||||
import { RectangleGroupIcon } from "@heroicons/react/24/outline";
|
||||
import { BlockedIcon, BlockerIcon, RelatedIcon, ContrastIcon } from "components/icons";
|
||||
|
||||
// ui
|
||||
import { SecondaryButton, CustomDatePicker } from "components/ui";
|
||||
import { SecondaryButton } from "components/ui";
|
||||
|
||||
// components
|
||||
import {
|
||||
@ -38,63 +47,72 @@ import {
|
||||
EstimateSelect,
|
||||
ParentSelect,
|
||||
BlockerSelect,
|
||||
BlockedSelect,
|
||||
BlockedBySelect,
|
||||
RelatesSelect,
|
||||
DuplicateSelect,
|
||||
ModuleSelect,
|
||||
CycleSelect,
|
||||
DateSelector,
|
||||
} from "components/web-view";
|
||||
|
||||
// types
|
||||
import type { IIssue } from "types";
|
||||
|
||||
type Props = {
|
||||
control: Control<IIssue, any>;
|
||||
submitChanges: (data: Partial<IIssue>) => Promise<void>;
|
||||
};
|
||||
|
||||
export const IssuePropertiesDetail: React.FC<Props> = (props) => {
|
||||
const { control, submitChanges } = props;
|
||||
const { submitChanges } = props;
|
||||
|
||||
const blockerIssue =
|
||||
useWatch({
|
||||
control,
|
||||
name: "issue_relations",
|
||||
})?.filter((i) => i.relation_type === "blocked_by") || [];
|
||||
const { watch, control } = useFormContext<IIssue>();
|
||||
|
||||
const blockedIssue = useWatch({
|
||||
control,
|
||||
name: "related_issues",
|
||||
})?.filter((i) => i.relation_type === "blocked_by");
|
||||
const blockerIssues =
|
||||
watch("issue_relations")?.filter((i) => i.relation_type === "blocked_by") || [];
|
||||
|
||||
const startDate = useWatch({
|
||||
control,
|
||||
name: "start_date",
|
||||
});
|
||||
const blockedByIssues = watch("related_issues")?.filter((i) => i.relation_type === "blocked_by");
|
||||
|
||||
const relatedToIssueRelation = [
|
||||
...(watch("related_issues")?.filter((i) => i.relation_type === "relates_to") ?? []),
|
||||
...(watch("issue_relations") ?? [])
|
||||
?.filter((i) => i.relation_type === "relates_to")
|
||||
.map((i) => ({
|
||||
...i,
|
||||
issue_detail: i.issue_detail,
|
||||
related_issue: i.issue_detail?.id,
|
||||
})),
|
||||
];
|
||||
|
||||
const duplicateIssuesRelation = [
|
||||
...(watch("related_issues")?.filter((i) => i.relation_type === "duplicate") ?? []),
|
||||
...(watch("issue_relations") ?? [])
|
||||
?.filter((i) => i.relation_type === "duplicate")
|
||||
.map((i) => ({
|
||||
...i,
|
||||
issue_detail: i.issue_detail,
|
||||
related_issue: i.issue_detail?.id,
|
||||
})),
|
||||
];
|
||||
|
||||
const startDate = watch("start_date");
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, issueId } = router.query;
|
||||
|
||||
const isArchive = Boolean(router.query.archive);
|
||||
|
||||
const { memberRole } = useProjectMyMembership();
|
||||
|
||||
const { user } = useUser();
|
||||
|
||||
const [isViewAllOpen, setIsViewAllOpen] = useState(false);
|
||||
|
||||
const { isEstimateActive } = useEstimateOption();
|
||||
|
||||
const handleMutation = (data: any) => {
|
||||
mutate<IIssue>(
|
||||
ISSUE_DETAILS(issueId as string),
|
||||
(prevData) => {
|
||||
if (!prevData) return prevData;
|
||||
return {
|
||||
...prevData,
|
||||
...data,
|
||||
};
|
||||
},
|
||||
false
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="space-y-[6px]">
|
||||
<Label>Details</Label>
|
||||
<div className="mb-[6px]">
|
||||
<div>
|
||||
<div className="border border-custom-border-200 rounded-[4px] p-2 flex justify-between items-center">
|
||||
<div className="flex items-center gap-1">
|
||||
<LayoutGrid className="h-4 w-4 flex-shrink-0 text-custom-text-400" />
|
||||
@ -107,6 +125,7 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
|
||||
render={({ field: { value } }) => (
|
||||
<StateSelect
|
||||
value={value}
|
||||
disabled={isArchive || memberRole.isGuest || memberRole.isViewer}
|
||||
onChange={(val: string) => submitChanges({ state: val })}
|
||||
/>
|
||||
)}
|
||||
@ -114,9 +133,9 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-[6px]">
|
||||
<div>
|
||||
<div className="border border-custom-border-200 rounded-[4px] p-2 flex justify-between items-center">
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="flex items-center gap-1 text-custom-text-400">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
@ -126,7 +145,7 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
|
||||
>
|
||||
<path
|
||||
d="M13.5862 14.5239C13.3459 14.5239 13.1416 14.4398 12.9733 14.2715C12.805 14.1032 12.7209 13.8989 12.7209 13.6585V3.76429C12.7209 3.52391 12.805 3.31958 12.9733 3.15132C13.1416 2.98306 13.3459 2.89893 13.5862 2.89893C13.8266 2.89893 14.031 2.98306 14.1992 3.15132C14.3675 3.31958 14.4516 3.52391 14.4516 3.76429V13.6585C14.4516 13.8989 14.3675 14.1032 14.1992 14.2715C14.031 14.4398 13.8266 14.5239 13.5862 14.5239ZM5.1629 14.5239C5.04676 14.5239 4.93557 14.5018 4.82932 14.4576C4.72308 14.4133 4.63006 14.3513 4.55025 14.2715C4.47045 14.1917 4.40843 14.0986 4.36419 13.9922C4.31996 13.8858 4.29785 13.7746 4.29785 13.6585V11.2643C4.29785 11.0239 4.38198 10.8196 4.55025 10.6513C4.71851 10.4831 4.92283 10.3989 5.16322 10.3989C5.40359 10.3989 5.60791 10.4831 5.77618 10.6513C5.94445 10.8196 6.02859 11.0239 6.02859 11.2643V13.6585C6.02859 13.7746 6.00647 13.8858 5.96223 13.9922C5.91801 14.0986 5.85599 14.1917 5.77618 14.2715C5.69638 14.3513 5.60325 14.4133 5.49678 14.4576C5.39033 14.5018 5.27904 14.5239 5.1629 14.5239ZM9.37473 14.5239C9.13436 14.5239 8.93003 14.4398 8.76176 14.2715C8.59349 14.1032 8.50936 13.8989 8.50936 13.6585V7.5143C8.50936 7.27391 8.59349 7.06958 8.76176 6.90132C8.93003 6.73306 9.13436 6.64893 9.37473 6.64893C9.61511 6.64893 9.81943 6.73306 9.98771 6.90132C10.156 7.06958 10.2401 7.27391 10.2401 7.5143V13.6585C10.2401 13.8989 10.156 14.1032 9.98771 14.2715C9.81943 14.4398 9.61511 14.5239 9.37473 14.5239Z"
|
||||
fill="#A3A3A3"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
@ -139,6 +158,7 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
|
||||
render={({ field: { value } }) => (
|
||||
<PrioritySelect
|
||||
value={value}
|
||||
disabled={isArchive || memberRole.isGuest || memberRole.isViewer}
|
||||
onChange={(val) => submitChanges({ priority: val })}
|
||||
/>
|
||||
)}
|
||||
@ -146,7 +166,7 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-[6px]">
|
||||
<div>
|
||||
<div className="border border-custom-border-200 rounded-[4px] p-2 flex justify-between items-center">
|
||||
<div className="flex items-center gap-1">
|
||||
<Users className="h-4 w-4 flex-shrink-0 text-custom-text-400" />
|
||||
@ -159,7 +179,14 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
|
||||
render={({ field: { value } }) => (
|
||||
<AssigneeSelect
|
||||
value={value}
|
||||
onChange={(val: string) => submitChanges({ assignees_list: [val] })}
|
||||
disabled={isArchive || memberRole.isGuest || memberRole.isViewer}
|
||||
onChange={(val: string) => {
|
||||
const assignees = value?.includes(val)
|
||||
? value?.filter((i) => i !== val)
|
||||
: [...(value ?? []), val];
|
||||
|
||||
submitChanges({ assignees_list: assignees });
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
@ -169,7 +196,7 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
|
||||
{isViewAllOpen && (
|
||||
<>
|
||||
{isEstimateActive && (
|
||||
<div className="mb-[6px]">
|
||||
<div>
|
||||
<div className="border border-custom-border-200 rounded-[4px] p-2 flex justify-between items-center">
|
||||
<div className="flex items-center gap-1">
|
||||
<PlayIcon className="h-4 w-4 flex-shrink-0 -rotate-90 text-custom-text-400" />
|
||||
@ -182,6 +209,7 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
|
||||
render={({ field: { value } }) => (
|
||||
<EstimateSelect
|
||||
value={value}
|
||||
disabled={isArchive || memberRole.isGuest || memberRole.isViewer}
|
||||
onChange={(val) => submitChanges({ estimate_point: val })}
|
||||
/>
|
||||
)}
|
||||
@ -190,7 +218,7 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="mb-[6px]">
|
||||
<div>
|
||||
<div className="border border-custom-border-200 rounded-[4px] p-2 flex justify-between items-center">
|
||||
<div className="flex items-center gap-1">
|
||||
<User className="h-4 w-4 flex-shrink-0 text-custom-text-400" />
|
||||
@ -203,6 +231,7 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
|
||||
render={({ field: { value } }) => (
|
||||
<ParentSelect
|
||||
value={value}
|
||||
disabled={isArchive || memberRole.isGuest || memberRole.isViewer}
|
||||
onChange={(val) => submitChanges({ parent: val })}
|
||||
/>
|
||||
)}
|
||||
@ -210,7 +239,9 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-[6px]">
|
||||
|
||||
{/* blocker to / blocking */}
|
||||
<div>
|
||||
<div className="border border-custom-border-200 rounded-[4px] p-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center gap-1">
|
||||
@ -219,89 +250,62 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
|
||||
</div>
|
||||
<div>
|
||||
<BlockerSelect
|
||||
value={null}
|
||||
onChange={(val) => {
|
||||
if (!user || !workspaceSlug || !projectId || !issueId) return;
|
||||
|
||||
issuesService
|
||||
.createIssueRelation(
|
||||
workspaceSlug as string,
|
||||
projectId as string,
|
||||
issueId as string,
|
||||
user,
|
||||
{
|
||||
related_list: [
|
||||
...val.map((issue: any) => ({
|
||||
issue: issue.blocker_issue_detail.id,
|
||||
relation_type: "blocked_by" as const,
|
||||
related_issue: issueId as string,
|
||||
related_issue_detail: issue.blocker_issue_detail,
|
||||
})),
|
||||
],
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
handleMutation({
|
||||
issue_relations: [
|
||||
...blockerIssue,
|
||||
...(response ?? []).map((i: any) => ({
|
||||
id: i.id,
|
||||
relation_type: i.relation_type,
|
||||
issue_detail: i.related_issue_detail,
|
||||
issue: i.related_issue,
|
||||
})),
|
||||
],
|
||||
});
|
||||
});
|
||||
}}
|
||||
disabled={isArchive || memberRole.isGuest || memberRole.isViewer}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{blockerIssue &&
|
||||
blockerIssue.map((issue) => (
|
||||
{blockerIssues &&
|
||||
blockerIssues.map((relation) => (
|
||||
<div
|
||||
key={issue.issue_detail?.id}
|
||||
key={relation.issue_detail?.id}
|
||||
className="group inline-flex mr-1 cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs text-yellow-500 duration-300 hover:border-yellow-500/20 hover:bg-yellow-500/20"
|
||||
>
|
||||
<a
|
||||
href={`/${workspaceSlug}/projects/${issue.issue_detail?.project_detail.id}/issues/${issue.issue_detail?.id}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
<span
|
||||
onClick={() =>
|
||||
console.log(
|
||||
"issue",
|
||||
JSON.stringify({
|
||||
issue_id: relation.issue_detail?.id,
|
||||
project_id: relation.issue_detail?.project_detail.id,
|
||||
})
|
||||
)
|
||||
}
|
||||
className="flex items-center gap-1"
|
||||
>
|
||||
<BlockerIcon height={10} width={10} />
|
||||
{`${issue.issue_detail?.project_detail.identifier}-${issue.issue_detail?.sequence_id}`}
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
className="duration-300"
|
||||
onClick={() => {
|
||||
const updatedBlockers = blockerIssue.filter(
|
||||
(i) => i.issue_detail?.id !== issue.issue_detail?.id
|
||||
);
|
||||
{`${relation.issue_detail?.project_detail.identifier}-${relation.issue_detail?.sequence_id}`}
|
||||
</span>
|
||||
{!isArchive && (
|
||||
<button
|
||||
type="button"
|
||||
className="duration-300"
|
||||
onClick={() => {
|
||||
if (memberRole.isGuest || memberRole.isViewer || !user) return;
|
||||
|
||||
if (!user) return;
|
||||
|
||||
issuesService.deleteIssueRelation(
|
||||
workspaceSlug as string,
|
||||
projectId as string,
|
||||
issueId as string,
|
||||
issue.id,
|
||||
user
|
||||
);
|
||||
|
||||
handleMutation({
|
||||
issue_relations: updatedBlockers,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<X className="h-2 w-2" />
|
||||
</button>
|
||||
issuesService
|
||||
.deleteIssueRelation(
|
||||
workspaceSlug as string,
|
||||
projectId as string,
|
||||
relation.issue,
|
||||
relation.id,
|
||||
user
|
||||
)
|
||||
.then(() => {
|
||||
mutate(ISSUE_DETAILS(issueId as string));
|
||||
mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
|
||||
});
|
||||
}}
|
||||
>
|
||||
<X className="h-2 w-2" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-[6px]">
|
||||
|
||||
{/* blocked by */}
|
||||
<div>
|
||||
<div className="border border-custom-border-200 rounded-[4px] p-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center gap-1">
|
||||
@ -309,89 +313,190 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
|
||||
<span className="text-sm text-custom-text-400">Blocked by</span>
|
||||
</div>
|
||||
<div>
|
||||
<BlockedSelect
|
||||
value={null}
|
||||
onChange={(val) => {
|
||||
if (!user || !workspaceSlug || !projectId || !issueId) return;
|
||||
|
||||
issuesService
|
||||
.createIssueRelation(
|
||||
workspaceSlug as string,
|
||||
projectId as string,
|
||||
issueId as string,
|
||||
user,
|
||||
{
|
||||
related_list: [
|
||||
...val.map((issue: any) => ({
|
||||
issue: issue.blocked_issue_detail.id,
|
||||
relation_type: "blocked_by" as const,
|
||||
related_issue: issueId as string,
|
||||
related_issue_detail: issue.blocked_issue_detail,
|
||||
})),
|
||||
],
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
handleMutation({
|
||||
related_issues: [
|
||||
...blockedIssue,
|
||||
...(response ?? []).map((i: any) => ({
|
||||
id: i.id,
|
||||
relation_type: i.relation_type,
|
||||
issue_detail: i.related_issue_detail,
|
||||
issue: i.related_issue,
|
||||
})),
|
||||
],
|
||||
});
|
||||
});
|
||||
}}
|
||||
<BlockedBySelect
|
||||
disabled={isArchive || memberRole.isGuest || memberRole.isViewer}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{blockedIssue &&
|
||||
blockedIssue.map((issue) => (
|
||||
{blockedByIssues &&
|
||||
blockedByIssues.map((relation) => (
|
||||
<div
|
||||
key={issue.issue_detail?.id}
|
||||
key={relation.issue_detail?.id}
|
||||
className="group inline-flex mr-1 cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs text-red-500 duration-300 hover:border-red-500/20 hover:bg-red-500/20"
|
||||
>
|
||||
<a
|
||||
href={`/${workspaceSlug}/projects/${issue.issue_detail?.project_detail.id}/issues/${issue.issue_detail?.id}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
<span
|
||||
onClick={() =>
|
||||
console.log(
|
||||
"issue",
|
||||
JSON.stringify({
|
||||
issue_id: relation.issue_detail?.id,
|
||||
project_id: relation.issue_detail?.project_detail.id,
|
||||
})
|
||||
)
|
||||
}
|
||||
className="flex items-center gap-1"
|
||||
>
|
||||
<BlockedIcon height={10} width={10} />
|
||||
{`${issue?.issue_detail?.project_detail?.identifier}-${issue?.issue_detail?.sequence_id}`}
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
className="duration-300"
|
||||
onClick={() => {
|
||||
const updatedBlocked = blockedIssue.filter((i) => i?.id !== issue?.id);
|
||||
{`${relation?.issue_detail?.project_detail?.identifier}-${relation?.issue_detail?.sequence_id}`}
|
||||
</span>
|
||||
{!isArchive && !(memberRole.isGuest || memberRole.isViewer) && (
|
||||
<button
|
||||
type="button"
|
||||
className="duration-300"
|
||||
onClick={() => {
|
||||
if (memberRole.isGuest || memberRole.isViewer || !user) return;
|
||||
|
||||
if (!user) return;
|
||||
|
||||
issuesService.deleteIssueRelation(
|
||||
workspaceSlug as string,
|
||||
projectId as string,
|
||||
issueId as string,
|
||||
issue.id,
|
||||
user
|
||||
);
|
||||
|
||||
handleMutation({
|
||||
related_issues: updatedBlocked,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<X className="h-2 w-2" />
|
||||
</button>
|
||||
issuesService
|
||||
.deleteIssueRelation(
|
||||
workspaceSlug as string,
|
||||
projectId as string,
|
||||
issueId as string,
|
||||
relation.id,
|
||||
user
|
||||
)
|
||||
.then(() => {
|
||||
mutate(ISSUE_DETAILS(issueId as string));
|
||||
mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
|
||||
});
|
||||
}}
|
||||
>
|
||||
<X className="h-2 w-2" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-[6px]">
|
||||
{/* duplicate */}
|
||||
<div>
|
||||
<div className="border border-custom-border-200 rounded-[4px] p-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center gap-1">
|
||||
<CopyPlus height={16} width={16} className="text-custom-text-400" />
|
||||
<span className="text-sm text-custom-text-400">Duplicate</span>
|
||||
</div>
|
||||
<div>
|
||||
<DuplicateSelect
|
||||
disabled={isArchive || memberRole.isGuest || memberRole.isViewer}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{duplicateIssuesRelation &&
|
||||
duplicateIssuesRelation.map((relation) => (
|
||||
<div
|
||||
key={relation.issue_detail?.id}
|
||||
className="group inline-flex mr-1 cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs text-red-500 duration-300 hover:border-red-500/20 hover:bg-red-500/20"
|
||||
>
|
||||
<span
|
||||
onClick={() =>
|
||||
console.log(
|
||||
"issue",
|
||||
JSON.stringify({
|
||||
issue_id: relation.issue_detail?.id,
|
||||
project_id: relation.issue_detail?.project_detail.id,
|
||||
})
|
||||
)
|
||||
}
|
||||
className="flex items-center gap-1"
|
||||
>
|
||||
<CopyPlus height={10} width={10} />
|
||||
{`${relation?.issue_detail?.project_detail?.identifier}-${relation?.issue_detail?.sequence_id}`}
|
||||
</span>
|
||||
{!isArchive && !(memberRole.isGuest || memberRole.isViewer) && (
|
||||
<button
|
||||
type="button"
|
||||
className="duration-300"
|
||||
onClick={() => {
|
||||
if (memberRole.isGuest || memberRole.isViewer || !user) return;
|
||||
|
||||
issuesService
|
||||
.deleteIssueRelation(
|
||||
workspaceSlug as string,
|
||||
projectId as string,
|
||||
issueId as string,
|
||||
relation.id,
|
||||
user
|
||||
)
|
||||
.then(() => {
|
||||
mutate(ISSUE_DETAILS(issueId as string));
|
||||
mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
|
||||
});
|
||||
}}
|
||||
>
|
||||
<X className="h-2 w-2" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* relates to */}
|
||||
<div>
|
||||
<div className="border border-custom-border-200 rounded-[4px] p-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center gap-1">
|
||||
<RelatedIcon height={16} width={16} color="rgb(var(--color-text-400))" />
|
||||
<span className="text-sm text-custom-text-400">Relates To</span>
|
||||
</div>
|
||||
<div>
|
||||
<RelatesSelect
|
||||
disabled={isArchive || memberRole.isGuest || memberRole.isViewer}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{relatedToIssueRelation &&
|
||||
relatedToIssueRelation.map((relation) => (
|
||||
<div
|
||||
key={relation.issue_detail?.id}
|
||||
className="group inline-flex mr-1 cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs text-red-500 duration-300 hover:border-red-500/20 hover:bg-red-500/20"
|
||||
>
|
||||
<span
|
||||
onClick={() =>
|
||||
console.log(
|
||||
"issue",
|
||||
JSON.stringify({
|
||||
issue_id: relation.issue_detail?.id,
|
||||
project_id: relation.issue_detail?.project_detail.id,
|
||||
})
|
||||
)
|
||||
}
|
||||
className="flex items-center gap-1"
|
||||
>
|
||||
<RelatedIcon height={10} width={10} />
|
||||
{`${relation?.issue_detail?.project_detail?.identifier}-${relation?.issue_detail?.sequence_id}`}
|
||||
</span>
|
||||
{!isArchive && !(memberRole.isGuest || memberRole.isViewer) && (
|
||||
<button
|
||||
type="button"
|
||||
className="duration-300"
|
||||
onClick={() => {
|
||||
if (memberRole.isGuest || memberRole.isViewer || !user) return;
|
||||
|
||||
issuesService
|
||||
.deleteIssueRelation(
|
||||
workspaceSlug as string,
|
||||
projectId as string,
|
||||
issueId as string,
|
||||
relation.id,
|
||||
user
|
||||
)
|
||||
.then(() => {
|
||||
mutate(ISSUE_DETAILS(issueId as string));
|
||||
mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
|
||||
});
|
||||
}}
|
||||
>
|
||||
<X className="h-2 w-2" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="border border-custom-border-200 rounded-[4px] p-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center gap-1">
|
||||
@ -403,10 +508,11 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
|
||||
control={control}
|
||||
name="target_date"
|
||||
render={({ field: { value } }) => (
|
||||
<CustomDatePicker
|
||||
placeholder="Due date"
|
||||
value={value}
|
||||
<DateSelector
|
||||
placeholderText="Due date"
|
||||
value={value ?? undefined}
|
||||
wrapperClassName="w-full"
|
||||
disabled={isArchive || memberRole.isGuest || memberRole.isViewer}
|
||||
onChange={(val) =>
|
||||
submitChanges({
|
||||
target_date: val,
|
||||
@ -421,9 +527,46 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="border border-custom-border-200 rounded-[4px] p-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center gap-1">
|
||||
<RectangleGroupIcon className="h-4 w-4 flex-shrink-0 text-custom-text-400" />
|
||||
<span className="text-sm text-custom-text-400">Module</span>
|
||||
</div>
|
||||
<div>
|
||||
<ModuleSelect
|
||||
value={watch("issue_module")}
|
||||
disabled={isArchive || memberRole.isGuest || memberRole.isViewer}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="border border-custom-border-200 rounded-[4px] p-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center gap-1">
|
||||
<ContrastIcon
|
||||
color="rgba(var(--color-text-400))"
|
||||
className="h-4 w-4 flex-shrink-0"
|
||||
/>
|
||||
<span className="text-sm text-custom-text-400">Cycle</span>
|
||||
</div>
|
||||
<div>
|
||||
<CycleSelect
|
||||
value={watch("issue_cycle")}
|
||||
disabled={isArchive || memberRole.isGuest || memberRole.isViewer}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="mb-[6px]">
|
||||
<div>
|
||||
<SecondaryButton
|
||||
type="button"
|
||||
onClick={() => setIsViewAllOpen((prev) => !prev)}
|
||||
|
||||
@ -138,6 +138,7 @@ export const IssueWebViewForm: React.FC<Props> = (props) => {
|
||||
}
|
||||
noBorder={!isAllowed}
|
||||
onChange={(description: Object, description_html: string) => {
|
||||
if (!isAllowed) return;
|
||||
setShowAlert(true);
|
||||
setIsSubmitting("submitting");
|
||||
onChange(description_html);
|
||||
|
||||
188
web/components/web-view/issues-select-bottom-sheet.tsx
Normal file
188
web/components/web-view/issues-select-bottom-sheet.tsx
Normal file
@ -0,0 +1,188 @@
|
||||
// react
|
||||
import React, { useState, useEffect } from "react";
|
||||
|
||||
// next
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
// hooks
|
||||
import useUser from "hooks/use-user";
|
||||
import useDebounce from "hooks/use-debounce";
|
||||
|
||||
// services
|
||||
import projectService from "services/project.service";
|
||||
|
||||
// components
|
||||
import { WebViewModal } from "components/web-view";
|
||||
import { LayerDiagonalIcon } from "components/icons";
|
||||
import { Loader, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui";
|
||||
|
||||
// types
|
||||
import { ISearchIssueResponse, TProjectIssuesSearchParams } from "types";
|
||||
|
||||
type IssuesSelectBottomSheetProps = {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: (data: ISearchIssueResponse[]) => Promise<void>;
|
||||
searchParams: Partial<TProjectIssuesSearchParams>;
|
||||
singleSelect?: boolean;
|
||||
};
|
||||
|
||||
export const IssuesSelectBottomSheet: React.FC<IssuesSelectBottomSheetProps> = (props) => {
|
||||
const { isOpen, onClose, onSubmit, searchParams, singleSelect = false } = props;
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, issueId } = router.query;
|
||||
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [issues, setIssues] = useState<ISearchIssueResponse[]>([]);
|
||||
const [isSearching, setIsSearching] = useState(false);
|
||||
const [selectedIssues, setSelectedIssues] = useState<ISearchIssueResponse[]>([]);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(false);
|
||||
|
||||
const debouncedSearchTerm: string = useDebounce(searchTerm, 500);
|
||||
|
||||
const { user } = useUser();
|
||||
|
||||
const handleClose = () => {
|
||||
onClose();
|
||||
setSearchTerm("");
|
||||
setSelectedIssues([]);
|
||||
setIsWorkspaceLevel(false);
|
||||
};
|
||||
|
||||
const handleSelect = async (data: ISearchIssueResponse[]) => {
|
||||
if (!user || !workspaceSlug || !projectId || !issueId) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
|
||||
await onSubmit(data).finally(() => {
|
||||
setIsSubmitting(false);
|
||||
});
|
||||
|
||||
handleClose();
|
||||
|
||||
console.log(
|
||||
"toast",
|
||||
JSON.stringify({
|
||||
type: "success",
|
||||
message: `Issue${data.length > 1 ? "s" : ""} added successfully.`,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen || !workspaceSlug || !projectId || !issueId) return;
|
||||
|
||||
setIsSearching(true);
|
||||
|
||||
projectService
|
||||
.projectIssuesSearch(workspaceSlug as string, projectId as string, {
|
||||
search: debouncedSearchTerm,
|
||||
...searchParams,
|
||||
issue_id: issueId.toString(),
|
||||
workspace_search: isWorkspaceLevel,
|
||||
})
|
||||
.then((res) => setIssues(res))
|
||||
.finally(() => setIsSearching(false));
|
||||
}, [
|
||||
debouncedSearchTerm,
|
||||
isOpen,
|
||||
isWorkspaceLevel,
|
||||
issueId,
|
||||
projectId,
|
||||
workspaceSlug,
|
||||
searchParams,
|
||||
]);
|
||||
|
||||
return (
|
||||
<WebViewModal isOpen={isOpen} onClose={handleClose} modalTitle="Select issue">
|
||||
{!isSearching && issues.length === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
|
||||
<div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
|
||||
<LayerDiagonalIcon height="52" width="52" />
|
||||
<h3 className="text-custom-text-200">
|
||||
No issues found. Create a new issue with{" "}
|
||||
<pre className="inline rounded bg-custom-background-80 px-2 py-1 text-sm">C</pre>.
|
||||
</h3>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={`flex-shrink-0 flex items-center gap-1 text-xs pb-3 cursor-pointer ${
|
||||
isWorkspaceLevel ? "text-custom-text-100" : "text-custom-text-200"
|
||||
}`}
|
||||
>
|
||||
<ToggleSwitch
|
||||
value={isWorkspaceLevel}
|
||||
onChange={() => setIsWorkspaceLevel((prevData) => !prevData)}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsWorkspaceLevel((prevData) => !prevData)}
|
||||
className="flex-shrink-0"
|
||||
>
|
||||
Workspace Level
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isSearching && (
|
||||
<Loader className="space-y-3 p-3">
|
||||
<Loader.Item height="40px" />
|
||||
<Loader.Item height="40px" />
|
||||
<Loader.Item height="40px" />
|
||||
<Loader.Item height="40px" />
|
||||
</Loader>
|
||||
)}
|
||||
|
||||
{!isSearching && (
|
||||
<WebViewModal.Options
|
||||
options={issues.map((issue) => ({
|
||||
value: issue.id,
|
||||
label: (
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: issue.state__color,
|
||||
}}
|
||||
/>
|
||||
<span className="flex-shrink-0 text-xs">
|
||||
{issue.project__identifier}-{issue.sequence_id}
|
||||
</span>
|
||||
{issue.name}
|
||||
</div>
|
||||
),
|
||||
checked: selectedIssues.some((i) => i.id === issue.id),
|
||||
onClick() {
|
||||
if (singleSelect) {
|
||||
handleSelect([issue]);
|
||||
handleClose();
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedIssues.some((i) => i.id === issue.id)) {
|
||||
setSelectedIssues(selectedIssues.filter((i) => i.id !== issue.id));
|
||||
} else {
|
||||
setSelectedIssues([...selectedIssues, issue]);
|
||||
}
|
||||
},
|
||||
}))}
|
||||
/>
|
||||
)}
|
||||
|
||||
{selectedIssues.length > 0 && (
|
||||
<WebViewModal.Footer className="flex items-center justify-end gap-2">
|
||||
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
|
||||
<PrimaryButton
|
||||
onClick={() => {
|
||||
handleSelect(selectedIssues);
|
||||
}}
|
||||
loading={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? "Adding..." : "Add selected issues"}
|
||||
</PrimaryButton>
|
||||
</WebViewModal.Footer>
|
||||
)}
|
||||
</WebViewModal>
|
||||
);
|
||||
};
|
||||
@ -47,7 +47,7 @@ export const AssigneeSelect: React.FC<Props> = (props) => {
|
||||
<>
|
||||
<WebViewModal
|
||||
isOpen={isOpen}
|
||||
modalTitle="Select state"
|
||||
modalTitle="Select assignees"
|
||||
onClose={() => {
|
||||
setIsOpen(false);
|
||||
}}
|
||||
@ -74,20 +74,20 @@ export const AssigneeSelect: React.FC<Props> = (props) => {
|
||||
disabled={disabled}
|
||||
onClick={() => setIsOpen(true)}
|
||||
className={
|
||||
"relative w-full px-2.5 py-0.5 text-base flex justify-between items-center gap-0.5 text-custom-text-100"
|
||||
"relative w-full px-2.5 py-0.5 text-base flex justify-between items-center gap-0.5"
|
||||
}
|
||||
>
|
||||
{value && value.length > 0 && Array.isArray(value) ? (
|
||||
<div className="-my-0.5 flex items-center gap-2">
|
||||
<Avatar user={selectedAssignees?.[0].member} />
|
||||
<span className="text-custom-text-100 text-xs">
|
||||
<span className="text-custom-text-200 text-xs">
|
||||
{selectedAssignees?.length} Assignees
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
"No assignees"
|
||||
<span className="text-custom-text-200">No assignees</span>
|
||||
)}
|
||||
<ChevronDown className="w-5 h-5" />
|
||||
<ChevronDown className="w-4 h-4 text-custom-text-200" />
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
|
||||
127
web/components/web-view/select-blocked-by.tsx
Normal file
127
web/components/web-view/select-blocked-by.tsx
Normal file
@ -0,0 +1,127 @@
|
||||
// react
|
||||
import React, { useState } from "react";
|
||||
|
||||
// next
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
// swr
|
||||
import { mutate } from "swr";
|
||||
|
||||
// react hook form
|
||||
import { useFormContext } from "react-hook-form";
|
||||
|
||||
// services
|
||||
import issuesService from "services/issues.service";
|
||||
|
||||
// hooks
|
||||
import useUser from "hooks/use-user";
|
||||
|
||||
// fetch keys
|
||||
import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
|
||||
|
||||
// icons
|
||||
import { ChevronDown } from "lucide-react";
|
||||
|
||||
// components
|
||||
import { IssuesSelectBottomSheet } from "components/web-view";
|
||||
|
||||
// types
|
||||
import type { IIssue, BlockeIssueDetail, ISearchIssueResponse } from "types";
|
||||
|
||||
type Props = {
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
export const BlockedBySelect: React.FC<Props> = (props) => {
|
||||
const { disabled = false } = props;
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, issueId } = router.query;
|
||||
|
||||
const { watch } = useFormContext<IIssue>();
|
||||
|
||||
const { user } = useUser();
|
||||
|
||||
const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
|
||||
|
||||
const onSubmit = async (data: ISearchIssueResponse[]) => {
|
||||
if (!workspaceSlug || !projectId || !issueId || !user || disabled) return;
|
||||
|
||||
if (data.length === 0)
|
||||
return console.log(
|
||||
"toast",
|
||||
JSON.stringify({
|
||||
type: "error",
|
||||
message: "Please select at least one issue.",
|
||||
})
|
||||
);
|
||||
|
||||
const selectedIssues: { blocked_issue_detail: BlockeIssueDetail }[] = data.map((i) => ({
|
||||
blocked_issue_detail: {
|
||||
id: i.id,
|
||||
name: i.name,
|
||||
sequence_id: i.sequence_id,
|
||||
project_detail: {
|
||||
id: i.project_id,
|
||||
identifier: i.project__identifier,
|
||||
name: i.project__name,
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
const relatedIssues = watch("related_issues");
|
||||
|
||||
await issuesService
|
||||
.createIssueRelation(
|
||||
workspaceSlug.toString(),
|
||||
projectId.toString(),
|
||||
issueId.toString(),
|
||||
user,
|
||||
{
|
||||
related_list: [
|
||||
...selectedIssues.map((issue) => ({
|
||||
issue: issueId as string,
|
||||
relation_type: "blocked_by" as const,
|
||||
issue_detail: issue.blocked_issue_detail,
|
||||
related_issue: issue.blocked_issue_detail.id,
|
||||
})),
|
||||
],
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
mutate(ISSUE_DETAILS(issueId as string), (prevData) => {
|
||||
if (!prevData) return prevData;
|
||||
return {
|
||||
...prevData,
|
||||
related_issues: [...relatedIssues, ...response],
|
||||
};
|
||||
});
|
||||
mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
|
||||
});
|
||||
|
||||
setIsBlockedModalOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<IssuesSelectBottomSheet
|
||||
isOpen={isBlockedModalOpen}
|
||||
onSubmit={onSubmit}
|
||||
onClose={() => setIsBlockedModalOpen(false)}
|
||||
searchParams={{ issue_relation: true }}
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => setIsBlockedModalOpen(true)}
|
||||
className={
|
||||
"relative w-full px-2.5 py-0.5 text-base flex justify-between items-center gap-0.5 text-custom-text-100"
|
||||
}
|
||||
>
|
||||
<span className="text-custom-text-200">Select issue</span>
|
||||
<ChevronDown className="w-4 h-4 text-custom-text-200" />
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -1,87 +0,0 @@
|
||||
// react
|
||||
import React, { useState } from "react";
|
||||
|
||||
// next
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
|
||||
// icons
|
||||
import { ChevronDown } from "lucide-react";
|
||||
|
||||
// components
|
||||
import { ExistingIssuesListModal } from "components/core";
|
||||
|
||||
// types
|
||||
import { BlockeIssueDetail, ISearchIssueResponse } from "types";
|
||||
|
||||
type Props = {
|
||||
value: any;
|
||||
onChange: (value: any) => void;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
export const BlockedSelect: React.FC<Props> = (props) => {
|
||||
const { value, onChange, disabled = false } = props;
|
||||
|
||||
const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
const { issueId } = router.query;
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const onSubmit = async (data: ISearchIssueResponse[]) => {
|
||||
if (data.length === 0) {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Please select at least one issue.",
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const selectedIssues: { blocker_issue_detail: BlockeIssueDetail }[] = data.map((i) => ({
|
||||
blocker_issue_detail: {
|
||||
id: i.id,
|
||||
name: i.name,
|
||||
sequence_id: i.sequence_id,
|
||||
project_detail: {
|
||||
id: i.project_id,
|
||||
identifier: i.project__identifier,
|
||||
name: i.project__name,
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
onChange([...(value || []), ...selectedIssues]);
|
||||
|
||||
setIsBlockedModalOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ExistingIssuesListModal
|
||||
isOpen={isBlockedModalOpen}
|
||||
handleClose={() => setIsBlockedModalOpen(false)}
|
||||
searchParams={{ issue_relation: true, issue_id: issueId!.toString() }}
|
||||
handleOnSubmit={onSubmit}
|
||||
workspaceLevelToggle
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => setIsBlockedModalOpen(true)}
|
||||
className={
|
||||
"relative w-full px-2.5 py-0.5 text-base flex justify-between items-center gap-0.5 text-custom-text-100"
|
||||
}
|
||||
>
|
||||
<span className="text-custom-text-200">Select issue</span>
|
||||
<ChevronDown className="w-4 h-4 text-custom-text-200" />
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
133
web/components/web-view/select-blocker-to.tsx
Normal file
133
web/components/web-view/select-blocker-to.tsx
Normal file
@ -0,0 +1,133 @@
|
||||
// react
|
||||
import React, { useState } from "react";
|
||||
|
||||
// next
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
// swr
|
||||
import { mutate } from "swr";
|
||||
|
||||
// react hook form
|
||||
import { useFormContext } from "react-hook-form";
|
||||
|
||||
// services
|
||||
import issuesService from "services/issues.service";
|
||||
|
||||
// hooks
|
||||
import useUser from "hooks/use-user";
|
||||
|
||||
// fetch keys
|
||||
import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
|
||||
|
||||
// icons
|
||||
import { ChevronDown } from "lucide-react";
|
||||
|
||||
// components
|
||||
import { IssuesSelectBottomSheet } from "components/web-view";
|
||||
|
||||
// types
|
||||
import { BlockeIssueDetail, ISearchIssueResponse, IIssue } from "types";
|
||||
|
||||
type Props = {
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
export const BlockerSelect: React.FC<Props> = (props) => {
|
||||
const { disabled = false } = props;
|
||||
|
||||
const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, issueId } = router.query;
|
||||
|
||||
const { watch } = useFormContext<IIssue>();
|
||||
|
||||
const { user } = useUser();
|
||||
|
||||
const onSubmit = async (data: ISearchIssueResponse[]) => {
|
||||
if (disabled) return;
|
||||
|
||||
if (data.length === 0)
|
||||
return console.log(
|
||||
"toast",
|
||||
JSON.stringify({
|
||||
type: "error",
|
||||
message: "Please select at least one issue.",
|
||||
})
|
||||
);
|
||||
|
||||
const selectedIssues: { blocker_issue_detail: BlockeIssueDetail }[] = data.map((i) => ({
|
||||
blocker_issue_detail: {
|
||||
id: i.id,
|
||||
name: i.name,
|
||||
sequence_id: i.sequence_id,
|
||||
project_detail: {
|
||||
id: i.project_id,
|
||||
identifier: i.project__identifier,
|
||||
name: i.project__name,
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
if (!workspaceSlug || !projectId || !issueId || !user) return;
|
||||
|
||||
const blockerIssue =
|
||||
watch("issue_relations")?.filter((i) => i.relation_type === "blocked_by") || [];
|
||||
|
||||
issuesService
|
||||
.createIssueRelation(workspaceSlug as string, projectId as string, issueId as string, user, {
|
||||
related_list: [
|
||||
...selectedIssues.map((issue) => ({
|
||||
issue: issue.blocker_issue_detail.id,
|
||||
relation_type: "blocked_by" as const,
|
||||
related_issue: issueId as string,
|
||||
related_issue_detail: issue.blocker_issue_detail,
|
||||
})),
|
||||
],
|
||||
relation: "blocking",
|
||||
})
|
||||
.then((response) => {
|
||||
mutate(ISSUE_DETAILS(issueId as string), (prevData) => {
|
||||
if (!prevData) return prevData;
|
||||
return {
|
||||
...prevData,
|
||||
issue_relations: [
|
||||
...blockerIssue,
|
||||
...(response ?? []).map((i: any) => ({
|
||||
id: i.id,
|
||||
relation_type: i.relation_type,
|
||||
issue_detail: i.issue_detail,
|
||||
issue: i.related_issue,
|
||||
})),
|
||||
],
|
||||
};
|
||||
});
|
||||
mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
|
||||
});
|
||||
|
||||
setIsBlockerModalOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<IssuesSelectBottomSheet
|
||||
isOpen={isBlockerModalOpen}
|
||||
onClose={() => setIsBlockerModalOpen(false)}
|
||||
onSubmit={onSubmit}
|
||||
searchParams={{ issue_relation: true }}
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => setIsBlockerModalOpen(true)}
|
||||
className={
|
||||
"relative w-full px-2.5 py-0.5 text-base flex justify-between items-center gap-0.5"
|
||||
}
|
||||
>
|
||||
<span className="text-custom-text-200">Select issue</span>
|
||||
<ChevronDown className="w-4 h-4 text-custom-text-200" />
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -1,87 +0,0 @@
|
||||
// react
|
||||
import React, { useState } from "react";
|
||||
|
||||
// next
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
|
||||
// icons
|
||||
import { ChevronDown } from "lucide-react";
|
||||
|
||||
// components
|
||||
import { ExistingIssuesListModal } from "components/core";
|
||||
|
||||
// types
|
||||
import { BlockeIssueDetail, ISearchIssueResponse } from "types";
|
||||
|
||||
type Props = {
|
||||
value: any;
|
||||
onChange: (value: any) => void;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
export const BlockerSelect: React.FC<Props> = (props) => {
|
||||
const { value, onChange, disabled = false } = props;
|
||||
|
||||
const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
const { issueId } = router.query;
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const onSubmit = async (data: ISearchIssueResponse[]) => {
|
||||
if (data.length === 0) {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Please select at least one issue.",
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const selectedIssues: { blocker_issue_detail: BlockeIssueDetail }[] = data.map((i) => ({
|
||||
blocker_issue_detail: {
|
||||
id: i.id,
|
||||
name: i.name,
|
||||
sequence_id: i.sequence_id,
|
||||
project_detail: {
|
||||
id: i.project_id,
|
||||
identifier: i.project__identifier,
|
||||
name: i.project__name,
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
onChange([...(value || []), ...selectedIssues]);
|
||||
|
||||
setIsBlockerModalOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ExistingIssuesListModal
|
||||
isOpen={isBlockerModalOpen}
|
||||
handleClose={() => setIsBlockerModalOpen(false)}
|
||||
searchParams={{ issue_relation: true, issue_id: issueId!.toString() }}
|
||||
handleOnSubmit={onSubmit}
|
||||
workspaceLevelToggle
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => setIsBlockerModalOpen(true)}
|
||||
className={
|
||||
"relative w-full px-2.5 py-0.5 text-base flex justify-between items-center gap-0.5 text-custom-text-100"
|
||||
}
|
||||
>
|
||||
<span className="text-custom-text-200">Select issue</span>
|
||||
<ChevronDown className="w-4 h-4 text-custom-text-200" />
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
152
web/components/web-view/select-cycle.tsx
Normal file
152
web/components/web-view/select-cycle.tsx
Normal file
@ -0,0 +1,152 @@
|
||||
// react
|
||||
import React, { useState } from "react";
|
||||
|
||||
// next
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
// swr
|
||||
import useSWR, { mutate } from "swr";
|
||||
|
||||
// services
|
||||
import issuesService from "services/issues.service";
|
||||
import cyclesService from "services/cycles.service";
|
||||
|
||||
// hooks
|
||||
import useUser from "hooks/use-user";
|
||||
|
||||
// fetch keys
|
||||
import {
|
||||
ISSUE_DETAILS,
|
||||
INCOMPLETE_CYCLES_LIST,
|
||||
CYCLE_ISSUES,
|
||||
PROJECT_ISSUES_ACTIVITY,
|
||||
} from "constants/fetch-keys";
|
||||
|
||||
// icons
|
||||
import { ChevronDown } from "lucide-react";
|
||||
|
||||
// components
|
||||
import { WebViewModal } from "components/web-view";
|
||||
|
||||
// types
|
||||
import { ICycle, IIssueCycle } from "types";
|
||||
|
||||
type Props = {
|
||||
disabled?: boolean;
|
||||
value?: IIssueCycle | null;
|
||||
};
|
||||
|
||||
export const CycleSelect: React.FC<Props> = (props) => {
|
||||
const { disabled = false, value } = props;
|
||||
|
||||
const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, issueId } = router.query;
|
||||
|
||||
const { data: incompleteCycles } = useSWR(
|
||||
workspaceSlug && projectId ? INCOMPLETE_CYCLES_LIST(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () =>
|
||||
cyclesService.getCyclesWithParams(
|
||||
workspaceSlug as string,
|
||||
projectId as string,
|
||||
"incomplete"
|
||||
)
|
||||
: null
|
||||
);
|
||||
|
||||
const { user } = useUser();
|
||||
|
||||
const handleCycleChange = (cycleDetails: ICycle) => {
|
||||
if (!workspaceSlug || !projectId || !issueId || disabled) return;
|
||||
|
||||
issuesService
|
||||
.addIssueToCycle(
|
||||
workspaceSlug as string,
|
||||
projectId as string,
|
||||
cycleDetails.id,
|
||||
{
|
||||
issues: [issueId.toString()],
|
||||
},
|
||||
user
|
||||
)
|
||||
.then(() => {
|
||||
mutate(ISSUE_DETAILS(issueId as string));
|
||||
mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
|
||||
});
|
||||
};
|
||||
|
||||
const removeIssueFromCycle = (bridgeId?: string, cycleId?: string) => {
|
||||
if (!workspaceSlug || !projectId || !bridgeId || !cycleId || disabled) return;
|
||||
|
||||
mutate(
|
||||
ISSUE_DETAILS(issueId as string),
|
||||
(prev) => {
|
||||
if (!prev) return prev;
|
||||
|
||||
return {
|
||||
...prev,
|
||||
issue_cycle: null,
|
||||
};
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
issuesService
|
||||
.removeIssueFromCycle(workspaceSlug.toString(), projectId.toString(), cycleId, bridgeId)
|
||||
.then(() => {
|
||||
mutate(CYCLE_ISSUES(cycleId));
|
||||
mutate(ISSUE_DETAILS(issueId as string));
|
||||
mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<WebViewModal
|
||||
isOpen={isBottomSheetOpen}
|
||||
onClose={() => setIsBottomSheetOpen(false)}
|
||||
modalTitle="Select Module"
|
||||
>
|
||||
<WebViewModal.Options
|
||||
options={[
|
||||
...(incompleteCycles ?? []).map((cycle) => ({
|
||||
checked: cycle.id === value?.cycle,
|
||||
label: cycle.name,
|
||||
value: cycle.id,
|
||||
onClick: () => {
|
||||
handleCycleChange(cycle);
|
||||
setIsBottomSheetOpen(false);
|
||||
},
|
||||
})),
|
||||
{
|
||||
checked: !value,
|
||||
label: "None",
|
||||
onClick: () => {
|
||||
setIsBottomSheetOpen(false);
|
||||
removeIssueFromCycle(value?.id, value?.cycle);
|
||||
},
|
||||
value: "none",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</WebViewModal>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => setIsBottomSheetOpen(true)}
|
||||
className={
|
||||
"relative w-full px-2.5 py-0.5 text-base flex justify-between items-center gap-0.5 text-custom-text-100"
|
||||
}
|
||||
>
|
||||
<span className="text-custom-text-200">{value?.cycle_detail.name ?? "Select cycle"}</span>
|
||||
<ChevronDown className="w-4 h-4 text-custom-text-200" />
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
116
web/components/web-view/select-duplicate.tsx
Normal file
116
web/components/web-view/select-duplicate.tsx
Normal file
@ -0,0 +1,116 @@
|
||||
// react
|
||||
import React, { useState } from "react";
|
||||
|
||||
// next
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
// swr
|
||||
import { mutate } from "swr";
|
||||
|
||||
// services
|
||||
import issuesService from "services/issues.service";
|
||||
|
||||
// hooks
|
||||
import useUser from "hooks/use-user";
|
||||
|
||||
// fetch keys
|
||||
import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
|
||||
|
||||
// icons
|
||||
import { ChevronDown } from "lucide-react";
|
||||
|
||||
// components
|
||||
import { IssuesSelectBottomSheet } from "components/web-view";
|
||||
|
||||
// types
|
||||
import { BlockeIssueDetail, ISearchIssueResponse } from "types";
|
||||
|
||||
type Props = {
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
export const DuplicateSelect: React.FC<Props> = (props) => {
|
||||
const { disabled = false } = props;
|
||||
|
||||
const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, issueId } = router.query;
|
||||
|
||||
const { user } = useUser();
|
||||
|
||||
const onSubmit = async (data: ISearchIssueResponse[]) => {
|
||||
if (!workspaceSlug || !projectId || !issueId || !user || disabled) return;
|
||||
|
||||
if (data.length === 0)
|
||||
return console.log(
|
||||
"toast",
|
||||
JSON.stringify({
|
||||
type: "error",
|
||||
message: "Please select at least one issue.",
|
||||
})
|
||||
);
|
||||
|
||||
const selectedIssues: { blocker_issue_detail: BlockeIssueDetail }[] = data.map((i) => ({
|
||||
blocker_issue_detail: {
|
||||
id: i.id,
|
||||
name: i.name,
|
||||
sequence_id: i.sequence_id,
|
||||
project_detail: {
|
||||
id: i.project_id,
|
||||
identifier: i.project__identifier,
|
||||
name: i.project__name,
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
if (!user) return;
|
||||
|
||||
issuesService
|
||||
.createIssueRelation(
|
||||
workspaceSlug.toString(),
|
||||
projectId.toString(),
|
||||
issueId.toString(),
|
||||
user,
|
||||
{
|
||||
related_list: [
|
||||
...selectedIssues.map((issue) => ({
|
||||
issue: issueId as string,
|
||||
issue_detail: issue.blocker_issue_detail,
|
||||
related_issue: issue.blocker_issue_detail.id,
|
||||
relation_type: "duplicate" as const,
|
||||
})),
|
||||
],
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
mutate(ISSUE_DETAILS(issueId as string));
|
||||
mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
|
||||
});
|
||||
|
||||
setIsBottomSheetOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<IssuesSelectBottomSheet
|
||||
isOpen={isBottomSheetOpen}
|
||||
onClose={() => setIsBottomSheetOpen(false)}
|
||||
onSubmit={onSubmit}
|
||||
searchParams={{ issue_relation: true }}
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => setIsBottomSheetOpen(true)}
|
||||
className={
|
||||
"relative w-full px-2.5 py-0.5 text-base flex justify-between items-center gap-0.5"
|
||||
}
|
||||
>
|
||||
<span className="text-custom-text-200">Select issue</span>
|
||||
<ChevronDown className="w-4 h-4 text-custom-text-200" />
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
147
web/components/web-view/select-module.tsx
Normal file
147
web/components/web-view/select-module.tsx
Normal file
@ -0,0 +1,147 @@
|
||||
// react
|
||||
import React, { useState } from "react";
|
||||
|
||||
// next
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
// swr
|
||||
import useSWR, { mutate } from "swr";
|
||||
|
||||
// services
|
||||
import modulesService from "services/modules.service";
|
||||
|
||||
// hooks
|
||||
import useUser from "hooks/use-user";
|
||||
|
||||
// fetch keys
|
||||
import {
|
||||
ISSUE_DETAILS,
|
||||
MODULE_LIST,
|
||||
MODULE_ISSUES,
|
||||
PROJECT_ISSUES_ACTIVITY,
|
||||
} from "constants/fetch-keys";
|
||||
|
||||
// icons
|
||||
import { ChevronDown } from "lucide-react";
|
||||
|
||||
// components
|
||||
import { WebViewModal } from "components/web-view";
|
||||
|
||||
// types
|
||||
import { IModule, IIssueModule } from "types";
|
||||
|
||||
type Props = {
|
||||
disabled?: boolean;
|
||||
value?: IIssueModule | null;
|
||||
};
|
||||
|
||||
export const ModuleSelect: React.FC<Props> = (props) => {
|
||||
const { disabled = false, value } = props;
|
||||
|
||||
const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, issueId } = router.query;
|
||||
|
||||
const { data: modules } = useSWR(
|
||||
workspaceSlug && projectId ? MODULE_LIST(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => modulesService.getModules(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
);
|
||||
|
||||
const { user } = useUser();
|
||||
|
||||
const handleModuleChange = (moduleDetail: IModule) => {
|
||||
if (!workspaceSlug || !projectId || !issueId || disabled) return;
|
||||
|
||||
modulesService
|
||||
.addIssuesToModule(
|
||||
workspaceSlug as string,
|
||||
projectId as string,
|
||||
moduleDetail.id,
|
||||
{
|
||||
issues: [issueId.toString()],
|
||||
},
|
||||
user
|
||||
)
|
||||
.then(() => {
|
||||
mutate(ISSUE_DETAILS(issueId.toString()));
|
||||
mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
|
||||
});
|
||||
};
|
||||
|
||||
const removeIssueFromModule = (bridgeId?: string, moduleId?: string) => {
|
||||
if (!workspaceSlug || !projectId || !moduleId || !bridgeId || disabled) return;
|
||||
|
||||
mutate(
|
||||
ISSUE_DETAILS(issueId as string),
|
||||
(prev) => {
|
||||
if (!prev) return prev;
|
||||
return {
|
||||
...prev,
|
||||
issue_module: null,
|
||||
};
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
modulesService
|
||||
.removeIssueFromModule(workspaceSlug as string, projectId as string, moduleId, bridgeId)
|
||||
.then(() => {
|
||||
mutate(MODULE_ISSUES(moduleId));
|
||||
mutate(ISSUE_DETAILS(issueId as string));
|
||||
mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<WebViewModal
|
||||
isOpen={isBottomSheetOpen}
|
||||
onClose={() => setIsBottomSheetOpen(false)}
|
||||
modalTitle="Select Module"
|
||||
>
|
||||
<WebViewModal.Options
|
||||
options={[
|
||||
...(modules ?? []).map((mod) => ({
|
||||
checked: mod.id === value?.module,
|
||||
label: mod.name,
|
||||
value: mod.id,
|
||||
onClick: () => {
|
||||
handleModuleChange(mod);
|
||||
setIsBottomSheetOpen(false);
|
||||
},
|
||||
})),
|
||||
{
|
||||
checked: !value,
|
||||
label: "None",
|
||||
onClick: () => {
|
||||
setIsBottomSheetOpen(false);
|
||||
removeIssueFromModule(value?.id, value?.module);
|
||||
},
|
||||
value: "none",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</WebViewModal>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => setIsBottomSheetOpen(true)}
|
||||
className={
|
||||
"relative w-full px-2.5 py-0.5 text-base flex justify-between items-center gap-0.5 text-custom-text-100"
|
||||
}
|
||||
>
|
||||
<span className="text-custom-text-200">
|
||||
{value?.module_detail?.name ?? "Select module"}
|
||||
</span>
|
||||
<ChevronDown className="w-4 h-4 text-custom-text-200" />
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -14,7 +14,10 @@ import issuesService from "services/issues.service";
|
||||
import { ISSUE_DETAILS } from "constants/fetch-keys";
|
||||
|
||||
// components
|
||||
import { ParentIssuesListModal } from "components/issues";
|
||||
import { IssuesSelectBottomSheet } from "components/web-view";
|
||||
|
||||
// icons
|
||||
import { ChevronDown, X } from "lucide-react";
|
||||
|
||||
// types
|
||||
import { ISearchIssueResponse } from "types";
|
||||
@ -26,7 +29,7 @@ type Props = {
|
||||
};
|
||||
|
||||
export const ParentSelect: React.FC<Props> = (props) => {
|
||||
const { value, onChange, disabled = false } = props;
|
||||
const { onChange, disabled = false } = props;
|
||||
|
||||
const [isParentModalOpen, setIsParentModalOpen] = useState(false);
|
||||
const [selectedParentIssue, setSelectedParentIssue] = useState<ISearchIssueResponse | null>(null);
|
||||
@ -42,35 +45,67 @@ export const ParentSelect: React.FC<Props> = (props) => {
|
||||
: null
|
||||
);
|
||||
|
||||
const parentIssueResult = selectedParentIssue
|
||||
? `${selectedParentIssue.project__identifier}-${selectedParentIssue.sequence_id}`
|
||||
: issueDetails?.parent
|
||||
? `${issueDetails.parent_detail?.project_detail.identifier}-${issueDetails.parent_detail?.sequence_id}`
|
||||
: null; // defaults to null
|
||||
|
||||
return (
|
||||
<>
|
||||
<ParentIssuesListModal
|
||||
<IssuesSelectBottomSheet
|
||||
isOpen={isParentModalOpen}
|
||||
handleClose={() => setIsParentModalOpen(false)}
|
||||
onChange={(issue) => {
|
||||
onClose={() => setIsParentModalOpen(false)}
|
||||
singleSelect
|
||||
onSubmit={async (issues) => {
|
||||
if (disabled) return;
|
||||
const issue = issues[0];
|
||||
onChange(issue.id);
|
||||
setSelectedParentIssue(issue);
|
||||
}}
|
||||
issueId={issueId as string}
|
||||
projectId={projectId as string}
|
||||
searchParams={{
|
||||
parent: true,
|
||||
issue_id: issueId as string,
|
||||
}}
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => setIsParentModalOpen(true)}
|
||||
className={
|
||||
"relative w-full px-2.5 py-0.5 text-base flex justify-between items-center gap-0.5 text-custom-text-100"
|
||||
}
|
||||
>
|
||||
{selectedParentIssue && issueDetails?.parent ? (
|
||||
`${selectedParentIssue.project__identifier}-${selectedParentIssue.sequence_id}`
|
||||
) : !selectedParentIssue && issueDetails?.parent ? (
|
||||
`${issueDetails.parent_detail?.project_detail.identifier}-${issueDetails.parent_detail?.sequence_id}`
|
||||
) : (
|
||||
{parentIssueResult ? (
|
||||
<div className="flex justify-between items-center gap-0.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setIsParentModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<span>{parentIssueResult}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
className="pr-2.5"
|
||||
onClick={() => {
|
||||
onChange(null);
|
||||
setSelectedParentIssue(null);
|
||||
}}
|
||||
>
|
||||
<X className="w-4 h-4 text-custom-text-200" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => {
|
||||
setIsParentModalOpen(true);
|
||||
}}
|
||||
className={
|
||||
"relative w-full px-2.5 py-0.5 text-base flex justify-between items-center gap-0.5"
|
||||
}
|
||||
>
|
||||
<span className="text-custom-text-200">Select issue</span>
|
||||
)}
|
||||
</button>
|
||||
<ChevronDown className="w-4 h-4 text-custom-text-200" />
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -74,11 +74,13 @@ export const PrioritySelect: React.FC<Props> = (props) => {
|
||||
disabled={disabled}
|
||||
onClick={() => setIsOpen(true)}
|
||||
className={
|
||||
"relative w-full px-2.5 py-0.5 text-base flex justify-between items-center gap-0.5 text-custom-text-100"
|
||||
"relative w-full px-2.5 py-0.5 text-base flex justify-between items-center gap-0.5"
|
||||
}
|
||||
>
|
||||
{value ? capitalizeFirstLetter(value) : "None"}
|
||||
<ChevronDown className="w-5 h-5" />
|
||||
<span className="text-custom-text-200">
|
||||
{value ? capitalizeFirstLetter(value) : "None"}
|
||||
</span>
|
||||
<ChevronDown className="w-4 h-4 text-custom-text-200" />
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
|
||||
114
web/components/web-view/select-relates-to.tsx
Normal file
114
web/components/web-view/select-relates-to.tsx
Normal file
@ -0,0 +1,114 @@
|
||||
// react
|
||||
import React, { useState } from "react";
|
||||
|
||||
// next
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
// swr
|
||||
import { mutate } from "swr";
|
||||
|
||||
// services
|
||||
import issuesService from "services/issues.service";
|
||||
|
||||
// hooks
|
||||
import useUser from "hooks/use-user";
|
||||
|
||||
// fetch keys
|
||||
import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
|
||||
|
||||
// icons
|
||||
import { ChevronDown } from "lucide-react";
|
||||
|
||||
// components
|
||||
import { IssuesSelectBottomSheet } from "components/web-view";
|
||||
|
||||
// types
|
||||
import { BlockeIssueDetail, ISearchIssueResponse } from "types";
|
||||
|
||||
type Props = {
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
export const RelatesSelect: React.FC<Props> = (props) => {
|
||||
const { disabled = false } = props;
|
||||
|
||||
const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, issueId } = router.query;
|
||||
|
||||
const { user } = useUser();
|
||||
|
||||
const onSubmit = async (data: ISearchIssueResponse[]) => {
|
||||
if (!workspaceSlug || !projectId || !issueId || !user || disabled) return;
|
||||
|
||||
if (data.length === 0)
|
||||
return console.log(
|
||||
"toast",
|
||||
JSON.stringify({
|
||||
type: "error",
|
||||
message: "Please select at least one issue.",
|
||||
})
|
||||
);
|
||||
|
||||
const selectedIssues: { blocker_issue_detail: BlockeIssueDetail }[] = data.map((i) => ({
|
||||
blocker_issue_detail: {
|
||||
id: i.id,
|
||||
name: i.name,
|
||||
sequence_id: i.sequence_id,
|
||||
project_detail: {
|
||||
id: i.project_id,
|
||||
identifier: i.project__identifier,
|
||||
name: i.project__name,
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
issuesService
|
||||
.createIssueRelation(
|
||||
workspaceSlug.toString(),
|
||||
projectId.toString(),
|
||||
issueId.toString(),
|
||||
user,
|
||||
{
|
||||
related_list: [
|
||||
...selectedIssues.map((issue) => ({
|
||||
issue: issueId as string,
|
||||
issue_detail: issue.blocker_issue_detail,
|
||||
related_issue: issue.blocker_issue_detail.id,
|
||||
relation_type: "relates_to" as const,
|
||||
})),
|
||||
],
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
mutate(ISSUE_DETAILS(issueId as string));
|
||||
mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
|
||||
});
|
||||
|
||||
setIsBottomSheetOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<IssuesSelectBottomSheet
|
||||
isOpen={isBottomSheetOpen}
|
||||
onClose={() => setIsBottomSheetOpen(false)}
|
||||
onSubmit={onSubmit}
|
||||
searchParams={{ issue_relation: true }}
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => setIsBottomSheetOpen(true)}
|
||||
className={
|
||||
"relative w-full px-2.5 py-0.5 text-base flex justify-between items-center gap-0.5 text-custom-text-100"
|
||||
}
|
||||
>
|
||||
<span className="text-custom-text-200">Select issue</span>
|
||||
<ChevronDown className="w-4 h-4 text-custom-text-200" />
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -78,11 +78,11 @@ export const StateSelect: React.FC<Props> = (props) => {
|
||||
disabled={disabled}
|
||||
onClick={() => setIsOpen(true)}
|
||||
className={
|
||||
"relative w-full px-2.5 py-0.5 text-base flex justify-between items-center gap-0.5 text-custom-text-100"
|
||||
"relative w-full px-2.5 py-0.5 text-base flex justify-between items-center gap-0.5"
|
||||
}
|
||||
>
|
||||
{selectedState?.name || "Select a state"}
|
||||
<ChevronDown className="w-5 h-5" />
|
||||
<span className="text-custom-text-200">{selectedState?.name || "Select a state"}</span>
|
||||
<ChevronDown className="w-4 h-4 text-custom-text-200" />
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
|
||||
5
web/components/web-view/spinner.tsx
Normal file
5
web/components/web-view/spinner.tsx
Normal file
@ -0,0 +1,5 @@
|
||||
export const Spinner: React.FC = () => (
|
||||
<div className="animate-spin duration-[2500ms]">
|
||||
<img src="/web-view-spinner.png" alt="spinner" />
|
||||
</div>
|
||||
);
|
||||
@ -1,5 +1,5 @@
|
||||
// react
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
|
||||
// next
|
||||
import { useRouter } from "next/router";
|
||||
@ -8,7 +8,7 @@ import { useRouter } from "next/router";
|
||||
import useSWR, { mutate } from "swr";
|
||||
|
||||
// icons
|
||||
import { X } from "lucide-react";
|
||||
import { X, PlusIcon } from "lucide-react";
|
||||
|
||||
// services
|
||||
import issuesService from "services/issues.service";
|
||||
@ -21,10 +21,12 @@ import useUser from "hooks/use-user";
|
||||
|
||||
// ui
|
||||
import { Spinner } from "components/ui";
|
||||
import { IIssue } from "types";
|
||||
|
||||
// components
|
||||
import { Label } from "components/web-view";
|
||||
import { Label, IssuesSelectBottomSheet, DeleteConfirmation } from "components/web-view";
|
||||
|
||||
// types
|
||||
import { IIssue, ISearchIssueResponse } from "types";
|
||||
|
||||
type Props = {
|
||||
issueDetails?: IIssue;
|
||||
@ -34,7 +36,12 @@ export const SubIssueList: React.FC<Props> = (props) => {
|
||||
const { issueDetails } = props;
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
const { workspaceSlug, projectId, issueId } = router.query;
|
||||
|
||||
const isArchive = Boolean(router.query.archive);
|
||||
|
||||
const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
|
||||
const [issueSelectedForDelete, setIssueSelectedForDelete] = useState<IIssue | null>(null);
|
||||
|
||||
const { user } = useUser();
|
||||
|
||||
@ -46,8 +53,8 @@ export const SubIssueList: React.FC<Props> = (props) => {
|
||||
: null
|
||||
);
|
||||
|
||||
const handleSubIssueRemove = (issue: any) => {
|
||||
if (!workspaceSlug || !issueDetails || !user) return;
|
||||
const handleSubIssueRemove = (issue: IIssue | null) => {
|
||||
if (!workspaceSlug || !issueDetails || !user || !issue) return;
|
||||
|
||||
mutate(
|
||||
SUB_ISSUES(issueDetails.id),
|
||||
@ -72,8 +79,40 @@ export const SubIssueList: React.FC<Props> = (props) => {
|
||||
.finally(() => mutate(SUB_ISSUES(issueDetails.id)));
|
||||
};
|
||||
|
||||
const addAsSubIssueFromExistingIssues = async (data: ISearchIssueResponse[]) => {
|
||||
if (!workspaceSlug || !projectId || !issueId || isArchive) return;
|
||||
|
||||
const payload = {
|
||||
sub_issue_ids: data.map((i) => i.id),
|
||||
};
|
||||
await issuesService
|
||||
.addSubIssues(workspaceSlug.toString(), projectId.toString(), issueId.toString(), payload)
|
||||
.finally(() => {
|
||||
mutate(SUB_ISSUES(issueId.toString()));
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<IssuesSelectBottomSheet
|
||||
isOpen={isBottomSheetOpen}
|
||||
onClose={() => setIsBottomSheetOpen(false)}
|
||||
onSubmit={addAsSubIssueFromExistingIssues}
|
||||
searchParams={{ sub_issue: true, issue_id: issueId as string }}
|
||||
/>
|
||||
|
||||
<DeleteConfirmation
|
||||
title="Remove sub issue"
|
||||
content="Are you sure you want to remove this sub issue?"
|
||||
isOpen={!!issueSelectedForDelete}
|
||||
onCancel={() => setIssueSelectedForDelete(null)}
|
||||
onConfirm={() => {
|
||||
if (isArchive) return;
|
||||
setIssueSelectedForDelete(null);
|
||||
handleSubIssueRemove(issueSelectedForDelete);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Label>Sub Issues</Label>
|
||||
<div className="p-3 border border-custom-border-200 rounded-[4px]">
|
||||
{!subIssuesResponse && (
|
||||
@ -97,12 +136,28 @@ export const SubIssueList: React.FC<Props> = (props) => {
|
||||
</p>
|
||||
<p className="text-sm font-normal">{subIssue.name}</p>
|
||||
</div>
|
||||
<button type="button" onClick={() => handleSubIssueRemove(subIssue)}>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isArchive}
|
||||
onClick={() => {
|
||||
if (isArchive) return;
|
||||
setIssueSelectedForDelete(subIssue);
|
||||
}}
|
||||
>
|
||||
<X className="w-[18px] h-[18px] text-custom-text-400" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isArchive}
|
||||
onClick={() => setIsBottomSheetOpen(true)}
|
||||
className="flex items-center gap-x-1 mt-3"
|
||||
>
|
||||
<PlusIcon className="w-[18px] h-[18px] text-custom-text-400" />
|
||||
<p className="text-sm text-custom-text-400">Add sub issue</p>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -63,7 +63,7 @@ export const WebViewModal = (props: Props) => {
|
||||
<XMarkIcon className="w-6 h-6 text-custom-text-200" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-6 max-h-60 overflow-auto">{children}</div>
|
||||
<div className="flex flex-col mt-6 h-full max-h-[70vh]">{children}</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
@ -75,7 +75,7 @@ export const WebViewModal = (props: Props) => {
|
||||
|
||||
type OptionsProps = {
|
||||
options: Array<{
|
||||
label: string;
|
||||
label: string | React.ReactNode;
|
||||
value: string | null;
|
||||
checked: boolean;
|
||||
icon?: any;
|
||||
@ -84,14 +84,14 @@ type OptionsProps = {
|
||||
};
|
||||
|
||||
const Options: React.FC<OptionsProps> = ({ options }) => (
|
||||
<div className="divide-y">
|
||||
<div className="divide-y divide-custom-border-300 flex-1 overflow-auto">
|
||||
{options.map((option) => (
|
||||
<div key={option.value} className="flex items-center justify-between gap-2 py-[14px]">
|
||||
<div className="flex items-center gap-x-2">
|
||||
<div onClick={option.onClick} className="flex items-center gap-x-2 w-full">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={option.checked}
|
||||
onChange={option.onClick}
|
||||
readOnly
|
||||
className="rounded-full border border-custom-border-200 bg-custom-background-100 w-4 h-4"
|
||||
/>
|
||||
|
||||
@ -104,5 +104,16 @@ const Options: React.FC<OptionsProps> = ({ options }) => (
|
||||
</div>
|
||||
);
|
||||
|
||||
type FooterProps = {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const Footer: React.FC<FooterProps> = ({ children, className }) => (
|
||||
<div className={`mt-2 flex-shrink-0 ${className ? className : ""}`}>{children}</div>
|
||||
);
|
||||
|
||||
WebViewModal.Options = Options;
|
||||
WebViewModal.Footer = Footer;
|
||||
WebViewModal.Options.displayName = "WebViewModal.Options";
|
||||
WebViewModal.Footer.displayName = "WebViewModal.Footer";
|
||||
|
||||
@ -11,7 +11,7 @@ import { CURRENT_USER } from "constants/fetch-keys";
|
||||
import { AlertCircle } from "lucide-react";
|
||||
|
||||
// ui
|
||||
import { Spinner } from "components/ui";
|
||||
import { Spinner } from "components/web-view";
|
||||
|
||||
type Props = {
|
||||
children: React.ReactNode;
|
||||
@ -40,7 +40,6 @@ const WebViewLayout: React.FC<Props> = ({ children, fullScreen = true }) => {
|
||||
return (
|
||||
<div className="h-screen grid place-items-center p-4">
|
||||
<div className="flex flex-col items-center gap-3 text-center">
|
||||
<h3 className="text-xl">Loading your profile...</h3>
|
||||
<Spinner />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -15,7 +15,8 @@ import WebViewLayout from "layouts/web-view-layout";
|
||||
|
||||
// components
|
||||
import { TipTapEditor } from "components/tiptap";
|
||||
import { PrimaryButton, Spinner } from "components/ui";
|
||||
import { PrimaryButton } from "components/ui";
|
||||
import { Spinner } from "components/web-view";
|
||||
|
||||
const Editor: NextPage = () => {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
@ -41,13 +42,13 @@ const Editor: NextPage = () => {
|
||||
}, [isEditable, setValue, router]);
|
||||
|
||||
return (
|
||||
<WebViewLayout fullScreen={isLoading}>
|
||||
<WebViewLayout fullScreen>
|
||||
{isLoading ? (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="w-full h-full flex flex-col justify-between">
|
||||
<Controller
|
||||
name="data_html"
|
||||
control={control}
|
||||
@ -64,8 +65,7 @@ const Editor: NextPage = () => {
|
||||
editable={isEditable}
|
||||
noBorder={true}
|
||||
workspaceSlug={workspaceSlug?.toString() ?? ""}
|
||||
debouncedUpdatesEnabled={true}
|
||||
customClassName="min-h-[150px] shadow-sm"
|
||||
customClassName="h-full shadow-sm overflow-auto"
|
||||
editorContentCustomClassNames="pb-9"
|
||||
onChange={(description: Object, description_html: string) => {
|
||||
onChange(description_html);
|
||||
@ -77,7 +77,7 @@ const Editor: NextPage = () => {
|
||||
/>
|
||||
{isEditable && (
|
||||
<PrimaryButton
|
||||
className="mt-4 w-[calc(100%-30px)] h-[45px] mx-[15px] text-[17px]"
|
||||
className="mt-4 w-[calc(100%-30px)] h-[45px] mx-[15px] text-[17px] my-[15px]"
|
||||
onClick={() => {
|
||||
console.log(
|
||||
"submitted",
|
||||
@ -90,7 +90,7 @@ const Editor: NextPage = () => {
|
||||
Submit
|
||||
</PrimaryButton>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
</WebViewLayout>
|
||||
);
|
||||
|
||||
@ -8,7 +8,7 @@ import { useRouter } from "next/router";
|
||||
import useSWR, { mutate } from "swr";
|
||||
|
||||
// react hook forms
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useFormContext, useForm, FormProvider } from "react-hook-form";
|
||||
|
||||
// services
|
||||
import issuesService from "services/issues.service";
|
||||
@ -23,9 +23,6 @@ import useProjectMembers from "hooks/use-project-members";
|
||||
// layouts
|
||||
import WebViewLayout from "layouts/web-view-layout";
|
||||
|
||||
// ui
|
||||
import { Spinner } from "components/ui";
|
||||
|
||||
// components
|
||||
import {
|
||||
IssueWebViewForm,
|
||||
@ -34,46 +31,58 @@ import {
|
||||
IssuePropertiesDetail,
|
||||
IssueLinks,
|
||||
IssueActivity,
|
||||
Spinner,
|
||||
} from "components/web-view";
|
||||
|
||||
// types
|
||||
import type { IIssue } from "types";
|
||||
|
||||
const MobileWebViewIssueDetail = () => {
|
||||
const MobileWebViewIssueDetail_ = () => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, issueId } = router.query;
|
||||
|
||||
const isArchive = Boolean(router.query.archive);
|
||||
|
||||
const memberRole = useProjectMembers(
|
||||
workspaceSlug as string,
|
||||
projectId as string,
|
||||
!!workspaceSlug && !!projectId
|
||||
);
|
||||
|
||||
const isAllowed = Boolean(memberRole.isMember || memberRole.isOwner);
|
||||
const isAllowed = Boolean((memberRole.isMember || memberRole.isOwner) && !isArchive);
|
||||
|
||||
const { user } = useUser();
|
||||
|
||||
const { register, control, reset, handleSubmit, watch } = useForm<IIssue>({
|
||||
defaultValues: {
|
||||
name: "",
|
||||
description: "",
|
||||
description_html: "",
|
||||
state: "",
|
||||
},
|
||||
});
|
||||
const formContext = useFormContext<IIssue>();
|
||||
const { register, handleSubmit, control, watch, reset } = formContext;
|
||||
|
||||
const {
|
||||
data: issueDetails,
|
||||
mutate: mutateIssueDetails,
|
||||
data: issue,
|
||||
mutate: mutateIssue,
|
||||
error,
|
||||
} = useSWR(
|
||||
workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId.toString()) : null,
|
||||
workspaceSlug && projectId && issueId
|
||||
workspaceSlug && projectId && issueId && !isArchive ? ISSUE_DETAILS(issueId.toString()) : null,
|
||||
workspaceSlug && projectId && issueId && !isArchive
|
||||
? () =>
|
||||
issuesService.retrieve(workspaceSlug.toString(), projectId.toString(), issueId.toString())
|
||||
: null
|
||||
);
|
||||
|
||||
const { data: archiveIssueDetails, mutate: mutateaArchiveIssue } = useSWR<IIssue | undefined>(
|
||||
workspaceSlug && projectId && issueId && isArchive ? ISSUE_DETAILS(issueId as string) : null,
|
||||
workspaceSlug && projectId && issueId && isArchive
|
||||
? () =>
|
||||
issuesService.retrieveArchivedIssue(
|
||||
workspaceSlug.toString(),
|
||||
projectId.toString(),
|
||||
issueId.toString()
|
||||
)
|
||||
: null
|
||||
);
|
||||
|
||||
const issueDetails = isArchive ? archiveIssueDetails : issue;
|
||||
const mutateIssueDetails = isArchive ? mutateaArchiveIssue : mutateIssue;
|
||||
|
||||
useEffect(() => {
|
||||
if (!issueDetails) return;
|
||||
reset({
|
||||
@ -132,7 +141,6 @@ const MobileWebViewIssueDetail = () => {
|
||||
<div className="px-4 py-2 h-full">
|
||||
<div className="h-full flex justify-center items-center">
|
||||
<Spinner />
|
||||
Loading...
|
||||
</div>
|
||||
</div>
|
||||
</WebViewLayout>
|
||||
@ -147,6 +155,10 @@ const MobileWebViewIssueDetail = () => {
|
||||
|
||||
return (
|
||||
<WebViewLayout>
|
||||
{isArchive && (
|
||||
<div className="w-full h-screen top-0 left-0 fixed z-50 bg-white/20 pointer-events-none" />
|
||||
)}
|
||||
|
||||
<div className="px-6 py-2 h-full overflow-auto space-y-3">
|
||||
<IssueWebViewForm
|
||||
isAllowed={isAllowed}
|
||||
@ -160,7 +172,7 @@ const MobileWebViewIssueDetail = () => {
|
||||
|
||||
<SubIssueList issueDetails={issueDetails!} />
|
||||
|
||||
<IssuePropertiesDetail control={control} submitChanges={submitChanges} />
|
||||
<IssuePropertiesDetail submitChanges={submitChanges} />
|
||||
|
||||
<IssueAttachments allowed={isAllowed} />
|
||||
|
||||
@ -172,4 +184,14 @@ const MobileWebViewIssueDetail = () => {
|
||||
);
|
||||
};
|
||||
|
||||
const MobileWebViewIssueDetail = () => {
|
||||
const methods = useForm();
|
||||
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<MobileWebViewIssueDetail_ />
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default MobileWebViewIssueDetail;
|
||||
|
||||
BIN
web/public/web-view-spinner.png
Normal file
BIN
web/public/web-view-spinner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
@ -359,3 +359,114 @@ body {
|
||||
.disable-scroll {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
div.web-view-spinner {
|
||||
position: relative;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
display: inline-block;
|
||||
margin-left: 50%;
|
||||
margin-right: 50%;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
div.web-view-spinner div {
|
||||
width: 6%;
|
||||
height: 16%;
|
||||
background: rgb(var(--color-text-400));
|
||||
position: absolute;
|
||||
left: 49%;
|
||||
top: 43%;
|
||||
opacity: 0;
|
||||
border-radius: 50px;
|
||||
-webkit-border-radius: 50px;
|
||||
box-shadow: 0 0 3px rgba(0,0,0,0.2);
|
||||
-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
|
||||
animation: fade 1s linear infinite;
|
||||
-webkit-animation: fade 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
from {opacity: 1;}
|
||||
to {opacity: 0.25;}
|
||||
}
|
||||
@-webkit-keyframes fade {
|
||||
from {opacity: 1;}
|
||||
to {opacity: 0.25;}
|
||||
}
|
||||
|
||||
div.web-view-spinner div.bar1 {
|
||||
transform: rotate(0deg) translate(0, -130%);
|
||||
-webkit-transform:rotate(0deg) translate(0, -130%);
|
||||
animation-delay: 0s;
|
||||
-webkit-animation-delay: 0s;
|
||||
}
|
||||
|
||||
div.web-view-spinner div.bar2 {
|
||||
transform:rotate(30deg) translate(0, -130%);
|
||||
-webkit-transform:rotate(30deg) translate(0, -130%);
|
||||
animation-delay: -0.9167s;
|
||||
-webkit-animation-delay: -0.9167s;
|
||||
}
|
||||
|
||||
div.web-view-spinner div.bar3 {
|
||||
transform:rotate(60deg) translate(0, -130%);
|
||||
-webkit-transform:rotate(60deg) translate(0, -130%);
|
||||
animation-delay: -0.833s;
|
||||
-webkit-animation-delay: -0.833s;
|
||||
}
|
||||
div.web-view-spinner div.bar4 {
|
||||
transform:rotate(90deg) translate(0, -130%);
|
||||
-webkit-transform:rotate(90deg) translate(0, -130%);
|
||||
animation-delay: -0.7497s;
|
||||
-webkit-animation-delay: -0.7497s;
|
||||
}
|
||||
div.web-view-spinner div.bar5 {
|
||||
transform:rotate(120deg) translate(0, -130%);
|
||||
-webkit-transform:rotate(120deg) translate(0, -130%);
|
||||
animation-delay: -0.667s;
|
||||
-webkit-animation-delay: -0.667s;
|
||||
}
|
||||
div.web-view-spinner div.bar6 {
|
||||
transform:rotate(150deg) translate(0, -130%);
|
||||
-webkit-transform:rotate(150deg) translate(0, -130%);
|
||||
animation-delay: -0.5837s;
|
||||
-webkit-animation-delay: -0.5837s;
|
||||
}
|
||||
div.web-view-spinner div.bar7 {
|
||||
transform:rotate(180deg) translate(0, -130%);
|
||||
-webkit-transform:rotate(180deg) translate(0, -130%);
|
||||
animation-delay: -0.5s;
|
||||
-webkit-animation-delay: -0.5s;
|
||||
}
|
||||
div.web-view-spinner div.bar8 {
|
||||
transform:rotate(210deg) translate(0, -130%);
|
||||
-webkit-transform:rotate(210deg) translate(0, -130%);
|
||||
animation-delay: -0.4167s;
|
||||
-webkit-animation-delay: -0.4167s;
|
||||
}
|
||||
div.web-view-spinner div.bar9 {
|
||||
transform:rotate(240deg) translate(0, -130%);
|
||||
-webkit-transform:rotate(240deg) translate(0, -130%);
|
||||
animation-delay: -0.333s;
|
||||
-webkit-animation-delay: -0.333s;
|
||||
}
|
||||
div.web-view-spinner div.bar10 {
|
||||
transform:rotate(270deg) translate(0, -130%);
|
||||
-webkit-transform:rotate(270deg) translate(0, -130%);
|
||||
animation-delay: -0.2497s;
|
||||
-webkit-animation-delay: -0.2497s;
|
||||
}
|
||||
div.web-view-spinner div.bar11 {
|
||||
transform:rotate(300deg) translate(0, -130%);
|
||||
-webkit-transform:rotate(300deg) translate(0, -130%);
|
||||
animation-delay: -0.167s;
|
||||
-webkit-animation-delay: -0.167s;
|
||||
}
|
||||
div.web-view-spinner div.bar12 {
|
||||
transform:rotate(330deg) translate(0, -130%);
|
||||
-webkit-transform:rotate(330deg) translate(0, -130%);
|
||||
animation-delay: -0.0833s;
|
||||
-webkit-animation-delay: -0.0833s;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user