feat(filters): duplicate (#168)

This commit is contained in:
Ludvig Lundgren 2022-03-06 16:08:07 +01:00 committed by GitHub
parent 72b74f9d19
commit cb6cbb83d5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 115 additions and 12 deletions

View file

@ -72,6 +72,7 @@ export const APIClient = {
getByID: (id: number) => appClient.Get<Filter>(`api/filters/${id}`),
create: (filter: Filter) => appClient.Post("api/filters", filter),
update: (filter: Filter) => appClient.Put(`api/filters/${filter.id}`, filter),
duplicate: (id: number) => appClient.Get<Filter>(`api/filters/${id}/duplicate`),
toggleEnable: (id: number, enabled: boolean) => appClient.Put(`api/filters/${id}/enabled`, { enabled }),
delete: (id: number) => appClient.Delete(`api/filters/${id}`),
},

View file

@ -7,7 +7,7 @@ import {
TrashIcon,
PencilAltIcon,
SwitchHorizontalIcon,
DotsHorizontalIcon,
DotsHorizontalIcon, DuplicateIcon,
} from "@heroicons/react/outline";
import { queryClient } from "../../App";
@ -125,6 +125,17 @@ const FilterItemDropdown = ({
}
);
const duplicateMutation = useMutation(
(id: number) => APIClient.filters.duplicate(id),
{
onSuccess: () => {
queryClient.invalidateQueries("filters");
toast.custom((t) => <Toast type="success" body={`Filter ${filter?.name} duplicated`} t={t} />);
}
}
);
return (
<Menu as="div">
<DeleteModal
@ -197,8 +208,6 @@ const FilterItemDropdown = ({
</button>
)}
</Menu.Item>
</div>
<div className="px-1 py-1">
<Menu.Item>
{({ active }) => (
<button
@ -206,11 +215,33 @@ const FilterItemDropdown = ({
active ? "bg-blue-600 text-white" : "text-gray-900 dark:text-gray-300",
"font-medium group flex rounded-md items-center w-full px-2 py-2 text-sm"
)}
onClick={() => duplicateMutation.mutate(filter.id)}
>
<DuplicateIcon
className={classNames(
active ? "text-white" : "text-blue-500",
"w-5 h-5 mr-2"
)}
aria-hidden="true"
/>
Duplicate
</button>
)}
</Menu.Item>
</div>
<div className="px-1 py-1">
<Menu.Item>
{({ active }) => (
<button
className={classNames(
active ? "bg-red-600 text-white" : "text-gray-900 dark:text-gray-300",
"font-medium group flex rounded-md items-center w-full px-2 py-2 text-sm"
)}
onClick={() => toggleDeleteModal()}
>
<TrashIcon
className={classNames(
active ? "text-white" : "text-blue-500",
active ? "text-white" : "text-red-500",
"w-5 h-5 mr-2"
)}
aria-hidden="true"