Mobile responsive
This commit is contained in:
parent
9cefac57ae
commit
45e6b92ee7
|
|
@ -1,12 +1,23 @@
|
|||
import React, {useContext, useState} from "react";
|
||||
import {Button, Form, Input, message, Modal, Space, Table, Tag} 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 {TopupsaldoModal} from "./TopupsaldoModal";
|
||||
import {ModalLoaderContext} from "../utils/modal";
|
||||
import React, { useContext, useState } from "react";
|
||||
import {
|
||||
Button,
|
||||
Form,
|
||||
Input,
|
||||
message,
|
||||
Modal,
|
||||
Space,
|
||||
Table,
|
||||
Tag,
|
||||
List,
|
||||
Divider,
|
||||
} 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 { TopupsaldoModal } from "./TopupsaldoModal";
|
||||
import { ModalLoaderContext } from "../utils/modal";
|
||||
|
||||
export const SupplierComponent = observer((props) => {
|
||||
const store = useStore();
|
||||
|
|
@ -70,10 +81,10 @@ export const SupplierComponent = observer((props) => {
|
|||
key: ["coa", "amount"],
|
||||
width: "20%",
|
||||
render: (text, record) =>
|
||||
new Intl.NumberFormat("id-ID", {
|
||||
style: "currency",
|
||||
currency: "IDR",
|
||||
}).format(text)
|
||||
new Intl.NumberFormat("id-ID", {
|
||||
style: "currency",
|
||||
currency: "IDR",
|
||||
}).format(text),
|
||||
},
|
||||
{
|
||||
title: "Saldo di System",
|
||||
|
|
@ -81,10 +92,10 @@ export const SupplierComponent = observer((props) => {
|
|||
key: ["coa_undistribute", "amount"],
|
||||
width: "20%",
|
||||
render: (text, record) =>
|
||||
new Intl.NumberFormat("id-ID", {
|
||||
style: "currency",
|
||||
currency: "IDR",
|
||||
}).format(text)
|
||||
new Intl.NumberFormat("id-ID", {
|
||||
style: "currency",
|
||||
currency: "IDR",
|
||||
}).format(text),
|
||||
},
|
||||
{
|
||||
title: "Status",
|
||||
|
|
@ -94,7 +105,7 @@ export const SupplierComponent = observer((props) => {
|
|||
render: (text, record) => (
|
||||
<Tag
|
||||
color={record?.status === true ? "processing" : "#E3E8EE"}
|
||||
style={{color: "#4F566B"}}
|
||||
style={{ color: "#4F566B" }}
|
||||
>
|
||||
{record?.status === true ? " ACTIVE" : "INACTIVE"}
|
||||
</Tag>
|
||||
|
|
@ -137,7 +148,7 @@ export const SupplierComponent = observer((props) => {
|
|||
const handleDelete = (id) => {
|
||||
Modal.confirm({
|
||||
title: "Are you sure delete this record?",
|
||||
icon: <ExclamationCircleOutlined/>,
|
||||
icon: <ExclamationCircleOutlined />,
|
||||
okText: "Yes",
|
||||
okType: "primary",
|
||||
cancelText: "Cancel",
|
||||
|
|
@ -190,27 +201,121 @@ export const SupplierComponent = observer((props) => {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<Table
|
||||
style={{textAlign: "center"}}
|
||||
columns={columns}
|
||||
dataSource={store.supplier.data}
|
||||
bordered
|
||||
pagination={{
|
||||
pageSize: store.supplier.pageSize,
|
||||
total: store.supplier.total_data,
|
||||
current: store.supplier.page + 1,
|
||||
showSizeChanger: true,
|
||||
simple: false,
|
||||
}}
|
||||
onChange={async (page) => {
|
||||
let pageNumber = page.current;
|
||||
store.supplier.pageSize = page.pageSize;
|
||||
store.supplier.page = pageNumber - 1;
|
||||
modalLoader.setLoading(true);
|
||||
//await store.supplier.getData();
|
||||
modalLoader.setLoading(false);
|
||||
}}
|
||||
/>
|
||||
{store.ui.mediaQuery.isDesktop && (
|
||||
<Table
|
||||
style={{ textAlign: "center" }}
|
||||
columns={columns}
|
||||
dataSource={store.supplier.data}
|
||||
bordered
|
||||
pagination={{
|
||||
pageSize: store.supplier.pageSize,
|
||||
total: store.supplier.total_data,
|
||||
current: store.supplier.page + 1,
|
||||
showSizeChanger: true,
|
||||
simple: false,
|
||||
}}
|
||||
onChange={async (page) => {
|
||||
let pageNumber = page.current;
|
||||
store.supplier.pageSize = page.pageSize;
|
||||
store.supplier.page = pageNumber - 1;
|
||||
modalLoader.setLoading(true);
|
||||
//await store.supplier.getData();
|
||||
modalLoader.setLoading(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{store.ui.mediaQuery.isMobile && (
|
||||
<List
|
||||
itemLayout="horizontal"
|
||||
position={"top"}
|
||||
pagination={{
|
||||
onChange: async (page) => {
|
||||
store.supplier.pageSize = page.pageSize;
|
||||
store.supplier.page = page.current;
|
||||
modalLoader.setLoading(true);
|
||||
await store.supplier.getData();
|
||||
modalLoader.setLoading(false);
|
||||
},
|
||||
pageSize: store.supplier.pageSize,
|
||||
total: store.supplier.total_data,
|
||||
current: store.supplier.page,
|
||||
style: { marginBottom: "1rem", marginRight: "1rem" },
|
||||
}}
|
||||
dataSource={store.supplier.data}
|
||||
style={{ padding: 0 }}
|
||||
renderItem={(item) => {
|
||||
return (
|
||||
<div>
|
||||
<List.Item
|
||||
key={item.id}
|
||||
style={{
|
||||
backgroundColor: "#ffffff",
|
||||
paddingTop: 0,
|
||||
paddingBottom: 0,
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<List.Item.Meta
|
||||
className={["cariparkir-container"].join(" ")}
|
||||
title={item.code}
|
||||
description={
|
||||
<div style={{}}>
|
||||
<p>
|
||||
<small>Name : {item.name}</small> <br />
|
||||
<small>Saldo Supplier : {item.coa.amount}</small>
|
||||
<br />
|
||||
<small>
|
||||
Saldo System : {item.coa_undistribute.amount}
|
||||
</small>
|
||||
<br />
|
||||
<Button
|
||||
style={{
|
||||
marginRight: 10,
|
||||
}}
|
||||
type={item?.status === true ? "danger" : "primary"}
|
||||
onClick={() => changeStatus(item?.id, item?.status)}
|
||||
>
|
||||
{item?.status === true ? "INACTIVE" : "ACTIVE"}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => handleTopup(item)}
|
||||
style={{
|
||||
marginRight: 10,
|
||||
}}
|
||||
>
|
||||
Top Up Saldo
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => handleEditButton(item)}
|
||||
style={{
|
||||
marginBottom: 5,
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<Tag
|
||||
color={
|
||||
item?.status === true ? "processing" : "#E3E8EE"
|
||||
}
|
||||
style={{ color: "#4F566B" }}
|
||||
>
|
||||
{item?.status === true ? " ACTIVE" : "INACTIVE"}
|
||||
</Tag>
|
||||
</p>
|
||||
<p></p>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</List.Item>
|
||||
<Divider plain style={{ margin: 0 }} />
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<Modal
|
||||
visible={store.supplier.visibleModalSupplier}
|
||||
title={idData ? "Edit Supplier" : "Create a new Supplier"}
|
||||
|
|
@ -237,22 +342,22 @@ export const SupplierComponent = observer((props) => {
|
|||
<Form.Item
|
||||
name="name"
|
||||
label="Name"
|
||||
rules={[{required: true, message: "Please input name!"}]}
|
||||
rules={[{ required: true, message: "Please input name!" }]}
|
||||
>
|
||||
<Input/>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
{!idData && (
|
||||
<Form.Item
|
||||
name="code"
|
||||
label="Kode"
|
||||
rules={[{required: true, message: "Please input kode!"}]}
|
||||
rules={[{ required: true, message: "Please input kode!" }]}
|
||||
>
|
||||
<Input/>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
)}
|
||||
</Form>
|
||||
</Modal>
|
||||
<TopupsaldoModal code={store.supplier.code}/>
|
||||
<TopupsaldoModal code={store.supplier.code} />
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ export const Supplier = observer(() => {
|
|||
placeholder="input search text"
|
||||
style={{
|
||||
width: store.ui.mediaQuery.isMobile ? 160 : 200,
|
||||
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
|
||||
marginRight: store.ui.mediaQuery.isMobile ? 10 : 10,
|
||||
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
|
||||
}}
|
||||
onSearch={(value) => console.log(value)}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user