Added the sample into the repository
This commit is contained in:
ROOT\soundarapandianr
Родитель
55213cdc28
Коммит
42a3468829
|
|
@ -1,15 +0,0 @@
|
|||
dist/
|
||||
*d.ts
|
||||
*.map
|
||||
.vscode/
|
||||
src/**/*.js
|
||||
*.ngstyle.ts
|
||||
src/**/*.map
|
||||
node_modules/
|
||||
npm-debug.log
|
||||
*ngfactory.ts
|
||||
*metadata.json
|
||||
*ngsummary.json
|
||||
src/assets/index.css
|
||||
src/assets/*.css
|
||||
*.css
|
||||
20
README.md
20
README.md
|
|
@ -2,22 +2,4 @@
|
|||
|
||||
This expense tracker demo application showcases using several Essential JS 2 components together in
|
||||
a real-world application scenario. You can further explore the source code of this application and
|
||||
use it as a reference for integrating Essential JS 2 components into your applications.
|
||||
|
||||
## Deployment
|
||||
|
||||
### Install
|
||||
|
||||
To install all dependent packages, use the below command
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Run
|
||||
|
||||
To run the sample, use the below command
|
||||
|
||||
```
|
||||
gulp serve
|
||||
```
|
||||
use it as a reference for integrating Essential JS 2 components into your applications.
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"sasslint": ["./src/assets/**/*.scss"],
|
||||
"tslint": ["./src/app/**/*.ts", "!./src/app/**/*-model.d.ts", "!./src/app/**/**/*.d.ts", "!./src/app/**/**/*.ngfactory.ts"],
|
||||
"ts": ["./src/app/**/*.ts", "!./node_modules/**/*.ts"],
|
||||
"styleDependency":["ej2"],
|
||||
"isShowCase": true
|
||||
}
|
||||
86
gulpfile.js
86
gulpfile.js
|
|
@ -1,5 +1,9 @@
|
|||
global.config = global.config;
|
||||
|
||||
var print;
|
||||
var fs = require('fs');
|
||||
var glob = require('glob');
|
||||
var path = require('path');
|
||||
var gulp = require('gulp');
|
||||
var webpackGulp = require('webpack-stream');
|
||||
var webpack = require('webpack');
|
||||
|
|
@ -7,6 +11,50 @@ var runSequence = require('run-sequence');
|
|||
var webpackConfig = require("./webpack.config.js");
|
||||
var clean = require("gulp-clean");
|
||||
var shelljs = global.shelljs = global.shelljs || require('shelljs');
|
||||
var config = require('./config.json');
|
||||
var tsConfig = __dirname + '/tslint.json';
|
||||
var sassConfig = __dirname + config.sasslintConfig;
|
||||
|
||||
/**
|
||||
* Lint source files using microsoft contributed tslint
|
||||
*/
|
||||
var tslintErrors = [];
|
||||
gulp.task('ts-lint', function () {
|
||||
print = print || require('gulp-print');
|
||||
var tslint = require('gulp-tslint');
|
||||
var rootConfig = require(tsConfig);
|
||||
config.tslint = ['./src/app/**/*.ts', './src/app/*.ts', './src/app/**/*.component.ts', '!./src/app/**/*.d.ts', '!./src/app/**/*.ngfactory.d.ts', '!./src/app/**/*.ngfactory.ts'];
|
||||
return gulp.src(config.tslint)
|
||||
.pipe(print())
|
||||
.pipe(tslint({
|
||||
rulesDirectory: './node_modules/tslint-microsoft-contrib',
|
||||
configuration: rootConfig,
|
||||
formatter: 'prose'
|
||||
}))
|
||||
.pipe(tslint.report({ emitError: false }))
|
||||
.on('data', function (data) {
|
||||
if (data.tslint.failureCount) {
|
||||
var failures = data.tslint.failures;
|
||||
for (var i = 0; i < failures.length; i++) {
|
||||
var fileName = failures[i].fileName;
|
||||
var pos = failures[i].startPosition.lineAndCharacter;
|
||||
var line = parseInt(pos.line) + 1;
|
||||
var char = parseInt(pos.character) + 1;
|
||||
var error = gutil.colors.cyan('[ts-lint] ==> ') + gutil.colors.white(fileName + ' [' + line + ',' + char + ']: ') +
|
||||
gutil.colors.red(failures[i].failure);
|
||||
tslintErrors.push(error);
|
||||
}
|
||||
}
|
||||
})
|
||||
.on('end', function () {
|
||||
if (tslintErrors.length) {
|
||||
for (var i = 0; i < tslintErrors.length; i++) {
|
||||
gutil.log(tslintErrors[i]);
|
||||
}
|
||||
process.exit(1);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Compile scss files
|
||||
|
|
@ -21,6 +69,26 @@ gulp.task('styles', function() {
|
|||
.pipe(gulp.dest('.'));
|
||||
});
|
||||
|
||||
/**
|
||||
* Lint scss files using gulp-sass-lint
|
||||
*/
|
||||
gulp.task('sass-lint', function () {
|
||||
print = print || require('gulp-print');
|
||||
var sasslint = require('gulp-sass-lint');
|
||||
return gulp.src(config.sasslint)
|
||||
.pipe(print())
|
||||
.pipe(sasslint({ configFile: sassConfig }))
|
||||
.pipe(sasslint.format())
|
||||
.pipe(sasslint.failOnError());
|
||||
});
|
||||
|
||||
/**
|
||||
* lint files of samples
|
||||
*/
|
||||
gulp.task('lint', function (done) {
|
||||
runSequence('sass-lint', 'ts-lint', done);
|
||||
});
|
||||
|
||||
/**
|
||||
* Bundle all module using webpack
|
||||
*/
|
||||
|
|
@ -61,4 +129,20 @@ gulp.task('serve', ['build'], function (done) {
|
|||
ui: false
|
||||
};
|
||||
bs.init(options, done);
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Watch for sample and source and reload browser on changes
|
||||
*/
|
||||
gulp.task('watch', ['serve'], function () {
|
||||
var browserSync = require('browser-sync');
|
||||
var bs = browserSync.get('Essential TypeScript');
|
||||
|
||||
gulp.watch(config.styles, ['styles', bs.reload]);
|
||||
gulp.watch(config.ts, ['build', bs.reload]);
|
||||
});
|
||||
|
||||
/**
|
||||
* pre-push hook gulp tasks
|
||||
*/
|
||||
gulp.task('pre-push');
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
43
package.json
43
package.json
|
|
@ -5,46 +5,48 @@
|
|||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
"dependencies": {
|
||||
"rxjs": "^5.0.1",
|
||||
"tslint": "4.0.2",
|
||||
"zone.js": "^0.8.4",
|
||||
"core-js": "^2.4.1",
|
||||
"systemjs": "^0.19.40",
|
||||
"gulp-print": "^2.0.1",
|
||||
"gulp-tslint": "^7.0.1",
|
||||
"browser-sync": "2.11.2",
|
||||
"reflect-metadata": "^0.1.9",
|
||||
"gulp-sass-lint": "^1.1.1",
|
||||
"tslint-microsoft-contrib": "^4.0.0",
|
||||
"@angular/core": "~5.0.0",
|
||||
"@angular/http": "~5.0.0",
|
||||
"@angular/forms": "~5.0.0",
|
||||
"@angular/router": "^5.0.0",
|
||||
"@angular/common": "~5.0.0",
|
||||
"@angular/upgrade": "^5.0.0",
|
||||
"@angular/compiler": "~5.0.0",
|
||||
"@angular/platform-browser": "~5.0.0",
|
||||
"@angular/platform-browser-dynamic": "~5.0.0",
|
||||
"@syncfusion/ej2": "15.4.21",
|
||||
"@syncfusion/ej2-ng-base": "15.4.21",
|
||||
"@syncfusion/ej2-ng-grids": "15.4.21",
|
||||
"@syncfusion/ej2-ng-popups": "15.4.21",
|
||||
"@syncfusion/ej2-ng-charts": "15.4.20",
|
||||
"@syncfusion/ej2-ng-inputs": "15.4.21",
|
||||
"@syncfusion/ej2-ng-buttons": "15.4.21",
|
||||
"@syncfusion/ej2-ng-calendars": "15.4.21",
|
||||
"@syncfusion/ej2-ng-dropdowns": "15.4.21",
|
||||
"@syncfusion/ej2-ng-navigations": "15.4.21"
|
||||
"@syncfusion/ej2-ng-base": "*",
|
||||
"@syncfusion/ej2-ng-grids": "*",
|
||||
"@syncfusion/ej2-ng-popups": "*",
|
||||
"@syncfusion/ej2-ng-charts": "*",
|
||||
"@syncfusion/ej2-ng-inputs": "*",
|
||||
"@syncfusion/ej2-ng-buttons": "*",
|
||||
"@syncfusion/ej2-ng-calendars": "*",
|
||||
"@syncfusion/ej2-ng-dropdowns": "*",
|
||||
"@syncfusion/ej2-ng-navigations": "*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/compiler-cli": "5.0.0",
|
||||
"@angular/platform-server": "5.0.0",
|
||||
"@types/jasmine": "^2.2.29",
|
||||
"@types/requirejs": "^2.1.26",
|
||||
"@types/node": "^6.0.46",
|
||||
"gulp": "^3.9.0",
|
||||
"webpack": "2.5.1",
|
||||
"shelljs": "^0.7.0",
|
||||
"typescript": "~2.4.2",
|
||||
"gulp-sass": "^3.1.0",
|
||||
"gulp-clean": "^0.3.2",
|
||||
"gulp-sass": "^3.1.0",
|
||||
"run-sequence": "2.2.0",
|
||||
"webpack-stream": "^3.2.0",
|
||||
"karma-systemjs": "^0.16.0",
|
||||
"gulp-typescript": "^2.13.0",
|
||||
"es6-module-loader": "^0.17.11"
|
||||
"systemjs-plugin-babel": "0.0.17"
|
||||
},
|
||||
"keywords": [
|
||||
"ej2",
|
||||
|
|
@ -60,8 +62,9 @@
|
|||
"syncfusion-expense"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "npm run scripts && gulp styles && gulp bundle",
|
||||
"build": "gulp lint && npm run scripts && gulp styles && gulp bundle",
|
||||
"scripts": "ngc -p tsconfig-aot.json",
|
||||
"bundle": "gulp bundle"
|
||||
"bundle": "gulp bundle",
|
||||
"ci-publish": "gulp publish-samples"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,12 +5,7 @@
|
|||
<div class='about-component'>
|
||||
<div class='control-item' *ngFor="let item of controlList">
|
||||
<span class="icon-{{item.control | lowercase}} e-sb-icon control-icon"></span>
|
||||
<span class='control-name'>{{item.control}}</span>
|
||||
<a class='control-name' href="{{item.link}}" target="_blank">{{item.control}}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button id="download-btn" class="e-btn small e-info">
|
||||
<a href="https://github.com/syncfusion/ej2-sample-ng-expensetracker" target="_blank" style="color: #fff;text-decoration: none !important;">Download the source</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -26,17 +26,26 @@ export class AboutComponent implements OnInit {
|
|||
this.common.removeRootClass();
|
||||
this.common.addRootClass('about-page');
|
||||
this.title = 'About this sample';
|
||||
this.listTitle = 'List of components used in this sample';
|
||||
this.listTitle = 'List of EJ2 components used in this sample';
|
||||
this.description = 'This expense tracker demo application showcases using several Essential JS 2 '
|
||||
+ 'components together in a real-world application scenario. You can further explore the source '
|
||||
+ 'code of this application and use it as a reference for integrating Essential JS 2 components '
|
||||
+ 'into your applications.';
|
||||
|
||||
this.controlList = [
|
||||
{ 'control': 'Button' }, { 'control': 'Chart' }, { 'control': 'CheckBox' }, { 'control': 'DatePicker' },
|
||||
{ 'control': 'DateRangePicker' }, { 'control': 'Dialog' }, { 'control': 'DropDownList' },
|
||||
{ 'control': 'Grid' }, { 'control': 'MultiSelect' }, { 'control': 'NumericTextBox' },
|
||||
{ 'control': 'RadioButton' }, { 'control': 'TextBoxes' }, { 'control': 'TimePicker' }
|
||||
{ 'control': 'Button', 'link': 'http://ej2.syncfusion.com/angular/documentation/button/getting-started.html' },
|
||||
{ 'control': 'Chart', 'link': 'http://ej2.syncfusion.com/angular/documentation/chart/getting-started.html' },
|
||||
{ 'control': 'CheckBox', 'link': 'http://ej2.syncfusion.com/angular/documentation/check-box/getting-started.html' },
|
||||
{ 'control': 'DatePicker', 'link': 'http://ej2.syncfusion.com/angular/documentation/datepicker/getting-started.html' },
|
||||
{ 'control': 'DateRangePicker', 'link': 'http://ej2.syncfusion.com/angular/documentation/daterangepicker/getting-started.html' },
|
||||
{ 'control': 'Dialog', 'link': 'http://ej2.syncfusion.com/angular/documentation/dialog/getting-started.html' },
|
||||
{ 'control': 'DropDownList', 'link': 'http://ej2.syncfusion.com/angular/documentation/drop-down-list/getting-started.html' },
|
||||
{ 'control': 'Grid', 'link': 'http://ej2.syncfusion.com/angular/documentation/grid/getting-started.html' },
|
||||
{ 'control': 'MultiSelect', 'link': 'http://ej2.syncfusion.com/angular/documentation/multi-select/getting-started.html' },
|
||||
{ 'control': 'NumericTextBox', 'link': 'http://ej2.syncfusion.com/angular/documentation/numerictextbox/getting-started.html' },
|
||||
{ 'control': 'RadioButton' , 'link': 'http://ej2.syncfusion.com/angular/documentation/radio-button/getting-started.html'},
|
||||
{ 'control': 'TextBoxes', 'link': 'http://ej2.syncfusion.com/angular/documentation/textbox/getting-started.html' },
|
||||
{ 'control': 'TimePicker', 'link': 'http://ej2.syncfusion.com/angular/documentation/timepicker/getting-started.html' }
|
||||
];
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@ export let startDate: Date = new Date('2017-05-31T12:30:00-06:00');
|
|||
export let endDate: Date = new Date('2017-11-30T12:29:00-06:00');
|
||||
|
||||
export let userInfo: any = {
|
||||
'Name': 'Nicholas Delacruz',
|
||||
'FirstName': 'Nicholas',
|
||||
'FullName': 'Nicholas Delacruz',
|
||||
'Email': 'nicholas@gmail.com'
|
||||
};
|
||||
|
||||
|
|
@ -14080,7 +14081,7 @@ export let expenseData: Object[] = [{
|
|||
'FormattedDate': '11/30/2017 02:41 PM'
|
||||
}, {
|
||||
'UniqueId': 'T101278',
|
||||
'DateTime': new Date(1512042720000),
|
||||
'DateTime': new Date(1512053520000),
|
||||
'Category': 'Food',
|
||||
'PaymentMode': 'Debit Card',
|
||||
'TransactionType': 'Expense',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Injectable, ViewChild } from '@angular/core';
|
||||
|
||||
import { extend } from '@syncfusion/ej2-base';
|
||||
import { extend, Internationalization } from '@syncfusion/ej2-base';
|
||||
import { Predicate } from '@syncfusion/ej2-data';
|
||||
|
||||
import { expenseData } from '../common/common.data';
|
||||
|
|
@ -10,6 +10,7 @@ export class CommonService {
|
|||
public predicateStart: Predicate;
|
||||
public predicateEnd: Predicate;
|
||||
public predicate: Predicate;
|
||||
public intl: Internationalization = new Internationalization();
|
||||
|
||||
constructor() {}
|
||||
|
||||
|
|
@ -41,4 +42,16 @@ export class CommonService {
|
|||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
public getDate(value: Date): string {
|
||||
return this.intl.formatDate(value, { skeleton: 'yMd', type: 'date' });
|
||||
}
|
||||
|
||||
public getCurrencyVal(value: number): string {
|
||||
return this.intl.formatNumber(value, { format: 'C0' });
|
||||
}
|
||||
|
||||
public getNumberVal(value: number): string {
|
||||
return this.intl.getNumberFormat({ skeleton: 'C0', currency: 'USD' })(value);
|
||||
}
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<div class="card-block">
|
||||
<div class="media">
|
||||
<div class="media-body text-xs-left float-right">
|
||||
<h3 class="card-value" id="tolincome">$ {{totalIncome}}</h3>
|
||||
<h3 class="card-value" id="tolincome">{{totalIncome}}</h3>
|
||||
<span class="card-text">Income</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
<div class="card-block">
|
||||
<div class="media">
|
||||
<div class="media-body text-xs-left float-right">
|
||||
<h3 class="card-value" id='tolexpense'>$ {{totalExpense}}</h3>
|
||||
<h3 class="card-value" id='tolexpense'>{{totalExpense}}</h3>
|
||||
<span class="card-text">Expenses</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
<div class="card-block">
|
||||
<div class="media">
|
||||
<div class="media-body text-xs-left float-right">
|
||||
<h3 class="card-value" id="tolbalance">$ {{totalBalance}}</h3>
|
||||
<h3 class="card-value" id="tolbalance">{{totalBalance}}</h3>
|
||||
<span class="card-text">Balance</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,10 +17,10 @@ export class CardsComponent implements OnInit {
|
|||
public predicate: Predicate;
|
||||
public predicateEnd: Predicate;
|
||||
public predicateStart: Predicate;
|
||||
public totalIncome: Number = 0;
|
||||
public totalExpense: Number = 0;
|
||||
public totalBalance: Number = 0;
|
||||
public totalTransactions: Number = 0;
|
||||
public totalIncome: string = '$0';
|
||||
public totalExpense: string = '$0';
|
||||
public totalBalance: string = '$0';
|
||||
public totalTransactions: string = '0';
|
||||
|
||||
constructor(public common: CommonService, public app: AppComponent) {}
|
||||
|
||||
|
|
@ -33,7 +33,6 @@ export class CardsComponent implements OnInit {
|
|||
public updateCardValues(): void {
|
||||
let predicate: Predicate = this.common.getPredicate(this.app.startDate, this.app.endDate);
|
||||
let intl: Internationalization = new Internationalization();
|
||||
let nFormatter: Function = intl.getNumberFormat({ skeleton: 'C3', currency: 'USD' });
|
||||
let incomeRS: number = 0;
|
||||
let expenseRS: number = 0;
|
||||
let incomeD: any;
|
||||
|
|
@ -47,7 +46,7 @@ export class CardsComponent implements OnInit {
|
|||
for (let i: number = 0; i < incomeD.length; i++) {
|
||||
incomeRS += parseInt(incomeD[i].Amount, 0);
|
||||
}
|
||||
this.totalIncome = (incomeRS ? nFormatter(incomeRS) : nFormatter(0));
|
||||
this.totalIncome = this.common.getCurrencyVal(incomeRS ? incomeRS : 0);
|
||||
});
|
||||
|
||||
/** Calulates total expenses and sets to the Expenses card */
|
||||
|
|
@ -58,16 +57,16 @@ export class CardsComponent implements OnInit {
|
|||
for (let i: number = 0; i < expenseD.length; i++) {
|
||||
expenseRS += parseInt(expenseD[i].Amount, 0);
|
||||
}
|
||||
this.totalExpense = (expenseRS ? nFormatter(expenseRS) : nFormatter(0));
|
||||
document.getElementById('current-balance').textContent = '$ ' + nFormatter(incomeRS - expenseRS);
|
||||
this.totalExpense = this.common.getCurrencyVal(expenseRS ? expenseRS : 0);
|
||||
document.getElementById('current-balance').textContent = this.common.getCurrencyVal(incomeRS - expenseRS);
|
||||
|
||||
/** Based on the Income and Expense, calulates the balance and sets to the Balance card */
|
||||
this.totalBalance = nFormatter(incomeRS - expenseRS);
|
||||
this.totalBalance = this.common.getCurrencyVal(incomeRS - expenseRS);
|
||||
});
|
||||
|
||||
/** Calulates total transactions and sets to the Transactions card */
|
||||
let transaction: any = new DataManager(<JSON[]>this.app.dataSource)
|
||||
.executeLocal((new Query().where(predicate)));
|
||||
this.totalTransactions = transaction.length;
|
||||
this.totalTransactions = this.common.getNumberVal(transaction.length);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
<div class="col-xs-12 col-sm-6 col-md-6 chart-container">
|
||||
<div class="chart-padding">
|
||||
<ej-chart style='display:block' #columnChart class="column-chart" id="account-balance" width='100%' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [margin]='margin' [legendSettings]='legendSettings' [titleStyle]='titleStyle' [tooltip]='tooltip' (loaded)='onChartLoaded($event)' >
|
||||
<ejs-chart style='display:block' #columnChart class="column-chart" id="account-balance" width='100%' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [margin]='margin' [legendSettings]='legendSettings' [titleStyle]='titleStyle' useGroupingSeparator='true' [tooltip]='tooltip' (loaded)='onChartLoaded($event)' >
|
||||
<e-annotations>
|
||||
<e-annotation x='75px' y='9%' coordinateUnits='Pixel' region='Chart' content='<p style="font-family:Roboto;font-size: 16px;font-weight: 400;font-weight: 400;letter-spacing: 0.02em;line-height: 16px;color: #797979 !important;">Income - Expense</p>'></e-annotation>
|
||||
</e-annotations>
|
||||
<e-series-collection>
|
||||
<e-series type='Column' name='Income' width=2 xName='DateTime' yName='Amount' legendShape='Circle' fill='rgba(79, 227, 94, 0.75)' [dataSource]='dashBoard.colChartIncomeData' [marker]='marker' [border]='cBorder' [animation]='animation'></e-series>
|
||||
<e-series type='Column' name='Expense' width=2 xName='DateTime' yName='Amount' legendShape='Circle' fill='rgba(250, 70, 62, 0.75)' [dataSource]='dashBoard.colChartExpenseData' [marker]='marker' [animation]='animation'></e-series>
|
||||
<e-series type='Column' name='Income' width=2 xName='DateTime' yName='Amount' legendShape='Circle' fill='#A16EE5' [dataSource]='dashBoard.colChartIncomeData' [marker]='marker' [border]='cBorder' [animation]='animation'></e-series>
|
||||
<e-series type='Column' name='Expense' width=2 xName='DateTime' yName='Amount' legendShape='Circle' fill='#4472C4' [dataSource]='dashBoard.colChartExpenseData' [marker]='marker' [animation]='animation'></e-series>
|
||||
</e-series-collection>
|
||||
</ej-chart>
|
||||
</ejs-chart>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -40,7 +40,7 @@ export class ColumnChartComponent implements OnInit {
|
|||
this.primaryYAxis = {
|
||||
minimum: 3000,
|
||||
maximum: 9000,
|
||||
labelFormat: '{value}'
|
||||
labelFormat: 'c0'
|
||||
};
|
||||
this.titleStyle = { textAlignment: 'Near', fontWeight: '500', size: '16', color: '#000' };
|
||||
this.legendSettings = { visible: true };
|
||||
|
|
@ -48,12 +48,12 @@ export class ColumnChartComponent implements OnInit {
|
|||
fill: '#707070',
|
||||
enable: true,
|
||||
shared: true,
|
||||
format: '${series.name} : $ ${point.y}',
|
||||
format: '${series.name} : ${point.y}',
|
||||
header: 'Month - ${point.x} ',
|
||||
};
|
||||
this.marker = { visible: true, height: 10, width: 10 };
|
||||
this.margin = { top: 90 };
|
||||
this.cBorder = { width: 0.5, color: '#64e669' };
|
||||
this.cBorder = { width: 0.5, color: '#A16EE5' };
|
||||
this.animation = { enable: false };
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,10 +2,9 @@
|
|||
<div class="row" style="margin-bottom: 16px;">
|
||||
<div class="page-title">
|
||||
<div style="display: inline-block">Dashboard</div>
|
||||
<div class="page-subtitle"><span style="margin-right: 4px;"> - </span> Welcome - {{names}}</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-xs-12 col-xl-6 col-lg-3 daterange overview-range-picker">
|
||||
<ej-daterangepicker #dateRangePicker format='MM/dd/yyyy' [startDate]='app.startDate' [endDate]='app.endDate' [presets]='datePresets' (change)='onDateRangeChange($event)'></ej-daterangepicker>
|
||||
<ejs-daterangepicker #dateRangePicker format='MM/dd/yyyy' [startDate]='app.startDate' [endDate]='app.endDate' [presets]='datePresets' [showClearButton]='false' [readonly]='true' (change)='onDateRangeChange($event)'></ejs-daterangepicker>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@ export class DashBoardComponent implements OnInit {
|
|||
@ViewChild('recentGrid') recentGrid: RecentExpGridComponent;
|
||||
@ViewChild('dateRangePicker') dateRangePicker: DateRangePickerComponent;
|
||||
|
||||
public names: string;
|
||||
public predicate: Predicate;
|
||||
public datePresets: Object[];
|
||||
public lineChartData: Object[];
|
||||
|
|
@ -44,7 +43,6 @@ export class DashBoardComponent implements OnInit {
|
|||
) {
|
||||
this.common.removeRootClass();
|
||||
this.common.addRootClass('dashboard-page');
|
||||
this.names = this.dashService.getName();
|
||||
}
|
||||
|
||||
public ngOnInit(): void {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { Injectable } from '@angular/core';
|
|||
import { extend } from '@syncfusion/ej2-base';
|
||||
|
||||
import { CommonService } from '../common/common.service';
|
||||
import { userInfo } from '../common/common.data';
|
||||
|
||||
@Injectable()
|
||||
export class DashBoardService {
|
||||
|
|
@ -17,7 +18,7 @@ export class DashBoardService {
|
|||
public tempExpenseDS: any = {};
|
||||
|
||||
constructor(public common: CommonService) {
|
||||
this.name = 'Nicholas';
|
||||
this.name = userInfo.FirstName;
|
||||
}
|
||||
|
||||
public getName(): string {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<div class="col-xs-12 col-sm-6 col-md-6 chart-container">
|
||||
<div class="chart-padding">
|
||||
<ej-chart style='display:block' #lineChart id='balance' class='line-chart' style="width:100%; max-width: 494px;" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [chartArea]='chartArea' [margin]='margin' [tooltip]='tooltip'>
|
||||
<ejs-chart style='display:block' #lineChart id='balance' class='line-chart' style="width:100%; max-width: 494px;" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [chartArea]='chartArea' [margin]='margin' useGroupingSeparator='true' [tooltip]='tooltip'>
|
||||
<e-annotations>
|
||||
<e-annotation x='75px' y='9%' coordinateUnits='Pixel' region='Chart' content='<p style="font-family:Roboto;font-size: 16px;font-weight: 400;font-weight: 400;letter-spacing: 0.02em;line-height: 16px;color: #797979 !important;">Account - Balance</p>'></e-annotation>
|
||||
</e-annotations>
|
||||
<e-series-collection>
|
||||
<e-series type='Area' fill='rgba(77, 128, 243, 0.3)' xName='DateTime' yName='Amount' width=2 name='Amount' [dataSource]='dashBoard.lineChartData' [marker]='marker' [border]='lBorder' [animation]='animation'> </e-series>
|
||||
<e-series type='Area' fill='rgba(4, 112, 216, 0.3)' xName='DateTime' yName='Amount' width=2 name='Amount' [dataSource]='dashBoard.lineChartData' [marker]='marker' [border]='lBorder' [animation]='animation'> </e-series>
|
||||
</e-series-collection>
|
||||
</ej-chart>
|
||||
</ejs-chart>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -38,26 +38,26 @@ export class LineChartComponent implements OnInit {
|
|||
this.primaryYAxis = {
|
||||
maximum: 1800,
|
||||
interval: 300,
|
||||
labelFormat: '{value}'
|
||||
labelFormat: 'c0'
|
||||
};
|
||||
this.tooltip = {
|
||||
fill: '#707070',
|
||||
enable: true,
|
||||
shared: true,
|
||||
format: '${series.name} : $ ${point.y}',
|
||||
format: '${series.name} : ${point.y}',
|
||||
header: 'Month - ${point.x} '
|
||||
};
|
||||
this.chartArea = {
|
||||
border: { width: 0 }
|
||||
};
|
||||
this.margin = { top: 90 };
|
||||
this.lBorder = { width: 0.5, color: '#4d80f3' };
|
||||
this.lBorder = { width: 0.5, color: '#0470D8' };
|
||||
this.marker = {
|
||||
visible: true,
|
||||
width: 10,
|
||||
height: 10,
|
||||
fill: 'white',
|
||||
border: { width: 2, color: '#4d80f3' },
|
||||
border: { width: 2, color: '#0470D8' },
|
||||
};
|
||||
this.animation = { enable: false };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="pieChart">
|
||||
<ej-accumulationchart style='display: block;' #pie id="total-expense" #pie width='100%' height='350px' enableSmartLabels=true
|
||||
<ejs-accumulationchart style='display: block;' #pie id="total-expense" #pie width='100%' height='350px' enableSmartLabels=true
|
||||
[legendSettings]='legendSettings' (textRender)='onTextRender($event)' (animationComplete)='onAnimateCompleted($event)'
|
||||
(loaded)='onChartLoaded($event)'>
|
||||
<e-accumulation-series-collection>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
[palettes]='colorPalettes' [dataLabel]='dataLabel' [dataSource]='pieRenderingData' [animation]='animation'>
|
||||
</e-accumulation-series>
|
||||
</e-accumulation-series-collection>
|
||||
</ej-accumulationchart>
|
||||
</ejs-accumulationchart>
|
||||
</div>
|
||||
<div class="chartLegend" style="margin: 0 auto">
|
||||
<div style="position: relative">
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<ej-grid #legendGrid id="legend-grid" class="legendGrid pane" style="box-shadow: none; min-width: 250px;" width='100%' [dataSource]='pieRenderData'
|
||||
<ejs-grid #legendGrid id="legend-grid" class="legendGrid pane" style="box-shadow: none; min-width: 250px;" width='100%' [dataSource]='pieRenderData'
|
||||
(load)='onGridLoad($event)' (dataBound)='onGridDataBound($event)'>
|
||||
<e-columns>
|
||||
<e-column field='color' width='10%' textAlign='center'></e-column>
|
||||
|
|
@ -42,11 +42,11 @@
|
|||
<div style="width: 16px; height: 16px; margin-left: 1px; border-radius: 16px;" style.background-color="{{data.color}}"></div>
|
||||
</td>
|
||||
<td> {{data.text}} </td>
|
||||
<td> $ {{data.y}} </td>
|
||||
<td> {{data.y | currency:'USD'}} </td>
|
||||
<td style="text-align:right;"> {{data.x}} </td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</ej-grid>
|
||||
</ejs-grid>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export class PieChartComponent {
|
|||
public enableLegend: boolean = false;
|
||||
public pieRenderingData: Object[] = [];
|
||||
public animation: Object;
|
||||
public showWaitingPopup:boolean = false;
|
||||
public showWaitingPopup: boolean = false;
|
||||
|
||||
constructor(public app: AppComponent) {}
|
||||
|
||||
|
|
@ -39,13 +39,12 @@ export class PieChartComponent {
|
|||
|
||||
/** Configurations for the Pie chart component */
|
||||
this.legendSettings = { visible: true };
|
||||
this.colorPalettes = ['#6890fb', '#04cd93', '#ffd203', '#ff5e65', '#e385f9', '#f3791c', '#2a99f7',
|
||||
'#757575', '#1dc340', '#9fa8da', '#fc7c00', '#c0ca33', '#006064', '#4527a0', ' #0e82ff',
|
||||
'#9fa8da', '#e385f9', '#faf942', '#6a1b9a'];
|
||||
this.colorPalettes = ['#61EFCD', '#CDDE1F', '#FEC200', '#CA765A', '#2485FA', '#F57D7D', '#C152D2', '#8854D9', '#3D4EB8',
|
||||
'#00BCD7'];
|
||||
this.dataLabel = {
|
||||
name: 'x', visible: true,
|
||||
position: 'Outside', connectorStyle: { length: '10%' },
|
||||
font: { color: 'Black', size: '14px' }
|
||||
font: { color: 'Black', size: '14px', fontFamily: 'Roboto' }
|
||||
};
|
||||
this.getTotalExpense();
|
||||
this.animation = { enable: false };
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="row recent-expense-grid">
|
||||
<div class="col-xs-6 col-sm-6 col-md-12" style="width:100%">
|
||||
<ej-grid #recentExpGrid id="recentexpense-grid" width='100%' [dataSource]='app.dataSource' allowSorting=true enableHover=false allowKeyboard=true [allowPaging]='false' [query]='query' [toolbar]='gridToolbar'>
|
||||
<ejs-grid #recentExpGrid id="recentexpense-grid" width='100%' [dataSource]='app.dataSource' allowSorting=true enableHover=false allowKeyboard=true [allowPaging]='false' [query]='query' [toolbar]='gridToolbar'>
|
||||
<e-columns>
|
||||
<e-column field='DateTime' headerText='Date' width='120' format="yMd" hideAtMedia='(min-width: 600px)'>
|
||||
<ng-template #template let-data>
|
||||
|
|
@ -40,24 +40,24 @@
|
|||
<ng-template #template let-data>
|
||||
<div class="normalRes">
|
||||
<div class='amt-payment {{data.TransactionType}}'>
|
||||
<span>$</span> <span>{{data.Amount}}</span>
|
||||
<span>{{data.Amount | currency:'USD'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mediumRes">
|
||||
<div class='amt-payment {{data.TransactionType}}'>
|
||||
<span>$</span> <span>{{data.Amount}}</span>
|
||||
<span>{{data.Amount | currency:'USD'}}</span>
|
||||
</div>
|
||||
<div>{{data.DateTime | date:'M/d/yyyy'}}</div>
|
||||
</div>
|
||||
<div class="smallRes">
|
||||
<div class='amt-payment {{data.TransactionType}}'>
|
||||
<span>$</span> <span>{{data.Amount}}</span>
|
||||
<span>{{data.Amount | currency:'USD'}}</span>
|
||||
</div>
|
||||
<div>{{data.DateTime | date:'M/d/yyyy'}}</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</e-column>
|
||||
</e-columns>
|
||||
</ej-grid>
|
||||
</ejs-grid>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -20,10 +20,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ej-grid #transactGrid id='grid' class="margin-top-10 expense-grid-margin pane" height='100%' width='100%' allowPaging='true' allowSelection='true' [dataSource]='app.dataSource' [editSettings]='editSettings' [pageSettings]='pageSettings' [query]='query' [toolbar]='toolbarValue' (created)='onGridCreated()' (actionBegin)='onEditBegin($event)' (actionComplete)='onGridActionComplete($event)' (cellSave)='onGridCellSaved($event)' (checkBoxChange)='onGridCheckBoxStateChanged($event)' (rowSelected)='onGridRowSelected($event)' (rowDeselecting)='onGridRowDeselected($event)'>
|
||||
<ejs-grid #transactGrid id='grid' class="margin-top-10 expense-grid-margin pane" height='100%' width='100%' allowPaging='true' allowSelection='true' [dataSource]='app.dataSource' [editSettings]='editSettings' [pageSettings]='pageSettings' [query]='query' [toolbar]='toolbarValue' (created)='onGridCreated()' (actionBegin)='onEditBegin($event)' (actionComplete)='onGridActionComplete($event)' (cellSave)='onGridCellSaved($event)' (rowSelected)='onGridRowSelected($event)' (rowDeselected)='onGridRowDeselected($event)'>
|
||||
<e-columns>
|
||||
<e-column type='checkbox' width='40'></e-column>
|
||||
<e-column headerText='Category' width='170' clipMode='ellipsiswithtooltip' editType='dropdownedit' [validationRules]='validateRule'>
|
||||
<e-column headerText='Category' width='178' clipMode='ellipsiswithtooltip' editType='dropdownedit' [validationRules]='validateRule'>
|
||||
<ng-template #template let-data>
|
||||
<div class="normalRes">
|
||||
<div class="category-icon {{data.Category}}"></div>
|
||||
|
|
@ -50,23 +50,23 @@
|
|||
</div>
|
||||
</ng-template>
|
||||
</e-column>
|
||||
<e-column field='DateTime' headerText='Date' width='120' format='yMd' editType='datepickeredit' [validationRules]='validateRule' hideAtMedia='(min-width: 1050px)'></e-column>
|
||||
<e-column field='PaymentMode' headerText='PaymentMode' width='140' editType='dropdownedit' [validationRules]='validateRule' hideAtMedia='(min-width: 600px)'></e-column>
|
||||
<e-column field='Description' headerText='Description' clipMode='ellipsiswithtooltip' [validationRules]='validateRule' hideAtMedia='(min-width: 1050px)'></e-column>
|
||||
<e-column field='DateTime' headerText='Date' width='112' format='yMd' editType='datepickeredit' [validationRules]='validateRule' hideAtMedia='(min-width: 1050px)'></e-column>
|
||||
<e-column field='PaymentMode' headerText='Payment Mode' width='140' editType='dropdownedit' [validationRules]='validateRule' hideAtMedia='(min-width: 600px)'></e-column>
|
||||
<e-column field='Description' headerText='Description' clipMode='ellipsis' [validationRules]='validateRule' hideAtMedia='(min-width: 1050px)'></e-column>
|
||||
<e-column field='UniqueId' headerText='Unique Id' isPrimaryKey='true' [visible]='false'></e-column>
|
||||
<e-column headerText='Amount' width='120' editType='numericedit' format='C2' [validationRules]='validateRule' textAlign='right'>
|
||||
<ng-template #template let-data>
|
||||
<div class="normalRes">
|
||||
<div class="lg-amount">
|
||||
<div class='amt-payment {{data.TransactionType}}'>
|
||||
<span>$</span> <span>{{data.Amount}}</span>
|
||||
<span>{{data.Amount | currency:'USD'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mediumRes">
|
||||
<div class="res-amount">
|
||||
<div class='amt-payment {{data.TransactionType}}'>
|
||||
<span>$</span> <span>{{data.Amount}}</span>
|
||||
<span>{{data.Amount | currency:'USD'}}</span>
|
||||
</div>
|
||||
<div> {{data.DateTime | date:'M/d/yyyy'}} </div>
|
||||
</div>
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
<div class="smallRes">
|
||||
<div class="res-amount">
|
||||
<div class='amt-payment {{data.TransactionType}}'>
|
||||
<span>$</span> <span>{{data.Amount}}</span>
|
||||
<span>{{data.Amount | currency:'USD'}}</span>
|
||||
</div>
|
||||
<div> {{data.DateTime | date:'M/d/yyyy'}} </div>
|
||||
</div>
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
</ng-template>
|
||||
</e-column>
|
||||
</e-columns>
|
||||
</ej-grid>
|
||||
</ejs-grid>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { Component, ViewEncapsulation, OnInit, ElementRef, ViewChild } from '@an
|
|||
|
||||
import { KeyboardEventArgs } from '@syncfusion/ej2-base';
|
||||
import { Query, DataManager, Predicate } from '@syncfusion/ej2-data';
|
||||
import { Input } from '@syncfusion/ej2-inputs';
|
||||
import { GridComponent, RowSelectEventArgs, RowDeselectEventArgs, CheckBoxChangeEventArgs,
|
||||
PageService, EditService, CommandColumnService, ToolbarService, ContextMenuService,
|
||||
ResizeService } from '@syncfusion/ej2-ng-grids';
|
||||
|
|
@ -34,6 +35,7 @@ export class ContentComponent implements OnInit {
|
|||
public transactionTitle: string;
|
||||
public predicateStart: Predicate;
|
||||
public searchInput: HTMLInputElement;
|
||||
public clearIcon: HTMLElement;
|
||||
|
||||
constructor(
|
||||
public app: AppComponent,
|
||||
|
|
@ -47,7 +49,7 @@ export class ContentComponent implements OnInit {
|
|||
this.predicateStart = new Predicate('DateTime', 'greaterthanorequal', this.app.startDate);
|
||||
this.predicateEnd = new Predicate('DateTime', 'lessthanorequal', this.app.endDate);
|
||||
this.predicate = this.predicateStart.and(this.predicateEnd);
|
||||
this.toolbarValue = ['edit', 'delete'];
|
||||
this.toolbarValue = ['Edit', 'Delete'];
|
||||
this.query = new Query().where(this.predicate).sortByDesc('DateTime');
|
||||
this.pageSettings = { pageSize: 11 };
|
||||
this.validateRule = { required: true };
|
||||
|
|
@ -56,6 +58,16 @@ export class ContentComponent implements OnInit {
|
|||
|
||||
public ngAfterViewInit(): void {
|
||||
this.searchInput = this.eleRef.nativeElement.querySelector('#txt');
|
||||
Input.createInput({
|
||||
element: this.searchInput,
|
||||
properties: {
|
||||
showClearButton: true
|
||||
}
|
||||
});
|
||||
this.clearIcon = this.eleRef.nativeElement.querySelector('.e-clear-icon');
|
||||
this.clearIcon.onmousedown = () => {
|
||||
this.searchInput.value = '';
|
||||
};
|
||||
}
|
||||
|
||||
public onGridCreated(): void {
|
||||
|
|
@ -74,10 +86,6 @@ export class ContentComponent implements OnInit {
|
|||
new DataManager(<JSON[]> this.app.dataSource).update('UniqueId', args.rowData);
|
||||
}
|
||||
|
||||
/** Based on the Grid row selection, handles the visibility of Edit and Delete button's visibility */
|
||||
public onGridCheckBoxStateChanged(args: CheckBoxChangeEventArgs): void {
|
||||
this.handleToolbarVisibility();
|
||||
}
|
||||
public onGridRowSelected(args: RowSelectEventArgs): void {
|
||||
this.handleToolbarVisibility();
|
||||
}
|
||||
|
|
@ -95,6 +103,9 @@ export class ContentComponent implements OnInit {
|
|||
|
||||
public showEditTransactDialog(): void {
|
||||
this.dlgCompObj.showEditDialog();
|
||||
setTimeout(() => {
|
||||
this.grid.toolbarModule.toolbar.enableItems(document.getElementById('grid_delete').parentElement, true);
|
||||
}, 0);
|
||||
}
|
||||
|
||||
public showFilterNavigation(): void {
|
||||
|
|
|
|||
|
|
@ -1,39 +1,39 @@
|
|||
<div id='dialogSection'>
|
||||
<ej-dialog id='confirmDialog' #confirmDialog width='40%' header='Delete' [showCloseIcon]='enableCloseIcon' [visible]='false' [closeOnEscape]='enableCloseOnEscape' [isModal]='isModal' [target]='dlgTarget' [animationSettings]='animationSettings' (open)='alertDialogOpen()' (overlayClick)='dlgOverlayClicked()'>
|
||||
<div style='padding: 0 20px;'>Are you want delete these items?</div>
|
||||
</ej-dialog>
|
||||
<ej-dialog id='dialog' #dialog width='100%' height='100%' [showCloseIcon]='enableCloseIcon' [visible]='false' [closeOnEscape]='enableCloseOnEscape' [isModal]='isModal' [target]='dlgTarget' [animationSettings]='animationSettings' (open)='dialogOpen()' (close)='dlgClose()' (overlayClick)='dlgOverlayClicked()'>
|
||||
<ejs-dialog id='confirmDialog' #confirmDialog width='40%' header='Delete' [showCloseIcon]='enableCloseIcon' [visible]='false' [closeOnEscape]='enableCloseOnEscape' [isModal]='isModal' [target]='dlgTarget' [animationSettings]='animationSettings' (open)='alertDialogOpen()' (overlayClick)='dlgOverlayClicked()'>
|
||||
<div>Are you sure you want to delete the selected transaction(s)?</div>
|
||||
</ejs-dialog>
|
||||
<ejs-dialog id='dialog' #dialog width='100%' height='100%' [showCloseIcon]='enableCloseIcon' [visible]='false' [closeOnEscape]='enableCloseOnEscape' [isModal]='isModal' [target]='dlgTarget' [animationSettings]='animationSettings' (open)='dialogOpen()' (close)='dlgClose()' (overlayClick)='dlgOverlayClicked()'>
|
||||
<div class='dlg-content'>
|
||||
<div class="transaction-dialog">
|
||||
<div class='dlg-radio-btn-section'>
|
||||
<div class='dlg-income-radio-section'>
|
||||
<ej-radiobutton #dlgIncomeRadio label="Income" value="Income" name='dlgTransactionType' (change)="dlgTransactTypeChanged($event)" ></ej-radiobutton>
|
||||
<ejs-radiobutton #dlgIncomeRadio label="Income" value="Income" name='dlgTransactionType' (change)="dlgTransactTypeChanged($event)" ></ejs-radiobutton>
|
||||
</div>
|
||||
<div class='dlg-expense-radio-section'>
|
||||
<ej-radiobutton #dlgExpenseRadio label="Expense" value="Expense" name='dlgTransactionType' checked="true" (change)="dlgTransactTypeChanged($event)"></ej-radiobutton>
|
||||
<ejs-radiobutton #dlgExpenseRadio label="Expense" value="Expense" name='dlgTransactionType' checked="true" (change)="dlgTransactTypeChanged($event)"></ejs-radiobutton>
|
||||
</div>
|
||||
</div>
|
||||
<div class='dlg-date-section'>
|
||||
<div class='dlg-date-picker-container'>
|
||||
<div>
|
||||
<ej-datepicker #dlgDatePicker placeholder='Choose a Date' width='100%' floatLabelType='Always' [value]='dateValue'></ej-datepicker>
|
||||
<ejs-datepicker #dlgDatePicker placeholder='Choose a Date' width='100%' floatLabelType='Always' [value]='dateValue'></ejs-datepicker>
|
||||
</div>
|
||||
</div>
|
||||
<div class='dlg-time-picker-container'>
|
||||
<div>
|
||||
<ej-timepicker #dlgTimePicker placeholder='Choose a Time' width='100%' floatLabelType='Always' [value]='dateValue'></ej-timepicker>
|
||||
<ejs-timepicker #dlgTimePicker placeholder='Choose a Time' width='100%' floatLabelType='Always' [value]='dateValue'></ejs-timepicker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='category-section'>
|
||||
<div class='dlg-category-container'>
|
||||
<div>
|
||||
<ej-dropdownlist id='category' #dlgDropDown cssClass='Category' placeholder='Select a Category' floatLabelType='Always' [dataSource]='categoryDataSource' [fields]='dropDownFields'></ej-dropdownlist>
|
||||
<ejs-dropdownlist id='category' #dlgDropDown cssClass='Category' placeholder='Select a Category' floatLabelType='Always' [dataSource]='categoryDataSource' [fields]='dropDownFields'></ejs-dropdownlist>
|
||||
</div>
|
||||
</div>
|
||||
<div class='dlg-amount-container'>
|
||||
<div>
|
||||
<ej-numerictextbox #dlgAmount placeholder='Enter a Amount' floatLabelType='Always' format="c2" min="0"></ej-numerictextbox>
|
||||
<ejs-numerictextbox #dlgAmount placeholder='Enter a Amount' floatLabelType='Always' format="c2" min="0"></ejs-numerictextbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -52,17 +52,17 @@
|
|||
</div>
|
||||
<div class='payment-radio-container'>
|
||||
<div class='dlg-cash-payment'>
|
||||
<ej-radiobutton #dlgCashRadio label="Cash" value="Cash" checked='true' name='dlgPaymentMode'></ej-radiobutton>
|
||||
<ejs-radiobutton #dlgCashRadio label="Cash" value="Cash" checked='true' name='dlgPaymentMode'></ejs-radiobutton>
|
||||
</div>
|
||||
<div class='dlg-debit-payment'>
|
||||
<ej-radiobutton #dlgDebitRadio label="Debit Card" value="Debit Card" name='dlgPaymentMode'></ej-radiobutton>
|
||||
<ejs-radiobutton #dlgDebitRadio label="Debit Card" value="Debit Card" name='dlgPaymentMode'></ejs-radiobutton>
|
||||
</div>
|
||||
<div class='dlg-credit-payment'>
|
||||
<ej-radiobutton #dlgCreditRadio label="Credit Card" value="Credit Card" name='dlgPaymentMode'></ej-radiobutton>
|
||||
<ejs-radiobutton #dlgCreditRadio label="Credit Card" value="Credit Card" name='dlgPaymentMode'></ejs-radiobutton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ej-dialog>
|
||||
</ejs-dialog>
|
||||
</div>
|
||||
|
|
@ -112,11 +112,11 @@ export class DialogsComponent implements OnInit {
|
|||
this.cntCompObj.grid.refresh();
|
||||
this.cards.updateCardValues();
|
||||
this.alertDialog.hide();
|
||||
}), buttonModel: { content: 'Yes', cssClass: 'e-flat' }
|
||||
}), buttonModel: { content: 'Yes', cssClass: 'e-ok e-flat', isPrimary: true }
|
||||
}, {
|
||||
click: (() => {
|
||||
this.alertDialog.hide();
|
||||
}), buttonModel: { cssClass: 'e-flat', content: 'No' }
|
||||
}), buttonModel: { cssClass: 'e-no e-flat', content: 'No' }
|
||||
}];
|
||||
|
||||
/** Functionalities for the buttons of "Edit Dialog" window */
|
||||
|
|
|
|||
|
|
@ -29,17 +29,6 @@ export class ExpenseComponent implements OnInit {
|
|||
this.common.addRootClass('expense-page');
|
||||
}
|
||||
|
||||
@HostListener('window:scroll', ['$event'])
|
||||
onScrollEvent($event: any): void {
|
||||
if (!Browser.isDevice) {
|
||||
this.dialogObj.dlgTimePicker.hide();
|
||||
this.filterObj.dateRangeFilter.hide();
|
||||
this.filterObj.multiSelectFilter.hidePopup();
|
||||
this.dialogObj.dlgDatePicker.hide();
|
||||
this.dialogObj.dlgDropDown.hidePopup();
|
||||
}
|
||||
}
|
||||
|
||||
public ngOnInit(): void {
|
||||
/** On initial load, update the sidebar selections and overlay */
|
||||
this.menu.removeToggleClass();
|
||||
|
|
|
|||
|
|
@ -7,35 +7,35 @@
|
|||
<div class="expense-filter-container">
|
||||
<label class="label-font">Select a range</label>
|
||||
<div class='filter-item'>
|
||||
<ej-daterangepicker #filterDateRange class="DateTime" format='MM/dd/yyyy' cssClass='DateTime' [startDate]='app.startDate' [endDate]='app.endDate' (change)='dateRangeChanged($event)'></ej-daterangepicker>
|
||||
<ejs-daterangepicker #filterDateRange class="DateTime" format='MM/dd/yyyy' cssClass='DateTime' [startDate]='app.startDate' [endDate]='app.endDate' [showClearButton]='false' [readonly]='true' (change)='dateRangeChanged($event)'></ejs-daterangepicker>
|
||||
</div>
|
||||
<label class="label-font">Category</label>
|
||||
<div class="treeview filter-item">
|
||||
<ej-multiselect #filterMultiSelect [dataSource]='filterCategory' mode='box' placeholder='Select Categories' hideSelectedItem='true' closePopupOnSelect='false' (select)='categorySelected($event)' (removed)='categoryRemoved($event)'> </ej-multiselect>
|
||||
<ejs-multiselect #filterMultiSelect [dataSource]='filterCategory' mode='Box' placeholder='Select Categories' hideSelectedItem='true' closePopupOnSelect='false' (select)='categorySelected($event)' (removed)='categoryRemoved($event)'> </ejs-multiselect>
|
||||
</div>
|
||||
<label class="label-font bottom-align">Cashflow</label>
|
||||
<div class="cashflow filter-item">
|
||||
<ej-checkbox #filterIncome id="income" class="cashflow-section" [checked]="true" label="Income" cssClass='TransactionType' (change)='checkBoxStateChanged($event)'></ej-checkbox>
|
||||
<ej-checkbox #filterExpense id="expenses" class="cashflow-section" [checked]="true" label="Expense" cssClass='TransactionType' (change)='checkBoxStateChanged($event)'></ej-checkbox>
|
||||
<ejs-checkbox #filterIncome id="income" class="cashflow-section" [checked]="true" label="Income" cssClass='TransactionType' (change)='checkBoxStateChanged($event)'></ejs-checkbox>
|
||||
<ejs-checkbox #filterExpense id="expenses" class="cashflow-section" [checked]="true" label="Expense" cssClass='TransactionType' (change)='checkBoxStateChanged($event)'></ejs-checkbox>
|
||||
</div>
|
||||
<label class="label-font bottom-align">Payment mode</label>
|
||||
<label class="label-font bottom-align">Payment Mode</label>
|
||||
<div class="paymentModes filter-item">
|
||||
<ej-checkbox #filterCash id="cash" label="Cash" class="cashflow-section" cssClass='PaymentMode' [checked]="true" (change)='checkBoxStateChanged($event)'></ej-checkbox>
|
||||
<ej-checkbox #filterDebit id="debitcard" class="cashflow-section" label="Debit Card" cssClass='PaymentMode' [checked]="true" (change)='checkBoxStateChanged($event)'></ej-checkbox>
|
||||
<ejs-checkbox #filterCash id="cash" label="Cash" class="cashflow-section" cssClass='PaymentMode' [checked]="true" (change)='checkBoxStateChanged($event)'></ejs-checkbox>
|
||||
<ejs-checkbox #filterDebit id="debitcard" class="cashflow-section" label="Debit Card" cssClass='PaymentMode' [checked]="true" (change)='checkBoxStateChanged($event)'></ejs-checkbox>
|
||||
<br/><br/>
|
||||
<ej-checkbox #filterCredit id="creditcard" class="cashflow-section" label="Credit Card" [checked]="true" cssClass='PaymentMode' (change)='checkBoxStateChanged($event)'></ej-checkbox>
|
||||
<ejs-checkbox #filterCredit id="creditcard" class="cashflow-section" label="Credit Card" [checked]="true" cssClass='PaymentMode' (change)='checkBoxStateChanged($event)'></ejs-checkbox>
|
||||
</div>
|
||||
<div>
|
||||
<label class="label-font">Amount</label>
|
||||
<div class='amount-filter'>
|
||||
<div class='min-numeric amt-filter'>
|
||||
<label class="inlineAlign minLabel">Min :</label>
|
||||
<ej-numerictextbox cssClass="inlineAlign" #filterMinAmount width='60px' [showSpinButton]="false" format='c2' [min]="minValue" [value]="minValue" (change)='amountChanged()'></ej-numerictextbox>
|
||||
<ejs-numerictextbox cssClass="inlineAlign" #filterMinAmount width='55px' [showSpinButton]="false" format='c0' [min]="minValue" [value]="minValue" (change)='amountChanged()'></ejs-numerictextbox>
|
||||
</div>
|
||||
<span class='amt-filter separateLine'></span>
|
||||
<div class='max-numeric amt-filter'>
|
||||
<label class="inlineAlign maxLabel">Max :</label>
|
||||
<ej-numerictextbox cssClass="inlineAlign" #filterMaxAmount width='60px' [showSpinButton]="false" format="c2" [min]="maxValue" [value]="maxValue" (change)='amountChanged()' (created)='numericTextBoxCreated()'></ej-numerictextbox>
|
||||
<ejs-numerictextbox cssClass="inlineAlign" #filterMaxAmount width='60px' [showSpinButton]="false" format="c0" [min]="maxValue" [value]="maxValue" (change)='amountChanged()' (created)='numericTextBoxCreated()'></ejs-numerictextbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@ export class FilterComponent implements OnInit {
|
|||
public creditPredicate: Predicate;
|
||||
public expensePredicate: Predicate;
|
||||
public categoryPredicate: Predicate;
|
||||
public categoryPredicates: Predicate;
|
||||
|
||||
constructor(
|
||||
public app: AppComponent,
|
||||
|
|
@ -172,11 +173,12 @@ export class FilterComponent implements OnInit {
|
|||
for (let i: number = 0; i < list.length; i++) {
|
||||
this.categoryPredicate = new Predicate('Category', 'equal', list[i]);
|
||||
if (i === 0) {
|
||||
this.predicate = this.predicate.and(this.categoryPredicate);
|
||||
this.categoryPredicates = this.categoryPredicate;
|
||||
} else {
|
||||
this.predicate = this.predicate.or(this.categoryPredicate);
|
||||
this.categoryPredicates = this.categoryPredicates.or(this.categoryPredicate);
|
||||
}
|
||||
}
|
||||
this.predicate = this.predicate.and(this.categoryPredicates);
|
||||
}
|
||||
this.cntCompObj.grid.setProperties({
|
||||
dataSource: this.app.dataSource,
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-list align-center nav-list">
|
||||
<div class="page-list align-center nav-list" (click)='onNavigationClick($event)'>
|
||||
<div class='nav-item'>
|
||||
<a class="overview ripple-element" id="nav-overview" [routerLink]="['/dashboard']" routerLinkActive="active-link">Dashboard</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import { Component, Directive, ElementRef } from '@angular/core';
|
||||
|
||||
import { Browser, rippleEffect, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
|
||||
import { Browser, rippleEffect, isNullOrUndefined as isNOU, enableRipple } from '@syncfusion/ej2-base';
|
||||
|
||||
import { userInfo } from '../common/common.data';
|
||||
enableRipple(true);
|
||||
|
||||
@Directive({
|
||||
selector: '[routerLinkActive]',
|
||||
|
|
@ -22,7 +23,7 @@ export class MenuComponent {
|
|||
|
||||
constructor(public eleRef: ElementRef) {
|
||||
/** Loads the user data in the profile from the sidebar */
|
||||
this.userName = userInfo.Name;
|
||||
this.userName = userInfo.FullName;
|
||||
rippleEffect(document.body, { selector: '.ripple-element', rippleFlag: true });
|
||||
}
|
||||
|
||||
|
|
@ -95,4 +96,10 @@ export class MenuComponent {
|
|||
this.enableOverlay();
|
||||
}
|
||||
}
|
||||
|
||||
public onNavigationClick(args: MouseEvent): void {
|
||||
if ((args.target as HTMLElement).nodeName === 'A') {
|
||||
this.handleOverlay();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
//sass-lint:disable-all
|
||||
$accent: #4273F9;
|
||||
$gradient-start-color: #6890FB;
|
||||
$gradient-end-color: $accent;
|
||||
|
|
@ -6,7 +7,6 @@ $gradient-danger-end-color: #FA453C;
|
|||
$shadow-start-color: rgba(0,0,0,0.20);
|
||||
$shadow-active-color: rgba(66,115,249,0.85);
|
||||
|
||||
//sass-lint:disable-all
|
||||
.dashboard-page,
|
||||
.about-page {
|
||||
#filter-toggle {
|
||||
|
|
@ -19,14 +19,33 @@ $shadow-active-color: rgba(66,115,249,0.85);
|
|||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#grid .e-toolbar {
|
||||
.e-tbar-btn{
|
||||
.e-tbar-btn-text {
|
||||
cursor:pointer;
|
||||
padding: 0px 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
#grid .e-toolbar {
|
||||
.e-toolbar-items {
|
||||
.e-toolbar-item {
|
||||
.e-tbar-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
border-color: rgba(0, 0, 0, 0.12);
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.e-btn.e-info.e-add,
|
||||
.e-btn.e-info.e-save {
|
||||
.e-btn.e-info.e-save,.e-btn.e-ok.e-flat {
|
||||
background-image: linear-gradient(-180deg, $gradient-start-color 0%, $gradient-end-color 100%) !important;
|
||||
border: 0;
|
||||
font-size: 13px;
|
||||
color: #FFFFFF;
|
||||
font-family: Roboto-Regular;
|
||||
height: 26px;
|
||||
|
||||
&:hover {
|
||||
background-image: linear-gradient(-180deg, $gradient-start-color 0%, $gradient-end-color 100%);
|
||||
|
|
@ -47,7 +66,7 @@ $shadow-active-color: rgba(66,115,249,0.85);
|
|||
}
|
||||
}
|
||||
|
||||
.e-btn.e-outline.e-cancel {
|
||||
.e-btn.e-outline.e-cancel,.e-btn.e-no.e-flat {
|
||||
background: #fff;
|
||||
border: 1px solid #4273f9;
|
||||
font-family: Roboto Regular;
|
||||
|
|
@ -184,17 +203,17 @@ $shadow-active-color: rgba(66,115,249,0.85);
|
|||
|
||||
.e-dialog {
|
||||
|
||||
&#confirmDialog .e-dlg-content {
|
||||
padding: 0 24px 18px 24px;
|
||||
}
|
||||
|
||||
.e-dlg-header-content {
|
||||
border-bottom: none;
|
||||
padding: 24px 24px 0 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.expense-page {
|
||||
#confirmDialog.e-dialog {
|
||||
.e-footer-content {
|
||||
padding: 8px;
|
||||
}
|
||||
.e-footer-content {
|
||||
padding: 0 24px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -228,7 +247,7 @@ $shadow-active-color: rgba(66,115,249,0.85);
|
|||
}
|
||||
|
||||
.e-daterangepicker.e-popup {
|
||||
z-index: 1000050;
|
||||
z-index: 1000050 !important;
|
||||
}
|
||||
|
||||
.e-icon {
|
||||
|
|
@ -508,20 +527,35 @@ html {
|
|||
}
|
||||
|
||||
#search {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
|
||||
.e-input-group {
|
||||
background: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
input.search {
|
||||
font-size: 15px;
|
||||
text-indent: 35px;
|
||||
}
|
||||
|
||||
.e-clear-icon {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
&::before, &::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.searchtxt::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input.search {
|
||||
font-size: 15px;
|
||||
text-indent: 19px;
|
||||
}
|
||||
|
||||
#grid {
|
||||
|
||||
border: 1px solid #f7f7f7;
|
||||
|
|
@ -533,6 +567,7 @@ input.search {
|
|||
.e-toolbar-items {
|
||||
background: $white;
|
||||
float:right;
|
||||
margin: 0;
|
||||
|
||||
.e-btn {
|
||||
background: $white;
|
||||
|
|
@ -541,9 +576,9 @@ input.search {
|
|||
}
|
||||
}
|
||||
|
||||
.expense-search-icon{
|
||||
.expense-search-icon {
|
||||
position: absolute;
|
||||
margin: 10px 6px 2px;
|
||||
margin: 10px;
|
||||
font-size: 15px;
|
||||
color: black;
|
||||
opacity: .6;
|
||||
|
|
@ -788,7 +823,7 @@ input.search {
|
|||
.e-datepicker.e-popup-wrapper,
|
||||
.e-timepicker.e-popup,
|
||||
.e-ddl.e-popup {
|
||||
z-index: 10000001;
|
||||
z-index: 10000001 !important;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
|
|
@ -1071,10 +1106,13 @@ span.e-label {
|
|||
}
|
||||
.label-font{
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
padding-top: 32px;
|
||||
padding-bottom: 16px;
|
||||
padding: 35px 0 10px 0;
|
||||
margin: 0;
|
||||
color: #759df5;
|
||||
width: 100%;
|
||||
&.bottom-align {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.padding-bottom-10{
|
||||
|
|
@ -1268,6 +1306,9 @@ span.e-label {
|
|||
|
||||
.expense-filter-container {
|
||||
padding: 0 10px 10px 10px;
|
||||
& > .label-font:first-child {
|
||||
padding-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1754,13 +1795,17 @@ column-chart {
|
|||
}
|
||||
}
|
||||
|
||||
.e-checkbox-wrapper .e-frame {
|
||||
.e-grid .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
.e-checkbox-wrapper .e-frame, .e-css.e-checkbox-wrapper .e-frame {
|
||||
line-height: 8px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.e-checkbox-wrapper .e-check {
|
||||
.e-checkbox-wrapper .e-check, .e-css.e-checkbox-wrapper .e-check {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -1771,21 +1816,6 @@ column-chart {
|
|||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.label-font:first-child {
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.label-font.bottom-align {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.expense-page .search {
|
||||
background: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
padding-left: 0;
|
||||
width: 100%;
|
||||
|
|
@ -1799,7 +1829,6 @@ column-chart {
|
|||
#filterExpense.e-btn,
|
||||
#filter-btn.e-btn {
|
||||
height: 34px;
|
||||
line-height: 29px;
|
||||
}
|
||||
|
||||
.e-btn.e-info,
|
||||
|
|
@ -1844,10 +1873,6 @@ input[type="search"].search::-moz-placeholder {
|
|||
color: #9d9d9d;
|
||||
}
|
||||
|
||||
input.search{
|
||||
text-indent: 30px;
|
||||
}
|
||||
|
||||
.e-grid .e-gridheader {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
|
@ -1869,6 +1894,16 @@ input.search{
|
|||
|
||||
#download-btn {
|
||||
width: auto;
|
||||
height: 27px;
|
||||
line-height: 25px;
|
||||
padding: 0 12px;
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.about-heading {
|
||||
|
|
@ -2105,9 +2140,8 @@ body.about-page {
|
|||
|
||||
#add-btn {
|
||||
width: 36px;
|
||||
padding: 0;
|
||||
padding: 10px 0;
|
||||
height: 34px;
|
||||
padding-top: 6px;
|
||||
|
||||
span {
|
||||
margin: 0;
|
||||
|
|
@ -2182,11 +2216,18 @@ body.about-page {
|
|||
}
|
||||
|
||||
.min-numeric {
|
||||
padding-right: 11px;
|
||||
padding-right: 7px;
|
||||
}
|
||||
|
||||
.max-numeric {
|
||||
margin-left: 9px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.e-input-group .e-input-group-icon {
|
||||
|
||||
&.e-date-icon, &.e-range-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
|
|
@ -2283,6 +2324,7 @@ body.about-page {
|
|||
background-image: url(./images/no-records.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.amt-payment.Income {
|
||||
|
|
@ -2321,7 +2363,7 @@ body.about-page {
|
|||
#editExpenseDialog {
|
||||
width: 90% !important;
|
||||
height: 90% !important;
|
||||
max-height: 483px !important;
|
||||
max-height: 510px !important;
|
||||
max-width: 483px !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -2331,10 +2373,9 @@ body.about-page {
|
|||
#editExpenseDialog {
|
||||
width: 70% !important;
|
||||
height: 90% !important;
|
||||
max-height: 483px !important;
|
||||
max-width: 483px !important;
|
||||
max-width: 550px;
|
||||
min-width: 550px;
|
||||
max-height: 510px !important;
|
||||
max-width: 550px !important;
|
||||
min-width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -2474,7 +2515,7 @@ body.about-page {
|
|||
#alertDialog .alertDlgContent {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.e-grid tr {
|
||||
#recentexpense-grid.e-grid tr, #grid.e-grid tr {
|
||||
cursor: pointer;
|
||||
}
|
||||
#category_popup.e-ddl.e-popup {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ $accent: #4273F9;
|
|||
$accent-font: #fff;
|
||||
@import 'ej2-base/styles/material-definition.scss';
|
||||
@import 'ej2-base/styles/all.scss';
|
||||
@import 'ej2-charts/styles/accumulation-chart/all.scss';
|
||||
@import 'ej2-buttons/styles/button/definition.scss';
|
||||
@import 'ej2-buttons/styles/button/material-definition.scss';
|
||||
@import 'ej2-buttons/styles/button/all.scss';
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Essential JS 2 for Angular - Expense tracker</title>
|
||||
<title>Essential JS 2 for Angular - Expense Tracker</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="Essential JS 2 for Angular - Expense tracker">
|
||||
<meta name="description" content="Essential JS 2 for Angular - Expense Tracker">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<link rel="shortcut icon" href="./assets/favicon.ico" />
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "amd",
|
||||
"declaration": true,
|
||||
"removeComments": true,
|
||||
"noLib": false,
|
||||
"lib": ["es2015", "dom"],
|
||||
"experimentalDecorators": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"sourceMap": true,
|
||||
"pretty": true,
|
||||
"allowUnreachableCode": false,
|
||||
"allowUnusedLabels": false,
|
||||
"noImplicitAny": true,
|
||||
"noImplicitReturns": true,
|
||||
"noImplicitUseStrict": false,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"allowJs": false,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"moduleResolution": "node",
|
||||
"types": ["requirejs"]
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
],
|
||||
"compileOnSave": false
|
||||
}
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
{
|
||||
"rules": {
|
||||
"chai-vague-errors": true,
|
||||
"use-isnan": true,
|
||||
"missing-jsdoc": false,
|
||||
"missing-optional-annotation": true,
|
||||
"no-backbone-get-set-outside-model": true,
|
||||
"no-banned-terms": true,
|
||||
"no-constant-condition": true,
|
||||
"no-control-regex": true,
|
||||
"no-cookies": true,
|
||||
"no-delete-expression": true,
|
||||
"no-document-write": true,
|
||||
"no-document-domain": true,
|
||||
"no-disable-auto-sanitization": true,
|
||||
"no-duplicate-case": true,
|
||||
"no-duplicate-parameter-names": false,
|
||||
"no-empty-interfaces": true,
|
||||
"no-exec-script": true,
|
||||
"no-function-constructor-with-string-args": false,
|
||||
"no-function-expression": true,
|
||||
"no-invalid-regexp": true,
|
||||
"no-for-in": false,
|
||||
"no-missing-visibility-modifiers": false,
|
||||
"no-multiline-string": false,
|
||||
"no-multiple-var-decl": true,
|
||||
"no-unnecessary-bind": true,
|
||||
"no-unnecessary-semicolons": true,
|
||||
"no-octal-literal": true,
|
||||
"no-regex-spaces": true,
|
||||
"no-sparse-arrays": true,
|
||||
"no-string-based-set-immediate": true,
|
||||
"no-string-based-set-interval": true,
|
||||
"no-unused-imports": false,
|
||||
"no-with-statement": true,
|
||||
"prefer-array-literal": true,
|
||||
"promise-must-complete": false,
|
||||
"react-no-dangerous-html": true,
|
||||
"use-named-parameter": true,
|
||||
"valid-typeof": true,
|
||||
"max-func-body-length": [true, 200, {
|
||||
"ignore-parameters-to-function-regex": "describe"
|
||||
}],
|
||||
"class-name": true,
|
||||
"curly": true,
|
||||
"eofline": false,
|
||||
"forin": false,
|
||||
"indent": [
|
||||
true,
|
||||
"spaces"
|
||||
],
|
||||
"label-position": true,
|
||||
"max-line-length": [true, 200],
|
||||
"no-arg": true,
|
||||
"no-construct": false,
|
||||
"no-parameter-properties": false,
|
||||
"no-debugger": false,
|
||||
"no-duplicate-variable": true,
|
||||
"no-empty": false,
|
||||
"no-eval": true,
|
||||
"no-string-literal": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"trailing-comma": true,
|
||||
"no-trailing-whitespace": true,
|
||||
"no-unused-expression": true,
|
||||
"no-use-before-declare": true,
|
||||
"no-var-requires": true,
|
||||
"one-line": [true,
|
||||
"check-open-brace",
|
||||
"check-catch",
|
||||
"check-else",
|
||||
"check-whitespace"
|
||||
],
|
||||
"no-any": false,
|
||||
"no-conditional-assignment": true,
|
||||
"no-angle-bracket-type-assertion": false,
|
||||
"align": [true, "parameters", "statements"],
|
||||
"no-empty-line-after-opening-brace": false,
|
||||
"typedef-whitespace": [false],
|
||||
"ban": true,
|
||||
"quotemark": [true, "single"],
|
||||
"semicolon": true,
|
||||
"triple-equals": [true, "allow-null-check"],
|
||||
"typedef": [true,
|
||||
"call-signature",
|
||||
"parameter",
|
||||
"property-declaration",
|
||||
"variable-declaration",
|
||||
"arrow-parameter",
|
||||
"member-variable-declaration"],
|
||||
"variable-name": true,
|
||||
"whitespace": [true,
|
||||
"check-branch",
|
||||
"check-decl",
|
||||
"check-operator",
|
||||
"check-separator",
|
||||
"check-type"
|
||||
],
|
||||
"jsdoc-format": true,
|
||||
"no-var-keyword": true,
|
||||
"radix": true
|
||||
}
|
||||
}
|
||||
Загрузка…
Ссылка в новой задаче