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 2021-12-10 15:05:14 +07:00
commit 555775d353
9 changed files with 118 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/component/ProductComponent.js
View File

@ -5,6 +5,7 @@ import {ExclamationCircleOutlined} from "@ant-design/icons";
import {useHistory} from "react-router-dom";
import {capitalize} from "lodash";
import {useStore} from "../utils/useStore";
import {LINKS} from "../routes/app";
export const ProductComponent = observer((props) => {
const store = useStore();
@ -113,7 +114,7 @@ export const ProductComponent = observer((props) => {
console.log(id);
await store.product.delete(id);
message.success("Data Berhasil Dihapus");
history.push("/app/product");
history.push(LINKS.PRODUCT);
} catch (err) {
console.log("error", err);
message.error("Gagal menghapus");

42
src/pages/App/DesktopLayout.js
View File

@ -2,8 +2,8 @@ import React, {useState} from "react";
import {Button, Drawer, Layout, Menu, Popover, Typography,} from "antd";
import {MenuList} from "./MenuList";
import {Link, useHistory} from "react-router-dom";
import {CalendarOutlined, HomeOutlined, MenuOutlined, UserOutlined,} from "@ant-design/icons";
import {AppRoute} from "../../routes/app";
import {HomeOutlined, MenuOutlined, UserOutlined,} from "@ant-design/icons";
import {AppRoute, LINKS} from "../../routes/app";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {useMediaQuery} from "react-responsive";
@ -104,35 +104,41 @@ export const DesktopLayout = observer(() => {
>
<Menu>
<Menu.Item key="home">
<Link to={'/app/home'}>
<Link to={LINKS.HOME}>
<HomeOutlined/>
<span>Home</span>
</Link>
</Menu.Item>
<Menu.Item key="membership">
<Link to={'/app/membership'}>
{store.authentication.userData.role !== 'Retail' && <Menu.Item key="membership">
<Link to={LINKS.MEMBERSHIP}>
<HomeOutlined/>
<span>Membership</span>
</Link>
</Menu.Item>
<Menu.Item key="product">
<Link to={'/app/product'}>
</Menu.Item>}
{store.authentication.userData.role !== 'Retail' && <Menu.Item key="product">
<Link to={LINKS.PRODUCT}>
<HomeOutlined/>
<span>Product</span>
</Link>
</Menu.Item>
<Menu.Item key="transaction">
<Link to={'/app/transaction'}>
</Menu.Item>}
{store.authentication.userData.role === 'Retail' && <Menu.Item key="transaction">
<Link to={LINKS.TRANSACTION}>
<HomeOutlined/>
<span>Transaction</span>
</Link>
</Menu.Item>
<Menu.Item key="about">
<Link to={'/app/about'}>
<CalendarOutlined/>
<span>About</span>
</Menu.Item>}
<Menu.Item key="profile">
<Link to={LINKS.PROFILE}>
<UserOutlined/>
<span>Profile</span>
</Link>
</Menu.Item>
{/*<Menu.Item key="about">*/}
{/* <Link to={'/app/about'}>*/}
{/* <CalendarOutlined/>*/}
{/* <span>About</span>*/}
{/* </Link>*/}
{/*</Menu.Item>*/}
<Menu.Divider style={{background: "transparent", paddingTop: 15}}/>
</Menu>
</div>
@ -261,7 +267,7 @@ export const DesktopLayout = observer(() => {
mode="inline"
>
<Menu.Item>
<Link to="/app/profile">
<Link to={LINKS.PROFILE}>
<span>Profile</span>
</Link>
</Menu.Item>
@ -352,7 +358,7 @@ export const DesktopLayout = observer(() => {
mode="inline"
>
<Menu.Item key={'profile'}>
<Link to="/app/profile">
<Link to={LINKS.PROFILE}>
<span>Profile</span>
</Link>
</Menu.Item>

19
src/pages/App/MenuList.js
View File

@ -1,9 +1,10 @@
import React, {useEffect, useState} from "react";
import {Menu} from "antd";
import {Link} from "react-router-dom";
import {HomeOutlined,} from "@ant-design/icons";
import {HomeOutlined, UserOutlined,} from "@ant-design/icons";
import {observer} from "mobx-react-lite";
import {useStore} from "../../utils/useStore";
import {LINKS} from "../../routes/app";
const {SubMenu} = Menu;
@ -34,29 +35,35 @@ export const MenuList = observer((props) => {
forceSubMenuRender={true}
>
<Menu.Item key="home">
<Link to={'/app/home'}>
<Link to={LINKS.HOME}>
<HomeOutlined/>
<span>Home</span>
</Link>
</Menu.Item>
{store.authentication.userData.role !== 'Retail' && <Menu.Item key="membership">
<Link to={'/app/membership'}>
<Link to={LINKS.MEMBERSHIP}>
<HomeOutlined/>
<span>Membership</span>
</Link>
</Menu.Item>}
{store.authentication.userData.role !== 'Retail' && <Menu.Item key="product">
<Link to={'/app/product'}>
<Link to={LINKS.PRODUCT}>
<HomeOutlined/>
<span>Product</span>
</Link>
</Menu.Item>}
{store.authentication.userData.role === 'Retail' && <Menu.Item key="transaction">
<Link to={'/app/transaction'}>
{store.authentication.userData.role === ('Retail' || 'Admin') && <Menu.Item key="transaction">
<Link to={LINKS.TRANSACTION}>
<HomeOutlined/>
<span>Transaction</span>
</Link>
</Menu.Item>}
<Menu.Item key="profile">
<Link to={LINKS.PROFILE}>
<UserOutlined/>
<span>Profile</span>
</Link>
</Menu.Item>
{/*<Menu.Item key="about">*/}
{/* <Link to={'/app/about'}>*/}
{/* <CalendarOutlined/>*/}

3
src/pages/Login/Login.js
View File

@ -3,6 +3,7 @@ import {observer} from 'mobx-react-lite';
import {useStore} from "../../utils/useStore";
import {Button, Card, Col, Form, Input, message, Row, Typography} from 'antd';
import {useHistory} from "react-router-dom";
import {LINKS} from "../../routes/app";
export const Login = observer(() => {
const store = useStore();
@ -15,7 +16,7 @@ export const Login = observer(() => {
username: params.username,
password: params.password,
});
history.push('/app/home');
history.push(LINKS.HOME);
} catch (e) {
if (e.response?.body?.message) {
message.error(e.response.body.message);

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

@ -5,6 +5,7 @@ import {observer} from "mobx-react-lite";
import {ExclamationCircleOutlined, FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
import {MembershipModal} from "./MembershipModal";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app";
const {Search} = Input;
@ -88,12 +89,12 @@ export const Membership = observer(() => {
const routeData = [
{
route: "/app/home",
route: LINKS.HOME,
name: "Home",
},
{
route: "/app/membership",
name: <span style={{ fontWeight: "bold" }}>Membership</span>,
route: LINKS.MEMBERSHIP,
name: <span style={{fontWeight: "bold"}}>Membership</span>,
},
];

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

@ -5,6 +5,7 @@ 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";
const {TabPane} = Tabs;
const {Search} = Input;
@ -35,11 +36,11 @@ export const Product = observer(() => {
const routeData = [
{
route: "/app/home",
route: LINKS.HOME,
name: "Home",
},
{
route: "/app/product",
route: LINKS.PRODUCT,
name: <span style={{fontWeight: 'bold'}}>Product</span>,
},
];

48
src/pages/Profile/Profile.js Normal file
View File

@ -0,0 +1,48 @@
import React from "react";
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(" ")}>
<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>
)
};

5
src/pages/Transaction/Transaction.js
View File

@ -3,6 +3,7 @@ import {Button, Card, Col, Input, Row, Tabs} from "antd";
import {FilterOutlined,} from "@ant-design/icons";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {Pulsa} from "./Pulsa";
import {LINKS} from "../../routes/app";
const {TabPane} = Tabs;
const {Search} = Input;
@ -13,11 +14,11 @@ export const Transaction = () => {
};
const routeData = [
{
route: "/app/home",
route: LINKS.HOME,
name: "Home",
},
{
route: "/app/transaction",
route: LINKS.TRANSACTION,
name: <span style={{fontWeight: 'bold'}}>Transaction</span>,
},
];

25
src/routes/app.js
View File

@ -4,26 +4,39 @@ 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",
ABOUT: "/app/about",
MEMBERSHIP: "/app/membership",
PRODUCT: "/app/product",
TRANSACTION: "/app/transaction",
PROFILE: "/app/profile",
};
export const AppRoute = () => {
return <Switch>
<Route path={"/app/home"}>
<Route path={LINKS.HOME}>
<Home/>
</Route>
<Route path={"/app/membership"}>
<Route path={LINKS.MEMBERSHIP}>
<Membership/>
</Route>
<Route path={"/app/product"}>
<Route path={LINKS.PRODUCT}>
<Product/>
</Route>
<Route path={"/app/transaction"}>
<Route path={LINKS.TRANSACTION}>
<Transaction/>
</Route>
<Route path={"/app/about"}>
<Route path={LINKS.ABOUT}>
<About/>
</Route>
<Route path={LINKS.PROFILE}>
<Profile/>
</Route>
<Route path="/app" exact>
<Redirect to={'/app/home'}/>
<Redirect to={LINKS.HOME}/>
</Route>
</Switch>
}