This commit is contained in:
Damillora 2021-03-29 14:08:26 +07:00
parent c6a30c0573
commit e04d91587b
11 changed files with 630 additions and 7 deletions

14
.vscode/launch.json vendored
View File

@ -2,13 +2,19 @@
"version": "0.2.0", "version": "0.2.0",
"configurations": [ "configurations": [
{ {
"command": "yarn dev", "type": "node",
"name": "Next.js",
"request": "launch", "request": "launch",
"name": "Next",
"runtimeExecutable": "yarn",
"cwd": "${workspaceFolder}/Next", "cwd": "${workspaceFolder}/Next",
"type": "node-terminal" "runtimeArgs": [
"dev"
],
"port": 9229,
"skipFiles": [
"<node_internals>/**"
]
}, },
{ {
"name": "TestAppRuna", "name": "TestAppRuna",
"type": "coreclr", "type": "coreclr",

View File

@ -664,8 +664,8 @@ export interface CartDeleteModel {
export interface CustomerListItem { export interface CustomerListItem {
customerID: string; customerID: string;
name?: string | undefined; name: string;
email?: string | undefined; email: string;
} }
export interface CustomerCreateUpdateModel { export interface CustomerCreateUpdateModel {
@ -675,7 +675,7 @@ export interface CustomerCreateUpdateModel {
export interface ProductListItem { export interface ProductListItem {
productID: string; productID: string;
name?: string | undefined; name: string;
price: number; price: number;
} }

View File

@ -0,0 +1,6 @@
export default function Errors({ errors }) {
return errors.map(x => (
<li>{x}</li>
));
}

View File

@ -0,0 +1,47 @@
import { faChevronUp } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React, { useEffect, useState } from "react";
export default function ProductForm({ name, price, onNameChange, onPriceChange, onSubmit, busy }) {
let [form,setForm] = useState({
name: "",
value: "",
})
let [formBusy,setFormBusy] = useState(false);
let nameChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
name = e.target.value;
onNameChange(e.target.value);
}
let priceChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
price = e.target.value;
onPriceChange(e.target.value);
}
let submit = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault()
onSubmit();
}
formBusy = busy;
useEffect(() => {
setFormBusy(busy);
},[busy]);
return (
<form>
<fieldset disabled={formBusy}>
<div className="mb-3">
<label htmlFor="name">Name</label>
<input className="form-control" id="name" value={name} onChange={nameChanged}></input>
</div>
<div className="mb-3">
<label htmlFor="email">Price</label>
<input type="number" className="form-control" id="price" value={price} onChange={priceChanged}></input>
</div>
<div className="mb-3">
<button type="submit" className="btn btn-primary" onClick={submit}>
<FontAwesomeIcon icon={faChevronUp}/> Submit
</button>
</div>
</fieldset>
</form>
);
}

View File

@ -0,0 +1,23 @@
import { ProductListItem } from "../APIClient";
export interface ProductDataProps {
productID: string,
}
export interface DeleteProductProps extends ProductDataProps {
onDelete: (val) => void
}
export interface ProductListRowsProps {
products: ProductListItem[],
onDelete: (val) => void,
}
export interface ProductState {
product: ProductListItem[]
}
export interface ProductFormState {
form: {
name: string,
price: number,
},
errors: string[],
busy: boolean,
}

View File

@ -0,0 +1,141 @@
import React, { ChangeEvent } from 'react';
import { withRouter, NextRouter } from 'next/router';
import { Layout } from '../../shared/Layout';
import { CustomerClient } from '../../../APIClient';
import Swal from 'sweetalert2';
function Errors({ errors }) {
return errors.map(x => (
<li>{x}</li>
));
}
class EditCustomer extends React.Component<{
router: NextRouter,
}, {
form: {
name: string,
email: string,
},
errors: string[],
busy: boolean,
}> {
constructor(props) {
super(props)
const router = props.router;
const { id } = router.query!;
this.state = {
form: {
name: "",
email: "",
},
errors: [],
busy: false,
}
}
async componentDidMount() {
const client = new CustomerClient();
console.log(this.props.router)
if (this.props.router.query['id']) {
let data = await client.get(this.props.router.query['id']);
this.setState({
form: {
name: data.name,
email: data.email,
}
});
}
}
onNameChanged(e: ChangeEvent<HTMLInputElement>) {
this.setState({
form: {
name: e.target.value,
email: this.state.form.email,
}
});
}
onEmailChanged(e: ChangeEvent<HTMLInputElement>) {
this.setState({
form: {
name: this.state.form.name,
email: e.target.value
}
});
}
async validate() {
let errors: string[] = [];
if (!this.state.form.name) {
errors.push("Name required");
}
if (!this.state.form.email) {
errors.push("Email required");
}
await new Promise((resolve) => {
this.setState({
errors
}, () => resolve(undefined));
})
return errors.length == 0;
}
async onSubmit(e) {
e.preventDefault();
if (await this.validate()) {
await new Promise((resolve) => {
this.setState({
busy: true,
}, () => resolve(undefined));
})
try {
const form = this.state.form;
const client = new CustomerClient();
await client.put(this.props.router.query.id, {
name: form.name,
email: form.email,
})
Swal.fire({
title: "Submitted!",
text: "Customer is now in database",
})
} catch (error) {
} finally {
await new Promise((resolve) => {
this.setState({
busy: false,
}, () => resolve(undefined));
})
}
}
}
render() {
return (
<form>
<fieldset disabled={this.state.busy}>
<div className="mb-3">
<label htmlFor="name">Name</label>
<input className="form-control" id="name" value={this.state.form.name} onChange={this.onNameChanged.bind(this)}></input>
</div>
<div className="mb-3">
<label htmlFor="email">Email</label>
<input className="form-control" id="email" value={this.state.form.email} onChange={this.onEmailChanged.bind(this)}></input>
</div>
<div className="mb-3">
<button type="submit" className="btn btn-primary" onClick={this.onSubmit.bind(this)}>Edit</button>
</div>
<li>
<Errors errors={this.state.errors}></Errors>
</li>
</fieldset>
</form>
)
}
}
export default function EditCustomerPage() {
let EditCustomerMain = withRouter(EditCustomer);
return (
<Layout title="Edit customer">
<EditCustomerMain></EditCustomerMain>
</Layout>
)
}

View File

@ -35,6 +35,7 @@ const CustomerListItemRows: React.FunctionComponent<{
let rows = customers.map(x => { let rows = customers.map(x => {
return ( return (
<tr> <tr>
<td>{x.customerID}</td>
<td>{x.name}</td> <td>{x.name}</td>
<td>{x.email}</td> <td>{x.email}</td>
<td><DeleteCustomerButton customerID={x.customerID} onDelete={onDelete}></DeleteCustomerButton></td> <td><DeleteCustomerButton customerID={x.customerID} onDelete={onDelete}></DeleteCustomerButton></td>
@ -87,6 +88,7 @@ class Customer extends React.Component<{}, { customer: CustomerListItem[] }> {
return ( return (
<table className="table table-hover table-striped table-sm"> <table className="table table-hover table-striped table-sm">
<tr> <tr>
<th>ID</th>
<th>Name</th> <th>Name</th>
<th>Email</th> <th>Email</th>
</tr> </tr>

View File

@ -0,0 +1,116 @@
import React, { ChangeEvent } from 'react';
import { Layout } from '../shared/Layout';
import { ProductClient } from '../../APIClient';
import Swal from 'sweetalert2';
import ProductForm from '../../components/ProductForm';
import Errors from '../../components/Errors';
import Link from 'next/link';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
import { ProductFormState } from '../../interfaces/product';
class CreateProduct extends React.Component<{}, ProductFormState> {
constructor(props) {
super(props)
this.state = {
form: {
name: "",
price: 0,
},
errors: [],
busy: false,
}
}
onNameChanged(newName) {
this.setState({
form: {
name: newName,
price: this.state.form.price,
}
});
}
onPriceChanged(newPrice) {
this.setState({
form: {
name: this.state.form.name,
price: newPrice
}
});
}
async validate() {
let errors: string[] = [];
if (!this.state.form.name) {
errors.push("Name required");
}
if (!this.state.form.price) {
errors.push("Price required");
}
await new Promise((resolve) => {
this.setState({
errors
}, () => resolve(undefined));
})
return errors.length == 0;
}
async onSubmit() {
if (await this.validate()) {
await new Promise((resolve) => {
this.setState({
busy: true,
}, () => resolve(undefined));
})
try {
const form = this.state.form;
const client = new ProductClient();
await client.post({
name: form.name,
price: form.price,
})
Swal.fire({
title: "Submitted!",
text: "Product is now in database",
})
} catch (error) {
} finally {
await new Promise((resolve) => {
this.setState({
busy: false,
}, () => resolve(undefined));
})
}
}
}
render() {
return (
<div className="container mx-auto">
<h1>Create Product</h1>
<Link href="/product/">
<a>
<FontAwesomeIcon icon={faArrowLeft} /> Return to index
</a>
</Link>
<ProductForm
name={this.state.form.name}
price={this.state.form.price}
busy={this.state.busy}
onNameChange={this.onNameChanged.bind(this)}
onPriceChange={this.onPriceChanged.bind(this)}
onSubmit={this.onSubmit.bind(this)} />
<ul>
<Errors errors={this.state.errors}></Errors>
</ul>
</div>
)
}
}
export default function CreateProductPage() {
return (
<Layout title="Create product">
<CreateProduct></CreateProduct>
</Layout>
)
}

View File

@ -0,0 +1,152 @@
import React, { ChangeEvent } from 'react';
import { withRouter, NextRouter, useRouter } from 'next/router';
import { Layout } from '../../shared/Layout';
import { ProductClient } from '../../../APIClient';
import Swal from 'sweetalert2';
import ProductForm from '../../../components/ProductForm';
import Link from 'next/link';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
import { ProductDataProps, ProductFormState } from '../../../interfaces/product';
function Errors({ errors }) {
return errors.map(x => (
<li>{x}</li>
));
}
class EditProduct extends React.Component<ProductDataProps,ProductFormState> {
constructor(props) {
super(props)
const id = props.productID;
this.state = {
form: {
name: "",
price: 0,
},
errors: [],
busy: false,
}
}
async componentDidMount() {
const client = new ProductClient();
await new Promise((resolve) => {
this.setState({
busy: true,
}, () => resolve(undefined));
})
if (this.props.productID) {
let data = await client.get(this.props.productID);
await new Promise((resolve) => {
this.setState({
busy: false,
}, () => resolve(undefined));
})
this.setState({
form: {
name: data.name,
price: data.price,
}
});
}
}
onNameChanged(newName: string) {
this.setState({
form: {
name: newName,
price: this.state.form.price,
}
});
}
onPriceChanged(newPrice: number) {
this.setState({
form: {
name: this.state.form.name,
price: newPrice,
}
});
}
async validate() {
let errors: string[] = [];
if (!this.state.form.name) {
errors.push("Name required");
}
if (!this.state.form.price) {
errors.push("Email required");
}
await new Promise((resolve) => {
this.setState({
errors
}, () => resolve(undefined));
})
return errors.length == 0;
}
async onSubmit() {
if (await this.validate()) {
await new Promise((resolve) => {
this.setState({
busy: true,
}, () => resolve(undefined));
})
try {
const form = this.state.form;
const client = new ProductClient();
await client.put(this.props.productID, {
name: form.name,
price: form.price,
})
Swal.fire({
title: "Submitted!",
text: "Product is modified in database",
})
} catch (error) {
} finally {
await new Promise((resolve) => {
this.setState({
busy: false,
}, () => resolve(undefined));
})
}
}
}
render() {
if (typeof this.props.productID != "string") {
return (
<div>
</div>
)
}
return (
<div className="container mx-auto">
<h1>Edit Product</h1>
<Link href="/product/">
<a>
<FontAwesomeIcon icon={faArrowLeft} /> Return to index
</a>
</Link>
<ProductForm
name={this.state.form.name}
price={this.state.form.price}
busy={this.state.busy}
onNameChange={this.onNameChanged.bind(this)}
onPriceChange={this.onPriceChanged.bind(this)}
onSubmit={this.onSubmit.bind(this)} />
<ul>
<Errors errors={this.state.errors}></Errors>
</ul>
</div>
)
}
}
export default function EditProductPage() {
const router = useRouter();
const id = router.query['id'];
return (
<Layout title="Edit product">
<EditProduct productID={id}></EditProduct>
</Layout>
)
}

View File

@ -0,0 +1,130 @@
import React from 'react';
import axios from 'axios';
import { ProductClient, ProductListItem } from '../../APIClient';
import { Layout } from '../shared/Layout';
import Swal from 'sweetalert2';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faEdit, faTrash } from '@fortawesome/free-solid-svg-icons';
import { useRouter } from 'next/router';
import Link from 'next/link';
import { DeleteProductProps, ProductDataProps, ProductListRowsProps, ProductState } from '../../interfaces/product';
const DeleteProductButton: React.FunctionComponent<DeleteProductProps> = ({ productID, onDelete }) => {
const onClickDelete = async () => {
const result = await Swal.fire({
title: 'Confirm delete?',
text: 'Delete product?',
icon: 'warning',
showCancelButton: true,
})
if (result.isConfirmed) {
onDelete(productID);
}
}
return (
<button className="btn btn-danger btn-sm" onClick={onClickDelete}>
<FontAwesomeIcon icon={faTrash} />
</button>
);
}
const EditProductButton: React.FunctionComponent<ProductDataProps> = ({ productID }) => {
const router = useRouter();
return (
<Link href={`/product/edit/${productID}`}>
<a className="btn btn-warning btn-sm">
<FontAwesomeIcon icon={faEdit} />
</a>
</Link>
);
}
const ProductListItemRows: React.FunctionComponent<ProductListRowsProps> = ({ products, onDelete }) => {
let rows = products.map(x => {
return (
<tr>
<td>{x.productID}</td>
<td>{x.name}</td>
<td>{x.price}</td>
<td><EditProductButton productID={x.productID}></EditProductButton></td>
<td><DeleteProductButton productID={x.productID} onDelete={onDelete}></DeleteProductButton></td>
</tr>
);
})
return (
<tbody>
{rows}
</tbody>
)
}
class Product extends React.Component<{},ProductState> {
constructor(props) {
super(props);
this.state = {
product: [],
}
}
async componentDidMount() {
this.getProducts();
}
async getProducts() {
try {
const client = new ProductClient();
let data = await client.getAll();
console.log(data);
this.setState({
product: data
});
} catch (error) {
this.setState({
product: [],
});
}
}
async deleteProduct(productId) {
try {
const client = new ProductClient();
await client.delete(productId);
// Remove the product in the state by filter()ing it
let product = this.state.product.filter(x => x.productID != productId);
this.setState({
product
})
Swal.fire({
title: "Deleted!",
text: "Product is deleted in database",
})
} catch (error) {
alert(error);
}
}
render() {
return (
<div className="container px-4 mx-auto">
<h1>Products</h1>
<table className="table table-hover table-striped table-sm">
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<ProductListItemRows products={this.state.product} onDelete={this.deleteProduct.bind(this)}>
</ProductListItemRows>
</table>
<Link href="/product/create">
<a className="btn btn-primary btn-large">
Create
</a>
</Link>
</div>
);
}
}
export default function ProductPage() {
return (
<Layout title="Products">
<Product></Product>
</Layout>
)
}

Binary file not shown.