init
This commit is contained in:
Vladimir Voronin
30
.gitignore
vendored
30
.gitignore
vendored
@@ -0,0 +1,30 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
coverage
|
||||||
|
*.local
|
||||||
|
|
||||||
|
/cypress/videos/
|
||||||
|
/cypress/screenshots/
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
*.tsbuildinfo
|
||||||
|
|||||||
13
index.html
Normal file
13
index.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="icon" href="/favicon.ico">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Vite App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
8
jsconfig.json
Normal file
8
jsconfig.json
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"exclude": ["node_modules", "dist"]
|
||||||
|
}
|
||||||
16311
package-lock.json
generated
Normal file
16311
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
34
package.json
Normal file
34
package.json
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
{
|
||||||
|
"name": "no-budger-app",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"build": "vite build",
|
||||||
|
"dev": "vite",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@primevue/themes": "^4.1.0",
|
||||||
|
"@vue/cli-service": "^5.0.8",
|
||||||
|
"axios": "^1.7.7",
|
||||||
|
"chart.js": "^4.4.4",
|
||||||
|
"date-fns": "^4.1.0",
|
||||||
|
"date-fns-tz": "^3.2.0",
|
||||||
|
"primeicons": "^7.0.0",
|
||||||
|
"primevue": "^4.1.0",
|
||||||
|
"tailwindcss-primeui": "^0.3.4",
|
||||||
|
"vue": "^3.5.11",
|
||||||
|
"vue-class-component": "^8.0.0-0",
|
||||||
|
"vue-router": "^4.4.5"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^5.1.4",
|
||||||
|
"@vue/cli-plugin-typescript": "~5.0.0",
|
||||||
|
"autoprefixer": "^10.4.20",
|
||||||
|
"postcss": "^8.4.47",
|
||||||
|
"tailwindcss": "^3.4.13",
|
||||||
|
"typescript": "~4.5.5",
|
||||||
|
"vite": "^5.4.8"
|
||||||
|
},
|
||||||
|
"type": "module"
|
||||||
|
}
|
||||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
36
src/App.vue
Normal file
36
src/App.vue
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
<template>
|
||||||
|
<div id="app" class="flex flex-col h-screen bg-gray-100">
|
||||||
|
<!-- MenuBar всегда фиксирован сверху -->
|
||||||
|
<MenuBar class="w-full fixed top-0 z-10"/>
|
||||||
|
|
||||||
|
<!-- Контентная часть заполняет оставшееся пространство -->
|
||||||
|
<div class="flex-grow mt-16 ">
|
||||||
|
|
||||||
|
<router-view class="w-full h-full "/>
|
||||||
|
</div>
|
||||||
|
<OverlayView/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import MenuBar from "./components/MenuBar.vue";
|
||||||
|
import OverlayView from "@/components/OverlayView.vue";
|
||||||
|
|
||||||
|
|
||||||
|
// @Options({
|
||||||
|
// components: {
|
||||||
|
// TransactionEditDrawer, SpeedDial,
|
||||||
|
// MenuBar,
|
||||||
|
// },
|
||||||
|
// })
|
||||||
|
// export default class App extends Vue {}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* Пример настройки высоты для поддержки flexbox */
|
||||||
|
#app {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
86
src/assets/base.css
Normal file
86
src/assets/base.css
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
/* color palette from <https://github.com/vuejs/theme> */
|
||||||
|
:root {
|
||||||
|
--vt-c-white: #ffffff;
|
||||||
|
--vt-c-white-soft: #f8f8f8;
|
||||||
|
--vt-c-white-mute: #f2f2f2;
|
||||||
|
|
||||||
|
--vt-c-black: #181818;
|
||||||
|
--vt-c-black-soft: #222222;
|
||||||
|
--vt-c-black-mute: #282828;
|
||||||
|
|
||||||
|
--vt-c-indigo: #2c3e50;
|
||||||
|
|
||||||
|
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||||
|
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||||
|
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||||
|
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||||
|
|
||||||
|
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||||
|
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||||
|
--vt-c-text-dark-1: var(--vt-c-white);
|
||||||
|
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* semantic color variables for this project */
|
||||||
|
:root {
|
||||||
|
--color-background: var(--vt-c-white);
|
||||||
|
--color-background-soft: var(--vt-c-white-soft);
|
||||||
|
--color-background-mute: var(--vt-c-white-mute);
|
||||||
|
|
||||||
|
--color-border: var(--vt-c-divider-light-2);
|
||||||
|
--color-border-hover: var(--vt-c-divider-light-1);
|
||||||
|
|
||||||
|
--color-heading: var(--vt-c-text-light-1);
|
||||||
|
--color-text: var(--vt-c-text-light-1);
|
||||||
|
|
||||||
|
--section-gap: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--color-background: var(--vt-c-black);
|
||||||
|
--color-background-soft: var(--vt-c-black-soft);
|
||||||
|
--color-background-mute: var(--vt-c-black-mute);
|
||||||
|
|
||||||
|
--color-border: var(--vt-c-divider-dark-2);
|
||||||
|
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||||
|
|
||||||
|
--color-heading: var(--vt-c-text-dark-1);
|
||||||
|
--color-text: var(--vt-c-text-dark-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
min-height: 100vh;
|
||||||
|
color: var(--color-text);
|
||||||
|
background: var(--color-background);
|
||||||
|
transition:
|
||||||
|
color 0.5s,
|
||||||
|
background-color 0.5s;
|
||||||
|
line-height: 1.6;
|
||||||
|
font-family:
|
||||||
|
Inter,
|
||||||
|
-apple-system,
|
||||||
|
BlinkMacSystemFont,
|
||||||
|
'Segoe UI',
|
||||||
|
Roboto,
|
||||||
|
Oxygen,
|
||||||
|
Ubuntu,
|
||||||
|
Cantarell,
|
||||||
|
'Fira Sans',
|
||||||
|
'Droid Sans',
|
||||||
|
'Helvetica Neue',
|
||||||
|
sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
1
src/assets/logo.svg
Normal file
1
src/assets/logo.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||||
|
After Width: | Height: | Size: 276 B |
39
src/assets/main.css
Normal file
39
src/assets/main.css
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
@import './base.css';
|
||||||
|
/* ./src/index.css */
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
/*#app {*/
|
||||||
|
/* !*max-width: 1280px;*!*/
|
||||||
|
/* !*margin: 0 auto;*!*/
|
||||||
|
/* !*padding: 2rem;*!*/
|
||||||
|
/* !*font-weight: normal;*!*/
|
||||||
|
/*}*/
|
||||||
|
|
||||||
|
/*a,*/
|
||||||
|
/*.green {*/
|
||||||
|
/* text-decoration: none;*/
|
||||||
|
/* color: hsla(160, 100%, 37%, 1);*/
|
||||||
|
/* transition: 0.4s;*/
|
||||||
|
/* padding: 3px;*/
|
||||||
|
/*}*/
|
||||||
|
|
||||||
|
/*@media (hover: hover) {*/
|
||||||
|
/* a:hover {*/
|
||||||
|
/* background-color: hsla(160, 100%, 37%, 0.2);*/
|
||||||
|
/* }*/
|
||||||
|
/*}*/
|
||||||
|
|
||||||
|
/*@media (min-width: 1024px) {*/
|
||||||
|
/* body {*/
|
||||||
|
/* display: flex;*/
|
||||||
|
/* place-items: center;*/
|
||||||
|
/* }*/
|
||||||
|
|
||||||
|
/* #app {*/
|
||||||
|
/* display: grid;*/
|
||||||
|
/* !*grid-template-columns: 1fr 1fr;*!*/
|
||||||
|
/* padding: 0 2rem;*/
|
||||||
|
/* }*/
|
||||||
|
/*}*/
|
||||||
61
src/components/HelloWorld.vue
Normal file
61
src/components/HelloWorld.vue
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
<template>
|
||||||
|
<div class="hello">
|
||||||
|
<h1>{{ msg }}</h1>
|
||||||
|
<p>
|
||||||
|
For a guide and recipes on how to configure / customize this project,<br>
|
||||||
|
check out the
|
||||||
|
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||||
|
</p>
|
||||||
|
<h3>Installed CLI Plugins</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
|
||||||
|
</ul>
|
||||||
|
<h3>Essential Links</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||||
|
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||||
|
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||||
|
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||||
|
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||||
|
</ul>
|
||||||
|
<h3>Ecosystem</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||||
|
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||||
|
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||||
|
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||||
|
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { Options, Vue } from 'vue-class-component';
|
||||||
|
|
||||||
|
@Options({
|
||||||
|
props: {
|
||||||
|
msg: String
|
||||||
|
}
|
||||||
|
})
|
||||||
|
export default class HelloWorld extends Vue {
|
||||||
|
msg!: string
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
<style scoped>
|
||||||
|
h3 {
|
||||||
|
margin: 40px 0 0;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: #42b983;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
106
src/components/MenuBar.vue
Normal file
106
src/components/MenuBar.vue
Normal file
@@ -0,0 +1,106 @@
|
|||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<Menubar :model="items">
|
||||||
|
<template #start>
|
||||||
|
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
|
||||||
|
<path
|
||||||
|
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
|
||||||
|
fill="var(--p-primary-color)"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
|
||||||
|
fill="var(--p-text-color)"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
<template #item="{ item, props, hasSubmenu, root }">
|
||||||
|
<router-link :to="item.url" v-ripple class="flex items-center" v-bind="props.action">
|
||||||
|
<span :class="item.icon" />
|
||||||
|
<span class="ml-2">{{ item.label }}</span>
|
||||||
|
<Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
|
||||||
|
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
|
||||||
|
<i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
|
||||||
|
</router-link>
|
||||||
|
</template>
|
||||||
|
<template #end>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<!-- <InputText placeholder="Search" type="text" class="w-32 sm:w-auto" />-->
|
||||||
|
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Menubar>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
import Badge from "primevue/badge";
|
||||||
|
import Avatar from "primevue/avatar";
|
||||||
|
import Menubar from "primevue/menubar";
|
||||||
|
|
||||||
|
const items = ref([
|
||||||
|
{
|
||||||
|
label: 'Home',
|
||||||
|
icon: 'pi pi-home',
|
||||||
|
url: '/'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Analytics',
|
||||||
|
icon: 'pi pi-star',
|
||||||
|
url: '/analytics'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Budgets',
|
||||||
|
icon: 'pi pi-search',
|
||||||
|
url: '/budgets'
|
||||||
|
// items: [
|
||||||
|
// {
|
||||||
|
// label: 'Core',
|
||||||
|
// icon: 'pi pi-bolt',
|
||||||
|
// shortcut: '⌘+S'
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// label: 'Blocks',
|
||||||
|
// icon: 'pi pi-server',
|
||||||
|
// shortcut: '⌘+B'
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// label: 'UI Kit',
|
||||||
|
// icon: 'pi pi-pencil',
|
||||||
|
// shortcut: '⌘+U'
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// separator: true
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// label: 'Templates',
|
||||||
|
// icon: 'pi pi-palette',
|
||||||
|
// items: [
|
||||||
|
// {
|
||||||
|
// label: 'Apollo',
|
||||||
|
// icon: 'pi pi-palette',
|
||||||
|
// badge: 2
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// label: 'Ultima',
|
||||||
|
// icon: 'pi pi-palette',
|
||||||
|
// badge: 3
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Transactions',
|
||||||
|
icon: "pi pi-star",
|
||||||
|
url: '/transactions'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Settings',
|
||||||
|
icon: 'pi pi-envelope',
|
||||||
|
url: '/settings',
|
||||||
|
// badge: 3
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
105
src/components/OverlayView.vue
Normal file
105
src/components/OverlayView.vue
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
import SpeedDial from "primevue/speeddial";
|
||||||
|
import TransactionEditDrawer from "@/components/budgets/TransactionEditDrawer.vue";
|
||||||
|
import { onMounted, ref} from "vue";
|
||||||
|
import {TransactionType} from "@/models/Transaction";
|
||||||
|
import {CategoryType} from "@/models/Category";
|
||||||
|
import {useRoute} from "vue-router";
|
||||||
|
|
||||||
|
const loading = ref(false);
|
||||||
|
const drawerOpened = ref(false);
|
||||||
|
const transactionType = ref<TransactionType>()
|
||||||
|
const categoryType = ref<CategoryType>()
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
|
||||||
|
const openDrawer = (selectedTransactionType = null, selectedCategoryType = null) => {
|
||||||
|
if (selectedTransactionType && selectedCategoryType) {
|
||||||
|
transactionType.value = selectedTransactionType;
|
||||||
|
categoryType.value = selectedCategoryType;
|
||||||
|
} else if (selectedTransactionType) {
|
||||||
|
transactionType.value = selectedTransactionType;
|
||||||
|
categoryType.value = 'EXPENSE'
|
||||||
|
}
|
||||||
|
console.log('we tut testsete')
|
||||||
|
drawerOpened.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const closeDrawer = () => {
|
||||||
|
drawerOpened.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const items = ref([
|
||||||
|
{
|
||||||
|
label: 'Create instant transaction',
|
||||||
|
icon: 'pi pi-pencil',
|
||||||
|
command: () => {
|
||||||
|
openDrawer('INSTANT')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Create planned income',
|
||||||
|
icon: 'pi pi-refresh',
|
||||||
|
command: () => {
|
||||||
|
openDrawer('PLANNED', 'INCOME')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Create planned expense',
|
||||||
|
icon: 'pi pi-trash',
|
||||||
|
command: () => {
|
||||||
|
openDrawer('PLANNED', 'EXPENSE')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
console.log(route.params['mode']);
|
||||||
|
if (route.params['mode']) {
|
||||||
|
console.log(route.params['mode']);
|
||||||
|
|
||||||
|
openDrawer('INSTANT')
|
||||||
|
|
||||||
|
}
|
||||||
|
}, 10)
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
|
||||||
|
{{ drawerOpened }}
|
||||||
|
<div v-if="loading">Loding...</div>
|
||||||
|
<div v-else>
|
||||||
|
<TransactionEditDrawer v-if="drawerOpened" :visible="drawerOpened"
|
||||||
|
|
||||||
|
|
||||||
|
:transaction-type="transactionType"
|
||||||
|
:category-type="categoryType"
|
||||||
|
|
||||||
|
@close-drawer="closeDrawer()"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<SpeedDial :model="items" :radius="120" type="quarter" direction="up"
|
||||||
|
class=" mb-10 h-fit" :style="{ position: 'fixed', right: 0, bottom: 0 }"
|
||||||
|
pt:menuitem="m-2">
|
||||||
|
<template #item="{ item, toggleCallback }">
|
||||||
|
<div
|
||||||
|
class="flex flex-row items-center justify-between p-2 border w-56 bg-white rounded border-surface-200 dark:border-surface-700 cursor-pointer"
|
||||||
|
@click="toggleCallback"> <!-- Установлена минимальная ширина -->
|
||||||
|
|
||||||
|
<span>{{ item.label }}</span>
|
||||||
|
<span :class="item.icon"></span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</SpeedDial>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
88
src/components/TheWelcome.vue
Normal file
88
src/components/TheWelcome.vue
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
<script setup>
|
||||||
|
import WelcomeItem from './WelcomeItem.vue'
|
||||||
|
import DocumentationIcon from './icons/IconDocumentation.vue'
|
||||||
|
import ToolingIcon from './icons/IconTooling.vue'
|
||||||
|
import EcosystemIcon from './icons/IconEcosystem.vue'
|
||||||
|
import CommunityIcon from './icons/IconCommunity.vue'
|
||||||
|
import SupportIcon from './icons/IconSupport.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<WelcomeItem>
|
||||||
|
<template #icon>
|
||||||
|
<DocumentationIcon />
|
||||||
|
</template>
|
||||||
|
<template #heading>Documentation</template>
|
||||||
|
|
||||||
|
Vue’s
|
||||||
|
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
|
||||||
|
provides you with all information you need to get started.
|
||||||
|
</WelcomeItem>
|
||||||
|
|
||||||
|
<WelcomeItem>
|
||||||
|
<template #icon>
|
||||||
|
<ToolingIcon />
|
||||||
|
</template>
|
||||||
|
<template #heading>Tooling</template>
|
||||||
|
|
||||||
|
This project is served and bundled with
|
||||||
|
<a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
|
||||||
|
recommended IDE setup is
|
||||||
|
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
|
||||||
|
<a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
|
||||||
|
you need to test your components and web pages, check out
|
||||||
|
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
|
||||||
|
<a href="https://on.cypress.io/component" target="_blank" rel="noopener"
|
||||||
|
>Cypress Component Testing</a
|
||||||
|
>.
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
More instructions are available in <code>README.md</code>.
|
||||||
|
</WelcomeItem>
|
||||||
|
|
||||||
|
<WelcomeItem>
|
||||||
|
<template #icon>
|
||||||
|
<EcosystemIcon />
|
||||||
|
</template>
|
||||||
|
<template #heading>Ecosystem</template>
|
||||||
|
|
||||||
|
Get official tools and libraries for your project:
|
||||||
|
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
|
||||||
|
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
|
||||||
|
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
|
||||||
|
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
|
||||||
|
you need more resources, we suggest paying
|
||||||
|
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
|
||||||
|
a visit.
|
||||||
|
</WelcomeItem>
|
||||||
|
|
||||||
|
<WelcomeItem>
|
||||||
|
<template #icon>
|
||||||
|
<CommunityIcon />
|
||||||
|
</template>
|
||||||
|
<template #heading>Community</template>
|
||||||
|
|
||||||
|
Got stuck? Ask your question on
|
||||||
|
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
|
||||||
|
Discord server, or
|
||||||
|
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
|
||||||
|
>StackOverflow</a
|
||||||
|
>. You should also subscribe to
|
||||||
|
<a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
|
||||||
|
the official
|
||||||
|
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
|
||||||
|
twitter account for latest news in the Vue world.
|
||||||
|
</WelcomeItem>
|
||||||
|
|
||||||
|
<WelcomeItem>
|
||||||
|
<template #icon>
|
||||||
|
<SupportIcon />
|
||||||
|
</template>
|
||||||
|
<template #heading>Support Vue</template>
|
||||||
|
|
||||||
|
As an independent project, Vue relies on community backing for its sustainability. You can help
|
||||||
|
us by
|
||||||
|
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
|
||||||
|
</WelcomeItem>
|
||||||
|
</template>
|
||||||
87
src/components/WelcomeItem.vue
Normal file
87
src/components/WelcomeItem.vue
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
<template>
|
||||||
|
<div class="item">
|
||||||
|
<i>
|
||||||
|
<slot name="icon"></slot>
|
||||||
|
</i>
|
||||||
|
<div class="details">
|
||||||
|
<h3>
|
||||||
|
<slot name="heading"></slot>
|
||||||
|
</h3>
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.item {
|
||||||
|
margin-top: 2rem;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
place-content: center;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
color: var(--color-heading);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.item {
|
||||||
|
margin-top: 0;
|
||||||
|
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
top: calc(50% - 25px);
|
||||||
|
left: -26px;
|
||||||
|
position: absolute;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
background: var(--color-background);
|
||||||
|
border-radius: 8px;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:before {
|
||||||
|
content: ' ';
|
||||||
|
border-left: 1px solid var(--color-border);
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: calc(50% + 25px);
|
||||||
|
height: calc(50% - 25px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:after {
|
||||||
|
content: ' ';
|
||||||
|
border-left: 1px solid var(--color-border);
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: calc(50% + 25px);
|
||||||
|
height: calc(50% - 25px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:first-of-type:before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:last-of-type:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
141
src/components/budgets/BudgetList.vue
Normal file
141
src/components/budgets/BudgetList.vue
Normal file
@@ -0,0 +1,141 @@
|
|||||||
|
<template>
|
||||||
|
<div class="p-4">
|
||||||
|
<!-- Заголовок -->
|
||||||
|
<h2 class="text-4xl mb-6 mt-14 font-bold">Monthly Budgets</h2>
|
||||||
|
|
||||||
|
<!-- Плитка с бюджетами -->
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
<!-- Будущие и текущие бюджеты -->
|
||||||
|
<div v-for="budget in upcomingBudgets" :key="budget.id" class="p-4 shadow-lg rounded-lg bg-white">
|
||||||
|
<div class="flex flex-row justify-between">
|
||||||
|
<div class="text-xl font-bold mb-2">{{ budget.month }}</div>
|
||||||
|
<router-link to="/budgets/1">
|
||||||
|
<Button icon="pi pi-arrow-circle-right" rounded text size="large"/>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-600 mb-4">
|
||||||
|
{{ budget.startDate }} - {{ budget.endDate }}
|
||||||
|
</div>
|
||||||
|
<div class="mb-4">
|
||||||
|
<div class="text-sm">Total Income: <span class="font-bold">{{ budget.totalIncome }}</span></div>
|
||||||
|
<div class="text-sm">Total Expenses: <span class="font-bold">{{ budget.totalExpenses }}</span></div>
|
||||||
|
<div class="text-sm">Planned Expenses: <span class="font-bold">{{ budget.plannedExpenses }}</span></div>
|
||||||
|
<div class="text-sm flex items-center">
|
||||||
|
Unplanned Expenses:
|
||||||
|
<span class="ml-2 font-bold">{{ budget.remainingForUnplanned }}</span>
|
||||||
|
<!-- Прогресс бар -->
|
||||||
|
<ProgressBar :value="budget.unplannedProgress" class="ml-4 w-full"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Прошедшие бюджеты (забеленные) -->
|
||||||
|
<div v-for="budget in pastBudgets" :key="budget.id" class="p-4 shadow-lg rounded-lg bg-gray-100 opacity-60">
|
||||||
|
<div class="text-xl font-bold mb-2">{{ budget.month }}</div>
|
||||||
|
<div class="text-sm text-gray-600 mb-4">
|
||||||
|
{{ budget.startDate }} - {{ budget.endDate }}
|
||||||
|
</div>
|
||||||
|
<div class="mb-4">
|
||||||
|
<div class="text-sm">Total Income: <span class="font-bold">{{ budget.totalIncome }}</span></div>
|
||||||
|
<div class="text-sm">Total Expenses: <span class="font-bold">{{ budget.totalExpenses }}</span></div>
|
||||||
|
<div class="text-sm">Planned Expenses: <span class="font-bold">{{ budget.plannedExpenses }}</span></div>
|
||||||
|
<div class="text-sm flex items-center">
|
||||||
|
Unplanned Expenses:
|
||||||
|
<span class="ml-2 font-bold">{{ budget.remainingForUnplanned }}</span>
|
||||||
|
<!-- Прогресс бар -->
|
||||||
|
<ProgressBar :value="budget.unplannedProgress" class="ml-4 w-full"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import {ref} from 'vue';
|
||||||
|
import ProgressBar from 'primevue/progressbar';
|
||||||
|
import Button from "primevue/button";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
ProgressBar,
|
||||||
|
Button
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const upcomingBudgets = ref([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
month: 'October 2024',
|
||||||
|
startDate: '2024-10-01',
|
||||||
|
endDate: '2024-10-31',
|
||||||
|
totalIncome: '500,000 RUB',
|
||||||
|
totalExpenses: '350,000 RUB',
|
||||||
|
plannedExpenses: '300,000 RUB',
|
||||||
|
remainingForUnplanned: '50,000 RUB',
|
||||||
|
unplannedProgress: 60, // Прогресс в процентах
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
month: 'November 2024',
|
||||||
|
startDate: '2024-11-01',
|
||||||
|
endDate: '2024-11-30',
|
||||||
|
totalIncome: '550,000 RUB',
|
||||||
|
totalExpenses: '320,000 RUB',
|
||||||
|
plannedExpenses: '250,000 RUB',
|
||||||
|
remainingForUnplanned: '70,000 RUB',
|
||||||
|
unplannedProgress: 50,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const pastBudgets = ref([
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
month: 'September 2024',
|
||||||
|
startDate: '2024-09-01',
|
||||||
|
endDate: '2024-09-30',
|
||||||
|
totalIncome: '450,000 RUB',
|
||||||
|
totalExpenses: '400,000 RUB',
|
||||||
|
plannedExpenses: '350,000 RUB',
|
||||||
|
remainingForUnplanned: '50,000 RUB',
|
||||||
|
unplannedProgress: 90,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
month: 'August 2024',
|
||||||
|
startDate: '2024-08-01',
|
||||||
|
endDate: '2024-08-31',
|
||||||
|
totalIncome: '400,000 RUB',
|
||||||
|
totalExpenses: '370,000 RUB',
|
||||||
|
plannedExpenses: '320,000 RUB',
|
||||||
|
remainingForUnplanned: '50,000 RUB',
|
||||||
|
unplannedProgress: 85,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
upcomingBudgets,
|
||||||
|
pastBudgets,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* Стили для плиток и общего вида */
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(1, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 640px) {
|
||||||
|
.grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.grid {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
133
src/components/budgets/BudgetTransactionView.vue
Normal file
133
src/components/budgets/BudgetTransactionView.vue
Normal file
@@ -0,0 +1,133 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
import Button from "primevue/button";
|
||||||
|
import Checkbox from "primevue/checkbox";
|
||||||
|
import {computed, onMounted, PropType, ref} from "vue";
|
||||||
|
import {Transaction} from "@/models/Transaction";
|
||||||
|
import TransactionEditDrawer from "@/components/budgets/TransactionEditDrawer.vue";
|
||||||
|
import {Category, CategoryType} from "@/models/Category";
|
||||||
|
import {getCategories, getCategoryTypes} from "@/services/categoryService";
|
||||||
|
import {updateTransactionRequest} from "@/services/transactionService";
|
||||||
|
import {formatAmount, formatDate} from "@/utils/utils";
|
||||||
|
|
||||||
|
|
||||||
|
const props = defineProps(
|
||||||
|
{
|
||||||
|
transaction: {
|
||||||
|
type: Object as PropType<Transaction>,
|
||||||
|
required: true,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
const emits = defineEmits(['open-drawer'])
|
||||||
|
|
||||||
|
|
||||||
|
const setIsDoneTrue = async () => {
|
||||||
|
setTimeout(async () => {
|
||||||
|
await updateTransactionRequest(props.transaction)
|
||||||
|
}, 10);
|
||||||
|
// showedTransaction.value.isDone = !showedTransaction.value.isDone;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const drawerOpened = ref(false)
|
||||||
|
const toggleDrawer = () => {
|
||||||
|
if (drawerOpened.value) {
|
||||||
|
drawerOpened.value = false;
|
||||||
|
}
|
||||||
|
drawerOpened.value = !drawerOpened.value
|
||||||
|
emits('open-drawer', props.transaction)
|
||||||
|
}
|
||||||
|
|
||||||
|
const isPlanned = computed(() => {
|
||||||
|
return props.transaction?.transactionType.code === "PLANNED"
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
const entireCategories = ref<Category[]>([])
|
||||||
|
const expenseCategories = ref<Category[]>([])
|
||||||
|
const incomeCategories = ref<Category[]>([])
|
||||||
|
const fetchCategories = async () => {
|
||||||
|
try {
|
||||||
|
const response = await getCategories();
|
||||||
|
entireCategories.value = response.data
|
||||||
|
expenseCategories.value = response.data.filter((category: Category) => category.type.code === 'EXPENSE');
|
||||||
|
incomeCategories.value = response.data.filter((category: Category) => category.type.code === 'INCOME');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching categories:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const categoryTypes = ref<CategoryType[]>([]);
|
||||||
|
const selectedCategoryType = ref<CategoryType | null>(null);
|
||||||
|
const fetchCategoryTypes = async () => {
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await getCategoryTypes();
|
||||||
|
categoryTypes.value = response.data;
|
||||||
|
selectedCategoryType.value = categoryTypes.value.find((category: CategoryType) => category.code === 'EXPENSE');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching category types:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeDrawer = () => {
|
||||||
|
drawerOpened.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
// await fetchCategories();
|
||||||
|
// await fetchCategoryTypes()
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div :class="transaction.category.type.code == 'INCOME' ? 'from-green-100 to-green-50' : ' from-red-100 to-red-50' &&
|
||||||
|
transaction.transactionType.code == 'INSTANT' ? ' bg-gradient-to-r shadow-lg border-2 gap-5 p-2 rounded-xl ' : 'border-b pb-2'
|
||||||
|
"
|
||||||
|
class="flex bg-white min-w-fit max-h-fit flex-row items-center gap-4 w-full ">
|
||||||
|
<div>
|
||||||
|
<p v-if="transaction.transactionType.code=='INSTANT'"
|
||||||
|
class="text-6xl font-bold text-gray-700 dark:text-gray-400">
|
||||||
|
{{ transaction.category.icon }}</p>
|
||||||
|
<Checkbox v-model="transaction.isDone" v-else-if="transaction.transactionType.code=='PLANNED'"
|
||||||
|
:binary="true"
|
||||||
|
@click="setIsDoneTrue"/>
|
||||||
|
</div>
|
||||||
|
<button class="flex flex-row items-center p-x-4 justify-between w-full " @click="toggleDrawer">
|
||||||
|
|
||||||
|
<div class="flex flex-col items-start justify-items-start">
|
||||||
|
<p :class="transaction.isDone && isPlanned ? 'line-through' : ''" class="font-bold">{{
|
||||||
|
transaction.comment
|
||||||
|
}}</p>
|
||||||
|
<p :class="transaction.isDone && isPlanned ? 'line-through' : ''" class="font-light">{{
|
||||||
|
transaction.category.name
|
||||||
|
}} |
|
||||||
|
{{ formatDate(transaction.date) }}</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
:class="transaction.category.type.code == 'EXPENSE' ? 'text-red-700' : 'text-green-700' && transaction.isDone && isPlanned ? 'line-through' : ''"
|
||||||
|
class="text-2xl font-bold line-clamp-1 ">
|
||||||
|
|
||||||
|
{{ formatAmount(transaction.amount) }} ₽
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</button>
|
||||||
|
<TransactionEditDrawer v-if="drawerOpened" :visible="drawerOpened" :expenseCategories="expenseCategories"
|
||||||
|
:incomeCategories="incomeCategories" :transaction="transaction"
|
||||||
|
:category-types="categoryTypes"
|
||||||
|
|
||||||
|
@close-drawer="closeDrawer()"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
357
src/components/budgets/BudgetView.vue
Normal file
357
src/components/budgets/BudgetView.vue
Normal file
@@ -0,0 +1,357 @@
|
|||||||
|
<template>
|
||||||
|
<Toast/>
|
||||||
|
<div v-if="loading" class="relative w-full h-screen">
|
||||||
|
<!-- Полупрозрачный белый фон -->
|
||||||
|
<div class="absolute top-0 left-0 w-full h-full bg-white opacity-50 z-0"></div>
|
||||||
|
|
||||||
|
<!-- Спиннер поверх -->
|
||||||
|
<div class="absolute top-0 left-0 w-full h-full flex items-center justify-center z-50">
|
||||||
|
<ProgressSpinner
|
||||||
|
style="width: 50px; height: 50px;"
|
||||||
|
strokeWidth="8"
|
||||||
|
fill="transparent"
|
||||||
|
animationDuration=".5s"
|
||||||
|
aria-label="Custom ProgressSpinner"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="px-4 bg-gray-100 h-full ">
|
||||||
|
<div v-if="updateLoading" class="absolute top-0 left-0 w-full h-full flex items-center justify-center z-50">
|
||||||
|
<ProgressSpinner
|
||||||
|
v-if="updateLoading"
|
||||||
|
class="absolute top-0 left-0 w-full h-full flex items-center justify-center z-50"
|
||||||
|
style="width: 50px; height: 50px;"
|
||||||
|
strokeWidth="8"
|
||||||
|
fill="transparent"
|
||||||
|
animationDuration=".5s"
|
||||||
|
aria-label="Custom ProgressSpinner"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div :class="!updateLoading ? '' : 'h-fit bg-white opacity-50 z-0 '" class=" flex flex-col gap-3">
|
||||||
|
<div class="flex flex-col ">
|
||||||
|
<h2 class="text-4xl font-bold">Budget for {{ budgetInfo.budget.name }} </h2>
|
||||||
|
<div class="flex flex-row gap-2 text-xl">{{ formatDate(budgetInfo.budget.dateFrom) }} -
|
||||||
|
{{ formatDate(budgetInfo.budget.dateTo) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
<!-- Аналитика и плановые доходы/расходы -->
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 items-start ">
|
||||||
|
<!-- Блок Аналитики (25%) -->
|
||||||
|
<div class="card p-4 shadow-lg rounded-lg col-span-2 h-fit">
|
||||||
|
<h3 class="text-xl mb-4 font-bold">Analytics</h3>
|
||||||
|
<div class="flex ">
|
||||||
|
<div class="w-128">
|
||||||
|
<Chart type="bar" :data="incomeExpenseChartData" class=""/>
|
||||||
|
</div>
|
||||||
|
<div class="h-fit">
|
||||||
|
<!-- <Chart type="pie" :data="incomeExpenseChartData" class="h-64"/>-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-5 items-center justify-items-center mt-4">
|
||||||
|
<div class="grid grid-cols-2 gap-5 items-center w-full">
|
||||||
|
<div class="flex flex-col items-center font-bold ">
|
||||||
|
<h4 class="text-xl font-bold text-green-500">Total Incomes:</h4>
|
||||||
|
<div class="font-bold bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
|
||||||
|
+{{ formatAmount(budgetInfo.totalIncomes) }}
|
||||||
|
₽
|
||||||
|
</div>
|
||||||
|
<!-- <p>Total Incomes</p>-->
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center ">
|
||||||
|
<h4 class="text-xl font-bold text-red-500">Total Expenses:</h4>
|
||||||
|
<div class="font-bold bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
|
||||||
|
-{{ formatAmount(budgetInfo.totalExpenses) }}
|
||||||
|
₽
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-2 items-center font-bold">
|
||||||
|
<p class="font-bold ">Income at 10th:</p>
|
||||||
|
<div class="font-bold bg-gray-100 p-1 rounded-lg box-shadow-inner text-center w-full px-2">
|
||||||
|
+{{ formatAmount(budgetInfo.chartData[0][0]) }} ₽
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-2 items-center">
|
||||||
|
<p class="font-bold ">Income at 25th:</p>
|
||||||
|
<div class="font-bold bg-gray-100 p-1 rounded-lg box-shadow-inner text-center w-full px-2">
|
||||||
|
+{{ formatAmount(budgetInfo.chartData[0][1]) }} ₽
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-2 items-center">
|
||||||
|
<p class="font-bold ">Expenses at 10th:</p>
|
||||||
|
<div class="font-bold bg-gray-100 p-1 rounded-lg box-shadow-inner text-center w-full px-2">
|
||||||
|
-{{ formatAmount(budgetInfo.chartData[1][0]) }} ₽
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-2 items-center">
|
||||||
|
<p class="font-bold ">Expenses at 25th:</p>
|
||||||
|
<div class="font-bold bg-gray-100 p-1 rounded-lg box-shadow-inner text-center w-full px-2">
|
||||||
|
-{{ formatAmount(budgetInfo.chartData[1][1]) }} ₽
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-2 items-center ">
|
||||||
|
<p class="font-bold">Left for unplanned:</p>
|
||||||
|
<div class="font-bold bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
|
||||||
|
{{ formatAmount(leftForUnplanned) }} ₽
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-2 items-center ">
|
||||||
|
<p class="font-bold">Current spending:</p>
|
||||||
|
<div class="font-bold bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
|
||||||
|
{{ formatAmount(leftForUnplanned) }} ₽
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ProgressBar :value="value" class="mt-2"></ProgressBar>
|
||||||
|
<div class="flex flex-col w-full items-end">
|
||||||
|
|
||||||
|
<div class="flex flex-row items-end ">
|
||||||
|
{{ formatAmount(leftForUnplanned) }} ₽
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 gap-4 row-span-3">
|
||||||
|
<div class="card p-4 shadow-lg rounded-lg col-span-1 h-fit">
|
||||||
|
<!-- Планируемые доходы -->
|
||||||
|
<div>
|
||||||
|
<div class="flex flex-row gap-4 items-center">
|
||||||
|
<h3 class="text-xl font-bold text-green-500 mb-4 ">Planned Incomes</h3>
|
||||||
|
<Button icon="pi pi-plus" rounded outlined size="small"/>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 mb-2">
|
||||||
|
<div class="font-bold bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
|
||||||
|
{{ formatAmount(budgetInfo.totalIncomes) }}
|
||||||
|
₽
|
||||||
|
</div>
|
||||||
|
<div class="font-bold bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
|
||||||
|
{{ formatAmount(totalIncomeLeftToGet) }}
|
||||||
|
₽
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
|
||||||
|
<BudgetTransactionView v-for="transaction in budgetInfo.plannedIncomes" :transaction="transaction"/>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card p-4 shadow-lg rounded-lg col-span-1 h-fit">
|
||||||
|
<!-- Планируемые расходы -->
|
||||||
|
<div class>
|
||||||
|
<h3 class="text-xl font-bold text-red-500 mb-4">Planned Expenses</h3>
|
||||||
|
<div class="grid grid-cols-2 mb-2">
|
||||||
|
<div class="font-bold bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
|
||||||
|
{{ formatAmount(budgetInfo.totalExpenses) }}
|
||||||
|
₽
|
||||||
|
</div>
|
||||||
|
<div class="font-bold bg-gray-100 p-1 rounded-lg box-shadow-inner w-full text-center">
|
||||||
|
{{ formatAmount(totalExpenseLeftToSpend) }}
|
||||||
|
₽
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
|
||||||
|
<BudgetTransactionView v-for="transaction in budgetInfo.plannedExpenses" :transaction="transaction"/>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row-span-1 col-span-2 h-fit">
|
||||||
|
<h3 class="text-2xl font-bold mb-4">Unplanned Categories</h3>
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||||
|
|
||||||
|
<UnplannedCategoryView v-for="category in budgetInfo.unplannedCategories" :key="category.id"
|
||||||
|
:category="category" :budget-id="budgetInfo.budget.id"
|
||||||
|
@category-updated="updateBudgetCategory"
|
||||||
|
class="p-4 shadow-lg rounded-lg bg-white flex justify-between items-center"/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class=" h-full overflow-y-auto gap-4 flex-col row-span-2 col-span-2">
|
||||||
|
<div class="flex flex-row ">
|
||||||
|
<h3 class="text-2xl font-bold mb-4 ">Transactions List</h3>
|
||||||
|
</div>
|
||||||
|
<div class=" flex gap-2">
|
||||||
|
<button v-for="categorySum in budgetInfo.transactionCategoriesSums" :key="categorySum.category.id"
|
||||||
|
class="rounded-full border p-1 bg-white border-gray-300 mb-2 px-2">
|
||||||
|
<strong>{{ categorySum.category.name }}</strong>:
|
||||||
|
{{ categorySum.sum }} ₽
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 gap-4 max-h-tlist overflow-y-auto">
|
||||||
|
<BudgetTransactionView v-for="transaction in budgetInfo.transactions" :key="transaction.id"
|
||||||
|
:transaction="transaction"
|
||||||
|
@open-drawer="openDrawer"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {computed, onMounted, ref} from 'vue';
|
||||||
|
import Chart from 'primevue/chart';
|
||||||
|
import BudgetTransactionView from "@/components/budgets/BudgetTransactionView.vue";
|
||||||
|
import {CategoryType} from "@/models/Category";
|
||||||
|
import {getBudgetInfo, updateBudgetCategoryRequest} from "@/services/budgetsService";
|
||||||
|
import {BudgetInfo} from "@/models/Budget";
|
||||||
|
import {useRoute} from "vue-router";
|
||||||
|
import {formatAmount, formatDate} from "@/utils/utils";
|
||||||
|
import ProgressBar from "primevue/progressbar";
|
||||||
|
import ProgressSpinner from "primevue/progressspinner";
|
||||||
|
import UnplannedCategoryView from "@/components/budgets/UnplannedCategoryView.vue";
|
||||||
|
import {TransactionType} from "@/models/Transaction";
|
||||||
|
import Toast from "primevue/toast";
|
||||||
|
import Button from "primevue/button";
|
||||||
|
|
||||||
|
const loading = ref(true);
|
||||||
|
const updateLoading = ref(false);
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
const budgetInfo = ref<BudgetInfo>();
|
||||||
|
|
||||||
|
const value = ref(50)
|
||||||
|
|
||||||
|
const leftForUnplanned = ref(0)
|
||||||
|
|
||||||
|
const drawerOpened = ref(false);
|
||||||
|
const transactionType = ref<TransactionType>()
|
||||||
|
const categoryType = ref<CategoryType>()
|
||||||
|
|
||||||
|
|
||||||
|
const totalIncomeLeftToGet = computed(() => {
|
||||||
|
let totalIncomeLeftToGet = 0;
|
||||||
|
budgetInfo.value?.plannedIncomes.forEach(i => {
|
||||||
|
if (!i.isDone) {
|
||||||
|
totalIncomeLeftToGet += i.amount
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return totalIncomeLeftToGet
|
||||||
|
})
|
||||||
|
|
||||||
|
const totalExpenseLeftToSpend = computed(() => {
|
||||||
|
let totalExpenseLeftToSpend = 0;
|
||||||
|
budgetInfo.value?.plannedExpenses.forEach(i => {
|
||||||
|
if (!i.isDone) {
|
||||||
|
totalExpenseLeftToSpend += i.amount
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return totalExpenseLeftToSpend
|
||||||
|
})
|
||||||
|
const fetchBudgetInfo = async () => {
|
||||||
|
updateLoading.value = true
|
||||||
|
console.log('Trying to get budget Info')
|
||||||
|
budgetInfo.value = await getBudgetInfo(route.params.id);
|
||||||
|
|
||||||
|
|
||||||
|
console.log(budgetInfo.value)
|
||||||
|
console.log(budgetInfo.value?.chartData[0])
|
||||||
|
incomeExpenseChartData.value = {
|
||||||
|
labels: ['10.10', '25.10'],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'Income',
|
||||||
|
backgroundColor: ['#2E8B57'],
|
||||||
|
data: budgetInfo.value?.chartData[0],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Expense',
|
||||||
|
backgroundColor: ['#B22222'],
|
||||||
|
data: budgetInfo.value?.chartData[1],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
leftForUnplanned.value =
|
||||||
|
budgetInfo.value.chartData[0][0] +
|
||||||
|
budgetInfo.value.chartData[0][1] -
|
||||||
|
budgetInfo.value.chartData[1][0] -
|
||||||
|
budgetInfo.value.chartData[1][1]
|
||||||
|
|
||||||
|
updateLoading.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
const updateBudgetCategory = async (category) => {
|
||||||
|
console.log(category)
|
||||||
|
loading.value = true
|
||||||
|
await updateBudgetCategoryRequest(budgetInfo.value.budget.id, category)
|
||||||
|
budgetInfo.value = await getBudgetInfo(route.params.id)
|
||||||
|
console.log(budgetInfo.value)
|
||||||
|
console.log(budgetInfo.value?.chartData[0])
|
||||||
|
incomeExpenseChartData.value = {
|
||||||
|
labels: ['10.10', '25.10'],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'Income',
|
||||||
|
backgroundColor: ['#2E8B57'],
|
||||||
|
data: budgetInfo.value?.chartData[0],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Expense',
|
||||||
|
backgroundColor: ['#B22222'],
|
||||||
|
data: budgetInfo.value?.chartData[1],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
leftForUnplanned.value =
|
||||||
|
budgetInfo.value.chartData[0][0] +
|
||||||
|
budgetInfo.value.chartData[0][1] -
|
||||||
|
budgetInfo.value.chartData[1][0] -
|
||||||
|
budgetInfo.value.chartData[1][1]
|
||||||
|
loading.value = false
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Пример данных
|
||||||
|
const incomeExpenseChartData = ref();
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
await Promise.all([
|
||||||
|
fetchBudgetInfo()
|
||||||
|
]);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error during fetching data:', error);
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* Добавляем стили для стилизации */
|
||||||
|
.card {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.max-h-tlist {
|
||||||
|
max-height: 45dvh; /* Ограничение высоты списка */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.box-shadow-inner {
|
||||||
|
box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
324
src/components/budgets/TransactionEditDrawer.vue
Normal file
324
src/components/budgets/TransactionEditDrawer.vue
Normal file
@@ -0,0 +1,324 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import Drawer from "primevue/drawer";
|
||||||
|
import InputText from "primevue/inputtext";
|
||||||
|
import DatePicker from "primevue/datepicker";
|
||||||
|
import FloatLabel from "primevue/floatlabel";
|
||||||
|
import InputNumber from "primevue/inputnumber";
|
||||||
|
import Button from "primevue/button";
|
||||||
|
import {ref, onMounted, computed} from 'vue';
|
||||||
|
import {Transaction, TransactionType} from "@/models/Transaction";
|
||||||
|
import {CategoryType} from "@/models/Category";
|
||||||
|
import SelectButton from "primevue/selectbutton";
|
||||||
|
import {
|
||||||
|
createTransactionRequest,
|
||||||
|
getTransactionTypes,
|
||||||
|
updateTransactionRequest,
|
||||||
|
deleteTransactionRequest
|
||||||
|
} from "@/services/transactionService";
|
||||||
|
import {getCategories, getCategoryTypes} from "@/services/categoryService";
|
||||||
|
import {useToast} from "primevue/usetoast";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
visible: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
transaction: {
|
||||||
|
type: Object as () => Transaction,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
transactionType: {
|
||||||
|
type: String,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
categoryType: {
|
||||||
|
type: String,
|
||||||
|
required: false
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['create-transaction', 'update-transaction', 'delete-transaction', 'close-drawer']);
|
||||||
|
const toast = useToast();
|
||||||
|
const categoryTypeChanged = () => {
|
||||||
|
console.log(selectedCategoryType.value)
|
||||||
|
editedTransaction.value.category = selectedCategoryType.value.code == "EXPENSE" ? expenseCategories.value[0] : incomeCategories.value[0];
|
||||||
|
|
||||||
|
}
|
||||||
|
const selectCategory = (category) => {
|
||||||
|
isCategorySelectorOpened.value = false;
|
||||||
|
editedTransaction.value.category = category;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// Состояние
|
||||||
|
const loading = ref(false);
|
||||||
|
const isEditing = ref(!!props.transaction);
|
||||||
|
const isCategorySelectorOpened = ref(false);
|
||||||
|
const editedTransaction = ref<Transaction | null>(null);
|
||||||
|
|
||||||
|
const selectedCategoryType = ref<CategoryType | null>(null);
|
||||||
|
const selectedTransactionType = ref<TransactionType | null>(null);
|
||||||
|
|
||||||
|
const entireCategories = ref<Category[]>([]);
|
||||||
|
const expenseCategories = ref<Category[]>([]);
|
||||||
|
const incomeCategories = ref<Category[]>([]);
|
||||||
|
const categoryTypes = ref<CategoryType[]>([]);
|
||||||
|
const transactionTypes = ref<TransactionType[]>([]);
|
||||||
|
|
||||||
|
// Получение категорий и типов транзакций
|
||||||
|
const fetchCategoriesAndTypes = async () => {
|
||||||
|
try {
|
||||||
|
const [categoriesResponse, categoryTypesResponse, transactionTypesResponse] = await Promise.all([
|
||||||
|
getCategories(),
|
||||||
|
getCategoryTypes(),
|
||||||
|
getTransactionTypes()
|
||||||
|
]);
|
||||||
|
entireCategories.value = categoriesResponse.data;
|
||||||
|
expenseCategories.value = categoriesResponse.data.filter((category: Category) => category.type.code === 'EXPENSE');
|
||||||
|
incomeCategories.value = categoriesResponse.data.filter((category: Category) => category.type.code === 'INCOME');
|
||||||
|
|
||||||
|
categoryTypes.value = categoryTypesResponse.data;
|
||||||
|
transactionTypes.value = transactionTypesResponse.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching categories and types:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Инициализация данных
|
||||||
|
const prepareData = () => {
|
||||||
|
if (!props.transaction) {
|
||||||
|
editedTransaction.value = new Transaction();
|
||||||
|
editedTransaction.value.transactionType = transactionTypes.value.find(type => type.code === props.transactionType) || transactionTypes.value[0];
|
||||||
|
selectedCategoryType.value = categoryTypes.value.find(type => type.code === props.categoryType) || categoryTypes.value[0];
|
||||||
|
editedTransaction.value.category = props.categoryType === 'EXPENSE' ? expenseCategories.value[0] : incomeCategories.value[0];
|
||||||
|
editedTransaction.value.date = new Date();
|
||||||
|
} else {
|
||||||
|
editedTransaction.value = {...props.transaction};
|
||||||
|
selectedCategoryType.value = editedTransaction.value.category.type;
|
||||||
|
selectedTransactionType.value = editedTransaction.value.transactionType;
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
// Создание транзакции
|
||||||
|
const createTransaction = async () => {
|
||||||
|
try {
|
||||||
|
loading.value = true;
|
||||||
|
if (editedTransaction.value.transactionType.code === 'INSTANT') {
|
||||||
|
editedTransaction.value.isDone = true;
|
||||||
|
}
|
||||||
|
await createTransactionRequest(editedTransaction.value);
|
||||||
|
toast.add({severity: 'success', summary: 'Transaction created!', detail: 'Транзакция создана!', life: 3000});
|
||||||
|
emit('create-transaction', editedTransaction.value);
|
||||||
|
resetForm();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error creating transaction:', error);
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
console.log(editedTransaction.value)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Обновление транзакции
|
||||||
|
const updateTransaction = async () => {
|
||||||
|
try {
|
||||||
|
loading.value = true;
|
||||||
|
const response = await updateTransactionRequest(editedTransaction.value);
|
||||||
|
editedTransaction.value = response.data;
|
||||||
|
toast.add({severity: 'success', summary: 'Transaction updated!', detail: 'Транзакция обновлена!', life: 3000});
|
||||||
|
emit('update-transaction', editedTransaction.value);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error updating transaction:', error);
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Удаление транзакции
|
||||||
|
const deleteTransaction = async () => {
|
||||||
|
try {
|
||||||
|
loading.value = true;
|
||||||
|
await deleteTransactionRequest(editedTransaction.value.id);
|
||||||
|
toast.add({severity: 'success', summary: 'Transaction deleted!', detail: 'Транзакция удалена!', life: 3000});
|
||||||
|
emit('delete-transaction', editedTransaction.value);
|
||||||
|
closeDrawer()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error deleting transaction:', error);
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Сброс формы
|
||||||
|
const resetForm = () => {
|
||||||
|
|
||||||
|
editedTransaction.value.date = new Date();
|
||||||
|
editedTransaction.value.amount = null;
|
||||||
|
editedTransaction.value.comment = '';
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
const dateErrorMessage = computed(() => {
|
||||||
|
console.log('tut')
|
||||||
|
if (editedTransaction.value.transactionType.code != 'PLANNED' && editedTransaction.value.date > new Date()) {
|
||||||
|
console.log('tut2')
|
||||||
|
return 'При мгновенных тратах дата должна быть меньше текущей!'
|
||||||
|
} else if (editedTransaction.value.transactionType.code == 'PLANNED' && editedTransaction.value.date < new Date()){
|
||||||
|
console.log('tu3')
|
||||||
|
return 'При плановых тратах дата должна быть больше текущей!'
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
console.log('tu4')
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Закрытие окна
|
||||||
|
const closeDrawer = () => emit('close-drawer');
|
||||||
|
|
||||||
|
// Мониторинг при монтировании
|
||||||
|
onMounted(async () => {
|
||||||
|
loading.value = true;
|
||||||
|
await fetchCategoriesAndTypes();
|
||||||
|
prepareData();
|
||||||
|
loading.value = false;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
|
||||||
|
<div class="card flex justify-center">
|
||||||
|
|
||||||
|
<Drawer :visible="visible" :header="isEditing ? 'Edit Transaction' : 'Create Transaction'" :showCloseIcon="false"
|
||||||
|
position="right" @hide="closeDrawer"
|
||||||
|
class="!w-128 ">
|
||||||
|
<div v-if="loading">
|
||||||
|
Loading...
|
||||||
|
</div>
|
||||||
|
<div v-else class="p-fluid grid formgrid p-4 w-full gap-5">
|
||||||
|
|
||||||
|
<div class="relative w-full justify-center justify-items-center ">
|
||||||
|
<div class="flex flex-col justify-items-center gap-2">
|
||||||
|
|
||||||
|
<!-- {{editedTransaction.value.transactionType}}-->
|
||||||
|
<SelectButton v-if="!isEditing" v-model="editedTransaction.transactionType" :allow-empty="false"
|
||||||
|
:options="transactionTypes"
|
||||||
|
optionLabel="name"
|
||||||
|
aria-labelledby="basic"
|
||||||
|
class="justify-center"/>
|
||||||
|
<SelectButton v-model="selectedCategoryType" :options="categoryTypes" :allow-empty="false"
|
||||||
|
optionLabel="name"
|
||||||
|
aria-labelledby="basic"
|
||||||
|
@change="categoryTypeChanged" class="justify-center"/>
|
||||||
|
<button class="border border-gray-300 rounded-lg w-full z-50"
|
||||||
|
@click="isCategorySelectorOpened = !isCategorySelectorOpened">
|
||||||
|
<div class="flex flex-row items-center pe-4 py-2 ">
|
||||||
|
<div class="flex flex-row justify-between w-full gap-4 px-4 items-center">
|
||||||
|
<p class="text-3xl font-bold text-gray-700 dark:text-gray-400">{{
|
||||||
|
editedTransaction.category.icon
|
||||||
|
}}</p>
|
||||||
|
<div class="flex flex-col items-start justify-items-start justify-around w-full">
|
||||||
|
<p class="font-bold text-start">{{ editedTransaction.category.name }}</p>
|
||||||
|
<p class="font-light line-clamp-1 items-start text-start">{{
|
||||||
|
editedTransaction.category.description
|
||||||
|
}}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span :class="{'rotate-90': isCategorySelectorOpened}"
|
||||||
|
class="pi pi-angle-right transition-transform duration-300 text-5xl"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Анимированное открытие списка категорий -->
|
||||||
|
<div v-show="isCategorySelectorOpened"
|
||||||
|
class="absolute left-0 right-0 top-full overflow-hidden z-50 border-b-4 border-x rounded-b-lg bg-white shadow-lg transition-all duration-500"
|
||||||
|
:class="{ 'max-h-0': !isCategorySelectorOpened, 'max-h-[500px]': isCategorySelectorOpened }">
|
||||||
|
<div class="grid grid-cols-2 mt-2">
|
||||||
|
<button
|
||||||
|
v-for="category in editedTransaction.category.type.code == 'EXPENSE' ? expenseCategories : incomeCategories"
|
||||||
|
:key="category.id" class="border rounded-lg mx-2 mb-2"
|
||||||
|
@click="selectCategory(category)">
|
||||||
|
<div class="flex flex-row justify-between w-full px-2">
|
||||||
|
<p class="text-4xl font-bold text-gray-700 dark:text-gray-400">{{ category.icon }}</p>
|
||||||
|
<div class="flex flex-col items-start justify-items-start justify-around w-full">
|
||||||
|
<p class="font-bold text-start">{{ category.name }}</p>
|
||||||
|
<p class="font-light line-clamp-1 text-start">{{ category.description }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Comment Input -->
|
||||||
|
<div class="field col-12 w-full">
|
||||||
|
<FloatLabel variant="on" class="w-full">
|
||||||
|
<label for="comment">Comment</label>
|
||||||
|
<InputText class="w-full"
|
||||||
|
:invalid="!editedTransaction.comment"
|
||||||
|
id="comment"
|
||||||
|
v-model="editedTransaction.comment"
|
||||||
|
|
||||||
|
/>
|
||||||
|
</FloatLabel>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Date Picker -->
|
||||||
|
<div class="field col-12 gap-0">
|
||||||
|
<FloatLabel variant="on">
|
||||||
|
<label for="date">Date </label>
|
||||||
|
|
||||||
|
<DatePicker class="w-full"
|
||||||
|
inline
|
||||||
|
:invalid="editedTransaction.transactionType.code != 'PLANNED' ? editedTransaction.date > new Date() : true"
|
||||||
|
id="date"
|
||||||
|
v-model="editedTransaction.date"
|
||||||
|
dateFormat="yy-mm-dd"
|
||||||
|
showIcon
|
||||||
|
/>
|
||||||
|
<p :class="dateErrorMessage != '' ? 'visible' : 'invisible'"
|
||||||
|
class="text-red-400">{{dateErrorMessage}}</p>
|
||||||
|
|
||||||
|
|
||||||
|
</FloatLabel>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Amount Input -->
|
||||||
|
<div class="field col-12">
|
||||||
|
<FloatLabel variant="on">
|
||||||
|
<InputNumber class="w-full"
|
||||||
|
:invalid="!editedTransaction.amount"
|
||||||
|
:minFractionDigits="0"
|
||||||
|
id="amount"
|
||||||
|
v-model="editedTransaction.amount"
|
||||||
|
mode="currency"
|
||||||
|
currency="RUB"
|
||||||
|
locale="ru-RU"
|
||||||
|
|
||||||
|
/>
|
||||||
|
<label for="amount">Amount</label>
|
||||||
|
</FloatLabel>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Buttons -->
|
||||||
|
<div class="field col-12 flex justify-content-end gap-4">
|
||||||
|
|
||||||
|
<Button label="Save" icon="pi pi-check" class="p-button-success"
|
||||||
|
@click="isEditing ? updateTransaction() : createTransaction()"/>
|
||||||
|
<Button label="Cancel" icon="pi pi-times" class="p-button-secondary " @click="closeDrawer"/>
|
||||||
|
<Button v-if="isEditing" label="Delete" icon="pi pi-times" class="p-button-success" severity="danger"
|
||||||
|
@click="deleteTransaction"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</Drawer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.formgrid .field {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
93
src/components/budgets/UnplannedCategoryView.vue
Normal file
93
src/components/budgets/UnplannedCategoryView.vue
Normal file
@@ -0,0 +1,93 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import Button from "primevue/button";
|
||||||
|
import Select from "primevue/select";
|
||||||
|
import InputNumber from "primevue/inputnumber";
|
||||||
|
|
||||||
|
import {Category} from "@/models/Category";
|
||||||
|
import {ref} from "vue";
|
||||||
|
import {formatAmount} from "@/utils/utils";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
category: {
|
||||||
|
type: Object as Category,
|
||||||
|
require: true
|
||||||
|
},
|
||||||
|
budgetId: {
|
||||||
|
type: Number,
|
||||||
|
require: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const emits = defineEmits(['category-updated'])
|
||||||
|
|
||||||
|
const isEditing = ref(false);
|
||||||
|
const startEditing = (a) => {
|
||||||
|
isEditing.value = true;
|
||||||
|
console.log(a)
|
||||||
|
}
|
||||||
|
|
||||||
|
const stopEditing = () => {
|
||||||
|
isEditing.value = false;
|
||||||
|
|
||||||
|
emits('category-updated', editedCategory.value);
|
||||||
|
|
||||||
|
}
|
||||||
|
const selectedCategorySettingType = ref(props.category.categorySetting.type)
|
||||||
|
|
||||||
|
const categorySettingTypes = ref([
|
||||||
|
{
|
||||||
|
code: 'CONST',
|
||||||
|
name: 'По значению'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'AVG',
|
||||||
|
name: 'По среднему'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'PERCENT',
|
||||||
|
name: 'По проценту'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: 'LIMIT',
|
||||||
|
name: 'По лимиту'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
const categoryAmount = ref(1000)
|
||||||
|
|
||||||
|
const editedCategory = ref(props.category);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
|
||||||
|
<div class="p-2 shadow-lg rounded-lg bg-white flex justify-between ">
|
||||||
|
|
||||||
|
<div :class="isEditing ? 'w-1/5': ''" class="min-w-1 w-4/6">
|
||||||
|
<h4 class="text-lg line-clamp-1">{{ editedCategory.category.name }}</h4>
|
||||||
|
<p class="text-sm text-gray-500 line-clamp-1 min-w-1 ">{{ editedCategory.category.description }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row gap-2 justify-end w-fit ">
|
||||||
|
|
||||||
|
<Select v-if="isEditing" v-model="editedCategory.categorySetting.type" :options="categorySettingTypes"
|
||||||
|
optionLabel="name"
|
||||||
|
class="line-clamp-1 w-fit"/>
|
||||||
|
<!-- Сумма, которая становится редактируемой при клике -->
|
||||||
|
<button v-if="!isEditing" @click="startEditing"
|
||||||
|
class="text-lg font-bold cursor-pointer w-full line-clamp-1">
|
||||||
|
<p class="line-clamp-1 w-fit">{{ formatAmount(editedCategory.categorySetting.value) }} ₽</p>
|
||||||
|
</button>
|
||||||
|
<!-- @blur="stopEditing('unplannedCategories')" @keyup.enter="stopEditing('unplannedCategories')"–>-->
|
||||||
|
|
||||||
|
<InputNumber v-else ref="inputRefs" type="text" v-model="editedCategory.categorySetting.settingValue"
|
||||||
|
:disabled=" editedCategory.categorySetting.type.code == 'PERCENT' ? false : editedCategory.categorySetting.type.code == 'LIMIT' ? true : editedCategory.categorySetting.type.code == 'AVG' "
|
||||||
|
:class="editedCategory.categorySetting.type.code != 'CONST' || editedCategory.categorySetting.type.code != 'PERCENT' ? 'text-gray-500' : 'text-black' "
|
||||||
|
class="text-lg font-bold border-b-2 border-gray-300 outline-none focus:border-blue-500 text-right"
|
||||||
|
:min="0" :max="editedCategory.categorySetting.type.code == 'PERCENT' ? 100 : 9000000000"/>
|
||||||
|
<Button v-if="isEditing" @click="stopEditing" icon="pi pi-check" severity="success" rounded outlined
|
||||||
|
aria-label="Search"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
7
src/components/icons/IconCommunity.vue
Normal file
7
src/components/icons/IconCommunity.vue
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
7
src/components/icons/IconDocumentation.vue
Normal file
7
src/components/icons/IconDocumentation.vue
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
7
src/components/icons/IconEcosystem.vue
Normal file
7
src/components/icons/IconEcosystem.vue
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
7
src/components/icons/IconSupport.vue
Normal file
7
src/components/icons/IconSupport.vue
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
18
src/components/icons/IconTooling.vue
Normal file
18
src/components/icons/IconTooling.vue
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
|
||||||
|
<template>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
aria-hidden="true"
|
||||||
|
role="img"
|
||||||
|
class="iconify iconify--mdi"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
preserveAspectRatio="xMidYMid meet"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
|
||||||
|
fill="currentColor"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
56
src/components/settings/CategorySettingView.vue
Normal file
56
src/components/settings/CategorySettingView.vue
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
|
||||||
|
import {Category} from "@/models/Category";
|
||||||
|
import {onMounted, ref} from "vue";
|
||||||
|
import {getCategories} from "@/services/categoryService";
|
||||||
|
import CategoryListItem from "@/components/settings/categories/CategoryListItem.vue";
|
||||||
|
import Button from "primevue/button";
|
||||||
|
|
||||||
|
const loading = ref(true);
|
||||||
|
const categories = ref<Category[]>([]);
|
||||||
|
|
||||||
|
const fetchCategories = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
console.log('loaded')
|
||||||
|
const result = await getCategories();
|
||||||
|
categories.value = result.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching categories:', error);
|
||||||
|
}
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
onMounted(async () => {
|
||||||
|
await fetchCategories()
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div v-if="loading" class="flex flex-row mt-40">
|
||||||
|
Loading...
|
||||||
|
</div>
|
||||||
|
<div v-else class="">
|
||||||
|
<div class="flex flex-col mt-40 bg-gray-200 outline outline-2 outline-gray-300 rounded-2xl p-4">
|
||||||
|
<div class="flex flex-row items-center min-w-fit justify-between">
|
||||||
|
<p class="text-2xl font-bold">Categories</p>
|
||||||
|
<router-link to="/settings/categories">
|
||||||
|
<Button size="large" icon="pi pi-arrow-circle-right" severity="secondary" text rounded/>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row overflow-x-auto gap-4 h-fit p-6 ">
|
||||||
|
<CategoryListItem v-for="category in categories" :category="category"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.overflow-x-auto {
|
||||||
|
max-height: 60vh; /* Ограничение высоты для появления прокрутки */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
70
src/components/settings/RecurrentSettingView.vue
Normal file
70
src/components/settings/RecurrentSettingView.vue
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
import Button from "primevue/button";
|
||||||
|
import {RecurrentPayment} from "@/models/Recurrent";
|
||||||
|
import {onMounted, ref} from "vue";
|
||||||
|
import {getRecurrentPayments} from "@/services/recurrentService";
|
||||||
|
|
||||||
|
const loading = ref(true);
|
||||||
|
|
||||||
|
const recurrentPayments = ref<RecurrentPayment[]>([]);
|
||||||
|
const fetchRecurrentPayments = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
console.log('loaded')
|
||||||
|
const result = await getRecurrentPayments();
|
||||||
|
recurrentPayments.value = result.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching recurrent payments:', error);
|
||||||
|
}
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await fetchRecurrentPayments()
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div v-if="loading" class="flex flex-row mt-40">
|
||||||
|
Loading...
|
||||||
|
</div>
|
||||||
|
<div v-else class="">
|
||||||
|
<div class="flex flex-col mt-40 bg-gray-200 outline outline-2 outline-gray-300 rounded-2xl p-4">
|
||||||
|
<div class="flex flex-row items-center min-w-fit justify-between">
|
||||||
|
<p class="text-2xl font-bold">Recurrent operations</p>
|
||||||
|
<router-link to="/settings/recurrents">
|
||||||
|
<Button size="large" icon="pi pi-arrow-circle-right" severity="secondary" text rounded/>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row overflow-x-auto gap-4 h-fit p-6 ">
|
||||||
|
<div v-for="recurrent in recurrentPayments"
|
||||||
|
class="flex rounded-xl border-2 bg-white shadow-xl min-w-fit max-h-fit gap-5 flex-row items-center justify-between w-full p-2">
|
||||||
|
|
||||||
|
|
||||||
|
<div class="flex flex-row items-center p-x-4 gap-4">
|
||||||
|
<p class="text-6xl font-bold text-gray-700 dark:text-gray-400">{{ recurrent.category.icon }}</p>
|
||||||
|
<div class="flex flex-col items-start justify-items-start w-full">
|
||||||
|
<p class="font-bold">{{ recurrent.name }}</p>
|
||||||
|
<p class="font-light">{{ recurrent.description }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center p-x-4 justify-items-end text-end ">
|
||||||
|
<p :class="recurrent.category.type.code == 'EXPENSE' ? 'text-red-400' : 'text-green-400' " class=" font-bold">- {{ recurrent.amount }} руб.</p>
|
||||||
|
<p class="text-end"> {{ recurrent.atDay }} числа</p>
|
||||||
|
<!-- <Button icon="pi pi-pen-to-square" rounded @click="openEdit"/>-->
|
||||||
|
<!-- <Button icon="pi pi-trash" severity="danger" rounded @click="deleteCategory"/>-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
20
src/components/settings/SettingsView.vue
Normal file
20
src/components/settings/SettingsView.vue
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
import CategorySettingView from "@/components/settings/CategorySettingView.vue";
|
||||||
|
import RecurrentSettingView from "@/components/settings/RecurrentSettingView.vue";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex flex-col items-center justify-center h-full ">
|
||||||
|
<h1 class="text-2xl font-bold">Settings</h1>
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 h-full w-full px-6">
|
||||||
|
<CategorySettingView />
|
||||||
|
<RecurrentSettingView />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
257
src/components/settings/categories/CategoriesList.vue
Normal file
257
src/components/settings/categories/CategoriesList.vue
Normal file
@@ -0,0 +1,257 @@
|
|||||||
|
<template>
|
||||||
|
<div v-if="loading">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div v-else class="flex flex-col bg-gray-100 dark:bg-gray-800 h-screen p-4">
|
||||||
|
<!-- Заголовок и кнопка добавления категории -->
|
||||||
|
<div class="flex flex-row justify-between bg-gray-100">
|
||||||
|
<h2 class="text-5xl font-bold">Categories</h2>
|
||||||
|
<Button label="Add Category" icon="pi pi-plus" class="p-button-success" @click="openCreateDialog(null)"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Поле для поиска -->
|
||||||
|
<div class="my-4 w-full">
|
||||||
|
<span class="p-input-icon-left flex flex-row gap-2 items-center ">
|
||||||
|
<i class="pi pi-search"></i>
|
||||||
|
<InputText v-model="searchTerm" placeholder="Search categories..." class="w-full"/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Переключатель категорий (доходы/расходы) -->
|
||||||
|
<div class="card flex sm:hidden justify-center mb-4">
|
||||||
|
<SelectButton v-model="selectedCategoryType" :options="categoryTypes" optionLabel="name"
|
||||||
|
aria-labelledby="category-switch"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Список категорий с прокруткой для больших экранов -->
|
||||||
|
<div class="flex">
|
||||||
|
<div class="hidden sm:grid grid-cols-2 gap-x-10 w-full h-full justify-items-center overflow-y-auto">
|
||||||
|
<!-- Категории доходов -->
|
||||||
|
<div class="grid h-full w-full min-w-fit overflow-y-auto">
|
||||||
|
<div class=" gap-4 ">
|
||||||
|
<div class="flex flex-row gap-2 ">
|
||||||
|
<h3 class="text-2xl">Income Categories</h3>
|
||||||
|
<Button icon="pi pi-plus" rounded outlined class="p-button-success" @click="openCreateDialog('INCOME')"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class=" overflow-y-auto mt-2 space-y-2 px-2">
|
||||||
|
<CategoryListItem
|
||||||
|
class=""
|
||||||
|
v-for="category in filteredIncomeCategories"
|
||||||
|
:key="category.id"
|
||||||
|
:category="category"
|
||||||
|
v-bind="category"
|
||||||
|
@open-edit="openEdit"
|
||||||
|
@delete-category="deleteCat"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Категории расходов -->
|
||||||
|
<div class="grid h-full w-full min-w-fit overflow-y-auto">
|
||||||
|
<div class=" gap-4 justify-between ">
|
||||||
|
<div class="flex flex-row gap-2">
|
||||||
|
<h3 class="text-2xl">Expense Categories</h3>
|
||||||
|
<Button icon="pi pi-plus" rounded outlined class="p-button-success !hover:bg-green-600"
|
||||||
|
@click="openCreateDialog('EXPENSE')"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class=" overflow-y-auto pb-10 mt-2 space-y-2 px-2">
|
||||||
|
<CategoryListItem
|
||||||
|
v-for="category in filteredExpenseCategories"
|
||||||
|
:key="category.id"
|
||||||
|
:category="category"
|
||||||
|
v-bind="category"
|
||||||
|
@open-edit="openEdit"
|
||||||
|
@delete-category="deleteCat"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Для маленьких экранов -->
|
||||||
|
<div class="flex sm:hidden flex-wrap rounded w-full">
|
||||||
|
<CategoryListItem
|
||||||
|
v-for="category in filteredCategories"
|
||||||
|
:key="category.id"
|
||||||
|
:category="category"
|
||||||
|
v-bind="category"
|
||||||
|
class="mt-2"
|
||||||
|
@open-edit="openEdit"
|
||||||
|
@delete-category="deleteCat"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<CreateCategoryModal
|
||||||
|
:show="isDialogVisible"
|
||||||
|
:categoryTypes="categoryTypes"
|
||||||
|
:selectedCategoryType="selectedCategoryType"
|
||||||
|
:category="editingCategory"
|
||||||
|
@saveCategory="saveCategory"
|
||||||
|
@close-modal="closeCreateDialog"
|
||||||
|
@update:visible="closeCreateDialog"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import {computed, nextTick, onMounted, ref, watch} from 'vue';
|
||||||
|
import Button from 'primevue/button';
|
||||||
|
import InputText from 'primevue/inputtext';
|
||||||
|
import SelectButton from 'primevue/selectbutton';
|
||||||
|
import CreateCategoryModal from './CreateCategoryModal.vue';
|
||||||
|
import CategoryListItem from '@/components/settings/categories/CategoryListItem.vue';
|
||||||
|
import {Category, CategoryType} from '@/models/Category';
|
||||||
|
import {
|
||||||
|
createCategory,
|
||||||
|
deleteCategory,
|
||||||
|
getCategories,
|
||||||
|
getCategoryTypes,
|
||||||
|
updateCategory
|
||||||
|
} from "@/services/categoryService";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Button,
|
||||||
|
InputText,
|
||||||
|
SelectButton,
|
||||||
|
CreateCategoryModal,
|
||||||
|
CategoryListItem,
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const loading = ref(true);
|
||||||
|
const entireCategories = ref<Category[]>([]);
|
||||||
|
const expenseCategories = ref<Category[]>([]);
|
||||||
|
const incomeCategories = ref<Category[]>([]);
|
||||||
|
const editingCategory = ref<Category | null>(null);
|
||||||
|
const isDialogVisible = ref(false);
|
||||||
|
|
||||||
|
const fetchCategories = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const response = await getCategories();
|
||||||
|
entireCategories.value = response.data
|
||||||
|
expenseCategories.value = response.data.filter((category: Category) => category.type.code === 'EXPENSE');
|
||||||
|
incomeCategories.value = response.data.filter((category: Category) => category.type.code === 'INCOME');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching categories:', error);
|
||||||
|
}
|
||||||
|
loading.value = false
|
||||||
|
};
|
||||||
|
|
||||||
|
const categoryTypes = ref<CategoryType[]>([]);
|
||||||
|
const selectedCategoryType = ref<CategoryType | null>(null);
|
||||||
|
const fetchCategoryTypes = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const response = await getCategoryTypes();
|
||||||
|
categoryTypes.value = response.data;
|
||||||
|
selectedCategoryType.value = categoryTypes.value.find((category: CategoryType) => category.code === 'EXPENSE');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching category types:', error);
|
||||||
|
}
|
||||||
|
loading.value = false
|
||||||
|
};
|
||||||
|
|
||||||
|
const searchTerm = ref('');
|
||||||
|
|
||||||
|
const filteredExpenseCategories = computed(() =>
|
||||||
|
expenseCategories.value.filter(category =>
|
||||||
|
category.name.toLowerCase().includes(searchTerm.value.toLowerCase())
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
const filteredIncomeCategories = computed(() =>
|
||||||
|
incomeCategories.value.filter(category =>
|
||||||
|
category.name.toLowerCase().includes(searchTerm.value.toLowerCase())
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
const filteredCategories = computed(() => {
|
||||||
|
if (selectedCategoryType.value?.code === 'EXPENSE') {
|
||||||
|
return filteredExpenseCategories.value;
|
||||||
|
} else {
|
||||||
|
return filteredIncomeCategories.value;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const openCreateDialog = (categoryType: CategoryType | null = null) => {
|
||||||
|
if (categoryType) {
|
||||||
|
selectedCategoryType.value = categoryType;
|
||||||
|
} else if (editingCategory.value) {
|
||||||
|
selectedCategoryType.value = editingCategory.value.type;
|
||||||
|
} else {
|
||||||
|
selectedCategoryType.value = categoryTypes.value.find(category => category.code === 'EXPENSE');
|
||||||
|
}
|
||||||
|
isDialogVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeCreateDialog = () => {
|
||||||
|
isDialogVisible.value = false;
|
||||||
|
editingCategory.value = null; // Сбрасываем категорию при закрытии
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveCategory = async (newCategory: Category) => {
|
||||||
|
if (newCategory.id) {
|
||||||
|
await updateCategory(newCategory.id, newCategory);
|
||||||
|
} else {
|
||||||
|
await createCategory(newCategory);
|
||||||
|
}
|
||||||
|
await fetchCategories()
|
||||||
|
closeCreateDialog();
|
||||||
|
};
|
||||||
|
|
||||||
|
const deleteCat = async (categoryId: number) => {
|
||||||
|
await deleteCategory(categoryId);
|
||||||
|
await fetchCategories();
|
||||||
|
}
|
||||||
|
|
||||||
|
const openEdit = (category: Category) => {
|
||||||
|
editingCategory.value = category;
|
||||||
|
nextTick(() => {
|
||||||
|
openCreateDialog(category.type); // Обновляем форму для редактирования
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(editingCategory, (newCategory) => {
|
||||||
|
if (newCategory) {
|
||||||
|
selectedCategoryType.value = newCategory.type; // Обновляем тип при редактировании
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await fetchCategories();
|
||||||
|
await fetchCategoryTypes();
|
||||||
|
loading.value = false;
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
expenseCategories,
|
||||||
|
incomeCategories,
|
||||||
|
selectedCategoryType,
|
||||||
|
categoryTypes,
|
||||||
|
searchTerm,
|
||||||
|
filteredExpenseCategories,
|
||||||
|
filteredIncomeCategories,
|
||||||
|
filteredCategories,
|
||||||
|
isDialogVisible,
|
||||||
|
openCreateDialog,
|
||||||
|
closeCreateDialog,
|
||||||
|
saveCategory,
|
||||||
|
deleteCat,
|
||||||
|
openEdit,
|
||||||
|
editingCategory,
|
||||||
|
loading,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* Прокрутка для категорий */
|
||||||
|
.overflow-y-auto {
|
||||||
|
max-height: 80vh; /* Ограничение высоты для появления прокрутки */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
45
src/components/settings/categories/CategoryListItem.vue
Normal file
45
src/components/settings/categories/CategoryListItem.vue
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { Category } from "@/models/Category";
|
||||||
|
import { PropType } from "vue";
|
||||||
|
import Button from "primevue/button";
|
||||||
|
|
||||||
|
// Определение входных параметров (props)
|
||||||
|
const props = defineProps({
|
||||||
|
category: { type: Object as PropType<Category>, required: true }
|
||||||
|
});
|
||||||
|
|
||||||
|
// Определение событий (emits)
|
||||||
|
const emit = defineEmits(["open-edit", "delete-category"]);
|
||||||
|
|
||||||
|
// Функция для открытия редактора категории
|
||||||
|
const openEdit = () => {
|
||||||
|
emit("open-edit", props.category); // Использование события для открытия редактора
|
||||||
|
};
|
||||||
|
|
||||||
|
// Функция для удаления категории
|
||||||
|
const deleteCategory = () => {
|
||||||
|
console.log('deleteCategory ' + props.category?.id);
|
||||||
|
emit("delete-category", props.category.id); // Использование события для удаления категории
|
||||||
|
};
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex rounded-xl border-2 bg-white shadow-xl min-w-fit max-h-fit gap-5 flex-row items-center justify-between w-full p-2">
|
||||||
|
<div class="flex flex-row items-center p-x-4 gap-4">
|
||||||
|
<p class="text-6xl font-bold text-gray-700 dark:text-gray-400">{{ category.icon }}</p>
|
||||||
|
<div class="flex flex-col items-start justify-items-start w-full">
|
||||||
|
<p class="font-bold">{{ category.name }}</p>
|
||||||
|
<p class="font-light">{{ category.description }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row items-center p-x-4 gap-2 ">
|
||||||
|
<Button icon="pi pi-pen-to-square" rounded @click="openEdit"/>
|
||||||
|
<Button icon="pi pi-trash" severity="danger" rounded @click="deleteCategory"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* Внешний вид компонента */
|
||||||
|
</style>
|
||||||
171
src/components/settings/categories/CreateCategoryModal.vue
Normal file
171
src/components/settings/categories/CreateCategoryModal.vue
Normal file
@@ -0,0 +1,171 @@
|
|||||||
|
<template>
|
||||||
|
<Dialog :visible="show" modal :header="isEditing ? 'Edit Category' : 'Create New Category'" :closable="false"
|
||||||
|
class="!w-1/3">
|
||||||
|
<div class="flex justify-center gap-4">
|
||||||
|
<Button rounded outlined @click="toggleEmojiPicker" class=" flex justify-center !rounded-full !text-4xl !p-4"
|
||||||
|
size="large" :label="icon"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="absolute pt-1 border rounded-lg shadow-2xl border-gray-300 bg-white grid grid-cols-6 gap-4 h-40 z-50 ml-3 mt-1 overflow-scroll"
|
||||||
|
v-if="showEmojiPicker">
|
||||||
|
<Button v-for="emoji in emojis" class="!p-4" @click="selectEmoji(emoji)" :label="emoji" text/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- SelectButton для выбора типа категории -->
|
||||||
|
<div class="flex justify-center mt-4">
|
||||||
|
<SelectButton v-model="categoryType" :options="categoryTypes" optionLabel="name" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Поля для создания/редактирования категории -->
|
||||||
|
<label for="newCategoryName">Category Name:</label>
|
||||||
|
<input v-model="name" type="text" id="newCategoryName"/>
|
||||||
|
|
||||||
|
<label for="newCategoryDesc">Category Description:</label>
|
||||||
|
<input v-model="description" type="text" id="newCategoryDesc"/>
|
||||||
|
|
||||||
|
<!-- Кнопки -->
|
||||||
|
<div class="button-group">
|
||||||
|
<button @click="saveCategory" class="create-category-btn">{{ isEditing ? 'Save' : 'Create' }}</button>
|
||||||
|
<button @click="closeModal" class="close-modal-btn">Cancel</button>
|
||||||
|
</div>
|
||||||
|
</Dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import {ref, watch, computed, PropType} from 'vue';
|
||||||
|
import Button from "primevue/button";
|
||||||
|
import Dialog from "primevue/dialog";
|
||||||
|
import SelectButton from "primevue/selectbutton";
|
||||||
|
import {Category, CategoryType} from '@/models/Category';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Dialog,
|
||||||
|
Button, SelectButton
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
show: Boolean,
|
||||||
|
categoryTypes: Object as PropType<CategoryType[]>,
|
||||||
|
category: Object as PropType<Category | null>, // Категория для редактирования (null, если создание)
|
||||||
|
},
|
||||||
|
emits: ['saveCategory', 'close-modal'],
|
||||||
|
setup(props, {emit}) {
|
||||||
|
const icon = ref('🐱');
|
||||||
|
const name = ref('');
|
||||||
|
const description = ref('');
|
||||||
|
const showEmojiPicker = ref(false);
|
||||||
|
const categoryType = ref(props.category?.type || props.categoryTypes[0]); // Тип по умолчанию
|
||||||
|
const isEditing = computed(() => !!props.category); // Если есть категория, значит редактирование
|
||||||
|
|
||||||
|
|
||||||
|
// Если мы редактируем категорию, заполняем поля данными
|
||||||
|
watch(() => props.category, (newCategory) => {
|
||||||
|
if (newCategory) {
|
||||||
|
name.value = newCategory.name;
|
||||||
|
description.value = newCategory.description;
|
||||||
|
icon.value = newCategory.icon;
|
||||||
|
categoryType.value = newCategory.type;
|
||||||
|
} else {
|
||||||
|
resetForm(); // Сбрасываем форму, если не редактируем
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const emojis = ['😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂', '🙃', '😉', '😊', '😇', '😍', '🥰', '😘'];
|
||||||
|
|
||||||
|
const toggleEmojiPicker = () => {
|
||||||
|
showEmojiPicker.value = !showEmojiPicker.value;
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectEmoji = (emoji: string) => {
|
||||||
|
icon.value = emoji;
|
||||||
|
showEmojiPicker.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveCategory = () => {
|
||||||
|
const categoryData = new Category(categoryType.value, name.value, description.value, icon.value);
|
||||||
|
if (isEditing.value && props.category) {
|
||||||
|
categoryData.id = props.category.id; // Сохраняем ID при редактировании
|
||||||
|
}
|
||||||
|
emit('saveCategory', categoryData);
|
||||||
|
resetForm();
|
||||||
|
closeModal();
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeModal = () => {
|
||||||
|
emit('close-modal');
|
||||||
|
resetForm();
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetForm = () => {
|
||||||
|
name.value = '';
|
||||||
|
description.value = '';
|
||||||
|
icon.value = '🐱';
|
||||||
|
categoryType.value = 'EXPENSE';
|
||||||
|
showEmojiPicker.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
return {
|
||||||
|
icon,
|
||||||
|
name,
|
||||||
|
description,
|
||||||
|
showEmojiPicker,
|
||||||
|
categoryType,
|
||||||
|
emojis,
|
||||||
|
toggleEmojiPicker,
|
||||||
|
selectEmoji,
|
||||||
|
saveCategory,
|
||||||
|
closeModal,
|
||||||
|
isEditing
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-group {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.create-category-btn {
|
||||||
|
background-color: #1abc9c;
|
||||||
|
color: white;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.create-category-btn:hover {
|
||||||
|
background-color: #16a085;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-modal-btn {
|
||||||
|
background-color: #e74c3c;
|
||||||
|
color: white;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-modal-btn:hover {
|
||||||
|
background-color: #c0392b;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
233
src/components/settings/recurrent/CreateRecurrentModal.vue
Normal file
233
src/components/settings/recurrent/CreateRecurrentModal.vue
Normal file
@@ -0,0 +1,233 @@
|
|||||||
|
<template>
|
||||||
|
<Dialog :visible="show" modal :header="isEditing ? 'Edit Recurrent Payment' : 'Create Recurrent Payment'"
|
||||||
|
:closable="true" class="!w-1/3">
|
||||||
|
<div v-if="loading">
|
||||||
|
Loading...
|
||||||
|
</div>
|
||||||
|
<div v-else class="p-fluid flex flex-col gap-6 w-full py-6 items-start">
|
||||||
|
<!-- Название -->
|
||||||
|
<FloatLabel class="w-full">
|
||||||
|
<label for="paymentName">Payment Name</label>
|
||||||
|
<InputText v-model="name" id="paymentName" class="!w-full"/>
|
||||||
|
</FloatLabel>
|
||||||
|
|
||||||
|
<!-- Категория -->
|
||||||
|
<div class="relative w-full justify-center justify-items-center ">
|
||||||
|
<div class="flex flex-col justify-items-center gap-2">
|
||||||
|
<SelectButton v-model="selectedCategoryType" :options="categoryTypes" optionLabel="name"
|
||||||
|
aria-labelledby="basic"
|
||||||
|
@change="categoryTypeChanged(selectedCategoryType.code)" class="justify-center"/>
|
||||||
|
<button class="border border-gray-300 rounded-lg w-full z-50"
|
||||||
|
@click="isCategorySelectorOpened = !isCategorySelectorOpened">
|
||||||
|
<div class="flex flex-row items-center pe-4 py-2 gap-4">
|
||||||
|
<div class="flex flex-row justify-between w-full px-4">
|
||||||
|
<p class="text-6xl font-bold text-gray-700 dark:text-gray-400">{{ selectedCategory.icon }}</p>
|
||||||
|
<div class="flex flex-col items-start justify-items-start justify-around w-full">
|
||||||
|
<p class="font-bold text-start">{{ selectedCategory.name }}</p>
|
||||||
|
<p class="font-light line-clamp-1 items-start text-start">{{ selectedCategory.description }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span :class="{'rotate-90': isCategorySelectorOpened}"
|
||||||
|
class="pi pi-angle-right transition-transform duration-300 text-5xl"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Анимированное открытие списка категорий -->
|
||||||
|
<div v-show="isCategorySelectorOpened"
|
||||||
|
class="absolute left-0 right-0 top-full overflow-hidden z-50 border-b-4 border-x rounded-b-lg bg-white shadow-lg transition-all duration-500"
|
||||||
|
:class="{ 'max-h-0': !isCategorySelectorOpened, 'max-h-[500px]': isCategorySelectorOpened }">
|
||||||
|
<div class="grid grid-cols-2 mt-2">
|
||||||
|
<button v-for="category in selectedCategoryType.code == 'EXPENSE' ? expenseCategories : incomeCategories"
|
||||||
|
:key="category.id" class="border rounded-lg mx-2 mb-2"
|
||||||
|
@click="selectCategory(category)">
|
||||||
|
<div class="flex flex-row justify-between w-full px-2">
|
||||||
|
<p class="text-4xl font-bold text-gray-700 dark:text-gray-400">{{ category.icon }}</p>
|
||||||
|
<div class="flex flex-col items-start justify-items-start justify-around w-full">
|
||||||
|
<p class="font-bold text-start">{{ category.name }}</p>
|
||||||
|
<p class="font-light line-clamp-1 text-start">{{ category.description }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Описание -->
|
||||||
|
<FloatLabel class="w-full">
|
||||||
|
<label for="description">Description</label>
|
||||||
|
<Textarea v-model="description" id="description" rows="3"/>
|
||||||
|
</FloatLabel>
|
||||||
|
|
||||||
|
<!-- Дата повторения (выпадающий список) -->
|
||||||
|
<div class="w-full relative">
|
||||||
|
<button class="border border-gray-300 rounded-lg w-full z-50"
|
||||||
|
@click="isDaySelectorOpened = !isDaySelectorOpened">
|
||||||
|
<div class="flex flex-row items-center pe-4 py-2 gap-4">
|
||||||
|
<div class="flex flex-row justify-between w-full px-4">
|
||||||
|
<p class="font-bold">Повторять каждый {{ repeatDay || 'N' }} день месяца</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span :class="{'rotate-90': isDaySelectorOpened}"
|
||||||
|
class="pi pi-angle-right transition-transform duration-300 text-5xl"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Анимированное открытие списка дней -->
|
||||||
|
<div v-show="isDaySelectorOpened"
|
||||||
|
class="absolute left-0 right-0 top-full overflow-hidden z-50 border-b-4 border-x rounded-b-lg bg-white shadow-lg transition-all duration-500"
|
||||||
|
:class="{ 'max-h-0': !isDaySelectorOpened, 'max-h-[500px]': isDaySelectorOpened }">
|
||||||
|
<div class="grid grid-cols-7 p-2">
|
||||||
|
<button v-for="day in days" :key="day" class=" border"
|
||||||
|
@click="selectDay(day)">
|
||||||
|
{{ day }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Сумма -->
|
||||||
|
<InputGroup class="w-full">
|
||||||
|
<InputGroupAddon>₽</InputGroupAddon>
|
||||||
|
<InputNumber v-model="amount" placeholder="Amount"/>
|
||||||
|
<InputGroupAddon>.00</InputGroupAddon>
|
||||||
|
</InputGroup>
|
||||||
|
|
||||||
|
<!-- Кнопки -->
|
||||||
|
<div class="flex justify-content-end gap-2 mt-4">
|
||||||
|
<Button label="Save" icon="pi pi-check" @click="savePayment" class="p-button-success"/>
|
||||||
|
<Button label="Cancel" icon="pi pi-times" @click="closeModal" class="p-button-secondary"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {ref, watch, computed, defineEmits} from 'vue';
|
||||||
|
import Button from 'primevue/button';
|
||||||
|
import InputText from 'primevue/inputtext';
|
||||||
|
import InputNumber from 'primevue/inputnumber';
|
||||||
|
import Textarea from "primevue/textarea";
|
||||||
|
|
||||||
|
import Dialog from 'primevue/dialog';
|
||||||
|
import FloatLabel from 'primevue/floatlabel';
|
||||||
|
import InputGroup from 'primevue/inputgroup';
|
||||||
|
import InputGroupAddon from "primevue/inputgroupaddon";
|
||||||
|
import SelectButton from 'primevue/selectbutton';
|
||||||
|
import {saveRecurrentPayment} from "@/services/recurrentService";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
show: Boolean, // Показать/скрыть модальное окно
|
||||||
|
expenseCategories: Array, // Внешние данные для списка категорий
|
||||||
|
incomeCategories: Array, // Внешние данные для списка категорий
|
||||||
|
categoryTypes: Array,
|
||||||
|
payment: Object | null // Для редактирования существующего платежа
|
||||||
|
})
|
||||||
|
|
||||||
|
const emits = defineEmits(["open-edit", "save-payment", "close-modal"]);
|
||||||
|
|
||||||
|
const loading = ref(false)
|
||||||
|
// Поля для формы
|
||||||
|
const name = ref('');
|
||||||
|
const selectedCategoryType = ref(props.payment ? props.payment.type : props.categoryTypes[0]);
|
||||||
|
const selectedCategory = ref(selectedCategoryType.code == 'EXPESE' ? props.expenseCategories[0] : props.incomeCategories[0]);
|
||||||
|
|
||||||
|
const categoryTypeChanged = (code) => {
|
||||||
|
|
||||||
|
selectedCategory.value = code == "EXPENSE" ? props.expenseCategories[0] : props.incomeCategories[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
const description = ref('');
|
||||||
|
const repeatDay = ref<number | null>(null);
|
||||||
|
const amount = ref<number | null>(null);
|
||||||
|
|
||||||
|
// Открытие/закрытие списка категорий
|
||||||
|
const isCategorySelectorOpened = ref(false);
|
||||||
|
const isDaySelectorOpened = ref(false);
|
||||||
|
|
||||||
|
// Список дней (1–31)
|
||||||
|
const days = Array.from({length: 31}, (_, i) => i + 1);
|
||||||
|
|
||||||
|
// Выбор дня
|
||||||
|
const selectDay = (day: number) => {
|
||||||
|
repeatDay.value = day;
|
||||||
|
isDaySelectorOpened.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Выбор категории
|
||||||
|
const selectCategory = (category) => {
|
||||||
|
isCategorySelectorOpened.value = false;
|
||||||
|
selectedCategory.value = category;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Определение, редактируем ли мы существующий платеж
|
||||||
|
const isEditing = computed(() => !!props.payment);
|
||||||
|
|
||||||
|
// Слушаем изменения, если редактируем существующий платеж
|
||||||
|
watch(() => props.payment, (newPayment) => {
|
||||||
|
if (newPayment) {
|
||||||
|
name.value = newPayment.name;
|
||||||
|
selectedCategory.value = newPayment.category;
|
||||||
|
description.value = newPayment.description;
|
||||||
|
repeatDay.value = newPayment.repeatDay;
|
||||||
|
amount.value = newPayment.amount;
|
||||||
|
} else {
|
||||||
|
resetForm();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Функция для сохранения платежа
|
||||||
|
const savePayment = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
const paymentData = {
|
||||||
|
name: name.value,
|
||||||
|
category: selectedCategory.value,
|
||||||
|
description: description.value,
|
||||||
|
atDay: repeatDay.value,
|
||||||
|
amount: amount.value
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isEditing.value && props.payment) {
|
||||||
|
paymentData.id = props.payment.id; // Если редактируем, сохраняем ID
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
await saveRecurrentPayment(paymentData)
|
||||||
|
loading.value = false
|
||||||
|
resetForm();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error saving payment:', error);
|
||||||
|
}
|
||||||
|
emits('save-payment', paymentData);
|
||||||
|
resetForm();
|
||||||
|
closeModal();
|
||||||
|
};
|
||||||
|
|
||||||
|
// Закрытие окна и сброс формы
|
||||||
|
const closeModal = () => {
|
||||||
|
emits('close-modal');
|
||||||
|
resetForm();
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetForm = () => {
|
||||||
|
name.value = '';
|
||||||
|
selectedCategory.value = props.expenseCategories[0];
|
||||||
|
description.value = '';
|
||||||
|
repeatDay.value = null;
|
||||||
|
amount.value = null;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* Плавная анимация поворота */
|
||||||
|
.rotate-90 {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Для анимации открытия высоты */
|
||||||
|
.overflow-hidden {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
138
src/components/settings/recurrent/RecurrentList.vue
Normal file
138
src/components/settings/recurrent/RecurrentList.vue
Normal file
@@ -0,0 +1,138 @@
|
|||||||
|
<!-- RecurrentPaymentsList.vue -->
|
||||||
|
<template>
|
||||||
|
<div v-if="loading" class="flex flex-col items-center justify-center h-full bg-gray-100 py-15">
|
||||||
|
Loading...
|
||||||
|
</div>
|
||||||
|
<div v-else class="flex flex-col items-center justify-center h-full bg-gray-100 py-15">
|
||||||
|
<!-- Заголовок -->
|
||||||
|
<h1 class="text-4xl font-extrabold mb-8 text-gray-800">Recurrent Payments</h1>
|
||||||
|
|
||||||
|
<!-- Список рекуррентных платежей -->
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 w-full max-w-7xl px-4">
|
||||||
|
<RecurrentListItem
|
||||||
|
v-for="payment in recurrentPayments"
|
||||||
|
:key="payment.id"
|
||||||
|
:payment="payment"
|
||||||
|
@edit-payment="editPayment"
|
||||||
|
@delete-payment="deletePayment"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="recurrent-card bg-white shadow-lg rounded-lg p-6 w-full transition duration-300 transform hover:scale-105">
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<div class="flex items-center w-full justify-center gap-4" style="height: 160px;">
|
||||||
|
|
||||||
|
<Button text class="flex-col" @click="toggleModal">
|
||||||
|
<i class="pi pi-plus-circle" style="font-size: 2.5rem"></i>
|
||||||
|
<p>Add new</p>
|
||||||
|
</Button>
|
||||||
|
<CreateRecurrentModal
|
||||||
|
:show="showModal"
|
||||||
|
:expenseCategories="expenseCategories"
|
||||||
|
:incomeCategories="incomeCategories"
|
||||||
|
:categoryTypes="categoryTypes"
|
||||||
|
@save-payment="savePayment"
|
||||||
|
@close-modal="toggleModal"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {onMounted, ref} from 'vue';
|
||||||
|
// import RecurrentPaymentCard from './RecurrentPaymentCard.vue';
|
||||||
|
import RecurrentListItem from "@/components/settings/recurrent/RecurrentListItem.vue";
|
||||||
|
import Button from "primevue/button";
|
||||||
|
import {RecurrentPayment} from "@/models/Recurrent";
|
||||||
|
import {getRecurrentPayments} from "@/services/recurrentService";
|
||||||
|
import CreateRecurrentModal from "@/components/settings/recurrent/CreateRecurrentModal.vue";
|
||||||
|
import {Category, CategoryType} from "@/models/Category";
|
||||||
|
import {getCategories, getCategoryTypes} from "@/services/categoryService";
|
||||||
|
|
||||||
|
const loading = ref(true);
|
||||||
|
|
||||||
|
const showModal = ref(false);
|
||||||
|
|
||||||
|
const toggleModal = () => {
|
||||||
|
showModal.value = !showModal.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const recurrentPayments = ref<RecurrentPayment[]>([]);
|
||||||
|
const fetchRecurrentPayments = async () => {
|
||||||
|
// loading.value = true;
|
||||||
|
try {
|
||||||
|
console.log('loaded')
|
||||||
|
const result = await getRecurrentPayments();
|
||||||
|
recurrentPayments.value = result.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching recurrent payments:', error);
|
||||||
|
}
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
const categories = ref<Category[]>([]);
|
||||||
|
const expenseCategories = ref<Category[]>([]);
|
||||||
|
const incomeCategories = ref<Category[]>([]);
|
||||||
|
const categoryTypes = ref<CategoryType[]>([]);
|
||||||
|
const fetchCategories = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const categoriesResponse = await getCategories();
|
||||||
|
const categoryTypesResponse = await getCategoryTypes();
|
||||||
|
categories.value = categoriesResponse.data
|
||||||
|
expenseCategories.value = categoriesResponse.data.filter((category: Category) => category.type.code === 'EXPENSE');
|
||||||
|
incomeCategories.value = categoriesResponse.data.filter((category: Category) => category.type.code === 'INCOME');
|
||||||
|
categoryTypes.value = categoryTypesResponse.data
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching categories:', error);
|
||||||
|
}
|
||||||
|
loading.value = false
|
||||||
|
};
|
||||||
|
|
||||||
|
const savePayment = async () => {
|
||||||
|
|
||||||
|
// loading.value = true;
|
||||||
|
try {
|
||||||
|
// await saveRecurrentPayment(payment);
|
||||||
|
await fetchRecurrentPayments();
|
||||||
|
loading.value = false
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching categories:', error);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Обработчики событий
|
||||||
|
const editPayment = (payment: any) => {
|
||||||
|
console.log('Edit payment:', payment);
|
||||||
|
};
|
||||||
|
|
||||||
|
const deletePayment = (payment: any) => {
|
||||||
|
console.log('Delete payment:', payment);
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await fetchRecurrentPayments()
|
||||||
|
await fetchCategories()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.grid {
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-gray-800 {
|
||||||
|
color: #1f2937;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-gray-100 {
|
||||||
|
background-color: #f3f4f6;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
86
src/components/settings/recurrent/RecurrentListItem.vue
Normal file
86
src/components/settings/recurrent/RecurrentListItem.vue
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="payment.category.type.code == 'INCOME' ? 'from-green-100 to-green-50' : ' from-red-100 to-red-50' "
|
||||||
|
class="recurrent-card bg-gradient-to-r shadow-xl rounded-lg p-6 w-full hover:shadow-2xl transition duration-300 transform hover:scale-105">
|
||||||
|
<div class="flex flex-col gap-5 justify-between items-start">
|
||||||
|
<!-- Дата и Сумма -->
|
||||||
|
<div class="flex flex-row justify-between w-full items-center">
|
||||||
|
<div class="text-gray-500">
|
||||||
|
<strong class="text-3xl text-green-600">{{ payment.atDay }} </strong> числа
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<Button icon="pi pi-pencil" class="p-button-rounded p-button-text p-button-sm" @click="editPayment"/>
|
||||||
|
<Button icon="pi pi-trash" class="p-button-rounded p-button-text p-button-danger p-button-sm"
|
||||||
|
@click="deletePayment"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Категория и Описание -->
|
||||||
|
<div class="flex items-center gap-4 w-full justify-between">
|
||||||
|
<!-- Иконка категории -->
|
||||||
|
|
||||||
|
<!-- Информация о платеже -->
|
||||||
|
<div class="flex flex-row">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="text-4xl">{{ payment.category.icon }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<h2 class="text-xl font-semibold text-gray-800">{{ payment.name }}</h2>
|
||||||
|
<p class="text-sm text-gray-500 line-clamp-1">{{ payment.description }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
:class="payment.category.type.code == 'EXPENSE' ? 'text-red-700' : 'text-green-700'"
|
||||||
|
class="text-2xl font-bold line-clamp-1 ">{{ formatAmount(payment.amount) }} ₽
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Действия -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {defineProps, defineEmits, PropType} from 'vue';
|
||||||
|
import Button from 'primevue/button';
|
||||||
|
import {RecurrentPayment} from '@/models/Recurrent';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
payment: {
|
||||||
|
type: Object as PropType<RecurrentPayment>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const formatAmount = (amount: number) => {
|
||||||
|
return new Intl.NumberFormat('ru-RU').format(amount);
|
||||||
|
};
|
||||||
|
|
||||||
|
const emit = defineEmits(['edit-payment', 'delete-payment']);
|
||||||
|
|
||||||
|
const editPayment = () => {
|
||||||
|
emit('edit-payment', props.payment);
|
||||||
|
};
|
||||||
|
|
||||||
|
const deletePayment = () => {
|
||||||
|
emit('delete-payment', props.payment);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.recurrent-card {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
//background: linear-gradient(135deg, #f0fff4, #c6f6d5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recurrent-card:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
75
src/components/transactions/TransactionList.vue
Normal file
75
src/components/transactions/TransactionList.vue
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
|
||||||
|
import {computed, onMounted, ref} from "vue";
|
||||||
|
import BudgetTransactionView from "@/components/budgets/BudgetTransactionView.vue";
|
||||||
|
import IconField from "primevue/iconfield";
|
||||||
|
import InputIcon from "primevue/inputicon";
|
||||||
|
import InputText from "primevue/inputtext";
|
||||||
|
import {getTransactions} from "@/services/transactionService";
|
||||||
|
import {Transaction} from "@/models/Transaction";
|
||||||
|
import {useRoute} from "vue-router";
|
||||||
|
|
||||||
|
const loading = ref(false);
|
||||||
|
const searchText = ref("");
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const fetchCategories = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const response = await getTransactions('INSTANT');
|
||||||
|
transactions.value = response.data
|
||||||
|
console.log(transactions.value)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching categories:', error);
|
||||||
|
}
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const transactions = ref<Transaction[]>([])
|
||||||
|
|
||||||
|
const filteredTransactions = computed(() => {
|
||||||
|
if (searchText.value.length === 0) {
|
||||||
|
return transactions.value; // Return the full list when there's no search text
|
||||||
|
} else {
|
||||||
|
return transactions.value.filter(transaction => {
|
||||||
|
const search = searchText.value.toLowerCase();
|
||||||
|
return (
|
||||||
|
transaction.transaction.comment.toLowerCase().includes(search) ||
|
||||||
|
transaction.transaction.category.name.toLowerCase().includes(search)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await fetchCategories();
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="p-4">
|
||||||
|
<!-- Заголовок -->
|
||||||
|
<h2 class="text-4xl mb-6 mt-14 font-bold">Transaction list</h2>
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
<IconField>
|
||||||
|
<InputIcon class="pi pi-search"/>
|
||||||
|
<InputText v-model="searchText" placeholder="Search"></InputText>
|
||||||
|
</IconField>
|
||||||
|
{{route}}
|
||||||
|
<div class="mt-4">
|
||||||
|
<BudgetTransactionView class="mb-2" v-for="transaction in filteredTransactions" :transaction="transaction"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
22
src/main.ts
Normal file
22
src/main.ts
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
import './assets/main.css'
|
||||||
|
|
||||||
|
import { createApp } from 'vue';
|
||||||
|
import App from './App.vue';
|
||||||
|
import PrimeVue from 'primevue/config';
|
||||||
|
import 'primeicons/primeicons.css'
|
||||||
|
import Aura from '@primevue/themes/aura';
|
||||||
|
import router from './router';
|
||||||
|
import Ripple from "primevue/ripple";
|
||||||
|
import ToastService from 'primevue/toastservice'
|
||||||
|
|
||||||
|
const app = createApp(App);
|
||||||
|
app.use(router);
|
||||||
|
app.use(ToastService);
|
||||||
|
app.directive('ripple', Ripple);
|
||||||
|
app.use(PrimeVue, {
|
||||||
|
theme: {
|
||||||
|
preset: Aura
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
app.mount('#app');
|
||||||
28
src/models/Budget.ts
Normal file
28
src/models/Budget.ts
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
import {Transaction} from "@/models/Transaction";
|
||||||
|
import {Category, CategorySetting} from "@/models/Category";
|
||||||
|
|
||||||
|
export class BudgetInfo {
|
||||||
|
budget: Budget
|
||||||
|
plannedExpenses: [Transaction]
|
||||||
|
plannedIncomes: [Transaction]
|
||||||
|
transactions: [Transaction]
|
||||||
|
transactionCategoriesSums: []
|
||||||
|
totalIncomes: number
|
||||||
|
totalExpenses: number
|
||||||
|
chartData: [[]]
|
||||||
|
unplannedCategories: [BudgetCategory]
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export class Budget {
|
||||||
|
id: number
|
||||||
|
name: string
|
||||||
|
dateFrom: Date
|
||||||
|
dateTo: Date
|
||||||
|
createdAt: Date
|
||||||
|
}
|
||||||
|
|
||||||
|
export class BudgetCategory {
|
||||||
|
category: Category;
|
||||||
|
categorySetting: CategorySetting
|
||||||
|
}
|
||||||
38
src/models/Category.ts
Normal file
38
src/models/Category.ts
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
export class CategoryType {
|
||||||
|
code: string;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class CategorySettingType {
|
||||||
|
code: string;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export class Category {
|
||||||
|
id: number = null;
|
||||||
|
type: CategoryType;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
icon: string;
|
||||||
|
|
||||||
|
constructor(type: CategoryType, name: string, description: string, icon: string,) {
|
||||||
|
this.type = type;
|
||||||
|
this.name = name;
|
||||||
|
this.description = description;
|
||||||
|
this.icon = icon;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Метод, который возвращает краткое описание
|
||||||
|
getSummary(): string {
|
||||||
|
return `${this.name}: ${this.description}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export class CategorySetting {
|
||||||
|
type: CategorySettingType
|
||||||
|
settingValue: number
|
||||||
|
value: number
|
||||||
|
}
|
||||||
11
src/models/Recurrent.ts
Normal file
11
src/models/Recurrent.ts
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import {Category} from "@/models/Category";
|
||||||
|
|
||||||
|
export class RecurrentPayment {
|
||||||
|
public id: number;
|
||||||
|
public atDay: number;
|
||||||
|
public category: Category;
|
||||||
|
public name: string;
|
||||||
|
public description: string;
|
||||||
|
public amount: number;
|
||||||
|
public createdAt: Date;
|
||||||
|
}
|
||||||
24
src/models/Transaction.ts
Normal file
24
src/models/Transaction.ts
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
import {Category} from "@/models/Category";
|
||||||
|
|
||||||
|
export class Transaction {
|
||||||
|
id: number;
|
||||||
|
transactionType: TransactionType;
|
||||||
|
category: Category;
|
||||||
|
comment: string;
|
||||||
|
date: Date;
|
||||||
|
amount: number
|
||||||
|
isDone: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class TransactionCategoriesSum{
|
||||||
|
category: Category;
|
||||||
|
sum: number
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export class TransactionType {
|
||||||
|
code: string;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
13
src/plugins/axios.ts
Normal file
13
src/plugins/axios.ts
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
// src/plugins/axios.ts
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
// Создание экземпляра axios с базовым URL
|
||||||
|
const apiClient = axios.create({
|
||||||
|
baseURL: 'http://localhost:8000/api/v1',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export default apiClient;
|
||||||
30
src/router/index.ts
Normal file
30
src/router/index.ts
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
import {createRouter, createWebHistory} from 'vue-router';
|
||||||
|
import CategoriesList from '@/components/settings/categories/CategoriesList.vue';
|
||||||
|
import CreateCategoryModal from "@/components/settings/categories/CreateCategoryModal.vue";
|
||||||
|
import CategoryListItem from "@/components/settings/categories/CategoryListItem.vue"; // Импортируем новый компонент
|
||||||
|
import BudgetList from "../components/budgets/BudgetList.vue";
|
||||||
|
import BudgetView from "@/components/budgets/BudgetView.vue";
|
||||||
|
import SettingsView from "@/components/settings/SettingsView.vue";
|
||||||
|
import RecurrentList from "@/components/settings/recurrent/RecurrentList.vue";
|
||||||
|
import TransactionList from "@/components/transactions/TransactionList.vue";
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
|
||||||
|
{path: '/', name: 'Budgets', component: BudgetList},
|
||||||
|
{path: '/budgets', name: 'Budgets', component: BudgetList},
|
||||||
|
{path: '/budgets/:id', name: 'BudgetView', component: BudgetView},
|
||||||
|
{path: '/transactions/:mode*', name: 'Transaction List', component: TransactionList},
|
||||||
|
// {path: '/transactions/create', name: 'Transaction List', component: TransactionList},
|
||||||
|
{path: '/settings/', name: 'Settings', component: SettingsView},
|
||||||
|
{path: '/settings/categories', name: 'Categories', component: CategoriesList},
|
||||||
|
{path: '/settings/recurrents', name: 'Recurrent operations list', component: RecurrentList},
|
||||||
|
{path: '/settings/categories/create', name: "Categories Creation", component: CreateCategoryModal},// Добавляем новый маршрут
|
||||||
|
{path: '/settings/categories/one', name: "Categories Creation", component: CategoryListItem}// Добавляем новый маршрут
|
||||||
|
];
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(),
|
||||||
|
routes,
|
||||||
|
});
|
||||||
|
|
||||||
|
export default router;
|
||||||
27
src/services/budgetsService.ts
Normal file
27
src/services/budgetsService.ts
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
import apiClient from '@/plugins/axios';
|
||||||
|
import {BudgetCategory} from "@/models/Budget";
|
||||||
|
// Импортируете настроенный экземпляр axios
|
||||||
|
|
||||||
|
export const getBudgetInfo = async (budget_id: number) => {
|
||||||
|
console.log('getBudgetInfo');
|
||||||
|
let budgetInfo = await apiClient.get('/budgets/' + budget_id);
|
||||||
|
budgetInfo = budgetInfo.data;
|
||||||
|
|
||||||
|
budgetInfo.plannedExpenses.forEach(e => {
|
||||||
|
e.date = new Date(e.date)
|
||||||
|
})
|
||||||
|
|
||||||
|
budgetInfo.plannedIncomes.forEach(e => {
|
||||||
|
e.date = new Date(e.date)
|
||||||
|
})
|
||||||
|
|
||||||
|
budgetInfo.transactions.forEach(e => {
|
||||||
|
e.date = new Date(e.date)
|
||||||
|
})
|
||||||
|
return budgetInfo
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
export const updateBudgetCategoryRequest = async (budget_id, category: BudgetCategory) => {
|
||||||
|
await apiClient.put('/budgets/' + budget_id + '/category', category);
|
||||||
|
}
|
||||||
25
src/services/categoryService.ts
Normal file
25
src/services/categoryService.ts
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
// src/services/categoryService.ts
|
||||||
|
import apiClient from '@/plugins/axios';
|
||||||
|
import {Category} from "@/models/Category"; // Импортируете настроенный экземпляр axios
|
||||||
|
|
||||||
|
export const getCategories = async (type = null) => {
|
||||||
|
|
||||||
|
type = type ? type : ''
|
||||||
|
return await apiClient.get('/categories/?type=' + type);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getCategoryTypes = async () => {
|
||||||
|
return await apiClient.get('/categories/types/');
|
||||||
|
}
|
||||||
|
|
||||||
|
export const createCategory = async (category: Category) => {
|
||||||
|
return await apiClient.post('/categories', category);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const updateCategory = async (id: number, category: any) => {
|
||||||
|
return await apiClient.put(`/categories/${id}`, category);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const deleteCategory = async (id: number) => {
|
||||||
|
return await apiClient.delete(`/categories/${id}`);
|
||||||
|
};
|
||||||
30
src/services/recurrentService.ts
Normal file
30
src/services/recurrentService.ts
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
// src/services/recurrentyService.ts
|
||||||
|
import apiClient from '@/plugins/axios';
|
||||||
|
import { RecurrentPayment} from "@/models/Recurrent"; // Импортируете настроенный экземпляр axios
|
||||||
|
|
||||||
|
export const getRecurrentPayments = async () => {
|
||||||
|
console.log('getRecurrentPayments');
|
||||||
|
return await apiClient.get('/recurrents/');
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
export const saveRecurrentPayment = async (payment: RecurrentPayment) => {
|
||||||
|
console.log('saveRecurrentPayment');
|
||||||
|
return await apiClient.post('/recurrents/', payment)
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// export const getCategoryTypes = async () => {
|
||||||
|
// return await apiClient.get('/categories/types/');
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// export const createCategory = async (category: Category) => {
|
||||||
|
// return await apiClient.post('/categories', category);
|
||||||
|
// };
|
||||||
|
//
|
||||||
|
// export const updateCategory = async (id: number, category: any) => {
|
||||||
|
// return await apiClient.put(`/categories/${id}`, category);
|
||||||
|
// };
|
||||||
|
//
|
||||||
|
// export const deleteCategory = async (id: number) => {
|
||||||
|
// return await apiClient.delete(`/categories/${id}`);
|
||||||
|
// };
|
||||||
49
src/services/transactionService.ts
Normal file
49
src/services/transactionService.ts
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
import apiClient from '@/plugins/axios';
|
||||||
|
import {Transaction} from "@/models/Transaction";
|
||||||
|
import {format} from "date-fns";
|
||||||
|
// Импортируете настроенный экземпляр axios
|
||||||
|
|
||||||
|
export const getTransaction = async (transactionId: int) => {
|
||||||
|
return await apiClient.post(`/transactions/${transactionId}`,);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getTransactions = async (transaction_type = null, category_type = null, category_id = null) => {
|
||||||
|
const params = {};
|
||||||
|
|
||||||
|
// Add the parameters to the params object if they are not null
|
||||||
|
if (transaction_type) {
|
||||||
|
params.transaction_type = transaction_type;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (category_type) {
|
||||||
|
params.category_type = category_type;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (category_id) {
|
||||||
|
params.category_id = category_id;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Use axios to make the GET request, passing the params as the second argument
|
||||||
|
return await apiClient.get('/transactions/', {
|
||||||
|
params: params
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export const createTransactionRequest = async (transaction: Transaction) => {
|
||||||
|
transaction.date = format(transaction.date, 'yyyy-MM-dd')
|
||||||
|
return await apiClient.post('/transactions', transaction);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const updateTransactionRequest = async (transaction: Transaction) => {
|
||||||
|
const id = transaction.id
|
||||||
|
transaction.date = format(transaction.date, 'yyyy-MM-dd')
|
||||||
|
return await apiClient.put(`/transactions/${id}`, transaction);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const deleteTransactionRequest = async (id: number) => {
|
||||||
|
return await apiClient.delete(`/transactions/${id}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getTransactionTypes = async () => {
|
||||||
|
return await apiClient.get('/transactions/types/');
|
||||||
|
}
|
||||||
6
src/shims-vue.d.ts
vendored
Normal file
6
src/shims-vue.d.ts
vendored
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
/* eslint-disable */
|
||||||
|
declare module '*.vue' {
|
||||||
|
import type { DefineComponent } from 'vue'
|
||||||
|
const component: DefineComponent<{}, {}, any>
|
||||||
|
export default component
|
||||||
|
}
|
||||||
18
src/utils/utils.ts
Normal file
18
src/utils/utils.ts
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
export const formatAmount = (amount: number) => {
|
||||||
|
return new Intl.NumberFormat('ru-RU').format(amount);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const formatDate = (date) => {
|
||||||
|
const validDate = typeof date === 'string' ? new Date(date) : date;
|
||||||
|
|
||||||
|
// Проверяем, является ли validDate корректной датой
|
||||||
|
if (isNaN(validDate.getTime())) {
|
||||||
|
return 'Invalid Date'; // Если дата неверная, возвращаем текст ошибки
|
||||||
|
}
|
||||||
|
|
||||||
|
return validDate.toLocaleDateString('ru-RU', {
|
||||||
|
day: '2-digit',
|
||||||
|
month: '2-digit',
|
||||||
|
year: '2-digit',
|
||||||
|
});
|
||||||
|
}
|
||||||
17
tailwind.config.js
Normal file
17
tailwind.config.js
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: [
|
||||||
|
"./index.html",
|
||||||
|
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
spacing: {
|
||||||
|
'128': '38rem',
|
||||||
|
'136': '54rem',
|
||||||
|
'15': '60px',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [require('tailwindcss-primeui')],
|
||||||
|
}
|
||||||
42
tsconfig.json
Normal file
42
tsconfig.json
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"module": "esnext",
|
||||||
|
"strict": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"importHelpers": true,
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"allowJs": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"types": [
|
||||||
|
"webpack-env"
|
||||||
|
],
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"src/*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"lib": [
|
||||||
|
"esnext",
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"scripthost"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src/**/*.ts",
|
||||||
|
"src/**/*.tsx",
|
||||||
|
"src/**/*.vue",
|
||||||
|
"tests/**/*.ts",
|
||||||
|
"tests/**/*.tsx"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"node_modules"
|
||||||
|
]
|
||||||
|
}
|
||||||
16
vite.config.js
Normal file
16
vite.config.js
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user