Tambah Fitur
This commit is contained in:
parent
198063a7d9
commit
d287798e5f
|
|
@ -13,9 +13,11 @@ import {
|
|||
Tag,
|
||||
Divider,
|
||||
Image,
|
||||
Avatar,
|
||||
Modal,
|
||||
Form,
|
||||
DatePicker,
|
||||
} from "antd";
|
||||
import { UserOutlined } from "@ant-design/icons";
|
||||
import { UserOutlined, FilterOutlined } from "@ant-design/icons";
|
||||
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
|
||||
import { LINKS } from "../../routes/app";
|
||||
import { useStore } from "../../utils/useStore";
|
||||
|
|
@ -25,16 +27,21 @@ import { ModalLoaderContext } from "../../utils/modal";
|
|||
import { useParams } from "react-router-dom";
|
||||
import { appConfig } from "../../config/app";
|
||||
import { MembershipModal } from "./MembershipModal";
|
||||
import moment from "moment";
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
const { TabPane } = Tabs;
|
||||
export const DetailUser = observer(() => {
|
||||
const store = useStore();
|
||||
const [form] = Form.useForm();
|
||||
const modalLoader = useContext(ModalLoaderContext);
|
||||
const { id } = useParams();
|
||||
const [visibleModal, setVisibleModal] = useState(false);
|
||||
const [initialData, setInitialData] = useState({});
|
||||
const [confirmLoading, setConfirmLoading] = useState(false);
|
||||
const [filterStart, setFilterStart] = useState([]);
|
||||
const [filterEnd, setFilterEnd] = useState([]);
|
||||
const [visibleHis, setVisibleHis] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
|
|
@ -178,11 +185,15 @@ export const DetailUser = observer(() => {
|
|||
];
|
||||
|
||||
const column = [
|
||||
{
|
||||
title: "Nama Produk",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
},
|
||||
{
|
||||
title: "Price",
|
||||
dataIndex: "price",
|
||||
key: "price",
|
||||
|
||||
render: (text) =>
|
||||
new Intl.NumberFormat("id-ID", {
|
||||
style: "currency",
|
||||
|
|
@ -242,8 +253,13 @@ export const DetailUser = observer(() => {
|
|||
title: "Tanggal Transaksi",
|
||||
dataIndex: "created_at",
|
||||
key: "created_at",
|
||||
width: "15%",
|
||||
render: (text, record) => {
|
||||
return <Text>{format(parseISO(record.created_at), "dd-MM-yyyy")}</Text>;
|
||||
return (
|
||||
<Text>
|
||||
{format(parseISO(record.created_at), "dd-MM-yyyy HH:mm:ss")}
|
||||
</Text>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -298,7 +314,79 @@ export const DetailUser = observer(() => {
|
|||
store.authentication.dataProfit.userDetail?.image_identity,
|
||||
"detail"
|
||||
);
|
||||
console.log(store.authentication.listImage, "detail gambar");
|
||||
|
||||
const handleRemoveFilter = async () => {
|
||||
store.transaction.filterStart = null;
|
||||
store.transaction.filterEnd = null;
|
||||
form.resetFields();
|
||||
setFilterStart([]);
|
||||
setFilterEnd([]);
|
||||
//await store.transaction.getDetailHistoryTransaction();
|
||||
await store.transaction.getDetailHistoryTransaction(
|
||||
store.authentication.dataProfit.id
|
||||
);
|
||||
store.transaction.visibleModalFilterTransaction = false;
|
||||
};
|
||||
|
||||
const handleCancelFilter = async () => {
|
||||
store.transaction.filterStart = null;
|
||||
//form.resetFields();
|
||||
store.transaction.filterEnd = null;
|
||||
store.transaction.visibleModalFilterTransaction = false;
|
||||
//await store.transaction.getDetailHistoryTransaction();
|
||||
await store.transaction.getDetailHistoryTransaction(
|
||||
store.authentication.dataProfit.id
|
||||
);
|
||||
};
|
||||
|
||||
const handleSubmitFilter = async () => {
|
||||
const data = form.getFieldsValue();
|
||||
console.log(data.start_date);
|
||||
console.log(data.end_date);
|
||||
|
||||
const awal = (store.transaction.filterStart = moment(
|
||||
data.start_date
|
||||
).format("YYYY-MM-DD HH:mm:ss"));
|
||||
const akhir = (store.transaction.filterEnd = moment(data.end_date).format(
|
||||
"YYYY-MM-DD HH:mm:ss"
|
||||
));
|
||||
console.log(awal);
|
||||
console.log(akhir);
|
||||
console.log(store.authentication.dataProfit.id, "id auth");
|
||||
console.log(store.membership.dataDetail.id, "id member");
|
||||
modalLoader.setLoading(true);
|
||||
await store.transaction.getDetailHistoryTransaction(
|
||||
store.authentication.dataProfit.id
|
||||
);
|
||||
modalLoader.setLoading(false);
|
||||
//form.resetFields();
|
||||
store.transaction.visibleModalFilterTransaction = false;
|
||||
};
|
||||
const footerLayoutFilter = [
|
||||
<Button
|
||||
key={"remove"}
|
||||
onClick={handleRemoveFilter}
|
||||
style={{
|
||||
backgroundColor: "#e74e5e",
|
||||
color: "#fff",
|
||||
}}
|
||||
>
|
||||
Remove Filter
|
||||
</Button>,
|
||||
<Button key={"cancel"} onClick={handleCancelFilter}>
|
||||
Cancel
|
||||
</Button>,
|
||||
<Button
|
||||
key={"submit"}
|
||||
onClick={handleSubmitFilter}
|
||||
style={{
|
||||
backgroundColor: "#4e79e7",
|
||||
color: "#fff",
|
||||
}}
|
||||
>
|
||||
Apply
|
||||
</Button>,
|
||||
];
|
||||
return (
|
||||
<div className={["ppob-container"].join(" ")}>
|
||||
<BreadcumbComponent
|
||||
|
|
@ -646,30 +734,42 @@ export const DetailUser = observer(() => {
|
|||
</TabPane>
|
||||
<TabPane tab="History Transaction" key="2">
|
||||
{store.ui.mediaQuery.isDesktop && (
|
||||
<Table
|
||||
key="1"
|
||||
hasEmpty
|
||||
columns={column}
|
||||
dataSource={
|
||||
store.transaction.dataDetailHistoryTransactionDetailUser
|
||||
}
|
||||
bordered
|
||||
pagination={{
|
||||
pageSize: store.transaction.pageSize,
|
||||
total: store.transaction.total_data,
|
||||
current: store.transaction.page + 1,
|
||||
showSizeChanger: true,
|
||||
simple: false,
|
||||
}}
|
||||
onChange={async (page) => {
|
||||
let pageNumber = page.current;
|
||||
store.transaction.pageSize = page.pageSize;
|
||||
store.transaction.page = pageNumber - 1;
|
||||
modalLoader.setLoading(true);
|
||||
await getData();
|
||||
modalLoader.setLoading(false);
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
<Button
|
||||
style={{ marginBottom: "1rem", marginLeft: 5 }}
|
||||
onClick={() => {
|
||||
store.transaction.visibleModalFilterTransaction = true;
|
||||
}}
|
||||
>
|
||||
<FilterOutlined />
|
||||
Filter
|
||||
</Button>
|
||||
<Table
|
||||
key="1"
|
||||
hasEmpty
|
||||
scroll={{ x: 1300 }}
|
||||
columns={column}
|
||||
dataSource={
|
||||
store.transaction.dataDetailHistoryTransactionDetailUser
|
||||
}
|
||||
bordered
|
||||
pagination={{
|
||||
pageSize: store.transaction.pageSize,
|
||||
total: store.transaction.total_data,
|
||||
current: store.transaction.page + 1,
|
||||
showSizeChanger: true,
|
||||
simple: false,
|
||||
}}
|
||||
onChange={async (page) => {
|
||||
let pageNumber = page.current;
|
||||
store.transaction.pageSize = page.pageSize;
|
||||
store.transaction.page = pageNumber - 1;
|
||||
modalLoader.setLoading(true);
|
||||
await getData();
|
||||
modalLoader.setLoading(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{store.ui.mediaQuery.isMobile && (
|
||||
|
|
@ -790,6 +890,39 @@ export const DetailUser = observer(() => {
|
|||
setVisibleModal(false);
|
||||
}}
|
||||
/>
|
||||
<Modal
|
||||
visible={store.transaction.visibleModalFilterTransaction}
|
||||
title={"Filter"}
|
||||
footer={footerLayoutFilter}
|
||||
onCancel={async () => {
|
||||
//form.resetFields();
|
||||
store.transaction.filterStart = null;
|
||||
store.transaction.filterEnd = null;
|
||||
store.transaction.visibleModalFilterTransaction = false;
|
||||
await store.transaction.getDetailHistoryTransaction();
|
||||
}}
|
||||
>
|
||||
<Row>
|
||||
<Col span={24}>
|
||||
<Form layout="vertical" name="filter" form={form}>
|
||||
<Form.Item
|
||||
name="start_date"
|
||||
label="Dari"
|
||||
rules={[{ required: true, message: "Please input Date!" }]}
|
||||
>
|
||||
<DatePicker style={{ width: "100%" }} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="end_date"
|
||||
label="Sampai"
|
||||
rules={[{ required: true, message: "Please input Date!" }]}
|
||||
>
|
||||
<DatePicker style={{ width: "100%" }} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Col>
|
||||
</Row>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -195,6 +195,12 @@ export const Membership = observer(() => {
|
|||
key: "name",
|
||||
render: (text, record) => record?.name ?? record?.username,
|
||||
},
|
||||
{
|
||||
title: "Username",
|
||||
dataIndex: "username",
|
||||
key: "username",
|
||||
render: (text, record) => record?.name ?? record?.username,
|
||||
},
|
||||
{
|
||||
title: "Role",
|
||||
dataIndex: ["roles", "name"],
|
||||
|
|
|
|||
|
|
@ -128,6 +128,11 @@ export const Profile = observer(() => {
|
|||
</Button>,
|
||||
];
|
||||
const columns = [
|
||||
{
|
||||
title: "Name Produk",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
},
|
||||
{
|
||||
title: "Price",
|
||||
dataIndex: "price",
|
||||
|
|
@ -142,6 +147,7 @@ export const Profile = observer(() => {
|
|||
title: "Pembeli",
|
||||
dataIndex: "buyer",
|
||||
key: "buyer",
|
||||
width: "10%",
|
||||
},
|
||||
{
|
||||
title: "Tujuan",
|
||||
|
|
@ -196,9 +202,13 @@ export const Profile = observer(() => {
|
|||
title: "Tanggal Transaksi",
|
||||
dataIndex: "created_at",
|
||||
key: "created_at",
|
||||
|
||||
width: "15%",
|
||||
render: (text, record) => {
|
||||
return <Text>{format(parseISO(record.created_at), "dd-MM-yyyy")}</Text>;
|
||||
return (
|
||||
<Text>
|
||||
{format(parseISO(record.created_at), "dd-MM-yyyy HH:mm:ss")}
|
||||
</Text>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -143,7 +143,7 @@ export class Transaction {
|
|||
|
||||
async getDetailHistoryTransaction(id) {
|
||||
try {
|
||||
const response = await http.get(`/transaction/history-user/${id}?page=${this.page}&pageSize=${this.pageSize}&start=${this.filterStartDetailUser}&end=${this.filterEndDetailUser}`);
|
||||
const response = await http.get(`/transaction/history-user/${id}?page=${this.page}&pageSize=${this.pageSize}&start=${this.filterStart}&end=${this.filterEnd}`);
|
||||
console.log(response,'Data Trans');
|
||||
this.dataDetailHistoryTransactionDetailUser = response.body.data ?? [];
|
||||
this.total_data = response?.body?.count ?? 0;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user