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

.gitignore

@@ -24,3 +24,4 @@ yarn-error.log*
 
 /.idea
 /package-lock.json
+/yarn.lock

src/component/ProductComponent.js

@@ -177,9 +177,25 @@ export const ProductComponent = observer((props) => {
             <Table
                 style={{textAlign: "center"}}
                 columns={columns}
-                dataSource={props.data}
+                dataSource={store.product.data}
                 bordered
+                pagination={{
+                    pageSize: store.product.pageSize,
+                    total: store.product.total_data,
+                    current: store.product.page + 1,
+                    showSizeChanger: true,
+                    simple: false
+                }}
+                onChange={async (page) => {
+                    let pageNumber = page.current;
+                    store.product.pageSize = page.pageSize;
+                    store.product.page = pageNumber - 1;
+                    // store.membership.isLoading = true;
+                    await store.product.getData();
+                    // store.membership.isLoading = false;
+                }}
             />
+
             <Modal
                 visible={store.product.visibleModalProduct}
                 title={idData ? "Edit Product" : "Create a new Product"}

src/pages/Membership/Membership.js

@@ -132,8 +132,6 @@ export const Membership = observer(() => {
       cancelText: "Cancel",
       onOk() {
         try {
-          //TODO: minta apinya ke ka ilham ya, jangan di uncomment kalo pake api reconcile, nanti beneran ke apus datanya
-          // await store.membership.delete(record.id)
           message.success("Success Delete Data");
         } catch (e) {
           message.error("Failed Delete Data");
@@ -173,23 +171,24 @@ export const Membership = observer(() => {
             <Table
                 key="1"
                 hasEmpty
-              size={"small"}
                 columns={columns}
                 dataSource={store.membership.data}
                 bordered
-              // pagination={{
-              //   total: store.membership.total_data,
-              //   current: store.membership.page,
-              //   pageSize: store.membership.pageSize,
-              //   simple: true
-              // }}
-              // onChange={(page) => {
-              //   store.membership.pageSize = page.pageSize;
-              //   store.membership.page = page.current;
-              //   store.membership.getData();
-              // }}
-              // current={store.membership.page}
-              // loading={store.membership.pageSize}
+                pagination={{
+                  pageSize: store.membership.pageSize,
+                  total: store.membership.total_data,
+                  current: store.membership.page + 1,
+                  showSizeChanger: true,
+                  simple: false
+                }}
+                onChange={async (page) => {
+                  let pageNumber = page.current;
+                  store.membership.pageSize = page.pageSize;
+                  store.membership.page = pageNumber - 1;
+                  // store.membership.isLoading = true;
+                  await store.membership.getData();
+                  // store.membership.isLoading = false;
+                }}
             />
           )}
 

src/pages/Product/Product.js

@@ -76,9 +76,7 @@ export const Product = observer(() => {
                             tab={item.name}
                             key={item.id}
                         >
-                            <ProductComponent
-                                data={store.product.data}
-                            />
+                            <ProductComponent/>
                         </TabPane>
                     ))}
                 </Tabs>

src/pages/Profile/Profile.js

@@ -1,24 +1,48 @@
 import React from "react";
-import {PageHeader} from "antd";
+import {Button, Card, Col, Input, Row} from "antd";
+import {BreadcumbComponent} from "../../component/BreadcumbComponent";
+import {FilterOutlined, PlusSquareOutlined} from "@ant-design/icons";
+import {LINKS} from "../../routes/app";
+
+const {Search} = Input;
 
 export const Profile = () => {
+    const routeData = [
+        {
+            route: LINKS.HOME,
+            name: "Home",
+        },
+        {
+            route: LINKS.PROFILE,
+            name: <span style={{fontWeight: 'bold'}}>Profile</span>,
+        },
+    ];
+
     return (
         <div className={["ppob-container"].join(" ")}>
-            <PageHeader
-                style={{
-                    padding: 0,
-                    margin: 0,
-                    height: 40,
-                    backgroundColor: "transparent",
-                }}
-                title={"Profile"}
-            >
-            </PageHeader>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aut recusandae velit! Consequatur
-            corporis,
-            eum fuga, harum incidunt laboriosam minus necessitatibus neque non nostrum pariatur tempore. Dignissimos
-            impedit
-            rem tempora!
+            <BreadcumbComponent data={routeData}/>
+            <Card>
+                <Row style={{marginBottom: 20}}>
+                    <Col span={12}>
+                        <Button>
+                            <FilterOutlined/>
+                            Filter
+                        </Button>
+                    </Col>
+                    <Col span={12} style={{textAlign: "right"}}>
+                        <Search
+                            placeholder="input search text"
+                            style={{width: 200, marginRight: 10}}
+                        />
+                        <Button onClick={() => {
+                        }}>
+                            <PlusSquareOutlined/> New
+                        </Button>
+                    </Col>
+                </Row>
+                <div></div>
+            </Card>
+
         </div>
     )
 };

src/routes/app.js

@@ -4,6 +4,7 @@ import {About} from "../pages/About/About";
 import {Membership} from "../pages/Membership/Membership";
 import {Product} from "../pages/Product/Product";
 import {Transaction} from "../pages/Transaction/Transaction";
+import {Profile} from "../pages/Profile/Profile";
 
 export const LINKS = {
     HOME: "/app/home",
@@ -32,7 +33,7 @@ export const AppRoute = () => {
             <About/>
         </Route>
         <Route path={LINKS.PROFILE}>
-            <About/>
+            <Profile/>
         </Route>
         <Route path="/app" exact>
             <Redirect to={LINKS.HOME}/>