forked from github/plane
feat: project settings state, filter by cycle
refractor: added types for cycle in IIssue, improved common function used for grouping, made custom hook for my issue filter
This commit is contained in:
Dakshesh Jain
parent
dd319deea1
commit
676355d673
@ -1,15 +1,53 @@
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
// headless ui
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
// icons
|
||||
import { XMarkIcon } from "@heroicons/react/20/solid";
|
||||
// ui
|
||||
import { Input } from "ui";
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean;
|
||||
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
};
|
||||
|
||||
const shortcuts = [
|
||||
{
|
||||
title: "Navigation",
|
||||
shortcuts: [
|
||||
{ keys: "ctrl,/", description: "To open navigator" },
|
||||
{ keys: "↑", description: "Move up" },
|
||||
{ keys: "↓", description: "Move down" },
|
||||
{ keys: "←", description: "Move left" },
|
||||
{ keys: "→", description: "Move right" },
|
||||
{ keys: "Enter", description: "Select" },
|
||||
{ keys: "Esc", description: "Close" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Common",
|
||||
shortcuts: [
|
||||
{ keys: "ctrl,p", description: "To create project" },
|
||||
{ keys: "ctrl,i", description: "To create issue" },
|
||||
{ keys: "ctrl,q", description: "To create cycle" },
|
||||
{ keys: "ctrl,h", description: "To open shortcuts guide" },
|
||||
{
|
||||
keys: "ctrl,alt,c",
|
||||
description: "To copy issue url when on issue detail page.",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
||||
const [query, setQuery] = useState("");
|
||||
|
||||
const filteredShortcuts = shortcuts.filter((shortcut) =>
|
||||
shortcut.shortcuts.some((item) => item.description.includes(query.trim())) || query === ""
|
||||
? true
|
||||
: false
|
||||
);
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={React.Fragment}>
|
||||
<Dialog as="div" className="relative z-10" onClose={setIsOpen}>
|
||||
@ -39,7 +77,7 @@ const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
|
||||
<div className="bg-white p-5">
|
||||
<div className="sm:flex sm:items-start">
|
||||
<div className="text-center sm:text-left w-full">
|
||||
<div className="flex flex-col gap-y-4 text-center sm:text-left w-full">
|
||||
<Dialog.Title
|
||||
as="h3"
|
||||
className="text-lg font-medium leading-6 text-gray-900 flex justify-between"
|
||||
@ -54,57 +92,50 @@ const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
||||
</button>
|
||||
</span>
|
||||
</Dialog.Title>
|
||||
<div className="mt-2 pt-5 flex flex-col gap-y-3 w-full">
|
||||
{[
|
||||
{
|
||||
title: "Navigation",
|
||||
shortcuts: [
|
||||
{ keys: "ctrl,/", description: "To open navigator" },
|
||||
{ keys: "↑", description: "Move up" },
|
||||
{ keys: "↓", description: "Move down" },
|
||||
{ keys: "←", description: "Move left" },
|
||||
{ keys: "→", description: "Move right" },
|
||||
{ keys: "Enter", description: "Select" },
|
||||
{ keys: "Esc", description: "Close" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Common",
|
||||
shortcuts: [
|
||||
{ keys: "ctrl,p", description: "To create project" },
|
||||
{ keys: "ctrl,i", description: "To create issue" },
|
||||
{ keys: "ctrl,q", description: "To create cycle" },
|
||||
{ keys: "ctrl,h", description: "To open shortcuts guide" },
|
||||
{
|
||||
keys: "ctrl,alt,c",
|
||||
description: "To copy issue url when on issue detail page.",
|
||||
},
|
||||
],
|
||||
},
|
||||
].map(({ title, shortcuts }) => (
|
||||
<div key={title} className="w-full flex flex-col">
|
||||
<p className="font-medium mb-4">{title}</p>
|
||||
<div className="flex flex-col gap-y-3">
|
||||
{shortcuts.map(({ keys, description }, index) => (
|
||||
<div key={index} className="flex justify-between">
|
||||
<p className="text-sm text-gray-500">{description}</p>
|
||||
<div className="flex items-center gap-x-1">
|
||||
{keys.split(",").map((key, index) => (
|
||||
<span key={index} className="flex items-center gap-1">
|
||||
<kbd className="bg-gray-200 text-sm px-1 rounded">
|
||||
{key}
|
||||
</kbd>
|
||||
{/* {index !== keys.split(",").length - 1 ? (
|
||||
<span className="text-xs">+</span>
|
||||
) : null} */}
|
||||
</span>
|
||||
))}
|
||||
<div>
|
||||
<Input
|
||||
id="search"
|
||||
name="search"
|
||||
type="text"
|
||||
placeholder="Search for shortcuts"
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-y-3 w-full">
|
||||
{filteredShortcuts.length > 0 ? (
|
||||
filteredShortcuts.map(({ title, shortcuts }) => (
|
||||
<div key={title} className="w-full flex flex-col">
|
||||
<p className="font-medium mb-4">{title}</p>
|
||||
<div className="flex flex-col gap-y-3">
|
||||
{shortcuts.map(({ keys, description }, index) => (
|
||||
<div key={index} className="flex justify-between">
|
||||
<p className="text-sm text-gray-500">{description}</p>
|
||||
<div className="flex items-center gap-x-1">
|
||||
{keys.split(",").map((key, index) => (
|
||||
<span key={index} className="flex items-center gap-1">
|
||||
<kbd className="bg-gray-200 text-sm px-1 rounded">
|
||||
{key}
|
||||
</kbd>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="flex flex-col gap-y-3">
|
||||
<p className="text-sm text-gray-500">
|
||||
No shortcuts found for{" "}
|
||||
<span className="font-semibold italic">
|
||||
{`"`}
|
||||
{query}
|
||||
{`"`}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -61,7 +61,7 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, onClose, data }) => {
|
||||
|
||||
useEffect(() => {
|
||||
if (data) setIssuesWithThisStateExist(!!groupedIssues[data.id]);
|
||||
}, [groupedIssues]);
|
||||
}, [groupedIssues, data]);
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={React.Fragment}>
|
||||
|
||||
@ -8,11 +8,12 @@ import { TwitterPicker } from "react-color";
|
||||
// headless
|
||||
import { Popover, Transition } from "@headlessui/react";
|
||||
// constants
|
||||
import { GROUP_CHOICES } from "constants/";
|
||||
import { STATE_LIST } from "constants/fetch-keys";
|
||||
// services
|
||||
import stateService from "lib/services/state.service";
|
||||
// ui
|
||||
import { Button, Input } from "ui";
|
||||
import { Button, Input, Select, Spinner } from "ui";
|
||||
// types
|
||||
import type { IState } from "types";
|
||||
|
||||
@ -26,6 +27,12 @@ type Props = {
|
||||
|
||||
export type StateGroup = "backlog" | "unstarted" | "started" | "completed" | "cancelled" | null;
|
||||
|
||||
const defaultValues: Partial<IState> = {
|
||||
name: "",
|
||||
color: "#000000",
|
||||
group: "backlog",
|
||||
};
|
||||
|
||||
export const CreateUpdateStateInline: React.FC<Props> = ({
|
||||
workspaceSlug,
|
||||
projectId,
|
||||
@ -36,17 +43,13 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
formState: { errors, isSubmitting },
|
||||
setError,
|
||||
watch,
|
||||
reset,
|
||||
control,
|
||||
} = useForm<IState>({
|
||||
defaultValues: {
|
||||
name: "",
|
||||
color: "#000000",
|
||||
group: "backlog",
|
||||
},
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
const handleClose = () => {
|
||||
@ -55,13 +58,13 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
|
||||
};
|
||||
|
||||
const onSubmit = async (formData: IState) => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
if (!workspaceSlug || !projectId || isSubmitting) return;
|
||||
const payload: IState = {
|
||||
...formData,
|
||||
};
|
||||
if (!data) {
|
||||
await stateService
|
||||
.createState(workspaceSlug, projectId, { ...payload, group: selectedGroup })
|
||||
.createState(workspaceSlug, projectId, { ...payload })
|
||||
.then((res) => {
|
||||
mutate<IState[]>(STATE_LIST(projectId), (prevData) => [...(prevData ?? []), res], false);
|
||||
handleClose();
|
||||
@ -77,7 +80,6 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
|
||||
await stateService
|
||||
.updateState(workspaceSlug, projectId, data.id, {
|
||||
...payload,
|
||||
group: selectedGroup ?? "backlog",
|
||||
})
|
||||
.then((res) => {
|
||||
mutate<IState[]>(
|
||||
@ -108,7 +110,15 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
|
||||
useEffect(() => {
|
||||
if (data === null) return;
|
||||
reset(data);
|
||||
}, [data]);
|
||||
}, [data, reset]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!data)
|
||||
reset({
|
||||
...defaultValues,
|
||||
group: selectedGroup ?? "backlog",
|
||||
});
|
||||
}, [selectedGroup, data, reset]);
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-x-2 p-2 bg-gray-50">
|
||||
@ -160,11 +170,26 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
|
||||
register={register}
|
||||
placeholder="Enter state name"
|
||||
validations={{
|
||||
required: "Name is required",
|
||||
required: true,
|
||||
}}
|
||||
error={errors.name}
|
||||
autoComplete="off"
|
||||
/>
|
||||
{data && (
|
||||
<Select
|
||||
id="group"
|
||||
name="group"
|
||||
error={errors.group}
|
||||
register={register}
|
||||
validations={{
|
||||
required: true,
|
||||
}}
|
||||
options={Object.keys(GROUP_CHOICES).map((key) => ({
|
||||
value: key,
|
||||
label: GROUP_CHOICES[key as keyof typeof GROUP_CHOICES],
|
||||
}))}
|
||||
/>
|
||||
)}
|
||||
<Input
|
||||
id="description"
|
||||
name="description"
|
||||
@ -176,8 +201,8 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
|
||||
<Button theme="secondary" onClick={handleClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button theme="primary" onClick={handleSubmit(onSubmit)}>
|
||||
Save
|
||||
<Button theme="primary" disabled={isSubmitting} onClick={handleSubmit(onSubmit)}>
|
||||
{isSubmitting ? "Loading..." : data ? "Update" : "Create"}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -93,6 +93,9 @@ const ListView: React.FC<Props> = ({
|
||||
<h2 className="font-medium leading-5 capitalize">
|
||||
{singleGroup === null || singleGroup === "null"
|
||||
? selectedGroup === "priority" && "No priority"
|
||||
: selectedGroup === "created_by"
|
||||
? people?.find((p) => p.member.id === singleGroup)?.member
|
||||
?.first_name ?? "Loading..."
|
||||
: addSpaceIfCamelCase(singleGroup)}
|
||||
</h2>
|
||||
) : (
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FC, CSSProperties } from "react";
|
||||
import { FC, CSSProperties, useEffect, useRef, useCallback } from "react";
|
||||
// next
|
||||
import Script from "next/script";
|
||||
|
||||
@ -10,32 +10,38 @@ export interface IGoogleLoginButton {
|
||||
}
|
||||
|
||||
export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
|
||||
const googleSignInButton = useRef<HTMLDivElement>(null);
|
||||
|
||||
const loadScript = useCallback(() => {
|
||||
if (!googleSignInButton.current) return;
|
||||
window?.google?.accounts.id.initialize({
|
||||
client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENTID || "",
|
||||
callback: props.onSuccess as any,
|
||||
});
|
||||
window?.google?.accounts.id.renderButton(
|
||||
googleSignInButton.current,
|
||||
{
|
||||
type: "standard",
|
||||
theme: "outline",
|
||||
size: "large",
|
||||
logo_alignment: "center",
|
||||
width: document.getElementById("googleSignInButton")?.offsetWidth,
|
||||
text: "continue_with",
|
||||
} as GsiButtonConfiguration // customization attributes
|
||||
);
|
||||
window?.google?.accounts.id.prompt(); // also display the One Tap dialog
|
||||
}, [props.onSuccess]);
|
||||
|
||||
useEffect(() => {
|
||||
if (window?.google?.accounts?.id) {
|
||||
loadScript();
|
||||
}
|
||||
}, [loadScript]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Script
|
||||
src="https://accounts.google.com/gsi/client"
|
||||
async
|
||||
defer
|
||||
onLoad={() => {
|
||||
window?.google?.accounts.id.initialize({
|
||||
client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENTID || "",
|
||||
callback: props.onSuccess as any,
|
||||
});
|
||||
window?.google?.accounts.id.renderButton(
|
||||
document.getElementById("googleSignInButton") as HTMLElement,
|
||||
{
|
||||
type: "standard",
|
||||
theme: "outline",
|
||||
size: "large",
|
||||
logo_alignment: "center",
|
||||
width: document.getElementById("googleSignInButton")?.offsetWidth,
|
||||
text: "continue_with",
|
||||
} as GsiButtonConfiguration // customization attributes
|
||||
);
|
||||
window?.google?.accounts.id.prompt(); // also display the One Tap dialog
|
||||
}}
|
||||
/>
|
||||
<div className="w-full" id="googleSignInButton"></div>
|
||||
<Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} />
|
||||
<div className="w-full" id="googleSignInButton" ref={googleSignInButton}></div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -26,7 +26,7 @@ export const renderShortNumericDateFormat = (date: string | Date) => {
|
||||
export const groupBy = (array: any[], key: string) => {
|
||||
const innerKey = key.split("."); // split the key by dot
|
||||
return array.reduce((result, currentValue) => {
|
||||
const key = innerKey.reduce((obj, i) => obj[i], currentValue); // get the value of the inner key
|
||||
const key = innerKey.reduce((obj, i) => obj?.[i], currentValue) ?? "None"; // get the value of the inner key
|
||||
(result[key] = result[key] || []).push(currentValue);
|
||||
return result;
|
||||
}, {});
|
||||
|
||||
@ -5,6 +5,7 @@ export const USER_WORKSPACES = "USER_WORKSPACES";
|
||||
export const WORKSPACE_MEMBERS = (workspaceSlug: string) => `WORKSPACE_MEMBERS_${workspaceSlug}`;
|
||||
export const WORKSPACE_INVITATIONS = "WORKSPACE_INVITATIONS";
|
||||
export const WORKSPACE_INVITATION = "WORKSPACE_INVITATION";
|
||||
export const LAST_ACTIVE_WORKSPACE_AND_PROJECTS = "LAST_ACTIVE_WORKSPACE_AND_PROJECTS";
|
||||
|
||||
export const PROJECTS_LIST = (workspaceSlug: string) => `PROJECTS_LIST_${workspaceSlug}`;
|
||||
export const PROJECT_DETAILS = (projectId: string) => `PROJECT_DETAILS_${projectId}`;
|
||||
@ -30,3 +31,4 @@ export const STATE_LIST = (projectId: string) => `STATE_LIST_${projectId}`;
|
||||
export const STATE_DETAIL = "STATE_DETAIL";
|
||||
|
||||
export const USER_ISSUE = (workspaceSlug: string) => `USER_ISSUE_${workspaceSlug}`;
|
||||
export const USER_PROJECT_VIEW = (projectId: string) => `USER_PROJECT_VIEW_${projectId}`;
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import React, { createContext, useCallback, useReducer, useEffect } from "react";
|
||||
// swr
|
||||
import useSWR from "swr";
|
||||
// constants
|
||||
import {
|
||||
TOGGLE_SIDEBAR,
|
||||
@ -10,6 +12,12 @@ import {
|
||||
} from "constants/theme.context.constants";
|
||||
// components
|
||||
import ToastAlert from "components/toast-alert";
|
||||
// hooks
|
||||
import useUser from "lib/hooks/useUser";
|
||||
// constants
|
||||
import { PROJECT_MEMBERS, USER_PROJECT_VIEW } from "constants/fetch-keys";
|
||||
// services
|
||||
import projectService from "lib/services/project.service";
|
||||
|
||||
export const themeContext = createContext<ContextType>({} as ContextType);
|
||||
|
||||
@ -122,53 +130,89 @@ export const reducer: ReducerFunctionType = (state, action) => {
|
||||
export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
const [state, dispatch] = useReducer(reducer, initialState);
|
||||
|
||||
const { activeProject, activeWorkspace, user } = useUser();
|
||||
|
||||
const { data: projectMember } = useSWR(
|
||||
activeWorkspace && activeProject ? PROJECT_MEMBERS(activeProject.id) : null,
|
||||
activeWorkspace && activeProject
|
||||
? () => projectService.projectMembers(activeWorkspace.slug, activeProject.id)
|
||||
: null
|
||||
);
|
||||
|
||||
const toggleCollapsed = useCallback(() => {
|
||||
dispatch({
|
||||
type: TOGGLE_SIDEBAR,
|
||||
});
|
||||
}, []);
|
||||
|
||||
const setIssueView = useCallback((display: "list" | "kanban") => {
|
||||
dispatch({
|
||||
type: SET_ISSUE_VIEW,
|
||||
payload: {
|
||||
issueView: display,
|
||||
},
|
||||
});
|
||||
}, []);
|
||||
const saveDataToServer = useCallback(() => {
|
||||
if (!activeProject || !activeWorkspace) return;
|
||||
projectService
|
||||
.setProjectView(activeWorkspace.slug, activeProject.id, state)
|
||||
.then((res) => {
|
||||
console.log("saved", res);
|
||||
})
|
||||
.catch((error) => {});
|
||||
}, [activeProject, activeWorkspace, state]);
|
||||
|
||||
const setGroupByProperty = useCallback((property: NestedKeyOf<IIssue> | null) => {
|
||||
dispatch({
|
||||
type: SET_GROUP_BY_PROPERTY,
|
||||
payload: {
|
||||
groupByProperty: property,
|
||||
},
|
||||
});
|
||||
}, []);
|
||||
const setIssueView = useCallback(
|
||||
(display: "list" | "kanban") => {
|
||||
dispatch({
|
||||
type: SET_ISSUE_VIEW,
|
||||
payload: {
|
||||
issueView: display,
|
||||
},
|
||||
});
|
||||
saveDataToServer();
|
||||
},
|
||||
[saveDataToServer]
|
||||
);
|
||||
|
||||
const setOrderBy = useCallback((property: NestedKeyOf<IIssue> | null) => {
|
||||
dispatch({
|
||||
type: SET_ORDER_BY_PROPERTY,
|
||||
payload: {
|
||||
orderBy: property,
|
||||
},
|
||||
});
|
||||
}, []);
|
||||
const setGroupByProperty = useCallback(
|
||||
(property: NestedKeyOf<IIssue> | null) => {
|
||||
dispatch({
|
||||
type: SET_GROUP_BY_PROPERTY,
|
||||
payload: {
|
||||
groupByProperty: property,
|
||||
},
|
||||
});
|
||||
saveDataToServer();
|
||||
},
|
||||
[saveDataToServer]
|
||||
);
|
||||
|
||||
const setFilterIssue = useCallback((property: "activeIssue" | "backlogIssue" | null) => {
|
||||
dispatch({
|
||||
type: SET_FILTER_ISSUES,
|
||||
payload: {
|
||||
filterIssue: property,
|
||||
},
|
||||
});
|
||||
}, []);
|
||||
const setOrderBy = useCallback(
|
||||
(property: NestedKeyOf<IIssue> | null) => {
|
||||
dispatch({
|
||||
type: SET_ORDER_BY_PROPERTY,
|
||||
payload: {
|
||||
orderBy: property,
|
||||
},
|
||||
});
|
||||
saveDataToServer();
|
||||
},
|
||||
[saveDataToServer]
|
||||
);
|
||||
|
||||
const setFilterIssue = useCallback(
|
||||
(property: "activeIssue" | "backlogIssue" | null) => {
|
||||
dispatch({
|
||||
type: SET_FILTER_ISSUES,
|
||||
payload: {
|
||||
filterIssue: property,
|
||||
},
|
||||
});
|
||||
saveDataToServer();
|
||||
},
|
||||
[saveDataToServer]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
dispatch({
|
||||
type: REHYDRATE_THEME,
|
||||
payload: projectMember?.find((member) => member.member.id === user?.id)?.view_props,
|
||||
});
|
||||
}, []);
|
||||
}, [projectMember, user]);
|
||||
|
||||
return (
|
||||
<themeContext.Provider
|
||||
|
||||
105
apps/app/lib/hooks/useMyIssueFilter.tsx
Normal file
105
apps/app/lib/hooks/useMyIssueFilter.tsx
Normal file
@ -0,0 +1,105 @@
|
||||
import { useEffect, useState } from "react";
|
||||
// hooks
|
||||
import useUser from "./useUser";
|
||||
// types
|
||||
import { Properties, NestedKeyOf, IIssue } from "types";
|
||||
// services
|
||||
import userService from "lib/services/user.service";
|
||||
// common
|
||||
import { groupBy } from "constants/common";
|
||||
|
||||
import { PRIORITIES } from "constants/";
|
||||
|
||||
const initialValues: Properties = {
|
||||
key: true,
|
||||
state: true,
|
||||
assignee: true,
|
||||
priority: false,
|
||||
start_date: false,
|
||||
target_date: false,
|
||||
cycle: false,
|
||||
};
|
||||
|
||||
const useMyIssuesProperties = (issues?: IIssue[]) => {
|
||||
const [properties, setProperties] = useState<Properties>(initialValues);
|
||||
const [groupByProperty, setGroupByProperty] = useState<NestedKeyOf<IIssue> | null>(null);
|
||||
|
||||
const { states, user } = useUser();
|
||||
|
||||
useEffect(() => {
|
||||
if (!user) return;
|
||||
setProperties({ ...initialValues, ...user.my_issues_prop?.properties });
|
||||
setGroupByProperty(user.my_issues_prop?.groupBy ?? null);
|
||||
}, [user]);
|
||||
|
||||
let groupedByIssues: {
|
||||
[key: string]: IIssue[];
|
||||
} = {
|
||||
...(groupByProperty === "state_detail.name"
|
||||
? Object.fromEntries(
|
||||
states
|
||||
?.sort((a, b) => a.sequence - b.sequence)
|
||||
?.map((state) => [
|
||||
state.name,
|
||||
issues?.filter((issue) => issue.state === state.name) ?? [],
|
||||
]) ?? []
|
||||
)
|
||||
: groupByProperty === "priority"
|
||||
? Object.fromEntries(
|
||||
PRIORITIES.map((priority) => [
|
||||
priority,
|
||||
issues?.filter((issue) => issue.priority === priority) ?? [],
|
||||
])
|
||||
)
|
||||
: {}),
|
||||
...groupBy(issues ?? [], groupByProperty ?? ""),
|
||||
};
|
||||
|
||||
const setMyIssueProperty = (key: keyof Properties) => {
|
||||
if (!user) return;
|
||||
userService.updateUser({ my_issues_prop: { properties, groupBy: groupByProperty } });
|
||||
setProperties((prevData) => ({
|
||||
...prevData,
|
||||
[key]: !prevData[key],
|
||||
}));
|
||||
localStorage.setItem(
|
||||
"my_issues_prop",
|
||||
JSON.stringify({
|
||||
properties: {
|
||||
...properties,
|
||||
[key]: !properties[key],
|
||||
},
|
||||
groupBy: groupByProperty,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const setMyIssueGroupByProperty = (groupByProperty: NestedKeyOf<IIssue> | null) => {
|
||||
if (!user) return;
|
||||
userService.updateUser({ my_issues_prop: { properties, groupBy: groupByProperty } });
|
||||
setGroupByProperty(groupByProperty);
|
||||
localStorage.setItem(
|
||||
"my_issues_prop",
|
||||
JSON.stringify({ properties, groupBy: groupByProperty })
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const viewProps = localStorage.getItem("my_issues_prop");
|
||||
if (viewProps) {
|
||||
const { properties, groupBy } = JSON.parse(viewProps);
|
||||
setProperties(properties);
|
||||
setGroupByProperty(groupBy);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return {
|
||||
filteredIssues: groupedByIssues,
|
||||
groupByProperty,
|
||||
properties,
|
||||
setMyIssueProperty,
|
||||
setMyIssueGroupByProperty,
|
||||
} as const;
|
||||
};
|
||||
|
||||
export default useMyIssuesProperties;
|
||||
@ -132,6 +132,20 @@ class ProjectServices extends APIService {
|
||||
});
|
||||
}
|
||||
|
||||
async getProjectMember(
|
||||
workspacSlug: string,
|
||||
projectId: string,
|
||||
memberId: string
|
||||
): Promise<IProjectMember> {
|
||||
return this.get(PROJECT_MEMBER_DETAIL(workspacSlug, projectId, memberId))
|
||||
.then((response) => {
|
||||
return response?.data;
|
||||
})
|
||||
.catch((error) => {
|
||||
throw error?.response?.data;
|
||||
});
|
||||
}
|
||||
|
||||
async updateProjectMember(
|
||||
workspacSlug: string,
|
||||
projectId: string,
|
||||
@ -207,7 +221,7 @@ class ProjectServices extends APIService {
|
||||
projectId: string,
|
||||
data: ProjectViewTheme
|
||||
): Promise<any> {
|
||||
await this.patch(PROJECT_VIEW_ENDPOINT(workspacSlug, projectId), data)
|
||||
await this.post(PROJECT_VIEW_ENDPOINT(workspacSlug, projectId), data)
|
||||
.then((response) => {
|
||||
return response?.data;
|
||||
})
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
// services
|
||||
import { USER_ENDPOINT, USER_ISSUES_ENDPOINT, USER_ONBOARD_ENDPOINT } from "constants/api-routes";
|
||||
import APIService from "lib/services/api.service";
|
||||
import type { IUser } from "types";
|
||||
|
||||
const { NEXT_PUBLIC_API_BASE_URL } = process.env;
|
||||
|
||||
@ -38,7 +39,7 @@ class UserService extends APIService {
|
||||
});
|
||||
}
|
||||
|
||||
async updateUser(data = {}): Promise<any> {
|
||||
async updateUser(data: Partial<IUser>): Promise<any> {
|
||||
return this.patch(USER_ENDPOINT, data)
|
||||
.then((response) => {
|
||||
return response?.data;
|
||||
|
||||
@ -19,7 +19,12 @@ import APIService from "lib/services/api.service";
|
||||
const { NEXT_PUBLIC_API_BASE_URL } = process.env;
|
||||
|
||||
// types
|
||||
import { IWorkspace, IWorkspaceMember, IWorkspaceMemberInvitation } from "types";
|
||||
import {
|
||||
IWorkspace,
|
||||
IWorkspaceMember,
|
||||
IWorkspaceMemberInvitation,
|
||||
ILastActiveWorkspaceDetails,
|
||||
} from "types";
|
||||
|
||||
class WorkspaceService extends APIService {
|
||||
constructor() {
|
||||
@ -98,6 +103,16 @@ class WorkspaceService extends APIService {
|
||||
});
|
||||
}
|
||||
|
||||
async getLastActiveWorkspaceAndProjects(): Promise<ILastActiveWorkspaceDetails> {
|
||||
return this.get(LAST_ACTIVE_WORKSPACE_AND_PROJECTS)
|
||||
.then((response) => {
|
||||
return response?.data;
|
||||
})
|
||||
.catch((error) => {
|
||||
throw error?.response?.data;
|
||||
});
|
||||
}
|
||||
|
||||
async userWorkspaceInvitations(): Promise<IWorkspaceMemberInvitation[]> {
|
||||
return this.get(USER_WORKSPACE_INVITATIONS)
|
||||
.then((response) => {
|
||||
|
||||
@ -1,39 +1,52 @@
|
||||
// react
|
||||
import React, { useState } from "react";
|
||||
import React from "react";
|
||||
// next
|
||||
import Link from "next/link";
|
||||
import type { NextPage } from "next";
|
||||
// swr
|
||||
import useSWR from "swr";
|
||||
// headless ui
|
||||
import { Transition, Popover } from "@headlessui/react";
|
||||
// layouts
|
||||
import AppLayout from "layouts/app-layout";
|
||||
// hooks
|
||||
import useUser from "lib/hooks/useUser";
|
||||
// ui
|
||||
import { Spinner } from "ui";
|
||||
import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
|
||||
import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace";
|
||||
import HeaderButton from "ui/HeaderButton";
|
||||
import {
|
||||
Spinner,
|
||||
HeaderButton,
|
||||
EmptySpace,
|
||||
EmptySpaceItem,
|
||||
Breadcrumbs,
|
||||
BreadcrumbItem,
|
||||
CustomMenu,
|
||||
} from "ui";
|
||||
// constants
|
||||
import { USER_ISSUE } from "constants/fetch-keys";
|
||||
import { classNames } from "constants/common";
|
||||
import { classNames, replaceUnderscoreIfSnakeCase } from "constants/common";
|
||||
// services
|
||||
import userService from "lib/services/user.service";
|
||||
import issuesServices from "lib/services/issues.service";
|
||||
// hoc
|
||||
import withAuth from "lib/hoc/withAuthWrapper";
|
||||
import useMyIssuesProperties from "lib/hooks/useMyIssueFilter";
|
||||
// components
|
||||
import ChangeStateDropdown from "components/project/issues/my-issues/ChangeStateDropdown";
|
||||
// icons
|
||||
import { ChevronDownIcon, PlusIcon, RectangleStackIcon } from "@heroicons/react/24/outline";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
import Link from "next/link";
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
import { IIssue, NestedKeyOf, Properties } from "types";
|
||||
|
||||
const groupByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [
|
||||
{ name: "State", key: "state_detail.name" },
|
||||
{ name: "Priority", key: "priority" },
|
||||
{ name: "Cycle", key: "issue_cycle.cycle_detail.name" },
|
||||
{ name: "Created By", key: "created_by" },
|
||||
{ name: "None", key: null },
|
||||
];
|
||||
|
||||
const MyIssues: NextPage = () => {
|
||||
const [selectedWorkspace, setSelectedWorkspace] = useState<string | null>(null);
|
||||
|
||||
const { user, workspaces, activeWorkspace } = useUser();
|
||||
const { user, activeWorkspace } = useUser();
|
||||
|
||||
const { data: myIssues, mutate: mutateMyIssues } = useSWR<IIssue[]>(
|
||||
user && activeWorkspace ? USER_ISSUE(activeWorkspace.slug) : null,
|
||||
@ -71,6 +84,14 @@ const MyIssues: NextPage = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const {
|
||||
filteredIssues,
|
||||
properties,
|
||||
setMyIssueGroupByProperty,
|
||||
setMyIssueProperty,
|
||||
groupByProperty,
|
||||
} = useMyIssuesProperties(myIssues);
|
||||
|
||||
return (
|
||||
<AppLayout
|
||||
breadcrumbs={
|
||||
@ -79,17 +100,87 @@ const MyIssues: NextPage = () => {
|
||||
</Breadcrumbs>
|
||||
}
|
||||
right={
|
||||
<HeaderButton
|
||||
Icon={PlusIcon}
|
||||
label="Add Issue"
|
||||
onClick={() => {
|
||||
const e = new KeyboardEvent("keydown", {
|
||||
key: "i",
|
||||
ctrlKey: true,
|
||||
});
|
||||
document.dispatchEvent(e);
|
||||
}}
|
||||
/>
|
||||
<>
|
||||
<Popover className="relative">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
className={classNames(
|
||||
open ? "bg-gray-100 text-gray-900" : "text-gray-500",
|
||||
"group flex gap-2 items-center rounded-md bg-transparent text-xs font-medium hover:bg-gray-100 hover:text-gray-900 focus:outline-none border p-2"
|
||||
)}
|
||||
>
|
||||
<span>View</span>
|
||||
<ChevronDownIcon className="h-4 w-4" 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="absolute mr-5 right-1/2 z-10 mt-1 w-screen max-w-xs translate-x-1/2 transform p-3 bg-white rounded-lg shadow-lg">
|
||||
<div className="relative flex flex-col gap-1 gap-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h4 className="text-sm text-gray-600">Group by</h4>
|
||||
<CustomMenu
|
||||
label={
|
||||
groupByOptions.find((option) => option.key === groupByProperty)?.name ??
|
||||
"Select"
|
||||
}
|
||||
>
|
||||
{groupByOptions.map((option) => (
|
||||
<CustomMenu.MenuItem
|
||||
key={option.key}
|
||||
onClick={() => setMyIssueGroupByProperty(option.key)}
|
||||
>
|
||||
{option.name}
|
||||
</CustomMenu.MenuItem>
|
||||
))}
|
||||
</CustomMenu>
|
||||
</div>
|
||||
<div className="border-b-2"></div>
|
||||
<div className="relative flex flex-col gap-1">
|
||||
<h4 className="text-base text-gray-600">Properties</h4>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{Object.keys(properties).map((key) => (
|
||||
<button
|
||||
key={key}
|
||||
type="button"
|
||||
className={`px-2 py-1 capitalize rounded border border-theme text-xs ${
|
||||
properties[key as keyof Properties]
|
||||
? "border-theme bg-theme text-white"
|
||||
: ""
|
||||
}`}
|
||||
onClick={() => setMyIssueProperty(key as keyof Properties)}
|
||||
>
|
||||
{replaceUnderscoreIfSnakeCase(key)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Popover>
|
||||
<HeaderButton
|
||||
Icon={PlusIcon}
|
||||
label="Add Issue"
|
||||
onClick={() => {
|
||||
const e = new KeyboardEvent("keydown", {
|
||||
key: "i",
|
||||
ctrlKey: true,
|
||||
});
|
||||
document.dispatchEvent(e);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="w-full h-full flex flex-col space-y-5">
|
||||
|
||||
@ -49,6 +49,7 @@ import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
|
||||
const groupByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [
|
||||
{ name: "State", key: "state_detail.name" },
|
||||
{ name: "Priority", key: "priority" },
|
||||
{ name: "Cycle", key: "issue_cycle.cycle_detail.name" },
|
||||
{ name: "Created By", key: "created_by" },
|
||||
{ name: "None", key: null },
|
||||
];
|
||||
|
||||
@ -223,7 +223,14 @@ const WorkspaceSettings = () => {
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>
|
||||
<div>
|
||||
<div className="space-y-3">
|
||||
<h2 className="text-2xl text-red-500 font-semibold">Danger Zone</h2>
|
||||
<p className="w-full md:w-1/2">
|
||||
The danger zone of the workspace delete page is a critical area that requires
|
||||
careful consideration and attention. When deleting a workspace, all of the
|
||||
data and resources within that workspace will be permanently removed and
|
||||
cannot be recovered.
|
||||
</p>
|
||||
<Button theme="danger" onClick={() => setIsOpen(true)}>
|
||||
Delete the workspace
|
||||
</Button>
|
||||
|
||||
17
apps/app/types/issues.d.ts
vendored
17
apps/app/types/issues.d.ts
vendored
@ -1,4 +1,4 @@
|
||||
import type { IState, IUser, IProject } from "./";
|
||||
import type { IState, IUser, IProject, ICycle } from "./";
|
||||
|
||||
export interface IssueResponse {
|
||||
next_cursor: string;
|
||||
@ -11,6 +11,19 @@ export interface IssueResponse {
|
||||
results: IIssue[];
|
||||
}
|
||||
|
||||
export interface IIssueCycle {
|
||||
id: string;
|
||||
cycle_detail: ICycle;
|
||||
created_at: Date;
|
||||
updated_at: Date;
|
||||
created_by: string;
|
||||
updated_by: string;
|
||||
project: string;
|
||||
workspace: string;
|
||||
issue: string;
|
||||
cycle: string;
|
||||
}
|
||||
|
||||
export interface IIssue {
|
||||
id: string;
|
||||
state_detail: IState;
|
||||
@ -47,6 +60,8 @@ export interface IIssue {
|
||||
blocked_issue_details: any[];
|
||||
sprints: string | null;
|
||||
cycle: string | null;
|
||||
|
||||
issue_cycle: IIssueCycle;
|
||||
}
|
||||
|
||||
export interface BlockeIssue {
|
||||
|
||||
8
apps/app/types/users.d.ts
vendored
8
apps/app/types/users.d.ts
vendored
@ -1,3 +1,5 @@
|
||||
import { IIssue, NestedKeyOf, Properties } from "./";
|
||||
|
||||
export interface IUser {
|
||||
id: readonly string;
|
||||
last_login: readonly Date;
|
||||
@ -14,6 +16,12 @@ export interface IUser {
|
||||
created_location: readonly string;
|
||||
is_email_verified: boolean;
|
||||
token: string;
|
||||
|
||||
my_issues_prop?: {
|
||||
properties: Properties;
|
||||
groupBy: NestedKeyOf<IIssue> | null;
|
||||
};
|
||||
|
||||
[...rest: string]: any;
|
||||
}
|
||||
|
||||
|
||||
7
apps/app/types/workspace.d.ts
vendored
7
apps/app/types/workspace.d.ts
vendored
@ -1,4 +1,4 @@
|
||||
import type { IUser, IUserLite } from "./";
|
||||
import type { IProjectMember, IUser, IUserLite } from "./";
|
||||
|
||||
export interface IWorkspace {
|
||||
readonly id: string;
|
||||
@ -36,3 +36,8 @@ export interface IWorkspaceMember {
|
||||
created_by: string;
|
||||
updated_by: string;
|
||||
}
|
||||
|
||||
export interface ILastActiveWorkspaceDetails {
|
||||
workspace_details: IWorkspace;
|
||||
project_details?: IProjectMember[];
|
||||
}
|
||||
|
||||
@ -778,7 +778,12 @@ camelcase-css@^2.0.1:
|
||||
resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
|
||||
integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
|
||||
|
||||
caniuse-lite@^1.0.30001332, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426:
|
||||
caniuse-lite@^1.0.30001332:
|
||||
version "1.0.30001439"
|
||||
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001439.tgz#ab7371faeb4adff4b74dad1718a6fd122e45d9cb"
|
||||
integrity sha512-1MgUzEkoMO6gKfXflStpYgZDlFM7M/ck/bgfVCACO5vnAf0fXoNVHdWtqGU+MYca+4bL9Z5bpOVmR33cWW9G2A==
|
||||
|
||||
caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426:
|
||||
version "1.0.30001434"
|
||||
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001434.tgz#ec1ec1cfb0a93a34a0600d37903853030520a4e5"
|
||||
integrity sha512-aOBHrLmTQw//WFa2rcF1If9fa3ypkC1wzqqiKHgfdrXTWcU8C4gKVZT77eQAPWN1APys3+uQ0Df07rKauXGEYA==
|
||||
|
||||
Loading…
Reference in New Issue
Block a user