├── .browserslistrc
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── views
    │   ├── About.vue
    │   ├── Page404.vue
    │   └── Dashboard.vue
    ├── main.js
    ├── components
    │   ├── Button.vue
    │   ├── SelectCategories.vue
    │   ├── PaymentsDisplay.vue
    │   ├── Pagination.vue
    │   └── AddPayment.vue
    ├── App.vue
    ├── router
    │   └── index.js
    └── store
    │   └── index.js
├── babel.config.js
├── .gitignore
├── README.md
├── .eslintrc.js
└── package.json


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/5hadown1/vuejs/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/5hadown1/vuejs/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		ABOUT PAGE
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <script>
 8 | 	export default {
 9 | 		name : "About"
10 | 	}
11 | </script>
12 | 
13 | <style lang="scss" scoped>
14 | 
15 | </style>


--------------------------------------------------------------------------------
/src/views/Page404.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		404 page
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <script>
 8 | 	export default {
 9 | 		name: "Page404"
10 | 	}
11 | </script>
12 | 
13 | <style lang="scss" scoped>
14 | 
15 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | 
 4 | Vue.config.productionTip = false
 5 | 
 6 | import store from './store';
 7 | import router from './router';
 8 | 
 9 | new Vue({
10 |   render: h => h(App),
11 |   store,
12 |   router
13 | }).$mount('#app')
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/src/components/Button.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<button @click="onClick">ADD NEW COST+</button>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <script>
 8 | 	export default {
 9 | 		name: "Button",
10 | 		data() {
11 | 			return {
12 | 			}
13 | 		},
14 | 		methods: {
15 | 			onClick() {
16 | 				this.$emit('clicked');
17 | 			}
18 | 		}
19 | 	}
20 | </script>
21 | 
22 | <style lang="scss" scoped>
23 | 
24 | </style>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vuejs
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     'eslint:recommended'
 9 |   ],
10 |   parserOptions: {
11 |     parser: 'babel-eslint'
12 |   },
13 |   rules: {
14 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
15 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/components/SelectCategories.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<select v-model="selected">
 4 | 			<option v-for="(option, idx) in categories" :value="option" :key="idx">
 5 | 				{{ option }}
 6 | 			</option>
 7 | 		</select>
 8 | 	</div>
 9 | </template>
10 | 
11 | <script>
12 | 	export default {
13 | 		name: 'SelectCategories',
14 | 		props: {
15 | 			categories: {
16 | 				type: Array,
17 | 				default: () => []
18 | 			},
19 | 		},
20 | 		data() {
21 | 			return {
22 | 				selected: ''
23 | 			}
24 | 		}
25 | 	}
26 | </script>
27 | 
28 | <style lang="scss" scoped>
29 | 
30 | </style>


--------------------------------------------------------------------------------
/src/components/PaymentsDisplay.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="payments-list">
 3 | 		<div v-for="(item, idx) in list" :key="idx">
 4 | 			{{ item.id }}-{{ item }}
 5 | 		</div>
 6 | 		<div>
 7 | 			Total: {{ getFPV }}
 8 | 		</div>
 9 | 	</div>
10 | </template>
11 | 
12 | <script>
13 | 	export default {
14 | 		name: "PaymentsDisplay",
15 | 		props: {
16 | 			list: {
17 | 				type: Array,
18 | 				default: () => []
19 | 			}
20 | 		},
21 | 		data() {
22 | 			return {}
23 | 		},
24 | 		computed: {
25 | 			getFPV () {
26 | 				return this.$store.getters.getFullPaymentValue;
27 | 			}
28 | 		}
29 | 	}
30 | </script>


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div id="app" :class="[$style.wrapper]">
 3 | 		<header>
 4 | 			<h1>My personal cost</h1>
 5 | 			<router-link to="/dashboard">Dashboard</router-link> / 
 6 | 			<router-link to="/about">About</router-link>
 7 | 		</header>
 8 | 		<main>
 9 | 			<router-view />
10 | 		</main>
11 | 	</div>
12 | </template>
13 | 
14 | <script>
15 | 	export default {
16 | 		name: "App"
17 | 	};
18 | </script>
19 | 
20 | <style lang="scss" module>
21 | 	#app {
22 | 		font-family: Avenir, Helvetica, Arial, sans-serif;
23 | 		-webkit-font-smoothing: antialiased;
24 | 		-moz-osx-font-smoothing: grayscale;
25 | 		text-align: center;
26 | 		color: #2c3e50;
27 | 		margin-top: 60px;
28 | 	}
29 | </style>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vuejs",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "vue": "^2.6.11",
13 |     "vue-router": "^3.5.2",
14 |     "vuex": "^3.6.2"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "~4.5.0",
18 |     "@vue/cli-plugin-eslint": "~4.5.0",
19 |     "@vue/cli-service": "~4.5.0",
20 |     "babel-eslint": "^10.1.0",
21 |     "eslint": "^6.7.2",
22 |     "eslint-plugin-vue": "^6.2.2",
23 |     "sass": "^1.26.5",
24 |     "sass-loader": "^8.0.2",
25 |     "vue-template-compiler": "^2.6.11"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Router from 'vue-router';
 3 | 
 4 | import Dashboard from '../views/Dashboard.vue';
 5 | import About from '../views/About.vue';
 6 | import Page404 from '../views/Page404.vue';
 7 | import AddPayment from '../components/AddPayment.vue';
 8 | 
 9 | Vue.use(Router);
10 | 
11 | export default new Router({
12 | 	mode: 'history',
13 | 	routes: [
14 | 		{
15 | 			path: '/dashboard',
16 | 			name: 'Dashboard',
17 | 			component: Dashboard
18 | 		}, {
19 | 			path: '/about*',
20 | 			name: 'About',
21 | 			component: About
22 | 		}, {
23 | 			path: '/add/payment/:category',
24 | 			name: 'AddPaymentRouting',
25 | 			component: AddPayment
26 | 		}, {
27 | 			path: '/404',
28 | 			name: 'NotFound',
29 | 			component: Page404
30 | 		}
31 | 	]
32 | })
33 | 


--------------------------------------------------------------------------------
/src/components/Pagination.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div :class="[$style.wrp]">
 3 | 		<div @click="onClick(cur - 1)">-</div>
 4 | 		<div v-for="i in amount"
 5 | 			:key="i"
 6 | 			:class="{[$style.active]: cur === i}"
 7 | 			@click="onClick(i)">{{ i }}</div>
 8 | 		<div @click="onClick(cur + 1)">+</div>
 9 | 	</div>
10 | </template>
11 | 
12 | <script>
13 | 	export default {
14 | 		props: {
15 | 			length: Number,
16 | 			n: Number,
17 | 			cur: Number
18 | 		},
19 | 		computed: {
20 | 			amount() {
21 | 				return Math.ceil(this.length / this.n)
22 | 			}
23 | 		},
24 | 		methods: {
25 | 			onClick(p) {
26 | 				if (p < 1 || p > this.amount || p === this.cur) {
27 | 					return
28 | 				}
29 | 				this.$emit('paginate', p)
30 | 			}
31 | 		}
32 | 	}
33 | </script>
34 | 
35 | <style module lang="scss">
36 | 	.wrp {
37 | 		display: flex;
38 | 
39 | 		&>div {
40 | 			padding: 10px;
41 | 			cursor: pointer;
42 | 			&.active {
43 | 				background: #ccc;
44 | 			}
45 | 		}
46 | 	}
47 | </style>


--------------------------------------------------------------------------------
/src/components/AddPayment.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<input v-model="date" placeholder="date" />
 4 | 		<input v-model.trim="category" placeholder="category" />
 5 | 		<input v-model.number="value" type="number" placeholder="value" />
 6 | 		<button @click="onClick">Add Data</button>
 7 | 	</div>
 8 | </template>
 9 | 
10 | <script>
11 | 	export default {
12 | 		name: "AddPayment",
13 | 		data() {
14 | 			return {
15 | 				date: "",
16 | 				category: '',
17 | 				value: null
18 | 			}
19 | 		},
20 | 		methods: {
21 | 			goToPageDashboard(){
22 | 				this.$router.push({
23 | 					name: 'Dashboard'
24 | 				})
25 | 			},
26 | 			onClick() {
27 | 				const { category, value } = this
28 | 				const data = {
29 | 					id: new Date().getTime(),
30 | 					date: this.date || this.getCurrentDate,
31 | 					category,
32 | 					value
33 | 				}
34 | 
35 | 				if(this.getValueQueryFromRoute && this.getCategoryParamsFromRoute) {
36 | 					this.$store.commit('addDataToPaymentsList', data);
37 | 					this.goToPageDashboard();
38 | 					return
39 | 				}
40 | 
41 | 				this.$emit('addNewPayment', data)
42 | 			}
43 | 		},
44 | 		computed: {
45 | 			getCurrentDate() {
46 | 				const today = new Date()
47 | 				const d = today.getDate()
48 | 				const m = today.getMonth() + 1
49 | 				const y = today.getFullYear()
50 | 				return `${d}.${m}.${y}`
51 | 			},
52 | 			getValueQueryFromRoute() {
53 | 				return Number(this.$route.query?.value) ?? null;
54 | 			},
55 | 			getCategoryParamsFromRoute() {
56 | 				return this.$route.params?.category ?? null;
57 | 			}
58 | 		},
59 | 		created(){
60 | 			if((!this.getValueQueryFromRoute || !this.getCategoryParamsFromRoute) && this.$route.name !== 'Dashboard'){
61 | 				this.goToPageDashboard()
62 | 			}
63 | 			this.category = this.getCategoryParamsFromRoute;
64 | 			this.value = this.getValueQueryFromRoute;
65 | 		}
66 | 	}
67 | </script>


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Vuex from 'vuex';
 3 | 
 4 | Vue.use(Vuex);
 5 | 
 6 | export default new Vuex.Store({
 7 |     state: {
 8 | 		paymentsList: [],
 9 | 		categoryList: [],
10 | 	},
11 |     mutations: {
12 | 		setPaymentsListData (state, payload) {
13 | 			state.paymentsList = [...state.paymentsList, ...payload];
14 | 		},
15 | 		addDataToPaymentsList (state, payload) {
16 | 			state.paymentsList.push(payload);
17 | 		},
18 | 		setCategories (state, payload) {
19 | 			if (!Array.isArray(payload)) {
20 | 				payload = [payload]
21 | 			}
22 | 			state.categoryList.push(...payload)
23 | 		},
24 | 	},
25 |     getters: {
26 | 		getPaymentsList: state => state.paymentsList,
27 | 		getFullPaymentValue: state => {
28 | 			return state.paymentsList
29 | 				.reduce((res, cur) => + res + cur.value, 0)
30 | 		},
31 | 		getCategoryList: state => state.categoryList,
32 | 	},
33 |     actions: {
34 | 		fetchData({ commit }) {
35 | 			return new Promise((resolve) => {
36 | 					// имитируем работу с сетью, ставим задержку получения данных в 2 секунды
37 | 					setTimeout(()=>{
38 | 						const items = []
39 | 						for(let i= 1; i< 50; i++){
40 | 							items.push({
41 | 								id: i,
42 | 								date: "23.12.2020",
43 | 								category: "Sport",
44 | 								value: i
45 | 							})
46 | 						}
47 | 						resolve(items)
48 | 					},1000)
49 | 				})
50 | 				.then(res => {
51 | 					// запускаем изменение состояния через commit
52 | 					commit('setPaymentsListData', res)
53 | 				})
54 | 		},
55 | 		fetchCategories ({ commit }) {
56 | 			return new Promise((resolve) => {
57 | 					// имитируем работу с сетью
58 | 					setTimeout(() => {
59 | 						resolve(['Food', 'Transport', 'Education', 'Entertainment'])
60 | 					}, 1000)
61 | 				})
62 | 				.then(resolve => {
63 | 					// запускаем изменение состояния через commit
64 | 					commit('setCategories', resolve)
65 | 				})
66 | 		},
67 | 	},
68 | });


--------------------------------------------------------------------------------
/src/views/Dashboard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<Button @clicked="clicked" />
 4 | 		<AddPayment @addNewPayment="addData" v-if="visible" />
 5 | 		<SelectCategories :categories="categories" />
 6 | 		<br />
 7 | 		<PaymentsDisplay :list="currentElements" />
 8 | 		<Pagination :cur="curPage"
 9 | 					:n="n"
10 | 					:length="paymentsList.length"
11 | 					@paginate="onChangePage"/>
12 | 	</div>
13 | </template>
14 | 
15 | 
16 | <script>
17 | 	import PaymentsDisplay from "@/components/PaymentsDisplay.vue";
18 | 	import AddPayment from "@/components/AddPayment.vue";
19 | 	import Button from "@/components/Button.vue";
20 | 	import SelectCategories from "@/components/SelectCategories.vue";
21 | 	import Pagination from '@/components/Pagination.vue';
22 | 	import { mapGetters, mapMutations, mapActions } from 'vuex';
23 | 
24 | 	export default {
25 | 		name: "Dashboard",
26 | 		components: {
27 | 			PaymentsDisplay,
28 | 			AddPayment,
29 | 			Button,
30 | 			SelectCategories,
31 | 			Pagination
32 | 		},
33 | 		data: () => ({
34 | 			visible: false,
35 | 			page: '',
36 | 			curPage: 1,
37 | 			n: 20,
38 | 		}),
39 | 		methods: {
40 | 			...mapMutations([
41 | 				'setPaymentsListData',
42 | 				'addDataToPaymentsList'
43 | 			]),
44 | 			...mapActions([
45 | 				'fetchData',
46 | 				'fetchCategories'
47 | 			]),
48 | 			addData(data) {
49 | 				this.addDataToPaymentsList(data);
50 | 			},
51 | 			clicked() {
52 | 				this.visible = !this.visible;
53 | 			},
54 | 			onChangePage(p) {
55 | 				this.curPage = p;
56 | 			},
57 | 			setPage () {
58 | 				this.page = location.pathname.slice(1);
59 | 			}
60 | 		},
61 | 		computed: {
62 | 			...mapGetters({
63 | 				paymentsList : 'getPaymentsList',
64 | 				categories: 'getCategoryList'
65 | 			}),
66 | 			currentElements(){
67 | 				const { n, curPage } = this;
68 | 				return this.paymentsList.slice(n * (curPage - 1), n * (curPage - 1) + n);
69 | 			},
70 | 		},
71 | 		created() {
72 | 			this.fetchData();
73 | 			if (!this.categories.length) {
74 | 				this.fetchCategories();
75 | 			}
76 | 		},
77 | 		mounted() {
78 | 			const page = this.$route.params.page || 1;
79 | 			this.curPage = Number(page);
80 | 			this.setPage();
81 | 			const links = document.querySelectorAll('a')
82 | 			links.forEach(link => {
83 | 				link.addEventListener('click', event => {
84 | 					event.preventDefault();
85 | 					history.pushState({}, '', link.href);
86 | 					this.setPage();
87 | 				})
88 | 			})
89 | 			window.addEventListener('popstate', this.setPage)
90 | 		}
91 | 	}
92 | </script>
93 | 
94 | <style lang="scss" scoped>
95 | 
96 | </style>


--------------------------------------------------------------------------------