From fa5c94e9e296ce3171dc3b907db6f05a6e316f7b Mon Sep 17 00:00:00 2001 From: DVorortnoy Date: Mon, 24 Apr 2023 17:25:23 +0300 Subject: [PATCH 1/4] add --- package-lock.json | 9 ++++++++ package.json | 1 + src/components/DateInput/DateInput.jsx | 7 ------ .../DateInput/DateInput.module.scss | 4 ++-- .../CategoryBoard/CategoryBoard.jsx | 6 +++-- .../CategoryBoard/CategoryBoard.module.scss | 23 +++++++++++++++++++ .../ExpensesBoard/ExpenseBoardItem.jsx | 4 +++- .../ExpensesBoard/ExpensesBoard.jsx | 8 +++---- .../ExpensesBoard/ExpensesBoard.module.scss | 18 ++++++++++++--- .../StatisticsComponents/PopUp/PopUp.jsx | 10 ++++---- .../StatisticsComponents/PopUp/Select.jsx | 12 ++++------ 11 files changed, 70 insertions(+), 32 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2da10d3..c8ee2a6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "formik": "^2.2.9", "lodash": "^4.17.21", "modern-normalize": "^1.1.0", + "moment": "^2.29.4", "notiflix": "^3.2.6", "react": "^18.2.0", "react-bootstrap": "^2.7.4", @@ -12389,6 +12390,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/moment": { + "version": "2.29.4", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz", + "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==", + "engines": { + "node": "*" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", diff --git a/package.json b/package.json index 4dbc8ff..8dec600 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "formik": "^2.2.9", "lodash": "^4.17.21", "modern-normalize": "^1.1.0", + "moment": "^2.29.4", "notiflix": "^3.2.6", "react": "^18.2.0", "react-bootstrap": "^2.7.4", diff --git a/src/components/DateInput/DateInput.jsx b/src/components/DateInput/DateInput.jsx index 7e97782..47ac6b1 100644 --- a/src/components/DateInput/DateInput.jsx +++ b/src/components/DateInput/DateInput.jsx @@ -18,18 +18,11 @@ export const Calendar = ({onDate}) => { const year = startDate.getFullYear(); const month =startDate.getMonth()+1 - // const month_ =()=>{ - // if(month<10){ - // return ("0"+month) - // } - // } useEffect(()=>{ onDate({month, year}) },[onDate, year, month]) - - // console.log(getMonth, getYear); return ( { }, [dateFilter, dispatch]); return ( -
+
+
-
    +
      {transactionData?.map(item => )}
+
); }; diff --git a/src/components/StatisticsComponents/CategoryBoard/CategoryBoard.module.scss b/src/components/StatisticsComponents/CategoryBoard/CategoryBoard.module.scss index 09c83ea..18dc32a 100644 --- a/src/components/StatisticsComponents/CategoryBoard/CategoryBoard.module.scss +++ b/src/components/StatisticsComponents/CategoryBoard/CategoryBoard.module.scss @@ -4,6 +4,16 @@ .container { @include container; } +.background_img{ + @include tablet{ + background-image: url(../../../assets/img/bg-tablet.png); + background-size: contain + } + @include desktop{ + background-image: url(../../../assets/img/bg-desktop.png); + background-size: contain + } +} .wrapper{ position: relative; position: relative; @@ -177,3 +187,16 @@ background-color: black; } +.expense_block { + @include desktop { + height: 420px; + overflow-y: scroll; + } + @include tablet { + height: 420px; + overflow-y: scroll; + } +} +.expense_block::-webkit-scrollbar { + width: 2px; /* ширина всей полосы прокрутки */ +} \ No newline at end of file diff --git a/src/components/StatisticsComponents/ExpensesBoard/ExpenseBoardItem.jsx b/src/components/StatisticsComponents/ExpensesBoard/ExpenseBoardItem.jsx index f813c0b..c82d9af 100644 --- a/src/components/StatisticsComponents/ExpensesBoard/ExpenseBoardItem.jsx +++ b/src/components/StatisticsComponents/ExpensesBoard/ExpenseBoardItem.jsx @@ -2,6 +2,7 @@ import { useDispatch } from 'react-redux'; import s from './ExpensesBoard.module.scss'; import { deleteOneTransaction } from '../../../redux/operations/cashflowOperations'; import iconSvg from '../Svg'; +import moment from 'moment'; export const Item = ({ _id, @@ -18,13 +19,14 @@ export const Item = ({ setActive(true); setData(setTransData); }; +const newDate =moment().format("DD MM YYYY"); return ( <>
  • -

    {date}

    +

    {newDate}

    {comment}

    {sum} UAH

    diff --git a/src/components/StatisticsComponents/ExpensesBoard/ExpensesBoard.jsx b/src/components/StatisticsComponents/ExpensesBoard/ExpensesBoard.jsx index 831c8c6..cbe7609 100644 --- a/src/components/StatisticsComponents/ExpensesBoard/ExpensesBoard.jsx +++ b/src/components/StatisticsComponents/ExpensesBoard/ExpensesBoard.jsx @@ -1,6 +1,6 @@ import s from './ExpensesBoard.module.scss'; import { StatisticsNav } from '../StatisticsNav/StatisticsNav'; -import { useDispatch, useSelector } from 'react-redux'; +import { useDispatch } from 'react-redux'; import { PopUp } from '../PopUp/PopUp'; import { useEffect, useState } from 'react'; import { Calendar } from '../../DateInput/DateInput'; @@ -15,7 +15,6 @@ export const ExpensesList = () => { const [dataIn, setDataIn] = useState(''); //данні по обраній транзакції const [dateFilter, setDateFilter] = useState(''); //обрані дати const [transactionData, setTransactionData] = useState([]); //отримання транзакцій - const [form, setForm]= useState() const dispatch = useDispatch(); @@ -34,7 +33,8 @@ export const ExpensesList = () => { if (!transactionData || transactionData===[]) return; return ( -
    +
    +
    @@ -53,10 +53,10 @@ if (!transactionData || transactionData===[]) return; isActive={popupActive} setActive={setPopupActive} setData={dataIn} - formChange={setForm} /> )}
    +
    ); }; diff --git a/src/components/StatisticsComponents/ExpensesBoard/ExpensesBoard.module.scss b/src/components/StatisticsComponents/ExpensesBoard/ExpensesBoard.module.scss index 0d72ea3..44aa3d1 100644 --- a/src/components/StatisticsComponents/ExpensesBoard/ExpensesBoard.module.scss +++ b/src/components/StatisticsComponents/ExpensesBoard/ExpensesBoard.module.scss @@ -1,6 +1,15 @@ @import 'src/assets/styles/utils/mixins'; @import 'src/assets/styles/utils/vars'; - +.background_img{ + @include tablet{ + background-image: url(../../../assets/img/bg-tablet.png); + background-size: contain + } + @include desktop{ + background-image: url(../../../assets/img/bg-desktop.png); + background-size: contain + } +} .container { @include container; } @@ -184,10 +193,13 @@ .expense_block { @include desktop { height: 420px; - overflow: scroll; + overflow-y: scroll; } @include tablet { height: 420px; - overflow: scroll; + overflow-y: scroll; } } +.expense_block::-webkit-scrollbar { + width: 2px; /* ширина всей полосы прокрутки */ +} diff --git a/src/components/StatisticsComponents/PopUp/PopUp.jsx b/src/components/StatisticsComponents/PopUp/PopUp.jsx index 96b38bc..9a73a33 100644 --- a/src/components/StatisticsComponents/PopUp/PopUp.jsx +++ b/src/components/StatisticsComponents/PopUp/PopUp.jsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useState } from 'react'; import s from './Popup.module.scss'; import iconSvg from '../Svg'; import clsx from 'clsx'; @@ -7,7 +7,7 @@ import SelectCategory from './Select'; import { Notify } from 'notiflix'; import { useDispatch } from 'react-redux'; -export const PopUp = ({ isActive, setActive, setData, formChange }) => { +export const PopUp = ({ isActive, setActive, setData}) => { const { _id, date, comment, category, sum, type } = setData; const dispatch = useDispatch(); const initialValues = { @@ -47,10 +47,9 @@ export const PopUp = ({ isActive, setActive, setData, formChange }) => { }; const handleSelect = data => { - // console.log(data) if (!data) return; - const { name, value } = data; - console.log(name, value); + const { value, label } = data; + console.log(value); setForm(prevForm => { return { ...prevForm, @@ -63,7 +62,6 @@ export const PopUp = ({ isActive, setActive, setData, formChange }) => { e.preventDefault(); console.log('form', form); dispatch(putOneTransaction(form)); - formChange(form) setActive(false); }; return ( diff --git a/src/components/StatisticsComponents/PopUp/Select.jsx b/src/components/StatisticsComponents/PopUp/Select.jsx index 3e1bd2e..f1deded 100644 --- a/src/components/StatisticsComponents/PopUp/Select.jsx +++ b/src/components/StatisticsComponents/PopUp/Select.jsx @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; +import { useSelector } from 'react-redux'; import Select from 'react-select'; import '../../../components/Select/SelectCategory.scss'; // import s from './Popup.module.scss'; @@ -9,7 +9,7 @@ const colourStyles = { ...styles, width: '275px', border: 'none', - boxShadow: "none", + boxShadow: 'none', backgroundColor: '#252C4180', height: '74px', outline: 'none', @@ -35,8 +35,6 @@ const colourStyles = { export default function SelectCategory({ currentCategory, changeCategory }) { const [categoryValue, setCategoryValue] = useState(''); - const dispatch = useDispatch(); - const categories = useSelector(state => state?.categories?.categories); useEffect(() => { @@ -48,7 +46,7 @@ export default function SelectCategory({ currentCategory, changeCategory }) { value: name, label: title, }; - }); + }, ); useEffect(() => { setCategoryValue( @@ -56,7 +54,7 @@ export default function SelectCategory({ currentCategory, changeCategory }) { return categoryId.value === currentCategory; }) ); - }, []); + },[]); return ( ); } diff --git a/src/services/backendAPI.js b/src/services/backendAPI.js index e2fe2bf..7f3067b 100644 --- a/src/services/backendAPI.js +++ b/src/services/backendAPI.js @@ -266,10 +266,10 @@ export const deleteOneTransactionApi = transactionId => { .then(() => transactionId); }; -export const putOneTransactionApi = ({_id, type, comment, sum, category}) => { - console.log('edit') +export const putOneTransactionApi = ({ _id, type, comment, sum, category }) => { + console.log('edit'); return axios - .put(`/api/cashflow/${_id}`, { type, category, comment, sum}) + .put(`/api/cashflow/${_id}`, { type, category, comment, sum }) .then(({ data: { type, category, comment, sum } }) => ({ type, category, @@ -280,7 +280,12 @@ export const putOneTransactionApi = ({_id, type, comment, sum, category}) => { export const getCashflowStatApi = ({ month, year }) => { return axios - .get('/api/cashflow/stat', { month, year }) + .get('/api/cashflow/stat', { + params: { + month, + year, + }, + }) .then(({ data }) => data); }; From c41ac22778079ddba8fab30e3315f5935c2d5cb5 Mon Sep 17 00:00:00 2001 From: Illia Zolotukha Date: Fri, 28 Apr 2023 09:51:10 +0300 Subject: [PATCH 4/4] minor style fixes --- .../DateInput/DateInput.module.scss | 10 ++++- .../CategoryBoard/CategoryBoard.jsx | 8 ++-- .../CategoryBoard/CategoryBoard.module.scss | 41 +++++++++++------ .../ExpensesBoard/ExpensesBoard.jsx | 8 ++-- .../ExpensesBoard/ExpensesBoard.module.scss | 45 ++++++++++++------- src/index.js | 2 +- 6 files changed, 75 insertions(+), 39 deletions(-) diff --git a/src/components/DateInput/DateInput.module.scss b/src/components/DateInput/DateInput.module.scss index c157c80..90b055a 100644 --- a/src/components/DateInput/DateInput.module.scss +++ b/src/components/DateInput/DateInput.module.scss @@ -35,7 +35,7 @@ border-radius: 16px; border: none; - font-family: 'Lato'; + font-family: 'Lato-Regular'; font-style: normal; font-weight: 400; font-size: 16px; @@ -71,7 +71,7 @@ margin-right: auto; height: 60px; background: none; - font-family: 'Lato'; + font-family: 'Lato-Regular'; font-style: normal; font-weight: 700; font-size: 16px; @@ -85,6 +85,12 @@ padding: 6px 18px; margin: 0; width: 57px; + + font-family: 'Lato-Regular'; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 19px; } :global .react-datepicker__month-container { diff --git a/src/components/StatisticsComponents/CategoryBoard/CategoryBoard.jsx b/src/components/StatisticsComponents/CategoryBoard/CategoryBoard.jsx index 5a86901..5d66dcb 100644 --- a/src/components/StatisticsComponents/CategoryBoard/CategoryBoard.jsx +++ b/src/components/StatisticsComponents/CategoryBoard/CategoryBoard.jsx @@ -4,7 +4,7 @@ import { Calendar } from '../../DateInput/DateInput'; import { useEffect, useState } from 'react'; import { useDispatch } from 'react-redux'; import { getCashflowStat } from '../../../redux/operations/cashflowOperations'; -import shortid from 'shortid'; +// import shortid from 'shortid'; // import {Notify} from "notiflix" export const Item = ({ id, amount, category, percentage }) => { @@ -31,11 +31,11 @@ export const CategoriesList = () => { setTransactionData(data.payload); }); }, [dateFilter, dispatch]); -console.log('cat', transactionData) +// console.log('cat', transactionData) if (transactionData?.length === 0) return; return ( -
    + //
    @@ -48,6 +48,6 @@ console.log('cat', transactionData)
    -
    + //
    ); }; diff --git a/src/components/StatisticsComponents/CategoryBoard/CategoryBoard.module.scss b/src/components/StatisticsComponents/CategoryBoard/CategoryBoard.module.scss index c686128..8b73d6f 100644 --- a/src/components/StatisticsComponents/CategoryBoard/CategoryBoard.module.scss +++ b/src/components/StatisticsComponents/CategoryBoard/CategoryBoard.module.scss @@ -3,17 +3,32 @@ .container { @include container; -} -.background_img{ - @include tablet{ - background-image: url(../../../assets/img/bg-tablet.png); - background-size: contain - } - @include desktop{ - background-image: url(../../../assets/img/bg-desktop.png); - background-size: contain + + @include tablet { + background-image: url('../../../assets/img/bg-tablet.png'); + background-repeat: no-repeat; + background-size: 100%; + background-position: bottom; + height: calc(100vh - 72px); } -} + + @include desktop { + background-image: url('../../../assets/img/bg-desktop.png'); + background-repeat: no-repeat; + background-size: 100%; + background-position: bottom; + } +} +// .background_img{ +// @include tablet{ +// background-image: url(../../../assets/img/bg-tablet.png); +// background-size: contain +// } +// @include desktop{ +// background-image: url(../../../assets/img/bg-desktop.png); +// background-size: contain +// } +// } .wrapper{ position: relative; position: relative; @@ -197,9 +212,9 @@ overflow-y: scroll; } } -.expense_block::-webkit-scrollbar { - width: 2px; /* ширина всей полосы прокрутки */ -} +// .expense_block::-webkit-scrollbar { +// width: 2px; /* ширина всей полосы прокрутки */ +// } .error_mes{ padding-top: 30px; text-align: center; diff --git a/src/components/StatisticsComponents/ExpensesBoard/ExpensesBoard.jsx b/src/components/StatisticsComponents/ExpensesBoard/ExpensesBoard.jsx index 57ffc62..3628942 100644 --- a/src/components/StatisticsComponents/ExpensesBoard/ExpensesBoard.jsx +++ b/src/components/StatisticsComponents/ExpensesBoard/ExpensesBoard.jsx @@ -26,14 +26,14 @@ export const ExpensesList = () => { }); }, [dateFilter, dispatch, popupActive]); - console.log('on board', transactionData); + // console.log('on board', transactionData); if (transactionData?.length === 0) return; - console.log('board'); + // console.log('board'); return ( -
    + //
    @@ -63,6 +63,6 @@ export const ExpensesList = () => { )}
    -
    + //
    ); }; diff --git a/src/components/StatisticsComponents/ExpensesBoard/ExpensesBoard.module.scss b/src/components/StatisticsComponents/ExpensesBoard/ExpensesBoard.module.scss index 8eb59dc..433d136 100644 --- a/src/components/StatisticsComponents/ExpensesBoard/ExpensesBoard.module.scss +++ b/src/components/StatisticsComponents/ExpensesBoard/ExpensesBoard.module.scss @@ -1,17 +1,32 @@ @import 'src/assets/styles/utils/mixins'; @import 'src/assets/styles/utils/vars'; -.background_img{ - @include tablet{ - background-image: url(../../../assets/img/bg-tablet.png); - background-size: contain - } - @include desktop{ - background-image: url(../../../assets/img/bg-desktop.png); - background-size: contain - } -} +// .background_img{ +// @include tablet{ +// background-image: url(../../../assets/img/bg-tablet.png); +// background-size: contain +// } +// @include desktop{ +// background-image: url(../../../assets/img/bg-desktop.png); +// background-size: contain +// } +// } .container { @include container; + + @include tablet { + background-image: url('../../../assets/img/bg-tablet.png'); + background-repeat: no-repeat; + background-size: 100%; + background-position: bottom; + height: calc(100vh - 72px); + } + + @include desktop { + background-image: url('../../../assets/img/bg-desktop.png'); + background-repeat: no-repeat; + background-size: 100%; + background-position: bottom; + } } .wrapper { position: relative; @@ -192,17 +207,17 @@ } .expense_block { @include desktop { - height: 420px; + max-height: 420px; overflow-y: scroll; } @include tablet { - height: 420px; + max-height: 420px; overflow-y: scroll; } } -.expense_block::-webkit-scrollbar { - width: 2px; /* ширина всей полосы прокрутки */ -} +// .expense_block::-webkit-scrollbar { +// width: 2px; /* ширина всей полосы прокрутки */ +// } .error_mes{ padding-top: 30px; text-align: center; diff --git a/src/index.js b/src/index.js index b901a03..3b0ba34 100644 --- a/src/index.js +++ b/src/index.js @@ -19,7 +19,7 @@ import './index.scss'; ReactDOM.createRoot(document.getElementById('root')).render( - +