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

chore: delete label confirmation modal (#1069)

Browse Source 
* fix: negative days displayed on upcoming issues on dashboard

* chore: show completed and cancelled states by default

* chore: delete label confirmation modal
This commit is contained in:
Aaryan Khandelwal 2023-05-17 16:04:56 +05:30 committed by GitHub
parent 27626fb16f
commit d41250c1ce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 157 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/app/components/analytics/scope-and-demand/scope.tsx
View File

@ -29,7 +29,6 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
return (
<div className="rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
<span className="font-medium text-brand-secondary">
Issue count-{" "}
{assignee
? assignee.assignees__first_name + " " + assignee.assignees__last_name
: "No assignee"}

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

@ -1,4 +1,4 @@
import { useState, useEffect } from "react";
import { useState } from "react";
import { useRouter } from "next/router";
@ -60,11 +60,6 @@ export const SingleBoard: React.FC<Props> = ({
const isNotAllowed = userAuth.isGuest || userAuth.isViewer || isCompleted;
useEffect(() => {
if (currentState?.group === "completed" || currentState?.group === "cancelled")
setIsCollapsed(false);
}, [currentState]);
return (
<div className={`flex-shrink-0 ${!isCollapsed ? "" : "flex h-full flex-col w-96"}`}>
<BoardHeader

132
apps/app/components/labels/delete-label-modal.tsx Normal file
View File

@ -0,0 +1,132 @@
import React, { useState } from "react";
import { useRouter } from "next/router";
import { mutate } from "swr";
// headless ui
import { Dialog, Transition } from "@headlessui/react";
// icons
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
// services
import issuesService from "services/issues.service";
// hooks
import useToast from "hooks/use-toast";
// ui
import { DangerButton, SecondaryButton } from "components/ui";
// types
import type { IIssueLabels } from "types";
// fetch-keys
import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
type Props = {
isOpen: boolean;
onClose: () => void;
data: IIssueLabels | null;
};
export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { setToastAlert } = useToast();
const handleClose = () => {
onClose();
setIsDeleteLoading(false);
};
const handleDeletion = async () => {
if (!workspaceSlug || !projectId || !data) return;
setIsDeleteLoading(true);
mutate<IIssueLabels[]>(
PROJECT_ISSUE_LABELS(projectId.toString()),
(prevData) => (prevData ?? []).filter((p) => p.id !== data.id),
false
);
await issuesService
.deleteIssueLabel(workspaceSlug.toString(), projectId.toString(), data.id)
.then(() => handleClose())
.catch(() => {
setIsDeleteLoading(false);
mutate(PROJECT_ISSUE_LABELS(projectId.toString()));
setToastAlert({
type: "error",
title: "Error!",
message: "Label could not be deleted. Please try again.",
});
});
};
return (
<Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={handleClose}>
<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-brand-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child>
<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}
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-brand-base border border-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
<div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<ExclamationTriangleIcon
className="h-6 w-6 text-red-600"
aria-hidden="true"
/>
</div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-brand-base"
>
Delete Label
</Dialog.Title>
<div className="mt-2">
<p className="text-sm text-brand-secondary">
Are you sure you want to delete label-{" "}
<span className="font-medium text-brand-base">{data?.name}</span>? The
label will be removed from all the issues.
</p>
</div>
</div>
</div>
</div>
<div className="flex justify-end gap-2 p-4 sm:px-6">
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
<DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
{isDeleteLoading ? "Deleting..." : "Delete"}
</DangerButton>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
);
};

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

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

6
apps/app/components/labels/single-label-group.tsx
View File

@ -29,7 +29,7 @@ type Props = {
labelChildren: IIssueLabels[];
addLabelToGroup: (parentLabel: IIssueLabels) => void;
editLabel: (label: IIssueLabels) => void;
handleLabelDelete: (labelId: string) => void;
handleLabelDelete: () => void;
};
export const SingleLabelGroup: React.FC<Props> = ({
@ -94,7 +94,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
<span>Edit label</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => handleLabelDelete(label.id)}>
<CustomMenu.MenuItem onClick={handleLabelDelete}>
<span className="flex items-center justify-start gap-2">
<TrashIcon className="h-4 w-4" />
<span>Delete label</span>
@ -150,7 +150,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
<span>Edit label</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => handleLabelDelete(child.id)}>
<CustomMenu.MenuItem onClick={handleLabelDelete}>
<span className="flex items-center justify-start gap-2">
<TrashIcon className="h-4 w-4" />
<span>Delete label</span>

4
apps/app/components/labels/single-label.tsx
View File

@ -11,7 +11,7 @@ type Props = {
label: IIssueLabels;
addLabelToGroup: (parentLabel: IIssueLabels) => void;
editLabel: (label: IIssueLabels) => void;
handleLabelDelete: (labelId: string) => void;
handleLabelDelete: () => void;
};
export const SingleLabel: React.FC<Props> = ({
@ -44,7 +44,7 @@ export const SingleLabel: React.FC<Props> = ({
<span>Edit label</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => handleLabelDelete(label.id)}>
<CustomMenu.MenuItem onClick={handleLabelDelete}>
<span className="flex items-center justify-start gap-2">
<TrashIcon className="h-4 w-4" />
<span>Delete label</span>

11
apps/app/components/workspace/issues-list.tsx
View File

@ -23,11 +23,12 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
const getDateDifference = (date: Date) => {
const today = new Date();
let diffDays = 0;
if (type === "overdue") {
const diffTime = Math.abs(today.valueOf() - date.valueOf());
diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
} else return date.getDate() - today.getDate();
let diffTime = 0;
if (type === "overdue") diffTime = Math.abs(today.valueOf() - date.valueOf());
else diffTime = Math.abs(date.valueOf() - today.valueOf());
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
return diffDays;
};

24
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
View File

@ -12,6 +12,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
// components
import {
CreateUpdateLabelInline,
DeleteLabelModal,
LabelsListModal,
SingleLabel,
SingleLabelGroup,
@ -40,6 +41,9 @@ const LabelsSettings: NextPage = () => {
const [labelsListModal, setLabelsListModal] = useState(false);
const [parentLabel, setParentLabel] = useState<IIssueLabels | undefined>(undefined);
// delete label
const [selectDeleteLabel, setSelectDeleteLabel] = useState<IIssueLabels | null>(null);
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
@ -52,7 +56,7 @@ const LabelsSettings: NextPage = () => {
: null
);
const { data: issueLabels, mutate } = useSWR<IIssueLabels[]>(
const { data: issueLabels } = useSWR(
workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
workspaceSlug && projectId
? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
@ -75,15 +79,6 @@ const LabelsSettings: NextPage = () => {
setLabelToUpdate(label);
};
const handleLabelDelete = (labelId: string) => {
if (workspaceSlug && projectDetails) {
mutate((prevData) => prevData?.filter((p) => p.id !== labelId), false);
issuesService
.deleteIssueLabel(workspaceSlug as string, projectDetails.id, labelId)
.catch((e) => console.log(e));
}
};
return (
<>
<LabelsListModal
@ -91,6 +86,11 @@ const LabelsSettings: NextPage = () => {
handleClose={() => setLabelsListModal(false)}
parent={parentLabel}
/>
<DeleteLabelModal
isOpen={!!selectDeleteLabel}
data={selectDeleteLabel ?? null}
onClose={() => setSelectDeleteLabel(null)}
/>
<ProjectAuthorizationWrapper
breadcrumbs={
<Breadcrumbs>
@ -143,7 +143,7 @@ const LabelsSettings: NextPage = () => {
behavior: "smooth",
});
}}
handleLabelDelete={handleLabelDelete}
handleLabelDelete={() => setSelectDeleteLabel(label)}
/>
);
} else
@ -159,7 +159,7 @@ const LabelsSettings: NextPage = () => {
behavior: "smooth",
});
}}
handleLabelDelete={handleLabelDelete}
handleLabelDelete={() => setSelectDeleteLabel(label)}
/>
);
})