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-22 16:47:34 +07:00
commit aa2c658f69
7 changed files with 89 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/component/ProductComponent.js
View File

@ -15,9 +15,8 @@ export const ProductComponent = observer((props) => {
const {Option} = Select; const {Option} = Select;
const history = useHistory(); const history = useHistory();
const [idData, setIdData] = useState(""); const [idData, setIdData] = useState("");
const [filterSupplier, setFilterSupplier] = useState(null); const [filterSupplier, setFilterSupplier] = useState([]);
const [filterCategories, setFilterCategories] = useState(null); const [filterSubCategories, setFilterSubCategories] = useState([]);
const [filterSubCategories, setFilterSubCategories] = useState(null);
const modalLoader = useContext(ModalLoaderContext); const modalLoader = useContext(ModalLoaderContext);
const handleEditButton = (data) => { const handleEditButton = (data) => {
@ -42,18 +41,18 @@ export const ProductComponent = observer((props) => {
}, },
{ {
title: "Produk", title: "Produk",
dataIndex: ["product_name"], dataIndex: "product_name",
key: "product_name", key: "product_name",
}, },
{ {
title: "Harga Beli", title: "Harga Beli",
dataIndex: ["current_price_price"], dataIndex: "current_price_price",
key: ["current_price_price"], key: "current_price_price",
}, },
{ {
title: "Harga Jual", title: "Harga Jual",
dataIndex: ["mark_up_price"], dataIndex: "mark_up_price",
key: ["mark_up_price"], key: "mark_up_price",
}, },
// { // {
// title: "Gangguan", // title: "Gangguan",
@ -163,17 +162,17 @@ export const ProductComponent = observer((props) => {
const handleRemoveFilter = async () => { const handleRemoveFilter = async () => {
store.product.filterSupplier = null; store.product.filterSupplier = null;
store.product.filterSubCategory = null; store.product.filterSubCategory = null;
setFilterSupplier(null); setFilterSupplier([]);
setFilterCategories(null); store.product.filterCategory = null;
setFilterSubCategories(null); setFilterSubCategories([]);
await store.product.getData(); await store.product.getData();
store.product.visibleModalFilterProduct = false; store.product.visibleModalFilterProduct = false;
}; };
const handleCancelFilter = () => { const handleCancelFilter = () => {
setFilterSupplier(null); setFilterSupplier([]);
setFilterCategories(null); store.product.filterCategory = null;
setFilterSubCategories(null); setFilterSubCategories([]);
store.product.visibleModalFilterProduct = false; store.product.visibleModalFilterProduct = false;
}; };
@ -186,14 +185,24 @@ export const ProductComponent = observer((props) => {
store.product.visibleModalFilterProduct = false; store.product.visibleModalFilterProduct = false;
}; };
const handleFilterCategory = async (value) => {
if (value) {
store.product.filterCategory = value;
await store.product.getDataSubCategories();
} else {
store.product.filterCategory = null;
await store.product.getDataSubCategories();
}
};
const footerLayoutFilter = [ const footerLayoutFilter = [
<Button <Button
key={"remove"} key={"remove"}
onClick={handleRemoveFilter} onClick={handleRemoveFilter}
style={{ style={{
backgroundColor: "#e74e5e", backgroundColor: "#e74e5e",
color: "#fff", color: "#fff",
}} }}
> >
Remove Filter Remove Filter
</Button>, </Button>,
@ -403,17 +412,18 @@ export const ProductComponent = observer((props) => {
Filter Supplier Filter Supplier
</Title> </Title>
<Select <Select
mode={"multiple"} mode={"multiple"}
placeholder="Choose Supplier" placeholder="Choose Supplier"
onChange={(val) => { onChange={(val) => {
setFilterSupplier(val); setFilterSupplier(val);
}} }}
style={{ marginBottom: "20px", width: "100%" }} style={{marginBottom: "20px", width: "100%"}}
value={filterSupplier}
> >
{store.supplier.data.map((item) => ( {store.supplier.data.map((item) => (
<Option value={item.id} key={item.id}> <Option value={item.id} key={item.id}>
{item.name} {item.name}
</Option> </Option>
))} ))}
</Select> </Select>
</Col> </Col>
@ -422,19 +432,16 @@ export const ProductComponent = observer((props) => {
Filter Categories Filter Categories
</Title> </Title>
<Select <Select
mode={"multiple"} mode={"multiple"}
placeholder="Choose Category" placeholder="Choose Category"
onChange={async (val) => { onChange={async (val) => handleFilterCategory(val)}
setFilterCategories(val); style={{marginBottom: "20px", width: "100%"}}
store.product.filterByCategory = val; value={store.product.filterCategory || []}
await store.product.getDataSubCategories();
}}
style={{ marginBottom: "20px", width: "100%" }}
> >
{store.category.data.map((item) => ( {store.category.data.map((item) => (
<Option value={item.id} key={item.id}> <Option value={item.id} key={item.id}>
{item.name} {item.name}
</Option> </Option>
))} ))}
</Select> </Select>
</Col> </Col>
@ -443,17 +450,18 @@ export const ProductComponent = observer((props) => {
Filter Sub-Categories Filter Sub-Categories
</Title> </Title>
<Select <Select
mode={"multiple"} mode={"multiple"}
placeholder="Choose Sub-Category" placeholder="Choose Sub-Category"
onChange={(val) => { onChange={(val) => {
setFilterSubCategories(val); setFilterSubCategories(val);
}} }}
style={{ marginBottom: "20px", width: "100%" }} style={{marginBottom: "20px", width: "100%"}}
value={filterSubCategories}
> >
{store.product.dataSubCategories.map((item) => ( {store.product.dataSubCategories.map((item) => (
<Option value={item.id} key={item.id}> <Option value={item.id} key={item.id}>
{item.name} {item.name}
</Option> </Option>
))} ))}
</Select> </Select>
</Col> </Col>

45
src/pages/Membership/Membership.js
View File

@ -1,35 +1,16 @@
import React, { useContext, useEffect, useState } from "react"; import React, {useContext, useEffect, useState} from "react";
import { import {Button, Card, Col, Divider, Form, Input, List, message, Modal, Row, Select, Space, Table, Tag,} from "antd";
Button, import {useStore} from "../../utils/useStore";
Card, import {observer} from "mobx-react-lite";
Col, import {DownloadOutlined, PlusSquareOutlined,} from "@ant-design/icons";
Divider, import {MembershipModal} from "./MembershipModal";
Form, import {BreadcumbComponent} from "../../component/BreadcumbComponent";
Input, import {LINKS} from "../../routes/app";
List, import {useHistory} from "react-router-dom";
message, import {ModalLoaderContext} from "../../utils/modal";
Modal,
Row,
Select,
Space,
Table,
Tag,
} from "antd";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import {
DownloadOutlined,
ExclamationCircleOutlined,
PlusSquareOutlined,
} from "@ant-design/icons";
import { MembershipModal } from "./MembershipModal";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app";
import { Link, useHistory } from "react-router-dom";
import { ModalLoaderContext } from "../../utils/modal";
const { Search } = Input; const {Search} = Input;
const { Option } = Select; const {Option} = Select;
export const Membership = observer(() => { export const Membership = observer(() => {
const history = useHistory(); const history = useHistory();
const [form] = Form.useForm(); const [form] = Form.useForm();
@ -357,7 +338,7 @@ export const Membership = observer(() => {
store.membership.pageSize = page.pageSize; store.membership.pageSize = page.pageSize;
store.membership.page = pageNumber - 1; store.membership.page = pageNumber - 1;
modalLoader.setLoading(true); modalLoader.setLoading(true);
//await getData(); await getData();
modalLoader.setLoading(false); modalLoader.setLoading(false);
}} }}
/> />

12
src/pages/Payback/Payback.js
View File

@ -6,6 +6,7 @@ import {CheckCircleOutlined, CloseOutlined, FilterOutlined,} from "@ant-design/i
import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app"; import {LINKS} from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal"; import {ModalLoaderContext} from "../../utils/modal";
import {appConfig} from "../../config/app";
const {Search} = Input; const {Search} = Input;
@ -39,12 +40,11 @@ export const Payback = observer(() => {
dataIndex: "image_prove", dataIndex: "image_prove",
key: "image_prove", key: "image_prove",
render: (text, record) => ( render: (text, record) => (
<Image <Image
src={record.picture} src={`${appConfig.apiUrl}/config/image/${text}`}
style={{width: 50, height: 50}} style={{width: '5vw'}}
shape="circle" alt={record.id}
alt="avatar" />
/>
), ),
}, },
{ {

15
src/pages/Payback/PaybackModal.js
View File

@ -12,7 +12,7 @@ export const PaybackModal = ({initialData}) => {
const [image, setImage] = useState(""); const [image, setImage] = useState("");
const [fileList, setFileList] = useState([]); const [fileList, setFileList] = useState([]);
const [previewImage, setPreviewImage] = useState(""); const [previewImage, setPreviewImage] = useState("");
const [previewVisible, setPreviewVisible] = useState(false); const [responseFilename, setResponseFilename] = useState("");
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const modalLoader = useContext(ModalLoaderContext); const modalLoader = useContext(ModalLoaderContext);
@ -34,6 +34,7 @@ export const PaybackModal = ({initialData}) => {
const file = args.file; const file = args.file;
const res = await http.upload(file); const res = await http.upload(file);
setImage(`${appConfig.apiUrl}/config/image/${res.body.filename}`); setImage(`${appConfig.apiUrl}/config/image/${res.body.filename}`);
setResponseFilename(res.body.filename);
setFileList([{ setFileList([{
uid: '-1', uid: '-1',
name: 'image', name: 'image',
@ -62,7 +63,8 @@ export const PaybackModal = ({initialData}) => {
try { try {
const request = { const request = {
...data, ...data,
destination: store.authentication.profileData.superior?.id destination: store.authentication.profileData.superior?.id,
image_prove: responseFilename
} }
await store.payback.create(request); await store.payback.create(request);
message.success("Success Add Payback"); message.success("Success Add Payback");
@ -74,21 +76,21 @@ export const PaybackModal = ({initialData}) => {
message.error(e.message); message.error(e.message);
} }
modalLoader.setLoading(false); modalLoader.setLoading(false);
form.resetFields();
store.payback.visibleModalPayback = false; store.payback.visibleModalPayback = false;
form.resetFields();
setImage(""); setImage("");
setFileList([]); setFileList([]);
setPreviewImage(""); setPreviewImage("");
setPreviewVisible(false); setResponseFilename("");
}; };
const handleCancel = () => { const handleCancel = () => {
form.resetFields(); form.resetFields();
store.payback.visibleModalPayback = false;
setImage(""); setImage("");
setFileList([]); setFileList([]);
setPreviewImage(""); setPreviewImage("");
setPreviewVisible(false); setResponseFilename("");
store.payback.visibleModalPayback = false;
} }
return ( return (
@ -126,7 +128,6 @@ export const PaybackModal = ({initialData}) => {
fileList={fileList} fileList={fileList}
onPreview={(file) => { onPreview={(file) => {
setPreviewImage(file.url || file.filename); setPreviewImage(file.url || file.filename);
setPreviewVisible(file.url || file.filename);
}} }}
showUploadList={true} showUploadList={true}
onChange={handleChange} onChange={handleChange}

2
src/pages/Product/Product.js
View File

@ -21,7 +21,7 @@ export const Product = observer(() => {
await Promise.allSettled([ await Promise.allSettled([
store.supplier.getData(), store.supplier.getData(),
store.category.getData(), store.category.getData(),
store.category.getDataSubCategories(), store.product.getDataSubCategories(),
]); ]);
await store.product.getData(); await store.product.getData();
modalLoader.setLoading(false); modalLoader.setLoading(false);

4
src/store/product.js
View File

@ -21,7 +21,7 @@ export class Product {
pageSizeSubCategories = 10 pageSizeSubCategories = 10
dataSubCategories = []; dataSubCategories = [];
total_dataSubCategories = 0; total_dataSubCategories = 0;
filterByCategory = null; filterCategory = null;
constructor(ctx) { constructor(ctx) {
this.ctx = ctx; this.ctx = ctx;
@ -45,7 +45,7 @@ export class Product {
async getDataSubCategories() { async getDataSubCategories() {
try { try {
const response = await http.get(`/product/sub-categories?category=${this.filterByCategory}&page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`); const response = await http.get(`/product/sub-categories?category=${this.filterCategory}&page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
this.dataSubCategories = response.body.data.map((item, idx) => { this.dataSubCategories = response.body.data.map((item, idx) => {
item.key = idx; item.key = idx;
return item return item

4
src/store/role.js
View File

@ -2,8 +2,8 @@ import {makeAutoObservable} from "mobx";
import {http} from "../utils/http"; import {http} from "../utils/http";
export class Role { export class Role {
page = null; page = 0;
pageSize = null; pageSize = 10;
data = []; data = [];
total_data = 0; total_data = 0;