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

Pages Membership

Browse Source 
:exit

:q
This commit is contained in:
ajat91
2021-12-10 14:35:44 +07:00
committed by ajat91.sudrajat
parent cdaa4738b0 f0a6117141
commit d5251b0967
24 changed files with 12510 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/component/Modal/ModalLoader.js Normal file
View File

@@ -0,0 +1,19 @@
import React from 'react';
import {Modal, Spin} from "antd";
import {observer} from 'mobx-react-lite';
export const ModalLoader = observer(({isOpen, text}) => {
return <Modal
title={null}
footer={null}
visible={isOpen}
closable={false}
centered
style={{zIndex: 9999999999}}
>
<div style={{display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column'}}>
<Spin size={'large'}/>
<span style={{marginTop: 5}}>{text || 'Loading ...'}</span>
</div>
</Modal>
});

27
src/pages/App/App.js
View File

@@ -1,12 +1,11 @@
import React, {useEffect} from "react";
import React, {useEffect, useState} from "react";
import {DesktopLayout} from "./DesktopLayout";
import {useMediaQuery} from 'react-responsive';
import {useStore} from "../../utils/useStore";
import {useHistory} from "react-router-dom";
import {ModalLoader} from "../../component/Modal/ModalLoader";
import {ModalLoaderContext} from "../../utils/modal";
export const App = () => {
// TODO: add mobile layout
const store = useStore();
const mediaQuery = {
isDesktop: useMediaQuery({minWidth: 1024}),
@@ -15,11 +14,23 @@ export const App = () => {
isNotMobile: useMediaQuery({minWidth: 768}),
};
const [modalLoading, setModalLoading] = useState(false);
const [modalText, setModalText] = useState(undefined);
const modalContextValue = {
setLoading: setModalLoading,
setText: setModalText,
};
useEffect(() => {
store.ui.setMediaQuery(mediaQuery);
});
// const isMobileDevice = useMediaQuery({
// query: "(min-device-width: 480px)",
// });
return <DesktopLayout/>;
return (
<>
<ModalLoader isOpen={modalLoading} text={modalText}/>
<ModalLoaderContext.Provider value={modalContextValue}>
<DesktopLayout/>
</ModalLoaderContext.Provider>
</>
);
};

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

@@ -117,16 +117,16 @@ export const Membership = observer(() => {
key: "name",
render: (text, record) => record?.name ?? record?.username,
},
{
title: "Username",
dataIndex: "username",
key: "username",
},
{
title: "Role",
dataIndex: "roleName",
key: "role",
},
{
title: "Saldo",
dataIndex: ["coa","amount"],
key: ["coa","amount"],
},
{
title: "Status",
dataIndex: "isActive",

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

@@ -1,33 +1,32 @@
import React, {useEffect, useState} from "react";
import {Button, Card, Col, Input, Row, Select, Tabs, Upload} from "antd";
import React, {useContext, useEffect} from "react";
import {Button, Card, Col, Input, Row, Upload} from "antd";
import {FilterOutlined, PlusSquareOutlined, UploadOutlined,} from "@ant-design/icons";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {ProductComponent} from "../../component/ProductComponent";
import {LINKS} from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
const {TabPane} = Tabs;
const {Search} = Input;
const {Option} = Select;
export const Product = observer(() => {
const [isLoading, setIsLoading] = useState(false);
const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
modalLoader.setLoading(true);
await Promise.allSettled([
store.supplier.getData(),
store.product.getDataCategories(),
store.category.getData(),
]);
await store.product.getData();
setIsLoading(false);
modalLoader.setLoading(false);
} catch (e) {
setIsLoading(false);
modalLoader.setLoading(false);
}
};

10
src/store/category.js
View File

@@ -23,10 +23,10 @@ export class Category {
try {
const response = await http.get(`/product/categories?page=${this.page}&pageSize=${this.pageSize}`);
this.data = response.body.data.map((item, idx) => {
item.key = idx;
return item
}) ?? []
this.total_data = response.body.total_data ?? 0
item.key = idx;
return item
}) ?? []
this.total_data = response?.body?.count ?? 0
} catch (e) {
console.log(e);
}
@@ -55,7 +55,7 @@ export class Category {
return item
}) ?? []
this.total_dataCategories = response.body.total_data ?? 0
this.total_dataCategories = response?.body?.count ?? 0
if (this.dataCategories.length > 0) {
this.filterCategory = this.dataCategories[0].id
}

2
src/store/commission.js
View File

@@ -32,7 +32,7 @@ export class Commission {
return item
}) ?? []
this.total_data = response.body.total_data ?? 0
this.total_data = response?.body?.count ?? 0
} catch (e) {
console.error(e);
}

4
src/store/membership.js
View File

@@ -23,7 +23,7 @@ export class Membership {
return item
}) ?? []
this.total_data = response.body.total_data ?? 0
this.total_data = response?.body?.count ?? 0
} catch (e) {
console.error(e);
}
@@ -40,7 +40,7 @@ export class Membership {
return item
}) ?? []
this.total_data = response.body.total_data ?? 0
this.total_data = response?.body?.count ?? 0
} catch (e) {
console.error(e);
}

4
src/store/payback.js
View File

@@ -1,5 +1,5 @@
import { makeAutoObservable } from "mobx";
import { http } from "../utils/http";
import {makeAutoObservable} from "mobx";
import {http} from "../utils/http";
export class Payback {
page = 0;

2
src/store/product.js
View File

@@ -36,7 +36,7 @@ export class Product {
return item
}) ?? []
this.total_data = response.body.total_data ?? 0
this.total_data = response?.body?.count ?? 0
} catch (e) {
console.error(e);
}

6
src/store/role.js
View File

@@ -1,5 +1,5 @@
import { makeAutoObservable } from "mobx";
import { http } from "../utils/http";
import {makeAutoObservable} from "mobx";
import {http} from "../utils/http";
export class Role {
page = null;
@@ -20,7 +20,7 @@ export class Role {
}&pageSize=${this.pageSize}`
);
this.data = response.body.data ?? [];
this.total_data = response.body.total_data ?? 0;
this.total_data = response?.body?.count ?? 0;
} catch (e) {
console.error(e);
}

2
src/store/subcategory.js
View File

@@ -33,7 +33,7 @@ export class Subcategory {
return item
}) ?? []
this.total_data = response.body.total_data ?? 0
this.total_data = response?.body?.count ?? 0
} catch (e) {
console.error(e);
}

6
src/store/transaction.js
View File

@@ -35,7 +35,7 @@ export class Transaction {
try {
const response = await http.get(`/product/by-categories-all?sub-category=${this.filterSubCategory}&page=${this.page}&pageSize=${this.pageSize}`);
this.data = response.body.data ?? []
this.total_data = response.body.total_data ?? 0
this.total_data = response?.body?.count ?? 0
} catch (e) {
console.error(e);
}
@@ -56,7 +56,7 @@ export class Transaction {
const response = await http.get(`/product/categories?page=${this.pageCategories}&pageSize=${this.pageSizeCategories}`);
this.dataCategories = response.body.data ?? []
this.total_dataCategories = response.body.total_data ?? 0
this.total_dataCategories = response?.body?.count ?? 0
if (this.dataCategories.length > 0) {
this.filterCategory = this.dataCategories[0].id
}
@@ -70,7 +70,7 @@ export class Transaction {
const response = await http.get(`/transaction/history?page=${this.pageHistoryTransaction}`);
this.dataHistoryTransaction = response.body.data ?? []
this.total_dataHistoryTransaction = response.body.total_data ?? 0
this.total_dataHistoryTransaction = response?.body?.count ?? 0
} catch (e) {
console.error(e);
}

3
src/utils/modal.js Normal file
View File

@@ -0,0 +1,3 @@
import React from "react";
export const ModalLoaderContext = React.createContext(null);