Compare commits
6 Commits
2be15b57e8
...
297a732676
Author | SHA1 | Date |
---|---|---|
Damillora | 297a732676 | |
Damillora | e04d91587b | |
Damillora | c6a30c0573 | |
Damillora | 5301be7d17 | |
Damillora | 40fb126d37 | |
Damillora | 74b4a383b4 |
|
@ -0,0 +1,61 @@
|
||||||
|
{
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"type": "node",
|
||||||
|
"request": "launch",
|
||||||
|
"name": "Next",
|
||||||
|
"runtimeExecutable": "yarn",
|
||||||
|
"cwd": "${workspaceFolder}/Next",
|
||||||
|
"runtimeArgs": [
|
||||||
|
"dev"
|
||||||
|
],
|
||||||
|
"port": 9229,
|
||||||
|
"skipFiles": [
|
||||||
|
"<node_internals>/**"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "TestAppRuna",
|
||||||
|
"type": "coreclr",
|
||||||
|
"request": "launch",
|
||||||
|
"preLaunchTask": "build",
|
||||||
|
"program": "${workspaceFolder}/TestAppRuna/bin/Debug/net5.0/TestAppRuna.dll",
|
||||||
|
"args": [],
|
||||||
|
"cwd": "${workspaceFolder}/TestAppRuna",
|
||||||
|
"stopAtEntry": false,
|
||||||
|
"serverReadyAction": {
|
||||||
|
"action": "openExternally",
|
||||||
|
"pattern": "\\bNow listening on:\\s+(https?://\\S+)"
|
||||||
|
},
|
||||||
|
"env": {
|
||||||
|
"ASPNETCORE_ENVIRONMENT": "Development"
|
||||||
|
},
|
||||||
|
"sourceFileMap": {
|
||||||
|
"/Views": "${workspaceFolder}/TestAppRuna/Views"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// Use IntelliSense to find out which attributes exist for C# debugging
|
||||||
|
// Use hover for the description of the existing attributes
|
||||||
|
// For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
|
||||||
|
"name": "TestAppRuna.TokenGenerator",
|
||||||
|
"type": "coreclr",
|
||||||
|
"request": "launch",
|
||||||
|
"preLaunchTask": "build",
|
||||||
|
// If you have changed target frameworks, make sure to update the program path.
|
||||||
|
"program": "${workspaceFolder}/TestAppRuna.TokenGenerator/bin/Debug/net5.0/TestAppRuna.TokenGenerator.dll",
|
||||||
|
"args": [],
|
||||||
|
"cwd": "${workspaceFolder}/TestAppRuna.TokenGenerator",
|
||||||
|
// For more information about the 'console' field, see https://aka.ms/VSCode-CS-LaunchJson-Console
|
||||||
|
"console": "internalConsole",
|
||||||
|
"stopAtEntry": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": ".NET Core Attach",
|
||||||
|
"type": "coreclr",
|
||||||
|
"request": "attach",
|
||||||
|
"processId": "${command:pickProcess}"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
|
@ -0,0 +1,42 @@
|
||||||
|
{
|
||||||
|
"version": "2.0.0",
|
||||||
|
"tasks": [
|
||||||
|
{
|
||||||
|
"label": "build",
|
||||||
|
"command": "dotnet",
|
||||||
|
"type": "process",
|
||||||
|
"args": [
|
||||||
|
"build",
|
||||||
|
"${workspaceFolder}/TestAppRuna.TokenGenerator/TestAppRuna.TokenGenerator.csproj",
|
||||||
|
"/property:GenerateFullPaths=true",
|
||||||
|
"/consoleloggerparameters:NoSummary"
|
||||||
|
],
|
||||||
|
"problemMatcher": "$msCompile"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "publish",
|
||||||
|
"command": "dotnet",
|
||||||
|
"type": "process",
|
||||||
|
"args": [
|
||||||
|
"publish",
|
||||||
|
"${workspaceFolder}/TestAppRuna.TokenGenerator/TestAppRuna.TokenGenerator.csproj",
|
||||||
|
"/property:GenerateFullPaths=true",
|
||||||
|
"/consoleloggerparameters:NoSummary"
|
||||||
|
],
|
||||||
|
"problemMatcher": "$msCompile"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "watch",
|
||||||
|
"command": "dotnet",
|
||||||
|
"type": "process",
|
||||||
|
"args": [
|
||||||
|
"watch",
|
||||||
|
"run",
|
||||||
|
"${workspaceFolder}/TestAppRuna.TokenGenerator/TestAppRuna.TokenGenerator.csproj",
|
||||||
|
"/property:GenerateFullPaths=true",
|
||||||
|
"/consoleloggerparameters:NoSummary"
|
||||||
|
],
|
||||||
|
"problemMatcher": "$msCompile"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
|
@ -0,0 +1,716 @@
|
||||||
|
/* tslint:disable */
|
||||||
|
/* eslint-disable */
|
||||||
|
//----------------------
|
||||||
|
// <auto-generated>
|
||||||
|
// Generated using the NSwag toolchain v13.10.8.0 (NJsonSchema v10.3.11.0 (Newtonsoft.Json v11.0.0.0)) (http://NSwag.org)
|
||||||
|
// </auto-generated>
|
||||||
|
//----------------------
|
||||||
|
// ReSharper disable InconsistentNaming
|
||||||
|
|
||||||
|
export class CartClient {
|
||||||
|
private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
|
||||||
|
private baseUrl: string;
|
||||||
|
protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;
|
||||||
|
|
||||||
|
constructor(baseUrl?: string, http?: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> }) {
|
||||||
|
this.http = http ? http : <any>window;
|
||||||
|
this.baseUrl = baseUrl !== undefined && baseUrl !== null ? baseUrl : "http://localhost:5000";
|
||||||
|
}
|
||||||
|
|
||||||
|
get(): Promise<CartCustomerListItem[]> {
|
||||||
|
let url_ = this.baseUrl + "/api/Cart";
|
||||||
|
url_ = url_.replace(/[?&]$/, "");
|
||||||
|
|
||||||
|
let options_ = <RequestInit>{
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Accept": "application/json"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||||
|
return this.processGet(_response);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
protected processGet(response: Response): Promise<CartCustomerListItem[]> {
|
||||||
|
const status = response.status;
|
||||||
|
let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
|
||||||
|
if (status === 200) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
let result200: any = null;
|
||||||
|
result200 = _responseText === "" ? null : <CartCustomerListItem[]>JSON.parse(_responseText, this.jsonParseReviver);
|
||||||
|
return result200;
|
||||||
|
});
|
||||||
|
} else if (status !== 200 && status !== 204) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
return throwException("An unexpected server error occurred.", status, _responseText, _headers);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return Promise.resolve<CartCustomerListItem[]>(<any>null);
|
||||||
|
}
|
||||||
|
|
||||||
|
post(model: CartCreateUpdateModel): Promise<boolean> {
|
||||||
|
let url_ = this.baseUrl + "/api/Cart";
|
||||||
|
url_ = url_.replace(/[?&]$/, "");
|
||||||
|
|
||||||
|
const content_ = JSON.stringify(model);
|
||||||
|
|
||||||
|
let options_ = <RequestInit>{
|
||||||
|
body: content_,
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
"Accept": "application/json"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||||
|
return this.processPost(_response);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
protected processPost(response: Response): Promise<boolean> {
|
||||||
|
const status = response.status;
|
||||||
|
let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
|
||||||
|
if (status === 200) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
let result200: any = null;
|
||||||
|
result200 = _responseText === "" ? null : <boolean>JSON.parse(_responseText, this.jsonParseReviver);
|
||||||
|
return result200;
|
||||||
|
});
|
||||||
|
} else if (status !== 200 && status !== 204) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
return throwException("An unexpected server error occurred.", status, _responseText, _headers);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return Promise.resolve<boolean>(<any>null);
|
||||||
|
}
|
||||||
|
|
||||||
|
getFromCustomer(customerId: string): Promise<CartListItem[]> {
|
||||||
|
let url_ = this.baseUrl + "/api/Cart/{customerId}";
|
||||||
|
if (customerId === undefined || customerId === null)
|
||||||
|
throw new Error("The parameter 'customerId' must be defined.");
|
||||||
|
url_ = url_.replace("{customerId}", encodeURIComponent("" + customerId));
|
||||||
|
url_ = url_.replace(/[?&]$/, "");
|
||||||
|
|
||||||
|
let options_ = <RequestInit>{
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Accept": "application/json"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||||
|
return this.processGetFromCustomer(_response);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
protected processGetFromCustomer(response: Response): Promise<CartListItem[]> {
|
||||||
|
const status = response.status;
|
||||||
|
let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
|
||||||
|
if (status === 200) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
let result200: any = null;
|
||||||
|
result200 = _responseText === "" ? null : <CartListItem[]>JSON.parse(_responseText, this.jsonParseReviver);
|
||||||
|
return result200;
|
||||||
|
});
|
||||||
|
} else if (status !== 200 && status !== 204) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
return throwException("An unexpected server error occurred.", status, _responseText, _headers);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return Promise.resolve<CartListItem[]>(<any>null);
|
||||||
|
}
|
||||||
|
|
||||||
|
delete(model: CartDeleteModel): Promise<boolean> {
|
||||||
|
let url_ = this.baseUrl + "/api/Cart/delete";
|
||||||
|
url_ = url_.replace(/[?&]$/, "");
|
||||||
|
|
||||||
|
const content_ = JSON.stringify(model);
|
||||||
|
|
||||||
|
let options_ = <RequestInit>{
|
||||||
|
body: content_,
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
"Accept": "application/json"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||||
|
return this.processDelete(_response);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
protected processDelete(response: Response): Promise<boolean> {
|
||||||
|
const status = response.status;
|
||||||
|
let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
|
||||||
|
if (status === 200) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
let result200: any = null;
|
||||||
|
result200 = _responseText === "" ? null : <boolean>JSON.parse(_responseText, this.jsonParseReviver);
|
||||||
|
return result200;
|
||||||
|
});
|
||||||
|
} else if (status !== 200 && status !== 204) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
return throwException("An unexpected server error occurred.", status, _responseText, _headers);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return Promise.resolve<boolean>(<any>null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class CustomerClient {
|
||||||
|
private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
|
||||||
|
private baseUrl: string;
|
||||||
|
protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;
|
||||||
|
|
||||||
|
constructor(baseUrl?: string, http?: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> }) {
|
||||||
|
this.http = http ? http : <any>window;
|
||||||
|
this.baseUrl = baseUrl !== undefined && baseUrl !== null ? baseUrl : "http://localhost:5000";
|
||||||
|
}
|
||||||
|
|
||||||
|
getAll(): Promise<CustomerListItem[]> {
|
||||||
|
let url_ = this.baseUrl + "/api/Customer";
|
||||||
|
url_ = url_.replace(/[?&]$/, "");
|
||||||
|
|
||||||
|
let options_ = <RequestInit>{
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Accept": "application/json"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||||
|
return this.processGetAll(_response);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
protected processGetAll(response: Response): Promise<CustomerListItem[]> {
|
||||||
|
const status = response.status;
|
||||||
|
let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
|
||||||
|
if (status === 200) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
let result200: any = null;
|
||||||
|
result200 = _responseText === "" ? null : <CustomerListItem[]>JSON.parse(_responseText, this.jsonParseReviver);
|
||||||
|
return result200;
|
||||||
|
});
|
||||||
|
} else if (status !== 200 && status !== 204) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
return throwException("An unexpected server error occurred.", status, _responseText, _headers);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return Promise.resolve<CustomerListItem[]>(<any>null);
|
||||||
|
}
|
||||||
|
|
||||||
|
post(model: CustomerCreateUpdateModel): Promise<string> {
|
||||||
|
let url_ = this.baseUrl + "/api/Customer";
|
||||||
|
url_ = url_.replace(/[?&]$/, "");
|
||||||
|
|
||||||
|
const content_ = JSON.stringify(model);
|
||||||
|
|
||||||
|
let options_ = <RequestInit>{
|
||||||
|
body: content_,
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
"Accept": "application/json"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||||
|
return this.processPost(_response);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
protected processPost(response: Response): Promise<string> {
|
||||||
|
const status = response.status;
|
||||||
|
let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
|
||||||
|
if (status === 200) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
let result200: any = null;
|
||||||
|
result200 = _responseText === "" ? null : <string>JSON.parse(_responseText, this.jsonParseReviver);
|
||||||
|
return result200;
|
||||||
|
});
|
||||||
|
} else if (status !== 200 && status !== 204) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
return throwException("An unexpected server error occurred.", status, _responseText, _headers);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return Promise.resolve<string>(<any>null);
|
||||||
|
}
|
||||||
|
|
||||||
|
get(id: string): Promise<CustomerListItem> {
|
||||||
|
let url_ = this.baseUrl + "/api/Customer/{id}";
|
||||||
|
if (id === undefined || id === null)
|
||||||
|
throw new Error("The parameter 'id' must be defined.");
|
||||||
|
url_ = url_.replace("{id}", encodeURIComponent("" + id));
|
||||||
|
url_ = url_.replace(/[?&]$/, "");
|
||||||
|
|
||||||
|
let options_ = <RequestInit>{
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Accept": "application/json"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||||
|
return this.processGet(_response);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
protected processGet(response: Response): Promise<CustomerListItem> {
|
||||||
|
const status = response.status;
|
||||||
|
let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
|
||||||
|
if (status === 200) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
let result200: any = null;
|
||||||
|
result200 = _responseText === "" ? null : <CustomerListItem>JSON.parse(_responseText, this.jsonParseReviver);
|
||||||
|
return result200;
|
||||||
|
});
|
||||||
|
} else if (status !== 200 && status !== 204) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
return throwException("An unexpected server error occurred.", status, _responseText, _headers);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return Promise.resolve<CustomerListItem>(<any>null);
|
||||||
|
}
|
||||||
|
|
||||||
|
put(id: string, model: CustomerCreateUpdateModel): Promise<string> {
|
||||||
|
let url_ = this.baseUrl + "/api/Customer/{id}";
|
||||||
|
if (id === undefined || id === null)
|
||||||
|
throw new Error("The parameter 'id' must be defined.");
|
||||||
|
url_ = url_.replace("{id}", encodeURIComponent("" + id));
|
||||||
|
url_ = url_.replace(/[?&]$/, "");
|
||||||
|
|
||||||
|
const content_ = JSON.stringify(model);
|
||||||
|
|
||||||
|
let options_ = <RequestInit>{
|
||||||
|
body: content_,
|
||||||
|
method: "PUT",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
"Accept": "application/json"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||||
|
return this.processPut(_response);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
protected processPut(response: Response): Promise<string> {
|
||||||
|
const status = response.status;
|
||||||
|
let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
|
||||||
|
if (status === 200) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
let result200: any = null;
|
||||||
|
result200 = _responseText === "" ? null : <string>JSON.parse(_responseText, this.jsonParseReviver);
|
||||||
|
return result200;
|
||||||
|
});
|
||||||
|
} else if (status !== 200 && status !== 204) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
return throwException("An unexpected server error occurred.", status, _responseText, _headers);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return Promise.resolve<string>(<any>null);
|
||||||
|
}
|
||||||
|
|
||||||
|
delete(id: string): Promise<string> {
|
||||||
|
let url_ = this.baseUrl + "/api/Customer/{id}";
|
||||||
|
if (id === undefined || id === null)
|
||||||
|
throw new Error("The parameter 'id' must be defined.");
|
||||||
|
url_ = url_.replace("{id}", encodeURIComponent("" + id));
|
||||||
|
url_ = url_.replace(/[?&]$/, "");
|
||||||
|
|
||||||
|
let options_ = <RequestInit>{
|
||||||
|
method: "DELETE",
|
||||||
|
headers: {
|
||||||
|
"Accept": "application/json"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||||
|
return this.processDelete(_response);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
protected processDelete(response: Response): Promise<string> {
|
||||||
|
const status = response.status;
|
||||||
|
let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
|
||||||
|
if (status === 200) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
let result200: any = null;
|
||||||
|
result200 = _responseText === "" ? null : <string>JSON.parse(_responseText, this.jsonParseReviver);
|
||||||
|
return result200;
|
||||||
|
});
|
||||||
|
} else if (status !== 200 && status !== 204) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
return throwException("An unexpected server error occurred.", status, _responseText, _headers);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return Promise.resolve<string>(<any>null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class MathClient {
|
||||||
|
private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
|
||||||
|
private baseUrl: string;
|
||||||
|
protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;
|
||||||
|
|
||||||
|
constructor(baseUrl?: string, http?: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> }) {
|
||||||
|
this.http = http ? http : <any>window;
|
||||||
|
this.baseUrl = baseUrl !== undefined && baseUrl !== null ? baseUrl : "http://localhost:5000";
|
||||||
|
}
|
||||||
|
|
||||||
|
get(): Promise<number> {
|
||||||
|
let url_ = this.baseUrl + "/api/Math";
|
||||||
|
url_ = url_.replace(/[?&]$/, "");
|
||||||
|
|
||||||
|
let options_ = <RequestInit>{
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Accept": "application/json"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||||
|
return this.processGet(_response);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
protected processGet(response: Response): Promise<number> {
|
||||||
|
const status = response.status;
|
||||||
|
let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
|
||||||
|
if (status === 200) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
let result200: any = null;
|
||||||
|
result200 = _responseText === "" ? null : <number>JSON.parse(_responseText, this.jsonParseReviver);
|
||||||
|
return result200;
|
||||||
|
});
|
||||||
|
} else if (status !== 200 && status !== 204) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
return throwException("An unexpected server error occurred.", status, _responseText, _headers);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return Promise.resolve<number>(<any>null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class ProductClient {
|
||||||
|
private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
|
||||||
|
private baseUrl: string;
|
||||||
|
protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;
|
||||||
|
|
||||||
|
constructor(baseUrl?: string, http?: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> }) {
|
||||||
|
this.http = http ? http : <any>window;
|
||||||
|
this.baseUrl = baseUrl !== undefined && baseUrl !== null ? baseUrl : "http://localhost:5000";
|
||||||
|
}
|
||||||
|
|
||||||
|
getAll(): Promise<ProductListItem[]> {
|
||||||
|
let url_ = this.baseUrl + "/api/Product";
|
||||||
|
url_ = url_.replace(/[?&]$/, "");
|
||||||
|
|
||||||
|
let options_ = <RequestInit>{
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Accept": "application/json"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||||
|
return this.processGetAll(_response);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
protected processGetAll(response: Response): Promise<ProductListItem[]> {
|
||||||
|
const status = response.status;
|
||||||
|
let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
|
||||||
|
if (status === 200) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
let result200: any = null;
|
||||||
|
result200 = _responseText === "" ? null : <ProductListItem[]>JSON.parse(_responseText, this.jsonParseReviver);
|
||||||
|
return result200;
|
||||||
|
});
|
||||||
|
} else if (status !== 200 && status !== 204) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
return throwException("An unexpected server error occurred.", status, _responseText, _headers);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return Promise.resolve<ProductListItem[]>(<any>null);
|
||||||
|
}
|
||||||
|
|
||||||
|
post(model: ProductCreateUpdateModel): Promise<string> {
|
||||||
|
let url_ = this.baseUrl + "/api/Product";
|
||||||
|
url_ = url_.replace(/[?&]$/, "");
|
||||||
|
|
||||||
|
const content_ = JSON.stringify(model);
|
||||||
|
|
||||||
|
let options_ = <RequestInit>{
|
||||||
|
body: content_,
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
"Accept": "application/json"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||||
|
return this.processPost(_response);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
protected processPost(response: Response): Promise<string> {
|
||||||
|
const status = response.status;
|
||||||
|
let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
|
||||||
|
if (status === 200) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
let result200: any = null;
|
||||||
|
result200 = _responseText === "" ? null : <string>JSON.parse(_responseText, this.jsonParseReviver);
|
||||||
|
return result200;
|
||||||
|
});
|
||||||
|
} else if (status !== 200 && status !== 204) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
return throwException("An unexpected server error occurred.", status, _responseText, _headers);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return Promise.resolve<string>(<any>null);
|
||||||
|
}
|
||||||
|
|
||||||
|
get(id: string): Promise<ProductListItem> {
|
||||||
|
let url_ = this.baseUrl + "/api/Product/{id}";
|
||||||
|
if (id === undefined || id === null)
|
||||||
|
throw new Error("The parameter 'id' must be defined.");
|
||||||
|
url_ = url_.replace("{id}", encodeURIComponent("" + id));
|
||||||
|
url_ = url_.replace(/[?&]$/, "");
|
||||||
|
|
||||||
|
let options_ = <RequestInit>{
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Accept": "application/json"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||||
|
return this.processGet(_response);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
protected processGet(response: Response): Promise<ProductListItem> {
|
||||||
|
const status = response.status;
|
||||||
|
let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
|
||||||
|
if (status === 200) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
let result200: any = null;
|
||||||
|
result200 = _responseText === "" ? null : <ProductListItem>JSON.parse(_responseText, this.jsonParseReviver);
|
||||||
|
return result200;
|
||||||
|
});
|
||||||
|
} else if (status !== 200 && status !== 204) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
return throwException("An unexpected server error occurred.", status, _responseText, _headers);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return Promise.resolve<ProductListItem>(<any>null);
|
||||||
|
}
|
||||||
|
|
||||||
|
put(id: string, model: ProductCreateUpdateModel): Promise<string> {
|
||||||
|
let url_ = this.baseUrl + "/api/Product/{id}";
|
||||||
|
if (id === undefined || id === null)
|
||||||
|
throw new Error("The parameter 'id' must be defined.");
|
||||||
|
url_ = url_.replace("{id}", encodeURIComponent("" + id));
|
||||||
|
url_ = url_.replace(/[?&]$/, "");
|
||||||
|
|
||||||
|
const content_ = JSON.stringify(model);
|
||||||
|
|
||||||
|
let options_ = <RequestInit>{
|
||||||
|
body: content_,
|
||||||
|
method: "PUT",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
"Accept": "application/json"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||||
|
return this.processPut(_response);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
protected processPut(response: Response): Promise<string> {
|
||||||
|
const status = response.status;
|
||||||
|
let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
|
||||||
|
if (status === 200) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
let result200: any = null;
|
||||||
|
result200 = _responseText === "" ? null : <string>JSON.parse(_responseText, this.jsonParseReviver);
|
||||||
|
return result200;
|
||||||
|
});
|
||||||
|
} else if (status !== 200 && status !== 204) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
return throwException("An unexpected server error occurred.", status, _responseText, _headers);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return Promise.resolve<string>(<any>null);
|
||||||
|
}
|
||||||
|
|
||||||
|
delete(id: string): Promise<string> {
|
||||||
|
let url_ = this.baseUrl + "/api/Product/{id}";
|
||||||
|
if (id === undefined || id === null)
|
||||||
|
throw new Error("The parameter 'id' must be defined.");
|
||||||
|
url_ = url_.replace("{id}", encodeURIComponent("" + id));
|
||||||
|
url_ = url_.replace(/[?&]$/, "");
|
||||||
|
|
||||||
|
let options_ = <RequestInit>{
|
||||||
|
method: "DELETE",
|
||||||
|
headers: {
|
||||||
|
"Accept": "application/json"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||||
|
return this.processDelete(_response);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
protected processDelete(response: Response): Promise<string> {
|
||||||
|
const status = response.status;
|
||||||
|
let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
|
||||||
|
if (status === 200) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
let result200: any = null;
|
||||||
|
result200 = _responseText === "" ? null : <string>JSON.parse(_responseText, this.jsonParseReviver);
|
||||||
|
return result200;
|
||||||
|
});
|
||||||
|
} else if (status !== 200 && status !== 204) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
return throwException("An unexpected server error occurred.", status, _responseText, _headers);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return Promise.resolve<string>(<any>null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class SettingsClient {
|
||||||
|
private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
|
||||||
|
private baseUrl: string;
|
||||||
|
protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;
|
||||||
|
|
||||||
|
constructor(baseUrl?: string, http?: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> }) {
|
||||||
|
this.http = http ? http : <any>window;
|
||||||
|
this.baseUrl = baseUrl !== undefined && baseUrl !== null ? baseUrl : "http://localhost:5000";
|
||||||
|
}
|
||||||
|
|
||||||
|
get(): Promise<string> {
|
||||||
|
let url_ = this.baseUrl + "/api/Settings";
|
||||||
|
url_ = url_.replace(/[?&]$/, "");
|
||||||
|
|
||||||
|
let options_ = <RequestInit>{
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Accept": "application/json"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||||
|
return this.processGet(_response);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
protected processGet(response: Response): Promise<string> {
|
||||||
|
const status = response.status;
|
||||||
|
let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
|
||||||
|
if (status === 200) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
let result200: any = null;
|
||||||
|
result200 = _responseText === "" ? null : <string>JSON.parse(_responseText, this.jsonParseReviver);
|
||||||
|
return result200;
|
||||||
|
});
|
||||||
|
} else if (status !== 200 && status !== 204) {
|
||||||
|
return response.text().then((_responseText) => {
|
||||||
|
return throwException("An unexpected server error occurred.", status, _responseText, _headers);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return Promise.resolve<string>(<any>null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CartCustomerListItem {
|
||||||
|
productID: string;
|
||||||
|
productName?: string | undefined;
|
||||||
|
productPrice: number;
|
||||||
|
customerName?: string | undefined;
|
||||||
|
customerEmail?: string | undefined;
|
||||||
|
quantity: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CartListItem {
|
||||||
|
productID: string;
|
||||||
|
productName?: string | undefined;
|
||||||
|
productPrice: number;
|
||||||
|
quantity: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CartCreateUpdateModel {
|
||||||
|
customerID: string;
|
||||||
|
productID: string;
|
||||||
|
quantity: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CartDeleteModel {
|
||||||
|
customerID: string;
|
||||||
|
productID: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CustomerListItem {
|
||||||
|
customerID: string;
|
||||||
|
name: string;
|
||||||
|
email: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CustomerCreateUpdateModel {
|
||||||
|
name: string;
|
||||||
|
email: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProductListItem {
|
||||||
|
productID: string;
|
||||||
|
name: string;
|
||||||
|
price: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProductCreateUpdateModel {
|
||||||
|
name: string;
|
||||||
|
price: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class ApiException extends Error {
|
||||||
|
message: string;
|
||||||
|
status: number;
|
||||||
|
response: string;
|
||||||
|
headers: { [key: string]: any; };
|
||||||
|
result: any;
|
||||||
|
|
||||||
|
constructor(message: string, status: number, response: string, headers: { [key: string]: any; }, result: any) {
|
||||||
|
super();
|
||||||
|
|
||||||
|
this.message = message;
|
||||||
|
this.status = status;
|
||||||
|
this.response = response;
|
||||||
|
this.headers = headers;
|
||||||
|
this.result = result;
|
||||||
|
}
|
||||||
|
|
||||||
|
protected isApiException = true;
|
||||||
|
|
||||||
|
static isApiException(obj: any): obj is ApiException {
|
||||||
|
return obj.isApiException === true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function throwException(message: string, status: number, response: string, headers: { [key: string]: any; }, result?: any): any {
|
||||||
|
if (result !== null && result !== undefined)
|
||||||
|
throw result;
|
||||||
|
else
|
||||||
|
throw new ApiException(message, status, response, headers, null);
|
||||||
|
}
|
|
@ -0,0 +1,6 @@
|
||||||
|
|
||||||
|
export default function Errors({ errors }) {
|
||||||
|
return errors.map(x => (
|
||||||
|
<li>{x}</li>
|
||||||
|
));
|
||||||
|
}
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
|
@ -0,0 +1,34 @@
|
||||||
|
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,
|
||||||
|
}
|
||||||
|
|
||||||
|
export function validateForm(form): string[] {
|
||||||
|
let errors: string[] = [];
|
||||||
|
if (!form.name) {
|
||||||
|
errors.push("Name required");
|
||||||
|
}
|
||||||
|
if (!form.price) {
|
||||||
|
errors.push("Price required");
|
||||||
|
}
|
||||||
|
return errors;
|
||||||
|
}
|
File diff suppressed because it is too large
Load Diff
|
@ -12,13 +12,26 @@
|
||||||
"author": "",
|
"author": "",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@fortawesome/fontawesome-svg-core": "^1.2.35",
|
||||||
|
"@fortawesome/free-solid-svg-icons": "^5.15.3",
|
||||||
|
"@fortawesome/react-fontawesome": "^0.1.14",
|
||||||
|
"axios": "^0.21.1",
|
||||||
|
"bootstrap": "^5.0.0-beta3",
|
||||||
|
"mobx": "^6.1.8",
|
||||||
|
"mobx-react": "^7.1.0",
|
||||||
"next": "^10.0.9",
|
"next": "^10.0.9",
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-dom": "^17.0.2"
|
"react-dom": "^17.0.2",
|
||||||
|
"react-fontawesome": "^1.7.1",
|
||||||
|
"sweetalert2": "^10.15.6"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.13.10",
|
||||||
|
"@babel/plugin-proposal-class-properties": "^7.13.0",
|
||||||
|
"@babel/plugin-proposal-decorators": "^7.13.5",
|
||||||
"@types/node": "^14.14.35",
|
"@types/node": "^14.14.35",
|
||||||
"@types/react": "^17.0.3",
|
"@types/react": "^17.0.3",
|
||||||
|
"tslib": "^2.1.0",
|
||||||
"typescript": "^4.2.3"
|
"typescript": "^4.2.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,122 @@
|
||||||
|
import React, { ChangeEvent } from 'react';
|
||||||
|
import { Layout } from '../shared/Layout';
|
||||||
|
import { CustomerClient } from '../../APIClient';
|
||||||
|
import Swal from 'sweetalert2';
|
||||||
|
|
||||||
|
function Errors({ errors }) {
|
||||||
|
return errors.map(x => (
|
||||||
|
<li>{x}</li>
|
||||||
|
));
|
||||||
|
}
|
||||||
|
class CreateCustomer extends React.Component<{}, {
|
||||||
|
form: {
|
||||||
|
name: string,
|
||||||
|
email: string,
|
||||||
|
},
|
||||||
|
errors: string[],
|
||||||
|
busy: boolean,
|
||||||
|
}> {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
this.state = {
|
||||||
|
form: {
|
||||||
|
name: "",
|
||||||
|
email: "",
|
||||||
|
},
|
||||||
|
errors: [],
|
||||||
|
busy: false,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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.post({
|
||||||
|
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)}>Create</button>
|
||||||
|
</div>
|
||||||
|
<li>
|
||||||
|
<Errors errors={this.state.errors}></Errors>
|
||||||
|
</li>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CreateCustomerPage() {
|
||||||
|
return (
|
||||||
|
<Layout title="Create customer">
|
||||||
|
<CreateCustomer></CreateCustomer>
|
||||||
|
</Layout>
|
||||||
|
)
|
||||||
|
}
|
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
|
@ -0,0 +1,108 @@
|
||||||
|
import React from 'react';
|
||||||
|
import axios from 'axios';
|
||||||
|
import { CustomerClient, CustomerListItem } from '../../APIClient';
|
||||||
|
import { Layout } from '../shared/Layout';
|
||||||
|
import Swal from 'sweetalert2';
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
|
import { faTrash } from '@fortawesome/free-solid-svg-icons';
|
||||||
|
|
||||||
|
const DeleteCustomerButton: React.FunctionComponent<{
|
||||||
|
customerID: string,
|
||||||
|
onDelete: (val) => void
|
||||||
|
|
||||||
|
}> = ({ customerID, onDelete }) => {
|
||||||
|
const onClickDelete = async () => {
|
||||||
|
const result = await Swal.fire({
|
||||||
|
title: 'Confirm delete?',
|
||||||
|
text: 'Delete customer?',
|
||||||
|
icon: 'warning',
|
||||||
|
showCancelButton: true,
|
||||||
|
})
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
onDelete(customerID);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<button className="btn btn-danger btn-sm" onClick={onClickDelete}>
|
||||||
|
<FontAwesomeIcon icon={faTrash} />
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const CustomerListItemRows: React.FunctionComponent<{
|
||||||
|
customers: CustomerListItem[],
|
||||||
|
onDelete: (val) => void,
|
||||||
|
}> = ({ customers, onDelete }) => {
|
||||||
|
let rows = customers.map(x => {
|
||||||
|
return (
|
||||||
|
<tr>
|
||||||
|
<td>{x.customerID}</td>
|
||||||
|
<td>{x.name}</td>
|
||||||
|
<td>{x.email}</td>
|
||||||
|
<td><DeleteCustomerButton customerID={x.customerID} onDelete={onDelete}></DeleteCustomerButton></td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
return (
|
||||||
|
<tbody>
|
||||||
|
{rows}
|
||||||
|
</tbody>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
class Customer extends React.Component<{}, { customer: CustomerListItem[] }> {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
customer: [],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
async componentDidMount() {
|
||||||
|
this.getCustomers();
|
||||||
|
}
|
||||||
|
async getCustomers() {
|
||||||
|
try {
|
||||||
|
const client = new CustomerClient();
|
||||||
|
let data = await client.getAll();
|
||||||
|
console.log(data);
|
||||||
|
this.setState({
|
||||||
|
customer: data
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
this.setState({
|
||||||
|
customer: [],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
async deleteCustomer(customerId) {
|
||||||
|
try {
|
||||||
|
const client = new CustomerClient();
|
||||||
|
await client.delete(customerId);
|
||||||
|
let customer = this.state.customer.filter(x => x.customerID != customerId);
|
||||||
|
this.setState({
|
||||||
|
customer
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
alert(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<table className="table table-hover table-striped table-sm">
|
||||||
|
<tr>
|
||||||
|
<th>ID</th>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Email</th>
|
||||||
|
</tr>
|
||||||
|
<CustomerListItemRows customers={this.state.customer} onDelete={this.deleteCustomer.bind(this)}>
|
||||||
|
</CustomerListItemRows>
|
||||||
|
</table>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CustomerPage() {
|
||||||
|
return (
|
||||||
|
<Layout title="Customers">
|
||||||
|
<Customer></Customer>
|
||||||
|
</Layout>
|
||||||
|
)
|
||||||
|
}
|
|
@ -1,6 +1,37 @@
|
||||||
function Index() {
|
import { makeObservable, observable, action } from 'mobx';
|
||||||
return (
|
import { observer } from 'mobx-react';
|
||||||
<p>Hello World</p>
|
import React from 'react';
|
||||||
);
|
import Link from 'next/link';
|
||||||
|
import { Layout } from './shared/Layout';
|
||||||
|
|
||||||
|
class Index extends React.Component {
|
||||||
|
x: number = 0;
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
makeObservable(this, {
|
||||||
|
x: observable,
|
||||||
|
clickMe: action,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
clickMe() {
|
||||||
|
this.x += 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<button onClick={this.clickMe.bind(this)}>{this.x}</button>
|
||||||
|
<Link href="/todo">Go to Todo</Link>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
export default Index;
|
|
||||||
|
|
||||||
|
export default function IndexPage() {
|
||||||
|
return (<Layout title="Home">
|
||||||
|
<Index></Index>
|
||||||
|
</Layout>);
|
||||||
|
}
|
|
@ -0,0 +1,91 @@
|
||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { 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 { validateForm } from '../../lib/product';
|
||||||
|
|
||||||
|
function Errors({ errors }) {
|
||||||
|
return errors.map(x => (
|
||||||
|
<li>{x}</li>
|
||||||
|
));
|
||||||
|
}
|
||||||
|
|
||||||
|
function CreateProduct() {
|
||||||
|
let [form, setForm] = useState({ name: "", price: 0 });
|
||||||
|
let [busy, setBusy] = useState(false);
|
||||||
|
let [errors,setErrors] = useState([""]);
|
||||||
|
|
||||||
|
const onNameChanged = (newName: string) => {
|
||||||
|
setForm(
|
||||||
|
{
|
||||||
|
name: newName,
|
||||||
|
price: form.price,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const onPriceChanged = (newPrice: number) => {
|
||||||
|
setForm({
|
||||||
|
name: form.name,
|
||||||
|
price: newPrice,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const validate = () => {
|
||||||
|
let errors: string[] = validateForm(form);
|
||||||
|
setErrors(errors);
|
||||||
|
return errors.length == 0;
|
||||||
|
}
|
||||||
|
const onSubmit = async () => {
|
||||||
|
if (validate()) {
|
||||||
|
setBusy(true);
|
||||||
|
try {
|
||||||
|
const client = new ProductClient();
|
||||||
|
await client.post({
|
||||||
|
name: form.name,
|
||||||
|
price: form.price,
|
||||||
|
})
|
||||||
|
Swal.fire({
|
||||||
|
title: "Submitted!",
|
||||||
|
text: "Product is added in database",
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
|
||||||
|
} finally {
|
||||||
|
setBusy(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto">
|
||||||
|
<h1>Create Product</h1>
|
||||||
|
<Link href="/product/">
|
||||||
|
<a>
|
||||||
|
<FontAwesomeIcon icon={faArrowLeft} /> Return to index
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
<ProductForm
|
||||||
|
name={form.name}
|
||||||
|
price={form.price}
|
||||||
|
busy={busy}
|
||||||
|
onNameChange={onNameChanged}
|
||||||
|
onPriceChange={onPriceChanged}
|
||||||
|
onSubmit={onSubmit} />
|
||||||
|
<ul>
|
||||||
|
<Errors errors={errors}></Errors>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CreateProductPage() {
|
||||||
|
return (
|
||||||
|
<Layout title="Create product">
|
||||||
|
<CreateProduct></CreateProduct>
|
||||||
|
</Layout>
|
||||||
|
)
|
||||||
|
}
|
|
@ -0,0 +1,119 @@
|
||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { 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 { validateForm } from '../../../lib/product';
|
||||||
|
|
||||||
|
function Errors({ errors }) {
|
||||||
|
return errors.map(x => (
|
||||||
|
<li>{x}</li>
|
||||||
|
));
|
||||||
|
}
|
||||||
|
|
||||||
|
function EditProduct({ productID }) {
|
||||||
|
if (typeof productID != "string") {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
let [form, setForm] = useState({ name: "", price: 0 });
|
||||||
|
let [busy, setBusy] = useState(false);
|
||||||
|
let [errors,setErrors] = useState([""]);
|
||||||
|
|
||||||
|
const getInitialData = async() => {
|
||||||
|
const client = new ProductClient();
|
||||||
|
let data = await client.get(productID);
|
||||||
|
setBusy(false);
|
||||||
|
setForm(
|
||||||
|
{
|
||||||
|
name: data.name,
|
||||||
|
price: data.price,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
// Startup
|
||||||
|
useEffect(() => {
|
||||||
|
setBusy(true);
|
||||||
|
if (productID) {
|
||||||
|
getInitialData();
|
||||||
|
}
|
||||||
|
}, [productID]);
|
||||||
|
|
||||||
|
const onNameChanged = (newName: string) => {
|
||||||
|
setForm(
|
||||||
|
{
|
||||||
|
name: newName,
|
||||||
|
price: form.price,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const onPriceChanged = (newPrice: number) => {
|
||||||
|
setForm({
|
||||||
|
name: form.name,
|
||||||
|
price: newPrice,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const validate = () => {
|
||||||
|
let errors: string[] = validateForm(form);
|
||||||
|
setErrors(errors);
|
||||||
|
return errors.length == 0;
|
||||||
|
}
|
||||||
|
const onSubmit = async () => {
|
||||||
|
if (validate()) {
|
||||||
|
setBusy(true);
|
||||||
|
try {
|
||||||
|
const client = new ProductClient();
|
||||||
|
await client.put(productID, {
|
||||||
|
name: form.name,
|
||||||
|
price: form.price,
|
||||||
|
})
|
||||||
|
Swal.fire({
|
||||||
|
title: "Submitted!",
|
||||||
|
text: "Product is modified in database",
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
|
||||||
|
} finally {
|
||||||
|
setBusy(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto">
|
||||||
|
<h1>Edit Product</h1>
|
||||||
|
<Link href="/product/">
|
||||||
|
<a>
|
||||||
|
<FontAwesomeIcon icon={faArrowLeft} /> Return to index
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
<ProductForm
|
||||||
|
name={form.name}
|
||||||
|
price={form.price}
|
||||||
|
busy={busy}
|
||||||
|
onNameChange={onNameChanged}
|
||||||
|
onPriceChange={onPriceChanged}
|
||||||
|
onSubmit={onSubmit} />
|
||||||
|
<ul>
|
||||||
|
<Errors errors={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>
|
||||||
|
)
|
||||||
|
}
|
|
@ -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 '../../lib/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>
|
||||||
|
)
|
||||||
|
}
|
|
@ -0,0 +1,81 @@
|
||||||
|
import React from 'react'
|
||||||
|
import Head from 'next/head'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { useRouter } from 'next/router'
|
||||||
|
|
||||||
|
import 'bootstrap/dist/css/bootstrap.min.css'
|
||||||
|
|
||||||
|
const NavLink: React.FunctionComponent<{href: string}> = ({href, children}) => {
|
||||||
|
const router = useRouter();
|
||||||
|
const NavLinkClasses = (active) => {
|
||||||
|
if(active) {
|
||||||
|
return "nav-link active";
|
||||||
|
} else {
|
||||||
|
return "nav-link"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const NavLinkCurrent = (active) => {
|
||||||
|
if(active) {
|
||||||
|
return "page";
|
||||||
|
} else {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const active = router.pathname == href;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<li className='nav-item active'>
|
||||||
|
<Link href={href}>
|
||||||
|
<a className={NavLinkClasses(active)} aria-current={NavLinkCurrent(active)}>{children}</a>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const NavBar: React.FunctionComponent<{}> = () => {
|
||||||
|
return (
|
||||||
|
<nav className='navbar navbar-expand-lg navbar-light bg-light'>
|
||||||
|
<a className='navbar-brand' href='#'>
|
||||||
|
Navbar
|
||||||
|
</a>
|
||||||
|
<button
|
||||||
|
className='navbar-toggler'
|
||||||
|
type='button'
|
||||||
|
data-toggle='collapse'
|
||||||
|
data-target='#navbarSupportedContent'
|
||||||
|
aria-controls='navbarSupportedContent'
|
||||||
|
aria-expanded='false'
|
||||||
|
aria-label='Toggle navigation'
|
||||||
|
>
|
||||||
|
<span className='navbar-toggler-icon' />
|
||||||
|
</button>
|
||||||
|
<div className='collapse navbar-collapse' id='navbarSupportedContent'>
|
||||||
|
<ul className='navbar-nav mr-auto'>
|
||||||
|
<NavLink href="/">Home</NavLink>
|
||||||
|
<NavLink href="/todo">Todo</NavLink>
|
||||||
|
<NavLink href="/customer">Customer</NavLink>
|
||||||
|
<NavLink href="/product">Product</NavLink>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export class Layout extends React.Component<{
|
||||||
|
title: string
|
||||||
|
}> {
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Head>
|
||||||
|
<meta name='viewport' content='width=device-width, initial-scale=1' />
|
||||||
|
<title>{this.props.title} - TestAppRuna</title>
|
||||||
|
</Head>
|
||||||
|
<header>
|
||||||
|
<NavBar />
|
||||||
|
</header>
|
||||||
|
<main>{this.props.children}</main>
|
||||||
|
<footer></footer>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,90 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { observable, action, makeObservable } from 'mobx';
|
||||||
|
import { PropTypes } from 'mobx-react';
|
||||||
|
import { Layout } from './shared/Layout';
|
||||||
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||||
|
|
||||||
|
interface ToDoListItem {
|
||||||
|
todo: string,
|
||||||
|
checked: boolean,
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ToDoState {
|
||||||
|
inputText: string,
|
||||||
|
toDoList: ToDoListItem[],
|
||||||
|
}
|
||||||
|
|
||||||
|
const TodoItem: React.FunctionComponent<{
|
||||||
|
item: ToDoListItem,
|
||||||
|
onRemoveButtonClick: (id) => void
|
||||||
|
}> = ({ item, onRemoveButtonClick }) => {
|
||||||
|
let onClick = () => {
|
||||||
|
onRemoveButtonClick(item);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<button onClick={onClick}>Remove</button>
|
||||||
|
{item.todo}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const TodoList: React.FunctionComponent<{
|
||||||
|
items: ToDoListItem[],
|
||||||
|
onChange?: (item) => void
|
||||||
|
}> = ({ items, onChange }) => {
|
||||||
|
const onRemoveButtonClick = (item) => {
|
||||||
|
if(onChange) {
|
||||||
|
onChange(item);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const listItems = items.map(Q => <TodoItem onRemoveButtonClick={onRemoveButtonClick} item={Q}></TodoItem>)
|
||||||
|
return <div>{listItems}</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
class Todo extends React.Component<{},ToDoState> {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
inputText: "",
|
||||||
|
toDoList: [],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
onTextInput = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
this.setState({
|
||||||
|
inputText: e.target.value,
|
||||||
|
})
|
||||||
|
};
|
||||||
|
onChange = (item) => {
|
||||||
|
this.setState(
|
||||||
|
{
|
||||||
|
toDoList: this.state.toDoList.filter(x => item.todo != x.todo)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
};
|
||||||
|
addList = () => {
|
||||||
|
this.setState({
|
||||||
|
inputText: "",
|
||||||
|
toDoList: [...this.state.toDoList, {
|
||||||
|
todo: this.state.inputText, checked: false
|
||||||
|
}],
|
||||||
|
})
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<input value={this.state.inputText} onChange={this.onTextInput}></input>
|
||||||
|
{this.state.inputText}
|
||||||
|
</div>
|
||||||
|
<button onClick={this.addList}>Add</button>
|
||||||
|
<TodoList onChange={this.onChange} items={this.state.toDoList}></TodoList>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
return <Layout title="Todo"><Todo></Todo></Layout>
|
||||||
|
}
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
@ -0,0 +1,25 @@
|
||||||
|
{
|
||||||
|
// Use IntelliSense to learn about possible attributes.
|
||||||
|
// Hover to view descriptions of existing attributes.
|
||||||
|
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"name": ".NET Core Launch (console)",
|
||||||
|
"type": "coreclr",
|
||||||
|
"request": "launch",
|
||||||
|
"preLaunchTask": "build",
|
||||||
|
"program": "${workspaceFolder}/bin/Debug/net5.0/TestAppRuna.dll",
|
||||||
|
"args": [],
|
||||||
|
"cwd": "${workspaceFolder}",
|
||||||
|
"console": "internalConsole",
|
||||||
|
"stopAtEntry": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": ".NET Core Attach",
|
||||||
|
"type": "coreclr",
|
||||||
|
"request": "attach",
|
||||||
|
"processId": "${command:pickProcess}"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
|
@ -0,0 +1,24 @@
|
||||||
|
{
|
||||||
|
// See https://go.microsoft.com/fwlink/?LinkId=733558
|
||||||
|
// for the documentation about the tasks.json format
|
||||||
|
"version": "2.0.0",
|
||||||
|
"tasks": [
|
||||||
|
{
|
||||||
|
"label": "build",
|
||||||
|
"command": "dotnet",
|
||||||
|
"type": "shell",
|
||||||
|
"args": [
|
||||||
|
"build",
|
||||||
|
// Ask dotnet build to generate full paths for file names.
|
||||||
|
"/property:GenerateFullPaths=true",
|
||||||
|
// Do not generate summary otherwise it leads to duplicate errors in Problems panel
|
||||||
|
"/consoleloggerparameters:NoSummary"
|
||||||
|
],
|
||||||
|
"group": "build",
|
||||||
|
"presentation": {
|
||||||
|
"reveal": "silent"
|
||||||
|
},
|
||||||
|
"problemMatcher": "$msCompile"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
|
@ -14,7 +14,7 @@ namespace TestAppRuna.API
|
||||||
{
|
{
|
||||||
[Route("api/[controller]")]
|
[Route("api/[controller]")]
|
||||||
[ApiController]
|
[ApiController]
|
||||||
[Authorize(AuthenticationSchemes = "nanaoaccounts")]
|
// [Authorize("nanaoaccounts")]
|
||||||
public class CustomerController : ControllerBase
|
public class CustomerController : ControllerBase
|
||||||
{
|
{
|
||||||
public CustomerController(ShopDbContext shopDbContext)
|
public CustomerController(ShopDbContext shopDbContext)
|
||||||
|
|
Binary file not shown.
|
@ -51,6 +51,15 @@ namespace TestAppRuna
|
||||||
options.Audience = "testappruna";
|
options.Audience = "testappruna";
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
services.AddCors(options => {
|
||||||
|
options.AddPolicy("BelajarNextJS", policy => {
|
||||||
|
policy.WithOrigins("http://localhost:3000")
|
||||||
|
.AllowAnyHeader()
|
||||||
|
.AllowAnyMethod();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
services.AddSwaggerDocument(settings => {
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
|
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
|
||||||
|
@ -74,10 +83,15 @@ namespace TestAppRuna
|
||||||
}
|
}
|
||||||
app.UseStaticFiles();
|
app.UseStaticFiles();
|
||||||
|
|
||||||
app.UseOpenApi();
|
app.UseOpenApi(settings => {
|
||||||
|
settings.DocumentName = "v1";
|
||||||
|
settings.Path = "/swagger/v1/swagger.json";
|
||||||
|
});
|
||||||
|
|
||||||
app.UseSwaggerUi3(settings =>
|
app.UseSwaggerUi3(settings =>
|
||||||
{
|
{
|
||||||
settings.DocumentTitle = "TestAppRuna";
|
settings.DocumentTitle = "TestAppRuna";
|
||||||
|
settings.DocumentPath = "/swagger/v1/swagger.json";
|
||||||
});
|
});
|
||||||
|
|
||||||
app.UseRouting();
|
app.UseRouting();
|
||||||
|
@ -85,6 +99,8 @@ namespace TestAppRuna
|
||||||
app.UseAuthentication();
|
app.UseAuthentication();
|
||||||
app.UseAuthorization();
|
app.UseAuthorization();
|
||||||
|
|
||||||
|
app.UseCors("BelajarNextJS");
|
||||||
|
|
||||||
app.UseEndpoints(endpoints =>
|
app.UseEndpoints(endpoints =>
|
||||||
{
|
{
|
||||||
endpoints.MapDefaultControllerRoute();
|
endpoints.MapDefaultControllerRoute();
|
||||||
|
|
|
@ -6,6 +6,7 @@
|
||||||
|
|
||||||
<ItemGroup>
|
<ItemGroup>
|
||||||
<PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="5.0.4" />
|
<PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="5.0.4" />
|
||||||
|
<PackageReference Include="Microsoft.AspNetCore.Cors" Version="2.2.0" />
|
||||||
<PackageReference Include="NSwag.AspNetCore" Version="13.10.8" />
|
<PackageReference Include="NSwag.AspNetCore" Version="13.10.8" />
|
||||||
<PackageReference Include="Serilog.AspNetCore" Version="4.0.0" />
|
<PackageReference Include="Serilog.AspNetCore" Version="4.0.0" />
|
||||||
<PackageReference Include="Serilog.Formatting.Compact" Version="1.1.0" />
|
<PackageReference Include="Serilog.Formatting.Compact" Version="1.1.0" />
|
||||||
|
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"dependencies": {
|
||||||
|
"react-fontawesome": "^1.7.1",
|
||||||
|
"sweetalert2": "^10.15.6",
|
||||||
|
"validate.js": "^0.13.1"
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,51 @@
|
||||||
|
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
|
||||||
|
# yarn lockfile v1
|
||||||
|
|
||||||
|
|
||||||
|
"js-tokens@^3.0.0 || ^4.0.0":
|
||||||
|
version "4.0.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
|
||||||
|
integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
|
||||||
|
|
||||||
|
loose-envify@^1.4.0:
|
||||||
|
version "1.4.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
|
||||||
|
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
|
||||||
|
dependencies:
|
||||||
|
js-tokens "^3.0.0 || ^4.0.0"
|
||||||
|
|
||||||
|
object-assign@^4.1.1:
|
||||||
|
version "4.1.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
|
||||||
|
integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
|
||||||
|
|
||||||
|
prop-types@^15.5.6:
|
||||||
|
version "15.7.2"
|
||||||
|
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
|
||||||
|
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
|
||||||
|
dependencies:
|
||||||
|
loose-envify "^1.4.0"
|
||||||
|
object-assign "^4.1.1"
|
||||||
|
react-is "^16.8.1"
|
||||||
|
|
||||||
|
react-fontawesome@^1.7.1:
|
||||||
|
version "1.7.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/react-fontawesome/-/react-fontawesome-1.7.1.tgz#f74f5a338fef3ee3b379820109c1cba47290f035"
|
||||||
|
integrity sha512-kottReWW1I9Uupub6A5YX4VK7qfpFnEjAcm5zB4Aepst7iofONT27GJYdTcRsj7q5uQu9PXBL7GsxAFKANNUVg==
|
||||||
|
dependencies:
|
||||||
|
prop-types "^15.5.6"
|
||||||
|
|
||||||
|
react-is@^16.8.1:
|
||||||
|
version "16.13.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
||||||
|
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
|
||||||
|
|
||||||
|
sweetalert2@^10.15.6:
|
||||||
|
version "10.15.6"
|
||||||
|
resolved "https://registry.yarnpkg.com/sweetalert2/-/sweetalert2-10.15.6.tgz#8fe309af76543f7d8151a2e57a226f1cceb51a4e"
|
||||||
|
integrity sha512-elLyVvVwBBsgkT0NrxiiVuEv077gqGhm7WEdBjXRHN+TOX+MoC4LpDW2kbdSeJtjjU1sPdqGKfGLoJElIXfVWA==
|
||||||
|
|
||||||
|
validate.js@^0.13.1:
|
||||||
|
version "0.13.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/validate.js/-/validate.js-0.13.1.tgz#b58bfac04a0f600a340f62e5227e70d95971e92a"
|
||||||
|
integrity sha512-PnFM3xiZ+kYmLyTiMgTYmU7ZHkjBZz2/+F0DaALc/uUtVzdCt1wAosvYJ5hFQi/hz8O4zb52FQhHZRC+uVkJ+g==
|
Loading…
Reference in New Issue