github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: minor ui fixes (#203)

Browse Source 
* feat: added user auth

* fix: minor ui fixes

* refactor: removed unnecessary functions

* fix: build errors
This commit is contained in:
Aaryan Khandelwal 2023-01-29 12:25:20 +05:30 committed by GitHub
parent 8767816966
commit 2cb708c63b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 255 additions and 372 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/app/components/common/board-view/single-issue.tsx
View File

@ -249,6 +249,11 @@ const SingleBoardIssue: React.FC<Props> = ({
)}
</Listbox>
)}
{/* {properties.cycle && !typeId && (
<div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
{issue.issue_cycle ? issue.issue_cycle.cycle_detail.name : "None"}
</div>
)} */}
{properties.due_date && (
<div
className={`group flex flex-shrink-0 cursor-pointer items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${

7
apps/app/components/common/existing-issues-list-modal.tsx
View File

@ -77,11 +77,18 @@ const ExistingIssuesListModal: React.FC<Props> = ({
type: "error",
message: "Please select atleast one issue",
});
return;
}
await handleOnSubmit(data);
handleClose();
setToastAlert({
title: "Success",
type: "success",
message: `Issue${data.issues.length > 1 ? "s" : ""} added successfully`,
});
};
const filteredIssues: IIssue[] =

9
apps/app/components/common/list-view/single-issue.tsx
View File

@ -234,9 +234,14 @@ const SingleListIssue: React.FC<Props> = ({
))}
</CustomSelect>
)}
{/* {properties.cycle && !typeId && (
<div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
{issue.issue_cycle ? issue.issue_cycle.cycle_detail.name : "None"}
</div>
)} */}
{properties.due_date && (
<div
className={`group group relative flex flex-shrink-0 cursor-pointer items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
className={`group relative flex flex-shrink-0 cursor-pointer items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
issue.target_date === null
? ""
: issue.target_date < new Date().toISOString()
@ -261,7 +266,7 @@ const SingleListIssue: React.FC<Props> = ({
</div>
)}
{properties.sub_issue_count && (
<div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
<div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm">
{issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
</div>
)}

2
apps/app/components/issues/modal.tsx
View File

@ -144,7 +144,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
setToastAlert({
title: "Success",
type: "success",
message: `Issue ${data ? "updated" : "created"} successfully`,
message: "Issue created successfully",
});
if (payload.assignees_list?.some((assignee) => assignee === user?.id)) mutate(USER_ISSUE);

20
apps/app/components/project/cycles/confirm-cycle-deletion.tsx
View File

@ -5,12 +5,14 @@ import { useRouter } from "next/router";
import { mutate } from "swr";
// headless ui
import { Dialog, Transition } from "@headlessui/react";
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
// services
import cycleService from "services/cycles.service";
// hooks
import useToast from "hooks/use-toast";
// ui
import { Button } from "components/ui";
// icons
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
// types
import type { ICycle } from "types";
type TConfirmCycleDeletionProps = {
@ -21,15 +23,19 @@ type TConfirmCycleDeletionProps = {
// fetch-keys
import { CYCLE_LIST } from "constants/fetch-keys";
const ConfirmCycleDeletion: React.FC<TConfirmCycleDeletionProps> = (props) => {
const { isOpen, setIsOpen, data } = props;
const ConfirmCycleDeletion: React.FC<TConfirmCycleDeletionProps> = ({
isOpen,
setIsOpen,
data,
}) => {
const cancelButtonRef = useRef(null);
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const router = useRouter();
const { workspaceSlug } = router.query;
const { setToastAlert } = useToast();
useEffect(() => {
data && setIsOpen(true);
}, [data, setIsOpen]);
@ -51,6 +57,12 @@ const ConfirmCycleDeletion: React.FC<TConfirmCycleDeletionProps> = (props) => {
false
);
handleClose();
setToastAlert({
title: "Success",
type: "success",
message: "Cycle deleted successfully",
});
})
.catch((error) => {
console.log(error);

30
apps/app/components/project/cycles/create-update-cycle-modal.tsx
View File

@ -9,6 +9,8 @@ import { Controller, useForm } from "react-hook-form";
import { Dialog, Transition } from "@headlessui/react";
// services
import cycleService from "services/cycles.service";
// hooks
import useToast from "hooks/use-toast";
// ui
import { Button, Input, TextArea, CustomSelect } from "components/ui";
// common
@ -37,6 +39,8 @@ const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, proj
const router = useRouter();
const { workspaceSlug } = router.query;
const { setToastAlert } = useToast();
const {
register,
formState: { errors, isSubmitting },
@ -69,7 +73,13 @@ const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, proj
.createCycle(workspaceSlug as string, projectId, payload)
.then((res) => {
mutate<ICycle[]>(CYCLE_LIST(projectId), (prevData) => [res, ...(prevData ?? [])], false);
handleClose();
setToastAlert({
title: "Success",
type: "success",
message: "Cycle created successfully",
});
})
.catch((err) => {
Object.keys(err).map((key) => {
@ -82,20 +92,14 @@ const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, proj
await cycleService
.updateCycle(workspaceSlug as string, projectId, data.id, payload)
.then((res) => {
mutate<ICycle[]>(
CYCLE_LIST(projectId),
(prevData) => {
const newData = prevData?.map((item) => {
if (item.id === res.id) return res;
return item;
});
return newData;
},
false
);
mutate(CYCLE_LIST(projectId));
handleClose();
setToastAlert({
title: "Success",
type: "success",
message: "Cycle updated successfully",
});
})
.catch((err) => {
Object.keys(err).map((key) => {

20
apps/app/components/project/issues/BoardView/state/confirm-state-delete.tsx
View File

@ -8,16 +8,18 @@ import useSWR, { mutate } from "swr";
import { Dialog, Transition } from "@headlessui/react";
// icons
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
// types
import type { IState } from "types";
// services
import stateServices from "services/state.service";
import issuesServices from "services/issues.service";
// hooks
import useToast from "hooks/use-toast";
// ui
import { Button } from "components/ui";
// helpers
import { groupBy } from "helpers/array.helper";
// fetch api
// types
import type { IState } from "types";
// fetch-keys
import { STATE_LIST, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
type Props = {
@ -33,6 +35,8 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, onClose, data }) => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { setToastAlert } = useToast();
const { data: issues } = useSWR(
workspaceSlug && projectId
? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
@ -61,6 +65,12 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, onClose, data }) => {
false
);
handleClose();
setToastAlert({
title: "Success",
type: "success",
message: "State deleted successfully",
});
})
.catch((error) => {
console.log(error);
@ -78,7 +88,7 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, onClose, data }) => {
<Transition.Root show={isOpen} as={React.Fragment}>
<Dialog
as="div"
className="relative z-10"
className="relative z-20"
initialFocus={cancelButtonRef}
onClose={handleClose}
>
@ -94,7 +104,7 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, onClose, data }) => {
<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="fixed inset-0 z-20 overflow-y-auto">
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<Transition.Child
as={React.Fragment}

40
apps/app/components/project/issues/BoardView/state/create-update-state-inline.tsx
View File

@ -2,20 +2,24 @@ import React, { useEffect } from "react";
import { mutate } from "swr";
// react-hook-form
import { useForm, Controller } from "react-hook-form";
// react-color
import { TwitterPicker } from "react-color";
// headless ui
import { Popover, Transition } from "@headlessui/react";
// constants
import type { IState } from "types";
import { GROUP_CHOICES } from "constants/";
import { STATE_LIST } from "constants/fetch-keys";
// services
import stateService from "services/state.service";
// hooks
import useToast from "hooks/use-toast";
// ui
import { Button, Input, Select } from "components/ui";
// types
import type { IState } from "types";
// fetch-keys
import { STATE_LIST } from "constants/fetch-keys";
// constants
import { GROUP_CHOICES } from "constants/";
type Props = {
workspaceSlug?: string;
@ -40,6 +44,8 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
onClose,
selectedGroup,
}) => {
const { setToastAlert } = useToast();
const {
register,
handleSubmit,
@ -81,6 +87,12 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
.then((res) => {
mutate<IState[]>(STATE_LIST(projectId), (prevData) => [...(prevData ?? []), res]);
handleClose();
setToastAlert({
title: "Success",
type: "success",
message: "State created successfully",
});
})
.catch((err) => {
Object.keys(err).map((key) => {
@ -95,16 +107,14 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
...payload,
})
.then((res) => {
mutate<IState[]>(STATE_LIST(projectId), (prevData) => {
const newData = prevData?.map((item) => {
if (item.id === res.id) {
return res;
}
return item;
});
return newData;
});
mutate(STATE_LIST(projectId));
handleClose();
setToastAlert({
title: "Success",
type: "success",
message: "State updated successfully",
});
})
.catch((err) => {
Object.keys(err).map((key) => {

11
apps/app/components/project/issues/confirm-issue-deletion.tsx
View File

@ -3,20 +3,21 @@ import React, { useEffect, useRef, useState } from "react";
import { useRouter } from "next/router";
import { mutate } from "swr";
// headless ui
import { Dialog, Transition } from "@headlessui/react";
// fetching keys
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
import type { CycleIssueResponse, IIssue, IssueResponse, ModuleIssueResponse } from "types";
import { CYCLE_ISSUES, PROJECT_ISSUES_LIST, MODULE_ISSUES } from "constants/fetch-keys";
// services
import issueServices from "services/issues.service";
// hooks
import useToast from "hooks/use-toast";
// icons
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
// ui
import { Button } from "components/ui";
// types
import type { CycleIssueResponse, IIssue, IssueResponse, ModuleIssueResponse } from "types";
// fetch-keys
import { CYCLE_ISSUES, PROJECT_ISSUES_LIST, MODULE_ISSUES } from "constants/fetch-keys";
type Props = {
isOpen: boolean;
@ -79,12 +80,12 @@ const ConfirmIssueDeletion: React.FC<Props> = (props) => {
);
}
handleClose();
setToastAlert({
title: "Success",
type: "success",
message: "Issue deleted successfully",
});
handleClose();
})
.catch((error) => {
console.log(error);

25
apps/app/components/project/issues/issue-detail/add-as-sub-issue.tsx
View File

@ -11,7 +11,7 @@ import { RectangleStackIcon, MagnifyingGlassIcon } from "@heroicons/react/24/out
// services
import issuesServices from "services/issues.service";
// types
import { IIssue, IssueResponse } from "types";
import { IIssue } from "types";
// constants
import { PROJECT_ISSUES_LIST, SUB_ISSUES } from "constants/fetch-keys";
@ -48,16 +48,16 @@ const AddAsSubIssue: React.FC<Props> = ({ isOpen, setIsOpen, parent }) => {
};
const addAsSubIssue = (issueId: string) => {
if (workspaceSlug && projectId) {
issuesServices
.patchIssue(workspaceSlug as string, projectId as string, issueId, { parent: parent?.id })
.then((res) => {
mutate(SUB_ISSUES(parent?.id ?? ""));
})
.catch((e) => {
console.log(e);
});
}
if (!workspaceSlug || !projectId) return;
issuesServices
.patchIssue(workspaceSlug as string, projectId as string, issueId, { parent: parent?.id })
.then((res) => {
mutate(SUB_ISSUES(parent?.id ?? ""));
})
.catch((e) => {
console.log(e);
});
};
return (
@ -140,6 +140,9 @@ const AddAsSubIssue: React.FC<Props> = ({ isOpen, setIsOpen, parent }) => {
backgroundColor: issue.state_detail.color,
}}
/>
<span className="flex-shrink-0 text-xs text-gray-500">
{issue.project_detail.identifier}-{issue.sequence_id}
</span>
{issue.name}
</Combobox.Option>
);

22
apps/app/components/project/modules/confirm-module-deletion.tsx
View File

@ -1,19 +1,21 @@
// react
import React, { useEffect, useRef, useState } from "react";
// next
import { useRouter } from "next/router";
// swr
import { mutate } from "swr";
// services
// headless ui
import { Dialog, Transition } from "@headlessui/react";
// services
import modulesService from "services/modules.service";
// hooks
import useToast from "hooks/use-toast";
// ui
import { Button } from "components/ui";
// icons
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
// types
import type { IModule } from "types";
import { Button } from "components/ui";
import modulesService from "services/modules.service";
// fetch-keys
import { MODULE_LIST } from "constants/fetch-keys";
@ -31,6 +33,8 @@ const ConfirmModuleDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) =>
query: { workspaceSlug },
} = router;
const { setToastAlert } = useToast();
const cancelButtonRef = useRef(null);
const handleClose = () => {
@ -48,6 +52,12 @@ const ConfirmModuleDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) =>
mutate(MODULE_LIST(data.project));
router.push(`/${workspaceSlug}/projects/${data.project}/modules`);
handleClose();
setToastAlert({
title: "Success",
type: "success",
message: "Module deleted successfully",
});
})
.catch((error) => {
console.log(error);

25
apps/app/components/project/modules/create-update-module-modal/index.tsx
View File

@ -4,11 +4,10 @@ import { useRouter } from "next/router";
import { mutate } from "swr";
// react-hook-form
import { useForm } from "react-hook-form";
// headless ui
import { Dialog, Transition } from "@headlessui/react";
// types
import type { IModule } from "types";
// components
import SelectLead from "components/project/modules/create-update-module-modal/select-lead";
import SelectMembers from "components/project/modules/create-update-module-modal/select-members";
@ -17,9 +16,13 @@ import SelectStatus from "components/project/modules/create-update-module-modal/
import { Button, Input, TextArea } from "components/ui";
// services
import modulesService from "services/modules.service";
// hooks
import useToast from "hooks/use-toast";
// helpers
import { renderDateFormat } from "helpers/date-time.helper";
// fetch keys
// types
import type { IModule } from "types";
// fetch-keys
import { MODULE_LIST } from "constants/fetch-keys";
type Props = {
@ -41,6 +44,8 @@ const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, pro
const router = useRouter();
const { workspaceSlug } = router.query;
const { setToastAlert } = useToast();
const {
register,
formState: { errors, isSubmitting },
@ -65,6 +70,12 @@ const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, pro
.then(() => {
mutate(MODULE_LIST(projectId));
handleClose();
setToastAlert({
title: "Success",
type: "success",
message: "Module created successfully",
});
})
.catch((err) => {
Object.keys(err).map((key) => {
@ -91,6 +102,12 @@ const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, pro
false
);
handleClose();
setToastAlert({
title: "Success",
type: "success",
message: "Module updated successfully",
});
})
.catch((err) => {
Object.keys(err).map((key) => {

2
apps/app/components/rich-text-editor/index.tsx
View File

@ -91,7 +91,7 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
() =>
new Promise(async (resolve, reject) => {
const imageUrl = await fileService
.uploadFile(workspaceSlug as string, formData) // TODO: verify why workspaceSlug is required for uploading a file
.uploadFile(workspaceSlug as string, formData)
.then((response) => response.asset);
resolve({

2
apps/app/constants/fetch-keys.ts
View File

@ -23,7 +23,7 @@ export const PROJECT_ISSUES_DETAILS = (issueId: string) => `PROJECT_ISSUES_DETAI
export const PROJECT_ISSUES_PROPERTIES = (projectId: string) =>
`PROJECT_ISSUES_PROPERTIES_${projectId}`;
export const PROJECT_ISSUES_COMMENTS = (issueId: string) => `PROJECT_ISSUES_COMMENTS_${issueId}`;
export const PROJECT_ISSUES_ACTIVITY = "PROJECT_ISSUES_ACTIVITY";
export const PROJECT_ISSUES_ACTIVITY = (issueId: string) => `PROJECT_ISSUES_ACTIVITY_${issueId}`;
export const PROJECT_ISSUE_BY_STATE = (projectId: string) => `PROJECT_ISSUE_BY_STATE_${projectId}`;
export const PROJECT_ISSUE_LABELS = (projectId: string) => `PROJECT_ISSUE_LABELS_${projectId}`;

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

@ -13,7 +13,7 @@ const initialValues: Properties = {
assignee: true,
priority: false,
due_date: false,
cycle: false,
// cycle: false,
sub_issue_count: false,
};
@ -86,7 +86,7 @@ const useIssuesProperties = (workspaceSlug?: string, projectId?: string) => {
assignee: properties.assignee,
priority: properties.priority,
due_date: properties.due_date,
cycle: properties.cycle,
// cycle: properties.cycle,
sub_issue_count: properties.sub_issue_count,
};

39
apps/app/hooks/use-local-storage.tsx
View File

@ -1,39 +0,0 @@
import { useState, useEffect, useCallback } from "react";
// TODO: No Use of this
const useLocalStorage = <T,>(
key: string,
initialValue?: T extends Function ? never : T | (() => T)
) => {
const [value, setValue] = useState<T | string>("");
useEffect(() => {
const data = window.localStorage.getItem(key);
if (data !== null && data !== "undefined") setValue(JSON.parse(data));
else setValue(typeof initialValue === "function" ? initialValue() : initialValue);
}, [key, initialValue]);
const updateState = useCallback(
(value: T) => {
if (!value) window.localStorage.removeItem(key);
else window.localStorage.setItem(key, JSON.stringify(value));
setValue(value);
window.dispatchEvent(new Event(`local-storage-change-${key}`));
},
[key]
);
const reHydrateState = useCallback(() => {
const data = window.localStorage.getItem(key);
if (data !== null) setValue(JSON.parse(data));
}, [key]);
useEffect(() => {
window.addEventListener(`local-storage-change-${key}`, reHydrateState);
return () => window.removeEventListener(`local-storage-change-${key}`, reHydrateState);
}, [reHydrateState, key]);
return [value, updateState];
};
export default useLocalStorage;

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

@ -21,7 +21,7 @@ const initialValues: Properties = {
assignee: true,
priority: false,
due_date: false,
cycle: false,
// cycle: false,
sub_issue_count: false,
};

156
apps/app/pages/[workspaceSlug]/me/workspace-invites.tsx
View File

@ -1,156 +0,0 @@
// FIXME: remove this page
import React, { useState } from "react";
// next
import Link from "next/link";
import { useRouter } from "next/router";
import useSWR from "swr";
import type { NextPage } from "next";
// services
import workspaceService from "services/workspace.service";
// hoc
// import withAuthWrapper from "lib/hoc/withAuthWrapper";
// layouts
import AppLayout from "layouts/app-layout";
// ui
import { Button } from "components/ui";
// swr
import { USER_WORKSPACES } from "constants/fetch-keys";
const MyWorkspacesInvites: NextPage = () => {
const router = useRouter();
const [invitationsRespond, setInvitationsRespond] = useState<any>([]);
const { data: workspaces } = useSWR(USER_WORKSPACES, () => workspaceService.userWorkspaces(), {
shouldRetryOnError: false,
});
const { data: workspaceInvitations, mutate: mutateInvitations } = useSWR<any[]>(
"WORKSPACE_INVITATIONS",
() => workspaceService.userWorkspaceInvitations()
);
const handleInvitation = (workspace_invitation: any, action: string) => {
if (action === "accepted") {
setInvitationsRespond((prevData: any) => [...prevData, workspace_invitation.workspace.id]);
} else if (action === "withdraw") {
setInvitationsRespond((prevData: any) =>
prevData.filter((item: string) => item !== workspace_invitation.workspace.id)
);
}
};
const submitInvitations = () => {
workspaceService
.joinWorkspaces({ workspace_ids: invitationsRespond })
.then(async (res) => {
console.log(res);
await mutateInvitations();
router.push("/");
})
.catch((err: any) => console.log(err));
};
return (
<AppLayout
meta={{
title: "Plane - My Workspace Invites",
}}
>
<div className="flex h-full w-full flex-col items-center justify-center">
<div className="relative rounded bg-gray-50 px-4 pt-5 pb-4 text-left shadow sm:w-full sm:max-w-2xl sm:p-6">
{(workspaceInvitations as any)?.length > 0 ? (
<>
<div>
<div className="mt-3 sm:mt-5">
<div className="mt-2">
<h2 className="mb-4 text-lg">Workspace Invitations</h2>
<div className="space-y-2">
{workspaceInvitations?.map((item: any) => (
<div className="relative flex items-start" key={item.id}>
<div className="flex h-5 items-center">
<input
id={`${item.id}`}
aria-describedby="workspaces"
name={`${item.id}`}
checked={
item.workspace.accepted ||
invitationsRespond.includes(item.workspace.id)
}
value={item.workspace.name}
onChange={() =>
handleInvitation(
item,
item.accepted
? "withdraw"
: invitationsRespond.includes(item.workspace.id)
? "withdraw"
: "accepted"
)
}
type="checkbox"
className="h-4 w-4 rounded border-gray-300 text-theme focus:ring-indigo-500"
/>
</div>
<div className="ml-3 flex w-full justify-between text-sm">
<label htmlFor={`${item.id}`} className="font-medium text-gray-700">
{item.workspace.name}
</label>
<div>
{invitationsRespond.includes(item.workspace.id) ? (
<div className="flex gap-x-2">
<p>Accepted</p>
<button
type="button"
onClick={() => handleInvitation(item, "withdraw")}
>
Withdraw
</button>
</div>
) : (
<button
type="button"
onClick={() => handleInvitation(item, "accepted")}
>
Join
</button>
)}
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
<div className="mt-4 flex justify-between">
<Link href={workspaces?.length === 0 ? "/create-workspace" : "/"}>
<button type="button" className="text-sm text-gray-700">
Skip
</button>
</Link>
<Button onClick={submitInvitations}>Submit</Button>
</div>
</>
) : (
<div>
<span>No Invitaions Found</span>
<p>
<Link href="/">
<a>Click Here </a>
</Link>
<span>to redirect home</span>
</p>
</div>
)}
</div>
</div>
</AppLayout>
);
};
export default MyWorkspacesInvites;

105
apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
View File

@ -1,12 +1,14 @@
import React, { useCallback, useEffect, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import useSWR, { mutate } from "swr";
// react-hook-form
import { useForm } from "react-hook-form";
import { ChevronLeftIcon, ChevronRightIcon, PlusIcon } from "@heroicons/react/24/outline";
// services
import issuesService from "services/issues.service";
import projectService from "services/project.service";
// lib
import { requiredAuth } from "lib/auth";
// layouts
@ -25,12 +27,13 @@ import {
// ui
import { Loader, HeaderButton, CustomMenu } from "components/ui";
import { Breadcrumbs } from "components/breadcrumbs";
// icons
import { ChevronLeftIcon, ChevronRightIcon, PlusIcon } from "@heroicons/react/24/outline";
// types
import { IIssue } from "types";
import type { NextPage, NextPageContext } from "next";
// fetch-keys
import {
PROJECT_DETAILS,
PROJECT_ISSUES_LIST,
PROJECT_ISSUES_ACTIVITY,
ISSUE_DETAILS,
@ -52,8 +55,6 @@ const defaultValues = {
};
const IssueDetailsPage: NextPage = () => {
const router = useRouter();
const { workspaceSlug, projectId, issueId } = router.query;
// states
const [isOpen, setIsOpen] = useState(false);
const [isAddAsSubIssueOpen, setIsAddAsSubIssueOpen] = useState(false);
@ -61,15 +62,14 @@ const IssueDetailsPage: NextPage = () => {
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
>(undefined);
const router = useRouter();
const { workspaceSlug, projectId, issueId } = router.query;
const { data: issueDetails, mutate: mutateIssueDetails } = useSWR<IIssue | undefined>(
issueId && workspaceSlug && projectId ? ISSUE_DETAILS(issueId as string) : null,
issueId && workspaceSlug && projectId
workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
workspaceSlug && projectId && issueId
? () =>
issuesService.retrieve(
workspaceSlug?.toString(),
projectId?.toString(),
issueId?.toString()
)
issuesService.retrieve(workspaceSlug as string, projectId as string, issueId as string)
: null
);
@ -81,13 +81,6 @@ const IssueDetailsPage: NextPage = () => {
: null
);
const { data: activeProject } = useSWR(
workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
workspaceSlug && projectId
? () => projectService.getProject(workspaceSlug as string, projectId as string)
: null
);
const { data: issues } = useSWR(
workspaceSlug && projectId
? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
@ -98,7 +91,7 @@ const IssueDetailsPage: NextPage = () => {
);
const { data: issueActivities, mutate: mutateIssueActivities } = useSWR(
workspaceSlug && projectId && issueId ? PROJECT_ISSUES_ACTIVITY : null,
workspaceSlug && projectId && issueId ? PROJECT_ISSUES_ACTIVITY(issueId as string) : null,
workspaceSlug && projectId && issueId
? () =>
issuesService.getIssueActivities(
@ -141,7 +134,16 @@ const IssueDetailsPage: NextPage = () => {
const submitChanges = useCallback(
(formData: Partial<IIssue>) => {
if (!workspaceSlug || !activeProject || !issueId) return;
if (!workspaceSlug || !projectId || !issueId) return;
mutate(
ISSUE_DETAILS(issueId as string),
(prevData: IIssue) => ({
...prevData,
...formData,
}),
false
);
const payload = { ...formData };
issuesService
@ -154,21 +156,21 @@ const IssueDetailsPage: NextPage = () => {
console.error(e);
});
},
[activeProject, workspaceSlug, issueId, projectId, mutateIssueDetails, mutateIssueActivities]
[workspaceSlug, issueId, projectId, mutateIssueDetails, mutateIssueActivities]
);
const handleSubIssueRemove = (issueId: string) => {
if (workspaceSlug && activeProject) {
issuesService
.patchIssue(workspaceSlug as string, activeProject.id, issueId, { parent: null })
.then((res) => {
mutate(SUB_ISSUES(issueDetails?.id ?? ""));
mutateIssueActivities();
})
.catch((e) => {
console.error(e);
});
}
if (!workspaceSlug || !projectId) return;
issuesService
.patchIssue(workspaceSlug as string, projectId as string, issueId, { parent: null })
.then((res) => {
mutate(SUB_ISSUES(issueDetails?.id ?? ""));
mutateIssueActivities();
})
.catch((e) => {
console.error(e);
});
};
/**
@ -177,14 +179,14 @@ const IssueDetailsPage: NextPage = () => {
*/
const handleDescriptionFormSubmit = useCallback(
(values: IssueDescriptionFormValues) => {
if (workspaceSlug && projectId && issueId) {
issuesService
.updateIssue(workspaceSlug?.toString(), projectId.toString(), issueId.toString(), values)
.then((res) => {
console.log(res);
mutateIssueActivities();
});
}
if (!workspaceSlug || !projectId || !issueId) return;
issuesService
.updateIssue(workspaceSlug as string, projectId as string, issueId as string, values)
.then((res) => {
console.log(res);
mutateIssueActivities();
});
},
[workspaceSlug, projectId, issueId, mutateIssueActivities]
);
@ -196,11 +198,11 @@ const IssueDetailsPage: NextPage = () => {
breadcrumbs={
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
title={`${activeProject?.name ?? "Project"} Issues`}
link={`/${workspaceSlug}/projects/${activeProject?.id}/issues`}
title={`${issueDetails?.project_detail.name ?? "Project"} Issues`}
link={`/${workspaceSlug}/projects/${projectId as string}/issues`}
/>
<Breadcrumbs.BreadcrumbItem
title={`Issue ${activeProject?.identifier ?? "Project"}-${
title={`Issue ${issueDetails?.project_detail.identifier ?? "Project"}-${
issueDetails?.sequence_id ?? "..."
} Details`}
/>
@ -249,14 +251,16 @@ const IssueDetailsPage: NextPage = () => {
parent={issueDetails}
/>
)}
{issueDetails && activeProject ? (
{issueDetails && projectId ? (
<div className="flex h-full">
<div className="basis-2/3 space-y-5 divide-y-2 p-5">
<div className="rounded-lg">
{issueDetails?.parent && issueDetails.parent !== "" ? (
<div className="mb-5 flex w-min items-center gap-2 whitespace-nowrap rounded bg-gray-100 p-2 text-xs">
<Link
href={`/${workspaceSlug}/projects/${activeProject.id}/issues/${issueDetails.parent}`}
href={`/${workspaceSlug}/projects/${projectId as string}/issues/${
issueDetails.parent
}`}
>
<a className="flex items-center gap-2">
<span
@ -266,7 +270,7 @@ const IssueDetailsPage: NextPage = () => {
}}
/>
<span className="flex-shrink-0 text-gray-600">
{activeProject.identifier}-
{issueDetails.project_detail.identifier}-
{issues?.results.find((i) => i.id === issueDetails.parent)?.sequence_id}
</span>
<span className="truncate font-medium">
@ -282,10 +286,12 @@ const IssueDetailsPage: NextPage = () => {
siblingIssues.map((issue) => (
<CustomMenu.MenuItem key={issue.id}>
<Link
href={`/${workspaceSlug}/projects/${activeProject.id}/issues/${issue.id}`}
href={`/${workspaceSlug}/projects/${projectId as string}/issues/${
issue.id
}`}
>
<a>
{activeProject.identifier}-{issue.sequence_id}
{issueDetails.project_detail.identifier}-{issue.sequence_id}
</a>
</Link>
</CustomMenu.MenuItem>
@ -358,7 +364,6 @@ const IssueDetailsPage: NextPage = () => {
</div>
</div>
<div className="basis-1/3 space-y-5 border-l p-5">
{/* TODO add flex-grow, if needed */}
<IssueDetailSidebar
control={control}
issueDetail={issueDetails}

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

@ -4,8 +4,6 @@ import { useRouter } from "next/router";
import useSWR from "swr";
import { PencilSquareIcon, PlusIcon, TrashIcon } from "@heroicons/react/24/outline";
// types
import type { NextPage, NextPageContext } from "next";
import { IState } from "types";
// services
import stateService from "services/state.service";
@ -26,6 +24,8 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
// helpers
import { addSpaceIfCamelCase } from "helpers/string.helper";
import { groupBy } from "helpers/array.helper";
// types
import type { NextPage, NextPageContext } from "next";
// fetch-keys
import { PROJECT_DETAILS, STATE_LIST } from "constants/fetch-keys";
@ -106,6 +106,18 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
</button>
</div>
<div className="space-y-1 rounded-xl border p-1 md:w-2/3">
{key === activeGroup && (
<CreateUpdateStateInline
projectId={activeProject.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
@ -147,18 +159,6 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
</div>
)
)}
{key === activeGroup && (
<CreateUpdateStateInline
projectId={activeProject.id}
onClose={() => {
setActiveGroup(null);
setSelectedState(null);
}}
workspaceSlug={workspaceSlug as string}
data={null}
selectedGroup={key as keyof StateGroup}
/>
)}
</div>
</div>
))

11
apps/app/services/workspace.service.ts
View File

@ -154,17 +154,6 @@ class WorkspaceService extends APIService {
});
}
async updateWorkspaceInvitation(
workspaceSlug: string,
invitationId: string
): Promise<IWorkspaceMemberInvitation> {
return this.put(`/api/workspaces/${workspaceSlug}/invitations/${invitationId}/`)
.then((response) => response?.data)
.catch((error) => {
throw error?.response?.data;
});
}
async deleteWorkspaceInvitations(workspaceSlug: string, invitationId: string): Promise<any> {
return this.delete(`/api/workspaces/${workspaceSlug}/invitations/${invitationId}/`)
.then((response) => response?.data)

62
apps/app/types/issues.d.ts vendored
View File

@ -51,48 +51,48 @@ export interface IIssueCycle {
}
export interface IIssue {
id: string;
state_detail: IState;
label_details: any[];
assignees: any[] | null;
assignee_details: IUser[];
assignees_list: string[];
attachments: any[];
blocked_by_issue_details: any[];
blocked_issue_details: any[];
blocked_issues: BlockeIssue[];
blocker_issues: BlockeIssue[];
blockers_list: string[];
blocked_list: string[];
blocker_issues: BlockeIssue[];
blockers: any[];
blockers_list: string[];
blocks_list: string[];
bridge: string;
created_at: Date;
updated_at: Date;
name: string;
issue_cycle: IIssueCycle | null;
issue_module: IIssueModule | null;
description: any;
description_html: any;
priority: string | null;
start_date: string | null;
target_date: string | null;
sequence_id: number;
attachments: any[];
created_by: string;
updated_by: string;
project: string;
project_detail: IProject;
workspace: string;
parent: string | null;
parent_detail: IProject | null;
state: string;
assignees: any[] | null;
labels: any[];
labels_list: string[];
blockers: any[];
blocked_issue_details: any[];
sprints: string | null;
module: string | null;
cycle: string | null;
cycle_detail: ICycle | null;
description: any;
description_html: any;
id: string;
issue_cycle: IIssueCycle | null;
issue_module: IIssueModule | null;
label_details: any[];
module: string | null;
name: string;
parent: string | null;
parent_detail: IProject | null;
priority: string | null;
project: string;
project_detail: IProject;
sequence_id: number;
sprints: string | null;
start_date: string | null;
state: string;
state_detail: IState;
sub_issues_count: number;
target_date: string | null;
updated_at: Date;
updated_by: string;
workspace: string;
labels: any[];
labels_list: string[];
}
export interface BlockeIssue {
@ -151,7 +151,7 @@ export type Properties = {
assignee: boolean;
priority: boolean;
due_date: boolean;
cycle: boolean;
// cycle: boolean;
sub_issue_count: boolean;
};