Initial frontend frameworks demo version.
Tomasz Półgrabia
commit
0cbfd7021a
|
|
@ -0,0 +1,3 @@
|
|||
node_modules
|
||||
dist
|
||||
.idea
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
# Purpose of this repository
|
||||
|
||||
It's a repository sharing the same backend to demonstrate knowledge
|
||||
of various javascript frameworks. GUIs should be pretty the same
|
||||
in all versions of frontend.
|
||||
|
||||
# Frameworks tested:
|
||||
- Angular
|
||||
- React - to be done
|
||||
- Vue - to be done
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
# here database for sqlite3 with people
|
||||
data
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"port": 8123,
|
||||
"dbUrl": "./data/people.dat"
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
let sqlite3 = require('sqlite3').verbose();
|
||||
module.exports = function(dbUrl) {
|
||||
return new sqlite3.Database(dbUrl);
|
||||
};
|
||||
|
|
@ -0,0 +1,174 @@
|
|||
const express = require('express');
|
||||
const fs = require('fs');
|
||||
const retrieveDb = require('./database.js');
|
||||
|
||||
const app = express();
|
||||
app.use(express.json());
|
||||
|
||||
console.log(`Args: ${process.argv}, length: ${process.argv.length}`);
|
||||
const configUrl = process.argv.length >= 2 ? process.argv[2] : null;
|
||||
let config = {};
|
||||
if (configUrl) {
|
||||
console.log(`Reading config from ${configUrl}`);
|
||||
let data = fs.readFileSync(configUrl, 'utf8');
|
||||
if (data) {
|
||||
console.log(`Got data: ${data}`);
|
||||
config = JSON.parse(data);
|
||||
console.log(`Parsed json data ${config} ...`);
|
||||
console.log(`Config ${config}`);
|
||||
} else {
|
||||
console.error('No data...');
|
||||
}
|
||||
} else {
|
||||
console.log('No configuration provided...');
|
||||
}
|
||||
|
||||
const port = config?.port || 8000;
|
||||
const dbUrl = config?.dbUrl || './data/people.dat';
|
||||
|
||||
const db = retrieveDb(dbUrl);
|
||||
|
||||
app.get('/', (req, res) => {
|
||||
res.setHeader('Content-Type', 'application/json');
|
||||
res.send(JSON.stringify({
|
||||
message: 'Index page'
|
||||
}));
|
||||
});
|
||||
|
||||
function convertToCamelCased(data) {
|
||||
return {
|
||||
id: data.id,
|
||||
firstName: data['first_name'],
|
||||
lastName: data['last_name'],
|
||||
email: data['email'],
|
||||
status: data['status']
|
||||
};
|
||||
}
|
||||
|
||||
app.get('/people/:personId', (req, res) => {
|
||||
res.setHeader('Content-Type', 'application/json');
|
||||
let personId = req.params.personId;
|
||||
db.get('select * from persons p where p.id = ?', [personId], (err, data) => {
|
||||
if (!err) {
|
||||
if (!data) {
|
||||
// no person data found with the given id
|
||||
res.status(404);
|
||||
res.send(JSON.stringify({}));
|
||||
return;
|
||||
}
|
||||
|
||||
// I found the user, returning data...
|
||||
res.send(JSON.stringify(convertToCamelCased(data)));
|
||||
} else {
|
||||
console.error('Fetching person with id from database failed', err);
|
||||
res.status(500)
|
||||
.send(JSON.stringify({}));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
app.put('/people', (req, res) => {
|
||||
console.log(`Put person with data`, req.body);
|
||||
let {firstName: firstName, lastName: lastName, email, status} = req.body;
|
||||
|
||||
const stmt = db.prepare('insert into persons (first_name, last_name, email, status) values (?, ?, ?, ?)');
|
||||
stmt.run([firstName, lastName, email, status || 0], (serr) => {
|
||||
if (!serr) {
|
||||
let lastId = stmt.lastID;
|
||||
console.log(`Added person with lastId ${lastId}`);
|
||||
res.send(JSON.stringify({...req.body, id: lastId}));
|
||||
} else {
|
||||
console.error('Got error while putting new person', serr);
|
||||
res.status(500)
|
||||
.send('Internal server error');
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
app.post('/people/:personId', (req, res) => {
|
||||
console.log(`Update person with data`, req.body);
|
||||
let personId = req.params.personId;
|
||||
let {firstName, lastName, email, status} = req.body;
|
||||
|
||||
db.get('select * from persons p where p.id = ?', [personId], (err, data) => {
|
||||
if (err) {
|
||||
console.log(`Error while checking if person exists with ${personId}`);
|
||||
res.status(500).send('');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
res.status(404).send('');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`Person found, updating person with id ${personId} ...`);
|
||||
|
||||
db.run('update persons set first_name = ?, last_name = ?, email = ?, status = ?'
|
||||
+ ' where id = ?',
|
||||
[firstName, lastName, email, status || 0, personId], (err2) => {
|
||||
if (!err2) {
|
||||
res.send(JSON.stringify({}));
|
||||
} else {
|
||||
console.error('Got error while putting new person', err2);
|
||||
res.status(500)
|
||||
.send('Internal server error');
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
app.delete('/people/:personId', (req, res) => {
|
||||
let personId = req.params.personId;
|
||||
db.get('select * from persons p where p.id = ?', [personId], (err, data) => {
|
||||
if (err) {
|
||||
console.error('Got error', err);
|
||||
res.status(500).end();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
// there is no record to be deleted
|
||||
res.status(404).end();
|
||||
return;
|
||||
}
|
||||
|
||||
// we are sure that there is a record to delete
|
||||
|
||||
db.run('delete from persons where id = ?', [personId], (err) => {
|
||||
if (!err) {
|
||||
console.log(`Deleting person with id ${personId} was successful.`);
|
||||
res.status(200)
|
||||
.send(JSON.stringify({
|
||||
status: 'OK'
|
||||
}));
|
||||
} else {
|
||||
console.error(`Got error while deleting person with id ${personId}`, err);
|
||||
res.status(500).send(JSON.stringify({
|
||||
status: 'INTERNAL SERVER ERROR',
|
||||
message: `I couldn't delete person with id ${personId}...`,
|
||||
}));
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
app.get('/people/', (req, res) => {
|
||||
console.log('Getting all people data');
|
||||
res.setHeader('Content-Type', 'application/json');
|
||||
db.all('select * from persons', (err, data) => {
|
||||
if (!err) {
|
||||
res.send(JSON.stringify(data.map(r => convertToCamelCased(r))));
|
||||
} else {
|
||||
console.error('Fetching persons from database failed', err);
|
||||
res.send(JSON.stringify([]));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
app.listen(port, () => {
|
||||
console.log(`Listening on ${port}`);
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"name": "backend",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"express": "^4.17.1",
|
||||
"sqlite3": "^5.0.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
create table persons (
|
||||
id integer primary key autoincrement,
|
||||
firstName text not null,
|
||||
lastName text not null,
|
||||
email varchar(256) not null,
|
||||
status integer default 0
|
||||
created_at date not null default datetime('now', 'localtime'),
|
||||
updated_at date not null default datetime('now', 'localtime')
|
||||
);
|
||||
|
||||
create trigger update_at_persons
|
||||
after update on persons
|
||||
begin
|
||||
update persons
|
||||
set updated_at = datetime('now', 'localtime')
|
||||
where id = old.id;
|
||||
end;
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
|
||||
# For additional information regarding the format and rule options, please see:
|
||||
# https://github.com/browserslist/browserslist#queries
|
||||
|
||||
# For the full list of supported browsers by the Angular framework, please see:
|
||||
# https://angular.io/guide/browser-support
|
||||
|
||||
# You can see what browsers were selected by your queries by running:
|
||||
# npx browserslist
|
||||
|
||||
last 1 Chrome version
|
||||
last 1 Firefox version
|
||||
last 2 Edge major versions
|
||||
last 2 Safari major versions
|
||||
last 2 iOS major versions
|
||||
Firefox ESR
|
||||
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
# Editor configuration, see https://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.ts]
|
||||
quote_type = single
|
||||
|
||||
[*.md]
|
||||
max_line_length = off
|
||||
trim_trailing_whitespace = false
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
# Only exists if Bazel was run
|
||||
/bazel-out
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
|
||||
# profiling files
|
||||
chrome-profiler-events*.json
|
||||
speed-measure-plugin*.json
|
||||
|
||||
# IDEs and editors
|
||||
/.idea
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# IDE - VSCode
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
.history/*
|
||||
|
||||
# misc
|
||||
/.sass-cache
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# System Files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
# Frontend
|
||||
|
||||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.0.4.
|
||||
|
||||
## Development server
|
||||
|
||||
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
|
||||
|
||||
## Build
|
||||
|
||||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
|
||||
|
||||
## Further help
|
||||
|
||||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"frontend": {
|
||||
"projectType": "application",
|
||||
"i18n": {
|
||||
"locales": {
|
||||
"de": "src/locale/messages.de.xlf"
|
||||
},
|
||||
"sourceLocale": "en-US"
|
||||
},
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"style": "scss"
|
||||
},
|
||||
"@schematics/angular:application": {
|
||||
"strict": true
|
||||
}
|
||||
},
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"localize": [
|
||||
"en-US"
|
||||
],
|
||||
"outputPath": "dist/frontend",
|
||||
"index": "src/index.html",
|
||||
"main": "src/main.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"aot": true,
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
"optimization": true,
|
||||
"outputHashing": "all",
|
||||
"sourceMap": false,
|
||||
"namedChunks": false,
|
||||
"extractLicenses": true,
|
||||
"vendorChunk": false,
|
||||
"buildOptimizer": true,
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kb",
|
||||
"maximumError": "1mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "2kb",
|
||||
"maximumError": "4kb"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"options": {
|
||||
"browserTarget": "frontend:build"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "frontend:build:production",
|
||||
"proxyConfig": "proxy.conf.json"
|
||||
}
|
||||
}
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"browserTarget": "frontend:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"main": "src/test.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "tsconfig.spec.json",
|
||||
"karmaConfig": "karma.conf.js",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": []
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"tsconfig.app.json",
|
||||
"tsconfig.spec.json",
|
||||
"e2e/tsconfig.json"
|
||||
],
|
||||
"exclude": [
|
||||
"**/node_modules/**"
|
||||
]
|
||||
}
|
||||
},
|
||||
"e2e": {
|
||||
"builder": "@angular-devkit/build-angular:protractor",
|
||||
"options": {
|
||||
"protractorConfig": "e2e/protractor.conf.js",
|
||||
"devServerTarget": "frontend:serve"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"devServerTarget": "frontend:serve:production"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultProject": "frontend",
|
||||
"cli": {
|
||||
"analytics": "4f8db014-7fd1-44f3-9a06-aede6624ca03"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
// @ts-check
|
||||
// Protractor configuration file, see link for more information
|
||||
// https://github.com/angular/protractor/blob/master/lib/config.ts
|
||||
|
||||
const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
|
||||
|
||||
/**
|
||||
* @type { import("protractor").Config }
|
||||
*/
|
||||
exports.config = {
|
||||
allScriptsTimeout: 11000,
|
||||
specs: [
|
||||
'./src/**/*.e2e-spec.ts'
|
||||
],
|
||||
capabilities: {
|
||||
browserName: 'chrome'
|
||||
},
|
||||
directConnect: true,
|
||||
SELENIUM_PROMISE_MANAGER: false,
|
||||
baseUrl: 'http://localhost:4200/',
|
||||
framework: 'jasmine',
|
||||
jasmineNodeOpts: {
|
||||
showColors: true,
|
||||
defaultTimeoutInterval: 30000,
|
||||
print: function() {}
|
||||
},
|
||||
onPrepare() {
|
||||
require('ts-node').register({
|
||||
project: require('path').join(__dirname, './tsconfig.json')
|
||||
});
|
||||
jasmine.getEnv().addReporter(new SpecReporter({
|
||||
spec: {
|
||||
displayStacktrace: StacktraceOption.PRETTY
|
||||
}
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { AppPage } from './app.po';
|
||||
import { browser, logging } from 'protractor';
|
||||
|
||||
describe('workspace-project App', () => {
|
||||
let page: AppPage;
|
||||
|
||||
beforeEach(() => {
|
||||
page = new AppPage();
|
||||
});
|
||||
|
||||
it('should display welcome message', async () => {
|
||||
await page.navigateTo();
|
||||
expect(await page.getTitleText()).toEqual('frontend app is running!');
|
||||
});
|
||||
|
||||
afterEach(async () => {
|
||||
// Assert that there are no errors emitted from the browser
|
||||
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
|
||||
expect(logs).not.toContain(jasmine.objectContaining({
|
||||
level: logging.Level.SEVERE,
|
||||
} as logging.Entry));
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { browser, by, element } from 'protractor';
|
||||
|
||||
export class AppPage {
|
||||
async navigateTo(): Promise<unknown> {
|
||||
return browser.get(browser.baseUrl);
|
||||
}
|
||||
|
||||
async getTitleText(): Promise<string> {
|
||||
return element(by.css('app-root .content span')).getText();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/e2e",
|
||||
"module": "commonjs",
|
||||
"target": "es2018",
|
||||
"types": [
|
||||
"jasmine",
|
||||
"node"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
// Karma configuration file, see link for more information
|
||||
// https://karma-runner.github.io/1.0/config/configuration-file.html
|
||||
|
||||
module.exports = function (config) {
|
||||
config.set({
|
||||
basePath: '',
|
||||
frameworks: ['jasmine', '@angular-devkit/build-angular'],
|
||||
plugins: [
|
||||
require('karma-jasmine'),
|
||||
require('karma-chrome-launcher'),
|
||||
require('karma-jasmine-html-reporter'),
|
||||
require('karma-coverage'),
|
||||
require('@angular-devkit/build-angular/plugins/karma')
|
||||
],
|
||||
client: {
|
||||
jasmine: {
|
||||
// you can add configuration options for Jasmine here
|
||||
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
|
||||
// for example, you can disable the random execution with `random: false`
|
||||
// or set a specific seed with `seed: 4321`
|
||||
},
|
||||
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
||||
},
|
||||
jasmineHtmlReporter: {
|
||||
suppressAll: true // removes the duplicated traces
|
||||
},
|
||||
coverageReporter: {
|
||||
dir: require('path').join(__dirname, './coverage/frontend'),
|
||||
subdir: '.',
|
||||
reporters: [
|
||||
{ type: 'html' },
|
||||
{ type: 'text-summary' }
|
||||
]
|
||||
},
|
||||
reporters: ['progress', 'kjhtml'],
|
||||
port: 9876,
|
||||
colors: true,
|
||||
logLevel: config.LOG_INFO,
|
||||
autoWatch: true,
|
||||
browsers: ['Chrome'],
|
||||
singleRun: false,
|
||||
restartOnFileChange: true
|
||||
});
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,47 @@
|
|||
{
|
||||
"name": "frontend",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve --proxy-config=proxy.conf.json",
|
||||
"build": "ng build",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "~11.0.4",
|
||||
"@angular/common": "~11.0.4",
|
||||
"@angular/compiler": "~11.0.4",
|
||||
"@angular/core": "~11.0.4",
|
||||
"@angular/forms": "~11.0.4",
|
||||
"@angular/platform-browser": "~11.0.4",
|
||||
"@angular/platform-browser-dynamic": "~11.0.4",
|
||||
"@angular/router": "~11.0.4",
|
||||
"bulma": "^0.9.1",
|
||||
"rxjs": "~6.6.0",
|
||||
"tslib": "^2.0.0",
|
||||
"zone.js": "~0.10.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~0.1100.4",
|
||||
"@angular/cli": "~11.0.4",
|
||||
"@angular/compiler-cli": "~11.0.4",
|
||||
"@angular/localize": "^11.0.4",
|
||||
"@types/jasmine": "~3.6.0",
|
||||
"@types/node": "^12.11.1",
|
||||
"codelyzer": "^6.0.0",
|
||||
"jasmine-core": "~3.6.0",
|
||||
"jasmine-spec-reporter": "~5.0.0",
|
||||
"karma": "~5.1.0",
|
||||
"karma-chrome-launcher": "~3.1.0",
|
||||
"karma-coverage": "~2.0.3",
|
||||
"karma-jasmine": "~4.0.0",
|
||||
"karma-jasmine-html-reporter": "^1.5.0",
|
||||
"protractor": "~7.0.0",
|
||||
"ts-node": "~8.3.0",
|
||||
"tslint": "~6.1.0",
|
||||
"typescript": "~4.0.2"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"/api": {
|
||||
"target": "http://localhost:8123/",
|
||||
"secure": false,
|
||||
"changeOrigin": true,
|
||||
"pathRewrite": {
|
||||
"^/api": ""
|
||||
},
|
||||
"logLevel": "debug"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
import { PersonAddComponent } from './people-module/person-add/person-add.component';
|
||||
import { PersonEditComponent } from './people-module/person-edit/person-edit.component';
|
||||
import { PeopleIndexComponent } from './people-module/people-index/people-index.component';
|
||||
|
||||
const routes: Routes = [{
|
||||
path: '',
|
||||
component: PeopleIndexComponent,
|
||||
}, {
|
||||
path: 'people',
|
||||
component: PeopleIndexComponent,
|
||||
}, {
|
||||
path: 'people/add',
|
||||
component: PersonAddComponent,
|
||||
}, {
|
||||
path: 'people/edit/:personId',
|
||||
component: PersonEditComponent,
|
||||
}];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forRoot(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class AppRoutingModule { }
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" routerLink="/">
|
||||
<h2 class="is-uppercase bold" i18n="app-people-management-limited-label">
|
||||
PeopleIndex management limited
|
||||
</h2>
|
||||
</a>
|
||||
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="navbarBasicExample" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item" routerLink="/" i18n="app-home-link-label">
|
||||
Home
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" routerLink="/people/add" i18="app-add-person-link-label">
|
||||
Add person
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons">
|
||||
<a class="button is-primary" (click)="toggleModal()">
|
||||
<strong i18n="app-sign-up-link-label">Sign up</strong>
|
||||
</a>
|
||||
<a class="button is-light" (click)="toggleModal()">
|
||||
<strong i18n="app-log-in-link-label">Log in</strong>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="modal" [ngClass]="{'is-active': notYetImplementedModalActive}">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content">
|
||||
<div class="box" i18n="app-not-implemented-yet">
|
||||
Sorry, this is still waiting for implementation.
|
||||
</div>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close" (click)="toggleModal()"></button>
|
||||
</div>
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@import '~bulma';
|
||||
|
||||
.bold {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
import { TestBed } from '@angular/core/testing';
|
||||
import { RouterTestingModule } from '@angular/router/testing';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [
|
||||
RouterTestingModule
|
||||
],
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it(`should have as title 'frontend'`, () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app.title).toEqual('frontend');
|
||||
});
|
||||
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement;
|
||||
expect(compiled.querySelector('.content span').textContent).toContain('frontend app is running!');
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.scss']
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'frontend';
|
||||
notYetImplementedModalActive = false;
|
||||
|
||||
toggleModal(): void {
|
||||
this.notYetImplementedModalActive = !this.notYetImplementedModalActive;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import {BrowserModule} from '@angular/platform-browser';
|
||||
import {NgModule} from '@angular/core';
|
||||
|
||||
import {AppRoutingModule} from './app-routing.module';
|
||||
import {AppComponent} from './app.component';
|
||||
import {PeopleModule} from './people-module/people.module';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
AppRoutingModule,
|
||||
PeopleModule
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule {
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
export class PersonSubmitted {
|
||||
public id: number | null = null;
|
||||
public created = true;
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export class Person {
|
||||
public id = -1;
|
||||
public firstName = '';
|
||||
public lastName = '';
|
||||
public email = '';
|
||||
public status = -1;
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<p>All persons recorded in the database</p>
|
||||
|
||||
<table [ngClass]="['table', 'is-striped', 'is-hoverable', 'is-fullwidth']">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Id</th>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Email</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let person of persons" (dblclick)="editPerson(person.id)">
|
||||
<td>{{person.id}}</td>
|
||||
<td>{{person.firstName}}</td>
|
||||
<td>{{person.lastName}}</td>
|
||||
<td>{{person.email}}</td>
|
||||
<td>{{person.status === 0 ? 'Active' : 'Inactive'}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import '~bulma';
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PeopleIndexComponent } from './people-index.component';
|
||||
|
||||
describe('PeopleIndexComponent', () => {
|
||||
let component: PeopleIndexComponent;
|
||||
let fixture: ComponentFixture<PeopleIndexComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PeopleIndexComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PeopleIndexComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import {Component, OnInit} from '@angular/core';
|
||||
import {Person} from '../models/person';
|
||||
import {PeopleService} from '../people.service';
|
||||
import {Router} from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-people-index',
|
||||
templateUrl: './people-index.component.html',
|
||||
styleUrls: ['./people-index.component.scss']
|
||||
})
|
||||
export class PeopleIndexComponent implements OnInit {
|
||||
persons: Person[] = [];
|
||||
|
||||
constructor(
|
||||
private peopleService: PeopleService,
|
||||
private router: Router) {
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.peopleService
|
||||
.getAllPersons()
|
||||
.then(persons => {
|
||||
this.persons = persons;
|
||||
});
|
||||
}
|
||||
|
||||
editPerson(id: number): void {
|
||||
this.router.navigate(['/people/edit/', id]);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {PeopleIndexComponent} from './people-index/people-index.component';
|
||||
import {PersonAddComponent} from './person-add/person-add.component';
|
||||
import {PersonEditComponent} from './person-edit/person-edit.component';
|
||||
import {PersonFormComponent} from './person-form/person-form.component';
|
||||
import {ReactiveFormsModule} from '@angular/forms';
|
||||
|
||||
@NgModule({
|
||||
declarations: [PeopleIndexComponent, PersonAddComponent, PersonEditComponent, PersonFormComponent],
|
||||
imports: [
|
||||
CommonModule,
|
||||
ReactiveFormsModule
|
||||
],
|
||||
exports: [
|
||||
PersonAddComponent,
|
||||
PeopleIndexComponent,
|
||||
]
|
||||
})
|
||||
export class PeopleModule {
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PeopleService } from './people.service';
|
||||
|
||||
describe('PeopleService', () => {
|
||||
let service: PeopleService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(PeopleService);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
import {Injectable} from '@angular/core';
|
||||
import {Person} from './models/person';
|
||||
import {PersonSubmitted} from './models/person-submitted';
|
||||
|
||||
const CONTENT_TYPE_HEADERS = {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json'
|
||||
};
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class PeopleService {
|
||||
getAllPersons(): Promise<Person[]> {
|
||||
return fetch('/api/people')
|
||||
.then(it => it.json())
|
||||
.then(it => it as Person[]);
|
||||
}
|
||||
|
||||
createPerson(person: Person): Promise<Person> {
|
||||
return fetch('/api/people', {
|
||||
headers: CONTENT_TYPE_HEADERS,
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(person)
|
||||
}).then(resp => {
|
||||
if (resp.status === 200) {
|
||||
return resp.json().then(body => {
|
||||
return Promise.resolve(body as Person);
|
||||
}).catch(e => {
|
||||
return Promise.reject(e);
|
||||
});
|
||||
} else {
|
||||
return Promise.reject(`Incorrect response status ${resp.status}`);
|
||||
}
|
||||
}).catch(reason => {
|
||||
return Promise.reject(reason);
|
||||
});
|
||||
}
|
||||
|
||||
getPersonById(personId: number): Promise<Person> {
|
||||
return fetch(`/api/people/${personId}`, {
|
||||
headers: CONTENT_TYPE_HEADERS,
|
||||
method: 'GET'
|
||||
}).then(resp => {
|
||||
if (resp.status === 200) {
|
||||
return resp.json();
|
||||
} else {
|
||||
return Promise.resolve(null);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updatePerson(personId: number, updatedPerson: Person): Promise<Person | null> {
|
||||
return fetch(`/api/people/${personId}`, {
|
||||
headers: CONTENT_TYPE_HEADERS,
|
||||
method: 'POST',
|
||||
body: JSON.stringify(updatedPerson)
|
||||
}).then(resp => {
|
||||
if (resp.status === 200) {
|
||||
return resp.json().then(e => e as Person);
|
||||
} else {
|
||||
return Promise.resolve(null);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<app-person-form (personSubmitted)="personCreated($event)">
|
||||
|
||||
</app-person-form>
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import "~bulma";
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PersonAddComponent } from './person-add.component';
|
||||
|
||||
describe('PersonAddComponent', () => {
|
||||
let component: PersonAddComponent;
|
||||
let fixture: ComponentFixture<PersonAddComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PersonAddComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PersonAddComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import {Component, OnInit} from '@angular/core';
|
||||
import {PersonSubmitted} from '../models/person-submitted';
|
||||
import {ActivatedRoute, Router} from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-person-add',
|
||||
templateUrl: './person-add.component.html',
|
||||
styleUrls: ['./person-add.component.scss']
|
||||
})
|
||||
export class PersonAddComponent {
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private router: Router) {
|
||||
}
|
||||
|
||||
personCreated(event: PersonSubmitted): void {
|
||||
console.log(`Person ${event.created ? 'created' : 'updated'} with id ${event.id}`);
|
||||
this.router.navigate(['/people']);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<p *ngIf="!invalidId">
|
||||
<app-person-form id={{personId}}
|
||||
(personSubmitted)="personUpdated($event)"></app-person-form>
|
||||
</p>
|
||||
<p *ngIf="invalidId">You gave me incorrect id!!!</p>
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import "~bulma";
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PersonEditComponent } from './person-edit.component';
|
||||
|
||||
describe('PersonEditComponent', () => {
|
||||
let component: PersonEditComponent;
|
||||
let fixture: ComponentFixture<PersonEditComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PersonEditComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PersonEditComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import {Component, OnInit} from '@angular/core';
|
||||
import {ActivatedRoute, Router} from '@angular/router';
|
||||
import {PersonSubmitted} from '../models/person-submitted';
|
||||
|
||||
@Component({
|
||||
selector: 'app-person-edit',
|
||||
templateUrl: './person-edit.component.html',
|
||||
styleUrls: ['./person-edit.component.scss']
|
||||
})
|
||||
export class PersonEditComponent implements OnInit {
|
||||
|
||||
personId = -1;
|
||||
invalidId = false;
|
||||
loaded = false;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private router: Router) {
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.route.params.subscribe((params: any) => {
|
||||
this.personId = Number.parseInt(params.personId, 10) as number;
|
||||
this.invalidId = Number.isNaN(this.personId);
|
||||
});
|
||||
}
|
||||
|
||||
personLoaded(): void {
|
||||
this.loaded = true;
|
||||
}
|
||||
|
||||
personUpdated(e: PersonSubmitted): void {
|
||||
console.log(`Person ${e.created ? 'created' : 'updated'} with id: ${e.id}`);
|
||||
this.router.navigate(['/people']);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<div *ngIf="!loaded" class="container loader-wrapper">
|
||||
<div class="loader loader-positioned" style="margin: 0 auto"></div>
|
||||
</div>
|
||||
<form *ngIf="loaded" [formGroup]="personForm">
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-medium">
|
||||
<label for="firstName" class="label">First name</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input id="firstName"
|
||||
type="text"
|
||||
class="input"
|
||||
placeholder="First name"
|
||||
formControlName="firstName"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-medium">
|
||||
<label for="lastName" class="label">Last name</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input id="lastName"
|
||||
type="text"
|
||||
class="input"
|
||||
placeholder="Last name"
|
||||
formControlName="lastName"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-medium">
|
||||
<label for="email" class="label">E-mail</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input id="email"
|
||||
type="text"
|
||||
[ngClass]="{'input': true, 'is-danger': this.personForm?.controls?.email?.errors}"
|
||||
placeholder="E-mail"
|
||||
formControlName="email"/>
|
||||
</div>
|
||||
<p *ngIf="this.personForm?.controls?.email?.errors" class="help is-danger">E-mail is invalid</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-medium">
|
||||
<label for="status" class="label">Status</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="select is-fullwidth">
|
||||
<select id="status" formControlName="status">
|
||||
<option value="0">Active</option>
|
||||
<option value="1">Inactive</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<button class="button is-primary" (click)="submitPerson()">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
@import "~bulma";
|
||||
|
||||
.loader-positioned {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.loader-wrapper {
|
||||
margin: 1em;
|
||||
}
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
import {ComponentFixture, TestBed} from '@angular/core/testing';
|
||||
|
||||
import {PersonFormComponent} from './person-form.component';
|
||||
import {PeopleService} from "../people.service";
|
||||
import {Person} from "../models/person";
|
||||
|
||||
describe('PersonFormComponent', () => {
|
||||
let component: PersonFormComponent;
|
||||
let fixture: ComponentFixture<PersonFormComponent>;
|
||||
let service: jasmine.SpyObj<PeopleService>;
|
||||
|
||||
beforeEach(async () => {
|
||||
const spyValue = jasmine.createSpyObj('PeopleService', ['createPerson']);
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [PersonFormComponent],
|
||||
providers: [
|
||||
{
|
||||
provide: PeopleService,
|
||||
useValue: spyValue
|
||||
}
|
||||
]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
service = TestBed.inject(PeopleService) as jasmine.SpyObj<PeopleService>;
|
||||
fixture = TestBed.createComponent(PersonFormComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should create form with an incorrect email', () => {
|
||||
component.personForm.controls.email.setValue('t');
|
||||
expect(component.personForm.controls.email.errors).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should create form with an correct email', () => {
|
||||
component.personForm.controls.email.setValue('do-not-reply@gmail.com');
|
||||
expect(component.personForm.controls.email.errors).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should submit created form', () => {
|
||||
const fakePerson: Person = new Person();
|
||||
fakePerson.id = 1;
|
||||
fakePerson.firstName = 'Tomasz';
|
||||
fakePerson.lastName = 'Półgrabia';
|
||||
fakePerson.email = 'test@gmail.com';
|
||||
fakePerson.status = 0;
|
||||
|
||||
service.createPerson.and.callFake((person: Person) => {
|
||||
person.id = fakePerson.id;
|
||||
return Promise.resolve(person);
|
||||
});
|
||||
component.personForm.controls.firstName.setValue(fakePerson.firstName);
|
||||
component.personForm.controls.lastName.setValue(fakePerson.lastName);
|
||||
component.personForm.controls.email.setValue(fakePerson.email);
|
||||
component.personForm.controls.status.setValue(fakePerson.status);
|
||||
component.submitPerson();
|
||||
expect(service.createPerson.calls.count()).toBe(1);
|
||||
const p = service.createPerson.calls.first().args[0];
|
||||
expect(p.firstName).toEqual(fakePerson.firstName);
|
||||
expect(p.lastName).toEqual(fakePerson.lastName);
|
||||
expect(p.email).toEqual(fakePerson.email);
|
||||
expect(p.status).toEqual(fakePerson.status);
|
||||
// we need to make some assertions on output personCreated event
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
|
||||
import {FormControl, FormGroup} from '@angular/forms';
|
||||
import {PeopleService} from '../people.service';
|
||||
import {Person} from '../models/person';
|
||||
import {isValidEmail} from '../utils/validators';
|
||||
import {PersonSubmitted} from '../models/person-submitted';
|
||||
|
||||
@Component({
|
||||
selector: 'app-person-form',
|
||||
templateUrl: './person-form.component.html',
|
||||
styleUrls: ['./person-form.component.scss']
|
||||
})
|
||||
export class PersonFormComponent implements OnInit {
|
||||
@Input('id') personId: string | null = null;
|
||||
@Output('personSubmitted') personSubmitted: EventEmitter<PersonSubmitted>
|
||||
= new EventEmitter<PersonSubmitted>();
|
||||
loaded = false;
|
||||
|
||||
personForm: FormGroup = new FormGroup({
|
||||
firstName: new FormControl(''),
|
||||
lastName: new FormControl(''),
|
||||
email: new FormControl('', [isValidEmail], null),
|
||||
status: new FormControl(0)
|
||||
});
|
||||
|
||||
constructor(private peopleService: PeopleService) {
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
if (this.personId && !Number.isNaN(this.personId)) {
|
||||
console.log(`Editing person with id ${this.personId}. Editing mode...`);
|
||||
|
||||
this.peopleService.getPersonById(Number.parseInt(this.personId, 10))
|
||||
.then(person => {
|
||||
this.updatePersonFormWithData(person);
|
||||
this.loaded = true;
|
||||
}).catch((e) => {
|
||||
console.log(`Failed to fetch person with id ${this.personId}`, e);
|
||||
this.loaded = true;
|
||||
});
|
||||
|
||||
} else {
|
||||
console.log('Person id is undefined - adding mode');
|
||||
this.loaded = true;
|
||||
}
|
||||
}
|
||||
|
||||
private updatePersonFormWithData(person: Person): void {
|
||||
this.personForm.controls.firstName.setValue(person.firstName);
|
||||
this.personForm.controls.lastName.setValue(person.lastName);
|
||||
this.personForm.controls.email.setValue(person.email);
|
||||
this.personForm.controls.status.setValue(person.status);
|
||||
}
|
||||
|
||||
submitPerson(): void {
|
||||
console.log('Submitting person...');
|
||||
if (!this.personForm.valid) {
|
||||
console.log('Data are not valid');
|
||||
return;
|
||||
}
|
||||
const person = this.personForm.value as Person;
|
||||
const personUpdate = !!this.personId;
|
||||
if (!personUpdate) {
|
||||
this.peopleService.createPerson(person as Person)
|
||||
.then(p => {
|
||||
console.log(`Create succeeded with id ${p.id}`);
|
||||
const event = new PersonSubmitted();
|
||||
event.id = p.id;
|
||||
event.created = personUpdate;
|
||||
this.personSubmitted.emit(event);
|
||||
}).catch(e => {
|
||||
console.log('Create failed');
|
||||
});
|
||||
} else {
|
||||
// person update
|
||||
this.peopleService.updatePerson(Number.parseInt(this.personId as string, 10), person)
|
||||
.then(r => {
|
||||
if (r == null) {
|
||||
console.log('Update failed');
|
||||
return;
|
||||
}
|
||||
const event = new PersonSubmitted();
|
||||
event.id = r.id;
|
||||
event.created = false;
|
||||
this.personSubmitted.emit(event);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import {AbstractControl} from '@angular/forms';
|
||||
|
||||
export function isValidEmail(control: AbstractControl): object | null {
|
||||
return !control.value.match(/^([a-zA-Z0-9_\-.]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,5})$/)
|
||||
? {invalidEmail: true}
|
||||
: null;
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export const environment = {
|
||||
production: true
|
||||
};
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
// This file can be replaced during build by using the `fileReplacements` array.
|
||||
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
|
||||
// The list of file replacements can be found in `angular.json`.
|
||||
|
||||
export const environment = {
|
||||
production: false
|
||||
};
|
||||
|
||||
/*
|
||||
* For easier debugging in development mode, you can import the following file
|
||||
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
|
||||
*
|
||||
* This import should be commented out in production mode because it will have a negative impact
|
||||
* on performance if an error is thrown.
|
||||
*/
|
||||
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 948 B |
|
|
@ -0,0 +1,13 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Frontend</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
|
||||
<file source-language="en-US" datatype="plaintext" original="ng2.template">
|
||||
<body>
|
||||
<trans-unit id="c5b59182c27173fd4fe148d3c8a9d373b23fd292" datatype="html">
|
||||
<source> PeopleIndex management limited </source>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/app.component.html</context>
|
||||
<context context-type="linenumber">5,6</context>
|
||||
</context-group>
|
||||
<note priority="1" from="description">app-people-management-limited-label</note>
|
||||
</trans-unit>
|
||||
<trans-unit id="815cad6a13eee2edfed8a43dc3a64d88b1b2db27" datatype="html">
|
||||
<source> Home </source>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/app.component.html</context>
|
||||
<context context-type="linenumber">19,20</context>
|
||||
</context-group>
|
||||
<note priority="1" from="description">app-home-link-label</note>
|
||||
</trans-unit>
|
||||
<trans-unit id="c40c132843f349c3aa49730405de1d0ca733aef6" datatype="html">
|
||||
<source>Sign up</source>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/app.component.html</context>
|
||||
<context context-type="linenumber">32</context>
|
||||
</context-group>
|
||||
<note priority="1" from="description">app-sign-up-link-label</note>
|
||||
</trans-unit>
|
||||
<trans-unit id="f093d9574ab746b231504bd2cbb65f04bd7b00db" datatype="html">
|
||||
<source>Log in</source>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/app.component.html</context>
|
||||
<context context-type="linenumber">35</context>
|
||||
</context-group>
|
||||
<note priority="1" from="description">app-log-in-link-label</note>
|
||||
</trans-unit>
|
||||
<trans-unit id="f8a96e4bba93359867f7bd83d8a13a2f086bd885" datatype="html">
|
||||
<source> Sorry, this is still waiting for implementation. </source>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/app.component.html</context>
|
||||
<context context-type="linenumber">47,48</context>
|
||||
</context-group>
|
||||
<note priority="1" from="description">app-not-implemented-yet</note>
|
||||
</trans-unit>
|
||||
</body>
|
||||
</file>
|
||||
</xliff>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { enableProdMode } from '@angular/core';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppModule } from './app/app.module';
|
||||
import { environment } from './environments/environment';
|
||||
|
||||
if (environment.production) {
|
||||
enableProdMode();
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule)
|
||||
.catch(err => console.error(err));
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
/***************************************************************************************************
|
||||
* Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
|
||||
*/
|
||||
import '@angular/localize/init';
|
||||
/**
|
||||
* This file includes polyfills needed by Angular and is loaded before the app.
|
||||
* You can add your own extra polyfills to this file.
|
||||
*
|
||||
* This file is divided into 2 sections:
|
||||
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
|
||||
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
|
||||
* file.
|
||||
*
|
||||
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
|
||||
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
|
||||
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
|
||||
*
|
||||
* Learn more in https://angular.io/guide/browser-support
|
||||
*/
|
||||
|
||||
/***************************************************************************************************
|
||||
* BROWSER POLYFILLS
|
||||
*/
|
||||
|
||||
/** IE11 requires the following for NgClass support on SVG elements */
|
||||
// import 'classlist.js'; // Run `npm install --save classlist.js`.
|
||||
|
||||
/**
|
||||
* Web Animations `@angular/platform-browser/animations`
|
||||
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
|
||||
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
|
||||
*/
|
||||
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
||||
|
||||
/**
|
||||
* By default, zone.js will patch all possible macroTask and DomEvents
|
||||
* user can disable parts of macroTask/DomEvents patch by setting following flags
|
||||
* because those flags need to be set before `zone.js` being loaded, and webpack
|
||||
* will put import in the top of bundle, so user need to create a separate file
|
||||
* in this directory (for example: zone-flags.ts), and put the following flags
|
||||
* into that file, and then add the following code before importing zone.js.
|
||||
* import './zone-flags';
|
||||
*
|
||||
* The flags allowed in zone-flags.ts are listed here.
|
||||
*
|
||||
* The following flags will work for all browsers.
|
||||
*
|
||||
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
|
||||
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
|
||||
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
|
||||
*
|
||||
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
|
||||
* with the following flag, it will bypass `zone.js` patch for IE/Edge
|
||||
*
|
||||
* (window as any).__Zone_enable_cross_context_check = true;
|
||||
*
|
||||
*/
|
||||
|
||||
/***************************************************************************************************
|
||||
* Zone JS is required by default for Angular itself.
|
||||
*/
|
||||
import 'zone.js/dist/zone'; // Included with Angular CLI.
|
||||
|
||||
|
||||
/***************************************************************************************************
|
||||
* APPLICATION IMPORTS
|
||||
*/
|
||||
|
|
@ -0,0 +1 @@
|
|||
/* You can add global styles to this file, and also import other style files */
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
||||
|
||||
import 'zone.js/dist/zone-testing';
|
||||
import { getTestBed } from '@angular/core/testing';
|
||||
import {
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting
|
||||
} from '@angular/platform-browser-dynamic/testing';
|
||||
|
||||
declare const require: {
|
||||
context(path: string, deep?: boolean, filter?: RegExp): {
|
||||
keys(): string[];
|
||||
<T>(id: string): T;
|
||||
};
|
||||
};
|
||||
|
||||
// First, initialize the Angular testing environment.
|
||||
getTestBed().initTestEnvironment(
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting()
|
||||
);
|
||||
// Then we find all the tests.
|
||||
const context = require.context('./', true, /\.spec\.ts$/);
|
||||
// And load the modules.
|
||||
context.keys().map(context);
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/app",
|
||||
"types": []
|
||||
},
|
||||
"files": [
|
||||
"src/main.ts",
|
||||
"src/polyfills.ts"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"outDir": "./dist/out-tsc",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"strict": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"downlevelIteration": true,
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "es2015",
|
||||
"module": "es2020",
|
||||
"lib": [
|
||||
"es2018",
|
||||
"dom"
|
||||
]
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"strictInjectionParameters": true,
|
||||
"strictInputAccessModifiers": true,
|
||||
"strictTemplates": true
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/spec",
|
||||
"types": [
|
||||
"jasmine"
|
||||
]
|
||||
},
|
||||
"files": [
|
||||
"src/test.ts",
|
||||
"src/polyfills.ts"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.spec.ts",
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
{
|
||||
"extends": "tslint:recommended",
|
||||
"rulesDirectory": [
|
||||
"codelyzer"
|
||||
],
|
||||
"rules": {
|
||||
"align": {
|
||||
"options": [
|
||||
"parameters",
|
||||
"statements"
|
||||
]
|
||||
},
|
||||
"array-type": false,
|
||||
"arrow-return-shorthand": true,
|
||||
"curly": true,
|
||||
"deprecation": {
|
||||
"severity": "warning"
|
||||
},
|
||||
"eofline": true,
|
||||
"import-blacklist": [
|
||||
true,
|
||||
"rxjs/Rx"
|
||||
],
|
||||
"import-spacing": true,
|
||||
"indent": {
|
||||
"options": [
|
||||
"spaces"
|
||||
]
|
||||
},
|
||||
"max-classes-per-file": false,
|
||||
"max-line-length": [
|
||||
true,
|
||||
140
|
||||
],
|
||||
"member-ordering": [
|
||||
true,
|
||||
{
|
||||
"order": [
|
||||
"static-field",
|
||||
"instance-field",
|
||||
"static-method",
|
||||
"instance-method"
|
||||
]
|
||||
}
|
||||
],
|
||||
"no-console": [
|
||||
true,
|
||||
"debug",
|
||||
"info",
|
||||
"time",
|
||||
"timeEnd",
|
||||
"trace"
|
||||
],
|
||||
"no-empty": false,
|
||||
"no-inferrable-types": [
|
||||
true,
|
||||
"ignore-params"
|
||||
],
|
||||
"no-non-null-assertion": true,
|
||||
"no-redundant-jsdoc": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-var-requires": false,
|
||||
"object-literal-key-quotes": [
|
||||
true,
|
||||
"as-needed"
|
||||
],
|
||||
"quotemark": [
|
||||
true,
|
||||
"single"
|
||||
],
|
||||
"semicolon": {
|
||||
"options": [
|
||||
"always"
|
||||
]
|
||||
},
|
||||
"space-before-function-paren": {
|
||||
"options": {
|
||||
"anonymous": "never",
|
||||
"asyncArrow": "always",
|
||||
"constructor": "never",
|
||||
"method": "never",
|
||||
"named": "never"
|
||||
}
|
||||
},
|
||||
"typedef": [
|
||||
true,
|
||||
"call-signature"
|
||||
],
|
||||
"typedef-whitespace": {
|
||||
"options": [
|
||||
{
|
||||
"call-signature": "nospace",
|
||||
"index-signature": "nospace",
|
||||
"parameter": "nospace",
|
||||
"property-declaration": "nospace",
|
||||
"variable-declaration": "nospace"
|
||||
},
|
||||
{
|
||||
"call-signature": "onespace",
|
||||
"index-signature": "onespace",
|
||||
"parameter": "onespace",
|
||||
"property-declaration": "onespace",
|
||||
"variable-declaration": "onespace"
|
||||
}
|
||||
]
|
||||
},
|
||||
"variable-name": {
|
||||
"options": [
|
||||
"ban-keywords",
|
||||
"check-format",
|
||||
"allow-pascal-case"
|
||||
]
|
||||
},
|
||||
"whitespace": {
|
||||
"options": [
|
||||
"check-branch",
|
||||
"check-decl",
|
||||
"check-operator",
|
||||
"check-separator",
|
||||
"check-type",
|
||||
"check-typecast"
|
||||
]
|
||||
},
|
||||
"component-class-suffix": true,
|
||||
"contextual-lifecycle": true,
|
||||
"directive-class-suffix": true,
|
||||
"no-conflicting-lifecycle": true,
|
||||
"no-host-metadata-property": true,
|
||||
"no-input-rename": true,
|
||||
"no-inputs-metadata-property": true,
|
||||
"no-output-native": true,
|
||||
"no-output-on-prefix": true,
|
||||
"no-output-rename": true,
|
||||
"no-outputs-metadata-property": true,
|
||||
"template-banana-in-box": true,
|
||||
"template-no-negated-async": true,
|
||||
"use-lifecycle-interface": true,
|
||||
"use-pipe-transform-interface": true,
|
||||
"directive-selector": [
|
||||
true,
|
||||
"attribute",
|
||||
"app",
|
||||
"camelCase"
|
||||
],
|
||||
"component-selector": [
|
||||
true,
|
||||
"element",
|
||||
"app",
|
||||
"kebab-case"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
.eslintcache
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
# Getting Started with Create React App
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
|
||||
## Available Scripts
|
||||
|
||||
In the project directory, you can run:
|
||||
|
||||
### `npm start`
|
||||
|
||||
Runs the app in the development mode.\
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
|
||||
|
||||
The page will reload if you make edits.\
|
||||
You will also see any lint errors in the console.
|
||||
|
||||
### `npm test`
|
||||
|
||||
Launches the test runner in the interactive watch mode.\
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
|
||||
### `npm run build`
|
||||
|
||||
Builds the app for production to the `build` folder.\
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
|
||||
The build is minified and the filenames include the hashes.\
|
||||
Your app is ready to be deployed!
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
|
||||
### `npm run eject`
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
|
||||
|
||||
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
|
||||
|
||||
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
|
||||
|
||||
## Learn More
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
|
||||
### Code Splitting
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
||||
|
||||
### Analyzing the Bundle Size
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
||||
|
||||
### Making a Progressive Web App
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
||||
|
||||
### Advanced Configuration
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
||||
|
||||
### Deployment
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
||||
|
||||
### `npm run build` fails to minify
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,46 @@
|
|||
{
|
||||
"name": "frontend-react",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@testing-library/jest-dom": "^5.11.8",
|
||||
"@testing-library/react": "^11.2.2",
|
||||
"@testing-library/user-event": "^12.6.0",
|
||||
"bulma": "^0.9.1",
|
||||
"classnames": "^2.2.6",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-intl": "^5.10.9",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "4.0.1",
|
||||
"web-vitals": "^0.2.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"http-proxy-middleware": "^1.0.6",
|
||||
"node-sass": "^4.14.1"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
import './App.css';
|
||||
import React from 'react';
|
||||
import {
|
||||
BrowserRouter as Router,
|
||||
Switch,
|
||||
Route, Link
|
||||
} from 'react-router-dom';
|
||||
import GlobalContext from './GlobalContext';
|
||||
import PeopleIndex from "./views/People/PeopleIndex";
|
||||
import PeopleAdd from "./views/People/PeopleAdd";
|
||||
import PeopleEdit from "./views/People/PeopleEdit";
|
||||
import {PeopleService} from "./views/People/PeopleService";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<GlobalContext.Provider value={{peopleService: new PeopleService()}}>
|
||||
<div>
|
||||
<Router>
|
||||
<nav className="navbar" role="navigation" aria-label="main navigation">
|
||||
<div className="navbar-brand">
|
||||
<a className="navbar-item" href="/">
|
||||
<h2 id="logo" className="is-uppercase bold" i18n="app-people-management-limited-label">
|
||||
PeopleIndex management limited
|
||||
</h2>
|
||||
</a>
|
||||
|
||||
<a href="#logo" role="button" className="navbar-burger" aria-label="menu"
|
||||
aria-expanded="false"
|
||||
data-target="navbarBasicExample">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="navbarBasicExample" className="navbar-menu">
|
||||
<div className="navbar-start">
|
||||
<Link className="navbar-item" to="/">
|
||||
Home
|
||||
</Link>
|
||||
|
||||
<Link className="navbar-item" to="/people/add">
|
||||
Add person
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="navbar-end">
|
||||
<div className="navbar-item">
|
||||
<div className="buttons">
|
||||
<a href="#logo" className="button is-primary">
|
||||
<strong>Sign up</strong>
|
||||
</a>
|
||||
<a href="#logo" className="button is-light">
|
||||
<strong>Log in</strong>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<Switch>
|
||||
<Route path="/people/" exact={true}>
|
||||
<PeopleIndex/>
|
||||
</Route>
|
||||
<Route path="/people/add" exact={true}>
|
||||
<PeopleAdd/>
|
||||
</Route>
|
||||
<Route path="/people/edit/:personId" exact={true} children={<PeopleEdit/>}/>
|
||||
<Route path="/" exact={true}>
|
||||
<PeopleIndex/>
|
||||
</Route>
|
||||
<Route>
|
||||
404 page
|
||||
</Route>
|
||||
</Switch>
|
||||
</Router>
|
||||
</div>
|
||||
</GlobalContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { render, screen } from '@testing-library/react';
|
||||
import App from './App';
|
||||
|
||||
test('renders learn react link', () => {
|
||||
render(<App />);
|
||||
const linkElement = screen.getByText(/learn react/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
});
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import {createContext} from "react";
|
||||
|
||||
export default createContext(null);
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.getElementById('root')
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
// to log results (for example: reportWebVitals(console.log))
|
||||
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
||||
reportWebVitals();
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
|
|
@ -0,0 +1,13 @@
|
|||
const reportWebVitals = onPerfEntry => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
getLCP(onPerfEntry);
|
||||
getTTFB(onPerfEntry);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default reportWebVitals;
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
const {createProxyMiddleware} = require('http-proxy-middleware');
|
||||
|
||||
module.exports = app => {
|
||||
app.use('/api', createProxyMiddleware({
|
||||
target: 'http://localhost:8123',
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
"^/api": ""
|
||||
},
|
||||
logLeve: "debug",
|
||||
secure: false
|
||||
}));
|
||||
};
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import '@testing-library/jest-dom';
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
export function isValidEmail(s) {
|
||||
return !s.match(/^([a-zA-Z0-9_\-.]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,5})$/)
|
||||
? {invalidEmail: true}
|
||||
: null;
|
||||
}
|
||||
|
||||
export function validateForm(validators, form) {
|
||||
let errors = {};
|
||||
for (let fieldName of Object.keys(validators)) {
|
||||
const fieldValidators = validators[fieldName];
|
||||
for (let fieldValidator of fieldValidators) {
|
||||
let fieldErrors = fieldValidator(form[fieldName]);
|
||||
if (fieldErrors) {
|
||||
errors[fieldName] = fieldErrors;
|
||||
} else {
|
||||
delete errors[fieldName];
|
||||
}
|
||||
}
|
||||
}
|
||||
return errors;
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import {PeopleForm} from "./PeopleForm";
|
||||
|
||||
export default function PeopleAdd() {
|
||||
return (<div>
|
||||
<PeopleForm/>
|
||||
</div>)
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import {useParams} from 'react-router-dom';
|
||||
import {PeopleForm} from "./PeopleForm";
|
||||
|
||||
export default function PeopleEdit() {
|
||||
let {personId} = useParams();
|
||||
return (<div>
|
||||
<div className="container">
|
||||
<PeopleForm personId={personId}/>
|
||||
</div>
|
||||
</div>)
|
||||
};
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
import {useContext, useEffect, useState} from "react";
|
||||
import {useHistory} from 'react-router-dom';
|
||||
import {isValidEmail, validateForm} from "../../utils/validators";
|
||||
import GlobalContext from "../../GlobalContext";
|
||||
import classNames from 'classnames';
|
||||
|
||||
const personValidators = {
|
||||
email: [isValidEmail]
|
||||
};
|
||||
|
||||
export function PeopleForm(params) {
|
||||
const {personId} = params;
|
||||
const [formData, setFormData] = useState({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
email: '',
|
||||
status: 0
|
||||
});
|
||||
|
||||
const history = useHistory();
|
||||
const {peopleService} = useContext(GlobalContext);
|
||||
let [errors, setErrors] = useState(validateForm(personValidators, formData));
|
||||
let [personNotAvailable, setPersonNotAvailable] = useState(true);
|
||||
let [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
// fetching person data
|
||||
peopleService.getPersonById(personId)
|
||||
.then(person => {
|
||||
if (person) {
|
||||
setFormData(person);
|
||||
setErrors(validateForm(personValidators, person));
|
||||
setPersonNotAvailable(false);
|
||||
setLoading(false);
|
||||
} else {
|
||||
console.log(`No person with id: ${personId}`);
|
||||
setLoading(false);
|
||||
setPersonNotAvailable(true);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('Got error', error);
|
||||
setPersonNotAvailable(true);
|
||||
setLoading(false);
|
||||
});
|
||||
|
||||
}, [personId, peopleService]);
|
||||
|
||||
function submitPerson() {
|
||||
if (errors && Object.keys(errors).length > 0) {
|
||||
console.log('Errors in form, quiting...');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Submitting data', formData);
|
||||
|
||||
if (!personId) {
|
||||
peopleService.createPerson(formData)
|
||||
.then(person => {
|
||||
console.log(`Created person with id ${person.id}`, person);
|
||||
history.push('/people');
|
||||
}).catch(error => {
|
||||
console.log('Person creation failed with error', error);
|
||||
});
|
||||
} else {
|
||||
peopleService.updatePerson(personId, formData)
|
||||
.then(person => {
|
||||
console.log(`Updated person with id ${person.id}`, person);
|
||||
history.push('/people');
|
||||
}).catch(error => {
|
||||
console.log('Person update failed with error', error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function onInputChange(e) {
|
||||
const fieldName = e.target.name;
|
||||
formData[fieldName] = e.target.value;
|
||||
setFormData(formData);
|
||||
setErrors(validateForm(personValidators, formData));
|
||||
}
|
||||
|
||||
return (loading
|
||||
? <div className="loader"/>
|
||||
: (personNotAvailable && personId)
|
||||
? <div>Sorry, the person with id {personId} is not available</div>
|
||||
: <form>
|
||||
<div className="field is-horizontal">
|
||||
<div className="field-label is-medium">
|
||||
<label htmlFor="firstName" className="label">First name</label>
|
||||
</div>
|
||||
<div className="field-body">
|
||||
<div className="field">
|
||||
<div className="control">
|
||||
<input
|
||||
id="firstName"
|
||||
name="firstName"
|
||||
type="text"
|
||||
className={classNames("input", {'is-danger': errors.firstName})}
|
||||
placeholder="First name"
|
||||
value={formData?.firstName}
|
||||
onInput={onInputChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field is-horizontal">
|
||||
<div className="field-label is-medium">
|
||||
<label htmlFor="lastName" className="label">Last name</label>
|
||||
</div>
|
||||
<div className="field-body">
|
||||
<div className="field">
|
||||
<div className="control">
|
||||
<input
|
||||
id="lastName"
|
||||
name="lastName"
|
||||
type="text"
|
||||
className={classNames("input", {'is-danger': errors.lastName})}
|
||||
placeholder="Last name"
|
||||
value={formData?.lastName}
|
||||
onInput={onInputChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field is-horizontal">
|
||||
<div className="field-label is-medium">
|
||||
<label htmlFor="email" className="label">E-mail</label>
|
||||
</div>
|
||||
<div className="field-body">
|
||||
<div className="field">
|
||||
<div className="control">
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="text"
|
||||
className={classNames("input", {'is-danger': errors.email})}
|
||||
placeholder="E-mail"
|
||||
value={formData?.email}
|
||||
onInput={onInputChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field is-horizontal">
|
||||
<div className="field-label is-medium">
|
||||
<label htmlFor="status" className="label">Status</label>
|
||||
</div>
|
||||
<div className="field-body">
|
||||
<div className="field">
|
||||
<div className="control">
|
||||
<div className="select is-fullwidth">
|
||||
<select
|
||||
id="status"
|
||||
name="status"
|
||||
className={classNames("input", {'is-danger': errors.status})}
|
||||
value={formData?.status}
|
||||
onInput={onInputChange}>
|
||||
<option value="0">Active</option>
|
||||
<option value="1">Inactive</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field">
|
||||
<div className="control">
|
||||
<button type="button" className="button is-primary" onClick={() => submitPerson()}>Submit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>)
|
||||
};
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import "bulma";
|
||||
import {useContext, useEffect, useState} from "react";
|
||||
import {useHistory} from 'react-router-dom';
|
||||
import GlobalContext from "../../GlobalContext";
|
||||
|
||||
export default function PeopleIndex() {
|
||||
const {peopleService} = useContext(GlobalContext);
|
||||
const [people, setPeople] = useState([]);
|
||||
const history = useHistory();
|
||||
useEffect(() => {
|
||||
peopleService.getAllPeople()
|
||||
.then(people => {
|
||||
setPeople(people);
|
||||
});
|
||||
}, [peopleService]);
|
||||
|
||||
function routeToPersonEdit(id) {
|
||||
history.push(`/people/edit/${id}`);
|
||||
}
|
||||
|
||||
return (<div className="container">
|
||||
<table className="table is-striped is-fullwidth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Id</th>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>E-mail</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{people.map(it =>
|
||||
<tr onDoubleClick={() => routeToPersonEdit(it.id)} key={it.id}>
|
||||
<td>{it.id}</td>
|
||||
<td>{it.firstName}</td>
|
||||
<td>{it.lastName}</td>
|
||||
<td>{it.email}</td>
|
||||
<td>{it.status === 0 ? 'Active' : 'Inactive'}</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>)
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
const CONTENT_TYPE_HEADERS = {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json'
|
||||
};
|
||||
|
||||
export class PeopleService {
|
||||
getAllPeople() {
|
||||
return fetch('/api/people', {
|
||||
headers: {...CONTENT_TYPE_HEADERS}
|
||||
}).then(resp => {
|
||||
if (resp.status !== 200) {
|
||||
return Promise.reject(`Got invalid response status code: ${resp.status}`);
|
||||
} else {
|
||||
return resp.json();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getPersonById(personId) {
|
||||
return fetch(`/api/people/${personId}`, {
|
||||
headers: {...CONTENT_TYPE_HEADERS}
|
||||
}).then(resp => {
|
||||
if (resp.status === 200) {
|
||||
return resp.json();
|
||||
} else if (resp.status === 404) {
|
||||
return Promise.resolve(null);
|
||||
} else {
|
||||
return Promise.reject(`Got invalid response status code: ${resp.status}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
createPerson(person) {
|
||||
return fetch('/api/people', {
|
||||
headers: {...CONTENT_TYPE_HEADERS},
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(person)
|
||||
}).then(resp => {
|
||||
if (resp.status === 200) {
|
||||
return resp.json();
|
||||
} else {
|
||||
return Promise.reject(`Got while invalid response status code: ${resp.status}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updatePerson(personId, personData) {
|
||||
return fetch(`/api/people/${personId}`, {
|
||||
headers: {...CONTENT_TYPE_HEADERS},
|
||||
method: 'POST',
|
||||
body: JSON.stringify(personData)
|
||||
}).then(resp => {
|
||||
if (resp.status === 200) {
|
||||
return resp.json();
|
||||
} else {
|
||||
return Promise.reject(`Got while invalid response status code: ${resp.status}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue