mirror of
https://github.com/KarolChang/jm-expense-vue-ts.git
synced 2024-12-26 11:48:35 +00:00
push to master
This commit is contained in:
parent
a44de9fe2b
commit
311abdf014
2
.firebase/hosting.cHVibGlj.cache
Normal file
2
.firebase/hosting.cHVibGlj.cache
Normal file
@ -0,0 +1,2 @@
|
||||
index.html,1639197671433,cb28bcedfa5298c2ddee09c62c272657328775ae951e372209d166f505c798ad
|
||||
favicon.ico,1639122716339,682d6968805db4fd6e11e95e9dc02ab78ae1a5e4cbb7d73cd9c2a192e839ceae
|
||||
5
.firebaserc
Normal file
5
.firebaserc
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"projects": {
|
||||
"default": "jm-expense"
|
||||
}
|
||||
}
|
||||
26
deploy.sh
Executable file
26
deploy.sh
Executable file
@ -0,0 +1,26 @@
|
||||
#!/usr/bin/env sh
|
||||
|
||||
# abort on errors
|
||||
set -e
|
||||
|
||||
# build
|
||||
npm run build
|
||||
|
||||
# navigate into the build output directory
|
||||
cd dist
|
||||
|
||||
# if you are deploying to a custom domain
|
||||
# echo 'www.example.com' > CNAME
|
||||
|
||||
git init
|
||||
git add -A
|
||||
git commit -m 'deploy'
|
||||
|
||||
# if you are deploying to https://<USERNAME>.github.io
|
||||
# git push -f https://github.com/<USERNAME>/<USERNAME>.GitHub.io.git master
|
||||
|
||||
# if you are deploying to https://<USERNAME>.Github.io/<REPO>
|
||||
# git push -f https://github.com/<USERNAME>/<REPO>.git master:gh-pages
|
||||
git push -f https://github.com/KarolChang/jm-expense-vue-ts.git master:gh-pages
|
||||
|
||||
cd -
|
||||
12
firebase.json
Normal file
12
firebase.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"hosting": {
|
||||
"public": "dist",
|
||||
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
|
||||
"rewrites": [
|
||||
{
|
||||
"source": "**",
|
||||
"destination": "/index.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
192
package-lock.json
generated
192
package-lock.json
generated
@ -8,7 +8,12 @@
|
||||
"name": "jm-expense-vue-ts",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"axios": "^0.24.0",
|
||||
"bootstrap": "^5.1.3",
|
||||
"core-js": "^3.6.5",
|
||||
"dotenv": "^10.0.0",
|
||||
"pinia": "^2.0.6",
|
||||
"sweetalert2": "^11.3.0",
|
||||
"vue": "^3.0.0",
|
||||
"vue-class-component": "^8.0.0-0",
|
||||
"vue-router": "^4.0.0-0"
|
||||
@ -1749,6 +1754,16 @@
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/@popperjs/core": {
|
||||
"version": "2.11.0",
|
||||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.0.tgz",
|
||||
"integrity": "sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ==",
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/popperjs"
|
||||
}
|
||||
},
|
||||
"node_modules/@soda/friendly-errors-webpack-plugin": {
|
||||
"version": "1.8.1",
|
||||
"resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.1.tgz",
|
||||
@ -2970,6 +2985,15 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/cli-service/node_modules/dotenv": {
|
||||
"version": "8.6.0",
|
||||
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
|
||||
"integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/cli-shared-utils": {
|
||||
"version": "4.5.15",
|
||||
"resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-4.5.15.tgz",
|
||||
@ -3840,6 +3864,14 @@
|
||||
"integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "0.24.0",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
|
||||
"integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.14.4"
|
||||
}
|
||||
},
|
||||
"node_modules/babel-code-frame": {
|
||||
"version": "6.26.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
|
||||
@ -4197,6 +4229,18 @@
|
||||
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/bootstrap": {
|
||||
"version": "5.1.3",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
|
||||
"integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/bootstrap"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@popperjs/core": "^2.10.2"
|
||||
}
|
||||
},
|
||||
"node_modules/brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||
@ -6410,10 +6454,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/dotenv": {
|
||||
"version": "8.6.0",
|
||||
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
|
||||
"integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
|
||||
"dev": true,
|
||||
"version": "10.0.0",
|
||||
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
|
||||
"integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
@ -7639,7 +7682,6 @@
|
||||
"version": "1.14.6",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.6.tgz",
|
||||
"integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
@ -11476,6 +11518,56 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/pinia": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.6.tgz",
|
||||
"integrity": "sha512-01mP4+KapIcTNSYLhQESy6GW0N8vY5wX3UqOwkC87e7DPjEusNJ8bENrKqdvZaRHbB2rDMOONeAbwMa3+n1/rw==",
|
||||
"dependencies": {
|
||||
"@vue/devtools-api": "^6.0.0-beta.20.1",
|
||||
"vue-demi": "*"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/posva"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.4.0",
|
||||
"typescript": ">=4.4.4",
|
||||
"vue": "^2.6.14 || ^3.2.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
},
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/pinia/node_modules/vue-demi": {
|
||||
"version": "0.12.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.1.tgz",
|
||||
"integrity": "sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==",
|
||||
"hasInstallScript": true,
|
||||
"bin": {
|
||||
"vue-demi-fix": "bin/vue-demi-fix.js",
|
||||
"vue-demi-switch": "bin/vue-demi-switch.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.0.0-rc.1",
|
||||
"vue": "^3.0.0-0 || ^2.6.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/pinkie": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
|
||||
@ -14184,6 +14276,14 @@
|
||||
"boolbase": "~1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/sweetalert2": {
|
||||
"version": "11.3.0",
|
||||
"resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.3.0.tgz",
|
||||
"integrity": "sha512-C0TFp0VLxgx+PmhJ0mL8qzx+iYjnCLdDbvQHKY6KAGI+xwawMvLkStPgw2LmJl6itaDhR/qLQStPFIbr1VK9Ow==",
|
||||
"funding": {
|
||||
"url": "https://sweetalert2.github.io/#donations"
|
||||
}
|
||||
},
|
||||
"node_modules/table": {
|
||||
"version": "5.4.6",
|
||||
"resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
|
||||
@ -14855,7 +14955,7 @@
|
||||
"version": "4.1.6",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.6.tgz",
|
||||
"integrity": "sha512-pxnwLxeb/Z5SP80JDRzVjh58KsM6jZHRAOtTpS7sXLS4ogXNKC9ANxHHZqLLeVHZN35jCtI4JdmLLbLiC1kBow==",
|
||||
"dev": true,
|
||||
"devOptional": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
@ -17840,6 +17940,12 @@
|
||||
"fastq": "^1.6.0"
|
||||
}
|
||||
},
|
||||
"@popperjs/core": {
|
||||
"version": "2.11.0",
|
||||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.0.tgz",
|
||||
"integrity": "sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ==",
|
||||
"peer": true
|
||||
},
|
||||
"@soda/friendly-errors-webpack-plugin": {
|
||||
"version": "1.8.1",
|
||||
"resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.1.tgz",
|
||||
@ -18699,7 +18805,8 @@
|
||||
"version": "4.5.15",
|
||||
"resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.15.tgz",
|
||||
"integrity": "sha512-fqap+4HN+w+InDxlA3hZTOGE0tzBTgXhKLoDydhywqgmhQ1D9JA6Feh94ze6tG8DsWX58/ujYUqA8jAz17FJtg==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"@vue/cli-service": {
|
||||
"version": "4.5.15",
|
||||
@ -18763,6 +18870,14 @@
|
||||
"webpack-chain": "^6.4.0",
|
||||
"webpack-dev-server": "^3.11.0",
|
||||
"webpack-merge": "^4.2.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"dotenv": {
|
||||
"version": "8.6.0",
|
||||
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
|
||||
"integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"@vue/cli-shared-utils": {
|
||||
@ -18925,7 +19040,8 @@
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
|
||||
"integrity": "sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"@vue/reactivity": {
|
||||
"version": "3.2.24",
|
||||
@ -19193,7 +19309,8 @@
|
||||
"version": "5.3.2",
|
||||
"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
|
||||
"integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"acorn-walk": {
|
||||
"version": "7.2.0",
|
||||
@ -19223,13 +19340,15 @@
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
|
||||
"integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"ajv-keywords": {
|
||||
"version": "3.5.2",
|
||||
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
|
||||
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"alphanum-sort": {
|
||||
"version": "1.0.2",
|
||||
@ -19496,6 +19615,14 @@
|
||||
"integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
|
||||
"dev": true
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.24.0",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
|
||||
"integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
|
||||
"requires": {
|
||||
"follow-redirects": "^1.14.4"
|
||||
}
|
||||
},
|
||||
"babel-code-frame": {
|
||||
"version": "6.26.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
|
||||
@ -19788,6 +19915,12 @@
|
||||
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
|
||||
"dev": true
|
||||
},
|
||||
"bootstrap": {
|
||||
"version": "5.1.3",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
|
||||
"integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
|
||||
"requires": {}
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||
@ -21573,10 +21706,9 @@
|
||||
}
|
||||
},
|
||||
"dotenv": {
|
||||
"version": "8.6.0",
|
||||
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
|
||||
"integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
|
||||
"dev": true
|
||||
"version": "10.0.0",
|
||||
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
|
||||
"integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q=="
|
||||
},
|
||||
"dotenv-expand": {
|
||||
"version": "5.1.0",
|
||||
@ -22567,8 +22699,7 @@
|
||||
"follow-redirects": {
|
||||
"version": "1.14.6",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.6.tgz",
|
||||
"integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A==",
|
||||
"dev": true
|
||||
"integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A=="
|
||||
},
|
||||
"for-in": {
|
||||
"version": "1.0.2",
|
||||
@ -25566,6 +25697,23 @@
|
||||
"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
|
||||
"dev": true
|
||||
},
|
||||
"pinia": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.6.tgz",
|
||||
"integrity": "sha512-01mP4+KapIcTNSYLhQESy6GW0N8vY5wX3UqOwkC87e7DPjEusNJ8bENrKqdvZaRHbB2rDMOONeAbwMa3+n1/rw==",
|
||||
"requires": {
|
||||
"@vue/devtools-api": "^6.0.0-beta.20.1",
|
||||
"vue-demi": "*"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue-demi": {
|
||||
"version": "0.12.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.1.tgz",
|
||||
"integrity": "sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==",
|
||||
"requires": {}
|
||||
}
|
||||
}
|
||||
},
|
||||
"pinkie": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
|
||||
@ -27847,6 +27995,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"sweetalert2": {
|
||||
"version": "11.3.0",
|
||||
"resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.3.0.tgz",
|
||||
"integrity": "sha512-C0TFp0VLxgx+PmhJ0mL8qzx+iYjnCLdDbvQHKY6KAGI+xwawMvLkStPgw2LmJl6itaDhR/qLQStPFIbr1VK9Ow=="
|
||||
},
|
||||
"table": {
|
||||
"version": "5.4.6",
|
||||
"resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
|
||||
@ -28369,7 +28522,7 @@
|
||||
"version": "4.1.6",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.6.tgz",
|
||||
"integrity": "sha512-pxnwLxeb/Z5SP80JDRzVjh58KsM6jZHRAOtTpS7sXLS4ogXNKC9ANxHHZqLLeVHZN35jCtI4JdmLLbLiC1kBow==",
|
||||
"dev": true
|
||||
"devOptional": true
|
||||
},
|
||||
"uglify-js": {
|
||||
"version": "3.4.10",
|
||||
@ -28734,7 +28887,8 @@
|
||||
"vue-class-component": {
|
||||
"version": "8.0.0-rc.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-8.0.0-rc.1.tgz",
|
||||
"integrity": "sha512-w1nMzsT/UdbDAXKqhwTmSoyuJzUXKrxLE77PCFVuC6syr8acdFDAq116xgvZh9UCuV0h+rlCtxXolr3Hi3HyPQ=="
|
||||
"integrity": "sha512-w1nMzsT/UdbDAXKqhwTmSoyuJzUXKrxLE77PCFVuC6syr8acdFDAq116xgvZh9UCuV0h+rlCtxXolr3Hi3HyPQ==",
|
||||
"requires": {}
|
||||
},
|
||||
"vue-eslint-parser": {
|
||||
"version": "7.11.0",
|
||||
|
||||
13
package.json
13
package.json
@ -8,7 +8,12 @@
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.24.0",
|
||||
"bootstrap": "^5.1.3",
|
||||
"core-js": "^3.6.5",
|
||||
"dotenv": "^10.0.0",
|
||||
"pinia": "^2.0.6",
|
||||
"sweetalert2": "^11.3.0",
|
||||
"vue": "^3.0.0",
|
||||
"vue-class-component": "^8.0.0-0",
|
||||
"vue-router": "^4.0.0-0"
|
||||
@ -41,7 +46,13 @@
|
||||
"parserOptions": {
|
||||
"parser": "@typescript-eslint/parser"
|
||||
},
|
||||
"rules": {}
|
||||
"rules": {},
|
||||
"globals": {
|
||||
"defineProps": "readonly",
|
||||
"defineEmits": "readonly",
|
||||
"defineExpose": "readonly",
|
||||
"withDefaults": "readonly"
|
||||
}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
|
||||
26
public/404.html
Normal file
26
public/404.html
Normal file
@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<script src="https://kit.fontawesome.com/ccfd93e9a7.js" crossorigin="anonymous"></script>
|
||||
<script>
|
||||
sessionStorage.redirect = location.href;
|
||||
</script>
|
||||
<meta http-equiv="refresh" content="0;URL='/jm-expense-vue-ts'"></meta>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong
|
||||
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please
|
||||
enable it to continue.</strong
|
||||
>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 59 KiB |
@ -1,15 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<meta charset="utf-8" />
|
||||
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<script src="https://kit.fontawesome.com/ccfd93e9a7.js" crossorigin="anonymous"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
;(function () {
|
||||
let redirect = sessionStorage.redirect
|
||||
delete sessionStorage.redirect
|
||||
if (redirect && redirect !== location.href) {
|
||||
history.replaceState(null, null, redirect)
|
||||
}
|
||||
})()
|
||||
</script>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
<strong
|
||||
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please
|
||||
enable it to continue.</strong
|
||||
>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
|
||||
74
src/App.vue
74
src/App.vue
@ -1,30 +1,82 @@
|
||||
<script setup lang="ts">
|
||||
import Navbar from './components/Navbar.vue'
|
||||
// import { useStore } from './store/index'
|
||||
// const store = useStore()
|
||||
// const getRecords = store.fetchRecords
|
||||
// getRecords()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="nav">
|
||||
<router-link to="/">Home</router-link> |
|
||||
<router-link to="/about">About</router-link>
|
||||
<div>
|
||||
<Navbar>
|
||||
<template #main>
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition name="fade-fast" mode="out-in">
|
||||
<component :is="Component" />
|
||||
</transition>
|
||||
</router-view>
|
||||
</template>
|
||||
</Navbar>
|
||||
</div>
|
||||
<router-view/>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap');
|
||||
|
||||
body {
|
||||
background-image: url('https://png.pngtree.com/thumb_back/fh260/background/20190222/ourmid/pngtree-minimalistic-cat-claws-seamless-background-design-backgroundpinkcat-clawseamless-backgroundbanner-image_57663.jpg');
|
||||
}
|
||||
|
||||
/* .is-primary {
|
||||
color: hsl(150, 50%, 50%);
|
||||
} */
|
||||
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
font-family: 'Zen Maru Gothic', sans-serif;
|
||||
}
|
||||
|
||||
#nav {
|
||||
padding: 30px;
|
||||
/* transition */
|
||||
.slide-x-enter-active {
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
|
||||
#nav a {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
.slide-x-leave-active {
|
||||
transition: transform 0.2s ease-in;
|
||||
}
|
||||
|
||||
#nav a.router-link-exact-active {
|
||||
color: #42b983;
|
||||
.slide-x-enter-from {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
.slide-x-enter-to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.slide-x-leave-from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
.slide-x-leave-to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.fade-fast-enter-active,
|
||||
.fade-fast-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.fade-fast-enter-from,
|
||||
.fade-fast-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.fade-fast-enter-active,
|
||||
.fade-fast-leave-active {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
27
src/apis/expense.ts
Normal file
27
src/apis/expense.ts
Normal file
@ -0,0 +1,27 @@
|
||||
import { apiHelper } from './helper'
|
||||
import { RecordInput } from '../models/Record'
|
||||
import { MessageInput } from '../models/LineBot'
|
||||
|
||||
export default {
|
||||
getAll() {
|
||||
return apiHelper.get('/record/all')
|
||||
},
|
||||
getOne(id: number) {
|
||||
return apiHelper.get(`/record/${id}`)
|
||||
},
|
||||
create(data: RecordInput) {
|
||||
return apiHelper.post('/record/create', data)
|
||||
},
|
||||
edit(id: number, data: RecordInput) {
|
||||
return apiHelper.put(`/record/edit/${id}`, data)
|
||||
},
|
||||
close(data: { records: string; totalAmount: number; recorder: string }) {
|
||||
return apiHelper.put('/close', data)
|
||||
},
|
||||
getLogs() {
|
||||
return apiHelper.get('/log/all')
|
||||
},
|
||||
pushLineMsg(data: { to: string[]; messages: MessageInput[] }) {
|
||||
return apiHelper.post('/lineBot/push', data)
|
||||
}
|
||||
}
|
||||
6
src/apis/helper.ts
Normal file
6
src/apis/helper.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const baseURL = 'http://jm-expense-mysql.herokuapp.com'
|
||||
export const apiHelper = axios.create({
|
||||
baseURL
|
||||
})
|
||||
BIN
src/assets/capoo.gif
Normal file
BIN
src/assets/capoo.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
src/assets/jianmiau-login.png
Normal file
BIN
src/assets/jianmiau-login.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 551 KiB |
BIN
src/assets/jianmiau.jpeg
Normal file
BIN
src/assets/jianmiau.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
BIN
src/assets/karol-login.png
Normal file
BIN
src/assets/karol-login.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 412 KiB |
BIN
src/assets/karol.png
Normal file
BIN
src/assets/karol.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
@ -1,61 +0,0 @@
|
||||
<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>
|
||||
26
src/components/Navbar.vue
Normal file
26
src/components/Navbar.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import Sidebar from './Sidebar.vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
const route = useRoute()
|
||||
|
||||
const sidebarOpen = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex">
|
||||
<transition name="slide-x">
|
||||
<Sidebar v-show="sidebarOpen" @open="sidebarOpen = false" />
|
||||
</transition>
|
||||
|
||||
<div class="m-2" style="width: 100vw">
|
||||
<div class="d-flex">
|
||||
<i class="fas fa-bars fa-2x" @click="sidebarOpen = !sidebarOpen"></i>
|
||||
<h4 class="ms-3">{{ route.meta.pageTitle }}</h4>
|
||||
</div>
|
||||
<div class="m-3">
|
||||
<slot name="main" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
94
src/components/Sidebar.vue
Normal file
94
src/components/Sidebar.vue
Normal file
@ -0,0 +1,94 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { routes } from '../router/index'
|
||||
import { useRoute, RouteRecordRaw } from 'vue-router'
|
||||
import { useStore } from '../store/index'
|
||||
import Swal from 'sweetalert2'
|
||||
import { ConfirmBox } from '../utils/swal'
|
||||
const route = useRoute()
|
||||
const store = useStore()
|
||||
const getUser = store.switchUser
|
||||
const emit = defineEmits(['open'])
|
||||
|
||||
const items = computed(() => {
|
||||
return routes.filter((route: RouteRecordRaw) => route.meta?.show)
|
||||
})
|
||||
|
||||
const changeItem = () => {
|
||||
emit('open', false)
|
||||
}
|
||||
|
||||
const switchModalOpen = async () => {
|
||||
const { value: user } = await ConfirmBox.fire({
|
||||
title: '切換使用者',
|
||||
input: 'select',
|
||||
inputOptions: { 建喵: '建喵', 豬涵: '豬涵' },
|
||||
inputPlaceholder: 'who are you?',
|
||||
showCancelButton: true
|
||||
})
|
||||
if (user) {
|
||||
getUser(user)
|
||||
Swal.fire(`使用者已切換至 [${user}]`)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark" style="width: 180px; height: 100vh">
|
||||
<router-link
|
||||
:to="{ name: 'Home' }"
|
||||
class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none"
|
||||
>
|
||||
<span class="fs-4"><i class="fas fa-star"></i> JM記帳 <i class="fas fa-star"></i></span>
|
||||
</router-link>
|
||||
<hr />
|
||||
<ul class="nav nav-pills flex-column mb-auto">
|
||||
<li class="nav-item" v-for="(item, index) in items" :key="index">
|
||||
<router-link
|
||||
:to="{ name: item.name }"
|
||||
:class="'nav-link ' + (item.name === route.name ? 'text-info' : 'text-white')"
|
||||
@click="changeItem"
|
||||
>{{ item.meta?.pageTitle }}</router-link
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<hr />
|
||||
<div class="dropdown">
|
||||
<a
|
||||
href="#"
|
||||
class="d-flex align-items-center text-white text-decoration-none dropdown-toggle"
|
||||
id="dropdownUser1"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<img
|
||||
v-if="store.currentUser === '建喵'"
|
||||
src="../assets/jianmiau-login.png"
|
||||
alt=""
|
||||
width="50"
|
||||
height="55"
|
||||
class="rounded-circle me-2"
|
||||
/>
|
||||
<img
|
||||
v-else-if="store.currentUser === '豬涵'"
|
||||
src="../assets/karol-login.png"
|
||||
alt=""
|
||||
width="50"
|
||||
height="55"
|
||||
class="rounded-circle me-2"
|
||||
/>
|
||||
<img v-else src="../assets/capoo.gif" alt="" width="50" height="55" class="rounded-circle me-2" />
|
||||
<strong>{{ store.currentUser ? store.currentUser : '未登入' }}</strong>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
|
||||
<!-- <li><a class="dropdown-item" href="#">New project...</a></li>
|
||||
<li><a class="dropdown-item" href="#">Settings</a></li>
|
||||
<li><a class="dropdown-item" href="#">Profile</a></li> -->
|
||||
<!-- <li><hr class="dropdown-divider" /></li> -->
|
||||
<li><a class="dropdown-item" @click="switchModalOpen">切換帳號</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
48
src/components/Spinner.vue
Normal file
48
src/components/Spinner.vue
Normal file
@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="spinner">
|
||||
<div class="bouncing-loader">
|
||||
<div />
|
||||
<div />
|
||||
<div />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.spinner {
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
.bouncing-loader {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bouncing-loader > div {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin: 3rem 0.2rem;
|
||||
background: #921aff;
|
||||
border-radius: 50%;
|
||||
animation: bouncing-loader 0.6s infinite alternate;
|
||||
}
|
||||
|
||||
.bouncing-loader > div:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.bouncing-loader > div:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes bouncing-loader {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0.1;
|
||||
transform: translateY(-1rem);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,9 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import { createPinia } from 'pinia'
|
||||
|
||||
createApp(App).use(router).mount('#app')
|
||||
import 'bootstrap'
|
||||
import 'bootstrap/dist/css/bootstrap.min.css'
|
||||
|
||||
createApp(App).use(router).use(createPinia()).mount('#app')
|
||||
|
||||
11
src/models/LineBot.ts
Normal file
11
src/models/LineBot.ts
Normal file
@ -0,0 +1,11 @@
|
||||
export interface MessageInput {
|
||||
type: string
|
||||
// text
|
||||
text?: string
|
||||
// sticker
|
||||
packageId?: string
|
||||
stickerId?: string
|
||||
// image or video
|
||||
originalContentUrl?: string
|
||||
previewImageUrl?: string
|
||||
}
|
||||
21
src/models/Log.ts
Normal file
21
src/models/Log.ts
Normal file
@ -0,0 +1,21 @@
|
||||
export type RecorderType = '建喵' | '豬涵'
|
||||
|
||||
export type ActionType = '新增' | '編輯' | '結算'
|
||||
|
||||
export class Log {
|
||||
recorder!: RecorderType
|
||||
action!: ActionType
|
||||
item?: string
|
||||
merchant?: string
|
||||
amount?: number
|
||||
date?: Date
|
||||
itemBefore?: string
|
||||
merchantBefore?: string
|
||||
amountBefore?: number
|
||||
dateBefore?: Date
|
||||
closeAmount?: number
|
||||
RecordId?: number
|
||||
RecordIds?: string
|
||||
createdAt!: Date
|
||||
updatedAt!: Date
|
||||
}
|
||||
23
src/models/Record.ts
Normal file
23
src/models/Record.ts
Normal file
@ -0,0 +1,23 @@
|
||||
export type RecorderType = '建喵' | '豬涵'
|
||||
|
||||
export class Record {
|
||||
id!: number
|
||||
date!: Date
|
||||
item?: string
|
||||
merchant?: string
|
||||
amount!: number
|
||||
recorder?: RecorderType
|
||||
isClosed?: boolean
|
||||
deletedAt?: Date | null
|
||||
createdAt!: Date
|
||||
updatedAt!: Date
|
||||
}
|
||||
|
||||
export class RecordInput {
|
||||
date!: Date
|
||||
item!: string
|
||||
merchant!: string
|
||||
amount!: string
|
||||
recorder?: RecorderType
|
||||
editor?: RecorderType
|
||||
}
|
||||
@ -1,16 +1,51 @@
|
||||
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
|
||||
import Home from '../views/Home.vue'
|
||||
const root = '/jm-expense-vue-ts'
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
export const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
component: Home
|
||||
redirect: `${root}/`
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'About',
|
||||
component: () => import('../views/About.vue')
|
||||
path: `${root}/`,
|
||||
name: 'Home',
|
||||
component: () => import('../views/Home.vue'),
|
||||
meta: {
|
||||
pageTitle: '首頁',
|
||||
show: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: `${root}/record`,
|
||||
name: 'Record',
|
||||
component: () => import('../views/Record.vue'),
|
||||
meta: {
|
||||
pageTitle: '未結算紀錄',
|
||||
show: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: `${root}/closedRecord`,
|
||||
name: 'ClosedRecord',
|
||||
component: () => import('../views/ClosedRecord.vue'),
|
||||
meta: {
|
||||
pageTitle: '已結算紀錄',
|
||||
show: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: `${root}/logs`,
|
||||
name: 'Logs',
|
||||
component: () => import('../views/Logs.vue'),
|
||||
meta: {
|
||||
pageTitle: '更動紀錄',
|
||||
show: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
name: 'NotFound',
|
||||
component: () => import('../views/NotFound.vue')
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
14
src/store/index.ts
Normal file
14
src/store/index.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useStore = defineStore('index', {
|
||||
state: () => ({
|
||||
currentUser: localStorage.getItem('jm-user')
|
||||
}),
|
||||
// getter: {}
|
||||
actions: {
|
||||
switchUser(user: string) {
|
||||
localStorage.setItem('jm-user', user)
|
||||
this.currentUser = user
|
||||
}
|
||||
}
|
||||
})
|
||||
18
src/utils/helper.ts
Normal file
18
src/utils/helper.ts
Normal file
@ -0,0 +1,18 @@
|
||||
export const showWeekDay = (date: Date) => {
|
||||
switch (new Date(date).getDay()) {
|
||||
case 1:
|
||||
return '一'
|
||||
case 2:
|
||||
return '二'
|
||||
case 3:
|
||||
return '三'
|
||||
case 4:
|
||||
return '四'
|
||||
case 5:
|
||||
return '五'
|
||||
case 6:
|
||||
return '六'
|
||||
case 0:
|
||||
return '日'
|
||||
}
|
||||
}
|
||||
13
src/utils/swal.ts
Normal file
13
src/utils/swal.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import Swal from 'sweetalert2'
|
||||
|
||||
export const Toast = Swal.mixin({
|
||||
toast: true,
|
||||
position: 'bottom-end',
|
||||
showConfirmButton: false,
|
||||
timer: 3000 // toast 停留多久
|
||||
})
|
||||
|
||||
export const ConfirmBox = Swal.mixin({
|
||||
showConfirmButton: true,
|
||||
showCancelButton: true
|
||||
})
|
||||
@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
181
src/views/ClosedRecord.vue
Normal file
181
src/views/ClosedRecord.vue
Normal file
@ -0,0 +1,181 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import recordAPI from '../apis/expense'
|
||||
import { Record } from '../models/Record'
|
||||
import { showWeekDay } from '../utils/helper'
|
||||
import Spinner from '../components/Spinner.vue'
|
||||
type SearchMode = '月份' | '日期'
|
||||
|
||||
// data
|
||||
const isLoading = ref<boolean>(true)
|
||||
const records = ref<Record[]>([])
|
||||
const searchMode = ref<SearchMode>('月份')
|
||||
const year = ref(new Date().getFullYear())
|
||||
const month = ref(new Date().getMonth() + 1)
|
||||
const startDate = ref<Date | string>('')
|
||||
const finishDate = ref<Date | string>('')
|
||||
|
||||
// methods
|
||||
const fetchRecords = async function () {
|
||||
try {
|
||||
const { data } = await recordAPI.getAll()
|
||||
records.value = data.filter((item: Record) => item.isClosed === true)
|
||||
isLoading.value = false
|
||||
} catch (error) {
|
||||
console.error('error', error)
|
||||
}
|
||||
}
|
||||
|
||||
const radioClick = (radio: SearchMode) => {
|
||||
searchMode.value = radio
|
||||
}
|
||||
|
||||
// computed
|
||||
const filteredRecord = computed(() => {
|
||||
if (searchMode.value === '月份') {
|
||||
return records.value?.filter(
|
||||
(item: Record) =>
|
||||
new Date(item.date).getFullYear() === year.value && new Date(item.date).getMonth() + 1 === month.value
|
||||
)
|
||||
} else {
|
||||
if (!startDate.value && !finishDate.value) return []
|
||||
if (startDate.value && !finishDate.value) {
|
||||
return records.value?.filter(
|
||||
(item: Record) => new Date(item.date).getTime() >= new Date(startDate.value).getTime()
|
||||
)
|
||||
} else if (!startDate.value && finishDate.value) {
|
||||
return records.value?.filter(
|
||||
(item: Record) => new Date(item.date).getTime() <= new Date(finishDate.value + ' 23:59:59').getTime()
|
||||
)
|
||||
} else {
|
||||
return records.value?.filter(
|
||||
(item: Record) =>
|
||||
new Date(item.date).getTime() >= new Date(startDate.value).getTime() &&
|
||||
new Date(item.date).getTime() <= new Date(finishDate.value + ' 23:59:59').getTime()
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// created
|
||||
fetchRecords()
|
||||
</script>
|
||||
<template>
|
||||
<div v-if="!isLoading">
|
||||
<div class="d-flex mb-4">
|
||||
<div class="m-2 me-5">
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
name="flexRadioDefault"
|
||||
id="flexRadioDefault1"
|
||||
@click="radioClick('月份')"
|
||||
checked
|
||||
/>
|
||||
<label class="form-check-label" for="flexRadioDefault1">月份搜尋</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
name="flexRadioDefault"
|
||||
id="flexRadioDefault2"
|
||||
@click="radioClick('日期')"
|
||||
/>
|
||||
<label class="form-check-label" for="flexRadioDefault2">日期搜尋</label>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="searchMode === '月份'">
|
||||
<div>
|
||||
<label for="year" class="form-label">西元年</label>
|
||||
<select class="form-select" aria-label="Default select example" v-model="year">
|
||||
<option v-for="n in 100" :key="n" :value="n + 2020">{{ n + 2020 }}年</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="ms-3">
|
||||
<label for="finishDate" class="form-label">月份</label>
|
||||
<select class="form-select" aria-label="Default select example" v-model="month">
|
||||
<option v-for="n in 12" :key="n" :value="n">{{ n }}月</option>
|
||||
</select>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div>
|
||||
<label for="startDate" class="form-label">開始日期</label>
|
||||
<input
|
||||
v-model="startDate"
|
||||
type="date"
|
||||
id="startDate"
|
||||
class="form-control"
|
||||
aria-describedby="passwordHelpInline"
|
||||
/>
|
||||
</div>
|
||||
<div class="ms-3">
|
||||
<label for="finishDate" class="form-label">結束日期</label>
|
||||
<input
|
||||
v-model="finishDate"
|
||||
type="date"
|
||||
id="finishDate"
|
||||
class="form-control"
|
||||
aria-describedby="passwordHelpInline"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<table class="table table-striped table-info table-hover" v-if="filteredRecord.length">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">項目</th>
|
||||
<th scope="col">商家</th>
|
||||
<th scope="col">金額</th>
|
||||
<th scope="col">日期</th>
|
||||
<th scope="col" id="column-item">首次記錄者</th>
|
||||
<th scope="col" id="column-item">首次記錄時間</th>
|
||||
<th scope="col" id="column-item">更新時間</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(record, index) in filteredRecord" :key="index">
|
||||
<td>
|
||||
{{ record.item }}
|
||||
</td>
|
||||
<td>
|
||||
{{ record.merchant }}
|
||||
</td>
|
||||
<td>
|
||||
{{ record.amount }}
|
||||
</td>
|
||||
<td>
|
||||
{{ new Date(record.date).toLocaleDateString() + ` (${showWeekDay(record.date)})` }}
|
||||
</td>
|
||||
<td id="column-item">
|
||||
{{ record.recorder }}
|
||||
</td>
|
||||
<td id="column-item">{{ new Date(record.createdAt).toLocaleString() }}</td>
|
||||
<td id="column-item">{{ new Date(record.updatedAt).toLocaleString() }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<img
|
||||
v-else
|
||||
class="img-fluid"
|
||||
src="https://memeprod.sgp1.digitaloceanspaces.com/user-wtf/1581909112681.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<Spinner v-else />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
#column-item {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,18 +1,137 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<img alt="Vue logo" src="../assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import recordAPI from '../apis/expense'
|
||||
// import lineBotAPI from '../apis/lineBot'
|
||||
import { Record } from '../models/Record'
|
||||
import Spinner from '../components/Spinner.vue'
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import HelloWorld from '@/components/HelloWorld.vue'
|
||||
class MonthData {
|
||||
total!: number
|
||||
closedAmount!: number
|
||||
rate!: number
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: {
|
||||
HelloWorld
|
||||
const isLoading = ref<boolean>(true)
|
||||
const records = ref<Record[]>([])
|
||||
const thisMonthData = ref<MonthData>(new MonthData())
|
||||
const lastMonthData = ref<MonthData>(new MonthData())
|
||||
|
||||
// methods
|
||||
const fetchRecords = async function () {
|
||||
try {
|
||||
const { data } = await recordAPI.getAll()
|
||||
records.value = data
|
||||
// monthData
|
||||
const nowYear = new Date().getFullYear()
|
||||
const nowMonth = new Date().getMonth() + 1
|
||||
thisMonthData.value = calculateMonthData(nowYear, nowMonth)
|
||||
lastMonthData.value = calculateMonthData(
|
||||
nowMonth - 1 === 0 ? nowYear - 1 : nowYear,
|
||||
nowMonth - 1 === 0 ? 12 : nowMonth - 1
|
||||
)
|
||||
isLoading.value = false
|
||||
} catch (error) {
|
||||
console.error('error', error)
|
||||
}
|
||||
}
|
||||
|
||||
// simple function
|
||||
const calculateMonthData = (year: number, month: number) => {
|
||||
const recordsArr = records.value?.filter(
|
||||
(record) => new Date(record.date).getFullYear() === year && new Date(record.date).getMonth() + 1 === month
|
||||
)
|
||||
let total = 0
|
||||
let closedAmount = 0
|
||||
for (let record of recordsArr) {
|
||||
total += record.amount
|
||||
if (record.isClosed === true) {
|
||||
closedAmount += record.amount
|
||||
}
|
||||
}
|
||||
let rate
|
||||
if (total === 0) {
|
||||
rate = 0
|
||||
} else {
|
||||
rate = Math.round(closedAmount / total) * 100
|
||||
}
|
||||
return {
|
||||
total,
|
||||
closedAmount,
|
||||
rate
|
||||
}
|
||||
}
|
||||
|
||||
// test
|
||||
// const btnClick = async function () {
|
||||
// try {
|
||||
// const input = { message: 'HELLO', userId: 'Ub3557f7c812e4e78293959fe4fccd414' }
|
||||
// const { data } = await lineBotAPI.pushMsg(input)
|
||||
// console.log('data', data)
|
||||
// } catch (error) {
|
||||
// console.error('error', error)
|
||||
// }
|
||||
// }
|
||||
|
||||
fetchRecords()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="!isLoading">
|
||||
<!-- <button class="btn btn-info" @click="btnClick">Message</button> -->
|
||||
|
||||
<div class="list-group list-group-checkable">
|
||||
<label class="list-group-item py-3 mb-3">
|
||||
<div class="row">
|
||||
<div class="col-8 text-start">
|
||||
<h4>
|
||||
本月總額 ＄<strong>{{ thisMonthData.total }}</strong>
|
||||
</h4>
|
||||
<div class="progress mt-2" style="height: 20px">
|
||||
<div
|
||||
class="progress-bar"
|
||||
role="progressbar"
|
||||
:style="`width: ${thisMonthData.rate}%`"
|
||||
:aria-valuenow="thisMonthData.rate"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
>
|
||||
{{ thisMonthData.rate }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 text-start">
|
||||
<div>未結算＄ {{ thisMonthData.total - thisMonthData.closedAmount }}</div>
|
||||
<div>已結算＄ {{ thisMonthData.closedAmount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="list-group-item py-3 mb-3">
|
||||
<div class="row">
|
||||
<div class="col-8 text-start">
|
||||
<h4>
|
||||
上月總額 ＄<strong>{{ lastMonthData.total }}</strong>
|
||||
</h4>
|
||||
<div class="progress mt-2" style="height: 20px">
|
||||
<div
|
||||
class="progress-bar"
|
||||
role="progressbar"
|
||||
:style="`width: ${lastMonthData.rate}%`"
|
||||
:aria-valuenow="lastMonthData.rate"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
>
|
||||
{{ lastMonthData.rate }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 text-start">
|
||||
<div>未結算＄ {{ lastMonthData.total - lastMonthData.closedAmount }}</div>
|
||||
<div>已結算＄ {{ lastMonthData.closedAmount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<Spinner v-else />
|
||||
</template>
|
||||
|
||||
217
src/views/Logs.vue
Normal file
217
src/views/Logs.vue
Normal file
@ -0,0 +1,217 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { showWeekDay } from '../utils/helper'
|
||||
import recordAPI from '../apis/expense'
|
||||
import { Log } from '../models/Log'
|
||||
import Swal from 'sweetalert2'
|
||||
import Spinner from '../components/Spinner.vue'
|
||||
|
||||
const tabs = [
|
||||
{ title: '總覽', btnColor: 'secondary' },
|
||||
{ title: '新增', btnColor: 'primary' },
|
||||
{ title: '編輯', btnColor: 'success' },
|
||||
{ title: '結算', btnColor: 'danger' }
|
||||
]
|
||||
const isLoading = ref(false)
|
||||
const logs = ref<Log[]>([])
|
||||
const nowTab = ref('總覽')
|
||||
|
||||
const filteredLogs = computed(() => {
|
||||
if (nowTab.value === '總覽') return logs.value
|
||||
return logs.value.filter((log) => log.action === nowTab.value)
|
||||
})
|
||||
|
||||
const fetchLogs = async function () {
|
||||
try {
|
||||
const { data } = await recordAPI.getLogs()
|
||||
logs.value = data
|
||||
isLoading.value = false
|
||||
} catch (error) {
|
||||
console.error('error', error)
|
||||
}
|
||||
}
|
||||
|
||||
const listIconClick = async (recordIds: string | undefined) => {
|
||||
if (!recordIds) return
|
||||
const recordIdArr = recordIds.split(',')
|
||||
const recordArr = []
|
||||
for (const id of recordIdArr) {
|
||||
const { data } = await recordAPI.getOne(Number(id))
|
||||
recordArr.push(data)
|
||||
}
|
||||
let html = `<table class="table"><thead><tr><th scope="col">項目</th><th scope="col">商家</th><th scope="col">金額</th><th scope="col">日期</th></tr></thead><tbody>`
|
||||
for (const id of recordIdArr) {
|
||||
const { data } = await recordAPI.getOne(Number(id))
|
||||
html += `<tr><td>${data.item}</td><td>${data.merchant}</td><td>${data.amount}</td><td>${new Date(
|
||||
data.date
|
||||
).toLocaleDateString()}</td></tr>`
|
||||
}
|
||||
html += `</tbody></table>${
|
||||
document.documentElement.scrollWidth >= 500 ? '' : '<style>table{font-size:0.5em;}</style>'
|
||||
}`
|
||||
await Swal.fire({
|
||||
title: '結算紀錄',
|
||||
html
|
||||
})
|
||||
}
|
||||
|
||||
fetchLogs()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="!isLoading && logs.length">
|
||||
<template v-if="logs.length">
|
||||
<div id="pc">
|
||||
<div class="btn-group mb-3" role="group" aria-label="Basic radio toggle button group">
|
||||
<template v-for="(tab, index) in tabs" :key="index">
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="btnradio"
|
||||
:id="tab.title"
|
||||
autocomplete="off"
|
||||
:checked="nowTab === tab.title"
|
||||
/>
|
||||
<label :class="`btn btn-outline-${tab.btnColor}`" :for="tab.title" @click="nowTab = tab.title">{{
|
||||
tab.title
|
||||
}}</label>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="row h-20 mb-3" v-for="(log, index) in filteredLogs" :key="index">
|
||||
<div class="col-2 mt-4">
|
||||
<div class="fw-bold">
|
||||
{{ new Date(log.createdAt).toLocaleDateString() + ` (${showWeekDay(log.createdAt)})` }}
|
||||
</div>
|
||||
<div class="fw-bold">{{ new Date(log.createdAt).toLocaleTimeString() }}</div>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<div class="bg-white border p-3">
|
||||
<div class="d-flex">
|
||||
<img
|
||||
v-if="log.recorder === '建喵'"
|
||||
src="../assets/jianmiau.jpeg"
|
||||
class="my-auto img-thumbnail me-2"
|
||||
width="60"
|
||||
height="60"
|
||||
/><img v-else src="../assets/karol.png" class="my-auto img-thumbnail me-2" width="60" height="60" />
|
||||
<div class="text-start mt-2">
|
||||
<strong class="px-1 me-1" style="background-color: yellow">{{ log.recorder }}</strong>
|
||||
<strong style="color: salmon">{{ log.action }}紀錄</strong>
|
||||
<i class="fas fa-chevron-right m-2"></i>
|
||||
<template v-if="log.action === '新增' || log.action === '編輯'">
|
||||
<strong style="color: blue">{{ log.item }}</strong> |
|
||||
<strong style="color: brown">{{ log.merchant }}</strong> |
|
||||
<strong style="color: orange">$ {{ log.amount }}</strong> |
|
||||
<strong style="color: green">{{ new Date(log.date || '').toLocaleDateString() }}</strong>
|
||||
</template>
|
||||
<template v-if="log.action === '編輯'">
|
||||
<br />
|
||||
<h6>
|
||||
原紀錄：<strong style="color: blue">{{ log.itemBefore }}</strong> |
|
||||
<strong style="color: brown">{{ log.merchantBefore }}</strong> |
|
||||
<strong style="color: orange">$ {{ log.amountBefore }}</strong> |
|
||||
<strong style="color: green">{{ new Date(log.dateBefore || '').toLocaleDateString() }}</strong>
|
||||
</h6>
|
||||
</template>
|
||||
<template v-if="log.action === '結算'">
|
||||
<span>
|
||||
結算金額
|
||||
<strong style="color: orange">$ {{ log.closeAmount }} </strong>
|
||||
</span>
|
||||
<i class="far fa-list-alt fa-lg ms-2" id="records" @click="listIconClick(log.RecordIds)"></i>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- mobile -->
|
||||
<div id="mobile" class="card text-center">
|
||||
<div class="card-header">
|
||||
<ul class="nav nav-tabs card-header-tabs">
|
||||
<li class="nav-item" v-for="tab in tabs" :key="tab.title" @click="nowTab = tab.title">
|
||||
<span class="nav-link" :class="{ active: nowTab === tab.title }">{{ tab.title }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="card mb-3" v-for="(log, index) in filteredLogs" :key="index">
|
||||
<div class="card-header">
|
||||
{{
|
||||
new Date(log.createdAt).toLocaleDateString() +
|
||||
` (${showWeekDay(log.createdAt)}) ` +
|
||||
new Date(log.createdAt).toLocaleTimeString()
|
||||
}}
|
||||
</div>
|
||||
<div class="card-body d-flex">
|
||||
<img
|
||||
v-if="log.recorder === '建喵'"
|
||||
src="../assets/jianmiau.jpeg"
|
||||
class="my-auto img-thumbnail me-2"
|
||||
width="60"
|
||||
height="60"
|
||||
/><img v-else src="../assets/karol.png" class="my-auto img-thumbnail me-2" width="60" height="60" />
|
||||
<div class="text-start mt-2">
|
||||
<strong class="px-1 me-1" style="background-color: yellow">{{ log.recorder }}</strong>
|
||||
<strong style="color: salmon">{{ log.action }}紀錄</strong>
|
||||
<i class="fas fa-chevron-right m-2"></i>
|
||||
<template v-if="log.action === '新增' || log.action === '編輯'">
|
||||
<h6>
|
||||
<strong style="color: blue">{{ log.item }}</strong> |
|
||||
<strong style="color: brown">{{ log.merchant }}</strong> |
|
||||
<strong style="color: orange">$ {{ log.amount }}</strong> |
|
||||
<strong style="color: green">{{ new Date(log.date || '').toLocaleDateString() }}</strong>
|
||||
</h6>
|
||||
</template>
|
||||
<template v-if="log.action === '編輯'">
|
||||
<h6>
|
||||
原紀錄：<strong style="color: blue">{{ log.itemBefore }}</strong> |
|
||||
<strong style="color: brown">{{ log.merchantBefore }}</strong> |
|
||||
<strong style="color: orange">$ {{ log.amountBefore }}</strong> |
|
||||
<strong style="color: green">{{ new Date(log.dateBefore || '').toLocaleDateString() }}</strong>
|
||||
</h6>
|
||||
</template>
|
||||
<template v-if="log.action === '結算'">
|
||||
<h6>
|
||||
<span>
|
||||
結算金額
|
||||
<strong style="color: orange">$ {{ log.closeAmount }} </strong>
|
||||
</span>
|
||||
<i class="far fa-list-alt fa-lg ms-2" id="records" @click="listIconClick(log.RecordIds)"></i>
|
||||
</h6>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<img
|
||||
v-else
|
||||
class="img-fluid"
|
||||
src="https://memeprod.sgp1.digitaloceanspaces.com/user-wtf/1581909112681.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<Spinner v-else />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
#records:hover {
|
||||
cursor: pointer;
|
||||
color: salmon;
|
||||
}
|
||||
@media screen and (max-width: 499px) {
|
||||
#pc {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 500px) {
|
||||
#mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
9
src/views/NotFound.vue
Normal file
9
src/views/NotFound.vue
Normal file
@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<img
|
||||
src="https://www.lifewire.com/thmb/-zkZkHWjYJ1eAIRKzvAksPDMrzg=/3000x2000/filters:no_upscale():max_bytes(150000):strip_icc()/404-not-found-error-explained-2622936-Final-fde7be1b7e2e499c9f039d97183e7f52.jpg"
|
||||
alt="404"
|
||||
style="height: 70vh; width: 70vw"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
399
src/views/Record.vue
Normal file
399
src/views/Record.vue
Normal file
@ -0,0 +1,399 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import recordAPI from '../apis/expense'
|
||||
import { Record, RecordInput } from '../models/Record'
|
||||
import Swal from 'sweetalert2'
|
||||
import { Toast, ConfirmBox } from '../utils/swal'
|
||||
import { showWeekDay } from '../utils/helper'
|
||||
import Spinner from '../components/Spinner.vue'
|
||||
import { useStore } from '../store/index'
|
||||
const store = useStore()
|
||||
|
||||
// data
|
||||
const isLoading = ref<boolean>(true)
|
||||
const records = ref<Record[]>([])
|
||||
const isCloseStatus = ref<boolean>(false)
|
||||
const closeRecords = ref<number[]>([])
|
||||
const closeRecordsAmount = ref<number>(0)
|
||||
|
||||
// methods
|
||||
const fetchRecords = async function () {
|
||||
try {
|
||||
const { data } = await recordAPI.getAll()
|
||||
records.value = data.filter((item: Record) => item.isClosed === false)
|
||||
isLoading.value = false
|
||||
} catch (error) {
|
||||
console.error('error', error)
|
||||
}
|
||||
}
|
||||
|
||||
const createBtnClick = async () => {
|
||||
try {
|
||||
const { value: formValues } = await ConfirmBox.fire({
|
||||
title: '新增資料',
|
||||
html: `
|
||||
<div class="d-flex mb-2">
|
||||
<div class="col-auto me-3">
|
||||
<label for="swal-item" class="col-form-label">項目</label>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<input type="text" id="swal-item" class="form-control"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex mb-2">
|
||||
<div class="col-auto me-3">
|
||||
<label for="swal-merchant" class="col-form-label">商家</label>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<input type="text" id="swal-merchant" class="form-control" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex mb-2">
|
||||
<div class="col-auto me-3">
|
||||
<label for="swal-amount" class="col-form-label">金額</label>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<input type="number" id="swal-amount" class="form-control" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex mb-2">
|
||||
<div class="col-auto me-3">
|
||||
<label for="swal-date" class="col-form-label">日期</label>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<input type="date" id="swal-date" class="form-control" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex mb-2">
|
||||
<div class="col-auto me-3">
|
||||
<label for="swal-recorder" class="col-form-label">紀錄者</label>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<select id="swal-recorder" class="form-select">
|
||||
<option selected>${store.currentUser}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
preConfirm: () => {
|
||||
const item = (document.getElementById('swal-item') as HTMLInputElement).value
|
||||
const merchant = (document.getElementById('swal-merchant') as HTMLInputElement).value
|
||||
const amount = (document.getElementById('swal-amount') as HTMLInputElement).value
|
||||
const date = new Date((document.getElementById('swal-date') as HTMLInputElement).value)
|
||||
const recorder = (document.getElementById('swal-recorder') as HTMLInputElement).value
|
||||
if (!item || !merchant || !amount || !date || !recorder) {
|
||||
Swal.showValidationMessage('所有資料都是必填！若紀錄者為空，請登入~')
|
||||
}
|
||||
return {
|
||||
input: {
|
||||
item,
|
||||
merchant,
|
||||
amount,
|
||||
date,
|
||||
recorder
|
||||
} as RecordInput
|
||||
}
|
||||
}
|
||||
})
|
||||
if (formValues) {
|
||||
createRecord(formValues)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('error', error)
|
||||
}
|
||||
}
|
||||
|
||||
const createRecord = async function (formValues: { input: RecordInput }) {
|
||||
try {
|
||||
await recordAPI.create(formValues.input)
|
||||
fetchRecords()
|
||||
Toast.fire({
|
||||
icon: 'success',
|
||||
title: '成功建立資料！'
|
||||
})
|
||||
// line msg
|
||||
const input = {
|
||||
to: [process.env.VUE_APP_JIANMIAU_USERID, process.env.VUE_APP_KAROL_USERID],
|
||||
messages: [
|
||||
{
|
||||
type: 'text',
|
||||
text: `${store.currentUser}新增了一筆關於${formValues.input.item}的記帳`
|
||||
}
|
||||
]
|
||||
}
|
||||
await recordAPI.pushLineMsg(input)
|
||||
} catch (error) {
|
||||
console.error('error', error)
|
||||
Toast.fire({
|
||||
icon: 'error',
|
||||
title: '新增資料失敗！'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const editBtnClick = async function (id: number) {
|
||||
try {
|
||||
const { data } = await recordAPI.getOne(id)
|
||||
const { value: formValues } = await ConfirmBox.fire({
|
||||
title: '資料編輯',
|
||||
html: `
|
||||
<div class="d-flex mb-2">
|
||||
<div class="col-auto me-3">
|
||||
<label for="swal-item" class="col-form-label">項目</label>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<input value="${data.item}" type="text" id="swal-item" class="form-control"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex mb-2">
|
||||
<div class="col-auto me-3">
|
||||
<label for="swal-merchant" class="col-form-label">商家</label>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<input value="${data.merchant}" type="text" id="swal-merchant" class="form-control" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex mb-2">
|
||||
<div class="col-auto me-3">
|
||||
<label for="swal-amount" class="col-form-label">金額</label>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<input value="${data.amount}" type="number" id="swal-amount" class="form-control" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex mb-2">
|
||||
<div class="col-auto me-3">
|
||||
<label for="swal-date" class="col-form-label">日期</label>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<input value="${new Date(data.date)
|
||||
.toISOString()
|
||||
.substring(0, 10)}" type="date" id="swal-date" class="form-control" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex mb-2">
|
||||
<div class="col-auto me-3">
|
||||
<label for="swal-editor" class="col-form-label">編輯者</label>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<select id="swal-editor" class="form-select">
|
||||
<option selected>${store.currentUser}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
preConfirm: () => {
|
||||
const item = (document.getElementById('swal-item') as HTMLInputElement).value
|
||||
const merchant = (document.getElementById('swal-merchant') as HTMLInputElement).value
|
||||
const amount = (document.getElementById('swal-amount') as HTMLInputElement).value
|
||||
const date = new Date((document.getElementById('swal-date') as HTMLInputElement).value)
|
||||
const editor = (document.getElementById('swal-editor') as HTMLInputElement).value
|
||||
if (!item || !merchant || !amount || !date || !editor) {
|
||||
Swal.showValidationMessage('所有資料都是必填！若編輯者為空，請登入~')
|
||||
}
|
||||
return {
|
||||
id: data.id as number,
|
||||
input: {
|
||||
item,
|
||||
merchant,
|
||||
amount,
|
||||
date,
|
||||
editor
|
||||
} as RecordInput
|
||||
}
|
||||
}
|
||||
})
|
||||
if (formValues?.input) {
|
||||
editRecord(formValues)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('error', error)
|
||||
}
|
||||
}
|
||||
|
||||
const editRecord = async function (formValues: { id: number; input: RecordInput }) {
|
||||
try {
|
||||
await recordAPI.edit(formValues.id, formValues.input)
|
||||
fetchRecords()
|
||||
Toast.fire({
|
||||
icon: 'success',
|
||||
title: '成功編輯資料！'
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('error', error)
|
||||
Toast.fire({
|
||||
icon: 'error',
|
||||
title: '編輯資料失敗！'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const closeBtnClick = () => {
|
||||
if (!store.currentUser) {
|
||||
Swal.fire('請先登入才能結算！', '', 'warning')
|
||||
return
|
||||
}
|
||||
isCloseStatus.value = true
|
||||
const recordIds = []
|
||||
let total = 0
|
||||
for (let record of records.value) {
|
||||
recordIds.push(record.id)
|
||||
total += record.amount
|
||||
}
|
||||
closeRecords.value = recordIds
|
||||
closeRecordsAmount.value = total
|
||||
}
|
||||
|
||||
const checkboxClick = (id: number, amount: number) => {
|
||||
if (isCloseStatus.value) {
|
||||
const index = closeRecords.value?.findIndex((recordId) => recordId === id)
|
||||
if (index !== undefined) {
|
||||
if (index !== -1) {
|
||||
closeRecords.value?.splice(index, 1)
|
||||
closeRecordsAmount.value -= amount
|
||||
} else {
|
||||
closeRecords.value?.push(id)
|
||||
closeRecordsAmount.value += amount
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const cancelBtnClick = () => {
|
||||
isCloseStatus.value = false
|
||||
closeRecords.value = []
|
||||
closeRecordsAmount.value = 0
|
||||
}
|
||||
|
||||
const toCloseBtnClick = async () => {
|
||||
const { isConfirmed } = await ConfirmBox.fire({
|
||||
icon: 'info',
|
||||
title: '確定結算資料？',
|
||||
text: `結算金額為 $${closeRecordsAmount.value} [結算者: ${store.currentUser}]`
|
||||
})
|
||||
if (isConfirmed) {
|
||||
closeRecord(closeRecordsAmount.value)
|
||||
}
|
||||
}
|
||||
|
||||
const closeRecord = async (amount: number) => {
|
||||
try {
|
||||
if (store.currentUser) {
|
||||
await recordAPI.close({
|
||||
records: closeRecords.value.toString(),
|
||||
totalAmount: amount,
|
||||
recorder: store.currentUser
|
||||
})
|
||||
isCloseStatus.value = false
|
||||
fetchRecords()
|
||||
Toast.fire({
|
||||
icon: 'success',
|
||||
title: '成功結算資料！'
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('error', error)
|
||||
Toast.fire({
|
||||
icon: 'error',
|
||||
title: '結算資料失敗！'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// created
|
||||
fetchRecords()
|
||||
</script>
|
||||
<template>
|
||||
<div v-if="!isLoading">
|
||||
<div class="d-flex justify-content-between mb-3" style="width: 100vw">
|
||||
<button type="button" class="btn btn-primary text-end" @click="createBtnClick">新增資料</button>
|
||||
<div>
|
||||
<template v-if="isCloseStatus">
|
||||
<span class="badge bg-info text-dark me-3 align-middle p-2">結算金額 ${{ closeRecordsAmount }}</span>
|
||||
<button type="button" class="btn btn-secondary" @click="cancelBtnClick">取消結算</button>
|
||||
<button type="button" class="btn btn-success ms-3" @click="toCloseBtnClick">確定結算</button>
|
||||
</template>
|
||||
<button v-else type="button" class="btn btn-danger" @click="closeBtnClick">開始結算</button>
|
||||
</div>
|
||||
</div>
|
||||
<table class="table table-striped table-info table-hover" v-if="records.length">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">項目</th>
|
||||
<th scope="col">商家</th>
|
||||
<th scope="col">金額</th>
|
||||
<th scope="col">日期</th>
|
||||
<th scope="col" id="column-item">首次記錄者</th>
|
||||
<th scope="col" id="column-item">首次記錄時間</th>
|
||||
<th scope="col" id="column-item">更新時間</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(record, index) in records"
|
||||
:key="index"
|
||||
:class="{ 'table-warning': closeRecords?.includes(record.id) }"
|
||||
@click="checkboxClick(record.id, record.amount)"
|
||||
>
|
||||
<td>
|
||||
<input
|
||||
v-if="isCloseStatus"
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
:checked="closeRecords?.includes(record.id)"
|
||||
/>
|
||||
<i v-else class="fas fa-edit" @click="editBtnClick(record.id)"></i>
|
||||
</td>
|
||||
<td>
|
||||
{{ record.item }}
|
||||
</td>
|
||||
<td>
|
||||
{{ record.merchant }}
|
||||
</td>
|
||||
<td>
|
||||
{{ record.amount }}
|
||||
</td>
|
||||
<td>
|
||||
{{ new Date(record.date).toLocaleDateString() + ` (${showWeekDay(record.date)})` }}
|
||||
</td>
|
||||
<td id="column-item">
|
||||
{{ record.recorder }}
|
||||
</td>
|
||||
<td id="column-item">{{ new Date(record.createdAt).toLocaleString() }}</td>
|
||||
<td id="column-item">{{ new Date(record.updatedAt).toLocaleString() }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<img
|
||||
v-else
|
||||
class="img-fluid"
|
||||
src="https://memeprod.sgp1.digitaloceanspaces.com/user-wtf/1581909112681.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<Spinner v-else />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
button,
|
||||
span {
|
||||
font-size: 0.5em;
|
||||
}
|
||||
|
||||
i[class~='fa-edit']:hover {
|
||||
color: rgb(30, 197, 57);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
#column-item {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
3
vue.config.js
Normal file
3
vue.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
publicPath: process.env.NODE_ENV === 'production' ? '/jm-expense-vue-ts/' : '/'
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user