From 7852e12d42a004952e23c56beb22e4c3db4ac30c Mon Sep 17 00:00:00 2001 From: ajat91 Date: Thu, 9 Dec 2021 20:04:37 +0700 Subject: [PATCH] Pages Product --- src/config/app.js | 2 +- src/pages/Product/Product.js | 60 ++++++++- src/pages/Product/Pulsa.js | 227 ++++++++++++++++++-------------- src/pages/Product/PulsaModal.js | 213 ++++++++++++++++++++++++++++++ src/store/categories.js | 40 ++++++ src/store/index.js | 4 + src/store/product.js | 40 ++++++ src/store/user.js | 2 +- 8 files changed, 482 insertions(+), 106 deletions(-) create mode 100644 src/pages/Product/PulsaModal.js create mode 100644 src/store/categories.js create mode 100644 src/store/product.js diff --git a/src/config/app.js b/src/config/app.js index 92eae9f..36a03ee 100644 --- a/src/config/app.js +++ b/src/config/app.js @@ -1,5 +1,5 @@ export const appConfig = { - apiUrl: 'https://api-reconcile.movic.id' + apiUrl: 'http://localhost:3222/v1' }; //export default appConfig; diff --git a/src/pages/Product/Product.js b/src/pages/Product/Product.js index edbefb0..72e5203 100644 --- a/src/pages/Product/Product.js +++ b/src/pages/Product/Product.js @@ -1,16 +1,30 @@ -import React from "react"; -import {Button, Card, Col, Input, Row, Tabs} from "antd"; +import React,{useState,useEffect} from "react"; +import {Button, Card, Col, Input, Row, Tabs,message} from "antd"; import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons"; import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import {Pulsa} from "./Pulsa"; +import {PulsaModal} from "./PulsaModal"; +import {useStore} from "../../utils/useStore"; +import {observer} from "mobx-react-lite"; + + + const {TabPane} = Tabs; const {Search} = Input; -export const Product = () => { +export const Product =observer(() => { + const [visibleModal, setVisibleModal] = useState(false) + const [initialData, setInitialData] = useState({}) + const [confirmLoading, setConfirmLoading] = useState(false); + const [isLoading, setIsLoading] = useState(false); + const store = useStore(); + + const callback = (key) => { console.log(key); }; + const routeData = [ { route: "/app/home", @@ -21,6 +35,32 @@ export const Product = () => { name: Product, }, ]; + const onSubmit = async (data) => { + if (initialData.id) { + setInitialData({}) + setConfirmLoading(true); + try { + await store.product.update(initialData.id, data) + message.success("Success Update Data Member") + } catch (e) { + message.error("Failed Update Data Member") + } + setConfirmLoading(false); + setVisibleModal(false); + } else { + setInitialData({}) + setConfirmLoading(true); + try { + await store.product.create(data) + message.success("Success Add New Member") + } catch (e) { + console.log(e, "apa errornya") + message.error("Failed Add Member") + } + setConfirmLoading(false); + setVisibleModal(false); + } + } return (
@@ -37,7 +77,7 @@ export const Product = () => { placeholder="input search text" style={{width: 200, marginRight: 10}} /> - @@ -65,6 +105,16 @@ export const Product = () => { + { + onSubmit(data) + }} + onCancel={() => { + setInitialData({}) + setVisibleModal(false); + }}/>
); -}; +}); diff --git a/src/pages/Product/Pulsa.js b/src/pages/Product/Pulsa.js index b633fd1..6525fdc 100644 --- a/src/pages/Product/Pulsa.js +++ b/src/pages/Product/Pulsa.js @@ -1,100 +1,129 @@ -import React from "react"; -import {Button, Space, Table, Tag} from "antd"; +import React, { useEffect, useState, useParams } from "react"; +import { Button, Space, Table, Tag, Modal, message } from "antd"; +import { useStore } from "../../utils/useStore"; +import { observer } from "mobx-react-lite"; +import { ExclamationCircleOutlined } from "@ant-design/icons"; +import { useHistory } from "react-router-dom"; -export const Pulsa = () => { - const columns = [ - { - title: "Kode", - dataIndex: "kode", - key: "kode", - }, - { - title: "Produk", - dataIndex: "produk", - key: "produk", - }, - { - title: "Harga Beli", - dataIndex: "harga_beli", - key: "harga_beli", - }, - , - { - title: "Harga Jual", - dataIndex: "harga_jual", - key: "harga_beli", - }, - { - title: "Gangguan", - dataIndex: "gangguan", - key: "gangguan", - }, - { - title: "Tersedia", - dataIndex: "tersedia", - key: "tersedia", - }, - { - title: "Action", - key: "action", - render: (text, record) => ( - - - - - ), - }, - ]; - const dataSource = [ - { - key: "1", - kode: "BROP2", - produk: "DATA AXIS 2GB-60HR", - harga_beli: "Rp.10.000", - harga_beli: "Rp.10.000", - harga_jual: "Rp.40.000", - gangguan: Active, - tersedia: Ya, - }, - { - key: "2", - kode: "-", - produk: "-", - harga_beli: "-", - harga_beli: "-", - harga_jual: "-", - gangguan: Gangguan, - tersedia: Tidak, - }, - { - key: "3", - kode: "-", - produk: "-", - harga_beli: "-", - harga_beli: "-", - harga_jual: "-", - gangguan: Active, - tersedia: Ya, - }, - { - key: "4", - kode: "-", - produk: "-", - harga_beli: "-", - harga_beli: "-", - harga_jual: "-", - gangguan: Active, - tersedia: Ya, - } - ]; - return ( -
- - - ); -}; +export const Pulsa = observer(() => { + const store = useStore(); + const history = useHistory(); + const [visibleModal, setVisibleModal] = useState(false); + const [initialData, setInitialData] = useState({}); + const [confirmLoading, setConfirmLoading] = useState(false); + const [isLoading, setIsLoading] = useState(false); + useEffect(() => { + const init = async () => { + try { + setIsLoading(true); + await store.product.getData(); + setIsLoading(false); + } catch (e) { + setIsLoading(false); + } + }; + + init(); + }, []); + const columns = [ + { + title: "Kode", + dataIndex: "code", + key: "code", + }, + { + title: "Produk", + dataIndex: "name", + key: "name", + }, + { + title: "Harga Beli", + dataIndex: "price", + key: "price", + }, + , + { + title: "Harga Jual", + dataIndex: "mark_up_price", + key: "mark_up_price", + }, + { + title: "Gangguan", + dataIndex: "status", + key: "status", + render: (text, record) => ( + + {record?.status} + + ), + }, + { + title: "Tersedia", + dataIndex: "tersedia", + key: "tersedia", + render: (text, record) => ( + + {record?.status === "AKTIF" ? " Ya" : "Tidak"} + + ), + }, + { + title: "Action", + key: "action", + render: (text, record) => ( + + + + + ), + }, + ]; + const deleteData = async (id) => { + try { + console.log(id); + await store.product.delete(id); + message.success("Data Berhasil Dihapus"); + history.push("/app/product"); + } catch (err) { + console.log("error", err); + message.error("Gagal menghapus"); + } + }; + const handleDelete = (id) => { + Modal.confirm({ + title: "Are you sure delete this record?", + icon: , + okText: "Yes", + okType: "primary", + cancelText: "Cancel", + onOk() { + return deleteData(id); + }, + onCancel() { + console.log("Cancel"); + }, + }); + }; + return ( +
+
+ + ); +}); diff --git a/src/pages/Product/PulsaModal.js b/src/pages/Product/PulsaModal.js new file mode 100644 index 0000000..822e394 --- /dev/null +++ b/src/pages/Product/PulsaModal.js @@ -0,0 +1,213 @@ +// import React,{useEffect,useState} from "react"; +// import { Form, Input, Modal, Select } from "antd"; + +// export const PulsaModal = ({ visible, onCreate, onCancel, initialData }) => { +// const [form] = Form.useForm(); +// const { Option } = Select; +// const [visibleModal, setVisibleModal] = useState(false) +// const [initialData, setInitialData] = useState({}) +// const [confirmLoading, setConfirmLoading] = useState(false); +// const [isLoading, setIsLoading] = useState(false); +// useEffect(() => { +// const init = async () => { +// try { +// setIsLoading(true); +// await store.categories.getData(); +// setIsLoading(false); +// } catch (e) { +// setIsLoading(false); +// } +// }; + +// init(); +// }, []); + +// return ( +// { +// onSubmit(data) +// }} +// onCancel={() => { +// setInitialData({}) +// setVisibleModal(false); +// }} +// visible={visible} +// title={initialData.id ? "Edit Member" : "Create a new Member"} +// okText={initialData.id ? "Edit" : "Create"} +// cancelText="Cancel" +// onCancel={() => { +// form.resetFields(); +// onCancel(); +// }} +// onOk={() => { +// form +// .validateFields() +// .then((values) => { +// onCreate(values); +// form.resetFields(); +// }) +// .catch((info) => { +// console.log("Validate Failed:", info); +// }); +// }} +// > +//
+// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// ); +// }; +import React, { useState, useEffect } from "react"; +import { Form, Input, Modal, Select } from "antd"; +import { useStore } from "../../utils/useStore"; + +export const PulsaModal = ({ visible, onCreate, onCancel }) => { + const [form] = Form.useForm(); + const { Option } = Select; + const dataStatus = ["Active", "Inactive"]; + const store = useStore(); + const [visibleModal, setVisibleModal] = useState(false); + const [initialData, setInitialData] = useState({}); + const [confirmLoading, setConfirmLoading] = useState(false); + const [isLoading, setIsLoading] = useState(false); + const init = async () => { + try { + setIsLoading(true); + await store.categories.getData(); + setIsLoading(false); + } catch (e) { + setIsLoading(false); + } + }; + + useEffect(() => { + init(); + }, []); + + return ( + { + form.resetFields(); + onCancel(); + }} + onOk={() => { + form + .validateFields() + .then((values) => { + onCreate(values); + form.resetFields(); + }) + .catch((info) => { + console.log("Validate Failed:", info); + }); + }} + > +
+ + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/store/categories.js b/src/store/categories.js new file mode 100644 index 0000000..603aa3a --- /dev/null +++ b/src/store/categories.js @@ -0,0 +1,40 @@ +import {action, makeAutoObservable} from "mobx"; +import {http} from "../utils/http"; + +export class Categories { + page = 0; + pageSize = 10 + data = []; + total_data = 0 + + constructor(ctx) { + this.ctx = ctx; + makeAutoObservable(this); + } + + @action + async getData() { + const response = await http.get(`/product/sub-categories?page=${this.page}&pageSize=${this.pageSize}`); + console.log(response,'Data cate') + console.log(JSON.stringify(response.body.data),'Data') + + this.data = response.body.data ?? [] + this.total_data = response.body.total_data ?? 0 + } + + @action + async create(data) { + return await http.post('/user').send(data) + } + + @action + async update(id, data) { + return await http.put('/user/' + id).send(data); + } + + async delete(id) { + return await http.del('/product/' + id); + } +} + + diff --git a/src/store/index.js b/src/store/index.js index e3e59fb..e6250f3 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -2,12 +2,16 @@ import {UI} from "./ui"; import {Authentication} from "./authentication"; import {User} from "./user"; import {Membership} from "./membership"; +import {Product} from "./product"; +import {Categories} from "./categories"; export class Store { ui = new UI(this); authentication = new Authentication(this); user = new User(this); membership = new Membership(this); + product = new Product(this); + categories = new Categories(this); constructor() { } diff --git a/src/store/product.js b/src/store/product.js new file mode 100644 index 0000000..691a434 --- /dev/null +++ b/src/store/product.js @@ -0,0 +1,40 @@ +import {action, makeAutoObservable} from "mobx"; +import {http} from "../utils/http"; + +export class Product { + page = 0; + pageSize = 10 + data = []; + total_data = 0 + + constructor(ctx) { + this.ctx = ctx; + makeAutoObservable(this); + } + + @action + async getData() { + const response = await http.get(`/product?page=${this.page}&pageSize=${this.pageSize}`); + console.log(response,'Data') + console.log(JSON.stringify(response.body.data),'Data') + + this.data = response.body.data ?? [] + this.total_data = response.body.total_data ?? 0 + } + + @action + async create(data) { + return await http.post('/product').send(data) + } + + @action + async update(id, data) { + return await http.put('/user/' + id).send(data); + } + + async delete(id) { + return await http.del('/product/' + id); + } +} + + diff --git a/src/store/user.js b/src/store/user.js index 741da5b..00722be 100644 --- a/src/store/user.js +++ b/src/store/user.js @@ -6,7 +6,7 @@ export class User { @action async getData() { - this.data = (await http.get('/user')).body.data; + this.data = (await http.get('/product')).body.data; } }