From 4d1cd215a1f73546b2bcaf6d94b2aaaced4e112c Mon Sep 17 00:00:00 2001 From: caturbgs Date: Fri, 10 Dec 2021 11:06:41 +0700 Subject: [PATCH 1/2] feat: misc change --- src/pages/Product/PulsaModal.js | 41 ++++++--------------------------- src/store/product.js | 2 +- 2 files changed, 8 insertions(+), 35 deletions(-) diff --git a/src/pages/Product/PulsaModal.js b/src/pages/Product/PulsaModal.js index dfdd69d..70834ec 100644 --- a/src/pages/Product/PulsaModal.js +++ b/src/pages/Product/PulsaModal.js @@ -3,12 +3,10 @@ import {Form, Input, Modal, Select} from "antd"; import {useStore} from "../../utils/useStore"; import {observer} from "mobx-react-lite"; -export const PulsaModal = observer(({visible, onCreate, onCancel, initialData}) => { +export const PulsaModal = observer(({visible, onCreate, onCancel, initialData, confirmLoading}) => { const [form] = Form.useForm(); const {Option} = Select; const store = useStore(); - const [visibleModal, setVisibleModal] = useState(false); - const [confirmLoading, setConfirmLoading] = useState(false); const [isLoading, setIsLoading] = useState(false); useEffect(() => { @@ -25,26 +23,6 @@ export const PulsaModal = observer(({visible, onCreate, onCancel, initialData}) init(); }, []); - - const subCategoriesOption = [ - , - - ]; - - const subCategoriesOption2 = store.product.dataSubCategories.slice().map(subCategory => { - return ( - - ) - }); - - console.log(store.product.dataSubCategories, 'subCategoriesOption2'); - return ( { - console.log("Validate Failed:", info); + console.error("Validate Failed:", info); }); }} > @@ -117,18 +95,13 @@ export const PulsaModal = observer(({visible, onCreate, onCancel, initialData}) rules={[{required: true, message: "Please select sub categories!"}]} > - {/**/} - {/* */} - {/**/} ); diff --git a/src/store/product.js b/src/store/product.js index 3959731..009fddf 100644 --- a/src/store/product.js +++ b/src/store/product.js @@ -33,7 +33,7 @@ export class Product { } async getDataSubCategories() { - const response = await http.get(`/product/sub-categories?pageSize=${this.pageSizeSubCategories}`); + const response = await http.get(`/product/sub-categories?page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`); this.dataSubCategories = response.body.data ?? [] this.total_dataSubCategories = response.body.count ?? 0 } From 6da88a97a8758e1b48b23c31a08a8737162ba781 Mon Sep 17 00:00:00 2001 From: caturbgs Date: Fri, 10 Dec 2021 12:05:49 +0700 Subject: [PATCH 2/2] feat: rewrite modal logic product --- src/component/ProductComponent.js | 154 ++++++++++++++++++++++++------ src/pages/Product/PulsaModal.js | 108 --------------------- src/store/product.js | 2 - 3 files changed, 125 insertions(+), 139 deletions(-) delete mode 100644 src/pages/Product/PulsaModal.js diff --git a/src/component/ProductComponent.js b/src/component/ProductComponent.js index 19649c0..a9c0fd3 100644 --- a/src/component/ProductComponent.js +++ b/src/component/ProductComponent.js @@ -1,17 +1,47 @@ -import React, {useState} from "react"; -import {Button, message, Modal, Space, Table, Tag} from "antd"; +import React, {useEffect, useState} from "react"; +import {Button, Form, Input, 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 {store} from "../utils/useStore"; -import {PulsaModal} from "../pages/Product/PulsaModal"; +import {useStore} from "../utils/useStore"; export const ProductComponent = observer((props) => { + const store = useStore(); + const [form] = Form.useForm(); + const {Option} = Select; const history = useHistory(); - const [initialData, setInitialData] = useState({}); + const [idData, setIdData] = useState(''); const [confirmLoading, setConfirmLoading] = useState(false); const [isLoading, setIsLoading] = useState(false); + const [visibleModal, setVisibleModal] = useState(false); + + useEffect(() => { + const init = async () => { + try { + setIsLoading(true); + await store.product.getDataSubCategories(); + setIsLoading(false); + } catch (e) { + setIsLoading(false); + } + }; + + init(); + }, []); + + const handleEditButton = (data) => { + console.log(data, "isi data") + form.setFieldsValue({ + name: data.name, + price: data.price, + base_price: data.base_price, + code: data.code, + status: data.status, + }); + setVisibleModal(true); + setIdData(data.id); + } const columns = [ { @@ -67,15 +97,10 @@ export const ProductComponent = observer((props) => { render: (text, record) => ( @@ -112,20 +137,23 @@ export const ProductComponent = observer((props) => { }); }; - const onSubmit = async (data) => { - if (initialData.id) { - setInitialData({}) + const handleCancel = () => { + setIdData('') + setVisibleModal(false); + } + + const handleSubmit = async (data) => { + if (idData != '') { setConfirmLoading(true); try { - await store.product.update(initialData.id, data) + await store.product.update(idData, data) message.success("Success Update Data Member") } catch (e) { message.error("Failed Update Data Member") } setConfirmLoading(false); - store.product.visibleModal = false; + setVisibleModal(false); } else { - setInitialData({}) setConfirmLoading(true); try { await store.product.create(data) @@ -135,7 +163,7 @@ export const ProductComponent = observer((props) => { message.error("Failed Add Member") } setConfirmLoading(false); - store.product.visibleModal = false; + setVisibleModal(false); } } @@ -147,16 +175,84 @@ export const ProductComponent = observer((props) => { dataSource={props.data} bordered /> - { - await onSubmit(data) - }} - onCancel={() => { - setInitialData({}) - store.product.visibleModal = false; - }}/> + { + form.resetFields(); + handleCancel(); + }} + onOk={() => { + form + .validateFields() + .then((values) => { + handleSubmit(values); + form.resetFields(); + }) + .catch((info) => { + console.error("Validate Failed:", info); + }); + }} + > +
+ + + + + + + + + + + + + + + + + + +
+ ); }); diff --git a/src/pages/Product/PulsaModal.js b/src/pages/Product/PulsaModal.js deleted file mode 100644 index 70834ec..0000000 --- a/src/pages/Product/PulsaModal.js +++ /dev/null @@ -1,108 +0,0 @@ -import React, {useEffect, useState} from "react"; -import {Form, Input, Modal, Select} from "antd"; -import {useStore} from "../../utils/useStore"; -import {observer} from "mobx-react-lite"; - -export const PulsaModal = observer(({visible, onCreate, onCancel, initialData, confirmLoading}) => { - const [form] = Form.useForm(); - const {Option} = Select; - const store = useStore(); - const [isLoading, setIsLoading] = useState(false); - - useEffect(() => { - const init = async () => { - try { - setIsLoading(true); - await store.product.getDataSubCategories(); - setIsLoading(false); - } catch (e) { - setIsLoading(false); - } - }; - - init(); - }, []); - - return ( - { - form.resetFields(); - onCancel(); - }} - onOk={() => { - form - .validateFields() - .then((values) => { - onCreate(values); - form.resetFields(); - }) - .catch((info) => { - console.error("Validate Failed:", info); - }); - }} - > -
- - - - - - - - - - - - - - - - - - -
- - ); -}); diff --git a/src/store/product.js b/src/store/product.js index 009fddf..aebf01e 100644 --- a/src/store/product.js +++ b/src/store/product.js @@ -18,8 +18,6 @@ export class Product { dataSubCategories = []; total_dataSubCategories = 0; - visibleModal = false; - constructor(ctx) { this.ctx = ctx; makeAutoObservable(this);