binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: modules, style: kanban board, shortcut modals

Browse source
This commit is contained in:
Aaryan Khandelwal 2022-12-22 21:49:46 +05:30
parent 9539fca585
commit f6ca842d30
43 changed files with 2741 additions and 558 deletions
Download patch file Download diff file Expand all files Collapse all files

102
apps/app/components/command-palette/index.tsx
View file

@ -1,18 +1,22 @@
// react
import React, { useState, useCallback, useEffect } from "react";
// next
import { useRouter } from "next/router";
// swr
import { mutate } from "swr";
// react hook form
import { SubmitHandler, useForm } from "react-hook-form";
// headless ui
import { Combobox, Dialog, Transition } from "@headlessui/react";
// services
import issuesServices from "lib/services/issues.service";
// hooks
import useUser from "lib/hooks/useUser";
import useTheme from "lib/hooks/useTheme";
import useToast from "lib/hooks/useToast";
// components
import ShortcutsModal from "components/command-palette/shortcuts";
import CreateProjectModal from "components/project/create-project-modal";
import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
import CreateUpdateModuleModal from "components/project/modules/create-update-module-modal";
import BulkDeleteIssuesModal from "components/common/bulk-delete-issues-modal";
// headless ui
import { Combobox, Dialog, Transition } from "@headlessui/react";
// ui
import { Button } from "ui";
// icons
import {
FolderIcon,
@ -20,25 +24,10 @@ import {
ClipboardDocumentListIcon,
MagnifyingGlassIcon,
} from "@heroicons/react/24/outline";
// components
import ShortcutsModal from "components/command-palette/shortcuts";
import CreateProjectModal from "components/project/create-project-modal";
import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
// ui
import { Button } from "ui";
// types
import { IIssue, IssueResponse } from "types";
// fetch keys
import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
// constants
import { IIssue } from "types";
// common
import { classNames, copyTextToClipboard } from "constants/common";
import CreateUpdateModuleModal from "components/project/modules/create-update-module-modal";
type FormInput = {
issue_ids: string[];
cycleId: string;
};
const CommandPalette: React.FC = () => {
const [query, setQuery] = useState("");
@ -49,8 +38,9 @@ const CommandPalette: React.FC = () => {
const [isShortcutsModalOpen, setIsShortcutsModalOpen] = useState(false);
const [isCreateCycleModalOpen, setIsCreateCycleModalOpen] = useState(false);
const [isCreateModuleModalOpen, setisCreateModuleModalOpen] = useState(false);
const [isBulkDeleteIssuesModalOpen, setIsBulkDeleteIssuesModalOpen] = useState(false);
const { activeWorkspace, activeProject, issues } = useUser();
const { activeProject, issues } = useUser();
const router = useRouter();
@ -64,8 +54,6 @@ const CommandPalette: React.FC = () => {
: issues?.results.filter((issue) => issue.name.toLowerCase().includes(query.toLowerCase())) ??
[];
const { register, handleSubmit, reset } = useForm<FormInput>();
const quickActions = [
{
name: "Add new issue...",
@ -88,7 +76,6 @@ const CommandPalette: React.FC = () => {
const handleCommandPaletteClose = () => {
setIsPaletteOpen(false);
setQuery("");
reset();
};
const handleKeyDown = useCallback(
@ -114,6 +101,9 @@ const CommandPalette: React.FC = () => {
} else if ((e.ctrlKey || e.metaKey) && e.key === "m") {
e.preventDefault();
setisCreateModuleModalOpen(true);
} else if ((e.ctrlKey || e.metaKey) && e.key === "d") {
e.preventDefault();
setIsBulkDeleteIssuesModalOpen(true);
} else if ((e.ctrlKey || e.metaKey) && e.altKey && e.key === "c") {
e.preventDefault();
@ -138,47 +128,6 @@ const CommandPalette: React.FC = () => {
[toggleCollapsed, setToastAlert, router]
);
const handleDelete: SubmitHandler<FormInput> = (data) => {
if (!data.issue_ids || data.issue_ids.length === 0) {
setToastAlert({
title: "Error",
type: "error",
message: "Please select atleast one issue",
});
return;
}
if (activeWorkspace && activeProject) {
issuesServices
.bulkDeleteIssues(activeWorkspace.slug, activeProject.id, data)
.then((res) => {
setToastAlert({
title: "Success",
type: "success",
message: res.message,
});
mutate<IssueResponse>(
PROJECT_ISSUES_LIST(activeWorkspace.slug, activeProject.id),
(prevData) => {
return {
...(prevData as IssueResponse),
count: (prevData?.results ?? []).filter(
(p) => !data.issue_ids.some((id) => p.id === id)
).length,
results: (prevData?.results ?? []).filter(
(p) => !data.issue_ids.some((id) => p.id === id)
),
};
},
false
);
})
.catch((e) => {
console.log(e);
});
}
};
useEffect(() => {
document.addEventListener("keydown", handleKeyDown);
return () => document.removeEventListener("keydown", handleKeyDown);
@ -207,6 +156,10 @@ const CommandPalette: React.FC = () => {
setIsOpen={setIsIssueModalOpen}
projectId={activeProject?.id}
/>
<BulkDeleteIssuesModal
isOpen={isBulkDeleteIssuesModalOpen}
setIsOpen={setIsBulkDeleteIssuesModalOpen}
/>
<Transition.Root
show={isPaletteOpen}
as={React.Fragment}
@ -283,12 +236,6 @@ const CommandPalette: React.FC = () => {
{({ active }) => (
<>
<div className="flex items-center gap-2">
<input
type="checkbox"
{...register("issue_ids")}
id={`issue-${issue.id}`}
value={issue.id}
/>
<span
className="flex-shrink-0 h-1.5 w-1.5 block rounded-full"
style={{
@ -377,9 +324,6 @@ const CommandPalette: React.FC = () => {
</Combobox>
<div className="flex justify-end items-center gap-2 p-3">
<Button onClick={handleSubmit(handleDelete)} theme="danger" size="sm">
Delete selected issues
</Button>
<div>
<Button type="button" size="sm" onClick={handleCommandPaletteClose}>
Close