Mobile Responsive
This commit is contained in:
@@ -1,11 +1,23 @@
|
||||
import React, {useContext, useEffect, useState} from "react";
|
||||
import {Button, Form, Input, message, Modal, Select, 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 {ModalLoaderContext} from "../utils/modal";
|
||||
import React, { useContext, useEffect, useState } from "react";
|
||||
import {
|
||||
Button,
|
||||
Form,
|
||||
Input,
|
||||
message,
|
||||
Modal,
|
||||
Select,
|
||||
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 { ModalLoaderContext } from "../utils/modal";
|
||||
|
||||
export const PartnerComponent = observer((props) => {
|
||||
const store = useStore();
|
||||
@@ -78,7 +90,7 @@ export const PartnerComponent = observer((props) => {
|
||||
render: (text, record) => (
|
||||
<Tag
|
||||
color={record?.status === true ? "processing" : "#E3E8EE"}
|
||||
style={{color: "#4F566B", cursor: "pointer"}}
|
||||
style={{ color: "#4F566B", cursor: "pointer" }}
|
||||
>
|
||||
{record?.status === true ? " ACTIVE" : "INACTIVE"}
|
||||
</Tag>
|
||||
@@ -121,7 +133,7 @@ export const PartnerComponent = observer((props) => {
|
||||
const handleDelete = (id) => {
|
||||
Modal.confirm({
|
||||
title: "Are you sure delete this record?",
|
||||
icon: <ExclamationCircleOutlined/>,
|
||||
icon: <ExclamationCircleOutlined />,
|
||||
okText: "Yes",
|
||||
okType: "primary",
|
||||
cancelText: "Cancel",
|
||||
@@ -181,36 +193,126 @@ export const PartnerComponent = observer((props) => {
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<Table
|
||||
style={{textAlign: "center"}}
|
||||
columns={columns}
|
||||
dataSource={store.partner.data}
|
||||
bordered
|
||||
pagination={{
|
||||
pageSize: store.partner.pageSize,
|
||||
total: store.partner.total_data,
|
||||
current: store.partner.page + 1,
|
||||
showSizeChanger: true,
|
||||
simple: false,
|
||||
}}
|
||||
onChange={async (page) => {
|
||||
let pageNumber = page.current;
|
||||
store.partner.pageSize = page.pageSize;
|
||||
store.partner.page = pageNumber - 1;
|
||||
modalLoader.setLoading(true);
|
||||
await store.partner.getData();
|
||||
modalLoader.setLoading(false);
|
||||
}}
|
||||
/>
|
||||
|
||||
{store.ui.mediaQuery.isDesktop && (
|
||||
<Table
|
||||
style={{ textAlign: "center" }}
|
||||
columns={columns}
|
||||
dataSource={store.partner.data}
|
||||
bordered
|
||||
pagination={{
|
||||
pageSize: store.partner.pageSize,
|
||||
total: store.partner.total_data,
|
||||
current: store.partner.page + 1,
|
||||
showSizeChanger: true,
|
||||
simple: false,
|
||||
}}
|
||||
onChange={async (page) => {
|
||||
let pageNumber = page.current;
|
||||
store.partner.pageSize = page.pageSize;
|
||||
store.partner.page = pageNumber - 1;
|
||||
modalLoader.setLoading(true);
|
||||
await store.partner.getData();
|
||||
modalLoader.setLoading(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{store.ui.mediaQuery.isMobile && (
|
||||
<List
|
||||
itemLayout="horizontal"
|
||||
position={"top"}
|
||||
pagination={{
|
||||
onChange: async (page) => {
|
||||
store.partner.pageSize = page.pageSize;
|
||||
store.partner.page = page.current;
|
||||
modalLoader.setLoading(true);
|
||||
await store.partner.getData();
|
||||
modalLoader.setLoading(false);
|
||||
},
|
||||
pageSize: store.partner.pageSize,
|
||||
total: store.partner.total_data,
|
||||
current: store.partner.page,
|
||||
style: { marginBottom: "1rem", marginRight: "1rem" },
|
||||
}}
|
||||
dataSource={store.partner.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>Nama : {item.name}</small> <br />
|
||||
<small>Npwp : {item.npwp}</small> <br />
|
||||
<small>Address : {item.address}</small>
|
||||
<Space size="middle">
|
||||
<Button
|
||||
type={
|
||||
item?.status === true ? "danger" : "primary"
|
||||
}
|
||||
onClick={() =>
|
||||
changeStatus(item?.id, item?.status)
|
||||
}
|
||||
>
|
||||
{item?.status === true ? "Inactive" : "Active"}
|
||||
</Button>
|
||||
<Button onClick={() => handleEditButton(item)}>
|
||||
Edit
|
||||
</Button>
|
||||
{/* <Button onClick={() => handleDelete(record.id)}>Delete</Button> */}
|
||||
<Button onClick={() => changePassword(item)}>
|
||||
Change Password
|
||||
</Button>
|
||||
</Space>
|
||||
</p>
|
||||
<p></p>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<div style={{ marginRight: 16 }}>
|
||||
<p
|
||||
style={{
|
||||
fontSize: 9,
|
||||
marginBottom: 40,
|
||||
}}
|
||||
>
|
||||
<Tag
|
||||
color={item?.status === true ? "processing" : "#E3E8EE"}
|
||||
style={{ color: "#4F566B", cursor: "pointer" }}
|
||||
>
|
||||
{item?.status === true ? " ACTIVE" : "INACTIVE"}
|
||||
</Tag>
|
||||
</p>
|
||||
</div>
|
||||
</List.Item>
|
||||
<Divider plain style={{ margin: 0 }} />
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<Modal
|
||||
visible={store.partner.visibleModalPartner}
|
||||
title={
|
||||
isChangePassword
|
||||
? "Change Member Password"
|
||||
: idData
|
||||
? "Edit Partner"
|
||||
: "Create a new partner"
|
||||
? "Edit Partner"
|
||||
: "Create a new partner"
|
||||
}
|
||||
okText={idData ? "Edit" : "Create"}
|
||||
cancelText="Cancel"
|
||||
@@ -238,11 +340,11 @@ export const PartnerComponent = observer((props) => {
|
||||
label="Name"
|
||||
rules={[
|
||||
idData
|
||||
? {required: false}
|
||||
: {required: true, message: "Please input password name!"},
|
||||
? { required: false }
|
||||
: { required: true, message: "Please input password name!" },
|
||||
]}
|
||||
>
|
||||
<Input/>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
)}
|
||||
{!idData && (
|
||||
@@ -251,11 +353,11 @@ export const PartnerComponent = observer((props) => {
|
||||
label="Owner"
|
||||
rules={[
|
||||
idData
|
||||
? {required: false}
|
||||
: {required: true, message: "Please input password owner!"},
|
||||
? { required: false }
|
||||
: { required: true, message: "Please input password owner!" },
|
||||
]}
|
||||
>
|
||||
<Input/>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
)}
|
||||
{((idData && isChangePassword) || !idData) && (
|
||||
@@ -264,14 +366,14 @@ export const PartnerComponent = observer((props) => {
|
||||
label="Password Account"
|
||||
rules={[
|
||||
idData
|
||||
? {required: false}
|
||||
? { required: false }
|
||||
: {
|
||||
required: true,
|
||||
message: "Please input password account!",
|
||||
},
|
||||
required: true,
|
||||
message: "Please input password account!",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input/>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
)}
|
||||
{!idData && (
|
||||
@@ -280,11 +382,14 @@ export const PartnerComponent = observer((props) => {
|
||||
label="Phone Number"
|
||||
rules={[
|
||||
idData
|
||||
? {required: false}
|
||||
: {required: true, message: "Please input password phone number!"},
|
||||
? { required: false }
|
||||
: {
|
||||
required: true,
|
||||
message: "Please input password phone number!",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input/>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
)}
|
||||
{!isChangePassword && (
|
||||
@@ -294,25 +399,25 @@ export const PartnerComponent = observer((props) => {
|
||||
label="Npwp"
|
||||
rules={[
|
||||
idData
|
||||
? {required: false}
|
||||
: {required: true, message: "Please input npwp!"},
|
||||
? { required: false }
|
||||
: { required: true, message: "Please input npwp!" },
|
||||
]}
|
||||
>
|
||||
<Input/>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="address"
|
||||
label="Address"
|
||||
rules={[
|
||||
idData
|
||||
? {required: false}
|
||||
? { required: false }
|
||||
: {
|
||||
required: true,
|
||||
message: "Please input address!",
|
||||
},
|
||||
required: true,
|
||||
message: "Please input address!",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input/>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user