feat: shortcuts (#674)

* feat: added shortcut for page and view

* fix: shortcut for view

* fix: onclick method for views and pages
This commit is contained in:
Kunal Vishwakarma 2023-04-03 14:23:50 +05:30 committed by GitHub
parent a18af1cecf
commit 0cf498651c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 31 additions and 3 deletions

View File

@ -51,6 +51,8 @@ import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
import { CreateUpdateModuleModal } from "components/modules"; import { CreateUpdateModuleModal } from "components/modules";
import { CreateProjectModal } from "components/project"; import { CreateProjectModal } from "components/project";
import { CreateUpdateViewModal } from "components/views"; import { CreateUpdateViewModal } from "components/views";
import { CreateUpdatePageModal } from "components/pages";
import { Spinner } from "components/ui"; import { Spinner } from "components/ui";
// helpers // helpers
import { import {
@ -76,6 +78,7 @@ export const CommandPalette: React.FC = () => {
const [isCreateModuleModalOpen, setIsCreateModuleModalOpen] = useState(false); const [isCreateModuleModalOpen, setIsCreateModuleModalOpen] = useState(false);
const [isBulkDeleteIssuesModalOpen, setIsBulkDeleteIssuesModalOpen] = useState(false); const [isBulkDeleteIssuesModalOpen, setIsBulkDeleteIssuesModalOpen] = useState(false);
const [deleteIssueModal, setDeleteIssueModal] = useState(false); const [deleteIssueModal, setDeleteIssueModal] = useState(false);
const [isCreateUpdatePageModalOpen, setIsCreateUpdatePageModalOpen] = useState(false);
const [searchTerm, setSearchTerm] = React.useState<string>(""); const [searchTerm, setSearchTerm] = React.useState<string>("");
const [results, setResults] = useState<IWorkspaceSearchResults>({ const [results, setResults] = useState<IWorkspaceSearchResults>({
@ -193,6 +196,12 @@ export const CommandPalette: React.FC = () => {
} else if (e.key.toLowerCase() === "p") { } else if (e.key.toLowerCase() === "p") {
e.preventDefault(); e.preventDefault();
setIsProjectModalOpen(true); setIsProjectModalOpen(true);
} else if (e.key.toLowerCase() === "v") {
e.preventDefault();
setIsCreateViewModalOpen(true);
} else if (e.key.toLowerCase() === "d") {
e.preventDefault();
setIsCreateUpdatePageModalOpen(true);
} else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "b") { } else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "b") {
e.preventDefault(); e.preventDefault();
toggleCollapsed(); toggleCollapsed();
@ -323,6 +332,10 @@ export const CommandPalette: React.FC = () => {
handleClose={() => setIsCreateViewModalOpen(false)} handleClose={() => setIsCreateViewModalOpen(false)}
isOpen={isCreateViewModalOpen} isOpen={isCreateViewModalOpen}
/> />
<CreateUpdatePageModal
isOpen={isCreateUpdatePageModalOpen}
handleClose={() => setIsCreateUpdatePageModalOpen(false)}
/>
</> </>
)} )}
{issueId && issueDetails && ( {issueId && issueDetails && (

View File

@ -33,6 +33,8 @@ const shortcuts = [
{ keys: "C", description: "To create issue" }, { keys: "C", description: "To create issue" },
{ keys: "Q", description: "To create cycle" }, { keys: "Q", description: "To create cycle" },
{ keys: "M", description: "To create module" }, { keys: "M", description: "To create module" },
{ keys: "V", description: "To create view" },
{ keys: "D", description: "To create page" },
{ keys: "Delete", description: "To bulk delete issues" }, { keys: "Delete", description: "To bulk delete issues" },
{ keys: "H", description: "To open shortcuts guide" }, { keys: "H", description: "To open shortcuts guide" },
{ {

View File

@ -27,6 +27,10 @@ export const EmptyState: React.FC<Props> = ({ type, title, description, imgURL,
return "P"; return "P";
case "issue": case "issue":
return "C"; return "C";
case "view":
return "V";
case "page":
return "D"
default: default:
return null; return null;
} }

View File

@ -167,7 +167,10 @@ const ProjectPages: NextPage<UserAuth> = (props) => {
right={ right={
<PrimaryButton <PrimaryButton
className="flex items-center gap-2" className="flex items-center gap-2"
onClick={() => setCreateUpdatePageModal(true)} onClick={() => {
const e = new KeyboardEvent("keydown", { key: "d" });
document.dispatchEvent(e);
}}
> >
<PlusIcon className="w-4 h-4" /> <PlusIcon className="w-4 h-4" />
Create Page Create Page

View File

@ -67,7 +67,14 @@ const ProjectViews: NextPage<UserAuth> = (props) => {
} }
right={ right={
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<PrimaryButton type="button" className="flex items-center gap-2" onClick={() => setIsCreateViewModalOpen(true)}> <PrimaryButton
type="button"
className="flex items-center gap-2"
onClick={() => {
const e = new KeyboardEvent("keydown", { key: "v" });
document.dispatchEvent(e);
}}
>
<PlusIcon className="w-4 h-4" /> <PlusIcon className="w-4 h-4" />
Create View Create View
</PrimaryButton> </PrimaryButton>
@ -100,7 +107,6 @@ const ProjectViews: NextPage<UserAuth> = (props) => {
title="Create New View" title="Create New View"
description="Views aid in saving your issues by applying various filters and grouping options." description="Views aid in saving your issues by applying various filters and grouping options."
imgURL={emptyView} imgURL={emptyView}
action={() => setIsCreateViewModalOpen(true)}
/> />
) )
) : ( ) : (