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

feat: create label option in create issue modal (#281)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-02-14 20:05:32 +05:30 committed by GitHub
parent fcba332589
commit 6f0539f01d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 580 additions and 478 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/app/components/account/email-code-form.tsx
View File

@ -114,15 +114,15 @@ export const EmailCodeForm = ({ onSuccess }: any) => {
error={errors.token}
placeholder="Enter code"
/>
{/* <span
className="text-xs outline-none hover:text-theme"
{/* <button
type="button"
className="text-xs outline-none hover:text-theme cursor-pointer"
onClick={() => {
console.log("Triggered");
handleSubmit(onSubmit);
}}
>
Resend code
</span> */}
</button> */}
</div>
)}
<div>

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

@ -11,9 +11,11 @@ type Props = {
states: IState[] | undefined;
members: IProjectMember[] | undefined;
addIssueToState: (groupTitle: string, stateId: string | null) => void;
handleEditIssue: (issue: IIssue) => void;
openIssuesListModal?: (() => void) | null;
handleDeleteIssue: (issue: IIssue) => void;
handleTrashBox: (isDragging: boolean) => void;
removeIssue: ((bridgeId: string) => void) | null;
userAuth: UserAuth;
};
@ -23,9 +25,11 @@ export const AllBoards: React.FC<Props> = ({
states,
members,
addIssueToState,
handleEditIssue,
openIssuesListModal,
handleDeleteIssue,
handleTrashBox,
removeIssue,
userAuth,
}) => {
const { groupedByIssues, groupByProperty: selectedGroup, orderBy } = useIssueView(issues);
@ -57,11 +61,13 @@ export const AllBoards: React.FC<Props> = ({
groupedByIssues={groupedByIssues}
selectedGroup={selectedGroup}
members={members}
handleEditIssue={handleEditIssue}
addIssueToState={() => addIssueToState(singleGroup, stateId)}
handleDeleteIssue={handleDeleteIssue}
openIssuesListModal={openIssuesListModal ?? null}
orderBy={orderBy}
handleTrashBox={handleTrashBox}
removeIssue={removeIssue}
userAuth={userAuth}
/>
);

9
apps/app/components/core/board-view/single-board.tsx
View File

@ -25,11 +25,13 @@ type Props = {
};
selectedGroup: NestedKeyOf<IIssue> | null;
members: IProjectMember[] | undefined;
handleEditIssue: (issue: IIssue) => void;
addIssueToState: () => void;
handleDeleteIssue: (issue: IIssue) => void;
openIssuesListModal?: (() => void) | null;
orderBy: NestedKeyOf<IIssue> | "manual" | null;
handleTrashBox: (isDragging: boolean) => void;
removeIssue: ((bridgeId: string) => void) | null;
userAuth: UserAuth;
};
@ -40,11 +42,13 @@ export const SingleBoard: React.FC<Props> = ({
groupedByIssues,
selectedGroup,
members,
handleEditIssue,
addIssueToState,
handleDeleteIssue,
openIssuesListModal,
orderBy,
handleTrashBox,
removeIssue,
userAuth,
}) => {
// collapse/expand
@ -104,10 +108,15 @@ export const SingleBoard: React.FC<Props> = ({
snapshot={snapshot}
type={type}
issue={issue}
selectedGroup={selectedGroup}
properties={properties}
editIssue={() => handleEditIssue(issue)}
handleDeleteIssue={handleDeleteIssue}
orderBy={orderBy}
handleTrashBox={handleTrashBox}
removeIssue={() => {
removeIssue && removeIssue(issue.bridge);
}}
userAuth={userAuth}
/>
)}

29
apps/app/components/core/board-view/single-issue.tsx
View File

@ -23,6 +23,8 @@ import {
ViewPrioritySelect,
ViewStateSelect,
} from "components/issues/view-select";
// ui
import { CustomMenu } from "components/ui";
// types
import {
CycleIssueResponse,
@ -41,7 +43,10 @@ type Props = {
provided: DraggableProvided;
snapshot: DraggableStateSnapshot;
issue: IIssue;
selectedGroup: NestedKeyOf<IIssue> | null;
properties: Properties;
editIssue: () => void;
removeIssue?: (() => void) | null;
handleDeleteIssue: (issue: IIssue) => void;
orderBy: NestedKeyOf<IIssue> | "manual" | null;
handleTrashBox: (isDragging: boolean) => void;
@ -53,7 +58,10 @@ export const SingleBoardIssue: React.FC<Props> = ({
provided,
snapshot,
issue,
selectedGroup,
properties,
editIssue,
removeIssue,
handleDeleteIssue,
orderBy,
handleTrashBox,
@ -170,13 +178,26 @@ export const SingleBoardIssue: React.FC<Props> = ({
<div className="group/card relative select-none p-2">
{!isNotAllowed && (
<div className="absolute top-1.5 right-1.5 z-10 opacity-0 group-hover/card:opacity-100">
<button
{/* <button
type="button"
className="grid h-7 w-7 place-items-center rounded bg-white p-1 text-red-500 outline-none duration-300 hover:bg-red-50"
onClick={() => handleDeleteIssue(issue)}
>
<TrashIcon className="h-4 w-4" />
</button>
</button> */}
{type && !isNotAllowed && (
<CustomMenu width="auto" ellipsis>
<CustomMenu.MenuItem onClick={editIssue}>Edit</CustomMenu.MenuItem>
{type !== "issue" && removeIssue && (
<CustomMenu.MenuItem onClick={removeIssue}>
<>Remove from {type}</>
</CustomMenu.MenuItem>
)}
<CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
Delete permanently
</CustomMenu.MenuItem>
</CustomMenu>
)}
</div>
)}
<Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
@ -195,7 +216,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
</a>
</Link>
<div className="flex flex-wrap items-center gap-x-1 gap-y-2 text-xs">
{properties.priority && (
{properties.priority && selectedGroup !== "priority" && (
<ViewPrioritySelect
issue={issue}
partialUpdateIssue={partialUpdateIssue}
@ -203,7 +224,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
position="left"
/>
)}
{properties.state && (
{properties.state && selectedGroup !== "state_detail.name" && (
<ViewStateSelect
issue={issue}
partialUpdateIssue={partialUpdateIssue}

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

@ -178,7 +178,15 @@ export const IssuesFilterView: React.FC<Props> = ({ issues }) => {
<div className="space-y-2 py-3">
<h4 className="text-sm text-gray-600">Display Properties</h4>
<div className="flex flex-wrap items-center gap-2">
{Object.keys(properties).map((key) => (
{Object.keys(properties).map((key) => {
if (
issueView === "kanban" &&
((groupByProperty === "state_detail.name" && key === "state") ||
(groupByProperty === "priority" && key === "priority"))
)
return;
return (
<button
key={key}
type="button"
@ -191,7 +199,8 @@ export const IssuesFilterView: React.FC<Props> = ({ issues }) => {
>
{replaceUnderscoreIfSnakeCase(key)}
</button>
))}
);
})}
</div>
</div>
</div>

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

@ -452,9 +452,17 @@ export const IssuesView: React.FC<Props> = ({
states={states}
members={members}
addIssueToState={addIssueToState}
handleEditIssue={handleEditIssue}
openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
handleDeleteIssue={handleDeleteIssue}
handleTrashBox={handleTrashBox}
removeIssue={
type === "cycle"
? removeIssueFromCycle
: type === "module"
? removeIssueFromModule
: null
}
userAuth={userAuth}
/>
)}

7
apps/app/components/core/sidebar/sidebar-progress-stats.tsx
View File

@ -10,6 +10,8 @@ import { Tab } from "@headlessui/react";
// services
import issuesServices from "services/issues.service";
import projectService from "services/project.service";
// hooks
import useLocalStorage from "hooks/use-local-storage";
// components
import { SingleProgressStats } from "components/core";
// ui
@ -20,7 +22,6 @@ import User from "public/user.png";
import { IIssue, IIssueLabels } from "types";
// fetch-keys
import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
import useLocalStorage from "hooks/use-local-storage";
// types
type Props = {
groupedIssues: any;
@ -39,8 +40,10 @@ const stateGroupColours: {
export const SidebarProgressStats: React.FC<Props> = ({ groupedIssues, issues }) => {
const router = useRouter();
const [tab, setTab] = useLocalStorage("tab", "Assignees");
const { workspaceSlug, projectId } = router.query;
const [tab, setTab] = useLocalStorage("tab", "Assignees");
const { data: issueLabels } = useSWR<IIssueLabels[]>(
workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
workspaceSlug && projectId

18
apps/app/components/issues/form.tsx
View File

@ -16,8 +16,9 @@ import {
IssueStateSelect,
} from "components/issues/select";
import { CycleSelect as IssueCycleSelect } from "components/cycles/select";
import { CreateUpdateStateModal } from "components/states";
import { CreateStateModal } from "components/states";
import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
import { CreateLabelModal } from "components/labels";
// ui
import { Button, CustomDatePicker, CustomMenu, Input, Loader } from "components/ui";
// icons
@ -74,6 +75,7 @@ export const IssueForm: FC<IssueFormProps> = ({
const [mostSimilarIssue, setMostSimilarIssue] = useState<IIssue | undefined>();
const [cycleModal, setCycleModal] = useState(false);
const [stateModal, setStateModal] = useState(false);
const [labelModal, setLabelModal] = useState(false);
const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false);
const router = useRouter();
@ -121,7 +123,7 @@ export const IssueForm: FC<IssueFormProps> = ({
<>
{projectId && (
<>
<CreateUpdateStateModal
<CreateStateModal
isOpen={stateModal}
handleClose={() => setStateModal(false)}
projectId={projectId}
@ -131,6 +133,11 @@ export const IssueForm: FC<IssueFormProps> = ({
setIsOpen={setCycleModal}
projectId={projectId}
/>
<CreateLabelModal
isOpen={labelModal}
handleClose={() => setLabelModal(false)}
projectId={projectId}
/>
</>
)}
<form onSubmit={handleSubmit(handleCreateUpdateIssue)}>
@ -281,7 +288,12 @@ export const IssueForm: FC<IssueFormProps> = ({
control={control}
name="labels_list"
render={({ field: { value, onChange } }) => (
<IssueLabelSelect value={value} onChange={onChange} projectId={projectId} />
<IssueLabelSelect
setIsOpen={setLabelModal}
value={value}
onChange={onChange}
projectId={projectId}
/>
)}
/>
<div>

79
apps/app/components/issues/select/label.tsx
View File

@ -1,15 +1,13 @@
import React, { useEffect, useState } from "react";
import React, { useState } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// react-hook-form
import { useForm } from "react-hook-form";
// headless ui
import { Combobox, Transition } from "@headlessui/react";
// icons
import { RectangleGroupIcon, TagIcon } from "@heroicons/react/24/outline";
import { PlusIcon, RectangleGroupIcon, TagIcon } from "@heroicons/react/24/outline";
// services
import issuesServices from "services/issues.service";
// types
@ -18,55 +16,26 @@ import type { IIssueLabels } from "types";
import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
type Props = {
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
value: string[];
onChange: (value: string[]) => void;
projectId: string;
};
const defaultValues: Partial<IIssueLabels> = {
name: "",
};
export const IssueLabelSelect: React.FC<Props> = ({ value, onChange, projectId }) => {
export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange, projectId }) => {
// states
const [query, setQuery] = useState("");
const router = useRouter();
const { workspaceSlug } = router.query;
const [isOpen, setIsOpen] = useState(false);
const { data: issueLabels, mutate: issueLabelsMutate } = useSWR<IIssueLabels[]>(
const { data: issueLabels } = useSWR<IIssueLabels[]>(
projectId ? PROJECT_ISSUE_LABELS(projectId) : null,
workspaceSlug && projectId
? () => issuesServices.getIssueLabels(workspaceSlug as string, projectId)
: null
);
const onSubmit = async (data: IIssueLabels) => {
if (!projectId || !workspaceSlug || isSubmitting) return;
await issuesServices
.createIssueLabel(workspaceSlug as string, projectId as string, data)
.then((response) => {
issueLabelsMutate((prevData) => [...(prevData ?? []), response], false);
setIsOpen(false);
reset(defaultValues);
})
.catch((error) => {
console.log(error);
});
};
const {
formState: { isSubmitting },
setFocus,
reset,
} = useForm<IIssueLabels>({ defaultValues });
useEffect(() => {
isOpen && setFocus("name");
}, [isOpen, setFocus]);
const filteredOptions =
query === ""
? issueLabels
@ -175,48 +144,14 @@ export const IssueLabelSelect: React.FC<Props> = ({ value, onChange, projectId }
) : (
<p className="text-xs text-gray-500 px-2">Loading...</p>
)}
{/* <div className="cursor-default select-none p-2 hover:bg-indigo-50 hover:text-gray-900">
{isOpen ? (
<div className="flex items-center gap-x-1">
<Input
id="name"
name="name"
type="text"
placeholder="Title"
className="w-full"
autoComplete="off"
register={register}
validations={{
required: true,
}}
/>
<button
type="button"
className="grid place-items-center text-green-600"
disabled={isSubmitting}
onClick={handleSubmit(onSubmit)}
>
<PlusIcon className="h-4 w-4" />
</button>
<button
type="button"
className="grid place-items-center text-red-600"
onClick={() => setIsOpen(false)}
>
<XMarkIcon className="h-4 w-4" aria-hidden="true" />
</button>
</div>
) : (
<button
type="button"
className="flex items-center gap-2 w-full"
className="flex select-none w-full items-center gap-2 p-2 text-gray-400 outline-none hover:bg-indigo-50 hover:text-gray-900"
onClick={() => setIsOpen(true)}
>
<PlusIcon className="h-4 w-4 text-gray-400" aria-hidden="true" />
<PlusIcon className="h-3 w-3 text-gray-400" aria-hidden="true" />
<span className="text-xs whitespace-nowrap">Create label</span>
</button>
)}
</div> */}
</div>
</Combobox.Options>
</Transition>

189
apps/app/components/labels/create-label-modal.tsx Normal file
View File

@ -0,0 +1,189 @@
import React, { useEffect } from "react";
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 issuesService from "services/issues.service";
// ui
import { Button, Input } from "components/ui";
// icons
import { ChevronDownIcon } from "@heroicons/react/24/outline";
// types
import type { IIssueLabels, IState } from "types";
// constants
import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
// types
type Props = {
isOpen: boolean;
projectId: string;
handleClose: () => void;
};
const defaultValues: Partial<IState> = {
name: "",
color: "#000000",
};
export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClose }) => {
const router = useRouter();
const { workspaceSlug } = router.query;
const {
register,
formState: { errors, isSubmitting },
handleSubmit,
watch,
control,
reset,
setError,
} = useForm<IIssueLabels>({
defaultValues,
});
const onClose = () => {
handleClose();
reset(defaultValues);
};
const onSubmit = async (formData: IIssueLabels) => {
if (!workspaceSlug) return;
await issuesService
.createIssueLabel(workspaceSlug as string, projectId as string, formData)
.then((res) => {
mutate<IIssueLabels[]>(
PROJECT_ISSUE_LABELS(projectId),
(prevData) => [res, ...(prevData ?? [])],
false
);
onClose();
})
.catch((error) => {
console.log(error);
});
};
return (
<Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-30" onClose={onClose}>
<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-75 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
Create Label
</Dialog.Title>
<div className="mt-8 flex items-center gap-2">
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button
className={`group inline-flex items-center rounded-sm bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
open ? "text-gray-900" : "text-gray-500"
}`}
>
<span>Color</span>
{watch("color") && watch("color") !== "" && (
<span
className="ml-2 h-4 w-4 rounded"
style={{
backgroundColor: watch("color") ?? "green",
}}
/>
)}
<ChevronDownIcon
className={`ml-2 h-5 w-5 group-hover:text-gray-500 ${
open ? "text-gray-600" : "text-gray-400"
}`}
aria-hidden="true"
/>
</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="fixed left-5 z-50 mt-3 w-screen max-w-xs transform 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>
<Input
type="text"
id="name"
name="name"
placeholder="Enter name"
autoComplete="off"
error={errors.name}
register={register}
width="full"
validations={{
required: "Name is required",
}}
/>
</div>
</div>
<div className="mt-5 flex justify-end gap-2">
<Button theme="secondary" onClick={onClose}>
Cancel
</Button>
<Button type="submit" disabled={isSubmitting}>
{isSubmitting ? "Creating Label..." : "Create Label"}
</Button>
</div>
</form>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
);
};

1
apps/app/components/labels/index.ts
View File

@ -1,3 +1,4 @@
export * from "./create-label-modal";
export * from "./create-update-label-inline";
export * from "./labels-list-modal";
export * from "./single-label-group";

4
apps/app/components/modules/delete-module-modal.tsx
View File

@ -65,10 +65,6 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data })
});
};
useEffect(() => {
data && setIsOpen(true);
}, [data, setIsOpen]);
return (
<Transition.Root show={isOpen} as={React.Fragment}>
<Dialog

18
apps/app/components/modules/sidebar.tsx
View File

@ -23,6 +23,7 @@ import modulesService from "services/modules.service";
import useToast from "hooks/use-toast";
// components
import {
DeleteModuleModal,
ModuleLinkModal,
SidebarLeadSelect,
SidebarMembersSelect,
@ -57,16 +58,10 @@ type Props = {
module?: IModule;
isOpen: boolean;
moduleIssues: ModuleIssueResponse[] | undefined;
handleDeleteModule: () => void;
};
export const ModuleDetailsSidebar: React.FC<Props> = ({
issues,
module,
isOpen,
moduleIssues,
handleDeleteModule,
}) => {
export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen, moduleIssues }) => {
const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
const [moduleLinkModal, setModuleLinkModal] = useState(false);
const router = useRouter();
@ -127,6 +122,11 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
handleClose={() => setModuleLinkModal(false)}
module={module}
/>
<DeleteModuleModal
isOpen={moduleDeleteModal}
setIsOpen={setModuleDeleteModal}
data={module}
/>
<div
className={`fixed top-0 ${
isOpen ? "right-0" : "-right-[24rem]"
@ -163,7 +163,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
<button
type="button"
className="rounded-md border border-red-500 p-2 text-red-500 shadow-sm duration-300 hover:bg-red-50 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
onClick={() => handleDeleteModule()}
onClick={() => setModuleDeleteModal(true)}
>
<TrashIcon className="h-3.5 w-3.5" />
</button>

15
apps/app/components/modules/single-module-card.tsx
View File

@ -1,7 +1,6 @@
import React, { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { useRouter } from "next/router";
// components
@ -13,7 +12,7 @@ import { CalendarDaysIcon, TrashIcon } from "@heroicons/react/24/outline";
// helpers
import { renderShortNumericDateFormat } from "helpers/date-time.helper";
// types
import { IModule, SelectModuleType } from "types";
import { IModule } from "types";
// common
import { MODULE_STATUS } from "constants/module";
@ -23,7 +22,6 @@ type Props = {
export const SingleModuleCard: React.FC<Props> = ({ module }) => {
const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
const [selectedModuleForDelete, setSelectedModuleForDelete] = useState<SelectModuleType>();
const router = useRouter();
const { workspaceSlug } = router.query;
@ -31,23 +29,18 @@ export const SingleModuleCard: React.FC<Props> = ({ module }) => {
const handleDeleteModule = () => {
if (!module) return;
setSelectedModuleForDelete({ ...module, actionType: "delete" });
setModuleDeleteModal(true);
};
return (
<>
<DeleteModuleModal
isOpen={
moduleDeleteModal &&
!!selectedModuleForDelete &&
selectedModuleForDelete.actionType === "delete"
}
isOpen={moduleDeleteModal}
setIsOpen={setModuleDeleteModal}
data={selectedModuleForDelete}
data={module}
/>
<div className="group/card h-full w-full relative select-none p-2">
<div className="absolute top-4 right-4 z-50 bg-red-200 opacity-0 group-hover/card:opacity-100">
<div className="absolute top-4 right-4 z-10 bg-red-200 opacity-0 group-hover/card:opacity-100">
<button
type="button"
className="grid h-7 w-7 place-items-center bg-white p-1 text-red-500 outline-none duration-300 hover:bg-red-50"

227
apps/app/components/states/create-state-modal.tsx Normal file
View File

@ -0,0 +1,227 @@
import React, { useEffect } from "react";
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 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/project";
// types
type Props = {
isOpen: boolean;
projectId: string;
handleClose: () => void;
};
const defaultValues: Partial<IState> = {
name: "",
description: "",
color: "#000000",
group: "backlog",
};
export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClose }) => {
const router = useRouter();
const { workspaceSlug } = router.query;
const {
register,
formState: { errors, isSubmitting },
handleSubmit,
watch,
control,
reset,
setError,
} = useForm<IState>({
defaultValues,
});
const onClose = () => {
handleClose();
reset(defaultValues);
};
const onSubmit = async (formData: IState) => {
if (!workspaceSlug) return;
const payload: IState = {
...formData,
};
await stateService
.createState(workspaceSlug as string, projectId, payload)
.then((res) => {
mutate(STATE_LIST(projectId));
onClose();
})
.catch((err) => {
Object.keys(err).map((key) => {
setError(key as keyof IState, {
message: err[key].join(", "),
});
});
});
};
return (
<Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-30" onClose={onClose}>
<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-75 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
Create State
</Dialog.Title>
<div className="mt-2 space-y-3">
<div>
<Input
id="name"
label="Name"
name="name"
type="name"
placeholder="Enter name"
autoComplete="off"
error={errors.name}
register={register}
validations={{
required: "Name is required",
}}
/>
</div>
<div>
<Select
id="group"
label="Group"
name="group"
error={errors.group}
register={register}
validations={{
required: "Group is required",
}}
options={Object.keys(GROUP_CHOICES).map((key) => ({
value: key,
label: GROUP_CHOICES[key as keyof typeof GROUP_CHOICES],
}))}
/>
</div>
<div>
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button
className={`group inline-flex items-center rounded-md bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
open ? "text-gray-900" : "text-gray-500"
}`}
>
<span>Color</span>
{watch("color") && watch("color") !== "" && (
<span
className="ml-2 h-4 w-4 rounded"
style={{
backgroundColor: watch("color") ?? "green",
}}
/>
)}
<ChevronDownIcon
className={`ml-2 h-5 w-5 group-hover:text-gray-500 ${
open ? "text-gray-600" : "text-gray-400"
}`}
aria-hidden="true"
/>
</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="fixed left-5 z-50 mt-3 w-screen max-w-xs transform 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>
<TextArea
id="description"
name="description"
label="Description"
placeholder="Enter description"
error={errors.description}
register={register}
/>
</div>
</div>
</div>
<div className="mt-5 flex justify-end gap-2">
<Button theme="secondary" onClick={onClose}>
Cancel
</Button>
<Button type="submit" disabled={isSubmitting}>
{isSubmitting ? "Creating State..." : "Create State"}
</Button>
</div>
</form>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
);
};

263
apps/app/components/states/create-update-state-modal.tsx
View File

@ -1,263 +0,0 @@
import React, { useEffect } from "react";
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 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/project";
// types
type Props = {
isOpen: boolean;
projectId: string;
data?: IState;
handleClose: () => void;
};
const defaultValues: Partial<IState> = {
name: "",
description: "",
color: "#000000",
group: "backlog",
};
export const CreateUpdateStateModal: React.FC<Props> = ({
isOpen,
data,
projectId,
handleClose,
}) => {
const router = useRouter();
const { workspaceSlug } = router.query;
const {
register,
formState: { errors, isSubmitting },
handleSubmit,
watch,
control,
reset,
setError,
} = useForm<IState>({
defaultValues,
});
useEffect(() => {
if (data) {
reset(data);
} else {
reset(defaultValues);
}
}, [data, reset]);
const onClose = () => {
handleClose();
reset(defaultValues);
};
const onSubmit = async (formData: IState) => {
if (!workspaceSlug) return;
const payload: IState = {
...formData,
};
if (!data) {
await stateService
.createState(workspaceSlug as string, projectId, payload)
.then((res) => {
mutate(STATE_LIST(projectId));
onClose();
})
.catch((err) => {
Object.keys(err).map((key) => {
setError(key as keyof IState, {
message: err[key].join(", "),
});
});
});
} else {
await stateService
.updateState(workspaceSlug as string, projectId, data.id, payload)
.then((res) => {
mutate(STATE_LIST(projectId));
onClose();
})
.catch((err) => {
Object.keys(err).map((key) => {
setError(key as keyof IState, {
message: err[key].join(", "),
});
});
});
}
};
return (
<Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-30" onClose={onClose}>
<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-75 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<div className="mt-3 sm:mt-5">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
{data ? "Update" : "Create"} State
</Dialog.Title>
<div className="mt-2 space-y-3">
<div>
<Input
id="name"
label="Name"
name="name"
type="name"
placeholder="Enter name"
autoComplete="off"
error={errors.name}
register={register}
validations={{
required: "Name is required",
}}
/>
</div>
<div>
<Select
id="group"
label="Group"
name="group"
error={errors.group}
register={register}
validations={{
required: "Group is required",
}}
options={Object.keys(GROUP_CHOICES).map((key) => ({
value: key,
label: GROUP_CHOICES[key as keyof typeof GROUP_CHOICES],
}))}
/>
</div>
<div>
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button
className={`group inline-flex items-center rounded-md bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
open ? "text-gray-900" : "text-gray-500"
}`}
>
<span>Color</span>
{watch("color") && watch("color") !== "" && (
<span
className="ml-2 h-4 w-4 rounded"
style={{
backgroundColor: watch("color") ?? "green",
}}
/>
)}
<ChevronDownIcon
className={`ml-2 h-5 w-5 group-hover:text-gray-500 ${
open ? "text-gray-600" : "text-gray-400"
}`}
aria-hidden="true"
/>
</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="fixed left-5 z-50 mt-3 w-screen max-w-xs transform 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>
<TextArea
id="description"
name="description"
label="Description"
placeholder="Enter description"
error={errors.description}
register={register}
/>
</div>
</div>
</div>
</div>
<div className="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
<Button theme="secondary" onClick={onClose}>
Cancel
</Button>
<Button type="submit" disabled={isSubmitting}>
{data
? isSubmitting
? "Updating State..."
: "Update State"
: isSubmitting
? "Creating State..."
: "Create State"}
</Button>
</div>
</form>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
);
};

2
apps/app/components/states/index.ts
View File

@ -1,4 +1,4 @@
export * from "./create-update-state-inline";
export * from "./create-update-state-modal";
export * from "./create-state-modal";
export * from "./delete-state-modal";
export * from "./single-state";

3
apps/app/contexts/issue-view.context.tsx
View File

@ -58,7 +58,7 @@ type ReducerFunctionType = (state: StateType, action: ReducerActionType) => Stat
export const initialState: StateType = {
issueView: "list",
groupByProperty: null,
orderBy: null,
orderBy: "created_at",
filterIssue: null,
};
@ -122,6 +122,7 @@ export const reducer: ReducerFunctionType = (state, action) => {
...payload,
};
}
default: {
return state;
}

62
apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
View File

@ -23,20 +23,12 @@ import AppLayout from "layouts/app-layout";
import { IssueViewContextProvider } from "contexts/issue-view.context";
// components
import { ExistingIssuesListModal, IssuesFilterView, IssuesView } from "components/core";
import { CreateUpdateIssueModal } from "components/issues";
import { DeleteModuleModal, ModuleDetailsSidebar } from "components/modules";
import { ModuleDetailsSidebar } from "components/modules";
// ui
import { CustomMenu, EmptySpace, EmptySpaceItem, Spinner } from "components/ui";
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
// types
import {
IIssue,
IModule,
ModuleIssueResponse,
SelectIssue,
SelectModuleType,
UserAuth,
} from "types";
import { IModule, ModuleIssueResponse, UserAuth } from "types";
// fetch-keys
import {
@ -47,15 +39,8 @@ import {
} from "constants/fetch-keys";
const SingleModule: React.FC<UserAuth> = (props) => {
const [moduleSidebar, setModuleSidebar] = useState(true);
const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
const [selectedIssues, setSelectedIssues] = useState<SelectIssue>(null);
const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
const [selectedModuleForDelete, setSelectedModuleForDelete] = useState<SelectModuleType>();
const [preloadedData, setPreloadedData] = useState<
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | null
>(null);
const [moduleSidebar, setModuleSidebar] = useState(true);
const router = useRouter();
const { workspaceSlug, projectId, moduleId } = router.query;
@ -119,43 +104,12 @@ const SingleModule: React.FC<UserAuth> = (props) => {
.catch((e) => console.log(e));
};
const openCreateIssueModal = (
issue?: IIssue,
actionType: "create" | "edit" | "delete" = "create"
) => {
if (issue) {
setPreloadedData(null);
setSelectedIssues({ ...issue, actionType });
} else setSelectedIssues(null);
setCreateUpdateIssueModal(true);
};
const openIssuesListModal = () => {
setModuleIssuesListModal(true);
};
const handleDeleteModule = () => {
if (!moduleDetails) return;
setSelectedModuleForDelete({ ...moduleDetails, actionType: "delete" });
setModuleDeleteModal(true);
};
return (
<IssueViewContextProvider>
{moduleId && (
<CreateUpdateIssueModal
isOpen={createUpdateIssueModal && selectedIssues?.actionType !== "delete"}
data={selectedIssues}
prePopulateData={
preloadedData
? { module: moduleId as string, ...preloadedData }
: { module: moduleId as string, ...selectedIssues }
}
handleClose={() => setCreateUpdateIssueModal(false)}
/>
)}
<ExistingIssuesListModal
isOpen={moduleIssuesListModal}
handleClose={() => setModuleIssuesListModal(false)}
@ -163,15 +117,6 @@ const SingleModule: React.FC<UserAuth> = (props) => {
issues={issues?.results.filter((i) => !i.issue_module) ?? []}
handleOnSubmit={handleAddIssuesToModule}
/>
<DeleteModuleModal
isOpen={
moduleDeleteModal &&
!!selectedModuleForDelete &&
selectedModuleForDelete.actionType === "delete"
}
setIsOpen={setModuleDeleteModal}
data={selectedModuleForDelete}
/>
<AppLayout
breadcrumbs={
<Breadcrumbs>
@ -271,7 +216,6 @@ const SingleModule: React.FC<UserAuth> = (props) => {
module={moduleDetails}
isOpen={moduleSidebar}
moduleIssues={moduleIssues}
handleDeleteModule={handleDeleteModule}
/>
</AppLayout>
</IssueViewContextProvider>

43
apps/app/pages/invitations/index.tsx → apps/app/pages/invitations.tsx
View File

@ -3,19 +3,21 @@ import Link from "next/link";
import { useRouter } from "next/router";
import useSWR from "swr";
// icons
import { CubeIcon, PlusIcon } from "@heroicons/react/24/outline";
// lib
import { requiredAuth } from "lib/auth";
// services
import workspaceService from "services/workspace.service";
// hooks
import useUser from "hooks/use-user";
import { requiredAuth } from "lib/auth";
import useToast from "hooks/use-toast";
// layouts
import DefaultLayout from "layouts/default-layout";
// components
import SingleInvitation from "components/workspace/single-invitation";
// ui
import { Button, Spinner, EmptySpace, EmptySpaceItem } from "components/ui";
// icons
import { CubeIcon, PlusIcon } from "@heroicons/react/24/outline";
// types
import type { NextPage, NextPageContext } from "next";
import type { IWorkspaceMemberInvitation } from "types";
@ -27,6 +29,8 @@ const OnBoard: NextPage = () => {
const router = useRouter();
const { setToastAlert } = useToast();
const { data: invitations, mutate: mutateInvitations } = useSWR(
"USER_WORKSPACE_INVITATIONS",
() => workspaceService.userWorkspaceInvitations()
@ -52,6 +56,15 @@ const OnBoard: NextPage = () => {
const submitInvitations = () => {
// userService.updateUserOnBoard();
if (invitationsRespond.length === 0) {
setToastAlert({
type: "error",
title: "Error!",
message: "Please select atleast one invitation.",
});
return;
}
workspaceService
.joinWorkspaces({ invitations: invitationsRespond })
.then(() => {
@ -100,9 +113,13 @@ const OnBoard: NextPage = () => {
))}
</ul>
<div className="mt-6 flex items-center gap-2">
<Button className="w-full" theme="secondary" onClick={() => router.push("/")}>
Skip
<Link href="/">
<a className="w-full">
<Button className="w-full" theme="secondary">
Go to Home
</Button>
</a>
</Link>
<Button className="w-full" onClick={submitInvitations}>
Accept and Continue
</Button>
@ -112,26 +129,20 @@ const OnBoard: NextPage = () => {
<div className="mt-3 flex flex-col gap-y-3">
<h2 className="mb-4 text-2xl font-medium">Your workspaces</h2>
{workspaces.map((workspace) => (
<div
className="mb-2 flex items-center justify-between rounded border px-4 py-2"
key={workspace.id}
>
<Link key={workspace.id} href={workspace.slug}>
<a>
<div className="mb-2 flex items-center justify-between rounded border px-4 py-2">
<div className="flex items-center gap-x-2">
<CubeIcon className="h-5 w-5 text-gray-400" />
<Link href={workspace.slug}>
<a>{workspace.name}</a>
</Link>
{workspace.name}
</div>
<div className="flex items-center gap-x-2">
<p className="text-sm">{workspace.owner.first_name}</p>
</div>
</div>
))}
<Link href="/">
<a>
<Button type="button">Go to workspaces</Button>
</a>
</Link>
))}
</div>
) : (
invitations.length === 0 &&