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

Role Access

Browse Source
This commit is contained in:
ajat91.sudrajat 2021-12-22 17:52:05 +07:00
parent 9460935e0a
commit 78626fd6e9
4 changed files with 199 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

169
src/component/ProductComponent.js
View File

@ -1,18 +1,33 @@
import React, {useContext, useState} from "react"; import React, { useContext, useState } from "react";
import {Button, Col, Divider, Form, Input, List, message, Modal, Row, Select, Table, Tag, Typography,} from "antd"; import {
import {observer} from "mobx-react-lite"; Button,
import {ExclamationCircleOutlined} from "@ant-design/icons"; Col,
import {useHistory} from "react-router-dom"; Divider,
import {useStore} from "../utils/useStore"; Form,
import {LINKS} from "../routes/app"; Input,
import {ModalLoaderContext} from "../utils/modal"; InputNumber,
List,
message,
Modal,
Row,
Select,
Table,
Tag,
Typography,
} from "antd";
import { observer } from "mobx-react-lite";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import { useHistory } from "react-router-dom";
import { useStore } from "../utils/useStore";
import { LINKS } from "../routes/app";
import { ModalLoaderContext } from "../utils/modal";
const {Title, Text} = Typography; const { Title, Text } = Typography;
export const ProductComponent = observer((props) => { export const ProductComponent = observer((props) => {
const store = useStore(); const store = useStore();
const [form] = Form.useForm(); const [form] = Form.useForm();
const {Option} = Select; const { Option } = Select;
const history = useHistory(); const history = useHistory();
const [idData, setIdData] = useState(""); const [idData, setIdData] = useState("");
const [filterSupplier, setFilterSupplier] = useState([]); const [filterSupplier, setFilterSupplier] = useState([]);
@ -49,20 +64,20 @@ export const ProductComponent = observer((props) => {
dataIndex: "current_price_price", dataIndex: "current_price_price",
key: "current_price_price", key: "current_price_price",
render: (text) => render: (text) =>
new Intl.NumberFormat("id-ID", { new Intl.NumberFormat("id-ID", {
style: "currency", style: "currency",
currency: "IDR", currency: "IDR",
}).format(text), }).format(text),
}, },
{ {
title: "Harga Jual", title: "Harga Jual",
dataIndex: "mark_up_price", dataIndex: "mark_up_price",
key: "mark_up_price", key: "mark_up_price",
render: (text) => render: (text) =>
new Intl.NumberFormat("id-ID", { new Intl.NumberFormat("id-ID", {
style: "currency", style: "currency",
currency: "IDR", currency: "IDR",
}).format(text), }).format(text),
}, },
// { // {
// title: "Gangguan", // title: "Gangguan",
@ -94,14 +109,14 @@ export const ProductComponent = observer((props) => {
title: "Action", title: "Action",
key: "action", key: "action",
render: (text, record) => ( render: (text, record) => (
<Button <Button
onClick={async () => { onClick={async () => {
history.push(LINKS.DETAILPRODUCT.replace(":id", record.id)); history.push(LINKS.DETAILPRODUCT.replace(":id", record.id));
//console.log(record.id) //console.log(record.id)
}} }}
> >
Detail Detail
</Button> </Button>
), ),
}, },
]; ];
@ -207,12 +222,12 @@ export const ProductComponent = observer((props) => {
const footerLayoutFilter = [ const footerLayoutFilter = [
<Button <Button
key={"remove"} key={"remove"}
onClick={handleRemoveFilter} onClick={handleRemoveFilter}
style={{ style={{
backgroundColor: "#e74e5e", backgroundColor: "#e74e5e",
color: "#fff", color: "#fff",
}} }}
> >
Remove Filter Remove Filter
</Button>, </Button>,
@ -302,9 +317,7 @@ export const ProductComponent = observer((props) => {
<small>{item.product_name}</small> <br /> <small>{item.product_name}</small> <br />
<small>Harga Beli : {item.current_price_price}</small> <small>Harga Beli : {item.current_price_price}</small>
<br /> <br />
<small> <small>Harga Jual : {item.mark_up_price}</small>
Harga Jual : {item.mark_up_price}
</small>
</p> </p>
<p></p> <p></p>
</div> </div>
@ -318,10 +331,14 @@ export const ProductComponent = observer((props) => {
}} }}
> >
<Tag <Tag
color={item?.product_status === "ACTIVE" ? "blue" : "#E3E8EE"} color={
item?.product_status === "ACTIVE" ? "blue" : "#E3E8EE"
}
style={{ color: "#4F566B" }} style={{ color: "#4F566B" }}
> >
{item?.product_status === "ACTIVE" ? " Tersedia" : "Tidak"} {item?.product_status === "ACTIVE"
? " Tersedia"
: "Tidak"}
</Tag> </Tag>
</p> </p>
</div> </div>
@ -367,14 +384,26 @@ export const ProductComponent = observer((props) => {
label="Price" label="Price"
rules={[{ required: true, message: "Please input price!" }]} rules={[{ required: true, message: "Please input price!" }]}
> >
<Input /> <InputNumber
style={{ width: "100%" }}
formatter={(value) =>
`Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")}
/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="markUpPrice" name="markUpPrice"
label="Mark Up Price" label="Mark Up Price"
rules={[{ required: true, message: "Please input mark up price!" }]} rules={[{ required: true, message: "Please input mark up price!" }]}
> >
<Input /> <InputNumber
style={{ width: "100%" }}
formatter={(value) =>
`Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")}
/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="code" name="code"
@ -402,9 +431,9 @@ export const ProductComponent = observer((props) => {
> >
<Select placeholder="Select Sub Category" allowClear> <Select placeholder="Select Sub Category" allowClear>
{store.category.dataSubCategories.map((item) => ( {store.category.dataSubCategories.map((item) => (
<Option value={item.id} key={item.id}> <Option value={item.id} key={item.id}>
{item.name} {item.name}
</Option> </Option>
))} ))}
</Select> </Select>
</Form.Item> </Form.Item>
@ -422,18 +451,18 @@ export const ProductComponent = observer((props) => {
Filter Supplier Filter Supplier
</Title> </Title>
<Select <Select
mode={"multiple"} mode={"multiple"}
placeholder="Choose Supplier" placeholder="Choose Supplier"
onChange={(val) => { onChange={(val) => {
setFilterSupplier(val); setFilterSupplier(val);
}} }}
style={{marginBottom: "20px", width: "100%"}} style={{ marginBottom: "20px", width: "100%" }}
value={filterSupplier} value={filterSupplier}
> >
{store.supplier.data.map((item) => ( {store.supplier.data.map((item) => (
<Option value={item.id} key={item.id}> <Option value={item.id} key={item.id}>
{item.name} {item.name}
</Option> </Option>
))} ))}
</Select> </Select>
</Col> </Col>
@ -442,16 +471,16 @@ export const ProductComponent = observer((props) => {
Filter Categories Filter Categories
</Title> </Title>
<Select <Select
mode={"multiple"} mode={"multiple"}
placeholder="Choose Category" placeholder="Choose Category"
onChange={async (val) => handleFilterCategory(val)} onChange={async (val) => handleFilterCategory(val)}
style={{marginBottom: "20px", width: "100%"}} style={{ marginBottom: "20px", width: "100%" }}
value={store.product.filterCategory || []} value={store.product.filterCategory || []}
> >
{store.category.data.map((item) => ( {store.category.data.map((item) => (
<Option value={item.id} key={item.id}> <Option value={item.id} key={item.id}>
{item.name} {item.name}
</Option> </Option>
))} ))}
</Select> </Select>
</Col> </Col>
@ -460,18 +489,18 @@ export const ProductComponent = observer((props) => {
Filter Sub-Categories Filter Sub-Categories
</Title> </Title>
<Select <Select
mode={"multiple"} mode={"multiple"}
placeholder="Choose Sub-Category" placeholder="Choose Sub-Category"
onChange={(val) => { onChange={(val) => {
setFilterSubCategories(val); setFilterSubCategories(val);
}} }}
style={{marginBottom: "20px", width: "100%"}} style={{ marginBottom: "20px", width: "100%" }}
value={filterSubCategories} value={filterSubCategories}
> >
{store.product.dataSubCategories.map((item) => ( {store.product.dataSubCategories.map((item) => (
<Option value={item.id} key={item.id}> <Option value={item.id} key={item.id}>
{item.name} {item.name}
</Option> </Option>
))} ))}
</Select> </Select>
</Col> </Col>

2
src/pages/Membership/DetailUser.js
View File

@ -125,7 +125,7 @@ export const DetailUser = observer(() => {
<Row> <Row>
<Col span={24}> <Col span={24}>
<div> <div>
<Title strong level={3}>History User Transaction</Title> <Title strong level={3}>History Top Up</Title>
<Button style={{marginBottom: '1rem'}} onClick={() => { <Button style={{marginBottom: '1rem'}} onClick={() => {
console.log('clicked filter') console.log('clicked filter')

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

@ -1,16 +1,32 @@
import React, {useContext, useEffect, useState} from "react"; import React, { useContext, useEffect, useState } from "react";
import {Button, Card, Col, Divider, Form, Input, List, message, Modal, Row, Select, Space, Table, Tag,} from "antd"; import {
import {useStore} from "../../utils/useStore"; Button,
import {observer} from "mobx-react-lite"; Card,
import {DownloadOutlined, PlusSquareOutlined,} from "@ant-design/icons"; Col,
import {MembershipModal} from "./MembershipModal"; Divider,
import {BreadcumbComponent} from "../../component/BreadcumbComponent"; Form,
import {LINKS} from "../../routes/app"; Input,
import {useHistory} from "react-router-dom"; List,
import {ModalLoaderContext} from "../../utils/modal"; message,
Modal,
Row,
Select,
Space,
Table,
Tag,
InputNumber
} from "antd";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { DownloadOutlined, PlusSquareOutlined } from "@ant-design/icons";
import { MembershipModal } from "./MembershipModal";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app";
import { useHistory } from "react-router-dom";
import { ModalLoaderContext } from "../../utils/modal";
const {Search} = Input; const { Search } = Input;
const {Option} = Select; const { Option } = Select;
export const Membership = observer(() => { export const Membership = observer(() => {
const history = useHistory(); const history = useHistory();
const [form] = Form.useForm(); const [form] = Form.useForm();
@ -212,6 +228,7 @@ export const Membership = observer(() => {
}, },
]; ];
if (store.authentication.userData.role !== "Admin") columns.pop();
const routeData = [ const routeData = [
{ {
route: LINKS.HOME, route: LINKS.HOME,
@ -385,9 +402,14 @@ export const Membership = observer(() => {
<div style={{}}> <div style={{}}>
<p> <p>
<small>Role : {item.roleName}</small> <br /> <small>Role : {item.roleName}</small> <br />
<small>Saldo Supplier : {item.coa.amount}</small>{" "} <small>
Saldo Supplier : {item.coa.amount}
</small>{" "}
<br />
<small>
Saldo System : {item.coa.amount}
</small>{" "}
<br /> <br />
<small>Saldo System : {item.coa.amount}</small> <br />
</p> </p>
</div> </div>
} }
@ -461,7 +483,13 @@ export const Membership = observer(() => {
label="Amount" label="Amount"
rules={[{ required: true, message: "Please input amount!" }]} rules={[{ required: true, message: "Please input amount!" }]}
> >
<Input /> <InputNumber
style={{ width: "100%" }}
formatter={(value) =>
`Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")}
/>
</Form.Item> </Form.Item>
</Form> </Form>
</Modal> </Modal>

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

@ -1,14 +1,18 @@
import React, {useContext, useEffect} from "react"; import React, { useContext, useEffect } from "react";
import {Button, Card, Col, Input, message, Row, Upload} from "antd"; import { Button, Card, Col, Input, message, Row, Upload } from "antd";
import {FilterOutlined, PlusSquareOutlined, UploadOutlined,} from "@ant-design/icons"; import {
import {BreadcumbComponent} from "../../component/BreadcumbComponent"; FilterOutlined,
import {useStore} from "../../utils/useStore"; PlusSquareOutlined,
import {observer} from "mobx-react-lite"; UploadOutlined,
import {ProductComponent} from "../../component/ProductComponent"; } from "@ant-design/icons";
import {LINKS} from "../../routes/app"; import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import {ModalLoaderContext} from "../../utils/modal"; 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 {Search} = Input; const { Search } = Input;
export const Product = observer(() => { export const Product = observer(() => {
const store = useStore(); const store = useStore();
@ -53,40 +57,59 @@ export const Product = observer(() => {
<div className={["ppob-container"].join(" ")}> <div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} /> <BreadcumbComponent data={routeData} />
<Card> <Card>
<Row style={{marginBottom: 20}}> <Row style={{ marginBottom: 20 }}>
<Col span={12}> <Col span={12}>
<Button onClick={() => { <Button
store.product.visibleModalFilterProduct = true onClick={() => {
}}> store.product.visibleModalFilterProduct = true;
<FilterOutlined/> }}
>
<FilterOutlined />
Filter Filter
</Button> </Button>
</Col> </Col>
<Col span={12}> <Col span={12}>
<div style={{display: store.ui.mediaQuery.isMobile? "" :'flex',justifyContent: 'flex-end',textAlign: "right"}}> <div
style={{
display: store.ui.mediaQuery.isMobile ? "" : "flex",
justifyContent: "flex-end",
textAlign: "right",
//width:store.authentication.userData.role === "Admin" ? 100 : ''
}}
>
<Search <Search
placeholder="input search text" placeholder="input search text"
style={{ style={{
width: store.ui.mediaQuery.isMobile ? 160 : 200, width: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}}
/>
<Upload>
<Button disabled={store.product.uploadBtnProduct} style={{
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10, marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0, marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}} icon={<UploadOutlined/>}> }}
Upload Product />
</Button> {store.authentication.userData.role === "Admin" && (
</Upload> <div>
<Button onClick={() => (store.product.visibleModalProduct = true)}> <Upload>
<PlusSquareOutlined/> New <Button
</Button> disabled={store.product.uploadBtnProduct}
style={{
marginRight: store.ui.mediaQuery.isMobile ? 0 : 0,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 10,
}}
icon={<UploadOutlined />}
>
Upload Product
</Button>
</Upload>
<Button
onClick={() => (store.product.visibleModalProduct = true)}
>
<PlusSquareOutlined /> New
</Button>
</div>
)}
</div> </div>
</Col> </Col>
</Row> </Row>
<ProductComponent/> <ProductComponent />
</Card> </Card>
</div> </div>
); );