Compare commits
2 commits
main
...
recurring-
| Author | SHA1 | Date | |
|---|---|---|---|
| 5d0be6cd84 | |||
| c3cee37add |
39 changed files with 13575 additions and 17107 deletions
|
|
@ -1,12 +0,0 @@
|
|||
FROM mcr.microsoft.com/devcontainers/javascript-node:0-16-bullseye
|
||||
|
||||
# [Optional] Uncomment this section to install additional OS packages.
|
||||
# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
|
||||
# && apt-get -y install --no-install-recommends <your-package-list-here>
|
||||
|
||||
# [Optional] Uncomment if you want to install an additional version of node using nvm
|
||||
# ARG EXTRA_NODE_VERSION=10
|
||||
# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
|
||||
|
||||
# [Optional] Uncomment if you want to install more global node modules
|
||||
# RUN su node -c "npm install -g <your-package-list-here>"
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
// Update the VARIANT arg in docker-compose.yml to pick a Node.js version
|
||||
{
|
||||
"name": "Twigs Web",
|
||||
"dockerComposeFile": "docker-compose.yml",
|
||||
"service": "app",
|
||||
"workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}",
|
||||
|
||||
// Features to add to the dev container. More info: https://containers.dev/implementors/features.
|
||||
// "features": {},
|
||||
|
||||
// Use 'forwardPorts' to make a list of ports inside the container available locally.
|
||||
// This can be used to network with other containers or with the host.
|
||||
"forwardPorts": [4200, "backend:8080"]
|
||||
|
||||
// Use 'postCreateCommand' to run commands after the container is created.
|
||||
// "postCreateCommand": "yarn install",
|
||||
|
||||
// Configure tool-specific properties.
|
||||
// "customizations": {},
|
||||
|
||||
// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
|
||||
// "remoteUser": "root"
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
version: '3.8'
|
||||
|
||||
services:
|
||||
app:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
|
||||
volumes:
|
||||
- ../..:/workspaces:cached
|
||||
|
||||
# Overrides default command so things don't shut down after the process ends.
|
||||
command: sleep infinity
|
||||
|
||||
# Runs app on the same network as the database container, allows "forwardPorts" in devcontainer.json function.
|
||||
network_mode: service:db
|
||||
|
||||
# Uncomment the next line to use a non-root user for all processes.
|
||||
user: node
|
||||
# Use "forwardPorts" in **devcontainer.json** to forward an app port locally.
|
||||
# (Adding the "ports" property to this file will not forward from a Codespace.)
|
||||
|
||||
backend:
|
||||
image: ghcr.io/wbrawner/twigs-server:main
|
||||
restart: unless-stopped
|
||||
environment:
|
||||
TWIGS_DB_HOST: db
|
||||
TWIGS_DB_NAME: postgres
|
||||
TWIGS_DB_USER: postgres
|
||||
TWIGS_DB_PASS: postgres
|
||||
|
||||
db:
|
||||
image: postgres:latest
|
||||
restart: unless-stopped
|
||||
volumes:
|
||||
- postgres-data:/var/lib/postgresql/data
|
||||
environment:
|
||||
POSTGRES_PASSWORD: postgres
|
||||
POSTGRES_USER: postgres
|
||||
POSTGRES_DB: postgres
|
||||
|
||||
# Add "forwardPorts": ["5432"] to **devcontainer.json** to forward PostgreSQL locally.
|
||||
# (Adding the "ports" property to this file will not forward from a Codespace.)
|
||||
|
||||
volumes:
|
||||
postgres-data:
|
||||
54
.github/workflows/gh-pages.yml
vendored
54
.github/workflows/gh-pages.yml
vendored
|
|
@ -1,54 +0,0 @@
|
|||
name: Deploy to GitHub Pages
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: ["main"]
|
||||
|
||||
# Allows you to run this workflow manually from the Actions tab
|
||||
workflow_dispatch:
|
||||
|
||||
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
|
||||
permissions:
|
||||
contents: read
|
||||
pages: write
|
||||
id-token: write
|
||||
|
||||
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
|
||||
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
|
||||
concurrency:
|
||||
group: "pages"
|
||||
cancel-in-progress: false
|
||||
|
||||
jobs:
|
||||
# Build job
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
- name: Setup Pages
|
||||
uses: actions/configure-pages@v4
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 'lts/*'
|
||||
- name: Install dependencies with npm
|
||||
run: npm ci
|
||||
- name: Build with NPM
|
||||
run: npm run package
|
||||
- name: Upload artifact
|
||||
uses: actions/upload-pages-artifact@v3
|
||||
with:
|
||||
path: dist/twigs
|
||||
|
||||
# Deployment job
|
||||
deploy:
|
||||
environment:
|
||||
name: github-pages
|
||||
url: ${{ steps.deployment.outputs.page_url }}
|
||||
runs-on: ubuntu-latest
|
||||
needs: build
|
||||
steps:
|
||||
- name: Deploy to GitHub Pages
|
||||
id: deployment
|
||||
uses: actions/deploy-pages@v4
|
||||
12
.vscode/settings.json
vendored
Normal file
12
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"database.connections": [
|
||||
{
|
||||
"type": "mysql",
|
||||
"name": "root@captain.intra.wbrawner.com (MySql)",
|
||||
"host": "captain.intra.wbrawner.com:3306",
|
||||
"username": "root",
|
||||
"database": null,
|
||||
"password": "U7YE8YsmES8LHB2B39WXNjTQk4d48LzQEZG3cj6wSb2fgeRLEYtrrqTwiqAhrpR3"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
# Twigs Web Client
|
||||
|
||||
# IMPORTANT: This repository is no longer maintained. The web version of Twigs has been replaced with a server-rendered implementation in the [backend repository](https://github.com/wbrawner/twigs)
|
||||
|
||||
Twigs is an open source budgeting app aimed at people who need to share a budget. This project serves as the web front end, and is powered by Angular. The main back end project can be found at [wbrawner/twigs-server](https://github.com/wbrawner/twigs-server)
|
||||
|
||||
## Building
|
||||
|
|
@ -46,4 +44,4 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
```
|
||||
```
|
||||
|
|
@ -82,21 +82,21 @@
|
|||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"options": {
|
||||
"buildTarget": "twigs:build"
|
||||
"browserTarget": "twigs:build"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "twigs:build:production"
|
||||
"browserTarget": "twigs:build:production"
|
||||
},
|
||||
"codeserver": {
|
||||
"buildTarget": "twigs:build:codeserver"
|
||||
"browserTarget": "twigs:build:codeserver"
|
||||
}
|
||||
}
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"buildTarget": "twigs:build"
|
||||
"browserTarget": "twigs:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
|
|
@ -138,6 +138,7 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"defaultProject": "twigs",
|
||||
"cli": {
|
||||
"analytics": "b8304464-255e-47bb-976a-7ed81af63238"
|
||||
}
|
||||
|
|
|
|||
29139
package-lock.json
generated
29139
package-lock.json
generated
File diff suppressed because it is too large
Load diff
59
package.json
59
package.json
|
|
@ -3,7 +3,7 @@
|
|||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve --configuration=production --host '0.0.0.0'",
|
||||
"start": "ng serve --host '0.0.0.0'",
|
||||
"code-server": "ng serve --configuration=codeserver --host \"0.0.0.0\" --disable-host-check --poll=2000",
|
||||
"build": "ng build",
|
||||
"package": "ng build --configuration=production --service-worker",
|
||||
|
|
@ -15,44 +15,45 @@
|
|||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^17.2.3",
|
||||
"@angular/cdk": "^17.2.1",
|
||||
"@angular/common": "^17.2.3",
|
||||
"@angular/compiler": "^17.2.3",
|
||||
"@angular/core": "^17.2.3",
|
||||
"@angular/forms": "^17.2.3",
|
||||
"@angular/material": "^16.2.0",
|
||||
"@angular/platform-browser": "^17.2.3",
|
||||
"@angular/platform-browser-dynamic": "^17.2.3",
|
||||
"@angular/router": "^17.2.3",
|
||||
"@angular/service-worker": "^17.2.3",
|
||||
"chart.js": "^3.7.0",
|
||||
"core-js": "^3.20.3",
|
||||
"ng2-charts": "^3.0.8",
|
||||
"rxjs": "^7.5.2",
|
||||
"@angular/animations": "^13.0.2",
|
||||
"@angular/cdk": "^13.0.2",
|
||||
"@angular/common": "^13.0.2",
|
||||
"@angular/compiler": "^13.0.2",
|
||||
"@angular/core": "^13.0.2",
|
||||
"@angular/forms": "^13.0.2",
|
||||
"@angular/material": "^13.0.2",
|
||||
"@angular/platform-browser": "^13.0.2",
|
||||
"@angular/platform-browser-dynamic": "^13.0.2",
|
||||
"@angular/router": "^13.0.2",
|
||||
"@angular/service-worker": "^13.0.2",
|
||||
"chart.js": "^2.9.3",
|
||||
"core-js": "^3.19.1",
|
||||
"ng2-charts": "^2.4.3",
|
||||
"rxjs": "^6.3.3",
|
||||
"tslib": "^2.3.1",
|
||||
"zone.js": "~0.14.4"
|
||||
"zone.js": "~0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^17.2.2",
|
||||
"@angular/cli": "^17.2.2",
|
||||
"@angular/compiler-cli": "^17.2.3",
|
||||
"@angular/language-service": "^17.2.3",
|
||||
"@types/jasmine": "~3.10.3",
|
||||
"@angular-devkit/build-angular": "^13.0.3",
|
||||
"@angular/cli": "^13.0.3",
|
||||
"@angular/compiler-cli": "^13.0.2",
|
||||
"@angular/language-service": "^13.0.2",
|
||||
"@types/jasmine": "~3.10.2",
|
||||
"@types/jasminewd2": "^2.0.10",
|
||||
"@types/node": "^17.0.10",
|
||||
"eslint": "^8.7.0",
|
||||
"jasmine-core": "~4.0.0",
|
||||
"@types/node": "^16.11.9",
|
||||
"codelyzer": "^6.0.2",
|
||||
"eslint": "^8.2.0",
|
||||
"jasmine-core": "~3.10.1",
|
||||
"jasmine-spec-reporter": "~7.0.0",
|
||||
"karma": "~6.3.11",
|
||||
"karma": "~6.3.9",
|
||||
"karma-chrome-launcher": "~3.1.0",
|
||||
"karma-coverage-istanbul-reporter": "~3.0.3",
|
||||
"karma-jasmine": "~4.0.1",
|
||||
"karma-jasmine-html-reporter": "^1.7.0",
|
||||
"npm-check-updates": "^15.0.1",
|
||||
"npm-check-updates": "^12.0.2",
|
||||
"protractor": "^7.0.0",
|
||||
"ts-node": "~10.4.0",
|
||||
"tslint": "^6.1.3",
|
||||
"typescript": "5.3.3"
|
||||
"typescript": "4.4.4"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const routes: Routes = [
|
|||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forRoot(routes, {})
|
||||
RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })
|
||||
],
|
||||
exports: [
|
||||
RouterModule
|
||||
|
|
|
|||
|
|
@ -3,21 +3,19 @@
|
|||
</p>
|
||||
<mat-sidenav-container *ngIf="online" class="sidenav-container">
|
||||
<mat-sidenav #sidenav mode="over" closed>
|
||||
<mat-nav-list (click)="sidenav.close()" *ngIf="loggedIn">
|
||||
<a mat-list-item routerLink="">{{ getUsername() }}</a>
|
||||
<a mat-list-item routerLink="/budgets">Budgets</a>
|
||||
<a mat-list-item (click)="logout()">Logout</a>
|
||||
</mat-nav-list>
|
||||
<mat-nav-list (click)="sidenav.close()" *ngIf="!loggedIn">
|
||||
<a mat-list-item routerLink="/login">Login</a>
|
||||
<a mat-list-item routerLink="/register">Register</a>
|
||||
<mat-nav-list (click)="sidenav.close()">
|
||||
<a mat-list-item *ngIf="loggedIn" routerLink="">{{ getUsername() }}</a>
|
||||
<a mat-list-item *ngIf="loggedIn" routerLink="/budgets">Budgets</a>
|
||||
<a mat-list-item *ngIf="!loggedIn" routerLink="/login">Login</a>
|
||||
<a mat-list-item *ngIf="!loggedIn" routerLink="/register">Register</a>
|
||||
<a mat-list-item *ngIf="loggedIn" (click)="logout()">Logout</a>
|
||||
</mat-nav-list>
|
||||
</mat-sidenav>
|
||||
<mat-sidenav-content>
|
||||
<mat-toolbar>
|
||||
<span>
|
||||
<a mat-icon-button *ngIf="backEnabled" (click)="goBack()">
|
||||
<mat-icon>arrow_back</mat-icon>
|
||||
<mat-icon>arrow_back</mat-icon>
|
||||
</a>
|
||||
<a mat-icon-button *ngIf="!backEnabled" (click)="sidenav.open()">
|
||||
<mat-icon>menu</mat-icon>
|
||||
|
|
|
|||
|
|
@ -9,126 +9,133 @@ import { Router, ActivationEnd, ActivatedRoute } from '@angular/router';
|
|||
import { Actionable, isActionable } from './shared/actionable';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css']
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css']
|
||||
})
|
||||
export class AppComponent implements OnInit {
|
||||
public title = 'Twigs';
|
||||
public backEnabled = false;
|
||||
public user = new BehaviorSubject<User>(null);
|
||||
public online = window.navigator.onLine;
|
||||
public currentVersion = '';
|
||||
public actionable: Actionable;
|
||||
public loggedIn = false;
|
||||
public title = 'Twigs';
|
||||
public backEnabled = false;
|
||||
public user = new BehaviorSubject<User>(null);
|
||||
public online = window.navigator.onLine;
|
||||
public currentVersion = '';
|
||||
public actionable: Actionable;
|
||||
public loggedIn = false;
|
||||
|
||||
constructor(
|
||||
@Inject(TWIGS_SERVICE) private twigsService: TwigsService,
|
||||
private location: Location,
|
||||
private router: Router,
|
||||
private appRef: ApplicationRef,
|
||||
private updates: SwUpdate,
|
||||
private changeDetector: ChangeDetectorRef,
|
||||
private storage: Storage,
|
||||
@Inject(DOCUMENT) private document: Document
|
||||
) { }
|
||||
constructor(
|
||||
@Inject(TWIGS_SERVICE) private twigsService: TwigsService,
|
||||
private location: Location,
|
||||
private router: Router,
|
||||
private appRef: ApplicationRef,
|
||||
private updates: SwUpdate,
|
||||
private changeDetector: ChangeDetectorRef,
|
||||
private storage: Storage,
|
||||
@Inject(DOCUMENT) private document: Document
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
const unauthenticatedRoutes = [
|
||||
'',
|
||||
'/',
|
||||
'/login',
|
||||
'/register'
|
||||
]
|
||||
let auth = this.storage.getItem('Authorization');
|
||||
let userId = this.storage.getItem('userId');
|
||||
let savedUser = JSON.parse(this.storage.getItem('user')) as User;
|
||||
if (auth && auth.length == 255 && userId) {
|
||||
if (savedUser) {
|
||||
this.user.next(savedUser);
|
||||
}
|
||||
this.twigsService.getProfile(userId).then(fetchedUser => {
|
||||
this.storage.setItem('user', JSON.stringify(fetchedUser));
|
||||
this.user.next(fetchedUser);
|
||||
if (unauthenticatedRoutes.indexOf(this.location.path()) != -1) {
|
||||
//TODO: Save last opened budget and redirect to there instead of the main list
|
||||
this.router.navigateByUrl("/budgets");
|
||||
}
|
||||
});
|
||||
} else if (unauthenticatedRoutes.indexOf(this.location.path()) == -1) {
|
||||
this.router.navigateByUrl(`/login?redirect=${this.location.path()}`);
|
||||
ngOnInit(): void {
|
||||
const unauthenticatedRoutes = [
|
||||
'',
|
||||
'/',
|
||||
'/login',
|
||||
'/register'
|
||||
]
|
||||
let auth = this.storage.getItem('Authorization');
|
||||
let userId = this.storage.getItem('userId');
|
||||
let savedUser = JSON.parse(this.storage.getItem('user')) as User;
|
||||
if (auth && auth.length == 255 && userId) {
|
||||
if (savedUser) {
|
||||
this.user.next(savedUser);
|
||||
}
|
||||
this.twigsService.getProfile(userId).subscribe(fetchedUser => {
|
||||
this.storage.setItem('user', JSON.stringify(fetchedUser));
|
||||
this.user.next(fetchedUser);
|
||||
if (unauthenticatedRoutes.indexOf(this.location.path()) != -1) {
|
||||
//TODO: Save last opened budget and redirect to there instead of the main list
|
||||
this.router.navigateByUrl("/budgets");
|
||||
}
|
||||
|
||||
this.updates.versionUpdates.subscribe(
|
||||
event => {
|
||||
if (event.type == "VERSION_READY") {
|
||||
console.log('current version is', event.currentVersion);
|
||||
console.log('available version is', event.latestVersion);
|
||||
// TODO: Prompt user to click something to update
|
||||
this.updates.activateUpdate();
|
||||
}
|
||||
},
|
||||
err => {
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
const appIsStable$ = this.appRef.isStable.pipe(first(isStable => isStable === true));
|
||||
const everySixHours$ = interval(6 * 60 * 60 * 1000);
|
||||
const everySixHoursOnceAppIsStable$ = concat(appIsStable$, everySixHours$);
|
||||
everySixHoursOnceAppIsStable$.subscribe(() => this.updates.checkForUpdate());
|
||||
this.user.subscribe(
|
||||
user => {
|
||||
if (user) {
|
||||
this.loggedIn = true;
|
||||
} else {
|
||||
this.loggedIn = false;
|
||||
}
|
||||
}
|
||||
)
|
||||
const darkMode = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
this.handleDarkModeChanges(darkMode);
|
||||
darkMode.addEventListener('change', (e => this.handleDarkModeChanges(e)))
|
||||
});
|
||||
} else if (unauthenticatedRoutes.indexOf(this.location.path()) == -1) {
|
||||
this.router.navigateByUrl(`/login?redirect=${this.location.path()}`);
|
||||
}
|
||||
|
||||
getUsername(): String {
|
||||
return this.user.value.username;
|
||||
}
|
||||
this.updates.available.subscribe(
|
||||
event => {
|
||||
console.log('current version is', event.current);
|
||||
console.log('available version is', event.available);
|
||||
// TODO: Prompt user to click something to update
|
||||
this.updates.activateUpdate();
|
||||
},
|
||||
err => {
|
||||
|
||||
goBack(): void {
|
||||
this.location.back();
|
||||
}
|
||||
}
|
||||
);
|
||||
this.updates.activated.subscribe(
|
||||
event => {
|
||||
console.log('old version was', event.previous);
|
||||
console.log('new version is', event.current);
|
||||
},
|
||||
err => {
|
||||
|
||||
logout(): void {
|
||||
this.twigsService.logout().then(_ => {
|
||||
this.location.go('/');
|
||||
window.location.reload();
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
setActionable(actionable: Actionable): void {
|
||||
this.actionable = actionable;
|
||||
this.changeDetector.detectChanges();
|
||||
}
|
||||
|
||||
setBackEnabled(enabled: boolean): void {
|
||||
this.backEnabled = enabled;
|
||||
this.changeDetector.detectChanges();
|
||||
}
|
||||
|
||||
setTitle(title: string) {
|
||||
this.title = title;
|
||||
this.changeDetector.detectChanges();
|
||||
}
|
||||
|
||||
handleDarkModeChanges(darkMode: any) {
|
||||
const themeColor = this.document.getElementsByName('theme-color')[0] as HTMLMetaElement;
|
||||
let themeColorValue: string;
|
||||
if (darkMode.matches) {
|
||||
themeColorValue = '#333333';
|
||||
const appIsStable$ = this.appRef.isStable.pipe(first(isStable => isStable === true));
|
||||
const everySixHours$ = interval(6 * 60 * 60 * 1000);
|
||||
const everySixHoursOnceAppIsStable$ = concat(appIsStable$, everySixHours$);
|
||||
everySixHoursOnceAppIsStable$.subscribe(() => this.updates.checkForUpdate());
|
||||
this.user.subscribe(
|
||||
user => {
|
||||
if (user) {
|
||||
this.loggedIn = true;
|
||||
} else {
|
||||
themeColorValue = '#F1F1F1';
|
||||
this.loggedIn = false;
|
||||
}
|
||||
themeColor.content = themeColorValue;
|
||||
}
|
||||
)
|
||||
const darkMode = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
this.handleDarkModeChanges(darkMode);
|
||||
darkMode.addEventListener('change', (e => this.handleDarkModeChanges(e)))
|
||||
}
|
||||
|
||||
getUsername(): String {
|
||||
return this.user.value.username;
|
||||
}
|
||||
|
||||
goBack(): void {
|
||||
this.location.back();
|
||||
}
|
||||
|
||||
logout(): void {
|
||||
this.twigsService.logout().subscribe(_ => {
|
||||
this.location.go('/');
|
||||
window.location.reload();
|
||||
});
|
||||
}
|
||||
|
||||
setActionable(actionable: Actionable): void {
|
||||
this.actionable = actionable;
|
||||
this.changeDetector.detectChanges();
|
||||
}
|
||||
|
||||
setBackEnabled(enabled: boolean): void {
|
||||
this.backEnabled = enabled;
|
||||
this.changeDetector.detectChanges();
|
||||
}
|
||||
|
||||
setTitle(title: string) {
|
||||
this.title = title;
|
||||
this.changeDetector.detectChanges();
|
||||
}
|
||||
|
||||
handleDarkModeChanges(darkMode: any) {
|
||||
const themeColor = this.document.getElementsByName('theme-color')[0] as HTMLMetaElement;
|
||||
let themeColorValue: string;
|
||||
if (darkMode.matches) {
|
||||
themeColorValue = '#333333';
|
||||
} else {
|
||||
themeColorValue = '#F1F1F1';
|
||||
}
|
||||
themeColor.content = themeColorValue;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,20 +2,20 @@ import { BrowserModule } from '@angular/platform-browser';
|
|||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
|
||||
import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
|
||||
import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
|
||||
import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
|
||||
import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
|
||||
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatListModule } from '@angular/material/list';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatRadioModule } from '@angular/material/radio';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatToolbarModule } from '@angular/material/toolbar';
|
||||
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
|
||||
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import { TransactionsComponent } from './transactions/transactions.component';
|
||||
|
|
@ -40,7 +40,7 @@ import { environment } from 'src/environments/environment';
|
|||
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
|
||||
import { ServiceWorkerModule } from '@angular/service-worker';
|
||||
import { CategoryBreakdownComponent } from './categories/category-breakdown/category-breakdown.component';
|
||||
import { NgChartsModule } from 'ng2-charts';
|
||||
import { ChartsModule } from 'ng2-charts';
|
||||
import { TWIGS_SERVICE } from './shared/twigs.service';
|
||||
import { AuthInterceptor } from './shared/auth.interceptor';
|
||||
import { TwigsHttpService } from './shared/twigs.http.service';
|
||||
|
|
@ -93,7 +93,7 @@ import { EditBudgetComponent } from './budgets/edit-budget/edit-budget.component
|
|||
FormsModule,
|
||||
ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
|
||||
HttpClientModule,
|
||||
NgChartsModule,
|
||||
ChartsModule,
|
||||
MatCheckboxModule,
|
||||
MatCardModule,
|
||||
],
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@
|
|||
</div>
|
||||
<div *ngIf="!isLoading && budget" class="form budget-form">
|
||||
<mat-form-field>
|
||||
<input matInput [(ngModel)]="budget.name" placeholder="Name" required autocapitalize="words">
|
||||
<input matInput [(ngModel)]="budget.name" placeholder="Name" required>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<textarea matInput [(ngModel)]="budget.description" placeholder="Description" autocapitalize="sentences"></textarea>
|
||||
<textarea matInput [(ngModel)]="budget.description" placeholder="Description"></textarea>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button color="accent" (click)="save()">Save</button>
|
||||
<button class="button-delete" mat-raised-button color="warn" *ngIf="!create" (click)="delete()">Delete</button>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import { Budget } from '../budget';
|
|||
import { AppComponent } from 'src/app/app.component';
|
||||
import { User, UserPermission, Permission } from 'src/app/users/user';
|
||||
import { TWIGS_SERVICE, TwigsService } from 'src/app/shared/twigs.service';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-add-edit-budget',
|
||||
|
|
@ -20,7 +19,6 @@ export class AddEditBudgetComponent {
|
|||
|
||||
constructor(
|
||||
private app: AppComponent,
|
||||
private router: Router,
|
||||
@Inject(TWIGS_SERVICE) private twigsService: TwigsService,
|
||||
) {
|
||||
this.app.setTitle(this.title)
|
||||
|
|
@ -29,11 +27,11 @@ export class AddEditBudgetComponent {
|
|||
}
|
||||
|
||||
save(): void {
|
||||
let promise: Promise<Budget>;
|
||||
let observable;
|
||||
this.isLoading = true;
|
||||
if (this.create) {
|
||||
// This is a new budget, save it
|
||||
promise = this.twigsService.createBudget(
|
||||
observable = this.twigsService.createBudget(
|
||||
this.budget.id,
|
||||
this.budget.name,
|
||||
this.budget.description,
|
||||
|
|
@ -41,10 +39,10 @@ export class AddEditBudgetComponent {
|
|||
);
|
||||
} else {
|
||||
// This is an existing budget, update it
|
||||
promise = this.twigsService.updateBudget(this.budget.id, this.budget);
|
||||
observable = this.twigsService.updateBudget(this.budget.id, this.budget);
|
||||
}
|
||||
// TODO: Check if it was actually successful or not
|
||||
promise.then(_ => {
|
||||
observable.subscribe(val => {
|
||||
this.app.goBack();
|
||||
});
|
||||
}
|
||||
|
|
@ -52,14 +50,14 @@ export class AddEditBudgetComponent {
|
|||
delete(): void {
|
||||
this.isLoading = true;
|
||||
this.twigsService.deleteBudget(this.budget.id)
|
||||
.then(() => {
|
||||
this.router.navigateByUrl("/budgets");
|
||||
.subscribe(() => {
|
||||
this.app.goBack();
|
||||
});
|
||||
}
|
||||
|
||||
// TODO: Implement a search box with suggestions to add users
|
||||
searchUsers(username: string) {
|
||||
this.twigsService.getUsersByUsername(username).then(users => {
|
||||
this.twigsService.getUsersByUsername(username).subscribe(users => {
|
||||
this.searchedUsers = users;
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@ import { ActivatedRoute, Router } from '@angular/router';
|
|||
import { AppComponent } from 'src/app/app.component';
|
||||
import { Transaction } from 'src/app/transactions/transaction';
|
||||
import { Category } from 'src/app/categories/category';
|
||||
import { ChartDataset } from 'chart.js';
|
||||
import { Observable } from 'rxjs';
|
||||
import { Label } from 'ng2-charts';
|
||||
import { ChartDataSets } from 'chart.js';
|
||||
import { TWIGS_SERVICE, TwigsService } from 'src/app/shared/twigs.service';
|
||||
import { Actionable } from '../../shared/actionable';
|
||||
|
||||
|
|
@ -14,6 +16,7 @@ import { Actionable } from '../../shared/actionable';
|
|||
styleUrls: ['./budget-details.component.css']
|
||||
})
|
||||
export class BudgetDetailsComponent implements OnInit, OnDestroy, Actionable {
|
||||
|
||||
budget: Budget;
|
||||
public budgetBalance: number;
|
||||
public transactions: Transaction[];
|
||||
|
|
@ -24,46 +27,18 @@ export class BudgetDetailsComponent implements OnInit, OnDestroy, Actionable {
|
|||
actualIncome = 0;
|
||||
expectedExpenses = 0;
|
||||
actualExpenses = 0;
|
||||
barChartLabels: string[] = ['Income', 'Expenses'];
|
||||
barChartData: ChartDataset[] = [
|
||||
barChartLabels: Label[] = ['Income', 'Expenses'];
|
||||
barChartData: ChartDataSets[] = [
|
||||
{ data: [0, 0], label: 'Expected' },
|
||||
{ data: [0, 0], label: 'Actual' },
|
||||
];
|
||||
from: Date
|
||||
to: Date
|
||||
|
||||
constructor(
|
||||
private app: AppComponent,
|
||||
private route: ActivatedRoute,
|
||||
@Inject(TWIGS_SERVICE) private twigsService: TwigsService,
|
||||
private router: Router,
|
||||
) {
|
||||
let fromStr = this.route.snapshot.queryParamMap.get('from');
|
||||
if (fromStr) {
|
||||
let fromDate = new Date(fromStr);
|
||||
if (!isNaN(fromDate.getTime())) {
|
||||
this.from = fromDate;
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.from) {
|
||||
let date = new Date();
|
||||
date.setHours(0);
|
||||
date.setMinutes(0);
|
||||
date.setSeconds(0);
|
||||
date.setMilliseconds(0);
|
||||
date.setDate(1);
|
||||
this.from = date;
|
||||
}
|
||||
|
||||
let toStr = this.route.snapshot.queryParamMap.get('to');
|
||||
if (toStr) {
|
||||
let toDate = new Date(toStr);
|
||||
if (!isNaN(toDate.getTime())) {
|
||||
this.to = toDate;
|
||||
}
|
||||
}
|
||||
}
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.getBudget();
|
||||
|
|
@ -79,7 +54,7 @@ export class BudgetDetailsComponent implements OnInit, OnDestroy, Actionable {
|
|||
getBudget() {
|
||||
const id = this.route.snapshot.paramMap.get('id');
|
||||
this.twigsService.getBudget(id)
|
||||
.then(budget => {
|
||||
.subscribe(budget => {
|
||||
this.app.setTitle(budget.name)
|
||||
this.budget = budget;
|
||||
this.getBalance();
|
||||
|
|
@ -112,10 +87,9 @@ export class BudgetDetailsComponent implements OnInit, OnDestroy, Actionable {
|
|||
|
||||
getBalance(): void {
|
||||
const id = this.route.snapshot.paramMap.get('id');
|
||||
this.twigsService.getBudgetBalance(id, this.from, this.to)
|
||||
.then(balance => {
|
||||
this.budgetBalance = balance;
|
||||
});
|
||||
this.twigsService.getBudgetBalance(id).subscribe(balance => {
|
||||
this.budgetBalance = balance;
|
||||
});
|
||||
}
|
||||
|
||||
getTransactions(): void {
|
||||
|
|
@ -126,48 +100,53 @@ export class BudgetDetailsComponent implements OnInit, OnDestroy, Actionable {
|
|||
date.setMilliseconds(0);
|
||||
date.setDate(1);
|
||||
this.twigsService.getTransactions(this.budget.id, null, 5, date)
|
||||
.then(transactions => this.transactions = <Transaction[]>transactions);
|
||||
.subscribe(transactions => this.transactions = <Transaction[]>transactions);
|
||||
}
|
||||
|
||||
async getCategories() {
|
||||
const categories = await this.twigsService.getCategories(this.budget.id)
|
||||
const categoryBalances = new Map<string, number>();
|
||||
let categoryBalancesCount = 0;
|
||||
for (const category of categories) {
|
||||
if (category.expense) {
|
||||
this.expenses.push(category);
|
||||
this.expectedExpenses += category.amount;
|
||||
} else {
|
||||
this.income.push(category);
|
||||
this.expectedIncome += category.amount;
|
||||
}
|
||||
try {
|
||||
const balance = await this.twigsService.getCategoryBalance(category.id, this.from, this.to)
|
||||
console.log(balance);
|
||||
getCategories(): void {
|
||||
this.twigsService.getCategories(this.budget.id).subscribe(categories => {
|
||||
const categoryBalances = new Map<string, number>();
|
||||
let categoryBalancesCount = 0;
|
||||
console.log(categories);
|
||||
for (const category of categories) {
|
||||
if (category.expense) {
|
||||
this.actualExpenses += balance * -1;
|
||||
this.expenses.push(category);
|
||||
this.expectedExpenses += category.amount;
|
||||
} else {
|
||||
this.actualIncome += balance;
|
||||
this.income.push(category);
|
||||
this.expectedIncome += category.amount;
|
||||
}
|
||||
categoryBalances.set(category.id, balance);
|
||||
if (categoryBalancesCount === categories.length - 1) {
|
||||
// This weird workaround is to force the OnChanges callback to be fired.
|
||||
// Angular needs the reference to the object to change in order for it to
|
||||
// work.
|
||||
this.categoryBalances = categoryBalances;
|
||||
this.updateBarChart();
|
||||
}
|
||||
} finally {
|
||||
categoryBalancesCount++;
|
||||
this.twigsService.getCategoryBalance(category.id).subscribe(
|
||||
balance => {
|
||||
console.log(balance);
|
||||
if (category.expense) {
|
||||
this.actualExpenses += balance * -1;
|
||||
} else {
|
||||
this.actualIncome += balance;
|
||||
}
|
||||
categoryBalances.set(category.id, balance);
|
||||
categoryBalancesCount++;
|
||||
},
|
||||
error => { categoryBalancesCount++; },
|
||||
() => {
|
||||
// This weird workaround is to force the OnChanges callback to be fired.
|
||||
// Angular needs the reference to the object to change in order for it to
|
||||
// work.
|
||||
if (categoryBalancesCount === categories.length) {
|
||||
this.categoryBalances = categoryBalances;
|
||||
this.updateBarChart();
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
doAction(): void {
|
||||
this.router.navigateByUrl(this.router.routerState.snapshot.url + "/edit")
|
||||
}
|
||||
|
||||
getActionLabel(): string {
|
||||
getActionLabel(): string {
|
||||
return "Edit";
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export class BudgetsComponent implements OnInit {
|
|||
|
||||
constructor(
|
||||
private app: AppComponent,
|
||||
@Inject(TWIGS_SERVICE) private twigsService: TwigsService,
|
||||
@Inject(TWIGS_SERVICE) private twigsService: TwigsService,
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
|
|
@ -32,17 +32,16 @@ export class BudgetsComponent implements OnInit {
|
|||
this.app.setTitle('Budgets')
|
||||
this.loggedIn = true;
|
||||
this.loading = true;
|
||||
this.twigsService.getBudgets()
|
||||
.then(
|
||||
budgets => {
|
||||
console.log(budgets)
|
||||
this.budgets = budgets;
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
this.twigsService.getBudgets().subscribe(
|
||||
budgets => {
|
||||
console.log(budgets)
|
||||
this.budgets = budgets;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
error => {
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
},
|
||||
error => {
|
||||
this.loading = false;
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export class EditBudgetComponent implements OnInit {
|
|||
ngOnInit(): void {
|
||||
const id = this.route.snapshot.paramMap.get('id');
|
||||
this.twigsService.getBudget(id)
|
||||
.then(budget => {
|
||||
.subscribe(budget => {
|
||||
this.budget = budget;
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
import { Component, OnInit, Inject } from '@angular/core';
|
||||
import { Component, OnInit, Input, Inject } from '@angular/core';
|
||||
import { Category } from './category';
|
||||
import { AppComponent } from '../app.component';
|
||||
import { Observable } from 'rxjs';
|
||||
import { TransactionType } from '../transactions/transaction.type';
|
||||
import { Budget } from '../budgets/budget';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { TWIGS_SERVICE, TwigsService } from '../shared/twigs.service';
|
||||
import { Transaction } from '../transactions/transaction';
|
||||
|
||||
@Component({
|
||||
selector: 'app-categories',
|
||||
|
|
@ -31,31 +33,27 @@ export class CategoriesComponent implements OnInit {
|
|||
}
|
||||
|
||||
getCategories(): void {
|
||||
this.twigsService.getCategories(this.budgetId).then(categories => {
|
||||
this.twigsService.getCategories(this.budgetId).subscribe(categories => {
|
||||
this.categories = categories;
|
||||
for (const category of this.categories) {
|
||||
this.getCategoryBalance(category).then(balance => this.categoryBalances.set(category.id, balance));
|
||||
this.getCategoryBalance(category).subscribe(balance => this.categoryBalances.set(category.id, balance));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getCategoryBalance(category: Category): Promise<number> {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
let transactions: Transaction[]
|
||||
try {
|
||||
transactions = await this.twigsService.getTransactions(this.budgetId, category.id)
|
||||
} catch(e) {
|
||||
reject(e)
|
||||
}
|
||||
let balance = 0;
|
||||
for (const transaction of transactions) {
|
||||
if (transaction.expense) {
|
||||
balance -= transaction.amount;
|
||||
} else {
|
||||
balance += transaction.amount;
|
||||
getCategoryBalance(category: Category): Observable<number> {
|
||||
return Observable.create(subscriber => {
|
||||
this.twigsService.getTransactions(this.budgetId, category.id).subscribe(transactions => {
|
||||
let balance = 0;
|
||||
for (const transaction of transactions) {
|
||||
if (transaction.expense) {
|
||||
balance -= transaction.amount;
|
||||
} else {
|
||||
balance += transaction.amount;
|
||||
}
|
||||
}
|
||||
}
|
||||
resolve(balance);
|
||||
subscriber.next(balance);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@
|
|||
[options]="barChartOptions"
|
||||
[labels]="barChartLabels"
|
||||
[legend]="barChartLegend"
|
||||
[type]="barChartType">
|
||||
[chartType]="barChartType">
|
||||
</canvas>
|
||||
</div>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import { Component, OnInit, Input, OnChanges, SimpleChanges, SimpleChange, ViewChild } from '@angular/core';
|
||||
import { Category } from '../category';
|
||||
import { CategoriesComponent } from '../categories.component';
|
||||
import { ChartConfiguration, ChartType, ChartDataset } from 'chart.js';
|
||||
import { BaseChartDirective } from 'ng2-charts';
|
||||
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
|
||||
import { BaseChartDirective, Label } from 'ng2-charts';
|
||||
|
||||
@Component({
|
||||
selector: 'app-category-breakdown',
|
||||
|
|
@ -10,24 +10,22 @@ import { BaseChartDirective } from 'ng2-charts';
|
|||
styleUrls: ['./category-breakdown.component.css']
|
||||
})
|
||||
export class CategoryBreakdownComponent implements OnInit, OnChanges {
|
||||
barChartOptions: ChartConfiguration['options'] = {
|
||||
barChartOptions: ChartOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
x: {
|
||||
xAxes: [{
|
||||
ticks: {
|
||||
// beginAtZero: true
|
||||
beginAtZero: true
|
||||
}
|
||||
},
|
||||
y: {}
|
||||
}], yAxes: [{}]
|
||||
},
|
||||
indexAxis: 'y'
|
||||
};
|
||||
@Input() barChartLabels: string[];
|
||||
@Input() barChartData: ChartDataset[] = [
|
||||
@Input() barChartLabels: Label[];
|
||||
@Input() barChartData: ChartDataSets[] = [
|
||||
{ data: [0, 0, 0, 0], label: '' },
|
||||
];
|
||||
barChartType: ChartType = 'bar';
|
||||
barChartType: ChartType = 'horizontalBar';
|
||||
barChartLegend = true;
|
||||
@ViewChild(BaseChartDirective) chart: BaseChartDirective;
|
||||
|
||||
|
|
@ -37,9 +35,9 @@ export class CategoryBreakdownComponent implements OnInit, OnChanges {
|
|||
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
console.log(changes);
|
||||
// if (changes.barChartLabels) {
|
||||
// this.barChartLabels = changes.barChartLabels.currentValue;
|
||||
// }
|
||||
if (changes.barChartLabels) {
|
||||
this.barChartLabels = changes.barChartLabels.currentValue;
|
||||
}
|
||||
if (changes.barChartData) {
|
||||
this.barChartData = changes.barChartData.currentValue;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export class CategoryDetailsComponent implements OnInit, OnDestroy, Actionable {
|
|||
this.router.navigateByUrl(this.router.routerState.snapshot.url + "/edit")
|
||||
}
|
||||
|
||||
getActionLabel(): string {
|
||||
getActionLabel(): string {
|
||||
return "Edit";
|
||||
}
|
||||
|
||||
|
|
@ -45,7 +45,7 @@ export class CategoryDetailsComponent implements OnInit, OnDestroy, Actionable {
|
|||
getCategory(): void {
|
||||
const id = this.route.snapshot.paramMap.get('id');
|
||||
this.twigsService.getCategory(id)
|
||||
.then(category => {
|
||||
.subscribe(category => {
|
||||
category.amount /= 100;
|
||||
this.app.setTitle(category.title)
|
||||
this.category = category;
|
||||
|
|
|
|||
|
|
@ -2,14 +2,14 @@
|
|||
<p>Select a category from the list to view details about it or edit it.</p>
|
||||
</div>
|
||||
<div *ngIf="currentCategory" class="form category-form">
|
||||
<mat-form-field (keyup.enter)="save()">
|
||||
<input matInput [(ngModel)]="currentCategory.title" placeholder="Name" required autocapitalize="words">
|
||||
<mat-form-field (keyup.enter)="doAction()">
|
||||
<input matInput [(ngModel)]="currentCategory.title" placeholder="Name" required>
|
||||
</mat-form-field>
|
||||
<mat-form-field (keyup.enter)="save()">
|
||||
<textarea matInput [(ngModel)]="currentCategory.description" placeholder="Description" autocapitalize="sentences"></textarea>
|
||||
<mat-form-field (keyup.enter)="doAction()">
|
||||
<textarea matInput [(ngModel)]="currentCategory.description" placeholder="Description"></textarea>
|
||||
</mat-form-field>
|
||||
<mat-form-field (keyup.enter)="save()">
|
||||
<input matInput type="input" [(ngModel)]="currentCategory.amount" placeholder="Amount" required step="0.01">
|
||||
<mat-form-field (keyup.enter)="doAction()">
|
||||
<input matInput type="text" [(ngModel)]="currentCategory.amount" placeholder="Amount" required>
|
||||
</mat-form-field>
|
||||
<mat-radio-group [(ngModel)]="currentCategory.expense">
|
||||
<mat-radio-button [value]="true">Expense</mat-radio-button>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import { Component, OnInit, Input, Inject } from '@angular/core';
|
||||
import { Component, OnInit, Input, OnDestroy, Inject } from '@angular/core';
|
||||
import { Category } from '../category';
|
||||
import { AppComponent } from 'src/app/app.component';
|
||||
import { TWIGS_SERVICE, TwigsService } from 'src/app/shared/twigs.service';
|
||||
import { decimalToInteger } from 'src/app/shared/utils';
|
||||
|
||||
@Component({
|
||||
selector: 'app-category-form',
|
||||
|
|
@ -27,35 +26,37 @@ export class CategoryFormComponent implements OnInit {
|
|||
}
|
||||
|
||||
save(): void {
|
||||
let promise;
|
||||
this.currentCategory.amount = decimalToInteger(String(this.currentCategory.amount))
|
||||
let observable;
|
||||
if (this.create) {
|
||||
// This is a new category, save it
|
||||
promise = this.twigsService.createCategory(
|
||||
observable = this.twigsService.createCategory(
|
||||
this.currentCategory.id,
|
||||
this.budgetId,
|
||||
this.currentCategory.title,
|
||||
this.currentCategory.description,
|
||||
this.currentCategory.amount,
|
||||
this.currentCategory.amount * 100,
|
||||
this.currentCategory.expense
|
||||
);
|
||||
} else {
|
||||
// This is an existing category, update it
|
||||
const updatedCategory: Category = {
|
||||
...this.currentCategory,
|
||||
}
|
||||
promise = this.twigsService.updateCategory(
|
||||
observable = this.twigsService.updateCategory(
|
||||
this.currentCategory.id,
|
||||
this.currentCategory
|
||||
{
|
||||
name: this.currentCategory.title,
|
||||
description: this.currentCategory.description,
|
||||
amount: this.currentCategory.amount * 100,
|
||||
expense: this.currentCategory.expense,
|
||||
archived: this.currentCategory.archived
|
||||
}
|
||||
);
|
||||
}
|
||||
promise.then(_ => {
|
||||
observable.subscribe(val => {
|
||||
this.app.goBack();
|
||||
});
|
||||
}
|
||||
|
||||
delete(): void {
|
||||
this.twigsService.deleteCategory(this.currentCategory.id).then(() => {
|
||||
this.twigsService.deleteCategory(this.currentCategory.id).subscribe(() => {
|
||||
this.app.goBack();
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export class EditCategoryComponent implements OnInit {
|
|||
getCategory(): void {
|
||||
const id = this.route.snapshot.paramMap.get('id');
|
||||
this.twigsService.getCategory(id)
|
||||
.then(category => {
|
||||
.subscribe(category => {
|
||||
category.amount /= 100;
|
||||
this.app.setTitle(category.title)
|
||||
this.category = category;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
export class RecurringTransaction {
|
||||
id: string = '';
|
||||
title: string;
|
||||
description?: string = null;
|
||||
description: string = null;
|
||||
frequency: Frequency;
|
||||
start: Date = new Date();
|
||||
end?: Date;
|
||||
|
|
@ -18,7 +18,7 @@ export class Frequency {
|
|||
time: Time;
|
||||
amount?: (void | Set<DayOfWeek> | DayOfMonth | DayOfYear);
|
||||
|
||||
private constructor(unit: FrequencyUnit, count: number, time: Time, amount?: (void | Set<DayOfWeek> | DayOfMonth | DayOfYear)) {
|
||||
private constructor(unit: FrequencyUnit, count: number, time: Time, amount?: (void | Set<DayOfWeek> | DayOfMonth | DayOfYear) = null) {
|
||||
this.unit = unit;
|
||||
this.count = count;
|
||||
this.time = time;
|
||||
|
|
@ -68,20 +68,6 @@ export class Frequency {
|
|||
throw new Error(`Invalid Frequency format: ${s}`);
|
||||
}
|
||||
}
|
||||
|
||||
toString(): string {
|
||||
let parts = [this.unit.toString()]
|
||||
parts.push(this.count.toString())
|
||||
if (this.amount) {
|
||||
if (this.unit === FrequencyUnit.WEEKLY) {
|
||||
parts.push(Array.from(this.amount as Set<DayOfWeek>).join(','))
|
||||
} else {
|
||||
parts.push(this.amount.toString())
|
||||
}
|
||||
}
|
||||
parts.push(this.time.toString())
|
||||
return parts.join(';')
|
||||
}
|
||||
}
|
||||
|
||||
export enum FrequencyUnit {
|
||||
|
|
@ -111,7 +97,7 @@ export class Time {
|
|||
}
|
||||
|
||||
static parse(s: string): Time {
|
||||
if (!s.match(/[0-9]{2}:[0-9]{2}:[0-9]{2}/)) {
|
||||
if (!s.match(/[0-9]{2}:[0-9]{2}:[0-9]{2}/) {
|
||||
throw new Error('Invalid time format. Time must be formatted as HH:mm:ss');
|
||||
}
|
||||
const parts = s.split(':').map(part => Number.parseInt(part));
|
||||
|
|
@ -170,10 +156,6 @@ export class DayOfMonth {
|
|||
return DayOfMonth.PositionalDayOfWeek(position, DayOfWeek[parts[1]]);
|
||||
}
|
||||
}
|
||||
|
||||
toString(): string {
|
||||
return `${this.position}-${this.day}`
|
||||
}
|
||||
}
|
||||
|
||||
export class DayOfYear {
|
||||
|
|
@ -212,10 +194,4 @@ export class DayOfYear {
|
|||
}
|
||||
return new DayOfYear(parts[0], parts[1]);
|
||||
}
|
||||
|
||||
toString(): string {
|
||||
const monthString = this.month.toString().padStart(2, '0')
|
||||
const dayString = this.day.toString().padStart(2, '0')
|
||||
return `${monthString}-${dayString}`
|
||||
}
|
||||
}
|
||||
|
|
@ -1,77 +1,109 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
|
||||
import { BehaviorSubject, Observable, pipe, Subscriber } from 'rxjs';
|
||||
import { User, UserPermission, Permission, AuthToken } from '../users/user';
|
||||
import { TwigsService } from './twigs.service';
|
||||
import { Budget } from '../budgets/budget';
|
||||
import { Category } from '../categories/category';
|
||||
import { Transaction } from '../transactions/transaction';
|
||||
import { environment } from '../../environments/environment';
|
||||
import { Frequency, RecurringTransaction } from '../recurringtransactions/recurringtransaction';
|
||||
import { map } from 'rxjs/operators';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class TwigsHttpService implements TwigsService {
|
||||
|
||||
private options = {
|
||||
withCredentials: true
|
||||
};
|
||||
private apiUrl = environment.apiUrl;
|
||||
private budgets: BehaviorSubject<Budget[]> = new BehaviorSubject(null);
|
||||
|
||||
constructor(
|
||||
private http: HttpClient,
|
||||
private storage: Storage
|
||||
) { }
|
||||
|
||||
async login(email: string, password: string): Promise<User> {
|
||||
const url = new URL('/api/users/login', this.apiUrl)
|
||||
const auth: AuthToken = await this.request(url, HttpMethod.POST, {
|
||||
'username': email,
|
||||
'password': password
|
||||
login(email: string, password: string): Observable<User> {
|
||||
return new Observable(emitter => {
|
||||
const params = {
|
||||
'username': email,
|
||||
'password': password
|
||||
};
|
||||
this.http.post<AuthToken>(this.apiUrl + '/users/login', params, this.options)
|
||||
.subscribe(
|
||||
auth => {
|
||||
// TODO: Use token expiration to determine cookie expiration
|
||||
this.storage.setItem('Authorization', auth.token);
|
||||
this.storage.setItem('userId', auth.userId);
|
||||
this.getProfile(auth.userId).subscribe(user => emitter.next(user), error => emitter.error(error));
|
||||
},
|
||||
error => emitter.error(error)
|
||||
);
|
||||
});
|
||||
this.storage.setItem('Authorization', auth.token);
|
||||
this.storage.setItem('userId', auth.userId);
|
||||
return await this.getProfile(auth.userId);
|
||||
}
|
||||
|
||||
register(username: string, email: string, password: string): Promise<User> {
|
||||
const body = {
|
||||
register(username: string, email: string, password: string): Observable<User> {
|
||||
const params = {
|
||||
'username': username,
|
||||
'email': email,
|
||||
'password': password
|
||||
};
|
||||
const url = new URL('/api/users/register', this.apiUrl)
|
||||
return this.request<User>(url, HttpMethod.POST, body);
|
||||
return this.http.post<User>(this.apiUrl + '/users/register', params, this.options);
|
||||
}
|
||||
|
||||
logout(): Promise<void> {
|
||||
this.storage.removeItem('Authorization');
|
||||
this.storage.removeItem('userId');
|
||||
return Promise.resolve()
|
||||
// TODO: Implement this to revoke the token server-side as well
|
||||
logout(): Observable<void> {
|
||||
return new Observable(emitter => {
|
||||
this.storage.removeItem('Authorization');
|
||||
this.storage.removeItem('userId');
|
||||
emitter.next();
|
||||
emitter.complete();
|
||||
})
|
||||
// TODO: Implement this when JWT auth is implemented
|
||||
// return this.http.post<void>(this.apiUrl + '/login?logout', this.options);
|
||||
}
|
||||
|
||||
// Budgets
|
||||
getBudgets(): Promise<Budget[]> {
|
||||
const url = new URL('/api/budgets', this.apiUrl)
|
||||
return this.request(url, HttpMethod.GET)
|
||||
getBudgets(): Observable<Budget[]> {
|
||||
this.http.get<Budget[]>(this.apiUrl + '/budgets', this.options)
|
||||
.subscribe(budgets => {
|
||||
this.budgets.next(budgets);
|
||||
});
|
||||
return this.budgets;
|
||||
}
|
||||
|
||||
getBudgetBalance(
|
||||
id: string,
|
||||
from?: Date,
|
||||
to?: Date
|
||||
): Promise<number> {
|
||||
const url = new URL('/api/transactions/sum', this.apiUrl)
|
||||
url.searchParams.set('budgetId', id)
|
||||
if (from) {
|
||||
url.searchParams.set('from', from.toISOString());
|
||||
}
|
||||
if (to) {
|
||||
url.searchParams.set('to', to.toISOString());
|
||||
}
|
||||
return this.request(url, HttpMethod.GET).then((res: any) => res.balance)
|
||||
getBudgetBalance(id: string): Observable<number> {
|
||||
return this.http.get<any>(`${this.apiUrl}/transactions/sum?budgetId=${id}`, this.options)
|
||||
.pipe(map(obj => obj.balance));
|
||||
}
|
||||
|
||||
getBudget(id: string): Promise<Budget> {
|
||||
const url = new URL(`/api/budgets/${id}`, this.apiUrl)
|
||||
return this.request(url, HttpMethod.GET)
|
||||
getBudget(id: string): Observable<Budget> {
|
||||
return new Observable(emitter => {
|
||||
var cachedBudget: Budget
|
||||
if (this.budgets.value) {
|
||||
cachedBudget = this.budgets.value.find(budget => {
|
||||
return budget.id === id;
|
||||
});
|
||||
}
|
||||
if (cachedBudget) {
|
||||
emitter.next(cachedBudget);
|
||||
emitter.complete();
|
||||
} else {
|
||||
this.http.get<Budget>(`${this.apiUrl}/budgets/${id}`, this.options)
|
||||
.subscribe(budget => {
|
||||
var oldBudgets = JSON.parse(JSON.stringify(this.budgets.value));
|
||||
if (!oldBudgets) {
|
||||
oldBudgets = [];
|
||||
}
|
||||
oldBudgets.push(budget);
|
||||
oldBudgets.sort();
|
||||
this.budgets.next(oldBudgets);
|
||||
emitter.next(budget);
|
||||
emitter.complete();
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
createBudget(
|
||||
|
|
@ -79,9 +111,8 @@ export class TwigsHttpService implements TwigsService {
|
|||
name: string,
|
||||
description: string,
|
||||
users: UserPermission[],
|
||||
): Promise<Budget> {
|
||||
const url = new URL('/api/budgets', this.apiUrl)
|
||||
const body = {
|
||||
): Observable<Budget> {
|
||||
const params = {
|
||||
'id': id,
|
||||
'name': name,
|
||||
'description': description,
|
||||
|
|
@ -92,12 +123,19 @@ export class TwigsHttpService implements TwigsService {
|
|||
};
|
||||
})
|
||||
};
|
||||
return this.request(url, HttpMethod.POST, body)
|
||||
return this.http.post<Budget>(this.apiUrl + '/budgets', params, this.options)
|
||||
.pipe(map(budget => {
|
||||
var updatedBudgets = JSON.parse(JSON.stringify(this.budgets.value));
|
||||
updatedBudgets.push(budget);
|
||||
updatedBudgets.sort();
|
||||
this.budgets.next(updatedBudgets);
|
||||
return budget
|
||||
}))
|
||||
}
|
||||
|
||||
updateBudget(id: string, budget: Budget): Promise<Budget> {
|
||||
const url = new URL(`/api/budgets/${id}`, this.apiUrl)
|
||||
const body = {
|
||||
updateBudget(id: string, changes: object): Observable<Budget> {
|
||||
let budget = changes as Budget;
|
||||
const params = {
|
||||
'name': budget.name,
|
||||
'description': budget.description,
|
||||
'users': budget.users.map(userPermission => {
|
||||
|
|
@ -107,47 +145,55 @@ export class TwigsHttpService implements TwigsService {
|
|||
};
|
||||
})
|
||||
};
|
||||
return this.request(url, HttpMethod.PUT, body)
|
||||
return this.http.put<Budget>(`${this.apiUrl}/budgets/${id}`, params, this.options)
|
||||
.pipe(map(budget => {
|
||||
var updatedBudgets: Budget[] = JSON.parse(JSON.stringify(this.budgets.value));
|
||||
var index = updatedBudgets.findIndex(oldBudget => oldBudget.id === id);
|
||||
if (index > -1) {
|
||||
updatedBudgets.splice(index, 1);
|
||||
}
|
||||
updatedBudgets.push(budget);
|
||||
updatedBudgets.sort();
|
||||
this.budgets.next(updatedBudgets);
|
||||
return budget
|
||||
}));
|
||||
}
|
||||
|
||||
deleteBudget(id: String): Promise<void> {
|
||||
const url = new URL(`/api/budgets/${id}`, this.apiUrl)
|
||||
return this.request(url, HttpMethod.DELETE)
|
||||
deleteBudget(id: String): Observable<void> {
|
||||
return this.http.delete<void>(`${this.apiUrl}/budgets/${id}`, this.options)
|
||||
.pipe(map(() => {
|
||||
var updatedBudgets: Budget[] = JSON.parse(JSON.stringify(this.budgets.value));
|
||||
var index = updatedBudgets.findIndex(oldBudget => oldBudget.id === id);
|
||||
if (index > -1) {
|
||||
updatedBudgets.splice(index, 1);
|
||||
}
|
||||
updatedBudgets.sort();
|
||||
this.budgets.next(updatedBudgets);
|
||||
return;
|
||||
}));
|
||||
}
|
||||
|
||||
// Categories
|
||||
getCategories(budgetId: string, count?: number): Promise<Category[]> {
|
||||
const url = new URL(`/api/categories`, this.apiUrl)
|
||||
url.searchParams.set('budgetIds', budgetId)
|
||||
url.searchParams.set('archived', 'false')
|
||||
return this.request(url, HttpMethod.GET);
|
||||
getCategories(budgetId: string, count?: number): Observable<Category[]> {
|
||||
const params = {
|
||||
params: new HttpParams()
|
||||
.set('budgetIds', `${budgetId}`)
|
||||
.set('archived', false)
|
||||
};
|
||||
return this.http.get<Category[]>(`${this.apiUrl}/categories`, Object.assign(params, this.options));
|
||||
}
|
||||
|
||||
getCategory(id: string): Promise<Category> {
|
||||
const url = new URL(`/api/categories/${id}`, this.apiUrl)
|
||||
return this.request(url, HttpMethod.GET);
|
||||
getCategory(id: string): Observable<Category> {
|
||||
return this.http.get<Category>(`${this.apiUrl}/categories/${id}`, this.options);
|
||||
}
|
||||
|
||||
async getCategoryBalance(
|
||||
id: string,
|
||||
from?: Date,
|
||||
to?: Date
|
||||
): Promise<number> {
|
||||
const url = new URL(`/api/transactions/sum`, this.apiUrl)
|
||||
url.searchParams.set('categoryId', id)
|
||||
if (from) {
|
||||
url.searchParams.set('from', from.toISOString());
|
||||
}
|
||||
if (to) {
|
||||
url.searchParams.set('to', to.toISOString());
|
||||
}
|
||||
const res: any = await this.request(url, HttpMethod.GET);
|
||||
return res.balance;
|
||||
getCategoryBalance(id: string): Observable<number> {
|
||||
return this.http.get<any>(`${this.apiUrl}/transactions/sum?categoryId=${id}`, this.options)
|
||||
.pipe(map(obj => obj.balance));
|
||||
}
|
||||
|
||||
createCategory(id: string, budgetId: string, name: string, description: string, amount: number, isExpense: boolean): Promise<Category> {
|
||||
const url = new URL(`/api/categories`, this.apiUrl)
|
||||
const body = {
|
||||
createCategory(id: string, budgetId: string, name: string, description: string, amount: number, isExpense: boolean): Observable<Category> {
|
||||
const params = {
|
||||
'id': id,
|
||||
'title': name,
|
||||
'description': description,
|
||||
|
|
@ -155,55 +201,57 @@ export class TwigsHttpService implements TwigsService {
|
|||
'expense': isExpense,
|
||||
'budgetId': budgetId
|
||||
};
|
||||
return this.request(url, HttpMethod.POST, body);
|
||||
return this.http.post<Category>(this.apiUrl + '/categories', params, this.options);
|
||||
}
|
||||
|
||||
updateCategory(id: string, changes: object): Promise<Category> {
|
||||
const url = new URL(`/api/categories/${id}`, this.apiUrl)
|
||||
return this.request(url, HttpMethod.PUT, changes);
|
||||
updateCategory(id: string, changes: object): Observable<Category> {
|
||||
return this.http.put<Category>(`${this.apiUrl}/categories/${id}`, changes, this.options);
|
||||
}
|
||||
|
||||
deleteCategory(id: string): Promise<void> {
|
||||
const url = new URL(`/api/categories/${id}`, this.apiUrl)
|
||||
return this.request(url, HttpMethod.DELETE);
|
||||
deleteCategory(id: string): Observable<void> {
|
||||
return this.http.delete<void>(`${this.apiUrl}/categories/${id}`, this.options);
|
||||
}
|
||||
|
||||
// Transactions
|
||||
async getTransactions(
|
||||
getTransactions(
|
||||
budgetId?: string,
|
||||
categoryId?: string,
|
||||
count?: number,
|
||||
from?: Date,
|
||||
to?: Date
|
||||
): Promise<Transaction[]> {
|
||||
const url = new URL(`/api/transactions`, this.apiUrl)
|
||||
): Observable<Transaction[]> {
|
||||
let httpParams = new HttpParams();
|
||||
if (budgetId) {
|
||||
url.searchParams.set('budgetIds', budgetId);
|
||||
httpParams = httpParams.set('budgetIds', `${budgetId}`);
|
||||
}
|
||||
if (categoryId) {
|
||||
url.searchParams.set('categoryIds', categoryId);
|
||||
httpParams = httpParams.set('categoryIds', `${categoryId}`);
|
||||
}
|
||||
if (from) {
|
||||
url.searchParams.set('from', from.toISOString());
|
||||
httpParams = httpParams.set('from', from.toISOString());
|
||||
}
|
||||
if (to) {
|
||||
url.searchParams.set('to', to.toISOString());
|
||||
httpParams = httpParams.set('to', to.toISOString());
|
||||
}
|
||||
const transactions: Transaction[] = await this.request(url, HttpMethod.GET)
|
||||
transactions.forEach(transaction => {
|
||||
transaction.date = new Date(transaction.date);
|
||||
})
|
||||
return transactions
|
||||
const params = { params: httpParams };
|
||||
return this.http.get<Transaction[]>(`${this.apiUrl}/transactions`, Object.assign(params, this.options))
|
||||
.pipe(map(transactions => {
|
||||
transactions.forEach(transaction => {
|
||||
transaction.date = new Date(transaction.date);
|
||||
});
|
||||
return transactions;
|
||||
}));
|
||||
}
|
||||
|
||||
async getTransaction(id: string): Promise<Transaction> {
|
||||
const url = new URL(`/api/transactions/${id}`, this.apiUrl)
|
||||
const transaction: Transaction = await this.request(url, HttpMethod.GET)
|
||||
transaction.date = new Date(transaction.date)
|
||||
return transaction
|
||||
getTransaction(id: string): Observable<Transaction> {
|
||||
return this.http.get<Transaction>(`${this.apiUrl}/transactions/${id}`, this.options)
|
||||
.pipe(map(transaction => {
|
||||
transaction.date = new Date(transaction.date);
|
||||
return transaction;
|
||||
}));
|
||||
}
|
||||
|
||||
async createTransaction(
|
||||
createTransaction(
|
||||
id: string,
|
||||
budgetId: string,
|
||||
name: string,
|
||||
|
|
@ -212,9 +260,8 @@ export class TwigsHttpService implements TwigsService {
|
|||
date: Date,
|
||||
expense: boolean,
|
||||
category: string
|
||||
): Promise<Transaction> {
|
||||
const url = new URL(`/api/transactions`, this.apiUrl)
|
||||
const body = {
|
||||
): Observable<Transaction> {
|
||||
const params = {
|
||||
'id': id,
|
||||
'title': name,
|
||||
'description': description,
|
||||
|
|
@ -224,147 +271,25 @@ export class TwigsHttpService implements TwigsService {
|
|||
'categoryId': category,
|
||||
'budgetId': budgetId
|
||||
};
|
||||
const transaction: Transaction = await this.request(url, HttpMethod.POST, body)
|
||||
transaction.date = new Date(transaction.date)
|
||||
return transaction
|
||||
return this.http.post<Transaction>(this.apiUrl + '/transactions', params, this.options);
|
||||
}
|
||||
|
||||
async updateTransaction(id: string, transaction: Transaction): Promise<Transaction> {
|
||||
const body: any = transaction;
|
||||
body.date = transaction.date.toISOString()
|
||||
const url = new URL(`/api/transactions/${id}`, this.apiUrl)
|
||||
const updatedTransaction: Transaction = await this.request(url, HttpMethod.PUT, body)
|
||||
updatedTransaction.date = new Date(updatedTransaction.date)
|
||||
return updatedTransaction
|
||||
updateTransaction(id: string, changes: object): Observable<Transaction> {
|
||||
return this.http.put<Transaction>(`${this.apiUrl}/transactions/${id}`, changes, this.options);
|
||||
}
|
||||
|
||||
deleteTransaction(id: string): Promise<void> {
|
||||
const url = new URL(`/api/transactions/${id}`, this.apiUrl)
|
||||
return this.request(url, HttpMethod.DELETE)
|
||||
}
|
||||
|
||||
// Recurring Transactions
|
||||
async getRecurringTransactions(
|
||||
budgetId?: string,
|
||||
categoryId?: string,
|
||||
count?: number,
|
||||
from?: Date,
|
||||
to?: Date
|
||||
): Promise<RecurringTransaction[]> {
|
||||
const url = new URL(`/api/recurringtransactions`, this.apiUrl)
|
||||
if (budgetId) {
|
||||
url.searchParams.set('budgetIds', budgetId);
|
||||
}
|
||||
if (categoryId) {
|
||||
url.searchParams.set('categoryIds', categoryId);
|
||||
}
|
||||
if (from) {
|
||||
url.searchParams.set('from', from.toISOString());
|
||||
}
|
||||
if (to) {
|
||||
url.searchParams.set('to', to.toISOString());
|
||||
}
|
||||
const transactions: RecurringTransaction[] = await this.request(url, HttpMethod.GET)
|
||||
transactions.forEach(transaction => {
|
||||
transaction.frequency = Frequency.parse(transaction.frequency as any)
|
||||
})
|
||||
return transactions
|
||||
}
|
||||
|
||||
async getRecurringTransaction(id: string): Promise<RecurringTransaction> {
|
||||
const url = new URL(`/api/recurringtransactions/${id}`, this.apiUrl)
|
||||
const transaction: RecurringTransaction = await this.request(url, HttpMethod.GET)
|
||||
transaction.frequency = Frequency.parse(transaction.frequency as any)
|
||||
return transaction
|
||||
}
|
||||
|
||||
async createRecurringTransaction(
|
||||
id: string,
|
||||
budgetId: string,
|
||||
name: string,
|
||||
description: string,
|
||||
amount: number,
|
||||
frequency: Frequency,
|
||||
start: Date,
|
||||
expense: boolean,
|
||||
category: string,
|
||||
end?: Date,
|
||||
): Promise<RecurringTransaction> {
|
||||
const url = new URL(`/api/transactions`, this.apiUrl)
|
||||
const body = {
|
||||
'id': id,
|
||||
'title': name,
|
||||
'description': description,
|
||||
'frequency': frequency.toString(),
|
||||
'start': start.toISOString(),
|
||||
'finish': end?.toISOString(),
|
||||
'amount': amount,
|
||||
'expense': expense,
|
||||
'categoryId': category,
|
||||
'budgetId': budgetId
|
||||
};
|
||||
const transaction: RecurringTransaction = await this.request(url, HttpMethod.POST, body)
|
||||
transaction.frequency = Frequency.parse(transaction.frequency as any)
|
||||
return transaction
|
||||
}
|
||||
|
||||
async updateRecurringTransaction(id: string, transaction: RecurringTransaction): Promise<RecurringTransaction> {
|
||||
const body: any = transaction;
|
||||
body.frequency = transaction.frequency.toString()
|
||||
const url = new URL(`/api/transactions/${id}`, this.apiUrl)
|
||||
const updatedTransaction: RecurringTransaction = await this.request(url, HttpMethod.PUT, body)
|
||||
updatedTransaction.frequency = Frequency.parse(updatedTransaction.frequency as any)
|
||||
return updatedTransaction
|
||||
}
|
||||
|
||||
deleteRecurringTransaction(id: string): Promise<void> {
|
||||
const url = new URL(`/api/recurringtransactions/${id}`, this.apiUrl)
|
||||
return this.request(url, HttpMethod.DELETE)
|
||||
deleteTransaction(id: string): Observable<void> {
|
||||
return this.http.delete<void>(`${this.apiUrl}/transactions/${id}`, this.options);
|
||||
}
|
||||
|
||||
// Users
|
||||
getProfile(id: string): Promise<User> {
|
||||
const url = new URL(`/api/users/${id}`, this.apiUrl)
|
||||
return this.request(url, HttpMethod.GET)
|
||||
getProfile(id: string): Observable<User> {
|
||||
return this.http.get<User>(`${this.apiUrl}/users/${id}`, this.options);
|
||||
}
|
||||
|
||||
getUsersByUsername(username: string): Promise<User[]> {
|
||||
return Promise.reject("Not yet implemented")
|
||||
}
|
||||
|
||||
private async request<T>(url: URL, method: HttpMethod, body?: any): Promise<T> {
|
||||
const headers = {
|
||||
'content-type': 'application/json'
|
||||
}
|
||||
|
||||
const token = this.storage.getItem('Authorization')
|
||||
if (token) {
|
||||
headers['authorization'] = `Bearer ${token}`
|
||||
}
|
||||
|
||||
let jsonBody: string;
|
||||
if (body) {
|
||||
jsonBody = JSON.stringify(body)
|
||||
}
|
||||
|
||||
const res = await fetch(url, {
|
||||
credentials: 'include',
|
||||
headers: headers,
|
||||
method: method,
|
||||
body: jsonBody
|
||||
})
|
||||
|
||||
if (res.status === 204) {
|
||||
// No content
|
||||
return
|
||||
}
|
||||
return res.json()
|
||||
getUsersByUsername(username: string): Observable<User[]> {
|
||||
return new Observable(subscriber => {
|
||||
subscriber.error("Not yet implemented")
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
enum HttpMethod {
|
||||
GET = "GET",
|
||||
POST = "POST",
|
||||
PUT = "PUT",
|
||||
DELETE = "DELETE",
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
|
||||
import { Observable, Subscriber } from 'rxjs';
|
||||
import { User, UserPermission } from '../users/user';
|
||||
import { TwigsService } from './twigs.service';
|
||||
import { Budget } from '../budgets/budget';
|
||||
import { Category } from '../categories/category';
|
||||
import { Transaction } from '../transactions/transaction';
|
||||
import { randomId } from '../shared/utils';
|
||||
import { Frequency, RecurringTransaction } from '../recurringtransactions/recurringtransaction';
|
||||
|
||||
/**
|
||||
* This is intended to be a very simple implementation of the TwigsService used for testing out the UI and quickly iterating on it.
|
||||
|
|
@ -17,6 +18,7 @@ import { Frequency, RecurringTransaction } from '../recurringtransactions/recurr
|
|||
export class TwigsLocalService implements TwigsService {
|
||||
|
||||
constructor(
|
||||
private http: HttpClient
|
||||
) { }
|
||||
|
||||
private users: User[] = [new User(randomId(), 'test', 'test@example.com')];
|
||||
|
|
@ -25,53 +27,63 @@ export class TwigsLocalService implements TwigsService {
|
|||
private categories: Category[] = [];
|
||||
|
||||
// Auth
|
||||
login(email: string, password: string): Promise<User> {
|
||||
return new Promise((resolve, reject) => {
|
||||
login(email: string, password: string): Observable<User> {
|
||||
return new Observable(subscriber => {
|
||||
const filteredUsers = this.users.filter(user => {
|
||||
return (user.email === email || user.username === email);
|
||||
});
|
||||
if (filteredUsers.length !== 0) {
|
||||
resolve(filteredUsers[0]);
|
||||
subscriber.next(filteredUsers[0]);
|
||||
} else {
|
||||
reject('No users found');
|
||||
subscriber.error('No users found');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
register(username: string, email: string, password: string): Promise<User> {
|
||||
return new Promise((resolve, reject) => {
|
||||
register(username: string, email: string, password: string): Observable<User> {
|
||||
return new Observable(subscriber => {
|
||||
const user = new User();
|
||||
user.username = username;
|
||||
user.email = email;
|
||||
user.id = randomId();
|
||||
this.users.push(user);
|
||||
resolve(user);
|
||||
subscriber.next(user);
|
||||
subscriber.complete();
|
||||
});
|
||||
}
|
||||
|
||||
logout(): Promise<void> {
|
||||
return Promise.resolve()
|
||||
logout(): Observable<void> {
|
||||
return new Observable(subscriber => {
|
||||
subscriber.complete();
|
||||
});
|
||||
}
|
||||
|
||||
// Budgets
|
||||
getBudgets(): Promise<Budget[]> {
|
||||
return Promise.resolve(this.budgets)
|
||||
getBudgets(): Observable<Budget[]> {
|
||||
return new Observable(subscriber => {
|
||||
subscriber.next(this.budgets);
|
||||
subscriber.complete();
|
||||
});
|
||||
}
|
||||
|
||||
getBudgetBalance(id: string, from?: Date, to?: Date): Promise<number> {
|
||||
return Promise.resolve(200)
|
||||
getBudgetBalance(id: string): Observable<number> {
|
||||
return new Observable(emitter => {
|
||||
emitter.next(200);
|
||||
emitter.complete()
|
||||
})
|
||||
}
|
||||
|
||||
getBudget(id: string): Promise<Budget> {
|
||||
return new Promise((resolve, reject) => {
|
||||
getBudget(id: string): Observable<Budget> {
|
||||
return new Observable(subscriber => {
|
||||
const budget = this.budgets.filter(it => {
|
||||
return it.id === id;
|
||||
})[0];
|
||||
if (budget) {
|
||||
resolve(budget);
|
||||
subscriber.next(budget);
|
||||
} else {
|
||||
reject('No budget found for given id');
|
||||
subscriber.error('No budget found for given id');
|
||||
}
|
||||
subscriber.complete();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -80,20 +92,21 @@ export class TwigsLocalService implements TwigsService {
|
|||
name: string,
|
||||
description: string,
|
||||
users: UserPermission[],
|
||||
): Promise<Budget> {
|
||||
return new Promise((resolve, reject) => {
|
||||
): Observable<Budget> {
|
||||
return new Observable(subscriber => {
|
||||
const budget = new Budget();
|
||||
budget.name = name;
|
||||
budget.description = description;
|
||||
budget.users = users;
|
||||
budget.id = id;
|
||||
this.budgets.push(budget);
|
||||
resolve(budget);
|
||||
subscriber.next(budget);
|
||||
subscriber.complete();
|
||||
});
|
||||
}
|
||||
|
||||
updateBudget(id: string, budget: Budget): Promise<Budget> {
|
||||
return new Promise((resolve, reject) => {
|
||||
updateBudget(id: string, changes: object): Observable<Budget> {
|
||||
return new Observable(subscriber => {
|
||||
const budget = this.budgets.filter(it => {
|
||||
return it.id === id;
|
||||
})[0];
|
||||
|
|
@ -101,7 +114,7 @@ export class TwigsLocalService implements TwigsService {
|
|||
const index = this.budgets.indexOf(budget);
|
||||
this.updateValues(
|
||||
budget,
|
||||
budget,
|
||||
changes,
|
||||
[
|
||||
'name',
|
||||
'description',
|
||||
|
|
@ -109,49 +122,55 @@ export class TwigsLocalService implements TwigsService {
|
|||
]
|
||||
);
|
||||
this.budgets[index] = budget;
|
||||
resolve(budget);
|
||||
subscriber.next(budget);
|
||||
} else {
|
||||
reject('No budget found for given id');
|
||||
subscriber.error('No budget found for given id');
|
||||
}
|
||||
subscriber.complete();
|
||||
});
|
||||
}
|
||||
|
||||
deleteBudget(id: string): Promise<void> {
|
||||
return new Promise((resolve, reject) => {
|
||||
deleteBudget(id: string): Observable<void> {
|
||||
return new Observable(subscriber => {
|
||||
const budget = this.budgets.filter(it => {
|
||||
return budget.id === id;
|
||||
})[0];
|
||||
if (budget) {
|
||||
const index = this.budgets.indexOf(budget);
|
||||
delete this.budgets[index];
|
||||
resolve();
|
||||
subscriber.complete();
|
||||
} else {
|
||||
reject('No budget found for given id');
|
||||
subscriber.error('No budget found for given id');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Categories
|
||||
getCategories(budgetId: string, count?: number): Promise<Category[]> {
|
||||
return new Promise((resolve, reject) => {
|
||||
resolve(this.categories.filter(category => {
|
||||
getCategories(budgetId: string, count?: number): Observable<Category[]> {
|
||||
return new Observable(subscriber => {
|
||||
subscriber.next(this.categories.filter(category => {
|
||||
return category.budgetId === budgetId;
|
||||
}));
|
||||
subscriber.complete();
|
||||
});
|
||||
}
|
||||
|
||||
getCategory(id: string): Promise<Category> {
|
||||
return new Promise((resolve, reject) => {
|
||||
resolve(this.findById(this.categories, id));
|
||||
getCategory(id: string): Observable<Category> {
|
||||
return new Observable(subscriber => {
|
||||
subscriber.next(this.findById(this.categories, id));
|
||||
subscriber.complete();
|
||||
});
|
||||
}
|
||||
|
||||
getCategoryBalance(id: string, from?: Date, to?: Date): Promise<number> {
|
||||
return Promise.resolve(20);
|
||||
getCategoryBalance(id: string): Observable<number> {
|
||||
return new Observable(emitter => {
|
||||
emitter.next(20);
|
||||
emitter.complete()
|
||||
})
|
||||
}
|
||||
|
||||
createCategory(id: string, budgetId: string, name: string, description: string, amount: number, isExpense: boolean): Promise<Category> {
|
||||
return new Promise((resolve, reject) => {
|
||||
createCategory(id: string, budgetId: string, name: string, description: string, amount: number, isExpense: boolean): Observable<Category> {
|
||||
return Observable.create(subscriber => {
|
||||
const category = new Category();
|
||||
category.title = name;
|
||||
category.description = description;
|
||||
|
|
@ -160,12 +179,13 @@ export class TwigsLocalService implements TwigsService {
|
|||
category.budgetId = budgetId;
|
||||
category.id = id;
|
||||
this.categories.push(category);
|
||||
resolve(category);
|
||||
subscriber.next(category);
|
||||
subscriber.complete();
|
||||
});
|
||||
}
|
||||
|
||||
updateCategory(id: string, changes: object): Promise<Category> {
|
||||
return new Promise((resolve, reject) => {
|
||||
updateCategory(id: string, changes: object): Observable<Category> {
|
||||
return new Observable(subscriber => {
|
||||
const category = this.findById(this.categories, id);
|
||||
if (category) {
|
||||
const index = this.categories.indexOf(category);
|
||||
|
|
@ -180,30 +200,31 @@ export class TwigsLocalService implements TwigsService {
|
|||
]
|
||||
);
|
||||
this.categories[index] = category;
|
||||
resolve(category);
|
||||
subscriber.next(category);
|
||||
} else {
|
||||
reject('No category found for given id');
|
||||
subscriber.error('No category found for given id');
|
||||
}
|
||||
subscriber.complete();
|
||||
});
|
||||
}
|
||||
|
||||
deleteCategory(id: string): Promise<void> {
|
||||
return new Promise((resolve, reject) => {
|
||||
deleteCategory(id: string): Observable<void> {
|
||||
return new Observable(subscriber => {
|
||||
const category = this.findById(this.categories, id);
|
||||
if (category) {
|
||||
const index = this.categories.indexOf(category);
|
||||
delete this.transactions[index];
|
||||
resolve();
|
||||
subscriber.complete();
|
||||
} else {
|
||||
reject('No category found for given id');
|
||||
subscriber.error('No category found for given id');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Transactions
|
||||
getTransactions(budgetId?: string, categoryId?: string, count?: number): Promise<Transaction[]> {
|
||||
return new Promise((resolve, reject) => {
|
||||
resolve(this.transactions.filter(transaction => {
|
||||
getTransactions(budgetId?: string, categoryId?: string, count?: number): Observable<Transaction[]> {
|
||||
return new Observable(subscriber => {
|
||||
subscriber.next(this.transactions.filter(transaction => {
|
||||
let include = true;
|
||||
if (budgetId) {
|
||||
include = transaction.budgetId === budgetId;
|
||||
|
|
@ -213,11 +234,15 @@ export class TwigsLocalService implements TwigsService {
|
|||
}
|
||||
return include;
|
||||
}));
|
||||
subscriber.complete();
|
||||
});
|
||||
}
|
||||
|
||||
getTransaction(id: string): Promise<Transaction> {
|
||||
return Promise.resolve(this.findById(this.transactions, id));
|
||||
getTransaction(id: string): Observable<Transaction> {
|
||||
return new Observable(subscriber => {
|
||||
subscriber.next(this.findById(this.transactions, id));
|
||||
subscriber.complete();
|
||||
});
|
||||
}
|
||||
|
||||
createTransaction(
|
||||
|
|
@ -229,8 +254,8 @@ export class TwigsLocalService implements TwigsService {
|
|||
date: Date,
|
||||
isExpense: boolean,
|
||||
category: string
|
||||
): Promise<Transaction> {
|
||||
return new Promise((resolve, reject) => {
|
||||
): Observable<Transaction> {
|
||||
return new Observable(subscriber => {
|
||||
const transaction = new Transaction();
|
||||
transaction.title = name;
|
||||
transaction.description = description;
|
||||
|
|
@ -241,12 +266,13 @@ export class TwigsLocalService implements TwigsService {
|
|||
transaction.budgetId = budgetId;
|
||||
transaction.id = randomId();
|
||||
this.transactions.push(transaction);
|
||||
resolve(transaction);
|
||||
subscriber.next(transaction);
|
||||
subscriber.complete();
|
||||
});
|
||||
}
|
||||
|
||||
updateTransaction(id: string, changes: object): Promise<Transaction> {
|
||||
return new Promise((resolve, reject) => {
|
||||
updateTransaction(id: string, changes: object): Observable<Transaction> {
|
||||
return new Observable(subscriber => {
|
||||
const transaction = this.findById(this.transactions, id);
|
||||
if (transaction) {
|
||||
const index = this.transactions.indexOf(transaction);
|
||||
|
|
@ -265,71 +291,38 @@ export class TwigsLocalService implements TwigsService {
|
|||
]
|
||||
);
|
||||
this.transactions[index] = transaction;
|
||||
resolve(transaction);
|
||||
subscriber.next(transaction);
|
||||
} else {
|
||||
reject('No transaction found for given id');
|
||||
subscriber.error('No transaction found for given id');
|
||||
}
|
||||
subscriber.complete();
|
||||
});
|
||||
}
|
||||
|
||||
deleteTransaction(id: string): Promise<void> {
|
||||
return new Promise((resolve, reject) => {
|
||||
deleteTransaction(id: string): Observable<void> {
|
||||
return new Observable(subscriber => {
|
||||
const transaction = this.findById(this.transactions, id);
|
||||
if (transaction) {
|
||||
const index = this.transactions.indexOf(transaction);
|
||||
delete this.transactions[index];
|
||||
resolve();
|
||||
subscriber.complete();
|
||||
} else {
|
||||
reject('No transaction found for given id');
|
||||
subscriber.error('No transaction found for given id');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Recurring Transactions
|
||||
getRecurringTransactions(
|
||||
budgetId?: string,
|
||||
categoryId?: string,
|
||||
count?: number,
|
||||
from?: Date,
|
||||
to?: Date
|
||||
): Promise<RecurringTransaction[]> {
|
||||
return Promise.reject("Not yet implemented")
|
||||
}
|
||||
|
||||
getRecurringTransaction(id: string): Promise<RecurringTransaction> {
|
||||
return Promise.reject("Not yet implemented")
|
||||
}
|
||||
|
||||
createRecurringTransaction(
|
||||
id: string,
|
||||
budgetId: string,
|
||||
name: string,
|
||||
description: string,
|
||||
amount: number,
|
||||
frequency: Frequency,
|
||||
start: Date,
|
||||
expense: boolean,
|
||||
category: string,
|
||||
end?: Date,
|
||||
): Promise<RecurringTransaction> {
|
||||
return Promise.reject("Not yet implemented")
|
||||
}
|
||||
|
||||
updateRecurringTransaction(id: string, transaction: RecurringTransaction): Promise<RecurringTransaction> {
|
||||
return Promise.reject("Not yet implemented")
|
||||
}
|
||||
|
||||
deleteRecurringTransaction(id: string): Promise<void> {
|
||||
return Promise.reject("Not yet implemented")
|
||||
}
|
||||
|
||||
// Users
|
||||
getProfile(id: string): Promise<User> {
|
||||
return Promise.reject("Not yet implemented");
|
||||
getProfile(id: string): Observable<User> {
|
||||
return new Observable(subscriber => {
|
||||
subscriber.error("Not yet implemented")
|
||||
});
|
||||
}
|
||||
|
||||
getUsersByUsername(username: string): Promise<User[]> {
|
||||
return Promise.resolve(this.users.filter(user => user.username.indexOf(username) > -1))
|
||||
getUsersByUsername(username: string): Observable<User[]> {
|
||||
return new Observable(subscriber => {
|
||||
subscriber.next(this.users.filter(user => user.username.indexOf(username) > -1 ));
|
||||
});
|
||||
}
|
||||
|
||||
private updateValues(old: object, changes: object, keys: string[]) {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { InjectionToken } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
import { User, UserPermission } from '../users/user';
|
||||
import { Budget } from '../budgets/budget';
|
||||
import { Category } from '../categories/category';
|
||||
|
|
@ -7,30 +8,30 @@ import { Transaction } from '../transactions/transaction';
|
|||
|
||||
export interface TwigsService {
|
||||
// Auth
|
||||
login(email: string, password: string): Promise<User>;
|
||||
register(username: string, email: string, password: string): Promise<User>;
|
||||
logout(): Promise<void>;
|
||||
login(email: string, password: string): Observable<User>;
|
||||
register(username: string, email: string, password: string): Observable<User>;
|
||||
logout(): Observable<void>;
|
||||
|
||||
// Budgets
|
||||
getBudgets(): Promise<Budget[]>;
|
||||
getBudget(id: string): Promise<Budget>;
|
||||
getBudgetBalance(id: string, from?: Date, to?: Date): Promise<number>;
|
||||
getBudgets(): Observable<Budget[]>;
|
||||
getBudget(id: string): Observable<Budget>;
|
||||
getBudgetBalance(id: string): Observable<number>;
|
||||
createBudget(
|
||||
id: string,
|
||||
name: string,
|
||||
description: string,
|
||||
users: UserPermission[],
|
||||
): Promise<Budget>;
|
||||
updateBudget(id: string, budget: Budget): Promise<Budget>;
|
||||
deleteBudget(id: string): Promise<void>;
|
||||
): Observable<Budget>;
|
||||
updateBudget(id: string, changes: object): Observable<Budget>;
|
||||
deleteBudget(id: string): Observable<void>;
|
||||
|
||||
// Categories
|
||||
getCategories(budgetId?: string, count?: number): Promise<Category[]>;
|
||||
getCategory(id: string): Promise<Category>;
|
||||
getCategoryBalance(id: string, from?: Date, to?: Date): Promise<number>;
|
||||
createCategory(id: string, budgetId: string, name: string, description: string, amount: number, isExpense: boolean): Promise<Category>;
|
||||
updateCategory(id: string, category: Category): Promise<Category>;
|
||||
deleteCategory(id: string): Promise<void>;
|
||||
getCategories(budgetId?: string, count?: number): Observable<Category[]>;
|
||||
getCategory(id: string): Observable<Category>;
|
||||
getCategoryBalance(id: string): Observable<number>;
|
||||
createCategory(id: string, budgetId: string, name: string, description: string, amount: number, isExpense: boolean): Observable<Category>;
|
||||
updateCategory(id: string, changes: object): Observable<Category>;
|
||||
deleteCategory(id: string): Observable<void>;
|
||||
|
||||
// Transactions
|
||||
getTransactions(
|
||||
|
|
@ -39,8 +40,8 @@ export interface TwigsService {
|
|||
count?: number,
|
||||
from?: Date,
|
||||
to?: Date
|
||||
): Promise<Transaction[]>;
|
||||
getTransaction(id: string): Promise<Transaction>;
|
||||
): Observable<Transaction[]>;
|
||||
getTransaction(id: string): Observable<Transaction>;
|
||||
createTransaction(
|
||||
id: string,
|
||||
budgetId: string,
|
||||
|
|
@ -50,19 +51,15 @@ export interface TwigsService {
|
|||
date: Date,
|
||||
isExpense: boolean,
|
||||
category: string
|
||||
): Promise<Transaction>;
|
||||
updateTransaction(id: string, transaction: Transaction): Promise<Transaction>;
|
||||
deleteTransaction(id: string): Promise<void>;
|
||||
): Observable<Transaction>;
|
||||
updateTransaction(id: string, changes: object): Observable<Transaction>;
|
||||
deleteTransaction(id: string): Observable<void>;
|
||||
|
||||
// Recurring Transactions
|
||||
getRecurringTransactions(
|
||||
budgetId?: string,
|
||||
categoryId?: string,
|
||||
count?: number,
|
||||
from?: Date,
|
||||
to?: Date
|
||||
): Promise<RecurringTransaction[]>;
|
||||
getRecurringTransaction(id: string): Promise<RecurringTransaction>;
|
||||
budgetId: string,
|
||||
): Observable<RecurringTransaction[]>;
|
||||
getRecurringTransaction(id: string): Observable<RecurringTransaction>;
|
||||
createRecurringTransaction(
|
||||
id: string,
|
||||
budgetId: string,
|
||||
|
|
@ -74,12 +71,12 @@ export interface TwigsService {
|
|||
expense: boolean,
|
||||
category: string,
|
||||
end?: Date,
|
||||
): Promise<RecurringTransaction>;
|
||||
updateRecurringTransaction(id: string, transaction: RecurringTransaction): Promise<RecurringTransaction>;
|
||||
deleteRecurringTransaction(id: string): Promise<void>;
|
||||
): Observable<RecurringTransaction>;
|
||||
updateRecurringTransaction(id: string, changes: object): Observable<RecurringTransaction>;
|
||||
deleteRecurringTransaction(id: string): Observable<void>;
|
||||
|
||||
getProfile(id: string): Promise<User>;
|
||||
getUsersByUsername(username: string): Promise<User[]>;
|
||||
getProfile(id: string): Observable<User>;
|
||||
getUsersByUsername(username: string): Observable<User[]>;
|
||||
}
|
||||
|
||||
export let TWIGS_SERVICE = new InjectionToken<TwigsService>('twigs.service');
|
||||
|
|
|
|||
|
|
@ -5,11 +5,3 @@ export function randomId(): string {
|
|||
window.crypto.getRandomValues(bytes)
|
||||
return Array.from(bytes, (byte) => CHARACTERS[byte % CHARACTERS.length]).join('')
|
||||
}
|
||||
|
||||
export function decimalToInteger(amount: string): number {
|
||||
if (amount[amount.length - 3] === "." || amount[amount.length - 3] === ",") {
|
||||
return Number(amount.replace(/[,.]/g, ""))
|
||||
} else {
|
||||
return Number(amount + "00")
|
||||
}
|
||||
}
|
||||
|
|
@ -3,13 +3,13 @@
|
|||
</div>
|
||||
<div [hidden]="!currentTransaction" *ngIf="currentTransaction" class="form transaction-form">
|
||||
<mat-form-field>
|
||||
<input matInput [(ngModel)]="currentTransaction.title" placeholder="Name" required autocapitalize="words">
|
||||
<input matInput [(ngModel)]="currentTransaction.title" placeholder="Name" required>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<textarea matInput [(ngModel)]="currentTransaction.description" placeholder="Description" autocapitalize="sentences"></textarea>
|
||||
<textarea matInput [(ngModel)]="currentTransaction.description" placeholder="Description"></textarea>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input matInput type="number" [(ngModel)]="currentTransaction.amount" placeholder="Amount" required step="0.01">
|
||||
<input matInput type="text" [(ngModel)]="currentTransaction.amount" placeholder="Amount" required>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input matInput type="date" [ngModel]="transactionDate | date:'yyyy-MM-dd'"
|
||||
|
|
|
|||
|
|
@ -4,8 +4,7 @@ import { TransactionType } from '../transaction.type';
|
|||
import { Category } from 'src/app/categories/category';
|
||||
import { AppComponent } from 'src/app/app.component';
|
||||
import { TWIGS_SERVICE, TwigsService } from 'src/app/shared/twigs.service';
|
||||
import { MatLegacyRadioChange as MatRadioChange } from '@angular/material/legacy-radio';
|
||||
import { decimalToInteger } from 'src/app/shared/utils';
|
||||
import { MatRadioChange } from '@angular/material/radio';
|
||||
|
||||
@Component({
|
||||
selector: 'app-add-edit-transaction',
|
||||
|
|
@ -19,6 +18,7 @@ export class AddEditTransactionComponent implements OnInit, OnChanges {
|
|||
@Input() create: boolean
|
||||
public transactionType = TransactionType;
|
||||
public categories: Category[];
|
||||
public rawAmount: string;
|
||||
public currentTime: string;
|
||||
public transactionDate: string;
|
||||
|
||||
|
|
@ -55,14 +55,15 @@ export class AddEditTransactionComponent implements OnInit, OnChanges {
|
|||
|
||||
updateCategories(change: MatRadioChange) {
|
||||
this.twigsService.getCategories(this.budgetId)
|
||||
.then(newCategories => {
|
||||
.subscribe(newCategories => {
|
||||
this.categories = newCategories.filter(category => category.expense === change.value)
|
||||
})
|
||||
}
|
||||
|
||||
save(): void {
|
||||
let promise;
|
||||
this.currentTransaction.amount = decimalToInteger(String(this.currentTransaction.amount))
|
||||
// The amount will be input as a decimal value so we need to convert it
|
||||
// to an integer
|
||||
let observable;
|
||||
this.currentTransaction.date = new Date();
|
||||
const dateParts = this.transactionDate.split('-');
|
||||
this.currentTransaction.date.setFullYear(parseInt(dateParts[0], 10));
|
||||
|
|
@ -73,34 +74,38 @@ export class AddEditTransactionComponent implements OnInit, OnChanges {
|
|||
this.currentTransaction.date.setMinutes(parseInt(timeParts[1], 10));
|
||||
if (this.create) {
|
||||
// This is a new transaction, save it
|
||||
promise = this.twigsService.createTransaction(
|
||||
observable = this.twigsService.createTransaction(
|
||||
this.currentTransaction.id,
|
||||
this.budgetId,
|
||||
this.currentTransaction.title,
|
||||
this.currentTransaction.description,
|
||||
this.currentTransaction.amount,
|
||||
Math.round(this.currentTransaction.amount * 100),
|
||||
this.currentTransaction.date,
|
||||
this.currentTransaction.expense,
|
||||
this.currentTransaction.categoryId,
|
||||
);
|
||||
} else {
|
||||
// This is an existing transaction, update it
|
||||
const updatedTransaction: Transaction = {
|
||||
...this.currentTransaction,
|
||||
}
|
||||
promise = this.twigsService.updateTransaction(
|
||||
observable = this.twigsService.updateTransaction(
|
||||
this.currentTransaction.id,
|
||||
updatedTransaction
|
||||
{
|
||||
title: this.currentTransaction.title,
|
||||
description: this.currentTransaction.description,
|
||||
amount: Math.round(this.currentTransaction.amount * 100),
|
||||
date: this.currentTransaction.date,
|
||||
categoryId: this.currentTransaction.categoryId,
|
||||
expense: this.currentTransaction.expense
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
promise.then(() => {
|
||||
observable.subscribe(val => {
|
||||
this.app.goBack();
|
||||
});
|
||||
}
|
||||
|
||||
delete(): void {
|
||||
this.twigsService.deleteTransaction(this.currentTransaction.id).then(() => {
|
||||
this.twigsService.deleteTransaction(this.currentTransaction.id).subscribe(() => {
|
||||
this.app.goBack();
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export class TransactionDetailsComponent implements OnInit {
|
|||
getTransaction(): void {
|
||||
const id = this.route.snapshot.paramMap.get('id');
|
||||
this.twigsService.getTransaction(id)
|
||||
.then(transaction => {
|
||||
.subscribe(transaction => {
|
||||
transaction.amount /= 100;
|
||||
this.transaction = transaction;
|
||||
this.budgetId = transaction.budgetId;
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ export class TransactionListComponent implements OnInit {
|
|||
}
|
||||
|
||||
let toStr = this.route.snapshot.queryParamMap.get('to');
|
||||
let to: Date;
|
||||
var to;
|
||||
if (toStr) {
|
||||
let toDate = new Date(toStr);
|
||||
if (!isNaN(toDate.getTime())) {
|
||||
|
|
@ -52,8 +52,7 @@ export class TransactionListComponent implements OnInit {
|
|||
}
|
||||
}
|
||||
|
||||
this.twigsService.getTransactions(this.budgetIds.join(','), this.categoryIds?.join(','), null, from, to)
|
||||
.then(transactions => {
|
||||
this.twigsService.getTransactions(this.budgetIds.join(','), this.categoryIds?.join(','), null, from, to).subscribe(transactions => {
|
||||
this.transactions = transactions;
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,13 +32,13 @@ export class LoginComponent implements OnInit {
|
|||
login(): void {
|
||||
this.isLoading = true;
|
||||
this.twigsService.login(this.email, this.password)
|
||||
.then(user => {
|
||||
.subscribe(user => {
|
||||
this.app.user.next(user);
|
||||
this.router.navigate([this.redirect || '/'])
|
||||
})
|
||||
.catch(error => {
|
||||
},
|
||||
error => {
|
||||
console.error(error)
|
||||
// TODO: Replace this with an in-app dialog
|
||||
//TODO: Replace this with an in-app dialog
|
||||
alert("Login failed. Please verify you have the correct credentials");
|
||||
this.isLoading = false;
|
||||
})
|
||||
|
|
|
|||
|
|
@ -33,10 +33,10 @@ export class RegisterComponent implements OnInit {
|
|||
return;
|
||||
}
|
||||
this.isLoading = true;
|
||||
this.twigsService.register(this.username, this.email, this.password).then(user => {
|
||||
this.twigsService.register(this.username, this.email, this.password).subscribe(user => {
|
||||
console.log(user);
|
||||
this.router.navigate(['/'])
|
||||
}).catch(error => {
|
||||
}, error => {
|
||||
console.error(error);
|
||||
alert("Registration failed!")
|
||||
this.isLoading = false;
|
||||
|
|
|
|||
|
|
@ -29,8 +29,8 @@ export class UserPermission {
|
|||
}
|
||||
|
||||
export enum Permission {
|
||||
READ = "READ",
|
||||
WRITE = "WRITE",
|
||||
MANAGE = "MANAGE",
|
||||
OWNER = "OWNER"
|
||||
READ,
|
||||
WRITE,
|
||||
MANAGE,
|
||||
OWNER
|
||||
}
|
||||
|
|
@ -4,16 +4,7 @@
|
|||
// Include the common styles for Angular Material. We include this here so that you only
|
||||
// have to load a single css file for Angular Material in your app.
|
||||
// Be sure that you only ever include this mixin once!
|
||||
// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
|
||||
// The following line adds:
|
||||
// 1. Default typography styles for all components
|
||||
// 2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
|
||||
// If you specify typography styles for the components you use elsewhere, you should delete this line.
|
||||
// If you don't need the default component typographies but still want the hierarchy styles,
|
||||
// you can delete this line and instead use:
|
||||
// `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
|
||||
@include mat.all-legacy-component-typographies();
|
||||
@include mat.legacy-core();
|
||||
@include mat.core();
|
||||
|
||||
// Define the palettes for your theme using the Material Design palettes available in palette.scss
|
||||
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
|
||||
|
|
@ -32,8 +23,8 @@ $budget-dark-theme: mat.define-dark-theme($budget-app-primary, $budget-app-accen
|
|||
// Alternatively, you can import and @include the theme mixins for each component
|
||||
// that you are using.
|
||||
|
||||
@include mat.all-legacy-component-themes($budget-app-theme);
|
||||
@include mat.all-component-themes($budget-app-theme);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@include mat.all-legacy-component-themes($budget-dark-theme);
|
||||
@include mat.all-component-themes($budget-dark-theme);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import {
|
|||
platformBrowserDynamicTesting
|
||||
} from '@angular/platform-browser-dynamic/testing';
|
||||
|
||||
declare const require: any;
|
||||
|
||||
// First, initialize the Angular testing environment.
|
||||
getTestBed().initTestEnvironment(
|
||||
BrowserDynamicTestingModule,
|
||||
|
|
@ -14,3 +16,7 @@ getTestBed().initTestEnvironment(
|
|||
teardown: { destroyAfterEach: false }
|
||||
}
|
||||
);
|
||||
// Then we find all the tests.
|
||||
const context = require.context('./', true, /\.spec\.ts$/);
|
||||
// And load the modules.
|
||||
context.keys().map(context);
|
||||
|
|
|
|||
Loading…
Reference in a new issue