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

Perbaikan Modal

Browse Source
This commit is contained in:
ajat91.sudrajat 2021-12-31 09:23:24 +07:00
parent 42795d9ca4
commit b5e404c0c1
6 changed files with 93 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/component/ProductComponent.js
View File

@ -210,16 +210,16 @@ export const ProductComponent = observer((props) => {
store.product.filterSupplier = null; store.product.filterSupplier = null;
store.product.filterSubCategory = null; store.product.filterSubCategory = null;
setFilterSupplier([]); setFilterSupplier([]);
store.product.filterCategory = null;
setFilterSubCategories([]); setFilterSubCategories([]);
await store.product.getData(); await store.product.getData();
store.product.visibleModalFilterProduct = false; store.product.visibleModalFilterProduct = false;
}; };
const handleCancelFilter = () => { const handleCancelFilter = () => {
setFilterSupplier([]); store.product.filterSubCategory = null;
store.product.filterCategory = null; store.product.filterSupplier = null;
setFilterSubCategories([]); setFilterSubCategories([]);
setFilterSupplier([]);
store.product.visibleModalFilterProduct = false; store.product.visibleModalFilterProduct = false;
}; };
@ -229,18 +229,20 @@ export const ProductComponent = observer((props) => {
modalLoader.setLoading(true); modalLoader.setLoading(true);
await store.product.getData(); await store.product.getData();
modalLoader.setLoading(false); modalLoader.setLoading(false);
setFilterSupplier([]);
setFilterSubCategories([]);
store.product.visibleModalFilterProduct = false; store.product.visibleModalFilterProduct = false;
}; };
const handleFilterCategory = async (value) => { // const handleFilterCategory = async (value) => {
if (value) { // if (value) {
store.product.filterCategory = value; // store.product.filterCategory = value;
await store.product.getDataSubCategories(); // await store.product.getDataSubCategories();
} else { // } else {
store.product.filterCategory = null; // store.product.filterCategory = null;
await store.product.getDataSubCategories(); // await store.product.getDataSubCategories();
} // }
}; // };
const footerLayoutFilter = [ const footerLayoutFilter = [
<Button <Button
@ -465,11 +467,15 @@ export const ProductComponent = observer((props) => {
</Form.Item> </Form.Item>
</Form> </Form>
</Modal> </Modal>
<Modal <Modal
visible={store.product.visibleModalFilterProduct} visible={store.product.visibleModalFilterProduct}
title={"Filter"} title={"Filter"}
footer={footerLayoutFilter} footer={footerLayoutFilter}
onCancel={() => {
setFilterSupplier([]);
setFilterSubCategories([]);
store.product.visibleModalFilterProduct = false;
}}
> >
<Row> <Row>
<Col span={24}> <Col span={24}>
@ -492,24 +498,6 @@ export const ProductComponent = observer((props) => {
))} ))}
</Select> </Select>
</Col> </Col>
{/* <Col span={24}>
<Title level={5} type={"secondary"} strong>
Filter Categories
</Title>
<Select
mode={"multiple"}
placeholder="Choose Category"
onChange={async (val) => handleFilterCategory(val)}
style={{ marginBottom: "20px", width: "100%" }}
value={store.product.filterCategory || []}
>
{store.category.data.map((item) => (
<Option value={item.id} key={item.id}>
{item.name}
</Option>
))}
</Select>
</Col> */}
<Col span={24}> <Col span={24}>
<Title level={5} type={"secondary"} strong> <Title level={5} type={"secondary"} strong>
Filter Sub-Categories Filter Sub-Categories

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

@ -507,6 +507,7 @@ export const Membership = observer(() => {
title={"Filter"} title={"Filter"}
footer={footerLayoutFilter} footer={footerLayoutFilter}
onCancel={() => { onCancel={() => {
form.resetFields();
store.membership.visibleModalFilterMembership = false; store.membership.visibleModalFilterMembership = false;
}} }}
> >

78
src/pages/Payback/Payback.js
View File

@ -16,6 +16,7 @@ import {
Select, Select,
Typography, Typography,
DatePicker, DatePicker,
Form,
} from "antd"; } from "antd";
import { useStore } from "../../utils/useStore"; import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
@ -38,15 +39,17 @@ const { RangePicker } = DatePicker;
export const Payback = observer(() => { export const Payback = observer(() => {
const { Option } = Select; const { Option } = Select;
const { Title } = Typography; const { Title } = Typography;
const [form] = Form.useForm();
const store = useStore(); const store = useStore();
const modalLoader = useContext(ModalLoaderContext); const modalLoader = useContext(ModalLoaderContext);
const [filterSupplier, setFilterSupplier] = useState([]); const [filterMembership, setFilterMembership] = useState([]);
const [filterSubCategories, setFilterSubCategories] = useState([]); const [filterSubCategories, setFilterSubCategories] = useState([]);
useEffect(() => { useEffect(() => {
const init = async () => { const init = async () => {
try { try {
modalLoader.setLoading(true); modalLoader.setLoading(true);
await store.membership.getData();
await store.payback.getDataConfirmation(); await store.payback.getDataConfirmation();
modalLoader.setLoading(false); modalLoader.setLoading(false);
} catch (e) { } catch (e) {
@ -209,29 +212,36 @@ export const Payback = observer(() => {
}; };
const handleRemoveFilter = async () => { const handleRemoveFilter = async () => {
store.product.filterSupplier = null; store.payback.filterMembership = null;
store.product.filterSubCategory = null; store.payback.filterStart = null;
setFilterSupplier([]); store.payback.filterEnd = null;
store.product.filterCategory = null; setFilterMembership([]);
setFilterSubCategories([]); form.resetFields();
await store.product.getData(); await store.payback.getDataConfirmation();
store.product.visibleModalFilterProduct = false; store.payback.visibleModalFilterPayback = false;
}; };
const handleCancelFilter = () => { const handleCancelFilter = () => {
setFilterSupplier([]); setFilterMembership([]);
store.product.filterCategory = null; form.resetFields();
setFilterSubCategories([]); store.payback.filterMembership = null;
store.payback.filterStart = null;
store.payback.filterEnd = null;
store.payback.visibleModalFilterPayback = false; store.payback.visibleModalFilterPayback = false;
}; };
const handleSubmitFilter = async () => { const handleSubmitFilter = async () => {
store.product.filterSupplier = filterSupplier; const data = form.getFieldsValue();
store.product.filterSubCategory = filterSubCategories; //console.log(data);
store.transaction.filterMembership = filterMembership;
store.transaction.filterStart = data.start_date;
store.transaction.filterEnd = data.end_date;
modalLoader.setLoading(true); modalLoader.setLoading(true);
await store.product.getData(); await store.payback.getDataConfirmation();
modalLoader.setLoading(false); modalLoader.setLoading(false);
store.product.visibleModalFilterProduct = false; form.resetFields();
setFilterMembership([]);
store.payback.visibleModalFilterPayback = false;
}; };
const handleFilterCategory = async (value) => { const handleFilterCategory = async (value) => {
@ -462,33 +472,55 @@ export const Payback = observer(() => {
visible={store.payback.visibleModalFilterPayback} visible={store.payback.visibleModalFilterPayback}
title={"Filter"} title={"Filter"}
footer={footerLayoutFilter} footer={footerLayoutFilter}
onCancel={() => {
form.resetFields();
setFilterMembership([]);
store.payback.visibleModalFilterPayback = false;
}}
> >
<Row> <Row>
<Col span={24}> <Col span={24}>
<Title level={5} type={"secondary"} strong> <Title level={5} type={"secondary"} strong>
From From
</Title> </Title>
<Form layout="vertical" name="filter" form={form}>
<Select <Select
mode={"multiple"} mode={"multiple"}
placeholder="Pilih Anggota" placeholder="Pilih Anggota"
onChange={(val) => { onChange={(val) => {
setFilterSupplier(val); setFilterMembership(val);
}} }}
style={{ marginBottom: "20px", width: "100%" }} style={{ marginBottom: "20px", width: "100%" }}
value={filterSupplier} value={filterMembership}
> >
{store.payback.dataConfirmation.map((item) => ( {store.membership.data.map((item) => (
<Option value={item.id} key={item.id}> <Option value={item.id} key={item.id}>
{item.userData_name} {item.name}
</Option> </Option>
))} ))}
</Select> </Select>
<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> </Col>
<Col span={24}> {/* <Col span={24}> */}
<Title level={5} type={"secondary"} strong>
{/* <Title level={5} type={"secondary"} strong>
Date Date
</Title> </Title>
<RangePicker style={{ marginBottom: "20px", width: "100%" }} /> <RangePicker style={{ marginBottom: "20px", width: "100%" }} /> */}
{/* <Select {/* <Select
mode={"multiple"} mode={"multiple"}
placeholder="Choose Category" placeholder="Choose Category"
@ -502,7 +534,7 @@ export const Payback = observer(() => {
</Option> </Option>
))} ))}
</Select> */} </Select> */}
</Col> {/* </Col> */}
{/* <Col span={24}> {/* <Col span={24}>
<Title level={5} type={"secondary"} strong> <Title level={5} type={"secondary"} strong>
Filter Sub-Categories Filter Sub-Categories

1
src/pages/Profile/Profile.js
View File

@ -74,6 +74,7 @@ export const Profile = observer(() => {
modalLoader.setLoading(true); modalLoader.setLoading(true);
await store.transaction.getDataHistoryTransaction(); await store.transaction.getDataHistoryTransaction();
modalLoader.setLoading(false); modalLoader.setLoading(false);
form.resetFields();
store.transaction.visibleModalFilterTransaction = false; store.transaction.visibleModalFilterTransaction = false;
}; };

3
src/store/membership.js
View File

@ -24,7 +24,7 @@ export class Membership {
const response = await http.get(`/users?page=${this.page}&pageSize=${this.pageSize}&superior=${this.filterMembership}&type=${this.filterPartner}`); const response = await http.get(`/users?page=${this.page}&pageSize=${this.pageSize}&superior=${this.filterMembership}&type=${this.filterPartner}`);
// console.log(this.filterMembership) // console.log(this.filterMembership)
// console.log(this.filterPartner) // console.log(this.filterPartner)
// console.log(response) console.log(response)
this.data = response.body.data.map((item, idx) => { this.data = response.body.data.map((item, idx) => {
item.key = idx; item.key = idx;
item.name = item?.user_detail?.name; item.name = item?.user_detail?.name;
@ -53,6 +53,7 @@ export class Membership {
async getDataBySuperior() { async getDataBySuperior() {
try { try {
const response = await http.get(`/users/find-by-supperior?page=${this.page}&pageSize=${this.pageSize}`); const response = await http.get(`/users/find-by-supperior?page=${this.page}&pageSize=${this.pageSize}`);
//console.log(response)
this.data = response.body.data.map((item, idx) => { this.data = response.body.data.map((item, idx) => {
item.key = idx; item.key = idx;
item.name = item?.user_detail?.name; item.name = item?.user_detail?.name;

3
src/store/payback.js
View File

@ -17,6 +17,9 @@ export class Payback {
//filter //filter
visibleModalFilterPayback = false; visibleModalFilterPayback = false;
filterMembership=null;
filterStart=null;
filterEnd=null;
constructor(ctx) { constructor(ctx) {
this.ctx = ctx; this.ctx = ctx;
makeAutoObservable(this); makeAutoObservable(this);