309 lines
9.7 KiB
TypeScript
309 lines
9.7 KiB
TypeScript
import React from "react";
|
||
import { useEffect, useState } from "react";
|
||
import { GridColDef, GridSelectionModel, GridToolbar } from "@mui/x-data-grid";
|
||
import { Box, Button, IconButton } from "@mui/material";
|
||
import BackspaceIcon from "@mui/icons-material/Backspace";
|
||
import { enqueueSnackbar } from "notistack";
|
||
import ModeEditOutlineOutlinedIcon from "@mui/icons-material/ModeEditOutlineOutlined";
|
||
|
||
import DataGrid from "@kitUI/datagrid";
|
||
|
||
import { deleteTariffs, useTariffStore } from "@root/stores/tariffs";
|
||
import { SERVICE_LIST } from "@root/model/tariff";
|
||
import { findPrivilegeById } from "@root/stores/privileges";
|
||
|
||
import axios from "axios";
|
||
import { authStore } from "@root/stores/auth";
|
||
import DeleteModal from "@root/kitUI/DeleteModal";
|
||
import EditModal from "@root/kitUI/EditModal";
|
||
|
||
interface Props {
|
||
selectedTariffs: GridSelectionModel;
|
||
handleSelectionChange: (selectionModel: GridSelectionModel) => void;
|
||
}
|
||
|
||
interface Privilege {
|
||
name: string;
|
||
privilegeId: string;
|
||
serviceKey: string;
|
||
amount: number;
|
||
description: string;
|
||
price: number;
|
||
type: string;
|
||
value: string;
|
||
updatedAt: string;
|
||
_id: string;
|
||
}
|
||
|
||
interface MergedTariff {
|
||
_id: string;
|
||
id: string;
|
||
name: string;
|
||
privilegeId: string;
|
||
serviceName: string;
|
||
price: number;
|
||
isCustom: boolean;
|
||
createdAt: string;
|
||
isDeleted: boolean;
|
||
amount?: number;
|
||
customPricePerUnit?: number;
|
||
privilegies: Privilege[];
|
||
}
|
||
|
||
export default function TariffsDG({ selectedTariffs, handleSelectionChange }: Props) {
|
||
const exampleTariffs = useTariffStore((state) => state.tariffs);
|
||
const [tariffs, setTariffs] = useState<any>();
|
||
const [deletedRows, setDeletedRows] = useState<string[]>([]);
|
||
const [openDeleteModal, setOpenDeleteModal] = useState(false);
|
||
const [openEditModal, setOpenEditModal] = useState(false);
|
||
const { token } = authStore();
|
||
|
||
const [errorEdit, setErrorEdit] = useState(false);
|
||
const [errorDelete, setErrorDelete] = useState(false);
|
||
|
||
const mergeTariffs: MergedTariff[] = [...exampleTariffs, ...(tariffs?.tariffs ?? [])];
|
||
|
||
const tariffEdit = async (tarifIid: string, tariffName: string, tariffPrice: string, privilege: Privilege) => {
|
||
try {
|
||
await axios({
|
||
method: "put",
|
||
url: `https://admin.pena.digital/strator/tariff/${tarifIid}`,
|
||
headers: {
|
||
Authorization: `Bearer ${token}`,
|
||
},
|
||
data: {
|
||
name: tariffName,
|
||
price: tariffPrice,
|
||
isCustom: true,
|
||
privilegies: [
|
||
{
|
||
name: privilege.name,
|
||
privilegeId: privilege.privilegeId,
|
||
serviceKey: privilege.serviceKey,
|
||
description: privilege.description,
|
||
type: privilege.type,
|
||
value: privilege.value,
|
||
price: privilege.price,
|
||
amount: privilege.amount,
|
||
},
|
||
],
|
||
},
|
||
});
|
||
} catch (error: any) {
|
||
setErrorEdit(true);
|
||
enqueueSnackbar(error.message);
|
||
}
|
||
};
|
||
|
||
const tariffDeleteDataGrid = async (tarifIid: string) => {
|
||
if (exampleTariffs.find((tariff) => tariff.id === tarifIid)) {
|
||
deleteTariffs(tarifIid);
|
||
enqueueSnackbar("Тариф удалён");
|
||
return;
|
||
}
|
||
|
||
try {
|
||
await axios({
|
||
method: "delete",
|
||
url: "https://admin.pena.digital/strator/tariff",
|
||
headers: {
|
||
Authorization: `Bearer ${token}`,
|
||
},
|
||
data: { id: tarifIid },
|
||
});
|
||
setDeletedRows((prevDeletedRows) => [...prevDeletedRows, tarifIid]);
|
||
enqueueSnackbar("Тариф удалён");
|
||
} catch (error: any) {
|
||
setErrorDelete(true);
|
||
enqueueSnackbar("Ошибка удаления :", error.message);
|
||
}
|
||
};
|
||
|
||
const tariffDelete = async (tarifIid: GridSelectionModel) => {
|
||
const deleted = [];
|
||
const notDeleted = [];
|
||
|
||
for (let index = 0; index < tarifIid.length; index++) {
|
||
if (exampleTariffs.find((tariff) => tariff.id === (tarifIid[index] as string))) {
|
||
deleted.push(tarifIid[index]);
|
||
deleteTariffs(tarifIid[index] as string);
|
||
continue;
|
||
}
|
||
|
||
try {
|
||
await axios({
|
||
method: "delete",
|
||
url: "https://admin.pena.digital/strator/tariff",
|
||
headers: {
|
||
Authorization: `Bearer ${token}`,
|
||
},
|
||
data: { id: tarifIid[index] },
|
||
});
|
||
setDeletedRows((prevDeletedRows) => [...prevDeletedRows, tarifIid[index] as string]);
|
||
|
||
deleted.push(tarifIid[index]);
|
||
} catch (error: any) {
|
||
notDeleted.push(tarifIid[index]);
|
||
|
||
setErrorDelete(true);
|
||
enqueueSnackbar(error.message);
|
||
}
|
||
}
|
||
|
||
enqueueSnackbar(`Deleted: ${deleted.join(", ")}`);
|
||
enqueueSnackbar(`Not deleted: ${notDeleted.join(", ")}`);
|
||
};
|
||
|
||
useEffect(() => {
|
||
const axiosTariffs = async () => {
|
||
try {
|
||
const { data } = await axios({
|
||
method: "get",
|
||
url: "https://admin.pena.digital/strator/tariff",
|
||
});
|
||
setTariffs(data);
|
||
console.log(data);
|
||
} catch (error) {
|
||
enqueueSnackbar("Ошибка получения тарифов");
|
||
}
|
||
};
|
||
|
||
axiosTariffs();
|
||
}, [deletedRows]);
|
||
|
||
const columns: GridColDef[] = [
|
||
{ field: "id", headerName: "ID", width: 100 },
|
||
{ field: "name", headerName: "Название тарифа", width: 150 },
|
||
{ field: "serviceName", headerName: "Сервис", width: 150 }, //инфо из гитлаба.
|
||
{ field: "privilegeName", headerName: "Привелегия", width: 150 },
|
||
{ field: "amount", headerName: "Количество", width: 110 },
|
||
{ field: "type", headerName: "Единица", width: 100 },
|
||
{ field: "pricePerUnit", headerName: "Цена за ед.", width: 100 },
|
||
{ field: "isCustomPrice", headerName: "Кастомная цена", width: 130 },
|
||
{ field: "total", headerName: "Сумма", width: 60 },
|
||
{ field: "isDeleted", headerName: "isDeleted", width: 60 },
|
||
{
|
||
field: "delete",
|
||
headerName: "Удаление",
|
||
width: 60,
|
||
renderCell: ({ row }) => {
|
||
return (
|
||
<IconButton
|
||
onClick={() => {
|
||
tariffDeleteDataGrid(row.id);
|
||
}}
|
||
>
|
||
<BackspaceIcon />
|
||
</IconButton>
|
||
);
|
||
},
|
||
},
|
||
{
|
||
field: "edit",
|
||
headerName: "Изменение",
|
||
width: 60,
|
||
renderCell: ({ row }) => {
|
||
return (
|
||
<>
|
||
<IconButton onClick={() => setOpenEditModal(true)}>
|
||
<ModeEditOutlineOutlinedIcon />
|
||
</IconButton>
|
||
<EditModal
|
||
tariffEdit={tariffEdit}
|
||
errorEdit={errorEdit}
|
||
tariff={row}
|
||
selectedTariffPrivilege={row.pprivilege}
|
||
open={openEditModal}
|
||
handleClose={() => setOpenEditModal(false)}
|
||
/>
|
||
</>
|
||
);
|
||
},
|
||
},
|
||
];
|
||
|
||
const privilegiesName = (array: Privilege[]) => {
|
||
const name = array.map(({ name }) => name);
|
||
return name[0];
|
||
};
|
||
|
||
const gridData = mergeTariffs.map((tariff) => ({
|
||
id: tariff._id ? tariff._id : tariff.id,
|
||
name: tariff.name,
|
||
serviceName: SERVICE_LIST.find(
|
||
(service) => service.serviceKey === findPrivilegeById(tariff.privilegeId)?.serviceKey
|
||
)?.displayName,
|
||
privilegeName: tariff.privilegies
|
||
? privilegiesName(tariff.privilegies)
|
||
: `(${tariff.privilegeId}) ${findPrivilegeById(tariff.privilegeId)?.description ?? "Привилегия не найдена"}`,
|
||
privilege: tariff.privilegies ? tariff.privilegies : [],
|
||
amount: tariff.amount,
|
||
type: findPrivilegeById(tariff.privilegeId)?.type === "count" ? "день" : "шт.",
|
||
pricePerUnit: tariff.customPricePerUnit
|
||
? tariff.customPricePerUnit ?? findPrivilegeById(tariff.privilegeId)?.price
|
||
: tariff.price,
|
||
isCustomPrice: tariff.customPricePerUnit === undefined ? "Нет" : "Да",
|
||
isDeleted: tariff.isDeleted,
|
||
total: tariff.amount
|
||
? tariff.amount * (tariff.customPricePerUnit ?? findPrivilegeById(tariff.privilegeId)?.price ?? 0)
|
||
: 0,
|
||
}));
|
||
|
||
const selectedTariff = gridData.find((tariff) => tariff.id === selectedTariffs[0]);
|
||
const selectedTariffPrivilege = selectedTariff ? selectedTariff.privilege : [];
|
||
|
||
const allName = () => {
|
||
const selectedNames = [];
|
||
|
||
for (let index = 0; index < selectedTariffs.length; index++) {
|
||
const tariff = gridData.find((tariff) => tariff.id === selectedTariffs[index]);
|
||
const name = tariff ? tariff.name : "";
|
||
selectedNames.push(name);
|
||
}
|
||
|
||
return selectedNames;
|
||
};
|
||
|
||
console.log(allName());
|
||
|
||
return (
|
||
<>
|
||
<DataGrid
|
||
disableSelectionOnClick={true}
|
||
checkboxSelection={true}
|
||
rows={gridData}
|
||
columns={columns}
|
||
getRowId={(row) => row.id}
|
||
components={{ Toolbar: GridToolbar }}
|
||
onSelectionModelChange={handleSelectionChange}
|
||
/>
|
||
{selectedTariffs.length ? (
|
||
<Box component="section" sx={{ width: "100%", display: "flex", justifyContent: "start", mb: "30px" }}>
|
||
<Button onClick={() => setOpenDeleteModal(true)} sx={{ mr: "20px", zIndex: "10000" }}>
|
||
Удаление
|
||
</Button>
|
||
<Button onClick={() => setOpenEditModal(true)}>Редактирование</Button>
|
||
</Box>
|
||
) : (
|
||
<React.Fragment />
|
||
)}
|
||
<DeleteModal
|
||
tariffDelete={tariffDelete}
|
||
errorDelete={errorDelete}
|
||
tariffId={selectedTariffs}
|
||
tariffName={allName()}
|
||
open={openDeleteModal}
|
||
handleClose={() => setOpenDeleteModal(false)}
|
||
/>
|
||
<EditModal
|
||
tariffEdit={tariffEdit}
|
||
errorEdit={errorEdit}
|
||
tariff={selectedTariff}
|
||
selectedTariffPrivilege={selectedTariffPrivilege}
|
||
open={openEditModal}
|
||
handleClose={() => setOpenEditModal(false)}
|
||
/>
|
||
</>
|
||
);
|
||
}
|