From 40e13370526d86295a12926642402db35d69da5e Mon Sep 17 00:00:00 2001 From: Nikolai Date: Thu, 20 Oct 2022 09:05:10 +0600 Subject: [PATCH] =?UTF-8?q?=D1=81=D0=BA=D0=B8=D0=B4=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LoggedIn/Content/Discounts/index.tsx | 551 ++++++++++++++++++ .../LoggedIn/Content/Discounts/types.ts | 14 + .../Content/Tariffs/DataGridElement/index.tsx | 8 +- .../LoggedIn/Content/Tariffs/index.tsx | 2 +- src/Components/LoggedIn/Content/index.tsx | 22 +- src/index.tsx | 11 +- src/store.ts | 27 +- 7 files changed, 618 insertions(+), 17 deletions(-) create mode 100644 src/Components/LoggedIn/Content/Discounts/index.tsx create mode 100644 src/Components/LoggedIn/Content/Discounts/types.ts diff --git a/src/Components/LoggedIn/Content/Discounts/index.tsx b/src/Components/LoggedIn/Content/Discounts/index.tsx new file mode 100644 index 0000000..44b8aae --- /dev/null +++ b/src/Components/LoggedIn/Content/Discounts/index.tsx @@ -0,0 +1,551 @@ +import * as React from "react"; +import { Box, Typography, TextField, Checkbox, Button } from "@mui/material"; +import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider"; +import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; +import { DesktopDatePicker } from "@mui/x-date-pickers/DesktopDatePicker"; +import Table from "@mui/material/Table"; +import TableBody from "@mui/material/TableBody"; +import TableCell from "@mui/material/TableCell"; +import TableRow from "@mui/material/TableRow"; +import TableContainer from "@mui/material/TableContainer"; +import Paper from "@mui/material/Paper"; +import { DataGrid, GridColDef, GridSelectionModel, GridToolbar } from "@mui/x-data-grid"; +import MenuItem from "@mui/material/MenuItem"; +import Select, { SelectChangeEvent } from "@mui/material/Select"; +import { PrivilegesProps, DiscountProps } from "./types"; +import useStore, { StoreState } from "../../../../store"; +import theme from "../../../../theme"; + + +const columns: GridColDef[] = [ + { + field: "id", + headerName: "ID", + width: 30, + sortable: false, + }, + { + field: "name", + headerName: "Название скидки", + width: 200, + sortable: false, + }, + { + field: "endless", + headerName: "Бесконечная", + width: 120, + sortable: false, + }, + { + field: "from", + headerName: "От", + width: 120, + sortable: false, + }, + { + field: "dueTo", + headerName: "До", + width: 120, + sortable: false, + }, + { + field: "privileges", + headerName: "Привилегии", + width: 210, + sortable: false, + }, + { + field: "active", + headerName: "Активна", + width: 100, + sortable: false, + } +]; + +const rows:Array = [ + { id: 1, name: "Скидка 1", endless: false, from: "", dueTo: "", privileges: [ + { + good: "Товар 1", + discount: 0.3 + }, + { + good: "Товар 2", + discount: 0.2 + } + ], active: false }, + { id: 2, name: "Скидка 2", endless: false, from: "", dueTo: "", privileges: [ + { + good: "Товар 3", + discount: 0.3 + }, + { + good: "Товар 4", + discount: 0.2 + } + ], active: true }, + { id: 3, name: "Скидка 3", endless: false, from: "", dueTo: "", privileges: [ + { + good: "Товар 5", + discount: 0.3 + }, + { + good: "Товар 6", + discount: 0.2 + } + ], active: false }, +]; + +const Discounts: React.FC = () => { + const [checkboxState, setCheckboxState] = React.useState(false); + const toggleCheckbox = () => { setCheckboxState( !checkboxState ); } + + const [value1, setValue1] = React.useState( new Date() ); + const [value2, setValue2] = React.useState( new Date() ); + + const [service, setService] = React.useState("Шаблонизатор"); + const handleChange = (event: SelectChangeEvent) => { + setService(event.target.value as string); + }; + + let { discountsArray, discountsArraySet } = useStore((state) => state); + discountsArray = [...rows]; //УДАЛИТЬ + + const { discountsActiveArray, discountsActiveArraySet } = useStore((state) => state); + let discountsActiveArrayUpdated:Array; + + const findActiveDiscounts = () => { + const actives:Array = []; + + discountsArray.forEach( (item, i) => { + if( item.active == true ) { actives.push( i ); } + } ); + + discountsActiveArrayUpdated = [ ...actives ]; + + if( JSON.stringify(discountsActiveArray) != JSON.stringify(discountsActiveArrayUpdated) ) { + discountsActiveArraySet( discountsActiveArrayUpdated ); + } + } + + findActiveDiscounts(); + + const discountsArrayConverted = discountsArray.map( (item) => { + const dateFrom = item.from ? new Date( Number(item.from) ) : ""; + const dateDueTo = item.from ? new Date( Number(item.dueTo) ) : ""; + + const strFrom = dateFrom + ? `${dateFrom.getDate()}.${dateFrom.getMonth()}.${dateFrom.getFullYear()}` + : "-" + + const strDueTo = dateDueTo + ? `${dateDueTo.getDate()}.${dateDueTo.getMonth()}.${dateDueTo.getFullYear()}` + : "-" + + if( item.privileges.length ) { + const result = item.privileges.reduce( (acc, privilege) => { + acc = acc + ? `${acc}, ${privilege.good} - ${privilege.discount}%` + : `${privilege.good} - ${privilege.discount * 100}%`; + + return acc; + }, "" ); + + return { ...item, privileges: result, from: strFrom, dueTo: strDueTo } + } else { + return { ...item, from: strFrom, dueTo: strDueTo } + } + } ); + + const createDiscount = ( name:string, discount: number ) => { + const newDiscount = { + id: new Date().getTime(), + name, + endless: checkboxState, + from: checkboxState ? "" : new Date( value1 ).getTime() +"", + dueTo: checkboxState ? "" : new Date( value2 ).getTime() +"", + privileges: [{ + good: service, + discount: discount / 100 + }], + active: true + } + + const discountsArrayUpdated = [ ...discountsArray, newDiscount ]; + discountsArraySet( discountsArrayUpdated ); + } + + const fieldName = React.useRef(null); + const fieldDiscount = React.useRef(null); + + const checkFields = () => { + if( fieldName.current != null && fieldDiscount.current != null ) { + createDiscount( fieldName.current.value, Number(fieldDiscount.current.value) ); + } + } + + const { discountsSelectedRowsData, discountsSelectedRowsDataSet } = useStore((state) => state); + + const onRowsSelectionHandler = ( ids:GridSelectionModel ) => { + const result:Array = []; + ids.forEach((id) => discountsArray.forEach( (row) => { + if(row.id === id) result.push(row); + } ) ); + + discountsSelectedRowsDataSet( [ ...result ] ); + }; + + const activation = ( value:boolean ) => { + discountsArray.forEach( (item, i) => { + discountsSelectedRowsData.forEach( (selected) => { + if( item.id == selected.id ) { + if( value ) { + discountsArray[ i ].active = true; + } else { + discountsArray[ i ].active = false; + } + } + } ); + } ); + + discountsArraySet( discountsArray ); + } + + return ( + + + + СКИДКИ + + + + + Название: + + + + + Условия: + + + + + + + + + + + + Работает, если заплатите 100500 денег + + + + + Вы должны будете продать душу дьяволу + + + +
+ + + + Дата действия: + + + + С + + { if(e) { setValue1(e) } } } + renderInput={(params) => } + InputProps={{ sx: { + height: "40px", + color: theme.palette.secondary.main, + border: "1px solid", + borderColor: theme.palette.secondary.main, + "& .MuiSvgIcon-root": { color: theme.palette.secondary.main } + } }} + /> + + по + + { if(e) { setValue2(e) } } } + renderInput={(params) => } + InputProps={{ sx: { + height: "40px", + color: theme.palette.secondary.main, + border: "1px solid", + borderColor: theme.palette.secondary.main, + "& .MuiSvgIcon-root": { color: theme.palette.secondary.main } + } }} + /> + + + + + + toggleCheckbox() } /> + + + Бессрочно + + + + + + + + + + + + onRowsSelectionHandler( ids ) } + /> + + + + + + + + + + + + + + ); +} + + +export default Discounts; \ No newline at end of file diff --git a/src/Components/LoggedIn/Content/Discounts/types.ts b/src/Components/LoggedIn/Content/Discounts/types.ts new file mode 100644 index 0000000..b86d991 --- /dev/null +++ b/src/Components/LoggedIn/Content/Discounts/types.ts @@ -0,0 +1,14 @@ +export interface PrivilegesProps { + good: string, + discount: number +} + +export interface DiscountProps { + id: number + name: string + endless: boolean + from: string + dueTo: string + privileges: Array + active: boolean +} \ No newline at end of file diff --git a/src/Components/LoggedIn/Content/Tariffs/DataGridElement/index.tsx b/src/Components/LoggedIn/Content/Tariffs/DataGridElement/index.tsx index fa575eb..6cea40e 100644 --- a/src/Components/LoggedIn/Content/Tariffs/DataGridElement/index.tsx +++ b/src/Components/LoggedIn/Content/Tariffs/DataGridElement/index.tsx @@ -142,19 +142,19 @@ const DataGridElement: React.FC = ({ openModal }) => { localStorage.setItem("tariffs", JSON.stringify(tariffsArray)); - const { selectedRowsData, selectedRowsDataSet } = useStore((state) => state); + const { tariffsSelectedRowsData, tariffsSelectedRowsDataSet } = useStore((state) => state); const onRowsSelectionHandler = ( ids:GridSelectionModel ) => { const result:Array = []; ids.forEach((id) => tariffsArray.forEach( (row) => { if(row.id === id) result.push(row); } ) ); - selectedRowsDataSet( result ); + tariffsSelectedRowsDataSet( result ); }; const { cartRowsData, cartRowsDataSet } = useStore((state) => state); const handleToBasket = () => { - cartRowsDataSet( selectedRowsData ); + cartRowsDataSet( tariffsSelectedRowsData ); } const handleRemoveBasket = ( id:number ) => { @@ -172,7 +172,7 @@ const DataGridElement: React.FC = ({ openModal }) => { let { promocodeArray, promocodeArraySet } = useStore((state) => state); const [selectedPromocode, setSelectedPromocode] = React.useState( -1 ); - promocodeArray = [ ...rowz ]; + //promocodeArray = [ ...rowz ]; const setPromocode = ( name:string ) => { let codeNumber = -1; diff --git a/src/Components/LoggedIn/Content/Tariffs/index.tsx b/src/Components/LoggedIn/Content/Tariffs/index.tsx index b608b00..a620339 100644 --- a/src/Components/LoggedIn/Content/Tariffs/index.tsx +++ b/src/Components/LoggedIn/Content/Tariffs/index.tsx @@ -41,7 +41,7 @@ const Tariffs: React.FC = () => { const newPackage = ( name:string ) => { const tariffs:Array = []; - store.selectedRowsData.forEach( (item) => { + store.tariffsSelectedRowsData.forEach( (item) => { if( item.type === "package" && item.tariffs ) { tariffs.push( ...item.tariffs ); } else { diff --git a/src/Components/LoggedIn/Content/index.tsx b/src/Components/LoggedIn/Content/index.tsx index ea0bbbd..d1df6ea 100644 --- a/src/Components/LoggedIn/Content/index.tsx +++ b/src/Components/LoggedIn/Content/index.tsx @@ -1,10 +1,14 @@ import * as React from "react"; import { Box } from "@mui/material"; import Users from "./Users"; -import Promocode from "./Promocode"; -import Support from "./Support"; -import Tariffs from "./Tariffs"; import Entities from "./Entities"; +import Tariffs from "./Tariffs"; +import Discounts from "./Discounts"; +import Promocode from "./Promocode"; + + +import Support from "./Support"; +import Error404 from "../../Error404"; export interface MWProps { @@ -12,7 +16,17 @@ export interface MWProps { } const Content: React.FC = ({ section }) => { - const componentsArray = [ , , , , ]; + const componentsArray = [ + , + , + , + , + , + , + , + , + + ]; return ( diff --git a/src/index.tsx b/src/index.tsx index 84f5e72..1e41aea 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -16,11 +16,14 @@ root.render( } /> } /> - } /> - } /> - } /> + } /> + } /> } /> - } /> + } /> + } /> + + + } /> } /> } /> diff --git a/src/store.ts b/src/store.ts index 5c18909..63884c3 100644 --- a/src/store.ts +++ b/src/store.ts @@ -1,34 +1,53 @@ import create from "zustand"; import { ArrayProps } from "./Components/LoggedIn/Content/Tariffs/types"; import { PromocodeProps } from "./Components/LoggedIn/Content/Promocode/types"; +import { DiscountProps } from "./Components/LoggedIn/Content/Discounts/types"; const useStore = create((set) => ({ tariffsArray: [], tariffsArraySet: (array) => set({ tariffsArray: array }), - selectedRowsData: [], - selectedRowsDataSet: (array) => set({ selectedRowsData: array }), + tariffsSelectedRowsData: [], + tariffsSelectedRowsDataSet: (array) => set({ tariffsSelectedRowsData: array }), cartRowsData: [], cartRowsDataSet: (array) => set({ cartRowsData: array }), promocodeArray: [], promocodeArraySet: (array) => set({ promocodeArray: array }), + + discountsArray: [], + discountsArraySet: (array) => set({ discountsArray: array }), + + discountsActiveArray: [], + discountsActiveArraySet: (array) => set({ discountsActiveArray: array }), + + discountsSelectedRowsData: [], + discountsSelectedRowsDataSet: (array) => set({ discountsSelectedRowsData: array }), })) export interface StoreState { tariffsArray: Array, tariffsArraySet: (array:Array) => void, - selectedRowsData: Array, - selectedRowsDataSet: (array:Array) => void, + tariffsSelectedRowsData: Array, + tariffsSelectedRowsDataSet: (array:Array) => void, cartRowsData: Array, cartRowsDataSet: (array:Array) => void, promocodeArray: Array, promocodeArraySet: (array:Array) => void, + + discountsArray: Array, + discountsArraySet: (array:Array) => void, + + discountsActiveArray: Array, + discountsActiveArraySet: (array:Array) => void, + + discountsSelectedRowsData: Array, + discountsSelectedRowsDataSet: (array:Array) => void, }