Role Access

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

View File

@ -1,18 +1,33 @@
import React, {useContext, useState} from "react";
import {Button, Col, Divider, Form, Input, 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";
import React, { useContext, useState } from "react";
import {
Button,
Col,
Divider,
Form,
Input,
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) => {
const store = useStore();
const [form] = Form.useForm();
const {Option} = Select;
const { Option } = Select;
const history = useHistory();
const [idData, setIdData] = useState("");
const [filterSupplier, setFilterSupplier] = useState([]);
@ -302,9 +317,7 @@ export const ProductComponent = observer((props) => {
<small>{item.product_name}</small> <br />
<small>Harga Beli : {item.current_price_price}</small>
<br />
<small>
Harga Jual : {item.mark_up_price}
</small>
<small>Harga Jual : {item.mark_up_price}</small>
</p>
<p></p>
</div>
@ -318,10 +331,14 @@ export const ProductComponent = observer((props) => {
}}
>
<Tag
color={item?.product_status === "ACTIVE" ? "blue" : "#E3E8EE"}
color={
item?.product_status === "ACTIVE" ? "blue" : "#E3E8EE"
}
style={{ color: "#4F566B" }}
>
{item?.product_status === "ACTIVE" ? " Tersedia" : "Tidak"}
{item?.product_status === "ACTIVE"
? " Tersedia"
: "Tidak"}
</Tag>
</p>
</div>
@ -367,14 +384,26 @@ export const ProductComponent = observer((props) => {
label="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
name="markUpPrice"
label="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
name="code"
@ -427,7 +456,7 @@ export const ProductComponent = observer((props) => {
onChange={(val) => {
setFilterSupplier(val);
}}
style={{marginBottom: "20px", width: "100%"}}
style={{ marginBottom: "20px", width: "100%" }}
value={filterSupplier}
>
{store.supplier.data.map((item) => (
@ -445,7 +474,7 @@ export const ProductComponent = observer((props) => {
mode={"multiple"}
placeholder="Choose Category"
onChange={async (val) => handleFilterCategory(val)}
style={{marginBottom: "20px", width: "100%"}}
style={{ marginBottom: "20px", width: "100%" }}
value={store.product.filterCategory || []}
>
{store.category.data.map((item) => (
@ -465,7 +494,7 @@ export const ProductComponent = observer((props) => {
onChange={(val) => {
setFilterSubCategories(val);
}}
style={{marginBottom: "20px", width: "100%"}}
style={{ marginBottom: "20px", width: "100%" }}
value={filterSubCategories}
>
{store.product.dataSubCategories.map((item) => (

View File

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

View File

@ -1,16 +1,32 @@
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 {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";
import React, { useContext, useEffect, useState } from "react";
import {
Button,
Card,
Col,
Divider,
Form,
Input,
List,
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 {Option} = Select;
const { Search } = Input;
const { Option } = Select;
export const Membership = observer(() => {
const history = useHistory();
const [form] = Form.useForm();
@ -212,6 +228,7 @@ export const Membership = observer(() => {
},
];
if (store.authentication.userData.role !== "Admin") columns.pop();
const routeData = [
{
route: LINKS.HOME,
@ -385,9 +402,14 @@ export const Membership = observer(() => {
<div style={{}}>
<p>
<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 />
<small>Saldo System : {item.coa.amount}</small> <br />
</p>
</div>
}
@ -461,7 +483,13 @@ export const Membership = observer(() => {
label="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>
</Modal>

View File

@ -1,14 +1,18 @@
import React, {useContext, useEffect} from "react";
import {Button, Card, Col, Input, message, 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";
import React, { useContext, useEffect } from "react";
import { Button, Card, Col, Input, message, 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 {Search} = Input;
const { Search } = Input;
export const Product = observer(() => {
const store = useStore();
@ -53,17 +57,26 @@ export const Product = observer(() => {
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} />
<Card>
<Row style={{marginBottom: 20}}>
<Row style={{ marginBottom: 20 }}>
<Col span={12}>
<Button onClick={() => {
store.product.visibleModalFilterProduct = true
}}>
<FilterOutlined/>
<Button
onClick={() => {
store.product.visibleModalFilterProduct = true;
}}
>
<FilterOutlined />
Filter
</Button>
</Col>
<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
placeholder="input search text"
style={{
@ -72,21 +85,31 @@ export const Product = observer(() => {
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}}
/>
{store.authentication.userData.role === "Admin" && (
<div>
<Upload>
<Button disabled={store.product.uploadBtnProduct} style={{
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}} icon={<UploadOutlined/>}>
<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
onClick={() => (store.product.visibleModalProduct = true)}
>
<PlusSquareOutlined /> New
</Button>
</div>
)}
</div>
</Col>
</Row>
<ProductComponent/>
<ProductComponent />
</Card>
</div>
);