From b856b21aa7d85948c3b88754699dedeb36d6adb3 Mon Sep 17 00:00:00 2001 From: nflnkr Date: Tue, 23 May 2023 15:21:54 +0300 Subject: [PATCH] add change privilege price modal --- .../Tariffs/Privileges/ChangePriceModal.tsx | 42 ++++++++++++ .../Privileges.tsx} | 26 ++++++-- src/pages/dashboard/Content/Tariffs/index.tsx | 46 ++++++------- src/stores/privileges.ts | 66 +++++++++++++++---- 4 files changed, 140 insertions(+), 40 deletions(-) create mode 100644 src/pages/dashboard/Content/Tariffs/Privileges/ChangePriceModal.tsx rename src/pages/dashboard/Content/Tariffs/{privilegesDG.tsx => Privileges/Privileges.tsx} (56%) diff --git a/src/pages/dashboard/Content/Tariffs/Privileges/ChangePriceModal.tsx b/src/pages/dashboard/Content/Tariffs/Privileges/ChangePriceModal.tsx new file mode 100644 index 0000000..e5dc711 --- /dev/null +++ b/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 ( + + + changeModalPriceField(e.target.value)} + type="number" + /> + + + + ); +} \ No newline at end of file diff --git a/src/pages/dashboard/Content/Tariffs/privilegesDG.tsx b/src/pages/dashboard/Content/Tariffs/Privileges/Privileges.tsx similarity index 56% rename from src/pages/dashboard/Content/Tariffs/privilegesDG.tsx rename to src/pages/dashboard/Content/Tariffs/Privileges/Privileges.tsx index fd8db7e..752af0d 100644 --- a/src/pages/dashboard/Content/Tariffs/privilegesDG.tsx +++ b/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 = () => { + openPrivilegePriceModal(params.row.id, params.row.price); + }; + + return ( + + + + ); + }, + }, ]; -export default function PrivilegesDG() { +export default function Privileges() { const privileges = usePrivilegeStore(state => state.privileges); const privilegesGridData = privileges.map(privilege => ({ diff --git a/src/pages/dashboard/Content/Tariffs/index.tsx b/src/pages/dashboard/Content/Tariffs/index.tsx index 5bb5a12..847be3a 100644 --- a/src/pages/dashboard/Content/Tariffs/index.tsx +++ b/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([]); + const [selectedTariffs, setSelectedTariffs] = useState([]); - return ( - - Список привелегий - - - - Список тарифов - - setSelectedTariffs(selectionModel)} /> - - - ); + return ( + + Список привелегий + + + + + Список тарифов + + setSelectedTariffs(selectionModel)} /> + + + ); } diff --git a/src/stores/privileges.ts b/src/stores/privileges.ts index fe2ab5a..073f80f 100644 --- a/src/stores/privileges.ts +++ b/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()( 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" } ) -); \ No newline at end of file +); + +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; +}; \ No newline at end of file