thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

feat: label grouping, fix: new states response (#254)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-02-08 18:51:03 +05:30 committed by GitHub
parent c978632938
commit 166520dfda
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 539 additions and 303 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/app/components/core/board-view/all-boards.tsx
View File

@ -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";

16
apps/app/components/core/issues-view.tsx
View File

@ -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,

5
apps/app/components/issues/select/state.tsx
View File

@ -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,

8
apps/app/components/issues/sidebar-select/state.tsx
View File

@ -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;

4
apps/app/components/issues/sub-issues-list-modal.tsx
View File

@ -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"

12
apps/app/components/issues/view-select/state.tsx
View File

@ -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
View 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
View 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
View 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>
)}
</>
);
};

151
apps/app/components/project/settings/single-label.tsx
View File

@ -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
View 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();
};

4
apps/app/hooks/use-issue-view.tsx
View File

@ -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[];

4
apps/app/hooks/use-my-issues-filter.tsx
View File

@ -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;

101
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
View File

@ -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>
)}

154
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
View File

@ -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
apps/app/services/state.service.ts
View File

@ -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
View File

@ -13,3 +13,7 @@ export interface IState {
sequence: number;
group: "backlog" | "unstarted" | "started" | "completed" | "cancelled";
}
export interface StateResponse {
[key: string]: IState[];
}