manage place service

Felix-Asante · Feb 9, 2024 · 9b3688e · 9b3688e
1 parent c9fa75d
commit 9b3688e
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 39 deletions.
diff --git a/src/app/(dashboard)/places/[placeId]/_sections/placeContent/CreateServiceForm.tsx b/src/app/(dashboard)/places/[placeId]/_sections/placeContent/CreateServiceForm.tsx
@@ -13,6 +13,7 @@ import { PlaceProducts } from "@/types/place";
 import { getErrorMessage } from "@/utils/helpers";
 import { Button, Textarea } from "@nextui-org/react";
 import { useRouter } from "next/navigation";
+import { useEffect } from "react";
 import { Controller } from "react-hook-form";
 import { toast } from "sonner";
 
@@ -35,7 +36,11 @@ export default function CreateServiceForm(props: Props) {
  typeof updateService
  >(updateService);
 
- const router = useRouter();
+ useEffect(() => {
+ if (service) {
+ form.setValue("productCategory", service?.id);
+ }
+ }, [service]);
 
  const onSubmit = async (data: CreateServiceDto) => {
  try {
@@ -85,6 +90,7 @@ export default function CreateServiceForm(props: Props) {
  className='w-full border rounded-sm p-2 h-10 shadow focus:outline-black focus:ring-1 focus:ring-black'
  value={field.value}
  onChange={field.onChange}
+ defaultValue={service?.id}
  // errorMessage={}
  >
  {productCategories?.map((category) => (

diff --git a/src/app/(dashboard)/places/[placeId]/_sections/placeContent/PlaceServiceCard.tsx b/src/app/(dashboard)/places/[placeId]/_sections/placeContent/PlaceServiceCard.tsx
@@ -1,14 +1,21 @@
+import { deleteService } from "@/actions/services";
 import HStack from "@/components/shared/layout/HStack";
+import Modal from "@/components/shared/modal";
 import {
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
 } from "@/components/ui/accordion";
 import { DEFAULT_CURRENCY } from "@/config/constants";
+import { useServerAction } from "@/hooks/useServerAction";
 import { PlaceProducts } from "@/types/place";
-import { Avatar, Button } from "@nextui-org/react";
+import { getErrorMessage } from "@/utils/helpers";
+import { Avatar, Button, useDisclosure } from "@nextui-org/react";
+import { useQueryClient } from "@tanstack/react-query";
 import { PenLineIcon, TrashIcon } from "lucide-react";
+import { useParams } from "next/navigation";
 import React from "react";
+import { toast } from "sonner";
 
 interface Props {
  service: PlaceProducts;
@@ -22,47 +29,111 @@ export default function PlaceServiceCard({
  defaultImg,
  onEdit,
 }: Props) {
+ const { isOpen, onOpen, onClose } = useDisclosure();
+ const params = useParams();
+
+ const [runDeleteService, { loading }] = useServerAction<
+ any,
+ typeof deleteService
+ >(deleteService);
+
+ const queryClient = useQueryClient();
+
+ const onDelete = async () => {
+ try {
+ const response = await runDeleteService(service?.id);
+ if (response?.error) {
+ toast.error(getErrorMessage(response.error));
+ return;
+ }
+ toast.success("Service deleted successfully");
+ queryClient.invalidateQueries({
+ queryKey: [params?.placeId, "getPlaceService"],
+ });
+ onClose();
+ } catch (error) {
+ toast.error(getErrorMessage(error));
+ }
+ };
+
  return (
- <AccordionItem
- value={index?.toString()}
- className='rounded-md shadow bg-white mb-4'
- >
- <AccordionTrigger className='border-b p-5 px-8'>
- <HStack className='w-[90%] items-center justify-between'>
- <HStack className='items-center gap-6'>
- <Avatar
- isBordered
- color='primary'
- radius='lg'
- src={service?.photo ?? defaultImg}
- />
- <div>
- <h4 className='font-semibold text-lg w-fit'>{service?.name}</h4>
- <p className='text-gray-500 text-sm text-left'>
- Price: {DEFAULT_CURRENCY.symbol}
- {service?.price}
- </p>
- </div>
+ <>
+ <AccordionItem
+ value={index?.toString()}
+ className='rounded-md shadow bg-white mb-4'
+ >
+ <AccordionTrigger className='border-b p-5 px-8'>
+ <HStack className='w-[90%] items-center justify-between'>
+ <HStack className='items-center gap-6'>
+ <Avatar
+ isBordered
+ color='primary'
+ radius='lg'
+ src={service?.photo ?? defaultImg}
+ />
+ <div>
+ <h4 className='font-semibold text-lg w-fit'>{service?.name}</h4>
+ <p className='text-gray-500 text-sm text-left'>
+ Price: {DEFAULT_CURRENCY.symbol}
+ {service?.price}
+ </p>
+ </div>
+ </HStack>
+ <HStack className='items-center gap-2'>
+ <button
+ onClick={(e) => {
+ e.stopPropagation();
+ onOpen();
+ }}
+ >
+ <TrashIcon size={20} className='text-primary' />
+ </button>
+ <button
+ onClick={(e) => {
+ e.stopPropagation();
+ onEdit(service);
+ }}
+ >
+ <PenLineIcon size={20} className='text-secondary' />
+ </button>
+ </HStack>
  </HStack>
+ </AccordionTrigger>
+ <AccordionContent className='px-5 py-3'>
+ <h5 className='font-semibold mb-2'>Description:</h5>
+ {service?.description ?? "No description available"}
+ </AccordionContent>
+ </AccordionItem>
+
+ <Modal
+ isOpen={isOpen}
+ onClose={onClose}
+ title='Delete service'
+ description='Do you really want to delete this service? Note that 
+ this operation cannot be undone'
+ content={
  <HStack className='items-center gap-2'>
- <button>
- <TrashIcon size={20} className='text-primary' />
- </button>
- <button
- onClick={(e) => {
- e.stopPropagation();
- onEdit(service);
- }}
+ <Button
+ color='secondary'
+ disableRipple
+ radius='sm'
+ isDisabled={loading}
+ onClick={onClose}
+ >
+ Cancel
+ </Button>
+ <Button
+ color='primary'
+ disableRipple
+ radius='sm'
+ isLoading={loading}
+ onClick={onDelete}
  >
- <PenLineIcon size={20} className='text-secondary' />
- </button>
+ Continue
+ </Button>
  </HStack>
- </HStack>
- </AccordionTrigger>
- <AccordionContent className='px-5 py-3'>
- <h5 className='font-semibold mb-2'>Description:</h5>
- {service?.description ?? "No description available"}
- </AccordionContent>
- </AccordionItem>
+ }
+ />
+ </>
  );
 }