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

fix: responsive each pages

Browse Source
This commit is contained in:
caturbgs
2021-12-09 12:53:55 +07:00
parent 599a89449b
commit 5016f9068d
4 changed files with 44 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
import React, {useEffect, useState} from "react";
import {Button, Card, Col, Input, List, message, Modal, PageHeader, Row, Space, Table, Tag} from "antd";
import {Button, Card, Col, Input, message, Modal, Row, Space, Table, Tag} from "antd";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {ExclamationCircleOutlined, FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
@@ -137,132 +137,41 @@ export const Membership = observer(() => {
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData}/>
<Card>
{store.ui.mediaQuery.isDesktop && (
<div>
<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={() => setVisibleModal(true)}>
<PlusSquareOutlined/> New
</Button>
</Col>
</Row>
<Table
style={{textAlign: "center"}}
columns={columns}
dataSource={store.membership.data}
bordered
pagination={{
total: store.membership.total_data,
current: store.membership.page,
pageSize: store.membership.pageSize,
simple: true
}} onChange={(page) => {
store.membership.pageSize = page.pageSize;
store.membership.page = page.current;
store.membership.getData();
}} current={store.membership.page}
loading={store.membership.pageSize}/>
</div>
)}
{store.ui.mediaQuery.isMobile && (
<div>
<Card bordered={false} bodyStyle={{padding: "0"}} style={{borderRadius: 0, width: '50%'}}>
<PageHeader
className={"card-page-header"}
style={{
padding: "6px 8px",
}}
title={
<Button
icon={<FilterOutlined/>}
size={"small"}
style={{margin: 3}}
>
Filter
</Button>
}
subTitle=""
/>
</Card>
<List
itemLayout="horizontal"
position={"top"}
dataSource={store.membership.data}
style={{padding: 0}}
renderItem={(item) => {
return (
<div>
<List.Item
key={item.key}
style={{
backgroundColor: "#ffffff",
paddingTop: 0,
paddingBottom: 0,
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
width: "50%"
}}
>
<List.Item.Meta
className={["cariparkir-container"].join(" ")}
title={<h3 style={{marginBottom: 0, color: "#5469d4"}}>{item.name}</h3>}
description={
<div style={{}}>
<p>
<small>Username : {item.username}</small> <br/>
</p>
<p>
{item.status}
</p>
</div>
}
/>
{/* <div style={{ marginRight: 16 }}>
<Statistic
title={
<p
style={{
fontSize: 9,
margin: 0,
}}
>
{item.updated_at ? moment(item.updated_at).format("DD MMM YY, H:mm:ss") : "There is not top up yet"}
</p>
}
prefix={"Rp"}
precision={0}
style={{ fontSize: 12, fontWeight: 300 }}
valueStyle={{
color: "#5469d4",
fontSize: 12,
fontWeight: 600,
textAlign: "right",
}}
value={item.balances}
/>
</div> */}
</List.Item>
{/* <Divider plain style={{ margin: 0 }} /> */}
</div>
);
}}
<div>
<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}}
/>
</div>
)}
<Button onClick={() => setVisibleModal(true)}>
<PlusSquareOutlined/> New
</Button>
</Col>
</Row>
<Table
style={{textAlign: "center"}}
columns={columns}
dataSource={store.membership.data}
bordered
pagination={{
total: store.membership.total_data,
current: store.membership.page,
pageSize: store.membership.pageSize,
simple: true
}} onChange={(page) => {
store.membership.pageSize = page.pageSize;
store.membership.page = page.current;
store.membership.getData();
}} current={store.membership.page}
loading={store.membership.pageSize}/>
</div>
</Card>
<MembershipModal visible={visibleModal}
confirmLoading={confirmLoading}