forked from github/plane
refactor: issues folder structure
This commit is contained in:
parent
7e92efee23
commit
8b1bf53831
@ -5,16 +5,16 @@ import { useRouter } from "next/router";
|
||||
|
||||
import useSWR, { mutate } from "swr";
|
||||
|
||||
// headless ui
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
// services
|
||||
import issuesService from "services/issues.service";
|
||||
import workspaceService from "services/workspace.service";
|
||||
import stateService from "services/state.service";
|
||||
// headless ui
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
// components
|
||||
import { DeleteIssueModal } from "components/issues";
|
||||
// ui
|
||||
import { CustomMenu, CustomSelect, AssigneesList, Avatar, CustomDatePicker } from "components/ui";
|
||||
// components
|
||||
import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
|
||||
// helpers
|
||||
import { renderShortNumericDateFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
|
||||
import { addSpaceIfCamelCase } from "helpers/string.helper";
|
||||
@ -152,7 +152,7 @@ const SingleListIssue: React.FC<Props> = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<ConfirmIssueDeletion
|
||||
<DeleteIssueModal
|
||||
handleClose={() => setDeleteIssue(undefined)}
|
||||
isOpen={!!deleteIssue}
|
||||
data={deleteIssue}
|
||||
|
@ -14,7 +14,7 @@ import {
|
||||
// services
|
||||
import issuesServices from "services/issues.service";
|
||||
// components
|
||||
import CommentCard from "components/project/issues/issue-detail/comment/issue-comment-card";
|
||||
import { CommentCard } from "components/issues/comment";
|
||||
// ui
|
||||
import { Loader } from "components/ui";
|
||||
// icons
|
||||
@ -76,7 +76,7 @@ const activityDetails: {
|
||||
},
|
||||
};
|
||||
|
||||
const IssueActivitySection: React.FC<{
|
||||
export const IssueActivitySection: React.FC<{
|
||||
issueActivities: IIssueActivity[];
|
||||
mutate: KeyedMutator<IIssueActivity[]>;
|
||||
}> = ({ issueActivities, mutate }) => {
|
||||
@ -216,7 +216,7 @@ const IssueActivitySection: React.FC<{
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else if ("comment_json" in activity) {
|
||||
} else if ("comment_json" in activity)
|
||||
return (
|
||||
<CommentCard
|
||||
key={activity.id}
|
||||
@ -225,7 +225,6 @@ const IssueActivitySection: React.FC<{
|
||||
handleCommentDeletion={onCommentDelete}
|
||||
/>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
@ -247,5 +246,3 @@ const IssueActivitySection: React.FC<{
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default IssueActivitySection;
|
@ -14,10 +14,9 @@ import stateServices from "services/state.service";
|
||||
import issuesServices from "services/issues.service";
|
||||
import projectService from "services/project.service";
|
||||
// components
|
||||
import SingleBoard from "components/project/issues/BoardView/single-board";
|
||||
import SingleBoard from "components/issues/board-view/single-board";
|
||||
import StrictModeDroppable from "components/dnd/StrictModeDroppable";
|
||||
import { CreateUpdateIssueModal } from "components/issues/modal";
|
||||
import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
|
||||
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
|
||||
// ui
|
||||
import { Spinner } from "components/ui";
|
||||
// types
|
||||
@ -185,7 +184,7 @@ const BoardView: React.FC<Props> = ({ issues, handleDeleteIssue, userAuth }) =>
|
||||
|
||||
return (
|
||||
<>
|
||||
<ConfirmIssueDeletion
|
||||
<DeleteIssueModal
|
||||
isOpen={isIssueDeletionOpen}
|
||||
handleClose={() => setIsIssueDeletionOpen(false)}
|
||||
data={issueDeletionData}
|
@ -28,7 +28,8 @@ const defaultValues: Partial<IIssueComment> = {
|
||||
comment_html: "",
|
||||
comment_json: "",
|
||||
};
|
||||
const AddIssueComment: React.FC<{
|
||||
|
||||
export const AddComment: React.FC<{
|
||||
mutate: KeyedMutator<IIssueActivity[]>;
|
||||
}> = ({ mutate }) => {
|
||||
const {
|
||||
@ -111,5 +112,3 @@ const AddIssueComment: React.FC<{
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddIssueComment;
|
@ -24,7 +24,7 @@ type Props = {
|
||||
handleCommentDeletion: (comment: string) => void;
|
||||
};
|
||||
|
||||
const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion }) => {
|
||||
export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion }) => {
|
||||
const { user } = useUser();
|
||||
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
@ -130,5 +130,3 @@ const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CommentCard;
|
2
apps/app/components/issues/comment/index.ts
Normal file
2
apps/app/components/issues/comment/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export * from "./add-comment";
|
||||
export * from "./comment-card";
|
@ -25,7 +25,7 @@ type Props = {
|
||||
data?: IIssue;
|
||||
};
|
||||
|
||||
const ConfirmIssueDeletion: React.FC<Props> = ({ isOpen, handleClose, data }) => {
|
||||
export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data }) => {
|
||||
const cancelButtonRef = useRef(null);
|
||||
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||
|
||||
@ -43,8 +43,6 @@ const ConfirmIssueDeletion: React.FC<Props> = ({ isOpen, handleClose, data }) =>
|
||||
handleClose();
|
||||
};
|
||||
|
||||
console.log(data);
|
||||
|
||||
const handleDeletion = async () => {
|
||||
setIsDeleteLoading(true);
|
||||
if (!data || !workspaceSlug) return;
|
||||
@ -173,5 +171,3 @@ const ConfirmIssueDeletion: React.FC<Props> = ({ isOpen, handleClose, data }) =>
|
||||
</Transition.Root>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConfirmIssueDeletion;
|
@ -16,7 +16,7 @@ import {
|
||||
IssueStateSelect,
|
||||
} from "components/issues/select";
|
||||
import { CycleSelect as IssueCycleSelect } from "components/cycles/select";
|
||||
import CreateUpdateStateModal from "components/project/issues/BoardView/state/create-update-state-modal";
|
||||
import { CreateUpdateStateModal } from "components/states";
|
||||
import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
|
||||
// ui
|
||||
import { Button, CustomDatePicker, CustomMenu, Input, Loader } from "components/ui";
|
||||
|
@ -1,5 +1,13 @@
|
||||
export * from "./list-item";
|
||||
export * from "./board-view";
|
||||
export * from "./comment";
|
||||
export * from "./activity";
|
||||
export * from "./delete-issue-modal";
|
||||
export * from "./description-form";
|
||||
export * from "./sub-issue-list";
|
||||
export * from "./form";
|
||||
export * from "./list-view";
|
||||
export * from "./modal";
|
||||
export * from "./my-issues-list-item";
|
||||
export * from "./parent-issues-list-modal";
|
||||
export * from "./sidebar";
|
||||
export * from "./sub-issues-list";
|
||||
export * from "./sub-issues-list-modal";
|
||||
|
@ -31,7 +31,7 @@ type Props = {
|
||||
userAuth: UserAuth;
|
||||
};
|
||||
|
||||
const ListView: React.FC<Props> = ({ issues, handleEditIssue, userAuth }) => {
|
||||
export const IssuesListView: React.FC<Props> = ({ issues, handleEditIssue, userAuth }) => {
|
||||
const [isCreateIssuesModalOpen, setIsCreateIssuesModalOpen] = useState(false);
|
||||
const [preloadedData, setPreloadedData] = useState<
|
||||
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
|
||||
@ -180,5 +180,3 @@ const ListView: React.FC<Props> = ({ issues, handleEditIssue, userAuth }) => {
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ListView;
|
@ -16,7 +16,7 @@ import issuesService from "services/issues.service";
|
||||
import useUser from "hooks/use-user";
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import CreateUpdateStateModal from "components/project/issues/BoardView/state/create-update-state-modal";
|
||||
import { CreateUpdateStateModal } from "components/states";
|
||||
import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
|
||||
import { IssueForm } from "components/issues";
|
||||
// common
|
||||
|
@ -24,10 +24,7 @@ type Props = {
|
||||
removeIssue?: () => void;
|
||||
};
|
||||
|
||||
export const IssueListItem: React.FC<Props> = (props) => {
|
||||
// const { type, issue, properties, editIssue, handleDeleteIssue, removeIssue } = props;
|
||||
const { issue, properties } = props;
|
||||
// router
|
||||
export const MyIssuesListItem: React.FC<Props> = ({ issue, properties }) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
@ -21,7 +21,7 @@ type Props = {
|
||||
customDisplay?: JSX.Element;
|
||||
};
|
||||
|
||||
const IssuesListModal: React.FC<Props> = ({
|
||||
export const ParentIssuesListModal: React.FC<Props> = ({
|
||||
isOpen,
|
||||
handleClose: onClose,
|
||||
value,
|
||||
@ -227,5 +227,3 @@ const IssuesListModal: React.FC<Props> = ({
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default IssuesListModal;
|
@ -1,6 +1,6 @@
|
||||
export * from "./assignee";
|
||||
export * from "./label";
|
||||
export * from "./parent-issue";
|
||||
export * from "./parent";
|
||||
export * from "./priority";
|
||||
export * from "./project";
|
||||
export * from "./state";
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
import { Controller, Control } from "react-hook-form";
|
||||
// components
|
||||
import IssuesListModal from "components/project/issues/issues-list-modal";
|
||||
import { ParentIssuesListModal } from "components/issues";
|
||||
// types
|
||||
import type { IIssue } from "types";
|
||||
|
||||
@ -17,7 +17,7 @@ export const IssueParentSelect: React.FC<Props> = ({ control, isOpen, setIsOpen,
|
||||
control={control}
|
||||
name="parent"
|
||||
render={({ field: { onChange } }) => (
|
||||
<IssuesListModal
|
||||
<ParentIssuesListModal
|
||||
isOpen={isOpen}
|
||||
handleClose={() => setIsOpen(false)}
|
||||
onChange={onChange}
|
@ -27,7 +27,7 @@ type Props = {
|
||||
userAuth: UserAuth;
|
||||
};
|
||||
|
||||
const SelectAssignee: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
|
||||
export const SidebarAssigneeSelect: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
@ -143,5 +143,3 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges, userAuth }) =
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SelectAssignee;
|
@ -16,7 +16,7 @@ import issuesService from "services/issues.service";
|
||||
// ui
|
||||
import { Button } from "components/ui";
|
||||
// icons
|
||||
import { FolderIcon, MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
|
||||
import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
|
||||
import { BlockedIcon, LayerDiagonalIcon } from "components/icons";
|
||||
// types
|
||||
import { IIssue, UserAuth } from "types";
|
||||
@ -34,7 +34,12 @@ type Props = {
|
||||
userAuth: UserAuth;
|
||||
};
|
||||
|
||||
const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch, userAuth }) => {
|
||||
export const SidebarBlockedSelect: React.FC<Props> = ({
|
||||
submitChanges,
|
||||
issuesList,
|
||||
watch,
|
||||
userAuth,
|
||||
}) => {
|
||||
const [query, setQuery] = useState("");
|
||||
const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
|
||||
|
||||
@ -301,5 +306,3 @@ const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch, user
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SelectBlocked;
|
@ -34,7 +34,12 @@ type Props = {
|
||||
userAuth: UserAuth;
|
||||
};
|
||||
|
||||
const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch, userAuth }) => {
|
||||
export const SidebarBlockerSelect: React.FC<Props> = ({
|
||||
submitChanges,
|
||||
issuesList,
|
||||
watch,
|
||||
userAuth,
|
||||
}) => {
|
||||
const [query, setQuery] = useState("");
|
||||
const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false);
|
||||
|
||||
@ -299,5 +304,3 @@ const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch, user
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SelectBlocker;
|
@ -22,7 +22,11 @@ type Props = {
|
||||
userAuth: UserAuth;
|
||||
};
|
||||
|
||||
const SelectCycle: React.FC<Props> = ({ issueDetail, handleCycleChange, userAuth }) => {
|
||||
export const SidebarCycleSelect: React.FC<Props> = ({
|
||||
issueDetail,
|
||||
handleCycleChange,
|
||||
userAuth,
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId, issueId } = router.query;
|
||||
|
||||
@ -98,5 +102,3 @@ const SelectCycle: React.FC<Props> = ({ issueDetail, handleCycleChange, userAuth
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SelectCycle;
|
8
apps/app/components/issues/sidebar-select/index.ts
Normal file
8
apps/app/components/issues/sidebar-select/index.ts
Normal file
@ -0,0 +1,8 @@
|
||||
export * from "./assignee";
|
||||
export * from "./blocked";
|
||||
export * from "./blocker";
|
||||
export * from "./cycle";
|
||||
export * from "./module";
|
||||
export * from "./parent";
|
||||
export * from "./priority";
|
||||
export * from "./state";
|
@ -21,7 +21,7 @@ type Props = {
|
||||
handleModuleChange: (module: IModule) => void;
|
||||
};
|
||||
|
||||
const SelectModule: React.FC<Props> = ({ control, handleModuleChange }) => {
|
||||
export const SidebarModuleSelect: React.FC<Props> = ({ control, handleModuleChange }) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
@ -76,5 +76,3 @@ const SelectModule: React.FC<Props> = ({ control, handleModuleChange }) => {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SelectModule;
|
@ -10,7 +10,7 @@ import { UserIcon } from "@heroicons/react/24/outline";
|
||||
// services
|
||||
import issuesServices from "services/issues.service";
|
||||
// components
|
||||
import IssuesListModal from "components/project/issues/issues-list-modal";
|
||||
import { ParentIssuesListModal } from "components/issues";
|
||||
// icons
|
||||
// types
|
||||
import { IIssue, UserAuth } from "types";
|
||||
@ -26,7 +26,7 @@ type Props = {
|
||||
userAuth: UserAuth;
|
||||
};
|
||||
|
||||
const SelectParent: React.FC<Props> = ({
|
||||
export const SidebarParentSelect: React.FC<Props> = ({
|
||||
control,
|
||||
submitChanges,
|
||||
issuesList,
|
||||
@ -61,7 +61,7 @@ const SelectParent: React.FC<Props> = ({
|
||||
control={control}
|
||||
name="parent"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<IssuesListModal
|
||||
<ParentIssuesListModal
|
||||
isOpen={isParentModalOpen}
|
||||
handleClose={() => setIsParentModalOpen(false)}
|
||||
onChange={(val) => {
|
||||
@ -93,5 +93,3 @@ const SelectParent: React.FC<Props> = ({
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SelectParent;
|
@ -19,7 +19,7 @@ type Props = {
|
||||
userAuth: UserAuth;
|
||||
};
|
||||
|
||||
const SelectPriority: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
|
||||
export const SidebarPrioritySelect: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
|
||||
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
|
||||
|
||||
return (
|
||||
@ -65,5 +65,3 @@ const SelectPriority: React.FC<Props> = ({ control, submitChanges, userAuth }) =
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SelectPriority;
|
@ -22,7 +22,7 @@ type Props = {
|
||||
userAuth: UserAuth;
|
||||
};
|
||||
|
||||
const SelectState: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
|
||||
export const SidebarStateSelect: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
@ -100,5 +100,3 @@ const SelectState: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SelectState;
|
@ -15,17 +15,18 @@ import useToast from "hooks/use-toast";
|
||||
// services
|
||||
import issuesServices from "services/issues.service";
|
||||
// components
|
||||
import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
|
||||
import SelectState from "components/project/issues/issue-detail/issue-detail-sidebar/select-state";
|
||||
import SelectPriority from "components/project/issues/issue-detail/issue-detail-sidebar/select-priority";
|
||||
import SelectParent from "components/project/issues/issue-detail/issue-detail-sidebar/select-parent";
|
||||
import SelectCycle from "components/project/issues/issue-detail/issue-detail-sidebar/select-cycle";
|
||||
import SelectAssignee from "components/project/issues/issue-detail/issue-detail-sidebar/select-assignee";
|
||||
import SelectBlocker from "components/project/issues/issue-detail/issue-detail-sidebar/select-blocker";
|
||||
import SelectBlocked from "components/project/issues/issue-detail/issue-detail-sidebar/select-blocked";
|
||||
import {
|
||||
SidebarAssigneeSelect,
|
||||
SidebarBlockedSelect,
|
||||
SidebarBlockerSelect,
|
||||
SidebarCycleSelect,
|
||||
SidebarParentSelect,
|
||||
SidebarPrioritySelect,
|
||||
SidebarStateSelect,
|
||||
} from "components/issues/sidebar-select";
|
||||
import { DeleteIssueModal } from "components/issues";
|
||||
// ui
|
||||
import { Input, Button, Spinner, CustomDatePicker } from "components/ui";
|
||||
import DatePicker from "react-datepicker";
|
||||
// icons
|
||||
import {
|
||||
TagIcon,
|
||||
@ -43,8 +44,6 @@ import type { ICycle, IIssue, IIssueLabels, UserAuth } from "types";
|
||||
// fetch-keys
|
||||
import { PROJECT_ISSUE_LABELS, PROJECT_ISSUES_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
|
||||
|
||||
import "react-datepicker/dist/react-datepicker.css";
|
||||
|
||||
type Props = {
|
||||
control: Control<IIssue, any>;
|
||||
submitChanges: (formData: Partial<IIssue>) => void;
|
||||
@ -58,7 +57,7 @@ const defaultValues: Partial<IIssueLabels> = {
|
||||
colour: "#ff0000",
|
||||
};
|
||||
|
||||
const IssueDetailSidebar: React.FC<Props> = ({
|
||||
export const IssueDetailsSidebar: React.FC<Props> = ({
|
||||
control,
|
||||
submitChanges,
|
||||
issueDetail,
|
||||
@ -128,7 +127,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<ConfirmIssueDeletion
|
||||
<DeleteIssueModal
|
||||
handleClose={() => setDeleteIssueModal(false)}
|
||||
isOpen={deleteIssueModal}
|
||||
data={issueDetail}
|
||||
@ -175,12 +174,24 @@ const IssueDetailSidebar: React.FC<Props> = ({
|
||||
</div>
|
||||
<div className="divide-y-2 divide-gray-100">
|
||||
<div className="py-1">
|
||||
<SelectState control={control} submitChanges={submitChanges} userAuth={userAuth} />
|
||||
<SelectAssignee control={control} submitChanges={submitChanges} userAuth={userAuth} />
|
||||
<SelectPriority control={control} submitChanges={submitChanges} userAuth={userAuth} />
|
||||
<SidebarStateSelect
|
||||
control={control}
|
||||
submitChanges={submitChanges}
|
||||
userAuth={userAuth}
|
||||
/>
|
||||
<SidebarAssigneeSelect
|
||||
control={control}
|
||||
submitChanges={submitChanges}
|
||||
userAuth={userAuth}
|
||||
/>
|
||||
<SidebarPrioritySelect
|
||||
control={control}
|
||||
submitChanges={submitChanges}
|
||||
userAuth={userAuth}
|
||||
/>
|
||||
</div>
|
||||
<div className="py-1">
|
||||
<SelectParent
|
||||
<SidebarParentSelect
|
||||
control={control}
|
||||
submitChanges={submitChanges}
|
||||
issuesList={
|
||||
@ -210,13 +221,13 @@ const IssueDetailSidebar: React.FC<Props> = ({
|
||||
watch={watchIssue}
|
||||
userAuth={userAuth}
|
||||
/>
|
||||
<SelectBlocker
|
||||
<SidebarBlockerSelect
|
||||
submitChanges={submitChanges}
|
||||
issuesList={issues?.results.filter((i) => i.id !== issueDetail?.id) ?? []}
|
||||
watch={watchIssue}
|
||||
userAuth={userAuth}
|
||||
/>
|
||||
<SelectBlocked
|
||||
<SidebarBlockedSelect
|
||||
submitChanges={submitChanges}
|
||||
issuesList={issues?.results.filter((i) => i.id !== issueDetail?.id) ?? []}
|
||||
watch={watchIssue}
|
||||
@ -247,7 +258,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
|
||||
</div>
|
||||
</div>
|
||||
<div className="py-1">
|
||||
<SelectCycle
|
||||
<SidebarCycleSelect
|
||||
issueDetail={issueDetail}
|
||||
handleCycleChange={handleCycleChange}
|
||||
userAuth={userAuth}
|
||||
@ -446,5 +457,3 @@ const IssueDetailSidebar: React.FC<Props> = ({
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default IssueDetailSidebar;
|
@ -17,11 +17,11 @@ import { PROJECT_ISSUES_LIST, SUB_ISSUES } from "constants/fetch-keys";
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean;
|
||||
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
handleClose: () => void;
|
||||
parent: IIssue | undefined;
|
||||
};
|
||||
|
||||
const AddAsSubIssue: React.FC<Props> = ({ isOpen, setIsOpen, parent }) => {
|
||||
export const SubIssuesListModal: React.FC<Props> = ({ isOpen, handleClose, parent }) => {
|
||||
const [query, setQuery] = useState("");
|
||||
|
||||
const router = useRouter();
|
||||
@ -43,7 +43,7 @@ const AddAsSubIssue: React.FC<Props> = ({ isOpen, setIsOpen, parent }) => {
|
||||
[];
|
||||
|
||||
const handleCommandPaletteClose = () => {
|
||||
setIsOpen(false);
|
||||
handleClose();
|
||||
setQuery("");
|
||||
};
|
||||
|
||||
@ -147,7 +147,7 @@ const AddAsSubIssue: React.FC<Props> = ({ isOpen, setIsOpen, parent }) => {
|
||||
}
|
||||
onClick={() => {
|
||||
addAsSubIssue(issue.id);
|
||||
setIsOpen(false);
|
||||
handleClose();
|
||||
}}
|
||||
>
|
||||
<span
|
||||
@ -188,5 +188,3 @@ const AddAsSubIssue: React.FC<Props> = ({ isOpen, setIsOpen, parent }) => {
|
||||
</Transition.Root>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddAsSubIssue;
|
@ -4,8 +4,7 @@ import { Disclosure, Transition } from "@headlessui/react";
|
||||
import { ChevronRightIcon, PlusIcon } from "@heroicons/react/24/outline";
|
||||
// components
|
||||
import { CustomMenu } from "components/ui";
|
||||
import { CreateUpdateIssueModal } from "components/issues";
|
||||
import AddAsSubIssue from "components/project/issues/issue-detail/add-as-sub-issue";
|
||||
import { CreateUpdateIssueModal, SubIssuesListModal } from "components/issues";
|
||||
// types
|
||||
import { IIssue, UserAuth } from "types";
|
||||
|
||||
@ -18,7 +17,7 @@ export interface SubIssueListProps {
|
||||
userAuth: UserAuth;
|
||||
}
|
||||
|
||||
export const SubIssueList: FC<SubIssueListProps> = ({
|
||||
export const SubIssuesList: FC<SubIssueListProps> = ({
|
||||
issues = [],
|
||||
handleSubIssueRemove,
|
||||
parentIssue,
|
||||
@ -28,7 +27,7 @@ export const SubIssueList: FC<SubIssueListProps> = ({
|
||||
}) => {
|
||||
// states
|
||||
const [isIssueModalActive, setIssueModalActive] = useState(false);
|
||||
const [isSubIssueModalActive, setSubIssueModalActive] = useState(false);
|
||||
const [subIssuesListModal, setSubIssuesListModal] = useState(false);
|
||||
const [preloadedData, setPreloadedData] = useState<Partial<IIssue> | null>(null);
|
||||
|
||||
const openIssueModal = () => {
|
||||
@ -40,11 +39,11 @@ export const SubIssueList: FC<SubIssueListProps> = ({
|
||||
};
|
||||
|
||||
const openSubIssueModal = () => {
|
||||
setSubIssueModalActive(true);
|
||||
setSubIssuesListModal(true);
|
||||
};
|
||||
|
||||
const closeSubIssueModal = () => {
|
||||
setSubIssueModalActive(false);
|
||||
setSubIssuesListModal(false);
|
||||
};
|
||||
|
||||
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
|
||||
@ -56,9 +55,9 @@ export const SubIssueList: FC<SubIssueListProps> = ({
|
||||
prePopulateData={{ ...preloadedData }}
|
||||
handleClose={closeIssueModal}
|
||||
/>
|
||||
<AddAsSubIssue
|
||||
isOpen={isSubIssueModalActive}
|
||||
setIsOpen={setSubIssueModalActive}
|
||||
<SubIssuesListModal
|
||||
isOpen={subIssuesListModal}
|
||||
handleClose={() => setSubIssuesListModal(false)}
|
||||
parent={parentIssue}
|
||||
/>
|
||||
<Disclosure defaultOpen={true}>
|
||||
@ -88,7 +87,7 @@ export const SubIssueList: FC<SubIssueListProps> = ({
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
setSubIssueModalActive(true);
|
||||
setSubIssuesListModal(true);
|
||||
}}
|
||||
>
|
||||
Add an existing issue
|
@ -15,7 +15,7 @@ import cyclesService from "services/cycles.service";
|
||||
import useToast from "hooks/use-toast";
|
||||
// ui
|
||||
import { Loader, CustomDatePicker } from "components/ui";
|
||||
//progress-bar
|
||||
// progress-bar
|
||||
import { CircularProgressbar } from "react-circular-progressbar";
|
||||
import "react-circular-progressbar/dist/styles.css";
|
||||
// helpers
|
||||
@ -24,7 +24,7 @@ import { groupBy } from "helpers/array.helper";
|
||||
// types
|
||||
import { CycleIssueResponse, ICycle } from "types";
|
||||
// fetch-keys
|
||||
import { CYCLE_LIST } from "constants/fetch-keys";
|
||||
import { CYCLE_DETAILS } from "constants/fetch-keys";
|
||||
|
||||
type Props = {
|
||||
cycle: ICycle | undefined;
|
||||
@ -57,23 +57,19 @@ const CycleDetailSidebar: React.FC<Props> = ({ cycle, isOpen, cycleIssues }) =>
|
||||
};
|
||||
|
||||
const submitChanges = (data: Partial<ICycle>) => {
|
||||
if (!workspaceSlug || !projectId || !module) return;
|
||||
if (!workspaceSlug || !projectId || !cycleId) return;
|
||||
|
||||
mutate<ICycle[]>(
|
||||
projectId && CYCLE_LIST(projectId as string),
|
||||
(prevData) =>
|
||||
(prevData ?? []).map((tempCycle) => {
|
||||
if (tempCycle.id === cycleId) return { ...tempCycle, ...data };
|
||||
return tempCycle;
|
||||
}),
|
||||
mutate<ICycle>(
|
||||
CYCLE_DETAILS(cycleId as string),
|
||||
(prevData) => ({ ...(prevData as ICycle), ...data }),
|
||||
false
|
||||
);
|
||||
|
||||
cyclesService
|
||||
.patchCycle(workspaceSlug as string, projectId as string, cycle?.id ?? "", data)
|
||||
.patchCycle(workspaceSlug as string, projectId as string, cycleId as string, data)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
mutate(CYCLE_LIST(projectId as string));
|
||||
mutate(CYCLE_DETAILS(cycleId as string));
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
|
@ -1,101 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// headless ui
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
// services
|
||||
import stateServices from "services/state.service";
|
||||
// helpers
|
||||
import { addSpaceIfCamelCase } from "helpers/string.helper";
|
||||
// types
|
||||
import { IIssue, IState } from "types";
|
||||
// fetch-keys
|
||||
import { STATE_LIST } from "constants/fetch-keys";
|
||||
|
||||
type Props = {
|
||||
issue: IIssue;
|
||||
updateIssues: (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
issueId: string,
|
||||
issue: Partial<IIssue>
|
||||
) => void;
|
||||
};
|
||||
|
||||
const ChangeStateDropdown: React.FC<Props> = ({ issue, updateIssues }) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
const { data: states } = useSWR<IState[]>(
|
||||
workspaceSlug ? STATE_LIST(issue.project) : null,
|
||||
workspaceSlug ? () => stateServices.getStates(workspaceSlug as string, issue.project) : null
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Listbox
|
||||
as="div"
|
||||
value={issue.state}
|
||||
onChange={(data: string) => {
|
||||
if (!workspaceSlug) return;
|
||||
updateIssues(workspaceSlug as string, issue.project, issue.id, {
|
||||
state: data,
|
||||
state_detail: states?.find((state) => state.id === data),
|
||||
});
|
||||
}}
|
||||
className="flex-shrink-0"
|
||||
>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div>
|
||||
<Listbox.Button
|
||||
className="inline-flex items-center whitespace-nowrap rounded-full border bg-gray-50 px-2 py-1 text-xs font-medium text-gray-500 hover:bg-gray-100"
|
||||
style={{
|
||||
border: `2px solid ${issue.state_detail.color}`,
|
||||
backgroundColor: `${issue.state_detail.color}20`,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className={`hidden w-16 capitalize sm:block ${
|
||||
issue.state ? "" : "text-gray-900"
|
||||
}`}
|
||||
>
|
||||
{addSpaceIfCamelCase(issue.state_detail.name)}
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={React.Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options className="fixed z-10 mt-1 max-h-28 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
{states?.map((state) => (
|
||||
<Listbox.Option
|
||||
key={state.id}
|
||||
className={({ active }) =>
|
||||
`cursor-pointer select-none px-3 py-2 ${
|
||||
active ? "bg-indigo-50" : "bg-white"
|
||||
}`
|
||||
}
|
||||
value={state.id}
|
||||
>
|
||||
{addSpaceIfCamelCase(state.name)}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChangeStateDropdown;
|
@ -8,13 +8,6 @@ import { mutate } from "swr";
|
||||
// react-hook-form
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
// services
|
||||
import {
|
||||
CalendarDaysIcon,
|
||||
ChartPieIcon,
|
||||
LinkIcon,
|
||||
PlusIcon,
|
||||
TrashIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import modulesService from "services/modules.service";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
@ -23,12 +16,19 @@ import SelectLead from "components/project/modules/module-detail-sidebar/select-
|
||||
import SelectMembers from "components/project/modules/module-detail-sidebar/select-members";
|
||||
import SelectStatus from "components/project/modules/module-detail-sidebar/select-status";
|
||||
import ModuleLinkModal from "components/project/modules/module-link-modal";
|
||||
//progress-bar
|
||||
// progress-bar
|
||||
import { CircularProgressbar } from "react-circular-progressbar";
|
||||
import "react-circular-progressbar/dist/styles.css";
|
||||
// ui
|
||||
import { CustomDatePicker, Loader } from "components/ui";
|
||||
// icons
|
||||
import {
|
||||
CalendarDaysIcon,
|
||||
ChartPieIcon,
|
||||
LinkIcon,
|
||||
PlusIcon,
|
||||
TrashIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
// helpers
|
||||
import { timeAgo } from "helpers/date-time.helper";
|
||||
import { copyTextToClipboard } from "helpers/string.helper";
|
||||
@ -36,9 +36,10 @@ import { groupBy } from "helpers/array.helper";
|
||||
// types
|
||||
import { IModule, ModuleIssueResponse } from "types";
|
||||
// fetch-keys
|
||||
import { MODULE_LIST } from "constants/fetch-keys";
|
||||
import { MODULE_DETAILS } from "constants/fetch-keys";
|
||||
|
||||
const defaultValues: Partial<IModule> = {
|
||||
lead: "",
|
||||
members_list: [],
|
||||
start_date: null,
|
||||
target_date: null,
|
||||
@ -69,14 +70,6 @@ const ModuleDetailSidebar: React.FC<Props> = ({
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (module)
|
||||
reset({
|
||||
...module,
|
||||
members_list: module.members_list ?? module.members_detail?.map((m) => m.id),
|
||||
});
|
||||
}, [module, reset]);
|
||||
|
||||
const groupedIssues = {
|
||||
backlog: [],
|
||||
unstarted: [],
|
||||
@ -87,29 +80,36 @@ const ModuleDetailSidebar: React.FC<Props> = ({
|
||||
};
|
||||
|
||||
const submitChanges = (data: Partial<IModule>) => {
|
||||
if (!workspaceSlug || !projectId || !module) return;
|
||||
if (!workspaceSlug || !projectId || !moduleId) return;
|
||||
|
||||
mutate<IModule[]>(
|
||||
projectId && MODULE_LIST(projectId as string),
|
||||
(prevData) =>
|
||||
(prevData ?? []).map((module) => {
|
||||
if (module.id === moduleId) return { ...module, ...data };
|
||||
return module;
|
||||
}),
|
||||
mutate<IModule>(
|
||||
MODULE_DETAILS(moduleId as string),
|
||||
(prevData) => ({
|
||||
...(prevData as IModule),
|
||||
...data,
|
||||
}),
|
||||
false
|
||||
);
|
||||
|
||||
modulesService
|
||||
.patchModule(workspaceSlug as string, projectId as string, module.id, data)
|
||||
.patchModule(workspaceSlug as string, projectId as string, moduleId as string, data)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
mutate(MODULE_LIST(projectId as string));
|
||||
mutate(MODULE_DETAILS(moduleId as string));
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (module)
|
||||
reset({
|
||||
...module,
|
||||
members_list: module.members_list ?? module.members_detail?.map((m) => m.id),
|
||||
});
|
||||
}, [module, reset]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ModuleLinkModal
|
||||
|
@ -4,18 +4,18 @@ import { useRouter } from "next/router";
|
||||
|
||||
import { mutate } from "swr";
|
||||
|
||||
// react-hook-form
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
// headless ui
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
// hooks
|
||||
// types
|
||||
import type { IModule, ModuleLink } from "types";
|
||||
// services
|
||||
import modulesService from "services/modules.service";
|
||||
// ui
|
||||
import { Button, Input } from "components/ui";
|
||||
// types
|
||||
import type { IModule, ModuleLink } from "types";
|
||||
// fetch-keys
|
||||
import { MODULE_LIST } from "constants/fetch-keys";
|
||||
import { MODULE_DETAILS } from "constants/fetch-keys";
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean;
|
||||
@ -43,23 +43,18 @@ const ModuleLinkModal: React.FC<Props> = ({ isOpen, module, handleClose }) => {
|
||||
});
|
||||
|
||||
const onSubmit = async (formData: ModuleLink) => {
|
||||
if (!workspaceSlug || !projectId || !module) return;
|
||||
if (!workspaceSlug || !projectId || !moduleId) return;
|
||||
|
||||
const previousLinks = module.link_module.map((l) => ({ title: l.title, url: l.url }));
|
||||
const previousLinks = module?.link_module.map((l) => ({ title: l.title, url: l.url }));
|
||||
|
||||
const payload: Partial<IModule> = {
|
||||
links_list: [...previousLinks, formData],
|
||||
links_list: [...(previousLinks ?? []), formData],
|
||||
};
|
||||
|
||||
await modulesService
|
||||
.patchModule(workspaceSlug as string, projectId as string, module.id, payload)
|
||||
.then(() => {
|
||||
mutate<IModule[]>(projectId && MODULE_LIST(projectId as string), (prevData) =>
|
||||
(prevData ?? []).map((module) => {
|
||||
if (module.id === moduleId) return { ...module, ...payload };
|
||||
return module;
|
||||
})
|
||||
);
|
||||
.patchModule(workspaceSlug as string, projectId as string, moduleId as string, payload)
|
||||
.then((res) => {
|
||||
mutate(MODULE_DETAILS(moduleId as string));
|
||||
onClose();
|
||||
})
|
||||
.catch((err) => {
|
||||
|
@ -4,22 +4,24 @@ import { useRouter } from "next/router";
|
||||
|
||||
import { mutate } from "swr";
|
||||
|
||||
// react-hook-form
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
|
||||
// react-color
|
||||
import { TwitterPicker } from "react-color";
|
||||
|
||||
// headless ui
|
||||
import { Dialog, Popover, Transition } from "@headlessui/react";
|
||||
// services
|
||||
import { ChevronDownIcon } from "@heroicons/react/24/outline";
|
||||
import type { IState } from "types";
|
||||
import stateService from "services/state.service";
|
||||
// ui
|
||||
import { Button, Input, Select, TextArea } from "components/ui";
|
||||
// icons
|
||||
import { ChevronDownIcon } from "@heroicons/react/24/outline";
|
||||
// types
|
||||
import type { IState } from "types";
|
||||
// fetch keys
|
||||
import { STATE_LIST } from "constants/fetch-keys";
|
||||
// constants
|
||||
import { GROUP_CHOICES } from "constants/";
|
||||
// ui
|
||||
import { Button, Input, Select, TextArea } from "components/ui";
|
||||
// icons
|
||||
|
||||
// types
|
||||
type Props = {
|
||||
@ -36,7 +38,12 @@ const defaultValues: Partial<IState> = {
|
||||
group: "backlog",
|
||||
};
|
||||
|
||||
const CreateUpdateStateModal: React.FC<Props> = ({ isOpen, data, projectId, handleClose }) => {
|
||||
export const CreateUpdateStateModal: React.FC<Props> = ({
|
||||
isOpen,
|
||||
data,
|
||||
projectId,
|
||||
handleClose,
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
@ -194,7 +201,7 @@ const CreateUpdateStateModal: React.FC<Props> = ({ isOpen, data, projectId, hand
|
||||
style={{
|
||||
backgroundColor: watch("color") ?? "green",
|
||||
}}
|
||||
/>
|
||||
/>
|
||||
)}
|
||||
<ChevronDownIcon
|
||||
className={`ml-2 h-5 w-5 group-hover:text-gray-500 ${
|
||||
@ -266,5 +273,3 @@ const CreateUpdateStateModal: React.FC<Props> = ({ isOpen, data, projectId, hand
|
||||
</Transition.Root>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateUpdateStateModal;
|
@ -28,7 +28,7 @@ type Props = {
|
||||
data: IState | null;
|
||||
};
|
||||
|
||||
const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, onClose, data }) => {
|
||||
export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
|
||||
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||
const [issuesWithThisStateExist, setIssuesWithThisStateExist] = useState(true);
|
||||
|
||||
@ -175,5 +175,3 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, onClose, data }) => {
|
||||
</Transition.Root>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConfirmStateDeletion;
|
3
apps/app/components/states/index.ts
Normal file
3
apps/app/components/states/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export * from "./create-update-state-inline";
|
||||
export * from "./create-update-state-modal";
|
||||
export * from "./delete-state-modal";
|
@ -29,7 +29,7 @@ export const PROJECT_ISSUE_LABELS = (projectId: string) => `PROJECT_ISSUE_LABELS
|
||||
|
||||
export const CYCLE_LIST = (projectId: string) => `CYCLE_LIST_${projectId}`;
|
||||
export const CYCLE_ISSUES = (cycleId: string) => `CYCLE_ISSUES_${cycleId}`;
|
||||
export const CYCLE_DETAIL = "CYCLE_DETAIL";
|
||||
export const CYCLE_DETAILS = (cycleId: string) => `CYCLE_DETAIL_${cycleId}`;
|
||||
|
||||
export const STATE_LIST = (projectId: string) => `STATE_LIST_${projectId}`;
|
||||
export const STATE_DETAIL = "STATE_DETAIL";
|
||||
@ -39,7 +39,7 @@ export const USER_PROJECT_VIEW = (projectId: string) => `USER_PROJECT_VIEW_${pro
|
||||
|
||||
export const MODULE_LIST = (projectId: string) => `MODULE_LIST_${projectId}`;
|
||||
export const MODULE_ISSUES = (moduleId: string) => `MODULE_ISSUES_${moduleId}`;
|
||||
export const MODULE_DETAIL = "MODULE_DETAIL";
|
||||
export const MODULE_DETAILS = (moduleId: string) => `MODULE_DETAIL_${moduleId}`;
|
||||
|
||||
// Issues
|
||||
export const ISSUE_DETAILS = (issueId: string) => `ISSUE_DETAILS_${issueId}`;
|
||||
|
@ -17,7 +17,7 @@ import useIssuesProperties from "hooks/use-issue-properties";
|
||||
// types
|
||||
import { IIssue, Properties } from "types";
|
||||
// components
|
||||
import { IssueListItem } from "components/issues";
|
||||
import { MyIssuesListItem } from "components/issues";
|
||||
// helpers
|
||||
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
|
||||
// types
|
||||
@ -142,7 +142,11 @@ const MyIssuesPage: NextPage = () => {
|
||||
<Disclosure.Panel>
|
||||
<div className="divide-y-2">
|
||||
{myIssues.map((issue: IIssue) => (
|
||||
<IssueListItem key={issue.id} issue={issue} properties={properties} />
|
||||
<MyIssuesListItem
|
||||
key={issue.id}
|
||||
issue={issue}
|
||||
properties={properties}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</Disclosure.Panel>
|
||||
|
@ -13,8 +13,7 @@ import { IssueViewContextProvider } from "contexts/issue-view.context";
|
||||
// components
|
||||
import CyclesListView from "components/project/cycles/list-view";
|
||||
import CyclesBoardView from "components/project/cycles/board-view";
|
||||
import { CreateUpdateIssueModal } from "components/issues";
|
||||
import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
|
||||
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
|
||||
import ExistingIssuesListModal from "components/common/existing-issues-list-modal";
|
||||
import CycleDetailSidebar from "components/project/cycles/cycle-detail-sidebar";
|
||||
import View from "components/core/view";
|
||||
@ -38,6 +37,7 @@ import {
|
||||
PROJECT_ISSUES_LIST,
|
||||
PROJECT_MEMBERS,
|
||||
PROJECT_DETAILS,
|
||||
CYCLE_DETAILS,
|
||||
} from "constants/fetch-keys";
|
||||
|
||||
const SingleCycle: React.FC<UserAuth> = (props) => {
|
||||
@ -77,6 +77,18 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
|
||||
: null
|
||||
);
|
||||
|
||||
const { data: cycleDetails } = useSWR(
|
||||
cycleId ? CYCLE_DETAILS(cycleId as string) : null,
|
||||
workspaceSlug && projectId && cycleId
|
||||
? () =>
|
||||
cycleServices.getCycleDetails(
|
||||
workspaceSlug as string,
|
||||
projectId as string,
|
||||
cycleId as string
|
||||
)
|
||||
: null
|
||||
);
|
||||
|
||||
const { data: cycleIssues } = useSWR<CycleIssueResponse[]>(
|
||||
workspaceSlug && projectId && cycleId ? CYCLE_ISSUES(cycleId as string) : null,
|
||||
workspaceSlug && projectId && cycleId
|
||||
@ -181,7 +193,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
|
||||
issues={issues?.results.filter((i) => !i.issue_cycle) ?? []}
|
||||
handleOnSubmit={handleAddIssuesToCycle}
|
||||
/>
|
||||
<ConfirmIssueDeletion
|
||||
<DeleteIssueModal
|
||||
handleClose={() => setDeleteIssue(undefined)}
|
||||
isOpen={!!deleteIssue}
|
||||
data={issues?.results.find((issue) => issue.id === deleteIssue)}
|
||||
@ -200,7 +212,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
|
||||
label={
|
||||
<>
|
||||
<CyclesIcon className="h-3 w-3" />
|
||||
{cycles?.find((c) => c.id === cycleId)?.name}
|
||||
{cycleDetails?.name}
|
||||
</>
|
||||
}
|
||||
className="ml-1.5"
|
||||
@ -287,7 +299,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
|
||||
</div>
|
||||
)}
|
||||
<CycleDetailSidebar
|
||||
cycle={cycles?.find((c) => c.id === (cycleId as string))}
|
||||
cycle={cycleDetails}
|
||||
isOpen={cycleSidebar}
|
||||
cycleIssues={cycleIssues ?? []}
|
||||
/>
|
||||
|
@ -14,11 +14,15 @@ import { requiredAdmin, requiredAuth } from "lib/auth";
|
||||
// layouts
|
||||
import AppLayout from "layouts/app-layout";
|
||||
// components
|
||||
import AddAsSubIssue from "components/project/issues/issue-detail/add-as-sub-issue";
|
||||
import IssueDetailSidebar from "components/project/issues/issue-detail/issue-detail-sidebar";
|
||||
import AddIssueComment from "components/project/issues/issue-detail/comment/issue-comment-section";
|
||||
import IssueActivitySection from "components/project/issues/issue-detail/activity";
|
||||
import { IssueDescriptionForm, SubIssueList, CreateUpdateIssueModal } from "components/issues";
|
||||
import {
|
||||
IssueDescriptionForm,
|
||||
SubIssuesList,
|
||||
CreateUpdateIssueModal,
|
||||
IssueDetailsSidebar,
|
||||
IssueActivitySection,
|
||||
AddComment,
|
||||
SubIssuesListModal,
|
||||
} from "components/issues";
|
||||
// ui
|
||||
import { Loader, CustomMenu } from "components/ui";
|
||||
import { Breadcrumbs } from "components/breadcrumbs";
|
||||
@ -52,7 +56,7 @@ const defaultValues = {
|
||||
const IssueDetailsPage: NextPage<UserAuth> = (props) => {
|
||||
// states
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isAddAsSubIssueOpen, setIsAddAsSubIssueOpen] = useState(false);
|
||||
const [subIssuesListModal, setSubIssuesListModal] = useState(false);
|
||||
const [preloadedData, setPreloadedData] = useState<
|
||||
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
|
||||
>(undefined);
|
||||
@ -211,10 +215,10 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{isAddAsSubIssueOpen && (
|
||||
<AddAsSubIssue
|
||||
isOpen={isAddAsSubIssueOpen}
|
||||
setIsOpen={setIsAddAsSubIssueOpen}
|
||||
{subIssuesListModal && (
|
||||
<SubIssuesListModal
|
||||
isOpen={subIssuesListModal}
|
||||
handleClose={() => setSubIssuesListModal(false)}
|
||||
parent={issueDetails}
|
||||
/>
|
||||
)}
|
||||
@ -276,7 +280,7 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
|
||||
/>
|
||||
<div className="mt-2">
|
||||
{issueId && workspaceSlug && projectId && subIssues?.length > 0 ? (
|
||||
<SubIssueList
|
||||
<SubIssuesList
|
||||
issues={subIssues}
|
||||
parentIssue={issueDetails}
|
||||
projectId={projectId?.toString()}
|
||||
@ -309,7 +313,7 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={() => {
|
||||
setIsAddAsSubIssueOpen(true);
|
||||
setSubIssuesListModal(true);
|
||||
setPreloadedData({
|
||||
parent: issueDetails.id,
|
||||
actionType: "createIssue",
|
||||
@ -329,11 +333,11 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
|
||||
issueActivities={issueActivities || []}
|
||||
mutate={mutateIssueActivities}
|
||||
/>
|
||||
<AddIssueComment mutate={mutateIssueActivities} />
|
||||
<AddComment mutate={mutateIssueActivities} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="basis-1/3 space-y-5 border-l p-5">
|
||||
<IssueDetailSidebar
|
||||
<IssueDetailsSidebar
|
||||
control={control}
|
||||
issueDetail={issueDetails}
|
||||
submitChanges={submitChanges}
|
||||
|
@ -13,10 +13,8 @@ import AppLayout from "layouts/app-layout";
|
||||
// contexts
|
||||
import { IssueViewContextProvider } from "contexts/issue-view.context";
|
||||
// components
|
||||
import ListView from "components/project/issues/list-view";
|
||||
import BoardView from "components/project/issues/BoardView";
|
||||
import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
|
||||
import { CreateUpdateIssueModal } from "components/issues";
|
||||
import BoardView from "components/issues/board-view";
|
||||
import { CreateUpdateIssueModal, DeleteIssueModal, IssuesListView } from "components/issues";
|
||||
import View from "components/core/view";
|
||||
// ui
|
||||
import { Spinner, EmptySpace, EmptySpaceItem, HeaderButton } from "components/ui";
|
||||
@ -99,7 +97,7 @@ const ProjectIssues: NextPage<UserAuth> = (props) => {
|
||||
handleClose={() => setIsOpen(false)}
|
||||
data={selectedIssue}
|
||||
/>
|
||||
<ConfirmIssueDeletion
|
||||
<DeleteIssueModal
|
||||
handleClose={() => setDeleteIssue(undefined)}
|
||||
isOpen={!!deleteIssue}
|
||||
data={projectIssues?.results.find((issue) => issue.id === deleteIssue)}
|
||||
@ -110,7 +108,7 @@ const ProjectIssues: NextPage<UserAuth> = (props) => {
|
||||
</div>
|
||||
) : projectIssues.count > 0 ? (
|
||||
<>
|
||||
<ListView
|
||||
<IssuesListView
|
||||
issues={projectIssues?.results.filter((p) => p.parent === null) ?? []}
|
||||
handleEditIssue={handleEditIssue}
|
||||
userAuth={props}
|
||||
|
@ -18,10 +18,9 @@ import { IssueViewContextProvider } from "contexts/issue-view.context";
|
||||
import ExistingIssuesListModal from "components/common/existing-issues-list-modal";
|
||||
import ModulesBoardView from "components/project/modules/board-view";
|
||||
import ModulesListView from "components/project/modules/list-view";
|
||||
import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
|
||||
import ModuleDetailSidebar from "components/project/modules/module-detail-sidebar";
|
||||
import ConfirmModuleDeletion from "components/project/modules/confirm-module-deletion";
|
||||
import { CreateUpdateIssueModal } from "components/issues";
|
||||
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
|
||||
import View from "components/core/view";
|
||||
// ui
|
||||
import { CustomMenu, EmptySpace, EmptySpaceItem, Spinner } from "components/ui";
|
||||
@ -46,7 +45,7 @@ import {
|
||||
import { NextPageContext } from "next";
|
||||
// fetch-keys
|
||||
import {
|
||||
MODULE_DETAIL,
|
||||
MODULE_DETAILS,
|
||||
MODULE_ISSUES,
|
||||
MODULE_LIST,
|
||||
PROJECT_ISSUES_LIST,
|
||||
@ -96,8 +95,8 @@ const SingleModule: React.FC<UserAuth> = (props) => {
|
||||
: null
|
||||
);
|
||||
|
||||
const { data: moduleDetail } = useSWR<IModule>(
|
||||
MODULE_DETAIL,
|
||||
const { data: moduleDetails } = useSWR<IModule>(
|
||||
moduleId ? MODULE_DETAILS(moduleId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () =>
|
||||
modulesService.getModuleDetails(
|
||||
@ -181,9 +180,9 @@ const SingleModule: React.FC<UserAuth> = (props) => {
|
||||
};
|
||||
|
||||
const handleDeleteModule = () => {
|
||||
if (!moduleDetail) return;
|
||||
if (!moduleDetails) return;
|
||||
|
||||
setSelectedModuleForDelete({ ...moduleDetail, actionType: "delete" });
|
||||
setSelectedModuleForDelete({ ...moduleDetails, actionType: "delete" });
|
||||
setModuleDeleteModal(true);
|
||||
};
|
||||
|
||||
@ -208,7 +207,7 @@ const SingleModule: React.FC<UserAuth> = (props) => {
|
||||
issues={issues?.results.filter((i) => !i.issue_module) ?? []}
|
||||
handleOnSubmit={handleAddIssuesToModule}
|
||||
/>
|
||||
<ConfirmIssueDeletion
|
||||
<DeleteIssueModal
|
||||
handleClose={() => setDeleteIssue(undefined)}
|
||||
isOpen={!!deleteIssue}
|
||||
data={moduleIssuesArray?.find((issue) => issue.id === deleteIssue)}
|
||||
@ -226,7 +225,7 @@ const SingleModule: React.FC<UserAuth> = (props) => {
|
||||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem
|
||||
title={`${moduleDetail?.project_detail.name ?? "Project"} Modules`}
|
||||
title={`${moduleDetails?.project_detail.name ?? "Project"} Modules`}
|
||||
link={`/${workspaceSlug}/projects/${projectId}/modules`}
|
||||
/>
|
||||
</Breadcrumbs>
|
||||
@ -236,7 +235,7 @@ const SingleModule: React.FC<UserAuth> = (props) => {
|
||||
label={
|
||||
<>
|
||||
<RectangleGroupIcon className="h-3 w-3" />
|
||||
{modules?.find((c) => c.id === moduleId)?.name}
|
||||
{moduleDetails?.name}
|
||||
</>
|
||||
}
|
||||
className="ml-1.5"
|
||||
@ -323,7 +322,7 @@ const SingleModule: React.FC<UserAuth> = (props) => {
|
||||
</div>
|
||||
)}
|
||||
<ModuleDetailSidebar
|
||||
module={modules?.find((m) => m.id === moduleId)}
|
||||
module={moduleDetails}
|
||||
isOpen={moduleSidebar}
|
||||
moduleIssues={moduleIssues}
|
||||
handleDeleteModule={handleDeleteModule}
|
||||
|
@ -13,11 +13,7 @@ import { requiredAdmin } from "lib/auth";
|
||||
// layouts
|
||||
import SettingsLayout from "layouts/settings-layout";
|
||||
// components
|
||||
import ConfirmStateDeletion from "components/project/issues/BoardView/state/confirm-state-delete";
|
||||
import {
|
||||
CreateUpdateStateInline,
|
||||
StateGroup,
|
||||
} from "components/project/issues/BoardView/state/create-update-state-inline";
|
||||
import { CreateUpdateStateInline, DeleteStateModal, StateGroup } from "components/states";
|
||||
// ui
|
||||
import { Loader } from "components/ui";
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
@ -67,7 +63,7 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<ConfirmStateDeletion
|
||||
<DeleteStateModal
|
||||
isOpen={!!selectDeleteState}
|
||||
data={states?.find((state) => state.id === selectDeleteState) ?? null}
|
||||
onClose={() => setSelectDeleteState(null)}
|
||||
|
@ -26,6 +26,18 @@ class ProjectCycleServices extends APIService {
|
||||
});
|
||||
}
|
||||
|
||||
async getCycleDetails(
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
cycleId: string
|
||||
): Promise<ICycle> {
|
||||
return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`)
|
||||
.then((res) => res?.data)
|
||||
.catch((err) => {
|
||||
throw err?.response?.data;
|
||||
});
|
||||
}
|
||||
|
||||
async getCycleIssues(workspaceSlug: string, projectId: string, cycleId: string): Promise<any> {
|
||||
return this.get(
|
||||
`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/`
|
||||
|
Loading…
Reference in New Issue
Block a user