PPOB/ppob-frontend
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'develop' of https://gitlab.com/empatnusabangsa/ppob/ppob-frontend into develop

Browse Source
This commit is contained in:
ajat91.sudrajat
2021-12-20 13:42:40 +07:00
parent 5f062ed630 f89a1620db
commit 82c9a96339
9 changed files with 113 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -75,6 +75,7 @@
"semver": "7.3.5", "semver": "7.3.5",
"style-loader": "1.3.0", "style-loader": "1.3.0",
"superagent": "^6.1.0", "superagent": "^6.1.0",
"superagent-intercept": "^0.1.2",
"terser-webpack-plugin": "4.2.3", "terser-webpack-plugin": "4.2.3",
"ts-pnp": "1.2.0", "ts-pnp": "1.2.0",
"url-loader": "4.1.1", "url-loader": "4.1.1",

53
src/component/CategoryComponent.js
View File

@@ -1,46 +1,19 @@
import React, { useEffect, useState } from "react"; import React, {useState} from "react";
import { import {Button, Form, Input, message, Modal, Select, Space, Table,} from "antd";
Button, import {observer} from "mobx-react-lite";
Form, import {useHistory} from "react-router-dom";
Input, import {useStore} from "../utils/useStore";
message, import {LINKS} from "../routes/app";
Modal,
Select,
Space,
Table,
Tag,
} from "antd";
import { observer } from "mobx-react-lite";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import { useHistory } from "react-router-dom";
import { capitalize } from "lodash";
import { useStore } from "../utils/useStore";
import { LINKS } from "../routes/app";
export const CategoryComponent = observer((props) => { export const CategoryComponent = observer((props) => {
const store = useStore(); const store = useStore();
const [form] = Form.useForm(); const [form] = Form.useForm();
const { Option } = Select; const {Option} = Select;
const history = useHistory(); const history = useHistory();
const [idData, setIdData] = useState(""); const [idData, setIdData] = useState("");
const [confirmLoading, setConfirmLoading] = useState(false); const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
//store.product.pageCategories=StrToLower(props.category)
await store.product.getDataSubCategories();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
init();
}, []);
const handleEditButton = (data) => { const handleEditButton = (data) => {
console.log(data, "isi data"); console.log(data, "isi data");
form.setFieldsValue({ form.setFieldsValue({
@@ -154,18 +127,18 @@ export const CategoryComponent = observer((props) => {
dataSource={store.category.data} dataSource={store.category.data}
bordered bordered
pagination={{ pagination={{
pageSize: store.product.pageSize, pageSize: store.category.pageSize,
total: store.product.total_data, total: store.category.total_data,
current: store.product.page + 1, current: store.category.page + 1,
showSizeChanger: true, showSizeChanger: true,
simple: false, simple: false,
}} }}
onChange={async (page) => { onChange={async (page) => {
let pageNumber = page.current; let pageNumber = page.current;
store.product.pageSize = page.pageSize; store.category.pageSize = page.pageSize;
store.product.page = pageNumber - 1; store.category.page = pageNumber - 1;
// store.membership.isLoading = true; // store.membership.isLoading = true;
await store.product.getData(); await store.category.getData();
// store.membership.isLoading = false; // store.membership.isLoading = false;
}} }}
/> />

40
src/component/ProductComponent.js
View File

@@ -43,32 +43,32 @@ export const ProductComponent = observer((props) => {
}, },
{ {
title: "Produk", title: "Produk",
dataIndex: "name", dataIndex: ["name"],
key: "name", key: "name",
}, },
{ {
title: "Harga Beli", title: "Harga Beli",
dataIndex: "price", dataIndex: ["currentPrice","price"],
key: "price", key: ["currentPrice","price"],
}, },
{ {
title: "Harga Jual", title: "Harga Jual",
dataIndex: "basePrice", dataIndex: ["currentPrice","mark_up_price"],
key: "basePrice", key: ["currentPrice","mark_up_price"],
},
{
title: "Gangguan",
dataIndex: "status",
key: "status",
render: (text, record) => (
<Tag
color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
style={{color: "#4F566B"}}
>
{capitalize(record?.status)}
</Tag>
),
}, },
// {
// title: "Gangguan",
// dataIndex: "status",
// key: "status",
// render: (text, record) => (
// <Tag
// color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
// style={{color: "#4F566B"}}
// >
// {capitalize(record?.status)}
// </Tag>
// ),
// },
{ {
title: "Tersedia", title: "Tersedia",
dataIndex: "tersedia", dataIndex: "tersedia",
@@ -78,7 +78,7 @@ export const ProductComponent = observer((props) => {
color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"} color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
style={{color: "#4F566B"}} style={{color: "#4F566B"}}
> >
{record?.status === "ACTIVE" ? " Ya" : "Tidak"} {record?.status === "ACTIVE" ? " Tersedia" : "Tidak"}
</Tag> </Tag>
), ),
} }
@@ -149,7 +149,6 @@ export const ProductComponent = observer((props) => {
const handleRemoveFilter = async () => { const handleRemoveFilter = async () => {
store.product.filterSupplier = null; store.product.filterSupplier = null;
store.product.filterCategory = null;
store.product.filterSubCategory = null; store.product.filterSubCategory = null;
setFilterSupplier(null); setFilterSupplier(null);
setFilterCategories(null); setFilterCategories(null);
@@ -167,7 +166,6 @@ export const ProductComponent = observer((props) => {
const handleSubmitFilter = async () => { const handleSubmitFilter = async () => {
store.product.filterSupplier = filterSupplier; store.product.filterSupplier = filterSupplier;
store.product.filterCategory = filterCategories;
store.product.filterSubCategory = filterSubCategories; store.product.filterSubCategory = filterSubCategories;
await store.product.getData(); await store.product.getData();
store.product.visibleModalFilterProduct = false; store.product.visibleModalFilterProduct = false;

54
src/component/Subcategory.js
View File

@@ -1,49 +1,21 @@
import React, { useEffect, useState } from "react"; import React, {useState} from "react";
import { import {Button, Form, Input, message, Modal, Select, Space, Table,} from "antd";
Button, import {observer} from "mobx-react-lite";
Form, import {useHistory} from "react-router-dom";
Input, import {useStore} from "../utils/useStore";
message,
Modal,
Select,
Space,
Table,
Tag,
} from "antd";
import { observer } from "mobx-react-lite";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import { useHistory } from "react-router-dom";
import { capitalize } from "lodash";
import { useStore } from "../utils/useStore";
import { LINKS } from "../routes/app";
export const SubcategoryComponent = observer((props) => { export const SubcategoryComponent = observer((props) => {
const store = useStore(); const store = useStore();
const [form] = Form.useForm(); const [form] = Form.useForm();
const { Option } = Select; const {Option} = Select;
const history = useHistory(); const history = useHistory();
const [idData, setIdData] = useState(""); const [idData, setIdData] = useState("");
const [confirmLoading, setConfirmLoading] = useState(false); const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
//store.product.pageCategories=StrToLower(props.category)
getData();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
init();
}, []);
const getData = async () => { const getData = async () => {
await store.subcategory.getData();
await store.category.getData(); await store.category.getData();
await store.subcategory.getData();
}; };
const handleEditButton = (data) => { const handleEditButton = (data) => {
@@ -120,7 +92,7 @@ export const SubcategoryComponent = observer((props) => {
form.resetFields(); form.resetFields();
} }
}; };
//console.log()
return ( return (
<div> <div>
<Table <Table
@@ -129,16 +101,16 @@ export const SubcategoryComponent = observer((props) => {
dataSource={store.subcategory.data} dataSource={store.subcategory.data}
bordered bordered
pagination={{ pagination={{
pageSize: store.product.pageSize, pageSize: store.subcategory.pageSize,
total: store.product.total_data, total: store.subcategory.total_data,
current: store.product.page + 1, current: store.subcategory.page + 1,
showSizeChanger: true, showSizeChanger: true,
simple: false, simple: false,
}} }}
onChange={(page) => { onChange={(page) => {
let pageNumber = page.current; let pageNumber = page.current;
store.product.pageSize = page.pageSize; store.subcategory.pageSize = page.pageSize;
store.product.page = pageNumber - 1; store.subcategory.page = pageNumber - 1;
// store.membership.isLoading = true; // store.membership.isLoading = true;
getData(); getData();
// store.membership.isLoading = false; // store.membership.isLoading = false;

26
src/pages/Product/Category.js
View File

@@ -1,14 +1,14 @@
import React, { useEffect, useState } from "react"; import React, {useEffect, useState} from "react";
import { Button, Card, Col, Input, Row, Tabs } from "antd"; import {Button, Card, Col, Input, Row, Tabs} from "antd";
import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons"; import {FilterOutlined, PlusSquareOutlined} from "@ant-design/icons";
import { BreadcumbComponent } from "../../component/BreadcumbComponent"; import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import { useStore } from "../../utils/useStore"; import {useStore} from "../../utils/useStore";
import { observer } from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import { LINKS } from "../../routes/app"; import {LINKS} from "../../routes/app";
import { CategoryComponent } from "../../component/CategoryComponent"; import {CategoryComponent} from "../../component/CategoryComponent";
const { TabPane } = Tabs; const {TabPane} = Tabs;
const { Search } = Input; const {Search} = Input;
export const Category = observer(() => { export const Category = observer(() => {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
@@ -18,7 +18,6 @@ export const Category = observer(() => {
const init = async () => { const init = async () => {
try { try {
setIsLoading(true); setIsLoading(true);
//await store.product.getDataCategories();
await store.category.getData(); await store.category.getData();
setIsLoading(false); setIsLoading(false);
} catch (e) { } catch (e) {
@@ -29,11 +28,6 @@ export const Category = observer(() => {
init(); init();
}, []); }, []);
const handleChangeTabPane = async (key) => {
store.product.filterCategory = key;
console.log(key);
};
const routeData = [ const routeData = [
{ {
route: LINKS.HOME, route: LINKS.HOME,

21
src/pages/Product/Subcategory.js
View File

@@ -1,13 +1,13 @@
import React, { useEffect, useState } from "react"; import React, {useEffect, useState} from "react";
import { Button, Card, Col, Input, Row, Tabs } from "antd"; import {Button, Card, Col, Input, Row} from "antd";
import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons"; import {PlusSquareOutlined} from "@ant-design/icons";
import { BreadcumbComponent } from "../../component/BreadcumbComponent"; import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import { useStore } from "../../utils/useStore"; import {useStore} from "../../utils/useStore";
import { observer } from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import { LINKS } from "../../routes/app"; import {LINKS} from "../../routes/app";
import { SubcategoryComponent } from "../../component/Subcategory"; import {SubcategoryComponent} from "../../component/Subcategory";
const { Search } = Input; const {Search} = Input;
export const Subcategory = observer(() => { export const Subcategory = observer(() => {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
@@ -17,7 +17,7 @@ export const Subcategory = observer(() => {
const init = async () => { const init = async () => {
try { try {
setIsLoading(true); setIsLoading(true);
// await getData(); getData();
setIsLoading(false); setIsLoading(false);
} catch (e) { } catch (e) {
setIsLoading(false); setIsLoading(false);
@@ -31,6 +31,7 @@ export const Subcategory = observer(() => {
await store.category.getData(); await store.category.getData();
await store.subcategory.getData(); await store.subcategory.getData();
}; };
const routeData = [ const routeData = [
{ {
route: LINKS.HOME, route: LINKS.HOME,

3
src/store/product.js
View File

@@ -7,7 +7,6 @@ export class Product {
data = []; data = [];
total_data = 0; total_data = 0;
filterSupplier = null; filterSupplier = null;
filterCategory = null;
filterSubCategory = null; filterSubCategory = null;
visibleModalProduct = false; visibleModalProduct = false;
visibleModalFilterProduct = false; visibleModalFilterProduct = false;
@@ -31,7 +30,7 @@ export class Product {
async getData() { async getData() {
try { try {
const response = await http.get(`/product/all?supplier=${this.filterSupplier}&category=${this.filterCategory}&sub-category=${this.filterSubCategory}&page=${this.page}&pageSize=${this.pageSize}`); const response = await http.get(`/product/all?supplier=${this.filterSupplier}&sub-category=${this.filterSubCategory}&page=${this.page}&pageSize=${this.pageSize}`);
this.data = response.body.data.map((item, idx) => { this.data = response.body.data.map((item, idx) => {
item.key = idx; item.key = idx;
return item return item

34
src/utils/http.js
View File

@@ -1,31 +1,49 @@
import superagent from "superagent"; import superagent from "superagent";
import superagentIntercept from 'superagent-intercept';
import {appConfig} from "../config/app"; import {appConfig} from "../config/app";
import {TokenUtil} from "./token"; import {TokenUtil} from "./token";
import {attachSuperagentLogger} from "./http_logger";
let authIntercept = superagentIntercept((err, res) => {
if (res && res.status === 401) {
TokenUtil.clearAccessToken();
TokenUtil.persistToken();
window.location.href = "/login";
}
});
export const http = { export const http = {
get: (url, opts = {}) => { get: (url, opts = {}) => {
let req = superagent.get(appConfig.apiUrl + url); let req = superagent.get(appConfig.apiUrl + url)
.use(authIntercept)
.use(attachSuperagentLogger);
if (TokenUtil.accessToken) { if (TokenUtil.accessToken) {
req = req.set('Authorization', 'Bearer ' + TokenUtil.accessToken); req = req.set('Authorization', 'Bearer ' + TokenUtil.accessToken);
} }
return req; return req;
}, },
post: (url, opts) => { post: (url, opts) => {
let req = superagent.post(appConfig.apiUrl + url); let req = superagent.post(appConfig.apiUrl + url)
.use(authIntercept)
.use(attachSuperagentLogger);
if (TokenUtil.accessToken) { if (TokenUtil.accessToken) {
req = req.set('Authorization', 'Bearer ' + TokenUtil.accessToken); req = req.set('Authorization', 'Bearer ' + TokenUtil.accessToken);
} }
return req; return req;
}, },
put: (url, opts) => { put: (url, opts) => {
let req = superagent.put(appConfig.apiUrl + url); let req = superagent.put(appConfig.apiUrl + url)
.use(authIntercept)
.use(attachSuperagentLogger);
if (TokenUtil.accessToken) { if (TokenUtil.accessToken) {
req = req.set('Authorization', 'Bearer ' + TokenUtil.accessToken); req = req.set('Authorization', 'Bearer ' + TokenUtil.accessToken);
} }
return req; return req;
}, },
del: (url, opts) => { del: (url, opts) => {
let req = superagent.del(appConfig.apiUrl + url); let req = superagent.del(appConfig.apiUrl + url)
.use(authIntercept)
.use(attachSuperagentLogger);
if (TokenUtil.accessToken) { if (TokenUtil.accessToken) {
req = req.set('Authorization', 'Bearer ' + TokenUtil.accessToken); req = req.set('Authorization', 'Bearer ' + TokenUtil.accessToken);
} }
@@ -34,13 +52,17 @@ export const http = {
upload: (file) => { upload: (file) => {
const request = superagent const request = superagent
.post(appConfig.apiUrl + '/files') .post(appConfig.apiUrl + '/files')
.attach('file', file); .attach('file', file)
.use(authIntercept)
.use(attachSuperagentLogger);
return request; return request;
}, },
uploadAntd: (args) => { uploadAntd: (args) => {
const file = args.file; const file = args.file;
const request = http.upload(file); const request = http.upload(file)
.use(authIntercept)
.use(attachSuperagentLogger);
request request
.on('progress', event => { .on('progress', event => {
args.onProgress(event); args.onProgress(event);

17
src/utils/http_logger.js Normal file
View File

@@ -0,0 +1,17 @@
export function attachSuperagentLogger(req) {
const callback = req.callback;
console.log('%s %s %s',
req.method.padEnd('delete'.length, " "),
req.url,
'(pending)'
);
req.callback = function (err, res) {
console.log('%s %s %s',
req.method.padEnd('delete'.length, " "),
req.url,
res ? res.status : '-'
);
callback.call(req, err, res);
};
}