feat: service deleting and rest categories placeholders

src/client/models/ServiceSchema.ts

@@ -15,5 +15,6 @@ export type ServiceSchema = {
     categoryPrices: Array<ServiceCategoryPriceSchema>;
     cost: (number | null);
     rank: string;
+    isPlaceholder?: boolean;
 };
 

src/client/services/ServiceService.ts

@@ -40,10 +40,20 @@ export class ServiceService {
      * @returns ServiceGetAllResponse Successful Response
      * @throws ApiError
      */
-    public static getAllServices(): CancelablePromise<ServiceGetAllResponse> {
+    public static getAllServices({
+        withPlaceholders = false,
+    }: {
+        withPlaceholders?: boolean,
+    }): CancelablePromise<ServiceGetAllResponse> {
         return __request(OpenAPI, {
             method: 'GET',
             url: '/service/get-all',
+            query: {
+                'with_placeholders': withPlaceholders,
+            },
+            errors: {
+                422: `Validation Error`,
+            },
         });
     }
     /**

src/components/Selects/ServiceSelectNew/ServiceSelectNew.tsx

@@ -16,7 +16,7 @@ type RestProps = {
 };
 type Props = Omit<ObjectSelectProps<ServiceSchema>, "data"> & RestProps;
 const ServiceSelectNew: FC<Props> = (props: Props) => {
-    const { services } = useServicesList();
+    const { services } = useServicesList({ withPlaceholders: false });
     const data = props.filterType
         ? services.filter(service => service.serviceType === props.filterType)
         : services;
@@ -28,10 +28,10 @@ const ServiceSelectNew: FC<Props> = (props: Props) => {
                 return {
                     ...option,
                     items: option.items.filter((item: ComboboxItem) =>
-                        item.label.toLowerCase().includes(search.toLowerCase())
+                        item.label.toLowerCase().includes(search.toLowerCase()),
                     ),
                 };
-            }
+            },
         );
     };
     return (

src/components/Selects/ServicesMultiselect/ServicesMultiselect.tsx

@@ -7,7 +7,7 @@ import useServicesList from "../../../pages/ServicesPage/hooks/useServicesList.t
 
 type Props = Omit<ObjectMultiSelectProps<ServiceSchema>, "data">;
 const ServicesMultiselect: FC<Props> = (props: Props) => {
-    const { services } = useServicesList();
+    const { services } = useServicesList({ withPlaceholders: false });
     return (
         <ObjectMultiSelect
             data={services}

src/components/ServiceSelect/ServiceSelect.tsx

@@ -20,7 +20,7 @@ const ServiceSelect: FC<Props> = props => {
         ServiceSchema | undefined
     >(props.defaultValue);
     const value = isControlled ? props.value : internalValue;
-    const { services } = useServicesList();
+    const { services } = useServicesList({ withPlaceholders: false });
     const categories = useMemo(
         () =>
             services.reduce((acc, service) => {
@@ -29,7 +29,7 @@ const ServiceSelect: FC<Props> = props => {
                 }
                 return acc;
             }, [] as string[]),
-        [services]
+        [services],
     );
 
     const data = useMemo(
@@ -43,22 +43,22 @@ const ServiceSelect: FC<Props> = props => {
                         label: service.name,
                     })),
             })),
-        [services, categories]
+        [services, categories],
     );
 
     const handleOnChange = (value: string) => {
         if (isControlled) {
             props.onChange(
                 services.find(
-                    service => service.id.toString() === value
+                    service => service.id.toString() === value,
-                ) as ServiceSchema
+                ) as ServiceSchema,
             );
             return;
         }
         setInternalValue(
             services.find(
-                service => service.id.toString() === value
+                service => service.id.toString() === value,
-            ) as ServiceSchema
+            ) as ServiceSchema,
         );
     };
     useEffect(() => {

src/pages/ServicesPage/components/ServicesTable/ServicesTable.tsx

@@ -36,7 +36,6 @@ const ServicesTable: FC<Props> = ({
     });
     const minRank = categoryRanks.sort()[0];
     const maxRank = categoryRanks.sort()[categoryRanks.length - 1];
-    console.log(minRank, maxRank);
 
     const onEditClick = (service: ServiceSchema) => {
         if (!onChange) return;
@@ -185,7 +184,7 @@ const ServicesTable: FC<Props> = ({
                 },
                 enableRowActions: true,
                 renderRowActions: ({ row }) => (
-                    <Flex gap="xs">
+                    <Flex display={row.original.isPlaceholder ? "none" : "flex"} gap="xs">
                         <Tooltip label="Редактировать">
                             <ActionIcon
                                 onClick={() => onEditClick(row.original)}

src/pages/ServicesPage/components/ServicesTable/columns.tsx

@@ -33,19 +33,23 @@ export const useServicesTableColumns = () => {
                 header: "Услуга",
                 enableGrouping: false,
                 enableSorting: false,
+                Cell: ({ row, cell }) => {
+                    return row.original.isPlaceholder ? "" : (cell.renderValue<string>());
+                },
             },
             {
                 accessorKey: "price",
                 header: "Цена",
                 enableGrouping: false,
                 enableSorting: false,
-                Cell: ({ row }) => getPriceRow(row.original),
+                Cell: ({ row }) => row.original.isPlaceholder ? "" : getPriceRow(row.original),
             },
             {
                 accessorKey: "cost",
                 header: "Себестоимость",
                 enableGrouping: false,
                 enableSorting: false,
+                Cell: ({ row }) => row.original.isPlaceholder ? "" : `${row.original.cost}₽`,
             },
 
         ],

src/pages/ServicesPage/hooks/useServicesList.tsx

@@ -1,10 +1,16 @@
 import { useQuery } from "@tanstack/react-query";
 import { ServiceService } from "../../../client";
 
-const useServicesList = () => {
+type Props = {
+    withPlaceholders?: boolean;
+
+}
+const useServicesList = (props: Props) => {
+    const { withPlaceholders = false } = props;
+
     const { isPending, error, data, refetch } = useQuery({
-        queryKey: ["getAllServices"],
+        queryKey: ["getAllServices", withPlaceholders],
-        queryFn: ServiceService.getAllServices,
+        queryFn: () => ServiceService.getAllServices({ withPlaceholders: withPlaceholders }),
     });
     const services = isPending || error || !data ? [] : data.services;
 

src/pages/ServicesPage/hooks/useServicesState.tsx

@@ -9,7 +9,7 @@ import useServicesList from "./useServicesList.tsx";
 import { Text } from "@mantine/core";
 
 const useServicesState = () => {
-    const { services, refetch } = useServicesList();
+    const { services, refetch } = useServicesList({ withPlaceholders: true });
 
     const onCreateClick = () => {
         modals.openContextModal({
@@ -27,7 +27,7 @@ const useServicesState = () => {
                 notifications.guess(ok, { message: message });
                 if (!ok) return;
                 await refetch();
-            }
+            },
         );
     };
 
@@ -45,7 +45,7 @@ const useServicesState = () => {
         ServiceService.createServiceCategory({
             requestBody: { category: category },
         }).then(({ ok, message }) =>
-            notifications.guess(ok, { message: message })
+            notifications.guess(ok, { message: message }),
         );
     };