Compare commits
1 Commits
develop
...
feature/ty
| Author | SHA1 | Date | |
|---|---|---|---|
| 5df62de278 |
3
.gitignore
vendored
3
.gitignore
vendored
@ -81,5 +81,4 @@ tags
|
||||
|
||||
# End of https://www.gitignore.io/api/vim,node
|
||||
|
||||
/dist
|
||||
|
||||
/build
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
var path = require('path');
|
||||
|
||||
var _root = path.resolve(__dirname, '..');
|
||||
|
||||
function root(args) {
|
||||
args = Array.prototype.slice.call(arguments, 0);
|
||||
return path.join.apply(path, [_root].concat(args));
|
||||
}
|
||||
|
||||
exports.root = root;
|
||||
@ -1,119 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2:
|
||||
|
||||
const webpack = require('webpack');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const helpers = require('./helpers');
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
'polyfills': './src/polyfills.ts',
|
||||
'vendor': './src/vendor.ts',
|
||||
'app': './src/main.ts',
|
||||
'styles': './src/main.scss'
|
||||
},
|
||||
|
||||
resolve: {
|
||||
extensions: ['.ts', '.js'],
|
||||
},
|
||||
|
||||
module: {
|
||||
rules: [{
|
||||
enforce: 'pre',
|
||||
test: /webpack\.config\.js$/,
|
||||
include: helpers.root('src', 'app'),
|
||||
loader: 'eslint-loader',
|
||||
options: {
|
||||
useEslintrc: false,
|
||||
emitWarning: true,
|
||||
emitError: true,
|
||||
failOnWarning: true,
|
||||
failOnError: true,
|
||||
baseConfig: 'webpack',
|
||||
rules: {
|
||||
indent: ['error', 4]
|
||||
},
|
||||
},
|
||||
}, {
|
||||
// Javascript
|
||||
enforce: 'pre',
|
||||
test: /\.jsx?$/,
|
||||
include: helpers.root('src', 'app'),
|
||||
loader: 'eslint-loader',
|
||||
options: {
|
||||
useEslintrc: false,
|
||||
emitWarning: false,
|
||||
emitError: true,
|
||||
failOnWarning: false,
|
||||
failOnError: true,
|
||||
baseConfig: 'angular',
|
||||
rules: {
|
||||
indent: ['error', 4]
|
||||
},
|
||||
plugins: [
|
||||
'angular',
|
||||
'html',
|
||||
'security',
|
||||
'this',
|
||||
'jquery',
|
||||
'promise'
|
||||
]
|
||||
},
|
||||
// }, {
|
||||
// test: /\.jsx?$/,
|
||||
// exclude: /node_modules/,
|
||||
// loader: 'babel-loader'
|
||||
}, {
|
||||
test: /\.ts$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'awesome-typescript-loader',
|
||||
options: { configFileName: helpers.root('src', 'tsconfig.json') }
|
||||
},
|
||||
'angular2-template-loader'
|
||||
]
|
||||
}, {
|
||||
test: /\.html$/,
|
||||
include: helpers.root('src'),
|
||||
loader: 'html-loader'
|
||||
}, {
|
||||
test: /\.css$/,
|
||||
//include: helpers.root('src'),
|
||||
use: [
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
'resolve-url-loader'
|
||||
]
|
||||
}, {
|
||||
test: /\.scss$/,
|
||||
use: [
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
'resolve-url-loader',
|
||||
'sass-loader?sourceMap'
|
||||
]
|
||||
}, {
|
||||
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
|
||||
loader: 'file-loader?name=assets/[name].[hash].[ext]'
|
||||
}]
|
||||
},
|
||||
|
||||
optimization: {
|
||||
splitChunks: {
|
||||
name: true
|
||||
}
|
||||
},
|
||||
|
||||
plugins: [
|
||||
// Workaround for angular/angular#11580
|
||||
new webpack.ContextReplacementPlugin(
|
||||
// The (\\|\/) piece accounts for path separators in *nix and Windows
|
||||
/angular(\\|\/)core(\\|\/)@angular/,
|
||||
helpers.root('./src'), // location of your src
|
||||
{} // a map of your routes
|
||||
),
|
||||
|
||||
new HtmlWebpackPlugin({
|
||||
template: 'src/index.ejs'
|
||||
})
|
||||
],
|
||||
};
|
||||
@ -1,34 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2:
|
||||
|
||||
const webpackMerge = require('webpack-merge');
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
const commonConfig = require('./webpack.common.js');
|
||||
const helpers = require('./helpers');
|
||||
|
||||
module.exports = webpackMerge(commonConfig, {
|
||||
devtool: 'cheap-module-eval-source-map',
|
||||
|
||||
mode: 'development',
|
||||
|
||||
output: {
|
||||
path: helpers.root('dist'),
|
||||
publicPath: '/',
|
||||
filename: '[name].js',
|
||||
chunkFilename: '[id].chunk.js'
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new ExtractTextPlugin('[name].css')
|
||||
],
|
||||
|
||||
devServer: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:5000',
|
||||
secure: false
|
||||
}
|
||||
},
|
||||
historyApiFallback: true,
|
||||
stats: 'minimal'
|
||||
}
|
||||
});
|
||||
@ -1,41 +0,0 @@
|
||||
/* jshint esversion: 6 */
|
||||
const webpack = require('webpack');
|
||||
const webpackMerge = require('webpack-merge');
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
const commonConfig = require('./webpack.common.js');
|
||||
const helpers = require('./helpers');
|
||||
|
||||
const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
|
||||
|
||||
module.exports = webpackMerge(commonConfig, {
|
||||
devtool: 'source-map',
|
||||
|
||||
mode: 'production',
|
||||
|
||||
output: {
|
||||
path: helpers.root('dist'),
|
||||
publicPath: '/',
|
||||
filename: '[name].[hash].js',
|
||||
chunkFilename: '[id].[hash].chunk.js'
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new webpack.NoEmitOnErrorsPlugin(),
|
||||
new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
|
||||
mangle: {
|
||||
keep_fnames: true
|
||||
}
|
||||
}),
|
||||
new ExtractTextPlugin('[name].[hash].css'),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
'ENV': JSON.stringify(ENV)
|
||||
}
|
||||
}),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
htmlLoader: {
|
||||
minimize: false // workaround for ng2
|
||||
}
|
||||
})
|
||||
]
|
||||
});
|
||||
132
package.json
132
package.json
@ -4,89 +4,63 @@
|
||||
"repository": "https://git.lahouze.org/xals/accountant",
|
||||
"license": "AGPL-1.0",
|
||||
"devDependencies": {
|
||||
"@angular/cli": "^6.0.7",
|
||||
"@angular/compiler-cli": "^6.0.3",
|
||||
"@ngtools/webpack": "^6.1.0-beta.1",
|
||||
"angular2-template-loader": "^0.6.2",
|
||||
"awesome-typescript-loader": "^5.0.0",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-eslint": "^8.2.2",
|
||||
"babel-loader": "^7.1.4",
|
||||
"copy-webpack-plugin": "^4.5.1",
|
||||
"css-loader": "^0.28.10",
|
||||
"ejs-loader": "^0.3.1",
|
||||
"eslint": "^4.18.2",
|
||||
"eslint-config-angular": "^0.5.0",
|
||||
"eslint-config-webpack": "^1.2.5",
|
||||
"eslint-loader": "^2.0.0",
|
||||
"eslint-plugin-angular": "^3.3.0",
|
||||
"eslint-plugin-html": "^4.0.2",
|
||||
"eslint-plugin-jquery": "^1.3.0",
|
||||
"eslint-plugin-promise": "^3.7.0",
|
||||
"eslint-plugin-security": "^1.4.0",
|
||||
"eslint-plugin-this": "^0.2.2",
|
||||
"extract-text-webpack-plugin": "^4.0.0-beta.0",
|
||||
"file-loader": "^1.1.11",
|
||||
"html-loader": "^0.5.5",
|
||||
"html-webpack-plugin": "^3.0.6",
|
||||
"htmllint-loader": "^2.1.4",
|
||||
"imports-loader": "^0.8.0",
|
||||
"less": "^3.0.1",
|
||||
"less-loader": "^4.1.0",
|
||||
"loglevel": "^1.6.1",
|
||||
"ngtemplate-loader": "^2.0.1",
|
||||
"node-sass": "^4.7.2",
|
||||
"null-loader": "^0.1.1",
|
||||
"raw-loader": "^0.5.1",
|
||||
"resolve-url-loader": "^2.3.0",
|
||||
"sass-loader": "^7.0.2",
|
||||
"script-ext-html-webpack-plugin": "^2.0.1",
|
||||
"style-loader": "^0.21.0",
|
||||
"ts-loader": "^4.0.1",
|
||||
"typescript": "~2.7.2",
|
||||
"typescript-eslint-parser": "^15.0.0",
|
||||
"url-loader": "^1.0.1",
|
||||
"webpack": "^4.8.0",
|
||||
"webpack-cli": "^3.0.1",
|
||||
"webpack-dev-server": "^3.1.0",
|
||||
"webpack-merge": "^4.1.1"
|
||||
"@types/angular": "^1.6.25",
|
||||
"@types/angular-resource": "^1.5.9",
|
||||
"@types/angular-strap": "^2.2.32",
|
||||
"@types/angular-ui-notification": "^0.0.4",
|
||||
"angular-tslint-rules": "^1.0.3",
|
||||
"babel-core": "^6.25.0",
|
||||
"babel-eslint": "^7.2.3",
|
||||
"babel-loader": "^7.0.0",
|
||||
"bootstrap-webpack": "^0.0.6",
|
||||
"css-loader": "^0.28.4",
|
||||
"eslint": "^4.1.1",
|
||||
"eslint-config-angular": "^0.5",
|
||||
"eslint-config-webpack": "^1.2.3",
|
||||
"eslint-loader": "^1.7.1",
|
||||
"eslint-plugin-angular": "^3.0.0",
|
||||
"eslint-plugin-html": "^3.0.0",
|
||||
"eslint-plugin-jquery": "^1.2",
|
||||
"eslint-plugin-promise": "^3.5",
|
||||
"eslint-plugin-security": "^1.3",
|
||||
"eslint-plugin-this": "^0.2",
|
||||
"extract-text-webpack-plugin": "^2.1.2",
|
||||
"file-loader": "^0.11.2",
|
||||
"html-loader": "^0.4.5",
|
||||
"html-webpack-plugin": "^2.28.0",
|
||||
"htmllint-loader": "^1.3.8",
|
||||
"imports-loader": "^0.7.1",
|
||||
"less": "^2.7.2",
|
||||
"less-loader": "^4.0.4",
|
||||
"ngtemplate-loader": "^2.0.0",
|
||||
"style-loader": "^0.18.2",
|
||||
"ts-loader": "^2.2.2",
|
||||
"tslint": "^5.5.0",
|
||||
"tslint-loader": "^3.5.3",
|
||||
"url-loader": "^0.5.8",
|
||||
"webpack": "^2.6.1",
|
||||
"webpack-dev-server": "2.4.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/animations": "^6.0.3",
|
||||
"@angular/common": "^6.0.3",
|
||||
"@angular/compiler": "^6.0.3",
|
||||
"@angular/core": "^6.0.3",
|
||||
"@angular/forms": "^6.0.3",
|
||||
"@angular/http": "^6.0.3",
|
||||
"@angular/platform-browser": "^6.0.3",
|
||||
"@angular/platform-browser-dynamic": "^6.0.3",
|
||||
"@angular/router": "^6.0.3",
|
||||
"@ng-bootstrap/ng-bootstrap": "^2.0.0",
|
||||
"@nsalaun/ng-logger": "^5.0.0",
|
||||
"@swimlane/ngx-charts": "^8.0.2",
|
||||
"@types/d3": "^5.0.0",
|
||||
"@types/geojson": "^7946.0.3",
|
||||
"@types/node": "^10.3.2",
|
||||
"@types/underscore": "^1.8.8",
|
||||
"angular2-text-mask": "^9.0.0",
|
||||
"base64util": "^2.0.0-f",
|
||||
"bootstrap": "4.1.1",
|
||||
"d3": "^5.0.0",
|
||||
"angular": "^1.6",
|
||||
"angular-http-auth": "^1.5",
|
||||
"angular-messages": "^1.6",
|
||||
"angular-resource": "^1.6",
|
||||
"angular-route": "^1.6",
|
||||
"angular-strap": "^2.3.12",
|
||||
"angular-ui-notification": "^0.3",
|
||||
"base64util": "^1.0.2",
|
||||
"bootbox": "^4.4.0",
|
||||
"bootstrap": "^3.3.7",
|
||||
"bootstrap-additions": "^0.3.1",
|
||||
"c3": "^0.4.13",
|
||||
"font-awesome": "^4.7.0",
|
||||
"jquery": "^3.3.1",
|
||||
"jqwidgets-scripts": "^5.7.2",
|
||||
"moment": "^2.21.0",
|
||||
"ng2-nvd3": "^2.0.0",
|
||||
"ngx-toastr": "^8.3.0",
|
||||
"reflect-metadata": "^0.1.12",
|
||||
"rxjs": "^6.2.0",
|
||||
"rxjs-compat": "^6.2.0",
|
||||
"underscore": "^1.8.3",
|
||||
"zone.js": "^0.8.20"
|
||||
"jquery": "^3.2",
|
||||
"meanie-angular-storage": "^1.3.1",
|
||||
"moment": "^2.18"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "rm -Rf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
|
||||
"test": "karma start",
|
||||
"dev": "webpack-dev-server --config config/webpack.dev.js --inline --progress --colors --hot --info --debug --devtool eval-cheap-module-source-map"
|
||||
"build": "webpack --config webpack.config.js",
|
||||
"dev": "webpack-dev-server --debug --devtool eval --config webpack.config.js --progress --colors --hot --content-base build"
|
||||
}
|
||||
}
|
||||
|
||||
7
src/accounts/account.config.ts
Normal file
7
src/accounts/account.config.ts
Normal file
@ -0,0 +1,7 @@
|
||||
/// <reference path="../../node_modules/@types/angular/index.d.ts" />
|
||||
/// <reference path="../../node_modules/@types/angular-resource/index.d.ts" />
|
||||
|
||||
export default function AccountConfig ($resourceProvider) {
|
||||
// Keep trailing slashes to avoid redirect by flask.
|
||||
$resourceProvider.defaults.stripTrailingSlashes = false;
|
||||
};
|
||||
163
src/accounts/account.controller.ts
Normal file
163
src/accounts/account.controller.ts
Normal file
@ -0,0 +1,163 @@
|
||||
/// <reference types="angular" />
|
||||
/// <reference types="angular-ui-notification" />
|
||||
|
||||
//import accountFormTmpl from './account.form.tmpl.html';
|
||||
//import accountDeleteTmpl from './account.delete.tmpl.html';
|
||||
|
||||
import IAccount from './account.factory';
|
||||
|
||||
export interface IAccountController {
|
||||
rowClass(account: IAccount) : string;
|
||||
valueClass(account: IAccount, value: number) : string;
|
||||
add() : void;
|
||||
save(account: IAccount) : void;
|
||||
confirmDelete(account: IAccount): void;
|
||||
delete(account: IAccount): void;
|
||||
modify(account: IAccount): void;
|
||||
};
|
||||
|
||||
export default class AccountController {
|
||||
static $inject = ['AccountResource', 'Notification', '$log', '$modal'];
|
||||
|
||||
private accounts: IAccount[];
|
||||
|
||||
constructor(
|
||||
public AccountResource: AccountResource,
|
||||
public Notification: angular.uiNotification.INotificationService,
|
||||
public $modal: mgcrea.ngStrap.modal.IModalService) {
|
||||
|
||||
// Load accounts.
|
||||
this.accounts = Account.query();
|
||||
};
|
||||
|
||||
/*
|
||||
* Return the class for an account current value compared to authorized
|
||||
* overdraft.
|
||||
*/
|
||||
rowClass(account : IAccount): string {
|
||||
if (!account || !account.authorized_overdraft || !account.current) {
|
||||
return '';
|
||||
}
|
||||
|
||||
if (account.current < account.authorized_overdraft) {
|
||||
return 'danger';
|
||||
} else if (account.current < 0) {
|
||||
return 'warning';
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
* Return the class for a value compared to account authorized overdraft.
|
||||
*/
|
||||
valueClass (account: IAccount, value: number): string {
|
||||
if (!account || !value) {
|
||||
return '';
|
||||
}
|
||||
|
||||
if (value < account.authorized_overdraft) {
|
||||
return 'text-danger';
|
||||
} else if (value < 0) {
|
||||
return 'text-warning';
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
* Add an empty account.
|
||||
*/
|
||||
add(): void {
|
||||
var account = new Account({
|
||||
// eslint-disable-next-line camelcase
|
||||
authorized_overdraft: 0
|
||||
});
|
||||
|
||||
// Insert account at the begining of the array.
|
||||
this.modify(account);
|
||||
};
|
||||
|
||||
/*
|
||||
* Save account.
|
||||
*/
|
||||
save(account: IAccount): void {
|
||||
return account.$save().then(function(data) {
|
||||
this.Notification.success('Account #' + data.id + ' saved.');
|
||||
|
||||
this.accounts = Account.query();
|
||||
}, function(result){
|
||||
$log.error('Error while saving account', account, result);
|
||||
|
||||
this.Notification.error(
|
||||
'Error while saving account: ' + result.message
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
confirmDelete(account: IAccount): void {
|
||||
var title = "Delete account #" + account.id;
|
||||
|
||||
$modal({
|
||||
templateUrl: accountDeleteTmpl,
|
||||
controller: function($scope, title, account, $delete) {
|
||||
$scope.title = title;
|
||||
$scope.account = account;
|
||||
$scope.$delete = function() {
|
||||
$scope.$hide();
|
||||
$delete($scope.account);
|
||||
};
|
||||
},
|
||||
locals: {
|
||||
title: title,
|
||||
account: account,
|
||||
$delete: this.delete
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* Delete an account.
|
||||
*/
|
||||
delete(account: IAccount): void {
|
||||
var id = account.id;
|
||||
|
||||
account.$delete().then(function() {
|
||||
this.Notification.success('account #' + id + ' deleted.');
|
||||
|
||||
this.accounts = Account.query();
|
||||
}, function(result) {
|
||||
this.Notification.error(
|
||||
'An error occurred while trying to delete account #' +
|
||||
id + ':<br />' + result
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* Open the popup to modify the account, save it on confirm.
|
||||
*/
|
||||
modify(account: IAccount): void {
|
||||
// FIXME Alexis Lahouze 2017-06-15 i18n
|
||||
var title = "Account";
|
||||
|
||||
if (account.id) {
|
||||
title = title + " #" + account.id;
|
||||
}
|
||||
|
||||
$modal({
|
||||
templateUrl: accountFormTmpl,
|
||||
controller: function($scope, title, account, $save) {
|
||||
$scope.title = title;
|
||||
$scope.account = account;
|
||||
$scope.account.authorized_overdraft *= -1;
|
||||
$scope.$save = function() {
|
||||
$scope.$hide();
|
||||
$scope.account.authorized_overdraft *= -1;
|
||||
$save($scope.account);
|
||||
};
|
||||
},
|
||||
locals: {
|
||||
title: title,
|
||||
account: account,
|
||||
$save: this.save
|
||||
}
|
||||
});
|
||||
};
|
||||
};
|
||||
23
src/accounts/account.delete.tmpl.html
Normal file
23
src/accounts/account.delete.tmpl.html
Normal file
@ -0,0 +1,23 @@
|
||||
<div class="modal top am-fade" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title" id="modal-title">{{ title }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="modal-body" id="modal-body">
|
||||
<p>Voulez-vous supprimer le compte #{{ account.id }} ayant pour nom :<br/>{{ account.name }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-danger" type="button" ng-click="$delete()">
|
||||
Supprimer
|
||||
</button>
|
||||
<button class="btn btn-default" type="button" ng-click="$hide()">
|
||||
Annuler
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
19
src/accounts/account.factory.ts
Normal file
19
src/accounts/account.factory.ts
Normal file
@ -0,0 +1,19 @@
|
||||
/// <reference types="angular" />
|
||||
/// <reference types="angular-resource" />
|
||||
|
||||
export interface IAccount extends ng.resource.IResource<IAccount> {
|
||||
id: number;
|
||||
name: string;
|
||||
authorized_overdraft: number;
|
||||
};
|
||||
|
||||
export interface IAccountResource extends ng.resource.IResourceClass<IAccount> {
|
||||
};
|
||||
|
||||
export default function AccountResource($resource) {
|
||||
return <IAccountResource> $resource(
|
||||
'/api/account/:id', {
|
||||
id: '@id'
|
||||
}
|
||||
);
|
||||
};
|
||||
72
src/accounts/account.form.tmpl.html
Normal file
72
src/accounts/account.form.tmpl.html
Normal file
@ -0,0 +1,72 @@
|
||||
<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
|
||||
<!--
|
||||
This file is part of Accountant.
|
||||
|
||||
Accountant is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
Accountant is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with Accountant. If not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
<div class="modal top am-fade" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title" id="modal-title">{{ title }}</h3>
|
||||
</div>
|
||||
|
||||
<form name="form" class="form-horizontal simple-form" novalidate
|
||||
ng-submit="$save()">
|
||||
<div class="modal-body" id="modal-body">
|
||||
<div class="form-group" ng-class="{ 'has-error' : form.name.$invalid && !form.name.$pristine }">
|
||||
<label class="col-sm-4 control-label" for="name">Account name</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" id="name" name="name"
|
||||
ng-model="account.name"
|
||||
type="text" placeholder="Account name"
|
||||
required />
|
||||
|
||||
<div class="help-block" ng-messages="form.name.$error" ng-if="form.name.$invalid">
|
||||
<p ng-message="required">The account name is required.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" ng-class="{ 'has-error' : form.authorized_overdraft.$invalid && !form.authorized_overdraft.$pristine }">
|
||||
<label class="col-sm-4 control-label" for="authorized-overdraft">Authorized overdraft</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="input-group">
|
||||
<div class="input-group-addon">-</div>
|
||||
<input class="form-control" id="authorized-overdraft"
|
||||
name="authorized_overdraft"
|
||||
ng-model="account.authorized_overdraft"
|
||||
type="number" placeholder="Authorized overdraft"
|
||||
required min="0"/>
|
||||
<div class="input-group-addon">.00€</div>
|
||||
</div>
|
||||
|
||||
<div class="help-block" ng-messages="form.authorized_overdraft.$error" ng-if="form.authorized_overdraft.$invalid">
|
||||
<p ng-message="required">The authorized overdraft is required.</p>
|
||||
<p ng-message="min">The authorized overdraft must be equal or greater than 0.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<input class="btn btn-primary" type="submit" ng-disabled="form.$invalid"/>
|
||||
<button class="btn btn-default" type="button" ng-click="$hide()">
|
||||
Annuler
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,53 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
import { NgLoggerModule, Level } from '@nsalaun/ng-logger';
|
||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { ToastrModule } from 'ngx-toastr';
|
||||
|
||||
import { AccountService } from './account.service';
|
||||
import { AccountBalancesService } from './accountBalances.service';
|
||||
import { AccountListComponent } from './accountList.component';
|
||||
import { AccountDeleteModalComponent } from './accountDeleteModal.component';
|
||||
import { AccountEditModalComponent } from './accountEditModal.component';
|
||||
import { AccountFormComponent } from './accountForm.component';
|
||||
import { AccountRowComponent } from './accountRow.component';
|
||||
import { DailyBalanceService } from './dailyBalance.service';
|
||||
import { AccountListState } from './account.states'
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
HttpClientModule,
|
||||
CommonModule,
|
||||
ReactiveFormsModule,
|
||||
RouterModule.forChild([
|
||||
AccountListState
|
||||
]),
|
||||
NgLoggerModule,
|
||||
ToastrModule,
|
||||
NgbModule
|
||||
],
|
||||
providers: [
|
||||
AccountService,
|
||||
AccountBalancesService,
|
||||
DailyBalanceService,
|
||||
],
|
||||
declarations: [
|
||||
AccountListComponent,
|
||||
AccountDeleteModalComponent,
|
||||
AccountEditModalComponent,
|
||||
AccountFormComponent,
|
||||
AccountRowComponent
|
||||
],
|
||||
entryComponents: [
|
||||
AccountListComponent,
|
||||
AccountDeleteModalComponent,
|
||||
AccountEditModalComponent,
|
||||
]
|
||||
})
|
||||
export class AccountModule {}
|
||||
@ -1,42 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
|
||||
import { Observable } from 'rxjs/Rx';
|
||||
|
||||
import { Account } from './account';
|
||||
|
||||
@Injectable()
|
||||
export class AccountService {
|
||||
constructor(
|
||||
private http: HttpClient
|
||||
) {}
|
||||
|
||||
private url(id?: Number): string {
|
||||
if(id) {
|
||||
return `/api/account/${id}`;
|
||||
}
|
||||
|
||||
return `/api/account`;
|
||||
}
|
||||
|
||||
query(): Observable<Account[]> {
|
||||
return this.http.get<Account[]>(this.url());
|
||||
}
|
||||
|
||||
get(id: number): Observable<Account> {
|
||||
return this.http.get<Account>(this.url(id));
|
||||
}
|
||||
|
||||
create(account: Account): Observable<Account> {
|
||||
return this.http.post<Account>(this.url(), account);
|
||||
}
|
||||
|
||||
update(account: Account): Observable<Account> {
|
||||
return this.http.post<Account>(this.url(account.id), account);
|
||||
}
|
||||
|
||||
delete(account: Account): Observable<Account> {
|
||||
return this.http.delete<Account>(this.url(account.id));
|
||||
}
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
|
||||
import { AccountListComponent } from './accountList.component';
|
||||
|
||||
export const AccountListState = {
|
||||
path: 'accounts',
|
||||
component: AccountListComponent
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
|
||||
import { AccountBalances } from './accountBalances';
|
||||
|
||||
export class Account {
|
||||
public id: number;
|
||||
public name: string;
|
||||
public authorized_overdraft: number;
|
||||
|
||||
public balances: AccountBalances;
|
||||
|
||||
public constructor() {
|
||||
this.authorized_overdraft = 0;
|
||||
}
|
||||
}
|
||||
21
src/accounts/accountBalances.factory.ts
Normal file
21
src/accounts/accountBalances.factory.ts
Normal file
@ -0,0 +1,21 @@
|
||||
import * as angular from 'angular';
|
||||
import 'angular-resource';
|
||||
|
||||
export interface IAccountBalances
|
||||
extends ng.resource.IResource<IAccountBalances> {
|
||||
current: number;
|
||||
pointed: number;
|
||||
future: number;
|
||||
};
|
||||
|
||||
export interface IAccountBalancesResource
|
||||
extends ng.resource.IResourceClass<IAccountBalances> {
|
||||
};
|
||||
|
||||
export default function AccountBalancesResource($resource) {
|
||||
return <IAccountBalancesResource> $resource(
|
||||
'/api/account/:id/balances', {
|
||||
id: '@id'
|
||||
}
|
||||
);
|
||||
};
|
||||
@ -1,18 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable } from 'rxjs/Rx';
|
||||
|
||||
import { HttpClient, HttpParams } from "@angular/common/http";
|
||||
|
||||
import { AccountBalances } from './accountBalances';
|
||||
|
||||
@Injectable()
|
||||
export class AccountBalancesService {
|
||||
constructor(
|
||||
private http: HttpClient
|
||||
) {}
|
||||
|
||||
get(id: number): Observable<AccountBalances> {
|
||||
return this.http.get<AccountBalances>(`/api/account/${id}/balances`);
|
||||
}
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
export class AccountBalances {
|
||||
public current: number;
|
||||
public pointed: number;
|
||||
public future: number;
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title" id="modal-title">{{ title() }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="modal-body" id="modal-body">
|
||||
<p>
|
||||
Do you really want to delete account #{{ account.id }} with name:<br/>
|
||||
{{ account.name }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-danger" (click)="submit()">
|
||||
Yes
|
||||
</button>
|
||||
|
||||
<button class="btn btn-default" (click)="cancel()">
|
||||
No
|
||||
</button>
|
||||
</div>
|
||||
@ -1,32 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2:
|
||||
import { Component, Input } from '@angular/core';
|
||||
|
||||
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
import { Account } from './account';
|
||||
|
||||
@Component({
|
||||
selector: 'account-delete-modal',
|
||||
templateUrl: './accountDeleteModal.component.html'
|
||||
})
|
||||
export class AccountDeleteModalComponent {
|
||||
@Input() account: Account
|
||||
|
||||
constructor(public activeModal: NgbActiveModal) {}
|
||||
|
||||
title(): string {
|
||||
if(this.account.id) {
|
||||
return "Account #" + this.account.id;
|
||||
} else {
|
||||
return "New account";
|
||||
}
|
||||
}
|
||||
|
||||
submit(): void {
|
||||
this.activeModal.close(this.account);
|
||||
}
|
||||
|
||||
cancel(): void {
|
||||
this.activeModal.dismiss("closed");
|
||||
}
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title" id="modal-title">{{ title() }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="modal-body" id="modal-body">
|
||||
<account-form [account]="account" (submit)="submit()" #accountForm="accountForm"></account-form>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary" [disabled]="!accountForm.form.valid" (click)="submit()">
|
||||
Save
|
||||
</button>
|
||||
|
||||
<button class="btn btn-default" (click)="cancel()">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
@ -1,41 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2:
|
||||
import { Component, Input, ViewChild } from '@angular/core';
|
||||
|
||||
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
import { Account } from './account';
|
||||
import { AccountFormComponent } from './accountForm.component';
|
||||
|
||||
@Component({
|
||||
selector: 'account-edit-modal',
|
||||
templateUrl: './accountEditModal.component.html'
|
||||
})
|
||||
export class AccountEditModalComponent {
|
||||
@Input() account: Account;
|
||||
@ViewChild('accountForm') accountForm: AccountFormComponent;
|
||||
|
||||
constructor(private activeModal: NgbActiveModal) {}
|
||||
|
||||
title(): string {
|
||||
if(this.account.id) {
|
||||
return "Account #" + this.account.id;
|
||||
} else {
|
||||
return "New account";
|
||||
}
|
||||
}
|
||||
|
||||
submit(): void {
|
||||
let formModel = this.accountForm.form.value;
|
||||
let account = Object.assign({}, this.account);
|
||||
|
||||
account.id = this.account.id;
|
||||
account.name = formModel.name;
|
||||
account.authorized_overdraft = formModel.authorizedOverdraft;
|
||||
|
||||
this.activeModal.close(account);
|
||||
}
|
||||
|
||||
cancel(): void {
|
||||
this.activeModal.dismiss("closed");
|
||||
}
|
||||
}
|
||||
@ -1,47 +0,0 @@
|
||||
<form novalidate
|
||||
(keyup.enter)="submit()" [formGroup]="form">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 control-label" for="name">
|
||||
Account name
|
||||
</label>
|
||||
|
||||
<div class="col-sm-8"
|
||||
[class.has-danger]="name.errors">
|
||||
<input class="form-control"
|
||||
id="name" formControlName="name"
|
||||
placeholder="Account name">
|
||||
|
||||
<div class="help-block text-danger" *ngIf="name.errors">
|
||||
<p *ngIf="name.errors.required">The account name is required.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 control-label" for="authorized-overdraft">
|
||||
Authorized overdraft
|
||||
</label>
|
||||
|
||||
<div class="col-sm-8"
|
||||
[class.has-danger]="authorizedOverdraft.errors">
|
||||
<div class="input-group">
|
||||
<input class="form-control"
|
||||
id="authorized-overdraft" formControlName="authorizedOverdraft"
|
||||
placeholder="Authorized overdraft">
|
||||
|
||||
<div class="input-group-addon">.00€</div>
|
||||
</div>
|
||||
|
||||
<div class="help-block text-danger" *ngIf="authorizedOverdraft.errors">
|
||||
<p *ngIf="authorizedOverdraft.errors.required">
|
||||
The authorized overdraft is required.
|
||||
</p>
|
||||
|
||||
<p *ngIf="authorizedOverdraft.errors.max">
|
||||
The authorized overdraft must be less than or equal to 0.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -1,44 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
import { Component, OnInit, OnChanges, Input, Output, EventEmitter } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
|
||||
import { Account } from './account';
|
||||
|
||||
@Component({
|
||||
selector: 'account-form',
|
||||
exportAs: 'accountForm',
|
||||
templateUrl: './accountForm.component.html'
|
||||
})
|
||||
export class AccountFormComponent implements OnInit {
|
||||
public form: FormGroup;
|
||||
@Input() account: Account;
|
||||
@Output('submit') submitEventEmitter: EventEmitter<void> = new EventEmitter<void>();
|
||||
|
||||
constructor(private formBuilder: FormBuilder) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.form = this.formBuilder.group({
|
||||
name: ['', Validators.required],
|
||||
authorizedOverdraft: ['', [Validators.required, Validators.max(0)]],
|
||||
});
|
||||
|
||||
this.form.patchValue({
|
||||
name: this.account.name,
|
||||
authorizedOverdraft: this.account.authorized_overdraft
|
||||
});
|
||||
}
|
||||
|
||||
submit() {
|
||||
if(this.form.valid) {
|
||||
this.submitEventEmitter.emit();
|
||||
}
|
||||
}
|
||||
|
||||
get name() {
|
||||
return this.form.get('name');
|
||||
}
|
||||
|
||||
get authorizedOverdraft() {
|
||||
return this.form.get('authorizedOverdraft');
|
||||
}
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
<div class="row">
|
||||
<table class="table table-sm table-striped table-condensed table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nom du compte</th>
|
||||
<th>Solde courant</th>
|
||||
<th>Solde pointé</th>
|
||||
<th>Découvert autorisé</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="5">
|
||||
<button class="btn btn-success" (click)="add()">
|
||||
Ajouter
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr *ngFor="let account of accounts"
|
||||
[account-row]="account" (needsReload)="load()">
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@ -1,74 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
import { Component, Inject, OnInit } from '@angular/core';
|
||||
import { Observable } from 'rxjs/Rx';
|
||||
|
||||
import { Logger } from '@nsalaun/ng-logger';
|
||||
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
|
||||
import { Account } from './account';
|
||||
import { AccountBalances } from './accountBalances';
|
||||
import { AccountService } from './account.service';
|
||||
import { AccountEditModalComponent } from './accountEditModal.component';
|
||||
|
||||
@Component({
|
||||
selector: 'account-list',
|
||||
templateUrl: './accountList.component.html',
|
||||
})
|
||||
export class AccountListComponent implements OnInit {
|
||||
accounts: Account[];
|
||||
|
||||
constructor(
|
||||
private accountService: AccountService,
|
||||
private toastrService: ToastrService,
|
||||
private logger: Logger,
|
||||
private ngbModal: NgbModal
|
||||
) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
// Load accounts.
|
||||
this.load();
|
||||
}
|
||||
|
||||
load() {
|
||||
this.logger.log("Load accounts.");
|
||||
this.accountService.query().subscribe(accounts => {
|
||||
this.accounts = accounts;
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* Add an empty account.
|
||||
*/
|
||||
add() {
|
||||
const modal = this.ngbModal.open(AccountEditModalComponent, {
|
||||
size: 'lg'
|
||||
});
|
||||
|
||||
modal.componentInstance.account = new Account();
|
||||
|
||||
modal.result.then((account: Account) => {
|
||||
this.logger.log("Modal closed => save account", account);
|
||||
this.save(account);
|
||||
}, (reason) => function(reason) {
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* Save account.
|
||||
*/
|
||||
save(account) {
|
||||
this.accountService.create(account).subscribe(account => {
|
||||
this.toastrService.success('Account #' + account.id + ' saved.');
|
||||
|
||||
this.load();
|
||||
}, result => {
|
||||
this.logger.error('Error while saving account', account, result);
|
||||
|
||||
this.toastrService.error(
|
||||
'Error while saving account: ' + result.message
|
||||
);
|
||||
});
|
||||
};
|
||||
};
|
||||
@ -1,41 +0,0 @@
|
||||
<td>
|
||||
<a [routerLink]="[account.id, 'operations']">{{ account.name }}</a>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span (ngClass)="valueClass(accountBalances?.current)">
|
||||
{{ accountBalances?.current | currency:'EUR':'symbol' }}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span (ngClass)="valueClass(accountBalances?.pointed)">
|
||||
{{ accountBalances?.pointed | currency:'EUR':'symbol' }}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td>{{ account.authorized_overdraft | currency:'EUR':'symbol' }}</td>
|
||||
|
||||
<td>
|
||||
<div class="btn-group btn-group-sm">
|
||||
<!-- Edit account. -->
|
||||
<button type="button" class="btn btn-success"
|
||||
(click)="modify()">
|
||||
<span class="fa fa-pencil-square-o"></span>
|
||||
</button>
|
||||
|
||||
<!-- Delete account, with confirm. -->
|
||||
<button type="button" class="btn btn-danger"
|
||||
(click)="confirmDelete()">
|
||||
<span class="fa fa-trash-o"></span>
|
||||
</button>
|
||||
|
||||
<!-- Open account scheduler. -->
|
||||
<a class="btn btn-secondary"
|
||||
[hidden]="!account.id"
|
||||
[routerLink]="[account.id, 'scheduler']">
|
||||
<span class="fa fa-clock-o"></span>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
@ -1,135 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
import { CurrencyPipe } from '@angular/common';
|
||||
import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
|
||||
|
||||
import { Logger } from '@nsalaun/ng-logger';
|
||||
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
|
||||
import { Account } from './account';
|
||||
import { AccountBalances } from './accountBalances';
|
||||
import { AccountBalancesService } from './accountBalances.service';
|
||||
import { AccountService } from './account.service';
|
||||
import { AccountDeleteModalComponent } from './accountDeleteModal.component';
|
||||
import { AccountEditModalComponent } from './accountEditModal.component';
|
||||
|
||||
@Component({
|
||||
selector: 'tr[account-row]',
|
||||
host: {
|
||||
"[id]": "account.id",
|
||||
"[class.warning]": "warning",
|
||||
"[class.danger]": "danger"
|
||||
},
|
||||
templateUrl: './accountRow.component.html'
|
||||
})
|
||||
export class AccountRowComponent implements OnInit {
|
||||
@Input('account-row') account: Account;
|
||||
@Output() needsReload: EventEmitter<void> = new EventEmitter<void>();
|
||||
|
||||
public accountBalances: AccountBalances;
|
||||
|
||||
constructor(
|
||||
private accountService: AccountService,
|
||||
private accountBalancesService: AccountBalancesService,
|
||||
private toastrService: ToastrService,
|
||||
private logger: Logger,
|
||||
private ngbModal: NgbModal
|
||||
) {
|
||||
this.logger.log("AccountRowComponent constructor");
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.logger.log(this.account);
|
||||
this.accountBalancesService
|
||||
.get(this.account.id)
|
||||
.subscribe((accountBalances: AccountBalances) => {
|
||||
this.accountBalances = accountBalances;
|
||||
})
|
||||
}
|
||||
|
||||
get warning() {
|
||||
return this.account && this.accountBalances
|
||||
&& this.account.authorized_overdraft < this.accountBalances.current
|
||||
&& this.accountBalances.current < 0;
|
||||
};
|
||||
|
||||
get error() {
|
||||
return this.account && this.accountBalances
|
||||
&& this.accountBalances.current < this.account.authorized_overdraft;
|
||||
};
|
||||
|
||||
/*
|
||||
* Return the class for a value compared to account authorized overdraft.
|
||||
*/
|
||||
valueClass(value: number) {
|
||||
if (!value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (value < this.account.authorized_overdraft) {
|
||||
return 'text-danger';
|
||||
} else if (value < 0) {
|
||||
return 'text-warning';
|
||||
}
|
||||
};
|
||||
|
||||
confirmDelete() {
|
||||
const modal = this.ngbModal.open(AccountDeleteModalComponent);
|
||||
|
||||
modal.componentInstance.account = this.account;
|
||||
|
||||
modal.result.then((account: Account) => {
|
||||
this.delete(account);
|
||||
}, (reason) => function(reason) {
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* Delete an account.
|
||||
*/
|
||||
delete(account: Account) {
|
||||
var id = account.id;
|
||||
|
||||
this.accountService.delete(account).subscribe(account => {
|
||||
this.toastrService.success('account #' + id + ' deleted.');
|
||||
|
||||
this.needsReload.emit();
|
||||
}, function(result) {
|
||||
this.toastrService.error(
|
||||
'An error occurred while trying to delete account #' +
|
||||
id + ':<br />' + result
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* Open the popup to modify the account, save it on confirm.
|
||||
*/
|
||||
modify() {
|
||||
const modal = this.ngbModal.open(AccountEditModalComponent, {
|
||||
size: 'lg'
|
||||
});
|
||||
|
||||
modal.componentInstance.account = this.account;
|
||||
|
||||
modal.result.then((account: Account) => {
|
||||
this.logger.log("Modal closed => save account", account);
|
||||
this.save(account);
|
||||
}, (reason) => function(reason) {
|
||||
});
|
||||
};
|
||||
|
||||
save(account: Account) {
|
||||
this.accountService.update(account).subscribe((account: Account) => {
|
||||
this.toastrService.success('Account #' + account.id + ' saved.');
|
||||
|
||||
this.needsReload.emit();
|
||||
}, result => {
|
||||
this.logger.error('Error while saving account', account, result);
|
||||
|
||||
this.toastrService.error(
|
||||
'Error while saving account: ' + result.message
|
||||
);
|
||||
});
|
||||
};
|
||||
}
|
||||
90
src/accounts/accounts.html
Normal file
90
src/accounts/accounts.html
Normal file
@ -0,0 +1,90 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
|
||||
<!--
|
||||
This file is part of Accountant.
|
||||
|
||||
Accountant is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
Accountant is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with Accountant. If not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
<div class="row">
|
||||
<table class="table table-striped table-condensed table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nom du compte</th>
|
||||
<th class="col-md-1">Solde courant</th>
|
||||
<th class="col-md-1">Solde pointé</th>
|
||||
<th class="col-md-1">Découvert autorisé</th>
|
||||
<th class="col-md-1">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="5">
|
||||
<button class="btn btn-success" ng-click="accountsCtrl.add()">
|
||||
Ajouter
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="{{ account.id }}"
|
||||
class="form-inline" ng-class="rowClass(account)"
|
||||
ng-repeat="account in accountsCtrl.accounts | orderBy:'name'"
|
||||
ng-init="account.getBalances()">
|
||||
<td>
|
||||
<a href="#!/account/{{ account.id }}/operations">{{ account.name }}</a>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span ng-class="accountsCtrl.valueClass(account, account.balances.current)">
|
||||
{{ account.balances.current | currency : "€" }}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span ng-class="accountsCtrl.valueClass(account, account.balancess.pointed)">
|
||||
{{ account.balances.pointed | currency : "€" }}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
{{ account.authorized_overdraft | currency : "€" }}
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div class="btn-group btn-group-xs">
|
||||
<!-- Edit account. -->
|
||||
<button type="button" class="btn btn-success"
|
||||
ng-model="accountsCtrl.account"
|
||||
ng-click="accountsCtrl.modify(account)">
|
||||
<span class="fa fa-pencil-square-o"></span>
|
||||
</button>
|
||||
|
||||
<!-- Delete account, with confirm. -->
|
||||
<button type="button" class="btn btn-default"
|
||||
ng-click="accountsCtrl.confirmDelete(account)">
|
||||
<span class="fa fa-trash-o"></span>
|
||||
</button>
|
||||
|
||||
<!-- Open account scheduler. -->
|
||||
<a class="btn btn-default"
|
||||
ng-if="account.id"
|
||||
href="#!/account/{{ account.id }}/scheduler">
|
||||
<span class="fa fa-clock-o"></span>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@ -1,19 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2:
|
||||
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient, HttpParams } from '@angular/common/http';
|
||||
|
||||
import { Observable } from 'rxjs/Rx';
|
||||
|
||||
import { DailyBalance } from './dailyBalance';
|
||||
|
||||
@Injectable()
|
||||
export class DailyBalanceService {
|
||||
constructor(
|
||||
private http: HttpClient
|
||||
) {}
|
||||
|
||||
query(id: number): Observable<DailyBalance[]> {
|
||||
return this.http.get<DailyBalance[]>(`/api/account/${id}/daily_balances`);
|
||||
}
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
|
||||
export class DailyBalance {
|
||||
public operation_date: string;
|
||||
public balance: number;
|
||||
public expenses: number;
|
||||
public revenues: number;
|
||||
}
|
||||
47
src/accounts/index.js
Normal file
47
src/accounts/index.js
Normal file
@ -0,0 +1,47 @@
|
||||
// vim: set tw=80 ts=4 sw=4 sts=4:
|
||||
/*
|
||||
This file is part of Accountant.
|
||||
|
||||
Accountant is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
Accountant is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with Accountant. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
/* jshint node: true */
|
||||
'use strict';
|
||||
|
||||
var angular = require('angular');
|
||||
|
||||
var ngResource = require('angular-resource'),
|
||||
ngMessages = require('angular-messages'),
|
||||
ngUiNotification = require('angular-ui-notification'),
|
||||
ngStrap = require('angular-strap');
|
||||
|
||||
var AccountBalancesFactory = require('./accountBalances.factory');
|
||||
var AccountFactory = require('./account.factory');
|
||||
var AccountConfig = require('./account.config');
|
||||
var AccountController = require('./account.controller');
|
||||
|
||||
module.exports = angular.module('accountant.accounts', [
|
||||
ngResource,
|
||||
ngMessages,
|
||||
ngUiNotification,
|
||||
ngStrap,
|
||||
])
|
||||
|
||||
.config(AccountConfig)
|
||||
|
||||
.factory('Account', AccountFactory)
|
||||
.factory('AccountBalances', AccountBalancesFactory)
|
||||
|
||||
.controller('AccountController', AccountController)
|
||||
|
||||
.name;
|
||||
@ -1,8 +0,0 @@
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-dark bg-dark">
|
||||
<a class="navbar-brand" routerLink="/accounts"> Accountant</a>
|
||||
</nav>
|
||||
|
||||
<div class="container-fluid">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
@ -1,9 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'accountant',
|
||||
templateUrl: './app.component.html'
|
||||
})
|
||||
export class AppComponent { }
|
||||
26
src/app.config.js
Normal file
26
src/app.config.js
Normal file
@ -0,0 +1,26 @@
|
||||
var operationsTmpl = require('./operations/operations.html');
|
||||
var accountsTmpl = require('./accounts/accounts.html');
|
||||
var schedulerTmpl = require('./scheduler/scheduler.html');
|
||||
|
||||
module.exports = function($routeProvider) {
|
||||
// Defining template and controller in function of route.
|
||||
$routeProvider
|
||||
.when('/account/:accountId/operations', {
|
||||
templateUrl: operationsTmpl,
|
||||
controller: 'OperationController',
|
||||
controllerAs: 'operationsCtrl'
|
||||
})
|
||||
.when('/account/:accountId/scheduler', {
|
||||
templateUrl: schedulerTmpl,
|
||||
controller: 'SchedulerController',
|
||||
controllerAs: 'schedulerCtrl'
|
||||
})
|
||||
.when('/accounts', {
|
||||
templateUrl: accountsTmpl,
|
||||
controller: 'AccountController',
|
||||
controllerAs: 'accountsCtrl'
|
||||
})
|
||||
.otherwise({
|
||||
redirectTo: '/accounts'
|
||||
});
|
||||
};
|
||||
@ -1,5 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
import { Level } from '@nsalaun/ng-logger';
|
||||
|
||||
export const ApiBaseURL = "http://localhost:8080/api";
|
||||
export const LogLevel = Level.LOG;
|
||||
40
src/app.js
Normal file
40
src/app.js
Normal file
@ -0,0 +1,40 @@
|
||||
// vim: set tw=80 ts=4 sw=4 sts=4:
|
||||
/*
|
||||
This file is part of Accountant.
|
||||
|
||||
Accountant is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
Accountant is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with Accountant. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
/* jshint node: true */
|
||||
'use strict';
|
||||
|
||||
var angular = require('angular');
|
||||
|
||||
var ngRoute = require('angular-route');
|
||||
|
||||
var accountModule = require('./accounts'),
|
||||
loginModule = require('./login'),
|
||||
operationModule = require('./operations'),
|
||||
schedulerModule = require('./scheduler');
|
||||
|
||||
var routing = require('./app.config');
|
||||
|
||||
require('bootstrap-webpack!./bootstrap.config.js');
|
||||
|
||||
angular.module('accountant', [
|
||||
ngRoute,
|
||||
accountModule,
|
||||
loginModule,
|
||||
operationModule,
|
||||
schedulerModule,
|
||||
]).config(routing);
|
||||
@ -1,52 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2:
|
||||
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
import { NgLoggerModule } from '@nsalaun/ng-logger';
|
||||
import { ToastrModule } from 'ngx-toastr';
|
||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
import { LoginModule } from './login/login.module';
|
||||
import { AccountModule } from './accounts/account.module';
|
||||
import { ScheduleModule } from './scheduler/schedule.module';
|
||||
import { OperationModule } from './operations/operation.module';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
import { ApiBaseURL, LogLevel } from './app.config';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
BrowserAnimationsModule,
|
||||
RouterModule.forRoot([
|
||||
{
|
||||
path: '',
|
||||
redirectTo: '/accounts',
|
||||
pathMatch: 'full'
|
||||
}
|
||||
], {
|
||||
enableTracing: true,
|
||||
useHash: true,
|
||||
onSameUrlNavigation: 'reload'
|
||||
}),
|
||||
LoginModule,
|
||||
NgLoggerModule.forRoot(LogLevel),
|
||||
ToastrModule.forRoot(),
|
||||
NgbModule.forRoot(),
|
||||
AccountModule,
|
||||
ScheduleModule,
|
||||
OperationModule,
|
||||
],
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
|
||||
export class AppModule {
|
||||
constructor() {}
|
||||
}
|
||||
64
src/bootstrap.config.js
vendored
Normal file
64
src/bootstrap.config.js
vendored
Normal file
@ -0,0 +1,64 @@
|
||||
/* jshint node: true */
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
scripts: {
|
||||
'transition': true,
|
||||
'alert': true,
|
||||
'button': true,
|
||||
'carousel': true,
|
||||
'collapse': true,
|
||||
'dropdown': true,
|
||||
'modal': true,
|
||||
'tooltip': true,
|
||||
'popover': true,
|
||||
'scrollspy': true,
|
||||
'tab': true,
|
||||
'affix': true
|
||||
},
|
||||
|
||||
styles: {
|
||||
'mixins': true,
|
||||
|
||||
'normalize': true,
|
||||
'print': true,
|
||||
|
||||
'scaffolding': true,
|
||||
'type': true,
|
||||
'code': true,
|
||||
'grid': true,
|
||||
'tables': true,
|
||||
'forms': true,
|
||||
'buttons': true,
|
||||
|
||||
'component-animations': true,
|
||||
'glyphicons': true,
|
||||
'dropdowns': true,
|
||||
'button-groups': true,
|
||||
'input-groups': true,
|
||||
'navs': true,
|
||||
'navbar': true,
|
||||
'breadcrumbs': true,
|
||||
'pagination': true,
|
||||
'pager': true,
|
||||
'labels': true,
|
||||
'badges': true,
|
||||
'jumbotron': true,
|
||||
'thumbnails': true,
|
||||
'alerts': true,
|
||||
'progress-bars': true,
|
||||
'media': true,
|
||||
'list-group': true,
|
||||
'panels': true,
|
||||
'wells': true,
|
||||
'close': true,
|
||||
|
||||
'modals': true,
|
||||
'tooltip': true,
|
||||
'popovers': true,
|
||||
'carousel': true,
|
||||
|
||||
'utilities': true,
|
||||
'responsive-utilities': true
|
||||
}
|
||||
};
|
||||
3
src/bootstrap.config.less
vendored
Normal file
3
src/bootstrap.config.less
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
@pre-border-color: @pre-bg; // hide the border.
|
||||
|
||||
@import "./main.less";
|
||||
@ -1,18 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
|
||||
<!--
|
||||
This file is part of Accountant.
|
||||
|
||||
Accountant is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
Accountant is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with Accountant. If not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<base href="/">
|
||||
|
||||
<!-- Title -->
|
||||
<title><% htmlWebpackPlugin.options.title %></title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
</head>
|
||||
|
||||
<!-- htmllint attr-bans="false" -->
|
||||
<body style="padding-bottom: 50px; padding-top: 70px">
|
||||
<body style="padding-bottom: 50px; padding-top: 70px" ng-app="accountant">
|
||||
<!-- htmllint attr-bans="$previous" -->
|
||||
<accountant></accountant>
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-fixed-top navbar-inverse">
|
||||
<div class="container-fluid">
|
||||
<!-- Brand -->
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="#!/accounts"> Accountant</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div ng-view></div>
|
||||
</div>
|
||||
|
||||
<!-- Custom Javascript libraries -->
|
||||
<script src="<% htmlWebpackPlugin.files.js[0] %>"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,92 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
|
||||
import { Injectable, Injector } from '@angular/core';
|
||||
import {
|
||||
HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse
|
||||
} from '@angular/common/http';
|
||||
|
||||
import { Observable} from 'rxjs/Rx';
|
||||
import 'rxjs/add/operator/catch';
|
||||
|
||||
import { Logger } from '@nsalaun/ng-logger';
|
||||
|
||||
import { LoginService } from './login.service';
|
||||
import { Token } from './token';
|
||||
|
||||
@Injectable()
|
||||
export class AuthInterceptor implements HttpInterceptor {
|
||||
private observable: Observable<Token>;
|
||||
|
||||
constructor(
|
||||
private logger: Logger,
|
||||
private injector: Injector,
|
||||
) {}
|
||||
|
||||
injectAuthorizationHeader(request: HttpRequest<any>, accessToken: string) {
|
||||
this.logger.log('Injecting Authorization header');
|
||||
|
||||
return request;
|
||||
}
|
||||
|
||||
intercept(
|
||||
request: HttpRequest<any>,
|
||||
next: HttpHandler,
|
||||
pass?: number
|
||||
): Observable<HttpEvent<any>> {
|
||||
if(!pass) {
|
||||
pass = 1;
|
||||
}
|
||||
|
||||
let loginService = this.injector.get(LoginService);
|
||||
|
||||
if(request.url == loginService.url) {
|
||||
this.logger.log('Login URL, do not handle.');
|
||||
|
||||
return next.handle(request);
|
||||
}
|
||||
|
||||
this.logger.log(`Intercepted request, pass #${pass}`, request, next);
|
||||
|
||||
let accessToken = loginService.accessToken;
|
||||
|
||||
if(accessToken){
|
||||
request = request.clone({
|
||||
headers: request.headers.set('Authorization', `Bearer ${accessToken}`)
|
||||
});
|
||||
}
|
||||
|
||||
this.logger.log('Request', request);
|
||||
|
||||
let observable: Observable<any> = next.handle(request);
|
||||
|
||||
return observable.catch(
|
||||
(error, caught): Observable<any> => {
|
||||
this.logger.error('Error', error, caught);
|
||||
|
||||
if(!(error instanceof HttpErrorResponse) || error.status != 401) {
|
||||
return Observable.throw(error);
|
||||
}
|
||||
|
||||
this.logger.log('Unauthorized', error);
|
||||
|
||||
if(pass === 3) {
|
||||
return Observable.throw(error);
|
||||
}
|
||||
|
||||
if(!this.observable) {
|
||||
this.logger.log('No current login observable.');
|
||||
this.observable = loginService.login();
|
||||
}
|
||||
|
||||
return this.observable.flatMap((token: Token): Observable<HttpEvent<any>> => {
|
||||
this.logger.log('Logged in, access_token:', token.access_token);
|
||||
this.observable = null;
|
||||
return this.intercept(request, next, ++pass);
|
||||
}).catch((error) => {
|
||||
this.observable = null;
|
||||
return Observable.throw(error);
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
50
src/login/index.js
Normal file
50
src/login/index.js
Normal file
@ -0,0 +1,50 @@
|
||||
// vim: set tw=80 ts=4 sw=4 sts=4:
|
||||
/*
|
||||
This file is part of Accountant.
|
||||
|
||||
Accountant is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
Accountant is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with Accountant. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
/* jshint node: true */
|
||||
'use strict';
|
||||
|
||||
var angular = require('angular');
|
||||
|
||||
var ngStorage = require('meanie-angular-storage'),
|
||||
ngHttpAuth = require('angular-http-auth'),
|
||||
ngStrap = require('angular-strap');
|
||||
|
||||
// Note: ngHttpAuth seems to have no module.exports.
|
||||
ngHttpAuth = 'http-auth-interceptor';
|
||||
|
||||
var LoginService = require('./login.service');
|
||||
var LoginConfig = require('./login.config');
|
||||
|
||||
module.exports = angular.module('accountant.login', [
|
||||
ngHttpAuth,
|
||||
ngStorage
|
||||
])
|
||||
|
||||
.service('LoginService', LoginService)
|
||||
|
||||
.config(LoginConfig)
|
||||
|
||||
.run(function($rootScope, LoginService) {
|
||||
var onAuthLoginRequired = $rootScope.$on('event:auth-loginRequired', LoginService.loginModal);
|
||||
|
||||
$rootScope.$on('$destroy', function() {
|
||||
onAuthLoginRequired = angular.noop();
|
||||
});
|
||||
})
|
||||
|
||||
.name;
|
||||
31
src/login/login.config.js
Normal file
31
src/login/login.config.js
Normal file
@ -0,0 +1,31 @@
|
||||
module.exports = function($httpProvider, $storageProvider) {
|
||||
// Define interceptors.
|
||||
$httpProvider.interceptors.push(function($storage) {
|
||||
return {
|
||||
request: function(config) {
|
||||
var access_token = $storage.session.get('access_token');
|
||||
|
||||
if (access_token) {
|
||||
//var tokenType = $storage.get('token_type');
|
||||
var tokenType = 'Bearer';
|
||||
var authorization = tokenType + ' ' + access_token;
|
||||
config.headers.authorization = authorization;
|
||||
}
|
||||
|
||||
return config;
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
// Configure storage
|
||||
// Set global prefix for stored keys
|
||||
$storageProvider.setPrefix('accountant');
|
||||
|
||||
// Change the default storage engine
|
||||
// Defaults to 'local'
|
||||
$storageProvider.setDefaultStorageEngine('session');
|
||||
|
||||
// Change the enabled storage engines
|
||||
// Defaults to ['memory', 'cookie', 'session', 'local']
|
||||
$storageProvider.setEnabledStorageEngines(['local', 'session']);
|
||||
};
|
||||
@ -1,39 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { HTTP_INTERCEPTORS } from '@angular/common/http';
|
||||
|
||||
import { NgLoggerModule } from '@nsalaun/ng-logger';
|
||||
|
||||
import { AuthInterceptor } from './authInterceptor';
|
||||
import { LoginService } from './login.service';
|
||||
import { LoginFormComponent } from './loginForm.component';
|
||||
import { LoginModalComponent } from './loginModal.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
HttpClientModule,
|
||||
CommonModule,
|
||||
ReactiveFormsModule,
|
||||
NgLoggerModule,
|
||||
],
|
||||
providers: [
|
||||
LoginService,
|
||||
{
|
||||
provide: HTTP_INTERCEPTORS,
|
||||
useClass: AuthInterceptor,
|
||||
multi: true
|
||||
}
|
||||
],
|
||||
declarations: [
|
||||
LoginModalComponent,
|
||||
LoginFormComponent,
|
||||
],
|
||||
entryComponents: [
|
||||
LoginModalComponent,
|
||||
]
|
||||
})
|
||||
export class LoginModule {};
|
||||
45
src/login/login.service.js
Normal file
45
src/login/login.service.js
Normal file
@ -0,0 +1,45 @@
|
||||
var base64 = require('base64util');
|
||||
|
||||
var loginTmpl = require('./login.tmpl.html');
|
||||
|
||||
module.exports = function($storage, $http, authService, $modal) {
|
||||
var login = function(email, password) {
|
||||
// Encode authentication data.
|
||||
var authdata = base64.encode(email + ':' + password);
|
||||
|
||||
return $http.post('/api/user/login', {}, {
|
||||
ignoreAuthModule: true,
|
||||
headers: {
|
||||
'authorization': 'Basic ' + authdata
|
||||
}
|
||||
}).then(function (result) {
|
||||
$storage.session.set('refresh_token', result.data.refresh_token);
|
||||
$storage.session.set('access_token', result.data.access_token);
|
||||
|
||||
authService.loginConfirmed();
|
||||
}, function(result) {
|
||||
loginModal();
|
||||
});
|
||||
};
|
||||
|
||||
var loginModal = function () {
|
||||
$storage.session.clear();
|
||||
|
||||
$modal({
|
||||
templateUrl: loginTmpl,
|
||||
controller: function($scope, $login) {
|
||||
$scope.$login = function() {
|
||||
$scope.$hide();
|
||||
$login($scope.email, $scope.password);
|
||||
};
|
||||
},
|
||||
locals: {
|
||||
$login: login,
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
'loginModal': loginModal,
|
||||
};
|
||||
};
|
||||
@ -1,67 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient, HttpHeaders } from '@angular/common/http';
|
||||
|
||||
import { Observable} from 'rxjs/Rx';
|
||||
|
||||
import * as base64 from 'base64util';
|
||||
|
||||
import { Logger } from '@nsalaun/ng-logger';
|
||||
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
import { Token } from './token';
|
||||
import { LoginModalComponent } from './loginModal.component';
|
||||
import { Login } from './login';
|
||||
|
||||
@Injectable()
|
||||
export class LoginService {
|
||||
|
||||
constructor(
|
||||
private httpClient: HttpClient,
|
||||
private logger: Logger,
|
||||
private ngbModal: NgbModal,
|
||||
) {}
|
||||
|
||||
public readonly url: string = '/api/user/login';
|
||||
|
||||
login(): Observable<Token> {
|
||||
let modal = this.ngbModal.open(LoginModalComponent);
|
||||
|
||||
sessionStorage.clear();
|
||||
|
||||
let observable: Observable<any> = Observable.fromPromise(modal.result);
|
||||
|
||||
return observable.flatMap((login: Login) =>
|
||||
this.doLogin(login)
|
||||
).map((token: Token): Token => {
|
||||
this.accessToken = token.access_token;
|
||||
return token;
|
||||
});
|
||||
}
|
||||
|
||||
logout() {
|
||||
sessionStorage.clear();
|
||||
}
|
||||
|
||||
doLogin(login: Login): Observable<any> {
|
||||
var authdata = base64.encode(
|
||||
`${login.email}:${login.password}`
|
||||
);
|
||||
|
||||
let headers = new HttpHeaders()
|
||||
headers = headers.set('Authorization', `Basic ${authdata}`);
|
||||
|
||||
this.logger.log("Headers", headers);
|
||||
|
||||
return this.httpClient.post(this.url, {}, {
|
||||
headers: headers
|
||||
});
|
||||
}
|
||||
|
||||
get accessToken(): string {
|
||||
return sessionStorage.getItem('access_token');
|
||||
}
|
||||
|
||||
set accessToken(token: string) {
|
||||
sessionStorage.setItem('access_token', token);
|
||||
}
|
||||
};
|
||||
38
src/login/login.tmpl.html
Normal file
38
src/login/login.tmpl.html
Normal file
@ -0,0 +1,38 @@
|
||||
<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
|
||||
<div class="modal top am-fade" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title" id="modal-title">Authentification requise</h3>
|
||||
</div>
|
||||
|
||||
<form class="form-horizontal" ng-submit="$login()">
|
||||
<div class="modal-body" id="modal-body">
|
||||
<div class="form-group">
|
||||
<label for="email" class="col-sm-4 control-label">Adresse email</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" id="email" ng-model="email"
|
||||
placeholder="Nom d'utilisateur">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password" class="col-sm-4 control-label">Mot de passe</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="password" class="form-control" id="password"
|
||||
ng-model="password" placeholder="Mot de passe">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<input class="btn btn-primary" type="submit" value="OK"/>
|
||||
|
||||
<button class="btn btn-default" type="button" ng-click="$hide()">
|
||||
Annuler
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,6 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2:
|
||||
|
||||
export class Login {
|
||||
public email: string;
|
||||
public password: string;
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
<form novalidate (keyup.enter)="submit()" [formGroup]="form">
|
||||
<div class="form-group row">
|
||||
<label for="email" class="col-sm-4 control-label">Adresse email</label>
|
||||
|
||||
<div class="col-sm-8"
|
||||
[class.has-danger]="email.errors">
|
||||
<input type="text" class="form-control" id="email"
|
||||
formControlName="email" placeholder="Nom d'utilisateur">
|
||||
|
||||
<div class="help-block text-danger" *ngIf="email.errors">
|
||||
<p *ngIf="email.errors.required">The email is required.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label for="password" class="col-sm-4 control-label">Mot de passe</label>
|
||||
|
||||
<div class="col-sm-8"
|
||||
[class.has-danger]="password.errors">
|
||||
<input type="password" class="form-control" id="password"
|
||||
formControlName="password" placeholder="Mot de passe">
|
||||
|
||||
<div class="help-block text-danger" *ngIf="password.errors">
|
||||
<p *ngIf="password.errors.required">The password is required.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@ -1,40 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
import { Component, OnInit, OnChanges, Input, Output, EventEmitter } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
|
||||
import { Login } from './login';
|
||||
|
||||
@Component({
|
||||
selector: 'login-form',
|
||||
exportAs: 'loginForm',
|
||||
templateUrl: './loginForm.component.html'
|
||||
})
|
||||
|
||||
export class LoginFormComponent {
|
||||
public form: FormGroup;
|
||||
@Input('login-form') private login: Login
|
||||
@Output('submit') submitEventEmitter: EventEmitter<void> = new EventEmitter<void>();
|
||||
|
||||
constructor(private formBuilder : FormBuilder) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.form = this.formBuilder.group({
|
||||
email: ['', Validators.required],
|
||||
password: ['', Validators.required]
|
||||
})
|
||||
}
|
||||
|
||||
submit() {
|
||||
if(this.form.valid) {
|
||||
this.submitEventEmitter.emit();
|
||||
}
|
||||
}
|
||||
|
||||
get email() {
|
||||
return this.form.get('email');
|
||||
}
|
||||
|
||||
get password() {
|
||||
return this.form.get('password');
|
||||
}
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title" id="modal-title">Authentification requise</h3>
|
||||
</div>
|
||||
|
||||
<div class="modal-body" id="modal-body">
|
||||
<login-form (submit)="submit()" #loginForm="loginForm"></login-form>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-succes" [disabled]="!loginForm.form.valid" (click)="submit()">
|
||||
Login
|
||||
</button>
|
||||
|
||||
<button class="btn btn-default" (click)="cancel()">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
@ -1,35 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2:
|
||||
import { Component, Input, ViewChild } from '@angular/core';
|
||||
|
||||
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
//import { jqxWindowComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxwindow';
|
||||
import { jqxButtonComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxbuttons';
|
||||
|
||||
import { Login } from './login';
|
||||
import { LoginFormComponent } from './loginForm.component';
|
||||
|
||||
@Component({
|
||||
selector: 'login-modal',
|
||||
templateUrl: './loginModal.component.html'
|
||||
})
|
||||
export class LoginModalComponent {
|
||||
@ViewChild('loginForm') loginForm: LoginFormComponent;
|
||||
|
||||
constructor(private activeModal: NgbActiveModal) {
|
||||
|
||||
}
|
||||
|
||||
submit(): void {
|
||||
let formModel = this.loginForm.form.value;
|
||||
let login: Login = new Login();
|
||||
|
||||
login.email = formModel.email;
|
||||
login.password = formModel.password;
|
||||
|
||||
this.activeModal.close(login);
|
||||
}
|
||||
|
||||
cancel(): void {
|
||||
this.activeModal.dismiss("closed");
|
||||
}
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
|
||||
export class Token {
|
||||
public access_token: string;
|
||||
public refresh_token: string;
|
||||
}
|
||||
41
src/main.less
Normal file
41
src/main.less
Normal file
@ -0,0 +1,41 @@
|
||||
@import '~font-awesome/less/font-awesome';
|
||||
|
||||
@import '~angular-ui-notification/src/angular-ui-notification';
|
||||
|
||||
@import (inline) '~c3/c3.css';
|
||||
|
||||
@import (inline) '~bootstrap-additions/dist/bootstrap-additions.css';
|
||||
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.stroke {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.c3-ygrid-line.zeroline line {
|
||||
stroke: orange;
|
||||
}
|
||||
|
||||
.c3-ygrid-line.overdraft line {
|
||||
stroke: #FF0000;
|
||||
}
|
||||
|
||||
// Needed for modal backdrop opacity.
|
||||
.modal-backdrop.am-fade {
|
||||
opacity: .5;
|
||||
transition: opacity .15s linear;
|
||||
&.ng-enter {
|
||||
opacity: 0;
|
||||
&.ng-enter-active {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
&.ng-leave {
|
||||
opacity: .5;
|
||||
&.ng-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
$fa-font-path: '~font-awesome/fonts';
|
||||
|
||||
@import '~font-awesome/scss/font-awesome';
|
||||
|
||||
@import '~bootstrap/scss/bootstrap';
|
||||
|
||||
@import '~jqwidgets-scripts/jqwidgets/styles/jqx.base';
|
||||
|
||||
@import '~ngx-toastr/toastr';
|
||||
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.stroke {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppModule } from './app.module';
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
190
src/operations/balance-chart.component.js
Normal file
190
src/operations/balance-chart.component.js
Normal file
@ -0,0 +1,190 @@
|
||||
// vim: set tw=80 ts=4 sw=4 sts=4:
|
||||
/*
|
||||
This file is part of Accountant.
|
||||
|
||||
Accountant is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
Accountant is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with Accountant. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
/* jshint node: true */
|
||||
'use strict';
|
||||
|
||||
var moment = require('moment'),
|
||||
c3 = require('c3');
|
||||
|
||||
var angular = require('angular');
|
||||
|
||||
var ngResource = require('angular-resource');
|
||||
|
||||
module.exports = angular.module('balanceChartModule', [
|
||||
ngResource
|
||||
])
|
||||
|
||||
.component('balanceChart', {
|
||||
template: '<div></div>',
|
||||
bindings: {
|
||||
account: '<',
|
||||
onUpdate: '&'
|
||||
},
|
||||
controller: function($routeParams, Balances, $element) {
|
||||
var vm = this;
|
||||
|
||||
vm.loadData = function() {
|
||||
Balances.query({
|
||||
id: $routeParams.accountId
|
||||
}, function(results) {
|
||||
var headers = [['date', 'balances', 'expenses', 'revenues']];
|
||||
|
||||
var rows = results.map(function(result) {
|
||||
return [
|
||||
result.operation_date,
|
||||
result.balance,
|
||||
result.expenses,
|
||||
result.revenues
|
||||
];
|
||||
});
|
||||
|
||||
vm.chart.unload();
|
||||
|
||||
vm.chart.load({
|
||||
rows: headers.concat(rows)
|
||||
});
|
||||
|
||||
var x = vm.chart.x();
|
||||
var balances = x.balances;
|
||||
|
||||
vm.onUpdate(balances[0], balances[balances.length - 1]);
|
||||
});
|
||||
};
|
||||
|
||||
vm.$onInit = function() {
|
||||
var tomorrow = moment().endOf('day').valueOf();
|
||||
|
||||
vm.chart = c3.generate({
|
||||
bindto: $element[0].children[0],
|
||||
size: {
|
||||
height: 450,
|
||||
},
|
||||
data: {
|
||||
x: 'date',
|
||||
rows: [],
|
||||
axes: {
|
||||
expenses: 'y2',
|
||||
revenues: 'y2'
|
||||
},
|
||||
type: 'bar',
|
||||
types: {
|
||||
balances: 'area'
|
||||
},
|
||||
groups: [
|
||||
['expenses', 'revenues']
|
||||
],
|
||||
// Disable for the moment because there is an issue when
|
||||
// using subchart line is not refreshed after subset
|
||||
// selection.
|
||||
//regions: {
|
||||
// balances: [{
|
||||
// start: tomorrow,
|
||||
// style: 'dashed'
|
||||
// }]
|
||||
//}
|
||||
},
|
||||
regions: [{
|
||||
start: tomorrow,
|
||||
}],
|
||||
axis: {
|
||||
x: {
|
||||
type: 'timeseries',
|
||||
tick: {
|
||||
format: '%Y-%m-%d',
|
||||
rotate: 50,
|
||||
}
|
||||
},
|
||||
y: {
|
||||
label: {
|
||||
text: 'Amount',
|
||||
position: 'outer-middle'
|
||||
}
|
||||
},
|
||||
y2: {
|
||||
show: true,
|
||||
label: {
|
||||
text: 'Amount',
|
||||
position: 'outer-middle'
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
x: {
|
||||
show: true,
|
||||
},
|
||||
y: {
|
||||
show: true,
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
format: {
|
||||
value: function(value, ratio, id, index) {
|
||||
return value + '€';
|
||||
}
|
||||
}
|
||||
},
|
||||
subchart: {
|
||||
show: true,
|
||||
onbrush: function(domain) {
|
||||
vm.onUpdate({minDate: domain[0], maxDate: domain[1]});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
vm.loadData();
|
||||
};
|
||||
|
||||
vm.setLines = function(account) {
|
||||
if(vm.chart) {
|
||||
vm.chart.ygrids([
|
||||
{ value: 0, axis: 'y2' },
|
||||
{ value: 0, axis: 'y', class: 'zeroline'},
|
||||
]);
|
||||
|
||||
vm.chart.ygrids.add({
|
||||
value: account.authorized_overdraft,
|
||||
axis: 'y',
|
||||
class: 'overdraft'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
vm.$onChanges = function(changes) {
|
||||
if('account' in changes) {
|
||||
if('$promise' in vm.account && vm.account.$resolved === false) {
|
||||
vm.account.$promise.then(function(account) {
|
||||
vm.setLines(account);
|
||||
return account;
|
||||
});
|
||||
} else {
|
||||
vm.setLines(vm.account);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
})
|
||||
|
||||
.factory('Balances', function($resource) {
|
||||
return $resource(
|
||||
'/api/account/:id/daily_balances', {
|
||||
id: '@id'
|
||||
}
|
||||
);
|
||||
})
|
||||
|
||||
.name;
|
||||
@ -1,203 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2:
|
||||
|
||||
import * as moment from 'moment';
|
||||
|
||||
import { Component, ViewChild, Input, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, Router, ParamMap } from '@angular/router';
|
||||
|
||||
import { Logger } from '@nsalaun/ng-logger';
|
||||
import { jqxChartComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxchart';
|
||||
|
||||
import { Account } from '../accounts/account';
|
||||
import { DailyBalance } from './dailyBalance';
|
||||
import { DailyBalanceService } from '../accounts/dailyBalance.service';
|
||||
|
||||
@Component({
|
||||
selector: 'balance-chart',
|
||||
template: `
|
||||
<jqxChart #balanceChart
|
||||
[width]="'100%'"
|
||||
[height]="400"
|
||||
[title]="'Balance evolution'"
|
||||
[description]="''"
|
||||
[source]="data"
|
||||
[xAxis]="xAxis"
|
||||
[valueAxis]="valueAxis"
|
||||
[seriesGroups]="seriesGroups"
|
||||
(onRangeSelectionChanged)="select($event)">
|
||||
</jqxChart>
|
||||
`
|
||||
})
|
||||
export class BalanceChartComponent implements OnInit {
|
||||
private _account: Account;
|
||||
@ViewChild('balanceChart') chart: jqxChartComponent;
|
||||
|
||||
public data;
|
||||
|
||||
public xAxis: any = {
|
||||
type: 'date',
|
||||
dataField: 'operation_date',
|
||||
displayText: 'Date',
|
||||
baseUnit: 'day',
|
||||
|
||||
bands: [{
|
||||
fillColor: 'blue',
|
||||
opacity: 0.10
|
||||
}],
|
||||
|
||||
rangeSelector: {
|
||||
size: 80,
|
||||
padding: { /*left: 0, right: 0,*/top: 0, bottom: 0 },
|
||||
backgroundColor: 'white',
|
||||
dataField: 'balance',
|
||||
//baseUnit: 'month',
|
||||
baseUnit: 'day',
|
||||
gridLines: { visible: false },
|
||||
serieType: 'line',
|
||||
//labels: {
|
||||
// formatFunction: (value: any): any => {
|
||||
// return this.months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
|
||||
// }
|
||||
//}
|
||||
}
|
||||
};
|
||||
|
||||
public valueAxis: any = {
|
||||
title: {
|
||||
visible: false
|
||||
},
|
||||
};
|
||||
|
||||
public seriesGroups: any = [{
|
||||
type: 'stackedcolumn',
|
||||
valueAxis: {
|
||||
title: { text: 'Expenses/revenues' },
|
||||
position: 'right',
|
||||
visible: true,
|
||||
gridLines: { visible: false },
|
||||
labels: {
|
||||
horizontalAlignment: 'left',
|
||||
formatSettings: {
|
||||
sufix: '€',
|
||||
decimalPlaces: 2
|
||||
},
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
dataField: 'expenses',
|
||||
displayText: 'Expenses',
|
||||
fillColor: 'tomato'
|
||||
}, {
|
||||
dataField: 'revenues',
|
||||
displayText: 'Revenues',
|
||||
fillColor: 'yellowgreen'
|
||||
}]
|
||||
}, {
|
||||
type: 'stepline',
|
||||
valueAxis: {
|
||||
title: { text: 'Balance' },
|
||||
//gridLines: { visible: false },
|
||||
labels: {
|
||||
formatSettings: {
|
||||
sufix: '€',
|
||||
decimalPlaces: 2
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
dataField: 'balance',
|
||||
displayText: 'Balance',
|
||||
fillColor: 'steelblue'
|
||||
}],
|
||||
bands: [{
|
||||
minValue: 0, maxValue: 0, fillColor: 'orange', lineWidth: 1
|
||||
}, {
|
||||
minValue: 0, maxValue: 0, fillColor: 'red', lineWidth: 1
|
||||
}]
|
||||
}];
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private logger: Logger,
|
||||
private dailyBalanceService: DailyBalanceService,
|
||||
) {
|
||||
this.data = [];
|
||||
}
|
||||
|
||||
loadData() {
|
||||
this.logger.info('Loading data.');
|
||||
|
||||
let accountId = this.activatedRoute.snapshot.paramMap.get('accountId');
|
||||
|
||||
this.dailyBalanceService.query(
|
||||
+accountId
|
||||
).subscribe((results) => {
|
||||
this.data = results;
|
||||
|
||||
let lastResult = results[results.length -1];
|
||||
|
||||
this.updateXBands(results[0].operation_date, lastResult.operation_date);
|
||||
});
|
||||
}
|
||||
|
||||
setLines(account: Account) {
|
||||
if (account) {
|
||||
this.seriesGroups[1].bands[1].minValue = account.authorized_overdraft;
|
||||
this.seriesGroups[1].bands[1].maxValue = account.authorized_overdraft;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.activatedRoute.queryParamMap.subscribe((params: ParamMap) => {
|
||||
let fromDay = params.get('from');
|
||||
let toDay = params.get('to');
|
||||
|
||||
this.xAxis.minValue = moment(fromDay).toDate();
|
||||
this.xAxis.maxValue = moment(toDay).toDate();
|
||||
|
||||
if(this.chart && this.chart.host) {
|
||||
this.chart.refresh();
|
||||
}
|
||||
});
|
||||
|
||||
this.loadData();
|
||||
}
|
||||
|
||||
@Input()
|
||||
set account(account: Account) {
|
||||
this._account = account;
|
||||
|
||||
this.setLines(account);
|
||||
}
|
||||
|
||||
get account(): Account {
|
||||
return this._account;
|
||||
}
|
||||
|
||||
updateXBands(minDate, maxDate) {
|
||||
if(moment(maxDate) > moment()) {
|
||||
if(moment(minDate) < moment()) {
|
||||
this.xAxis.bands[0].minValue = moment().toDate();
|
||||
} else {
|
||||
this.xAxis.bands[0].minValue = moment(minDate).toDate();
|
||||
}
|
||||
this.xAxis.bands[0].maxValue = moment(maxDate).toDate();
|
||||
}
|
||||
}
|
||||
|
||||
select(event: any) {
|
||||
let args = event.args;
|
||||
|
||||
this.updateXBands(args.minValue, args.maxValue);
|
||||
|
||||
let accountId = this.activatedRoute.snapshot.paramMap.get('accountId');
|
||||
|
||||
this.router.navigate(['account', accountId, 'operations'], {
|
||||
queryParams: {
|
||||
from: moment(args.minValue).format('YYYY-MM-DD'),
|
||||
to: moment(args.maxValue).format('YYYY-MM-DD')
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
137
src/operations/category-chart.component.js
Normal file
137
src/operations/category-chart.component.js
Normal file
@ -0,0 +1,137 @@
|
||||
// vim: set tw=80 ts=4 sw=4 sts=4:
|
||||
/*
|
||||
This file is part of Accountant.
|
||||
|
||||
Accountant is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
Accountant is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with Accountant. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
/* jshint node: true */
|
||||
'use strict';
|
||||
|
||||
var moment = require('moment'),
|
||||
c3 = require('c3');
|
||||
|
||||
var angular = require('angular');
|
||||
|
||||
var ngResource = require('angular-resource');
|
||||
|
||||
module.exports = angular.module('categoryChartModule', [
|
||||
ngResource
|
||||
])
|
||||
|
||||
.component('categoryChart', {
|
||||
template: '<div></div>',
|
||||
bindings: {
|
||||
minDate: '<',
|
||||
maxDate: '<'
|
||||
},
|
||||
controller: function($routeParams, $element, Categories, Incomes) {
|
||||
var vm = this;
|
||||
|
||||
vm.loadData = function() {
|
||||
Categories.query({
|
||||
id: $routeParams.accountId,
|
||||
begin: vm.minDate ? moment(vm.minDate).format('YYYY-MM-DD') : null,
|
||||
end: vm.maxDate ? moment(vm.maxDate).format('YYYY-MM-DD') : null
|
||||
}, function(results) {
|
||||
var expenses=[],
|
||||
revenues=[],
|
||||
colors={},
|
||||
names={};
|
||||
|
||||
var revenuesColor = 'green',
|
||||
expensesColor = 'orange';
|
||||
|
||||
angular.forEach(results, function(result) {
|
||||
|
||||
if(result.revenues > 0) {
|
||||
var revenuesName = 'revenues-' + result.category;
|
||||
|
||||
revenues.push([revenuesName, result.revenues]);
|
||||
names[revenuesName] = result.category;
|
||||
colors[revenuesName] = revenuesColor;
|
||||
}
|
||||
|
||||
if(result.expenses < 0) {
|
||||
var expensesName = 'expenses-' + result.category;
|
||||
|
||||
expenses.splice(0, 0, [expensesName, -result.expenses]);
|
||||
names[expensesName] = result.category;
|
||||
colors[expensesName] = expensesColor;
|
||||
}
|
||||
});
|
||||
|
||||
vm.chart.unload();
|
||||
|
||||
vm.chart.load({
|
||||
columns: revenues.concat(expenses),
|
||||
names: names,
|
||||
colors: colors
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
vm.$onInit = function() {
|
||||
vm.chart = c3.generate({
|
||||
bindto: $element[0].children[0],
|
||||
data: {
|
||||
columns: [],
|
||||
type: 'donut',
|
||||
order: null,
|
||||
},
|
||||
tooltip: {
|
||||
format: {
|
||||
value: function(value, ratio, id, index) {
|
||||
return value + '€';
|
||||
}
|
||||
}
|
||||
},
|
||||
donut: {
|
||||
label: {
|
||||
format: function(value) {
|
||||
return value + '€';
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
});
|
||||
|
||||
//vm.loadData();
|
||||
};
|
||||
|
||||
vm.$onChanges = function() {
|
||||
vm.loadData();
|
||||
};
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
.factory('Categories', function($resource) {
|
||||
return $resource(
|
||||
'/api/account/:id/category', {
|
||||
id: '@id'
|
||||
}
|
||||
);
|
||||
})
|
||||
|
||||
.factory('Incomes', function($resource) {
|
||||
return $resource(
|
||||
'/api/account/:id/income', {
|
||||
id: '@id'
|
||||
}
|
||||
);
|
||||
})
|
||||
|
||||
.name;
|
||||
@ -1,39 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2:
|
||||
|
||||
import * as moment from 'moment';
|
||||
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable } from 'rxjs/Rx';
|
||||
|
||||
import { HttpClient, HttpParams } from "@angular/common/http";
|
||||
|
||||
import { Category } from './category';
|
||||
|
||||
@Injectable()
|
||||
export class CategoryService {
|
||||
constructor(
|
||||
private http: HttpClient
|
||||
) {}
|
||||
|
||||
formatDate(date: Date|string) {
|
||||
if(date instanceof Date) {
|
||||
return moment(date).format('YYYY-MM-DD');
|
||||
}
|
||||
|
||||
return date;
|
||||
}
|
||||
|
||||
query(id: number, minDate: Date|string = null, maxDate: Date|string = null): Observable<Category[]> {
|
||||
let params: HttpParams = new HttpParams();
|
||||
|
||||
if(minDate) {
|
||||
params = params.set('begin', this.formatDate(minDate));
|
||||
}
|
||||
|
||||
if(maxDate) {
|
||||
params = params.set('end', this.formatDate(maxDate));
|
||||
}
|
||||
|
||||
return this.http.get<Category[]>(`/api/account/${id}/category`, { params: params});
|
||||
}
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
|
||||
export class Category {
|
||||
public category: string;
|
||||
public expenses: number;
|
||||
public revenues: number;
|
||||
public income: number;
|
||||
}
|
||||
@ -1,141 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
|
||||
import { Component, ViewChild, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, ParamMap } from '@angular/router';
|
||||
|
||||
import { Logger } from '@nsalaun/ng-logger';
|
||||
import { jqxChartComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxchart';
|
||||
|
||||
import * as _ from 'underscore';
|
||||
|
||||
import { Category } from './category';
|
||||
import { CategoryService } from './category.service';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'category-chart',
|
||||
template: `
|
||||
<jqxChart #categoryChart
|
||||
[width]="'100%'"
|
||||
[height]="400"
|
||||
[title]="'Categories'"
|
||||
[description]="''"
|
||||
[showLegend]="false"
|
||||
[seriesGroups]="seriesGroups">
|
||||
</jqxChart>
|
||||
`
|
||||
})
|
||||
export class CategoryChartComponent implements OnInit {
|
||||
@ViewChild('categoryChart') chart: jqxChartComponent;
|
||||
|
||||
public seriesGroups: any = [{
|
||||
type: 'donut',
|
||||
source: [],
|
||||
//showLabels: true,
|
||||
series: [{
|
||||
dataField: 'value',
|
||||
displayText: 'category',
|
||||
initialAngle: 90,
|
||||
radius: 130,
|
||||
innerRadius: 90,
|
||||
formatSettings: { sufix: '€', decimalPlaces: 2 },
|
||||
radiusDataField: 'category',
|
||||
colorFunction: (value, itemIndex, series, group) => {
|
||||
if(group.source[itemIndex].type === 'expenses') {
|
||||
return 'tomato';
|
||||
}
|
||||
|
||||
return 'yellowgreen';
|
||||
},
|
||||
opacity: 0.5
|
||||
}]
|
||||
}, {
|
||||
type: 'donut',
|
||||
source: [],
|
||||
showLabels: true,
|
||||
series: [{
|
||||
dataField: 'value',
|
||||
displayText: 'name',
|
||||
initialAngle: 90,
|
||||
labelRadius: 50,
|
||||
radius: 85,
|
||||
innerRadius: 75,
|
||||
formatSettings: { sufix: '€', decimalPlaces: 2 },
|
||||
colorFunction: (value, itemIndex, series, group) => {
|
||||
if(group.source[itemIndex].name === 'Expenses') {
|
||||
return 'tomato';
|
||||
}
|
||||
|
||||
return 'yellowgreen';
|
||||
}
|
||||
}]
|
||||
}];
|
||||
|
||||
constructor(
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private logger: Logger,
|
||||
private categoryService: CategoryService,
|
||||
) {
|
||||
//this.data = [];
|
||||
}
|
||||
|
||||
loadData() {
|
||||
let accountId = this.activatedRoute.snapshot.paramMap.get('accountId');
|
||||
let fromDay = this.activatedRoute.snapshot.queryParamMap.get('from');
|
||||
let toDay = this.activatedRoute.snapshot.queryParamMap.get('to');
|
||||
|
||||
this.categoryService.query(
|
||||
+accountId,
|
||||
fromDay,
|
||||
toDay
|
||||
).subscribe((results: Category[]) => {
|
||||
let expenses = _.filter(results, function(item: Category) {
|
||||
return item.expenses < 0;
|
||||
}).map(function(item: Category) {
|
||||
return {
|
||||
category: item.category,
|
||||
value: -item.expenses,
|
||||
type: 'expenses'
|
||||
};
|
||||
});
|
||||
|
||||
expenses = _.sortBy(expenses, 'value').reverse();
|
||||
|
||||
let revenues = _.filter(results, function(item: Category) {
|
||||
return item.revenues > 0;
|
||||
}).map(function(item: Category) {
|
||||
return {
|
||||
category: item.category,
|
||||
value: item.revenues,
|
||||
type: 'revenues'
|
||||
};
|
||||
});
|
||||
|
||||
revenues = _.sortBy(revenues, 'value');
|
||||
|
||||
this.seriesGroups[0].source = expenses.concat(revenues);
|
||||
|
||||
let totals = [
|
||||
{name: 'Expenses', value: 0},
|
||||
{name: 'Revenues', value: 0}
|
||||
];
|
||||
|
||||
results.forEach(function(item: Category) {
|
||||
totals[0].value -= item.expenses;
|
||||
totals[1].value += item.revenues;
|
||||
});
|
||||
|
||||
this.seriesGroups[1].source = totals;
|
||||
|
||||
if(this.chart && this.chart.host) {
|
||||
this.chart.refresh();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.activatedRoute.queryParamMap.subscribe(() => {this.loadData();});
|
||||
|
||||
this.loadData();
|
||||
}
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
|
||||
export class DailyBalance {
|
||||
public operation_date: string;
|
||||
public expenses: number;
|
||||
public revenues: number;
|
||||
public income: number;
|
||||
public balance: number;
|
||||
}
|
||||
54
src/operations/index.js
Normal file
54
src/operations/index.js
Normal file
@ -0,0 +1,54 @@
|
||||
// vim: set tw=80 ts=4 sw=4 sts=4:
|
||||
/*
|
||||
This file is part of Accountant.
|
||||
|
||||
Accountant is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
Accountant is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with Accountant. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
/* jshint node: true */
|
||||
'use strict';
|
||||
|
||||
var moment = require('moment');
|
||||
|
||||
var angular = require('angular');
|
||||
|
||||
var ngResource = require('angular-resource'),
|
||||
ngMessages = require('angular-messages'),
|
||||
ngUiNotification = require('angular-ui-notification'),
|
||||
ngStrap = require('angular-strap');
|
||||
|
||||
var balanceChartModule = require('./balance-chart.component.js'),
|
||||
categoryChartModule = require('./category-chart.component.js'),
|
||||
accountModule = require('../accounts');
|
||||
|
||||
var OperationFactory = require('./operation.factory');
|
||||
var OperationConfig = require('./operation.config');
|
||||
var OperationController = require('./operation.controller');
|
||||
|
||||
module.exports = angular.module('accountant.operations', [
|
||||
ngResource,
|
||||
ngMessages,
|
||||
ngUiNotification,
|
||||
ngStrap,
|
||||
accountModule,
|
||||
balanceChartModule,
|
||||
categoryChartModule
|
||||
])
|
||||
|
||||
.config(OperationConfig)
|
||||
|
||||
.factory('Operation', OperationFactory)
|
||||
|
||||
.controller('OperationController', OperationController)
|
||||
|
||||
.name;
|
||||
4
src/operations/operation.config.js
Normal file
4
src/operations/operation.config.js
Normal file
@ -0,0 +1,4 @@
|
||||
module.exports = function($resourceProvider) {
|
||||
// Keep trailing slashes to avoid redirect by flask..
|
||||
$resourceProvider.defaults.stripTrailingSlashes = false;
|
||||
};
|
||||
149
src/operations/operation.controller.js
Normal file
149
src/operations/operation.controller.js
Normal file
@ -0,0 +1,149 @@
|
||||
var operationFormTmpl = require('./operation.form.tmpl.html'),
|
||||
operationDeleteTmpl = require('./operation.delete.tmpl.html');
|
||||
|
||||
module.exports = function($routeParams, $modal, Notification, Operation,
|
||||
Account) {
|
||||
|
||||
var vm = this;
|
||||
|
||||
/*
|
||||
* Add an empty operation.
|
||||
*/
|
||||
vm.add = function() {
|
||||
var operation = new Operation({
|
||||
// eslint-disable-next-line camelcase
|
||||
account_id: $routeParams.accountId
|
||||
});
|
||||
|
||||
return vm.modify(operation);
|
||||
};
|
||||
|
||||
/*
|
||||
* Load operations.
|
||||
*/
|
||||
vm.load = function(minDate, maxDate) {
|
||||
vm.minDate = minDate;
|
||||
vm.maxDate = maxDate;
|
||||
|
||||
return Operation.query({
|
||||
// eslint-disable-next-line camelcase
|
||||
account_id: $routeParams.accountId,
|
||||
begin: minDate ? moment(minDate).format('YYYY-MM-DD') : null,
|
||||
end: maxDate ? moment(maxDate).format('YYYY-MM-DD') : null
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* Toggle pointed indicator for an operation.
|
||||
*/
|
||||
vm.togglePointed = function(operation, rowform) {
|
||||
operation.pointed = !operation.pointed;
|
||||
|
||||
vm.save(operation);
|
||||
};
|
||||
|
||||
/*
|
||||
* Toggle cancel indicator for an operation.
|
||||
*/
|
||||
vm.toggleCanceled = function(operation) {
|
||||
operation.canceled = !operation.canceled;
|
||||
|
||||
vm.save(operation);
|
||||
};
|
||||
|
||||
/*
|
||||
* Save an operation and return a promise.
|
||||
*/
|
||||
vm.save = function(operation) {
|
||||
operation.confirmed = true;
|
||||
|
||||
return operation.$save().then(function(operation) {
|
||||
Notification.success('Operation #' + operation.id + ' saved.');
|
||||
|
||||
vm.operations = vm.load();
|
||||
|
||||
return operation;
|
||||
}, function(result){
|
||||
Notification.error(
|
||||
'Error while saving operation: ' + result.message
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* Delete an operation and return a promise.
|
||||
*/
|
||||
vm.confirmDelete = function(operation) {
|
||||
var title = "Delete operation #" + operation.id;
|
||||
|
||||
$modal({
|
||||
templateUrl: operationDeleteTmpl,
|
||||
controller: function($scope, title, operation, $delete) {
|
||||
$scope.title = title;
|
||||
$scope.operation = operation;
|
||||
$scope.$delete = function() {
|
||||
$scope.$hide();
|
||||
$delete($scope.operation);
|
||||
};
|
||||
},
|
||||
locals: {
|
||||
title: title,
|
||||
operation: operation,
|
||||
$delete: vm.delete
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
vm.delete = function(operation) {
|
||||
var id = operation.id;
|
||||
|
||||
return operation.$delete().then(function() {
|
||||
Notification.success('Operation #' + id + ' deleted.');
|
||||
|
||||
vm.operations = vm.load();
|
||||
|
||||
return operation;
|
||||
}, function(result) {
|
||||
Notification.error(
|
||||
'An error occurred while trying to delete operation #' +
|
||||
id + ':<br />' + result
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* Open the popup to modify the operation, save it on confirm.
|
||||
* @returns a promise.
|
||||
*/
|
||||
vm.modify = function(operation) {
|
||||
// FIXME Alexis Lahouze 2017-06-15 i18n
|
||||
var title = "Operation";
|
||||
|
||||
if (operation.id) {
|
||||
title = title + " #" + operation.id;
|
||||
}
|
||||
|
||||
$modal({
|
||||
templateUrl: operationFormTmpl,
|
||||
controller: function($scope, title, operation, $save) {
|
||||
$scope.title = title;
|
||||
$scope.operation = operation;
|
||||
$scope.$save = function() {
|
||||
$scope.$hide();
|
||||
$save($scope.operation);
|
||||
};
|
||||
},
|
||||
locals: {
|
||||
title: title,
|
||||
operation: operation,
|
||||
$save: vm.save
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
vm.onUpdate = function(minDate, maxDate) {
|
||||
vm.operations = vm.load(minDate, maxDate);
|
||||
};
|
||||
|
||||
vm.account = Account.get({id: $routeParams.accountId});
|
||||
};
|
||||
25
src/operations/operation.delete.tmpl.html
Normal file
25
src/operations/operation.delete.tmpl.html
Normal file
@ -0,0 +1,25 @@
|
||||
<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
|
||||
<div class="modal top am-fade" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title" id="modal-title">{{ title }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="modal-body" id="modal-body">
|
||||
<p>Voulez-vous supprimer l'opération #{{ operation.id }} ayant pour libellé :<br/>{{ operation.label }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-danger" type="button" ng-click="$delete()">
|
||||
Supprimer
|
||||
</button>
|
||||
|
||||
<button class="btn btn-default" type="button" ng-click="$hide()">
|
||||
Annuler
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
7
src/operations/operation.factory.js
Normal file
7
src/operations/operation.factory.js
Normal file
@ -0,0 +1,7 @@
|
||||
module.exports = function($resource) {
|
||||
return $resource(
|
||||
'/api/operation/:id', {
|
||||
id: '@id'
|
||||
}
|
||||
);
|
||||
};
|
||||
77
src/operations/operation.form.tmpl.html
Normal file
77
src/operations/operation.form.tmpl.html
Normal file
@ -0,0 +1,77 @@
|
||||
<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
|
||||
<!-- kate: space-indent on; indent-width 2; mixedindent off; -->
|
||||
<!--
|
||||
This file is part of Accountant.
|
||||
|
||||
Accountant is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
Accountant is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with Accountant. If not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
<div class="modal top am-fade" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title" id="modal-title">{{ title }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="modal-body" id="modal-body">
|
||||
<form class="form-horizontal simple-form">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label" for="operation-date">Date</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" id="operation-date" name="operation_date"
|
||||
type="text" ng-model="operation.operation_date"
|
||||
bs-datepicker data-date-format="yyyy-MM-dd" data-timezone="UTC"
|
||||
placeholder="Operation date">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label" for="label">Label</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" id="label" name="label"
|
||||
ng-model="operation.label" type="text" placeholder="Label">
|
||||
</input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label" for="value">Montant</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" id="value" name="value"
|
||||
ng-model="operation.value" type="number" placeholder="Value">
|
||||
</input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label" for="category">Catégorie</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" id="category" name="category"
|
||||
ng-model="operation.category" type="text" placeholder="Category">
|
||||
</input>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary" type="button" ng-click="$save()">
|
||||
OK
|
||||
</button>
|
||||
<button class="btn btn-default" type="button" ng-click="$hide()">
|
||||
Annuler
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,58 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
import { NgLoggerModule, Level } from '@nsalaun/ng-logger';
|
||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { NgxChartsModule } from '@swimlane/ngx-charts';
|
||||
import { ToastrModule } from 'ngx-toastr';
|
||||
import { TextMaskModule } from 'angular2-text-mask';
|
||||
import { jqxChartComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxchart';
|
||||
|
||||
import { BalanceChartComponent } from './balanceChart.component';
|
||||
import { CategoryChartComponent } from './categoryChart.component';
|
||||
import { OperationRowComponent } from './operationRow.component';
|
||||
import { CategoryService } from './category.service';
|
||||
import { OperationService } from './operation.service';
|
||||
import { OperationEditComponent } from './operationEdit.component';
|
||||
import { OperationListComponent } from './operationList.component';
|
||||
import { OperationDeleteModalComponent } from './operationDeleteModal.component';
|
||||
import { OperationRoutes } from './operation.states';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
HttpClientModule,
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
RouterModule.forChild(
|
||||
OperationRoutes
|
||||
),
|
||||
NgLoggerModule,
|
||||
ToastrModule,
|
||||
NgbModule,
|
||||
NgxChartsModule,
|
||||
TextMaskModule
|
||||
],
|
||||
providers: [
|
||||
CategoryService,
|
||||
OperationService,
|
||||
],
|
||||
declarations: [
|
||||
jqxChartComponent,
|
||||
BalanceChartComponent,
|
||||
CategoryChartComponent,
|
||||
OperationRowComponent,
|
||||
OperationEditComponent,
|
||||
OperationListComponent,
|
||||
OperationDeleteModalComponent,
|
||||
],
|
||||
entryComponents: [
|
||||
OperationDeleteModalComponent,
|
||||
OperationListComponent,
|
||||
]
|
||||
})
|
||||
export class OperationModule {}
|
||||
@ -1,71 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
|
||||
import * as moment from 'moment';
|
||||
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient, HttpParams } from '@angular/common/http';
|
||||
|
||||
import { Observable } from 'rxjs/Rx';
|
||||
|
||||
import { Operation } from './operation';
|
||||
|
||||
@Injectable()
|
||||
export class OperationService {
|
||||
constructor(
|
||||
private http: HttpClient,
|
||||
) {}
|
||||
|
||||
formatDate(date: Date|string) {
|
||||
if(date instanceof Date) {
|
||||
return moment(date).format('YYYY-MM-DD');
|
||||
}
|
||||
|
||||
return date;
|
||||
}
|
||||
|
||||
private url(id?: Number): string {
|
||||
if(id) {
|
||||
return `/api/operation/${id}`;
|
||||
}
|
||||
|
||||
return `/api/operation`;
|
||||
}
|
||||
|
||||
query(
|
||||
accountId: number,
|
||||
minDate: Date|string = null,
|
||||
maxDate: Date|string = null
|
||||
): Observable<Operation[]> {
|
||||
let params = new HttpParams();
|
||||
|
||||
params = params.set('account_id', `${accountId}`);
|
||||
|
||||
if(minDate) {
|
||||
params = params.set('begin', this.formatDate(minDate));
|
||||
}
|
||||
|
||||
if(maxDate) {
|
||||
params = params.set('end', this.formatDate(maxDate));
|
||||
}
|
||||
|
||||
return this.http.get<Operation[]>(this.url(), {
|
||||
params: params
|
||||
});
|
||||
}
|
||||
|
||||
get(id: number): Observable<Operation> {
|
||||
return this.http.get<Operation>(this.url(id));
|
||||
}
|
||||
|
||||
create(operation: Operation): Observable<Operation> {
|
||||
return this.http.post<Operation>(this.url(), operation);
|
||||
}
|
||||
|
||||
update(operation: Operation): Observable<Operation> {
|
||||
return this.http.post<Operation>(this.url(operation.id), operation);
|
||||
}
|
||||
|
||||
delete(operation: Operation): Observable<Operation> {
|
||||
return this.http.delete<Operation>(this.url(operation.id));
|
||||
}
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
import { OperationListComponent } from './operationList.component';
|
||||
import { OperationEditComponent } from './operationEdit.component';
|
||||
|
||||
export const OperationRoutes: Routes = [{
|
||||
path: 'accounts/:accountId/operations',
|
||||
component: OperationListComponent,
|
||||
}, {
|
||||
path: 'accounts/:accountId/operations/new',
|
||||
component: OperationEditComponent,
|
||||
}, {
|
||||
path: 'accounts/:accountId/operations/:operationId/edit',
|
||||
component: OperationEditComponent,
|
||||
}];
|
||||
@ -1,15 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2:
|
||||
|
||||
export class Operation {
|
||||
public id: number;
|
||||
public operation_date: string;
|
||||
public label: string;
|
||||
public value: number;
|
||||
public category: string;
|
||||
public scheduled_operation_id: number;
|
||||
public account_id: number;
|
||||
public balance: number;
|
||||
public confirmed: boolean;
|
||||
public pointed: boolean;
|
||||
public canceled: boolean
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
<!-- vim: set tw=80 ts=2 sw=2 sts=2 : -->
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title" id="modal-title">Delete Operation #{{ operation.id }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="modal-body" id="modal-body">
|
||||
<p>
|
||||
Do you really want to delete operation #{{ operation.id }} with label:<br/>
|
||||
{{ operation.label }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-danger" (click)="submit()">
|
||||
Yes
|
||||
</button>
|
||||
|
||||
<button class="btn btn-default" (click)="cancel()">
|
||||
No
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -1,24 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2:
|
||||
import { Component, Input } from '@angular/core';
|
||||
|
||||
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
import { Operation } from './operation';
|
||||
|
||||
@Component({
|
||||
selector: 'operation-delete-modal',
|
||||
templateUrl: './operationDeleteModal.component.html'
|
||||
})
|
||||
export class OperationDeleteModalComponent {
|
||||
@Input() operation: Operation
|
||||
|
||||
constructor(private activeModal: NgbActiveModal) {}
|
||||
|
||||
submit(): void {
|
||||
this.activeModal.close(this.operation);
|
||||
}
|
||||
|
||||
cancel(): void {
|
||||
this.activeModal.dismiss("closed");
|
||||
}
|
||||
}
|
||||
@ -1,79 +0,0 @@
|
||||
<!-- vim: set tw=80 ts=2 sw=2 sts=2 :-->
|
||||
<div>
|
||||
<div class="row">
|
||||
<form novalidate (keyup.enter)="submit()" #form="ngForm">
|
||||
<div class="form-group">
|
||||
<label for="operation-date">Date</label>
|
||||
|
||||
<input class="form-control"
|
||||
[class.has-danger]="operationDate.errors"
|
||||
id="operation-date" name="operationDate"
|
||||
[(ngModel)]="operation.operation_date" #operationDate="ngModel"
|
||||
[textMask]="{mask: dateMask}"
|
||||
placeholder="Operation date" required>
|
||||
|
||||
<div class="help-block text-danger" *ngIf="operationDate.errors">
|
||||
<small class="form-text" *ngIf="operationDate.errors.required">
|
||||
The operation date is required.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="label">Label</label>
|
||||
|
||||
<input class="form-control"
|
||||
[class.has-danger]="label.errors"
|
||||
id="label" name="label"
|
||||
[(ngModel)]="operation.label" #label="ngModel"
|
||||
placeholder="Label" required>
|
||||
|
||||
<div class="help-block text-danger" *ngIf="label.errors">
|
||||
<small class="form-text" *ngIf="label.errors.required">
|
||||
The operation label is required.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="value">Montant</label>
|
||||
|
||||
<input class="form-control"
|
||||
[class.has-errors]="value.errors"
|
||||
id="value" name="value"
|
||||
[(ngModel)]="operation.value" #value="ngModel"
|
||||
type="number" placeholder="Value" required>
|
||||
|
||||
<div class="help-block text-danger" *ngIf="value.errors">
|
||||
<small class="form-text" *ngIf="value.errors.required">
|
||||
The operation value is required.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="category">Catégorie</label>
|
||||
|
||||
<input class="form-control"
|
||||
[class.has-errors]="category.errors"
|
||||
id="category" name="category"
|
||||
[(ngModel)]="operation.category" #category="ngModel"
|
||||
placeholder="Category" required>
|
||||
|
||||
<div class="help-block text-danger" *ngIf="category.errors">
|
||||
<small class="form-text" *ngIf="category.errors.required">
|
||||
The operation category is required.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary" [disabled]="!form.valid" (click)="submit()">
|
||||
Save
|
||||
</button>
|
||||
|
||||
<button class="btn btn-default" (click)="cancel()">
|
||||
Cancel
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,86 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
|
||||
import { Location } from '@angular/common';
|
||||
import { Component } from '@angular/core';
|
||||
import { ActivatedRoute, Router, Params } from '@angular/router';
|
||||
|
||||
import { Logger } from '@nsalaun/ng-logger';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
|
||||
import { Operation } from './operation';
|
||||
import { OperationService } from './operation.service';
|
||||
|
||||
@Component({
|
||||
selector: 'operation-edit',
|
||||
templateUrl: './operationEdit.component.html'
|
||||
})
|
||||
export class OperationEditComponent {
|
||||
public operation: Operation = new Operation();
|
||||
|
||||
//dateMask = [/\d{4}/, '-', /0[1-9]|1[0-2]/, '-', /[0-2]\d|3[0-1]/];
|
||||
dateMask = ['2', '0', /\d/, /\d/, '-', /[0-1]/, /\d/, '-', /[0-3]/, /\d/];
|
||||
|
||||
constructor(
|
||||
private location: Location,
|
||||
private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
private logger: Logger,
|
||||
private toastrService: ToastrService,
|
||||
private operationService: OperationService
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.route.paramMap.subscribe((params: Params) => {
|
||||
let operationId = params.get('operationId');
|
||||
|
||||
if (operationId) {
|
||||
this.logger.info('Loading operation with id', operationId);
|
||||
|
||||
// Load Operation
|
||||
this.operationService.get(
|
||||
+operationId
|
||||
).subscribe((operation: Operation) => {
|
||||
this.operation = operation;
|
||||
|
||||
this.logger.info(operation);
|
||||
});
|
||||
} else {
|
||||
this.logger.info('Initialize new operation');
|
||||
|
||||
let accountId = params.get('accountId');
|
||||
|
||||
this.operation = new Operation();
|
||||
this.operation.account_id = +accountId;
|
||||
|
||||
this.logger.info(this.operation);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
submit(): void {
|
||||
this.save(this.operation);
|
||||
}
|
||||
|
||||
/*
|
||||
* Save an operation and return a promise.
|
||||
*/
|
||||
save(operation) {
|
||||
operation.confirmed = true;
|
||||
|
||||
return this.operationService.create(operation).subscribe(
|
||||
(operation) => {
|
||||
this.toastrService.success('Operation #' + operation.id + ' saved.');
|
||||
|
||||
this.location.back();
|
||||
}, (result) => {
|
||||
this.toastrService.error(
|
||||
'Error while saving operation: ' + result.message
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
cancel(): void {
|
||||
this.location.back();
|
||||
}
|
||||
}
|
||||
@ -1,46 +0,0 @@
|
||||
<!-- vim: set tw=80 ts=2 sw=2 sts=2 : -->
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<balance-chart [account]="account"></balance-chart>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<category-chart></category-chart>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<table class="table table-striped table-condensed table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Date d'op.</th>
|
||||
<th>Libellé de l'opération</th>
|
||||
<th>Montant</th>
|
||||
<th>Solde</th>
|
||||
<th>Catégorie</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="6">
|
||||
<a class="btn btn-success"
|
||||
[routerLink]="['new']">
|
||||
Ajouter
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr [operation-row]="operation"
|
||||
[account]="account"
|
||||
(needsReload)="loadData()"
|
||||
*ngFor="let operation of operations">
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,76 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
|
||||
import * as moment from 'moment';
|
||||
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, Router, Params } from '@angular/router';
|
||||
|
||||
import { Logger } from '@nsalaun/ng-logger';
|
||||
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
|
||||
import { Account } from '../accounts/account';
|
||||
import { AccountService } from '../accounts/account.service';
|
||||
import { Operation } from './operation';
|
||||
import { OperationService } from './operation.service';
|
||||
|
||||
@Component({
|
||||
selector: 'operation-list',
|
||||
templateUrl: './operationList.component.html'
|
||||
})
|
||||
export class OperationListComponent implements OnInit {
|
||||
private account: Account;
|
||||
public operations: Operation[];
|
||||
|
||||
constructor(
|
||||
private toastrService: ToastrService,
|
||||
private operationService: OperationService,
|
||||
private accountService: AccountService,
|
||||
private logger: Logger,
|
||||
private ngbModal: NgbModal,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.route.queryParamMap.subscribe((params: Params) => {
|
||||
if (params.get('from') && params.get('to')) {
|
||||
this.loadData();
|
||||
} else {
|
||||
this.router.navigate([], {
|
||||
queryParams: {
|
||||
from: moment().startOf('month').format('YYYY-MM-DD'),
|
||||
to: moment().endOf('month').format('YYYY-MM-DD')
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
this.route.paramMap.subscribe((params: Params) => {
|
||||
let accountId = params.get('accountId');
|
||||
|
||||
this.accountService.get(
|
||||
+accountId
|
||||
).subscribe(account => {
|
||||
this.account = account;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Load operations.
|
||||
*/
|
||||
loadData() {
|
||||
let accountId = this.route.snapshot.paramMap.get('accountId');
|
||||
let fromDay = this.route.snapshot.queryParamMap.get('from');
|
||||
let toDay = this.route.snapshot.queryParamMap.get('to');
|
||||
|
||||
return this.operationService.query(
|
||||
+accountId,
|
||||
fromDay,
|
||||
toDay
|
||||
).subscribe((operations: Operation[]) => {
|
||||
this.operations = operations.reverse();
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,51 +0,0 @@
|
||||
<!-- vim: set tw=80 ts=2 sw=2 sts=2 : -->
|
||||
<td>{{ operation.id }}</td>
|
||||
|
||||
<td>{{ operation.operation_date | date:"yyyy-MM-dd" }}</td>
|
||||
|
||||
<td>{{ operation.label }}</td>
|
||||
|
||||
<td>{{ operation.value | currency:'EUR':'symbol' }}</td>
|
||||
|
||||
<td [class.text-warning]="operation.balance < 0"
|
||||
[class.text-danger]="operation.balance < account.authorized_overdraft">
|
||||
{{ operation.balance | currency:'EUR':'symbol' }}
|
||||
</td>
|
||||
|
||||
<td>{{ operation.category }}</td>
|
||||
|
||||
<td>
|
||||
<div class="btn-group btn-group-sm">
|
||||
<!-- Edit operation, for non-canceled operation. -->
|
||||
<a class="btn btn-success"
|
||||
*ngIf="!operation.canceled"
|
||||
[routerLink]="[operation.id, 'edit']"
|
||||
title="edit">
|
||||
<span class="fa fa-pencil-square-o"></span>
|
||||
</a>
|
||||
|
||||
<!-- Toggle pointed operation, for non-canceled operations. -->
|
||||
<button type="button" class="btn btn-secondary"
|
||||
*ngIf="!operation.canceled"
|
||||
(click)="togglePointed(operation)"
|
||||
[class.active]="operation.pointed" title="point">
|
||||
<span class="fa" [class.fa-check-square-o]="operation.pointed"
|
||||
[class.fa-square-o]="!operation.pointed"></span>
|
||||
</button>
|
||||
|
||||
<!-- Toggle canceled operation. -->
|
||||
<button type="button" class="btn btn-warning"
|
||||
(click)="toggleCanceled(operation)"
|
||||
*ngIf="operation.scheduled_operation_id"
|
||||
[class.active]="operation.canceled" title="cancel">
|
||||
<span class="fa fa-remove"></span>
|
||||
</button>
|
||||
|
||||
<!-- Delete operation, with confirm. -->
|
||||
<button type="button" class="btn btn-danger"
|
||||
(click)="confirmDelete(operation)"
|
||||
*ngIf="operation.id && !operation.scheduled_operation_id">
|
||||
<span class="fa fa-trash-o"></span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
@ -1,91 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
import { CurrencyPipe } from '@angular/common';
|
||||
import { Component, Inject, Input } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
import { Logger } from '@nsalaun/ng-logger';
|
||||
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
|
||||
import { Account } from '../accounts/account';
|
||||
import { Operation } from './operation';
|
||||
import { OperationService } from './operation.service';
|
||||
import { OperationDeleteModalComponent } from './operationDeleteModal.component';
|
||||
|
||||
@Component({
|
||||
selector: 'tr[operation-row]',
|
||||
host: {
|
||||
"[id]": "operation.id",
|
||||
"[class.stroke]": "operation.canceled",
|
||||
"[class.italic]": "!operation.confirmed",
|
||||
"[class.warning]": "operation.balance < 0",
|
||||
"[class.danger]": "operation.balance < account.authorized_overdraft"
|
||||
},
|
||||
templateUrl: './operationRow.component.html'
|
||||
})
|
||||
export class OperationRowComponent {
|
||||
@Input('operation-row') operation: Operation = new Operation();
|
||||
@Input() account: Account = new Account();
|
||||
|
||||
constructor(
|
||||
private operationService: OperationService,
|
||||
private toastrService: ToastrService,
|
||||
private logger: Logger,
|
||||
private ngbModal: NgbModal,
|
||||
private router: Router
|
||||
) {}
|
||||
|
||||
togglePointed(operation, rowform) {
|
||||
operation.pointed = !operation.pointed;
|
||||
|
||||
this.save(operation);
|
||||
}
|
||||
|
||||
toggleCanceled(operation) {
|
||||
operation.canceled = !operation.canceled;
|
||||
|
||||
this.save(operation);
|
||||
}
|
||||
|
||||
save(operation) {
|
||||
operation.confirmed = true;
|
||||
|
||||
return this.operationService.update(operation).subscribe((operation) => {
|
||||
this.toastrService.success('Operation #' + operation.id + ' saved.');
|
||||
|
||||
this.logger.info('Reload route', this.router.url);
|
||||
this.router.navigateByUrl(this.router.url);
|
||||
}, (result) => {
|
||||
this.toastrService.error(
|
||||
'Error while saving operation: ' + result.message
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
confirmDelete(operation) {
|
||||
const modal = this.ngbModal.open(OperationDeleteModalComponent);
|
||||
|
||||
modal.componentInstance.operation = this.operation;
|
||||
|
||||
modal.result.then((operation: Operation) => {
|
||||
this.delete(operation);
|
||||
}, () => {
|
||||
});
|
||||
}
|
||||
|
||||
delete(operation) {
|
||||
var id = operation.id;
|
||||
|
||||
return this.operationService.delete(operation).subscribe(() => {
|
||||
this.toastrService.success('Operation #' + id + ' deleted.');
|
||||
|
||||
this.logger.info('Reload route', this.router.url);
|
||||
this.router.navigateByUrl(this.router.url);
|
||||
}, (result) => {
|
||||
this.toastrService.error(
|
||||
'An error occurred while trying to delete operation #' +
|
||||
id + ':<br />' + result
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
115
src/operations/operations.html
Normal file
115
src/operations/operations.html
Normal file
@ -0,0 +1,115 @@
|
||||
<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
|
||||
<!--
|
||||
This file is part of Accountant.
|
||||
|
||||
Accountant is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
Accountant is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with Accountant. If not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-md-9">
|
||||
<balance-chart on-update="operationsCtrl.onUpdate(minDate, maxDate)"
|
||||
account="operationsCtrl.account"/>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<category-chart
|
||||
min-date="operationsCtrl.minDate"
|
||||
max-date="operationsCtrl.maxDate"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<table class="table table-striped table-condensed table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-md-1">Date d'op.</th>
|
||||
<th>Libellé de l'opération</th>
|
||||
<th class="col-md-1">Montant</th>
|
||||
<th class="col-md-1">Solde</th>
|
||||
<th class="col-md-2">Catégorie</th>
|
||||
<th class="col-md-2">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="6">
|
||||
<button class="btn btn-success" ng-click="operationsCtrl.add()">
|
||||
Ajouter
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="{{ operation.id }}" class="form-inline"
|
||||
ng-class="{stroke: operation.canceled, italic: !operation.confirmed,
|
||||
warning: operation.balance < 0, danger: operation.balance < operationsCtrl.account.authorized_overdraft}"
|
||||
ng-repeat="operation in operationsCtrl.operations | orderBy:'+':true">
|
||||
<td>
|
||||
{{ operation.operation_date | date:"yyyy-MM-dd" }}
|
||||
</td>
|
||||
|
||||
<td>
|
||||
{{ operation.label }}
|
||||
</td>
|
||||
|
||||
<td>
|
||||
{{ operation.value | currency:"€" }}
|
||||
</td>
|
||||
|
||||
<td ng-class="{'text-warning': operation.balance < 0, 'text-danger':
|
||||
operation.balance < operationsCtrl.account.authorized_overdraft}">
|
||||
{{ operation.balance | currency:"€" }}
|
||||
</td>
|
||||
|
||||
<td>
|
||||
{{ operation.category }}
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div class="btn-group btn-group-xs">
|
||||
<!-- Edit operation, for non-canceled operation. -->
|
||||
<button type="button" class="btn btn-default"
|
||||
ng-if="!operation.canceled"
|
||||
ng-click="operationsCtrl.modify(operation)" title="edit">
|
||||
<span class="fa fa-pencil-square-o"></span>
|
||||
</button>
|
||||
|
||||
<!-- Toggle pointed operation, for non-canceled operations. -->
|
||||
<button type="button" class="btn btn-default"
|
||||
ng-if="!operation.canceled"
|
||||
ng-click="operationsCtrl.togglePointed(operation)"
|
||||
ng-class="{active: operation.pointed}" title="point">
|
||||
<span ng-class="{'fa fa-check-square-o': operation.pointed, 'fa fa-square-o': !operation.pointed}"></span>
|
||||
</button>
|
||||
|
||||
<!-- Toggle canceled operation. -->
|
||||
<button type="button" class="btn btn-default"
|
||||
ng-click="operationsCtrl.toggleCanceled(operation)"
|
||||
ng-if="operation.scheduled_operation_id && !rowform.$visible"
|
||||
ng-class="{active: operation.canceled}" title="cancel">
|
||||
<span class="fa fa-remove"></span>
|
||||
</button>
|
||||
|
||||
<!-- Delete operation, with confirm. -->
|
||||
<button type="button" class="btn btn-default"
|
||||
ng-if="operation.id && !operation.scheduled_operation_id"
|
||||
ng-click="operationsCtrl.confirmDelete(operation)">
|
||||
<span class="fa fa-trash-o"></span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,3 +0,0 @@
|
||||
import 'core-js/es6';
|
||||
import 'core-js/es7/reflect';
|
||||
import 'zone.js/dist/zone';
|
||||
43
src/scheduler/index.js
Normal file
43
src/scheduler/index.js
Normal file
@ -0,0 +1,43 @@
|
||||
// vim: set tw=80 ts=4 sw=4 sts=4:
|
||||
/*
|
||||
This file is part of Accountant.
|
||||
|
||||
Accountant is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
Accountant is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with Accountant. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
/* jshint node: true */
|
||||
'use strict';
|
||||
|
||||
var angular = require('angular');
|
||||
|
||||
var ngMessages = require('angular-messages'),
|
||||
ngUiNotification = require('angular-ui-notification'),
|
||||
ngStrap = require('angular-strap');
|
||||
|
||||
var ScheduleConfig = require('./schedule.config.js');
|
||||
var ScheduleController = require('./schedule.controller.js');
|
||||
var ScheduleFactory = require('./schedule.factory.js');
|
||||
|
||||
module.exports = angular.module('accountant.scheduler', [
|
||||
ngMessages,
|
||||
ngUiNotification,
|
||||
ngStrap
|
||||
])
|
||||
|
||||
.config(ScheduleConfig)
|
||||
|
||||
.factory('ScheduledOperation', ScheduleFactory)
|
||||
|
||||
.controller('SchedulerController', ScheduleController)
|
||||
|
||||
.name;
|
||||
4
src/scheduler/schedule.config.js
Normal file
4
src/scheduler/schedule.config.js
Normal file
@ -0,0 +1,4 @@
|
||||
module.exports = function($resourceProvider) {
|
||||
// Keep trailing slashes to avoid redirect by flask..
|
||||
$resourceProvider.defaults.stripTrailingSlashes = false;
|
||||
};
|
||||
127
src/scheduler/schedule.controller.js
Normal file
127
src/scheduler/schedule.controller.js
Normal file
@ -0,0 +1,127 @@
|
||||
var scheduleFormTmpl = require('./schedule.form.tmpl.html'),
|
||||
scheduleDeleteTmpl = require('./schedule.delete.tmpl.html');
|
||||
|
||||
module.exports= function($rootScope, $routeParams, Notification, ScheduledOperation, $log, $modal) {
|
||||
var vm = this;
|
||||
|
||||
// Operation store.
|
||||
vm.operations = [];
|
||||
|
||||
/*
|
||||
* Add a new operation at the beginning of th array.
|
||||
*/
|
||||
vm.add = function() {
|
||||
var operation = new ScheduledOperation({
|
||||
// eslint-disable-next-line camelcase
|
||||
account_id: $routeParams.accountId
|
||||
});
|
||||
|
||||
return vm.modify(operation);
|
||||
};
|
||||
|
||||
/*
|
||||
* Load operations.
|
||||
*/
|
||||
vm.load = function() {
|
||||
return ScheduledOperation.query({
|
||||
// eslint-disable-next-line camelcase
|
||||
account_id: $routeParams.accountId
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* Save operation.
|
||||
*/
|
||||
vm.save = function(operation) {
|
||||
return operation.$save().then(function(operation) {
|
||||
Notification.success('Scheduled operation #' + operation.id + ' saved.');
|
||||
|
||||
vm.operations = vm.load();
|
||||
|
||||
return operation;
|
||||
}, function(result){
|
||||
$log.error('Error while saving scheduled operation', operation, result);
|
||||
|
||||
Notification.error(
|
||||
'Error while saving scheduled operation: ' + result.message
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* Delete an operation and return a promise.
|
||||
*/
|
||||
vm.confirmDelete = function(operation) {
|
||||
var title = "Delete operation #" + operation.id;
|
||||
|
||||
$modal({
|
||||
templateUrl: scheduleDeleteTmpl,
|
||||
controller: function($scope, title, operation, $delete) {
|
||||
$scope.title = title;
|
||||
$scope.operation = operation;
|
||||
$scope.$delete = function() {
|
||||
$scope.$hide();
|
||||
$delete($scope.operation);
|
||||
};
|
||||
},
|
||||
locals: {
|
||||
title: title,
|
||||
operation: operation,
|
||||
$delete: vm.delete
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* Delete operation.
|
||||
*/
|
||||
vm.delete = function(operation) {
|
||||
var id = operation.id;
|
||||
|
||||
return operation.$delete().then(function() {
|
||||
Notification.success('Scheduled operation #' + id + ' deleted.');
|
||||
|
||||
vm.operations = vm.load();
|
||||
|
||||
return operation;
|
||||
}, function(result) {
|
||||
Notification.error(
|
||||
'An error occurred while trying to delete scheduled operation #' +
|
||||
id + ':<br />' + result
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* Open the popup to modify the operation, save it on confirm.
|
||||
* @returns a promise.
|
||||
*/
|
||||
vm.modify = function(operation) {
|
||||
// FIXME Alexis Lahouze 2017-06-15 i18n
|
||||
var title = "Operation";
|
||||
|
||||
if (operation.id) {
|
||||
title = title + " #" + operation.id;
|
||||
}
|
||||
|
||||
$modal({
|
||||
templateUrl: scheduleFormTmpl,
|
||||
controller: function($scope, title, operation, $save) {
|
||||
$scope.title = title;
|
||||
$scope.operation = operation;
|
||||
$scope.$save = function() {
|
||||
$scope.$hide();
|
||||
$save($scope.operation);
|
||||
};
|
||||
},
|
||||
locals: {
|
||||
title: title,
|
||||
operation: operation,
|
||||
$save: vm.save
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Load operations on controller initialization.
|
||||
vm.operations = vm.load();
|
||||
};
|
||||
25
src/scheduler/schedule.delete.tmpl.html
Normal file
25
src/scheduler/schedule.delete.tmpl.html
Normal file
@ -0,0 +1,25 @@
|
||||
<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
|
||||
<div class="modal top am-fade" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title" id="modal-title">{{ title }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="modal-body" id="modal-body">
|
||||
<p>Voulez-vous supprimer l'opération #{{ operation.id }} ayant pour libellé :<br/>{{ operation.label }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-danger" type="button" ng-click="$delete()">
|
||||
Supprimer
|
||||
</button>
|
||||
|
||||
<button class="btn btn-default" type="button" ng-click="$hide()">
|
||||
Annuler
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
7
src/scheduler/schedule.factory.js
Normal file
7
src/scheduler/schedule.factory.js
Normal file
@ -0,0 +1,7 @@
|
||||
module.exports = function($resource) {
|
||||
return $resource(
|
||||
'/api/scheduled_operation/:id', {
|
||||
id: '@id'
|
||||
}
|
||||
);
|
||||
};
|
||||
89
src/scheduler/schedule.form.tmpl.html
Normal file
89
src/scheduler/schedule.form.tmpl.html
Normal file
@ -0,0 +1,89 @@
|
||||
<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
|
||||
<div class="modal top am-fade" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title" id="modal-title">{{ title }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="modal-body" id="modal-body">
|
||||
<form class="form-horizontal simple-form">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label" for="start-date">Date de début</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" id="start-date" name="start_date"
|
||||
type="text" ng-model="operation.start_date"
|
||||
bs-datepicker data-date-format="yyyy-MM-dd" data-timezone="UTC"
|
||||
placeholder="Scheduled operation start date">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label" for="stop-date">Date de fin</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" id="stop-date" name="stop_date"
|
||||
type="text" ng-model="operation.stop_date"
|
||||
bs-datepicker data-date-format="yyyy-MM-dd" data-timezone="UTC"
|
||||
placeholder="Scheduled operation stop date">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label" for="day">Jour</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" id="day" name="day"
|
||||
ng-model="operation.day" type="number" placeholder="Day">
|
||||
</input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label" for="frequency">Fréquence</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" id="frequency" name="frequency"
|
||||
ng-model="operation.frequency" type="number" placeholder="Frequency">
|
||||
</input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label" for="label">Label</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" id="label" name="label"
|
||||
ng-model="operation.label" type="text" placeholder="Label">
|
||||
</input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label" for="value">Montant</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" id="value" name="value"
|
||||
ng-model="operation.value" type="number" placeholder="Value">
|
||||
</input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label" for="category">Catégorie</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" id="category" name="category"
|
||||
ng-model="operation.category" type="text" placeholder="Category">
|
||||
</input>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary" type="button" ng-click="$save()">
|
||||
OK
|
||||
</button>
|
||||
|
||||
<button class="btn btn-default" type="button" ng-click="$hide()">
|
||||
Annuler
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,51 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
import { NgLoggerModule, Level } from '@nsalaun/ng-logger';
|
||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { ToastrModule } from 'ngx-toastr';
|
||||
import { TextMaskModule } from 'angular2-text-mask';
|
||||
|
||||
import { ScheduleService } from './schedule.service';
|
||||
import { ScheduleDeleteModalComponent } from './scheduleDeleteModal.component';
|
||||
import { ScheduleEditModalComponent } from './scheduleEditModal.component';
|
||||
import { ScheduleFormComponent } from './scheduleForm.component';
|
||||
import { ScheduleRowComponent } from './scheduleRow.component';
|
||||
import { ScheduleListComponent } from './scheduleList.component';
|
||||
import { ScheduleListState } from './schedule.states';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
HttpClientModule,
|
||||
CommonModule,
|
||||
ReactiveFormsModule,
|
||||
RouterModule.forChild([
|
||||
ScheduleListState
|
||||
]),
|
||||
NgLoggerModule,
|
||||
ToastrModule,
|
||||
NgbModule,
|
||||
TextMaskModule
|
||||
],
|
||||
providers: [
|
||||
ScheduleService,
|
||||
],
|
||||
declarations: [
|
||||
ScheduleDeleteModalComponent,
|
||||
ScheduleEditModalComponent,
|
||||
ScheduleFormComponent,
|
||||
ScheduleListComponent,
|
||||
ScheduleRowComponent
|
||||
],
|
||||
entryComponents: [
|
||||
ScheduleDeleteModalComponent,
|
||||
ScheduleEditModalComponent,
|
||||
ScheduleListComponent,
|
||||
]
|
||||
})
|
||||
export class ScheduleModule {}
|
||||
@ -1,47 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient, HttpParams } from '@angular/common/http';
|
||||
|
||||
import { Observable } from 'rxjs/Rx';
|
||||
|
||||
import { Schedule } from './schedule';
|
||||
|
||||
@Injectable()
|
||||
export class ScheduleService {
|
||||
constructor(
|
||||
private http: HttpClient
|
||||
) {}
|
||||
|
||||
private url(id?: number): string {
|
||||
if(id) {
|
||||
return `/api/scheduled_operation/${id}`;
|
||||
}
|
||||
|
||||
return `/api/scheduled_operation`;
|
||||
}
|
||||
|
||||
query(accountId: number): Observable<Schedule[]> {
|
||||
let params = new HttpParams().set('account_id', `${accountId}`);
|
||||
|
||||
return this.http.get<Schedule[]>(this.url(), { params: params });
|
||||
}
|
||||
|
||||
get(accountId: number, id: number): Observable<Schedule> {
|
||||
let params = new HttpParams().set('account_id', `${accountId}`);
|
||||
|
||||
return this.http.get<Schedule>(this.url(id), { params: params });
|
||||
}
|
||||
|
||||
create(schedule: Schedule): Observable<Schedule> {
|
||||
return this.http.post<Schedule>(this.url(), schedule);
|
||||
}
|
||||
|
||||
update(schedule: Schedule): Observable<Schedule> {
|
||||
return this.http.post<Schedule>(this.url(schedule.id), schedule);
|
||||
}
|
||||
|
||||
delete(schedule: Schedule): Observable<Schedule> {
|
||||
return this.http.delete<Schedule>(this.url(schedule.id));
|
||||
}
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
|
||||
import { ScheduleListComponent } from './scheduleList.component';
|
||||
|
||||
export const ScheduleListState = {
|
||||
path: 'account/:accountId/scheduler',
|
||||
component: ScheduleListComponent,
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2:
|
||||
|
||||
export class Schedule {
|
||||
id: number;
|
||||
start_date: string;
|
||||
stop_date: string;
|
||||
day: number;
|
||||
frequency: number;
|
||||
label: string;
|
||||
value: number;
|
||||
category: string;
|
||||
account_id: number
|
||||
}
|
||||
@ -1,49 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2:
|
||||
import { Component, Input } from '@angular/core';
|
||||
|
||||
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
import { Schedule } from './schedule';
|
||||
|
||||
@Component({
|
||||
selector: 'schedule-delete-modal',
|
||||
template: `
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title" id="modal-title">{{ title() }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="modal-body" id="modal-body">
|
||||
<p>
|
||||
Do you really want to delete schedule #{{ schedule.id }} with label:<br/>
|
||||
{{ schedule.label }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-danger" (click)="submit()">
|
||||
Yes
|
||||
</button>
|
||||
|
||||
<button class="btn btn-default" (click)="cancel()">
|
||||
No
|
||||
</button>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class ScheduleDeleteModalComponent {
|
||||
@Input() schedule: Schedule
|
||||
|
||||
constructor(public activeModal: NgbActiveModal) {}
|
||||
|
||||
title(): string {
|
||||
return "Delete schedule #" + this.schedule.id;
|
||||
}
|
||||
|
||||
submit(): void {
|
||||
this.activeModal.close(this.schedule);
|
||||
}
|
||||
|
||||
cancel(): void {
|
||||
this.activeModal.dismiss("closed");
|
||||
}
|
||||
}
|
||||
@ -1,66 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2:
|
||||
import { Component, Input, ViewChild } from '@angular/core';
|
||||
|
||||
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
import { Schedule } from './schedule';
|
||||
import { ScheduleFormComponent } from './scheduleForm.component';
|
||||
|
||||
@Component({
|
||||
selector: 'schedule-edit-modal',
|
||||
template: `
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title" id="modal-title">{{ title() }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="modal-body" id="modal-body">
|
||||
<schedule-form [schedule]="schedule" (submit)="submit()" #scheduleForm="scheduleForm"></schedule-form>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary" [disabled]="!scheduleForm.form.valid" (click)="submit()">
|
||||
Save
|
||||
</button>
|
||||
|
||||
<button class="btn btn-default" (click)="cancel()">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class ScheduleEditModalComponent {
|
||||
@Input() schedule: Schedule;
|
||||
@ViewChild('scheduleForm') scheduleForm: ScheduleFormComponent;
|
||||
|
||||
valid: boolean = false;
|
||||
|
||||
constructor(private activeModal: NgbActiveModal) {}
|
||||
|
||||
title(): string {
|
||||
if(this.schedule.id) {
|
||||
return "Schedule #" + this.schedule.id;
|
||||
} else {
|
||||
return "New schedule";
|
||||
}
|
||||
}
|
||||
|
||||
submit(): void {
|
||||
let formModel = this.scheduleForm.form.value;
|
||||
let schedule = Object.assign({}, this.schedule);
|
||||
|
||||
schedule.id = this.schedule.id;
|
||||
schedule.start_date = formModel.startDate;
|
||||
schedule.stop_date = formModel.stopDate;
|
||||
schedule.day = formModel.day;
|
||||
schedule.frequency = formModel.frequency;
|
||||
schedule.label = formModel.label;
|
||||
schedule.value = formModel.value;
|
||||
schedule.category = formModel.category;
|
||||
|
||||
this.activeModal.close(schedule);
|
||||
}
|
||||
|
||||
cancel(): void {
|
||||
this.activeModal.dismiss("closed");
|
||||
}
|
||||
}
|
||||
@ -1,189 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
|
||||
import { Schedule } from './schedule';
|
||||
|
||||
@Component({
|
||||
selector: 'schedule-form',
|
||||
exportAs: 'scheduleForm',
|
||||
template: `
|
||||
<form novalidate (keyup.enter)="submit()" [formGroup]="form">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 control-label" for="start-date">Date de début (AAAA-MM-JJ)</label>
|
||||
|
||||
<div class="col-sm-8"
|
||||
[class.has-danger]="startDate.errors">
|
||||
<input class="form-control"
|
||||
id="start-date" formControlName="startDate"
|
||||
[textMask]="{mask: dateMask}"
|
||||
placeholder="Schedule start date">
|
||||
|
||||
<div class="help-block text-danger" *ngIf="startDate.errors">
|
||||
<p *ngIf="startDate.errors.required">The start date is required.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 control-label" for="stop-date">Date de fin (AAAA-MM-JJ)</label>
|
||||
|
||||
<div class="col-sm-8"
|
||||
[class.has-danger]="stopDate.errors">
|
||||
<input class="form-control"
|
||||
id="stop-date" formControlName="stopDate"
|
||||
[textMask]="{mask: dateMask}"
|
||||
placeholder="Schedule stop date">
|
||||
|
||||
<div class="help-block text-danger" *ngIf="stopDate.errors">
|
||||
<p *ngIf="stopDate.errors.required">The stop date is required.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 control-label" for="day">Jour</label>
|
||||
|
||||
<div class="col-sm-8"
|
||||
[class.has-danger]="day.errors">
|
||||
<input class="form-control"
|
||||
id="day" formControlName="day"
|
||||
type="number" placeholder="Day">
|
||||
|
||||
<div class="help-block text-danger" *ngIf="day.errors">
|
||||
<p *ngIf="day.errors.required">The day is required.</p>
|
||||
<p *ngIf="day.errors.min">The day must be greater than 0.</p>
|
||||
<p *ngIf="day.errors.max">The day must be less than or equal to 31.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 control-label" for="frequency">Fréquence</label>
|
||||
|
||||
<div class="col-sm-8"
|
||||
[class.has-danger]="frequency.errors">
|
||||
<input class="form-control"
|
||||
id="frequency" formControlName="frequency"
|
||||
type="number" placeholder="Frequency">
|
||||
|
||||
<div class="help-block text-danger" *ngIf="frequency.errors">
|
||||
<p *ngIf="frequency.errors.required">The frequency is required.</p>
|
||||
<p *ngIf="frequency.errors.min">The frequency must be positive.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 control-label" for="label">Label</label>
|
||||
|
||||
<div class="col-sm-8"
|
||||
[class.has-danger]="label.errors">
|
||||
<input class="form-control"
|
||||
id="label" formControlName="label"
|
||||
placeholder="Label">
|
||||
|
||||
<div class="help-block text-danger" *ngIf="label.errors">
|
||||
<p *ngIf="label.errors.required">The label is required.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 control-label" for="value">Montant</label>
|
||||
|
||||
<div class="col-sm-8"
|
||||
[class.has-danger]="value.errors">
|
||||
<input class="form-control"
|
||||
id="value" formControlName="value"
|
||||
type="number" placeholder="Value">
|
||||
|
||||
<div class="help-block text-danger" *ngIf="value.errors">
|
||||
<p *ngIf="value.errors.required">The value is required.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 control-label" for="category">Catégorie</label>
|
||||
|
||||
<div class="col-sm-8"
|
||||
[class.has-danger]="category.errors">
|
||||
<input class="form-control"
|
||||
id="category" formControlName="category"
|
||||
placeholder="Category">
|
||||
|
||||
<div class="help-block text-danger" *ngIf="category.errors">
|
||||
<p *ngIf="category.errors.required">The category is required.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
`
|
||||
})
|
||||
export class ScheduleFormComponent implements OnInit {
|
||||
public form: FormGroup;
|
||||
@Input() schedule: Schedule;
|
||||
@Output('submit') submitEventEmitter: EventEmitter<void> = new EventEmitter<void>();
|
||||
|
||||
//dateMask = [/\d{4}/, '-', /0[1-9]|1[0-2]/, '-', /[0-2]\d|3[0-1]/];
|
||||
dateMask = ['2', '0', /\d/, /\d/, '-', /[0-1]/, /\d/, '-', /[0-3]/, /\d/];
|
||||
|
||||
constructor(private formBuilder: FormBuilder) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.form = this.formBuilder.group({
|
||||
startDate: ['', Validators.required],
|
||||
stopDate: ['', Validators.required],
|
||||
day: ['', [Validators.required, Validators.min(1), Validators.max(31)]],
|
||||
frequency: ['', [Validators.required, Validators.min(0)]],
|
||||
label: ['', Validators.required],
|
||||
value: ['', Validators.required],
|
||||
category: ['', Validators.required],
|
||||
});
|
||||
|
||||
this.form.patchValue({
|
||||
startDate: this.schedule.start_date,
|
||||
stopDate: this.schedule.stop_date,
|
||||
day: this.schedule.day,
|
||||
frequency: this.schedule.frequency,
|
||||
label: this.schedule.label,
|
||||
value: this.schedule.value,
|
||||
category: this.schedule.category,
|
||||
});
|
||||
}
|
||||
|
||||
submit() {
|
||||
if(this.form.valid) {
|
||||
this.submitEventEmitter.emit();
|
||||
}
|
||||
}
|
||||
|
||||
get startDate() {
|
||||
return this.form.get('startDate');
|
||||
}
|
||||
|
||||
get stopDate() {
|
||||
return this.form.get('stopDate');
|
||||
}
|
||||
|
||||
get day() {
|
||||
return this.form.get('day');
|
||||
}
|
||||
|
||||
get frequency() {
|
||||
return this.form.get('frequency');
|
||||
}
|
||||
|
||||
get label() {
|
||||
return this.form.get('label');
|
||||
}
|
||||
|
||||
get value() {
|
||||
return this.form.get('value');
|
||||
}
|
||||
|
||||
get category() {
|
||||
return this.form.get('category');
|
||||
}
|
||||
}
|
||||
@ -1,115 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
import { Component, Inject, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
|
||||
import { Observable } from 'rxjs/Rx';
|
||||
|
||||
import { Logger } from '@nsalaun/ng-logger';
|
||||
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
|
||||
import { ScheduleEditModalComponent } from './scheduleEditModal.component';
|
||||
import { ScheduleService } from './schedule.service';
|
||||
import { Schedule } from './schedule';
|
||||
|
||||
@Component({
|
||||
selector: 'schedule-list',
|
||||
template: `
|
||||
<div class="row">
|
||||
<table class="table table-sm table-striped table-condensed table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date de début</th>
|
||||
<th>Date de fin</th>
|
||||
<th>Jour</th>
|
||||
<th>Fréq.</th>
|
||||
<th>Libellé de l'opération</th>
|
||||
<th>Montant</th>
|
||||
<th>Catégorie</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="8">
|
||||
<button class="btn btn-success" (click)="add()">
|
||||
Ajouter
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr *ngFor="let schedule of schedules"
|
||||
[schedule-row]="schedule" (needsReload)="load()">
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class ScheduleListComponent implements OnInit {
|
||||
accountId: number;
|
||||
schedules = [];
|
||||
|
||||
constructor(
|
||||
private toastrService: ToastrService,
|
||||
private scheduleService: ScheduleService,
|
||||
private logger: Logger,
|
||||
private ngbModal: NgbModal,
|
||||
private route: ActivatedRoute,
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.logger.log("ngOnInit");
|
||||
this.accountId = +this.route.snapshot.paramMap.get('accountId')
|
||||
// Load operations on controller initialization.
|
||||
this.load();
|
||||
}
|
||||
|
||||
/*
|
||||
* Add a new operation at the beginning of th array.
|
||||
*/
|
||||
add() {
|
||||
var schedule = new Schedule();
|
||||
schedule.account_id = this.accountId;
|
||||
|
||||
const modal = this.ngbModal.open(ScheduleEditModalComponent, {
|
||||
size: 'lg'
|
||||
});
|
||||
|
||||
modal.componentInstance.schedule = schedule;
|
||||
|
||||
modal.result.then((schedule: Schedule) => {
|
||||
this.save(schedule);
|
||||
}, (reason) => function(reason) {
|
||||
});
|
||||
};
|
||||
|
||||
load() {
|
||||
this.logger.log("Loading schedules for accountId", this.accountId);
|
||||
if(!this.accountId) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.scheduleService.query(this.accountId)
|
||||
.subscribe((schedules: Schedule[]) => {
|
||||
this.logger.log("Schedules loaded.", schedules);
|
||||
this.schedules = schedules;
|
||||
}, (reason) => {
|
||||
this.logger.log("Got error", reason);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
save(schedule: Schedule) {
|
||||
return this.scheduleService.create(schedule).subscribe((schedule: Schedule) => {
|
||||
this.toastrService.success('Schedule #' + schedule.id + ' saved.');
|
||||
|
||||
this.load();
|
||||
}, (result) => {
|
||||
this.toastrService.error(
|
||||
'Error while saving schedule: ' + result.message
|
||||
);
|
||||
});
|
||||
};
|
||||
};
|
||||
@ -1,115 +0,0 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
import { CurrencyPipe } from '@angular/common';
|
||||
import { Component, Inject, Input, Output, EventEmitter } from '@angular/core';
|
||||
|
||||
import { Logger } from '@nsalaun/ng-logger';
|
||||
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
|
||||
import { ScheduleDeleteModalComponent } from './scheduleDeleteModal.component';
|
||||
import { ScheduleEditModalComponent } from './scheduleEditModal.component';
|
||||
import { ScheduleService } from './schedule.service';
|
||||
import { Schedule } from './schedule';
|
||||
|
||||
@Component({
|
||||
selector: 'tr[schedule-row]',
|
||||
host: {
|
||||
"[id]": "schedule.id",
|
||||
},
|
||||
template: `
|
||||
<td>{{ schedule.start_date | date: "yyyy-MM-dd" }}</td>
|
||||
|
||||
|
||||
<td>{{ schedule.stop_date | date: "yyyy-MM-dd" }}</td>
|
||||
|
||||
<td>{{ schedule.day }}</td>
|
||||
|
||||
<td>{{ schedule.frequency }}</td>
|
||||
|
||||
<td>{{ schedule.label }}</td>
|
||||
|
||||
<td>{{ schedule.value | currency:"EUR":true }}</td>
|
||||
|
||||
<td>{{ schedule.category }}</td>
|
||||
|
||||
<td>
|
||||
<div class="btn-group btn-group-sm">
|
||||
<!-- Edit operation. -->
|
||||
<button type="button" class="btn btn-success"
|
||||
(click)="modify()" title="edit">
|
||||
<span class="fa fa-pencil-square-o"></span>
|
||||
</button>
|
||||
|
||||
<!-- Remove operation. -->
|
||||
<button type="button" class="btn btn-danger"
|
||||
[hidden]="!schedule.id"
|
||||
(click)="confirmDelete()"
|
||||
title="remove">
|
||||
<span class="fa fa-trash"></span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
`
|
||||
})
|
||||
export class ScheduleRowComponent {
|
||||
@Input('schedule-row') schedule: Schedule;
|
||||
@Output() needsReload: EventEmitter<void> = new EventEmitter<void>();
|
||||
|
||||
constructor(
|
||||
private scheduleService: ScheduleService,
|
||||
private logger: Logger,
|
||||
private toastrService: ToastrService,
|
||||
private ngbModal: NgbModal
|
||||
) {}
|
||||
|
||||
save(schedule: Schedule) {
|
||||
return this.scheduleService.update(schedule).subscribe((schedule: Schedule) => {
|
||||
this.toastrService.success('Schedule #' + schedule.id + ' saved.');
|
||||
|
||||
this.needsReload.emit();
|
||||
}, result => {
|
||||
this.toastrService.error(
|
||||
'Error while saving schedule: ' + result.message
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
confirmDelete() {
|
||||
const modal = this.ngbModal.open(ScheduleDeleteModalComponent);
|
||||
|
||||
modal.componentInstance.schedule = this.schedule;
|
||||
|
||||
modal.result.then((schedule: Schedule) => {
|
||||
this.delete(schedule);
|
||||
}, (reason) => function(reason) {
|
||||
});
|
||||
}
|
||||
|
||||
delete(schedule: Schedule) {
|
||||
var id = schedule.id;
|
||||
|
||||
return this.scheduleService.delete(schedule).subscribe(() => {
|
||||
this.toastrService.success('Schedule #' + id + ' deleted.');
|
||||
|
||||
this.needsReload.emit();
|
||||
}, result => {
|
||||
this.toastrService.error(
|
||||
'An error occurred while trying to delete schedule #' + id + ':<br />'
|
||||
+ result.message
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
modify() {
|
||||
const modal = this.ngbModal.open(ScheduleEditModalComponent, {
|
||||
size: 'lg'
|
||||
});
|
||||
|
||||
modal.componentInstance.schedule = this.schedule;
|
||||
|
||||
modal.result.then((schedule: Schedule) => {
|
||||
this.save(schedule);
|
||||
}, (reason) => function(reason) {
|
||||
});
|
||||
}
|
||||
}
|
||||
92
src/scheduler/scheduler.html
Normal file
92
src/scheduler/scheduler.html
Normal file
@ -0,0 +1,92 @@
|
||||
<!--
|
||||
This file is part of Accountant.
|
||||
|
||||
Accountant is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
Accountant is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with Accountant. If not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
|
||||
<div class="row">
|
||||
<table class="table table-striped table-condensed table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-md-1">Date de début</th>
|
||||
<th class="col-md-1">Date de fin</th>
|
||||
<th class="col-md-1">Jour</th>
|
||||
<th class="col-md-1">Fréq.</th>
|
||||
<th>Libellé de l'opération</th>
|
||||
<th class="col-md-1">Montant</th>
|
||||
<th class="col-md-2">Catégorie</th>
|
||||
<th class="col-md-1">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="8">
|
||||
<button class="btn btn-success" ng-click="schedulerCtrl.add()">
|
||||
Ajouter
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="{{ operation.id }}" class="form-inline"
|
||||
ng-repeat="operation in schedulerCtrl.operations">
|
||||
<td class="col-md-1">
|
||||
{{ operation.start_date | date: "yyyy-MM-dd" }}
|
||||
</td>
|
||||
|
||||
<td>
|
||||
{{ operation.stop_date | date: "yyyy-MM-dd" }}
|
||||
</td>
|
||||
|
||||
<td>
|
||||
{{ operation.day }}
|
||||
</td>
|
||||
|
||||
<td>
|
||||
{{ operation.frequency }}
|
||||
</td>
|
||||
|
||||
<td>
|
||||
{{ operation.label }}
|
||||
</td>
|
||||
|
||||
<td>
|
||||
{{ operation.value | currency : "€" }}
|
||||
</td>
|
||||
|
||||
<td>
|
||||
{{ operation.category }}
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div class="btn-group btn-group-xs">
|
||||
<!-- Edit operation. -->
|
||||
<button type="button" class="btn btn-default"
|
||||
ng-click="schedulerCtrl.modify(operation)" title="edit">
|
||||
<span class="fa fa-pencil-square-o"></span>
|
||||
</button>
|
||||
|
||||
<!-- Remove operation. -->
|
||||
<button type="button" class="btn btn-default"
|
||||
ng-if="operation.id"
|
||||
ng-click="schedulerCtrl.confirmDelete(operation)"
|
||||
title="remove">
|
||||
<span class="fa fa-trash"></span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user