add change privilege price modal

src/pages/dashboard/Content/Tariffs/Privileges/ChangePriceModal.tsx

@@ -0,0 +1,42 @@
+import { Box, Button, Dialog, useTheme } from "@mui/material";
+import { CustomTextField } from "@root/kitUI/CustomTextField";
+import { changeModalPriceField, changePrivilegePrice, closePrivilegePriceModal, usePrivilegeStore } from "@root/stores/privileges";
+import { enqueueSnackbar } from "notistack";
+
+
+export default function ChangePriceModal() {
+    const theme = useTheme();
+    const isModalOpen = usePrivilegeStore(state => state.isModalOpen);
+    const modalPriceField = usePrivilegeStore(state => state.modalPriceField);
+
+    function handleSaveChange() {
+        const errorMessage = changePrivilegePrice();
+        if (errorMessage) enqueueSnackbar(errorMessage);
+    }
+
+    return (
+        <Dialog
+            open={isModalOpen}
+            onClose={closePrivilegePriceModal}
+        >
+            <Box sx={{
+                p: "20px",
+                backgroundColor: theme.palette.grayLight.main,
+                display: "flex",
+                flexDirection: "column",
+                gap: "8px",
+            }}>
+                <CustomTextField
+                    id="privilege-custom-price"
+                    label="Цена"
+                    value={modalPriceField}
+                    setValue={e => changeModalPriceField(e.target.value)}
+                    type="number"
+                />
+                <Button
+                    onClick={handleSaveChange}
+                >Сохранить</Button>
+            </Box>
+        </Dialog>
+    );
+}   

src/pages/dashboard/Content/Tariffs/Privileges/Privileges.tsx

@@ -1,7 +1,9 @@
-import * as React from "react";
 import { GridColDef } from "@mui/x-data-grid";
 import DataGrid from "@kitUI/datagrid";
-import { usePrivilegeStore } from "@stores/privileges";
+import { openPrivilegePriceModal, usePrivilegeStore } from "@stores/privileges";
+import { IconButton } from "@mui/material";
+import { MouseEventHandler } from "react";
+import EditIcon from '@mui/icons-material/Edit';
 
 
 const columns: GridColDef[] = [
@@ -9,10 +11,26 @@ const columns: GridColDef[] = [
     { field: 'name', headerName: 'Привелегия', width: 150 },
     { field: 'description', headerName: 'Описание', width: 550 },//инфо из гитлаба.
     { field: 'type', headerName: 'Тип', width: 150 },
-    { field: 'price', headerName: 'Стоимость', width: 50 }
+    { field: 'price', headerName: 'Стоимость', width: 50 },
+    {
+        field: "changeValue",
+        headerName: "Изменить",
+        sortable: false,
+        renderCell: (params) => {
+            const onClick: MouseEventHandler<HTMLButtonElement> = () => {
+                openPrivilegePriceModal(params.row.id, params.row.price);
+            };
+
+            return (
+                <IconButton onClick={onClick}>
+                    <EditIcon />
+                </IconButton>
+            );
+        },
+    },
 ];
 
-export default function PrivilegesDG() {
+export default function Privileges() {
     const privileges = usePrivilegeStore(state => state.privileges);
 
     const privilegesGridData = privileges.map(privilege => ({

src/pages/dashboard/Content/Tariffs/index.tsx

@@ -4,31 +4,33 @@ import { GridSelectionModel } from "@mui/x-data-grid";
 
 import Cart from "@root/kitUI/Cart/Cart";
 
-import PrivilegesDG from "./privilegesDG";
+import Privileges from "./Privileges/Privileges";
 import TariffsDG from "./tariffsDG";
 import CreateTariff from "./CreateTariff";
+import ChangePriceModal from "./Privileges/ChangePriceModal";
 
 export default function Tariffs() {
-  const [selectedTariffs, setSelectedTariffs] = useState<GridSelectionModel>([]);
+    const [selectedTariffs, setSelectedTariffs] = useState<GridSelectionModel>([]);
 
-  return (
-    <Container
-      sx={{
-        width: "90%",
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-      }}
-    >
-      <Typography variant="h6">Список привелегий</Typography>
-      <PrivilegesDG />
-      <CreateTariff />
-      <Typography variant="h6" mt="20px">
-        Список тарифов
-      </Typography>
-      <TariffsDG handleSelectionChange={(selectionModel) => setSelectedTariffs(selectionModel)} />
-      <Cart selectedTariffs={selectedTariffs} />
-    </Container>
-  );
+    return (
+        <Container
+            sx={{
+                width: "90%",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
+            }}
+        >
+            <Typography variant="h6">Список привелегий</Typography>
+            <Privileges />
+            <ChangePriceModal />
+            <CreateTariff />
+            <Typography variant="h6" mt="20px">
+                Список тарифов
+            </Typography>
+            <TariffsDG handleSelectionChange={(selectionModel) => setSelectedTariffs(selectionModel)} />
+            <Cart selectedTariffs={selectedTariffs} />
+        </Container>
+    );
 }

src/stores/privileges.ts

@@ -1,30 +1,68 @@
 import { Privilege } from "@root/model/tariff";
 import { create } from "zustand";
-import { devtools, persist } from "zustand/middleware";
+import { devtools } from "zustand/middleware";
 import { exampleCartValues } from "./mocks/exampleCartValues";
 
 
 interface PrivilegeStore {
     privileges: Privilege[];
+    isModalOpen: boolean;
+    modalPrivilegeId: string | null;
+    modalPriceField: string;
     addPrivileges: (newPrivileges: Privilege[]) => void;
 }
 
 export const usePrivilegeStore = create<PrivilegeStore>()(
     devtools(
-        // persist(
-            (set, get) => ({
-                privileges: exampleCartValues.privileges,
-                addPrivileges: newPrivileges => set(state => (
-                    { privileges: [...state.privileges, ...newPrivileges] }
-                )),
-            }),
-        //     {
-        //         name: "privileges",
-        //         getStorage: () => localStorage,
-        //     }
-        // ),
+        (set, get) => ({
+            privileges: exampleCartValues.privileges,
+            isModalOpen: false,
+            modalPrivilegeId: null,
+            modalPriceField: "",
+            addPrivileges: newPrivileges => set(state => (
+                { privileges: [...state.privileges, ...newPrivileges] }
+            )),
+        }),
         {
             name: "Privilege store"
         }
     )
-);
+);
+
+export const closePrivilegePriceModal = () => usePrivilegeStore.setState({ isModalOpen: false });
+export const openPrivilegePriceModal = (modalPrivilegeId: string | null, defaultPrice: number) => usePrivilegeStore.setState(
+    {
+        isModalOpen: true,
+        modalPriceField: defaultPrice.toString(),
+        modalPrivilegeId,
+    }
+);
+
+export const changeModalPriceField = (modalPriceField: string) => usePrivilegeStore.setState({ modalPriceField });
+
+export const changePrivilegePrice = () => {
+    const { privileges, modalPrivilegeId, modalPriceField } = usePrivilegeStore.getState();
+
+    const privilegeIndex = privileges.findIndex(privilege => privilege.privilegeId === modalPrivilegeId);
+    if (privilegeIndex === -1) throw new Error("Privilege not found by id");
+
+    const price = parseFloat(modalPriceField.replace(",", "."));
+    if (!isFinite(price)) return "Error parsing price";
+
+    const newPrivilege: Privilege = {
+        ...privileges[privilegeIndex],
+        pricePerUnit: price,
+    };
+
+    const newPrivileges = [...privileges];
+    newPrivileges.splice(privilegeIndex, 1, newPrivilege);
+
+    usePrivilegeStore.setState({
+        privileges: newPrivileges,
+        isModalOpen: false,
+    });
+};
+
+export const findPrivilegeById = (privilegeId: string) => {
+    return usePrivilegeStore.getState().privileges.find(privilege => privilege.privilegeId === privilegeId) ?? null;
+};