mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
feat: label grouping, fix: new states response (#254)
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
c978632938
commit
166520dfda
@ -3,7 +3,6 @@ import { DragDropContext, DropResult } from "react-beautiful-dnd";
|
||||
// hooks
|
||||
import useIssueView from "hooks/use-issue-view";
|
||||
// components
|
||||
import StrictModeDroppable from "components/dnd/StrictModeDroppable";
|
||||
import { SingleBoard } from "components/core/board-view/single-board";
|
||||
// types
|
||||
import { IIssue, IProjectMember, IState, UserAuth } from "types";
|
||||
|
||||
@ -14,17 +14,12 @@ import modulesService from "services/modules.service";
|
||||
// hooks
|
||||
import useIssueView from "hooks/use-issue-view";
|
||||
// components
|
||||
import { AllLists, AllBoards, ExistingIssuesListModal } from "components/core";
|
||||
import { AllLists, AllBoards } from "components/core";
|
||||
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
|
||||
// helpers
|
||||
import { getStatesList } from "helpers/state.helper";
|
||||
// types
|
||||
import {
|
||||
CycleIssueResponse,
|
||||
IIssue,
|
||||
IssueResponse,
|
||||
IState,
|
||||
ModuleIssueResponse,
|
||||
UserAuth,
|
||||
} from "types";
|
||||
import { CycleIssueResponse, IIssue, IssueResponse, ModuleIssueResponse, UserAuth } from "types";
|
||||
// fetch-keys
|
||||
import {
|
||||
CYCLE_ISSUES,
|
||||
@ -68,12 +63,13 @@ export const IssuesView: React.FC<Props> = ({
|
||||
|
||||
const { issueView, groupedByIssues, groupByProperty: selectedGroup } = useIssueView(issues);
|
||||
|
||||
const { data: states } = useSWR<IState[]>(
|
||||
const { data: stateGroups } = useSWR(
|
||||
workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
|
||||
workspaceSlug
|
||||
? () => stateService.getStates(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
);
|
||||
const states = getStatesList(stateGroups ?? {});
|
||||
|
||||
const { data: members } = useSWR(
|
||||
projectId ? PROJECT_MEMBERS(projectId as string) : null,
|
||||
|
||||
@ -10,6 +10,8 @@ import stateService from "services/state.service";
|
||||
import { Squares2X2Icon, PlusIcon } from "@heroicons/react/24/outline";
|
||||
// icons
|
||||
import { Combobox, Transition } from "@headlessui/react";
|
||||
// helpers
|
||||
import { getStatesList } from "helpers/state.helper";
|
||||
// fetch keys
|
||||
import { STATE_LIST } from "constants/fetch-keys";
|
||||
|
||||
@ -27,12 +29,13 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
const { data: states } = useSWR(
|
||||
const { data: stateGroups } = useSWR(
|
||||
workspaceSlug && projectId ? STATE_LIST(projectId) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => stateService.getStates(workspaceSlug as string, projectId)
|
||||
: null
|
||||
);
|
||||
const states = getStatesList(stateGroups ?? {});
|
||||
|
||||
const options = states?.map((state) => ({
|
||||
value: state.id,
|
||||
|
||||
@ -4,13 +4,16 @@ import { useRouter } from "next/router";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// react-hook-form
|
||||
import { Control, Controller } from "react-hook-form";
|
||||
// services
|
||||
import { Squares2X2Icon } from "@heroicons/react/24/outline";
|
||||
import stateService from "services/state.service";
|
||||
// ui
|
||||
import { Spinner, CustomSelect } from "components/ui";
|
||||
// icons
|
||||
import { Squares2X2Icon } from "@heroicons/react/24/outline";
|
||||
// helpers
|
||||
import { getStatesList } from "helpers/state.helper";
|
||||
// types
|
||||
import { IIssue, UserAuth } from "types";
|
||||
// constants
|
||||
@ -26,12 +29,13 @@ export const SidebarStateSelect: React.FC<Props> = ({ control, submitChanges, us
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
const { data: states } = useSWR(
|
||||
const { data: stateGroups } = useSWR(
|
||||
workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => stateService.getStates(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
);
|
||||
const states = getStatesList(stateGroups ?? {});
|
||||
|
||||
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
|
||||
|
||||
|
||||
@ -44,7 +44,7 @@ export const SubIssuesListModal: React.FC<Props> = ({ isOpen, handleClose, paren
|
||||
: issues?.results.filter((issue) => issue.name.toLowerCase().includes(query.toLowerCase())) ??
|
||||
[];
|
||||
|
||||
const handleCommandPaletteClose = () => {
|
||||
const handleModalClose = () => {
|
||||
handleClose();
|
||||
setQuery("");
|
||||
};
|
||||
@ -93,7 +93,7 @@ export const SubIssuesListModal: React.FC<Props> = ({ isOpen, handleClose, paren
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
|
||||
<Dialog as="div" className="relative z-20" onClose={handleCommandPaletteClose}>
|
||||
<Dialog as="div" className="relative z-20" onClose={handleModalClose}>
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
|
||||
@ -8,8 +8,9 @@ import stateService from "services/state.service";
|
||||
import { CustomSelect } from "components/ui";
|
||||
// helpers
|
||||
import { addSpaceIfCamelCase } from "helpers/string.helper";
|
||||
import { getStatesList } from "helpers/state.helper";
|
||||
// types
|
||||
import { IIssue, IState } from "types";
|
||||
import { IIssue } from "types";
|
||||
// fetch-keys
|
||||
import { STATE_LIST } from "constants/fetch-keys";
|
||||
|
||||
@ -29,12 +30,11 @@ export const ViewStateSelect: React.FC<Props> = ({
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
const { data: states } = useSWR<IState[]>(
|
||||
workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
|
||||
workspaceSlug
|
||||
? () => stateService.getStates(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
const { data: stateGroups } = useSWR(
|
||||
workspaceSlug && projectId ? STATE_LIST(issue.project) : null,
|
||||
workspaceSlug ? () => stateService.getStates(workspaceSlug as string, issue.project) : null
|
||||
);
|
||||
const states = getStatesList(stateGroups ?? {});
|
||||
|
||||
return (
|
||||
<CustomSelect
|
||||
|
||||
2
apps/app/components/labels/index.ts
Normal file
2
apps/app/components/labels/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export * from "./labels-list-modal";
|
||||
export * from "./single-label";
|
||||
180
apps/app/components/labels/labels-list-modal.tsx
Normal file
180
apps/app/components/labels/labels-list-modal.tsx
Normal file
@ -0,0 +1,180 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR, { mutate } from "swr";
|
||||
|
||||
// headless ui
|
||||
import { Combobox, Dialog, Transition } from "@headlessui/react";
|
||||
// icons
|
||||
import { RectangleStackIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
|
||||
// services
|
||||
import issuesService from "services/issues.service";
|
||||
// types
|
||||
import { IIssueLabels } from "types";
|
||||
// constants
|
||||
import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean;
|
||||
handleClose: () => void;
|
||||
parent: IIssueLabels | undefined;
|
||||
};
|
||||
|
||||
export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }) => {
|
||||
const [query, setQuery] = useState("");
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
const { data: issueLabels, mutate } = useSWR<IIssueLabels[]>(
|
||||
workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
);
|
||||
|
||||
const filteredLabels: IIssueLabels[] =
|
||||
query === ""
|
||||
? issueLabels ?? []
|
||||
: issueLabels?.filter((l) => l.name.toLowerCase().includes(query.toLowerCase())) ?? [];
|
||||
|
||||
const handleModalClose = () => {
|
||||
handleClose();
|
||||
setQuery("");
|
||||
};
|
||||
|
||||
const addChildLabel = async (label: IIssueLabels) => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
mutate(
|
||||
(prevData) =>
|
||||
prevData?.map((l) => {
|
||||
if (l.id === label.id) return { ...l, parent: parent?.id ?? "" };
|
||||
|
||||
return l;
|
||||
}),
|
||||
false
|
||||
);
|
||||
|
||||
await issuesService
|
||||
.patchIssueLabel(workspaceSlug as string, projectId as string, label.id, {
|
||||
parent: parent?.id ?? "",
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
mutate();
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
|
||||
<Dialog as="div" className="relative z-20" onClose={handleModalClose}>
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
|
||||
<Combobox>
|
||||
<div className="relative m-1">
|
||||
<MagnifyingGlassIcon
|
||||
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<Combobox.Input
|
||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
|
||||
placeholder="Search..."
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Combobox.Options
|
||||
static
|
||||
className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
|
||||
>
|
||||
{filteredLabels.length > 0 && (
|
||||
<>
|
||||
<li className="p-2">
|
||||
{query === "" && (
|
||||
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
|
||||
Labels
|
||||
</h2>
|
||||
)}
|
||||
<ul className="text-sm text-gray-700">
|
||||
{filteredLabels.map((label) => {
|
||||
const children = issueLabels?.filter((l) => l.parent === label.id);
|
||||
|
||||
if (
|
||||
(label.parent === "" || label.parent === null) && // issue does not have any other parent
|
||||
label.id !== parent?.id && // issue is not itself
|
||||
children?.length === 0 // issue doesn't have any othe children
|
||||
)
|
||||
return (
|
||||
<Combobox.Option
|
||||
key={label.id}
|
||||
value={{
|
||||
name: label.name,
|
||||
}}
|
||||
className={({ active }) =>
|
||||
`flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${
|
||||
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
|
||||
}`
|
||||
}
|
||||
onClick={() => {
|
||||
addChildLabel(label);
|
||||
handleClose();
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="block flex-shrink-0 h-1.5 w-1.5 rounded-full"
|
||||
style={{
|
||||
backgroundColor: label.color,
|
||||
}}
|
||||
/>
|
||||
{label.name}
|
||||
</Combobox.Option>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
</Combobox.Options>
|
||||
|
||||
{query !== "" && filteredLabels.length === 0 && (
|
||||
<div className="py-14 px-6 text-center sm:px-14">
|
||||
<RectangleStackIcon
|
||||
className="mx-auto h-6 w-6 text-gray-900 text-opacity-40"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<p className="mt-4 text-sm text-gray-900">
|
||||
We couldn{"'"}t find any label with that term. Please try again.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</Combobox>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
);
|
||||
};
|
||||
171
apps/app/components/labels/single-label.tsx
Normal file
171
apps/app/components/labels/single-label.tsx
Normal file
@ -0,0 +1,171 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import { mutate } from "swr";
|
||||
|
||||
// headless ui
|
||||
import { Disclosure, Transition } from "@headlessui/react";
|
||||
// services
|
||||
import issuesService from "services/issues.service";
|
||||
// components
|
||||
import { LabelsListModal } from "components/labels";
|
||||
// ui
|
||||
import { CustomMenu } from "components/ui";
|
||||
// icons
|
||||
import { ChevronDownIcon } from "@heroicons/react/24/outline";
|
||||
// types
|
||||
import { IIssueLabels } from "types";
|
||||
// fetch-keys
|
||||
import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
|
||||
|
||||
type Props = {
|
||||
label: IIssueLabels;
|
||||
issueLabels: IIssueLabels[];
|
||||
editLabel: (label: IIssueLabels) => void;
|
||||
handleLabelDelete: (labelId: string) => void;
|
||||
};
|
||||
|
||||
export const SingleLabel: React.FC<Props> = ({
|
||||
label,
|
||||
issueLabels,
|
||||
editLabel,
|
||||
handleLabelDelete,
|
||||
}) => {
|
||||
const [labelsListModal, setLabelsListModal] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
const children = issueLabels?.filter((l) => l.parent === label.id);
|
||||
|
||||
const removeFromGroup = (label: IIssueLabels) => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
mutate<IIssueLabels[]>(
|
||||
PROJECT_ISSUE_LABELS(projectId as string),
|
||||
(prevData) =>
|
||||
prevData?.map((l) => {
|
||||
if (l.id === label.id) return { ...l, parent: null };
|
||||
|
||||
return l;
|
||||
}),
|
||||
false
|
||||
);
|
||||
|
||||
issuesService
|
||||
.patchIssueLabel(workspaceSlug as string, projectId as string, label.id, {
|
||||
parent: null,
|
||||
})
|
||||
.then((res) => {
|
||||
mutate(PROJECT_ISSUE_LABELS(projectId as string));
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<LabelsListModal
|
||||
isOpen={labelsListModal}
|
||||
handleClose={() => setLabelsListModal(false)}
|
||||
parent={label}
|
||||
/>
|
||||
{children && children.length === 0 ? (
|
||||
label.parent === "" || !label.parent ? (
|
||||
<div className="gap-2 space-y-3 divide-y rounded-md border p-3 md:w-2/3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className="h-3 w-3 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: label.color,
|
||||
}}
|
||||
/>
|
||||
<h6 className="text-sm">{label.name}</h6>
|
||||
</div>
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem onClick={() => setLabelsListModal(true)}>
|
||||
Convert to group
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={() => editLabel(label)}>Edit</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={() => handleLabelDelete(label.id)}>
|
||||
Delete
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
</div>
|
||||
</div>
|
||||
) : null
|
||||
) : (
|
||||
<Disclosure as="div" className="relative z-20 rounded-md border p-3 text-gray-900 md:w-2/3">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div className="flex items-center justify-between gap-2 cursor-pointer">
|
||||
<Disclosure.Button>
|
||||
<div className="flex items-center gap-2">
|
||||
<span>
|
||||
<ChevronDownIcon
|
||||
className={`h-4 w-4 text-gray-500 ${!open ? "-rotate-90 transform" : ""}`}
|
||||
/>
|
||||
</span>
|
||||
<h6 className="text-sm">{label.name}</h6>
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem onClick={() => setLabelsListModal(true)}>
|
||||
Add more labels
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={() => editLabel(label)}>Edit</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={() => handleLabelDelete(label.id)}>
|
||||
Delete
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
</div>
|
||||
<Transition
|
||||
show={open}
|
||||
enter="transition duration-100 ease-out"
|
||||
enterFrom="transform opacity-0"
|
||||
enterTo="transform opacity-100"
|
||||
leave="transition duration-75 ease-out"
|
||||
leaveFrom="transform opacity-100"
|
||||
leaveTo="transform opacity-0"
|
||||
>
|
||||
<Disclosure.Panel>
|
||||
<div className="mt-2 ml-4">
|
||||
{children.map((child) => (
|
||||
<div
|
||||
key={child.id}
|
||||
className="group pl-4 py-1 flex items-center justify-between rounded text-sm hover:bg-gray-100"
|
||||
>
|
||||
<h5 className="flex items-center gap-2">
|
||||
<span
|
||||
className="h-2 w-2 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: child.color,
|
||||
}}
|
||||
/>
|
||||
{child.name}
|
||||
</h5>
|
||||
<div className="opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto">
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem onClick={() => removeFromGroup(child)}>
|
||||
Remove from group
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={() => editLabel(child)}>
|
||||
Edit
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={() => handleLabelDelete(child.id)}>
|
||||
Delete
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -1,151 +0,0 @@
|
||||
// react
|
||||
import React, { useState } from "react";
|
||||
// react-hook-form
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
// headless ui
|
||||
import { Popover, Transition } from "@headlessui/react";
|
||||
// ui
|
||||
import { PencilIcon, RectangleGroupIcon } from "@heroicons/react/24/outline";
|
||||
import { TwitterPicker } from "react-color";
|
||||
import { Button, CustomMenu, Input } from "components/ui";
|
||||
// icons
|
||||
// types
|
||||
import { IIssueLabels } from "types";
|
||||
|
||||
type Props = {
|
||||
label: IIssueLabels;
|
||||
issueLabels: IIssueLabels[];
|
||||
editLabel: (label: IIssueLabels) => void;
|
||||
handleLabelDelete: (labelId: string) => void;
|
||||
};
|
||||
|
||||
const defaultValues: Partial<IIssueLabels> = {
|
||||
name: "",
|
||||
color: "#ff0000",
|
||||
};
|
||||
|
||||
const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLabelDelete }) => {
|
||||
const [newLabelForm, setNewLabelForm] = useState(false);
|
||||
|
||||
const {
|
||||
register,
|
||||
formState: { errors, isSubmitting },
|
||||
watch,
|
||||
control,
|
||||
} = useForm<IIssueLabels>({ defaultValues });
|
||||
|
||||
const children = issueLabels?.filter((l) => l.parent === label.id);
|
||||
|
||||
return (
|
||||
<>
|
||||
{children && children.length === 0 ? (
|
||||
<div className="gap-2 space-y-3 divide-y rounded-md border p-3 md:w-2/3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className="h-3 w-3 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: label.color,
|
||||
}}
|
||||
/>
|
||||
<h6 className="text-sm">{label.name}</h6>
|
||||
</div>
|
||||
<CustomMenu ellipsis>
|
||||
{/* <CustomMenu.MenuItem>Convert to group</CustomMenu.MenuItem> */}
|
||||
<CustomMenu.MenuItem onClick={() => editLabel(label)}>Edit</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem onClick={() => handleLabelDelete(label.id)}>
|
||||
Delete
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
</div>
|
||||
<div className={`flex items-center gap-2 ${newLabelForm ? "" : "hidden"}`}>
|
||||
<div className="h-8 w-8 flex-shrink-0">
|
||||
<Popover className="relative flex h-full w-full items-center justify-center rounded-xl bg-gray-200">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
className={`group inline-flex items-center text-base font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
|
||||
open ? "text-gray-900" : "text-gray-500"
|
||||
}`}
|
||||
>
|
||||
{watch("color") && watch("color") !== "" && (
|
||||
<span
|
||||
className="h-4 w-4 rounded"
|
||||
style={{
|
||||
backgroundColor: watch("color") ?? "green",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Popover.Button>
|
||||
|
||||
<Transition
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Popover.Panel className="absolute top-full left-0 z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
|
||||
<Controller
|
||||
name="color"
|
||||
control={control}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<TwitterPicker
|
||||
color={value}
|
||||
onChange={(value) => onChange(value.hex)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Popover>
|
||||
</div>
|
||||
<div className="flex w-full flex-col justify-center">
|
||||
<Input
|
||||
type="text"
|
||||
id="labelName"
|
||||
name="name"
|
||||
register={register}
|
||||
placeholder="Lable title"
|
||||
validations={{
|
||||
required: "Label title is required",
|
||||
}}
|
||||
error={errors.name}
|
||||
/>
|
||||
</div>
|
||||
<Button type="button" theme="secondary" onClick={() => setNewLabelForm(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="button" disabled={isSubmitting}>
|
||||
{isSubmitting ? "Adding" : "Add"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-md bg-white p-4 text-gray-900">
|
||||
<h3 className="flex items-center gap-2 font-medium leading-5">
|
||||
<RectangleGroupIcon className="h-5 w-5" />
|
||||
This is the label group title
|
||||
</h3>
|
||||
<div className="mt-4 pl-5">
|
||||
<div className="group flex items-center justify-between rounded p-2 text-sm hover:bg-gray-100">
|
||||
<h5 className="flex items-center gap-2">
|
||||
<div className="h-2 w-2 rounded-full bg-red-600" />
|
||||
This is the label title
|
||||
</h5>
|
||||
<button type="button" className="hidden group-hover:block">
|
||||
<PencilIcon className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SingleLabel;
|
||||
21
apps/app/helpers/state.helper.ts
Normal file
21
apps/app/helpers/state.helper.ts
Normal file
@ -0,0 +1,21 @@
|
||||
// types
|
||||
import { IState, StateResponse } from "types";
|
||||
|
||||
export const orderStateGroups = (unorderedStateGroups: StateResponse) =>
|
||||
Object.assign(
|
||||
{ backlog: [], unstarted: [], started: [], completed: [], cancelled: [] },
|
||||
unorderedStateGroups
|
||||
);
|
||||
|
||||
export const getStatesList = (stateGroups: any): IState[] => {
|
||||
// order the unordered state groups first
|
||||
const orderedStateGroups = Object.assign(
|
||||
{ backlog: [], unstarted: [], started: [], completed: [], cancelled: [] },
|
||||
stateGroups
|
||||
);
|
||||
|
||||
// extract states from the groups and return them
|
||||
return Object.keys(orderedStateGroups)
|
||||
.map((group) => [...orderedStateGroups[group].map((state: IState) => state)])
|
||||
.flat();
|
||||
};
|
||||
@ -10,6 +10,7 @@ import stateService from "services/state.service";
|
||||
import { issueViewContext } from "contexts/issue-view.context";
|
||||
// helpers
|
||||
import { groupBy, orderArrayBy } from "helpers/array.helper";
|
||||
import { getStatesList } from "helpers/state.helper";
|
||||
// types
|
||||
import { IIssue, IState } from "types";
|
||||
// fetch-keys
|
||||
@ -35,12 +36,13 @@ const useIssueView = (projectIssues: IIssue[]) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
const { data: states } = useSWR(
|
||||
const { data: stateGroups } = useSWR(
|
||||
workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => stateService.getStates(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
);
|
||||
const states = getStatesList(stateGroups ?? {});
|
||||
|
||||
let groupedByIssues: {
|
||||
[key: string]: IIssue[];
|
||||
|
||||
@ -8,6 +8,7 @@ import userService from "services/user.service";
|
||||
import useUser from "hooks/use-user";
|
||||
// helpers
|
||||
import { groupBy } from "helpers/array.helper";
|
||||
import { getStatesList } from "helpers/state.helper";
|
||||
// types
|
||||
import { Properties, NestedKeyOf, IIssue } from "types";
|
||||
// fetch-keys
|
||||
@ -36,12 +37,13 @@ const useMyIssuesProperties = (issues?: IIssue[]) => {
|
||||
|
||||
const { user } = useUser();
|
||||
|
||||
const { data: states } = useSWR(
|
||||
const { data: stateGroups } = useSWR(
|
||||
workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => stateService.getStates(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
);
|
||||
const states = getStatesList(stateGroups ?? {});
|
||||
|
||||
useEffect(() => {
|
||||
if (!user) return;
|
||||
|
||||
@ -19,14 +19,14 @@ import { requiredAdmin } from "lib/auth";
|
||||
// layouts
|
||||
import AppLayout from "layouts/app-layout";
|
||||
// components
|
||||
import SingleLabel from "components/project/settings/single-label";
|
||||
import { SingleLabel } from "components/labels";
|
||||
// ui
|
||||
import { Button, Input, Loader } from "components/ui";
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
// icons
|
||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||
// types
|
||||
import { IIssueLabels } from "types";
|
||||
import { IIssueLabels, UserAuth } from "types";
|
||||
import type { NextPageContext, NextPage } from "next";
|
||||
// fetch-keys
|
||||
import { PROJECT_DETAILS, PROJECT_ISSUE_LABELS, WORKSPACE_DETAILS } from "constants/fetch-keys";
|
||||
@ -36,28 +36,15 @@ const defaultValues: Partial<IIssueLabels> = {
|
||||
color: "#ff0000",
|
||||
};
|
||||
|
||||
type TLabelSettingsProps = {
|
||||
isMember: boolean;
|
||||
isOwner: boolean;
|
||||
isViewer: boolean;
|
||||
isGuest: boolean;
|
||||
};
|
||||
|
||||
const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
|
||||
const LabelsSettings: NextPage<UserAuth> = (props) => {
|
||||
const { isMember, isOwner, isViewer, isGuest } = props;
|
||||
|
||||
const [newLabelForm, setNewLabelForm] = useState(false);
|
||||
const [labelForm, setLabelForm] = useState(false);
|
||||
const [isUpdating, setIsUpdating] = useState(false);
|
||||
const [labelIdForUpdate, setLabelIdForUpdate] = useState<string | null>(null);
|
||||
|
||||
const {
|
||||
query: { workspaceSlug, projectId },
|
||||
} = useRouter();
|
||||
|
||||
const { data: activeWorkspace } = useSWR(
|
||||
workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
|
||||
() => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
|
||||
);
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
const { data: projectDetails } = useSWR(
|
||||
workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
|
||||
@ -66,6 +53,13 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
|
||||
: null
|
||||
);
|
||||
|
||||
const { data: issueLabels, mutate } = useSWR<IIssueLabels[]>(
|
||||
workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
@ -76,37 +70,37 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
|
||||
watch,
|
||||
} = useForm<IIssueLabels>({ defaultValues });
|
||||
|
||||
const { data: issueLabels, mutate } = useSWR<IIssueLabels[]>(
|
||||
workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
);
|
||||
|
||||
const handleNewLabel: SubmitHandler<IIssueLabels> = async (formData) => {
|
||||
if (!activeWorkspace || !projectDetails || isSubmitting) return;
|
||||
await issuesService
|
||||
.createIssueLabel(activeWorkspace.slug, projectDetails.id, formData)
|
||||
.then((res) => {
|
||||
reset(defaultValues);
|
||||
mutate((prevData) => [...(prevData ?? []), res], false);
|
||||
setNewLabelForm(false);
|
||||
});
|
||||
const newLabel = () => {
|
||||
reset();
|
||||
setIsUpdating(false);
|
||||
setLabelForm(true);
|
||||
};
|
||||
|
||||
const editLabel = (label: IIssueLabels) => {
|
||||
setNewLabelForm(true);
|
||||
setLabelForm(true);
|
||||
setValue("color", label.color);
|
||||
setValue("name", label.name);
|
||||
setIsUpdating(true);
|
||||
setLabelIdForUpdate(label.id);
|
||||
};
|
||||
|
||||
const handleLabelUpdate: SubmitHandler<IIssueLabels> = async (formData) => {
|
||||
if (!activeWorkspace || !projectDetails || isSubmitting) return;
|
||||
const handleLabelCreate: SubmitHandler<IIssueLabels> = async (formData) => {
|
||||
if (!workspaceSlug || !projectDetails || isSubmitting) return;
|
||||
|
||||
await issuesService
|
||||
.patchIssueLabel(activeWorkspace.slug, projectDetails.id, labelIdForUpdate ?? "", formData)
|
||||
.createIssueLabel(workspaceSlug as string, projectDetails.id, formData)
|
||||
.then((res) => {
|
||||
mutate((prevData) => [res, ...(prevData ?? [])], false);
|
||||
reset(defaultValues);
|
||||
setLabelForm(false);
|
||||
});
|
||||
};
|
||||
|
||||
const handleLabelUpdate: SubmitHandler<IIssueLabels> = async (formData) => {
|
||||
if (!workspaceSlug || !projectDetails || isSubmitting) return;
|
||||
|
||||
await issuesService
|
||||
.patchIssueLabel(workspaceSlug as string, projectDetails.id, labelIdForUpdate ?? "", formData)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
reset(defaultValues);
|
||||
@ -115,15 +109,15 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
|
||||
prevData?.map((p) => (p.id === labelIdForUpdate ? { ...p, ...formData } : p)),
|
||||
false
|
||||
);
|
||||
setNewLabelForm(false);
|
||||
setLabelForm(false);
|
||||
});
|
||||
};
|
||||
|
||||
const handleLabelDelete = (labelId: string) => {
|
||||
if (activeWorkspace && projectDetails) {
|
||||
if (workspaceSlug && projectDetails) {
|
||||
mutate((prevData) => prevData?.filter((p) => p.id !== labelId), false);
|
||||
issuesService
|
||||
.deleteIssueLabel(activeWorkspace.slug, projectDetails.id, labelId)
|
||||
.deleteIssueLabel(workspaceSlug as string, projectDetails.id, labelId)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
})
|
||||
@ -154,11 +148,7 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-2 md:w-2/3">
|
||||
<h4 className="text-md mb-1 leading-6 text-gray-900">Manage labels</h4>
|
||||
<Button
|
||||
theme="secondary"
|
||||
className="flex items-center gap-x-1"
|
||||
onClick={() => setNewLabelForm(true)}
|
||||
>
|
||||
<Button theme="secondary" className="flex items-center gap-x-1" onClick={newLabel}>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
New label
|
||||
</Button>
|
||||
@ -166,7 +156,7 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
|
||||
<div className="space-y-5">
|
||||
<div
|
||||
className={`flex items-center gap-2 rounded-md border p-3 md:w-2/3 ${
|
||||
newLabelForm ? "" : "hidden"
|
||||
labelForm ? "" : "hidden"
|
||||
}`}
|
||||
>
|
||||
<div className="h-8 w-8 flex-shrink-0">
|
||||
@ -227,7 +217,14 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
|
||||
error={errors.name}
|
||||
/>
|
||||
</div>
|
||||
<Button type="button" theme="secondary" onClick={() => setNewLabelForm(false)}>
|
||||
<Button
|
||||
type="button"
|
||||
theme="secondary"
|
||||
onClick={() => {
|
||||
reset();
|
||||
setLabelForm(false);
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
{isUpdating ? (
|
||||
@ -239,7 +236,11 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
|
||||
{isSubmitting ? "Updating" : "Update"}
|
||||
</Button>
|
||||
) : (
|
||||
<Button type="button" onClick={handleSubmit(handleNewLabel)} disabled={isSubmitting}>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleSubmit(handleLabelCreate)}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? "Adding" : "Add"}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
import useSWR from "swr";
|
||||
import { PencilSquareIcon, PlusIcon, TrashIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
import { IState } from "types";
|
||||
import useSWR from "swr";
|
||||
|
||||
// services
|
||||
import stateService from "services/state.service";
|
||||
import projectService from "services/project.service";
|
||||
@ -17,22 +16,18 @@ import { CreateUpdateStateInline, DeleteStateModal, StateGroup } from "component
|
||||
// ui
|
||||
import { Loader } from "components/ui";
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
// icons
|
||||
import { PencilSquareIcon, PlusIcon, TrashIcon } from "@heroicons/react/24/outline";
|
||||
// helpers
|
||||
import { addSpaceIfCamelCase } from "helpers/string.helper";
|
||||
import { groupBy } from "helpers/array.helper";
|
||||
import { getStatesList, orderStateGroups } from "helpers/state.helper";
|
||||
// types
|
||||
import { UserAuth } from "types";
|
||||
import type { NextPage, NextPageContext } from "next";
|
||||
// fetch-keys
|
||||
import { PROJECT_DETAILS, STATE_LIST } from "constants/fetch-keys";
|
||||
|
||||
type TStateSettingsProps = {
|
||||
isMember: boolean;
|
||||
isOwner: boolean;
|
||||
isViewer: boolean;
|
||||
isGuest: boolean;
|
||||
};
|
||||
|
||||
const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
|
||||
const StatesSettings: NextPage<UserAuth> = (props) => {
|
||||
const { isMember, isOwner, isViewer, isGuest } = props;
|
||||
|
||||
const [activeGroup, setActiveGroup] = useState<StateGroup>(null);
|
||||
@ -56,16 +51,15 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
|
||||
? () => stateService.getStates(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
);
|
||||
const orderedStateGroups = orderStateGroups(states ?? {});
|
||||
|
||||
const groupedStates: {
|
||||
[key: string]: IState[];
|
||||
} = groupBy(states ?? [], "group");
|
||||
const statesList = getStatesList(orderStateGroups ?? {});
|
||||
|
||||
return (
|
||||
<>
|
||||
<DeleteStateModal
|
||||
isOpen={!!selectDeleteState}
|
||||
data={states?.find((state) => state.id === selectDeleteState) ?? null}
|
||||
data={statesList?.find((state) => state.id === selectDeleteState) ?? null}
|
||||
onClose={() => setSelectDeleteState(null)}
|
||||
/>
|
||||
<AppLayout
|
||||
@ -88,60 +82,23 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
|
||||
</div>
|
||||
<div className="flex flex-col justify-between gap-4">
|
||||
{states && projectDetails ? (
|
||||
Object.keys(groupedStates).map((key) => (
|
||||
<div key={key}>
|
||||
<div className="mb-2 flex w-full justify-between md:w-2/3">
|
||||
<p className="text-md capitalize leading-6 text-gray-900">{key} states</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveGroup(key as keyof StateGroup)}
|
||||
className="flex items-center gap-2 text-xs text-theme"
|
||||
>
|
||||
<PlusIcon className="h-3 w-3 text-theme" />
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-1 rounded-xl border p-1 md:w-2/3">
|
||||
{key === activeGroup && (
|
||||
<CreateUpdateStateInline
|
||||
projectId={projectDetails.id}
|
||||
onClose={() => {
|
||||
setActiveGroup(null);
|
||||
setSelectedState(null);
|
||||
}}
|
||||
workspaceSlug={workspaceSlug as string}
|
||||
data={null}
|
||||
selectedGroup={key as keyof StateGroup}
|
||||
/>
|
||||
)}
|
||||
{groupedStates[key]?.map((state) =>
|
||||
state.id !== selectedState ? (
|
||||
<div
|
||||
key={state.id}
|
||||
className={`flex items-center justify-between gap-2 border-b bg-gray-50 p-3 ${
|
||||
Boolean(activeGroup !== key) ? "last:border-0" : ""
|
||||
}`}
|
||||
Object.keys(orderedStateGroups).map((key) => {
|
||||
if (orderedStateGroups[key].length !== 0)
|
||||
return (
|
||||
<div key={key}>
|
||||
<div className="mb-2 flex w-full justify-between md:w-2/3">
|
||||
<p className="text-md capitalize leading-6 text-gray-900">{key} states</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveGroup(key as keyof StateGroup)}
|
||||
className="flex items-center gap-2 text-xs text-theme"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="h-3 w-3 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: state.color,
|
||||
}}
|
||||
/>
|
||||
<h6 className="text-sm">{addSpaceIfCamelCase(state.name)}</h6>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button type="button" onClick={() => setSelectDeleteState(state.id)}>
|
||||
<TrashIcon className="h-4 w-4 text-red-400" />
|
||||
</button>
|
||||
<button type="button" onClick={() => setSelectedState(state.id)}>
|
||||
<PencilSquareIcon className="h-4 w-4 text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="border-b last:border-b-0" key={state.id}>
|
||||
<PlusIcon className="h-3 w-3 text-theme" />
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-1 rounded-xl border p-1 md:w-2/3">
|
||||
{key === activeGroup && (
|
||||
<CreateUpdateStateInline
|
||||
projectId={projectDetails.id}
|
||||
onClose={() => {
|
||||
@ -149,15 +106,60 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
|
||||
setSelectedState(null);
|
||||
}}
|
||||
workspaceSlug={workspaceSlug as string}
|
||||
data={states?.find((state) => state.id === selectedState) ?? null}
|
||||
data={null}
|
||||
selectedGroup={key as keyof StateGroup}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
{orderedStateGroups[key].map((state) =>
|
||||
state.id !== selectedState ? (
|
||||
<div
|
||||
key={state.id}
|
||||
className={`flex items-center justify-between gap-2 border-b bg-gray-50 p-3 ${
|
||||
Boolean(activeGroup !== key) ? "last:border-0" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="h-3 w-3 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: state.color,
|
||||
}}
|
||||
/>
|
||||
<h6 className="text-sm">{addSpaceIfCamelCase(state.name)}</h6>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectDeleteState(state.id)}
|
||||
>
|
||||
<TrashIcon className="h-4 w-4 text-red-400" />
|
||||
</button>
|
||||
<button type="button" onClick={() => setSelectedState(state.id)}>
|
||||
<PencilSquareIcon className="h-4 w-4 text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="border-b last:border-b-0" key={state.id}>
|
||||
<CreateUpdateStateInline
|
||||
projectId={projectDetails.id}
|
||||
onClose={() => {
|
||||
setActiveGroup(null);
|
||||
setSelectedState(null);
|
||||
}}
|
||||
workspaceSlug={workspaceSlug as string}
|
||||
data={
|
||||
statesList?.find((state) => state.id === selectedState) ?? null
|
||||
}
|
||||
selectedGroup={key as keyof StateGroup}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<Loader className="space-y-5 md:w-2/3">
|
||||
<Loader.Item height="40px" />
|
||||
|
||||
@ -4,7 +4,7 @@ import APIService from "services/api.service";
|
||||
const { NEXT_PUBLIC_API_BASE_URL } = process.env;
|
||||
|
||||
// types
|
||||
import type { IState } from "types";
|
||||
import type { IState, StateResponse } from "types";
|
||||
|
||||
class ProjectStateServices extends APIService {
|
||||
constructor() {
|
||||
@ -19,7 +19,7 @@ class ProjectStateServices extends APIService {
|
||||
});
|
||||
}
|
||||
|
||||
async getStates(workspaceSlug: string, projectId: string): Promise<IState[]> {
|
||||
async getStates(workspaceSlug: string, projectId: string): Promise<StateResponse> {
|
||||
return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/`)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
|
||||
4
apps/app/types/state.d.ts
vendored
4
apps/app/types/state.d.ts
vendored
@ -13,3 +13,7 @@ export interface IState {
|
||||
sequence: number;
|
||||
group: "backlog" | "unstarted" | "started" | "completed" | "cancelled";
|
||||
}
|
||||
|
||||
export interface StateResponse {
|
||||
[key: string]: IState[];
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user