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

feat: revisi fixing filter admin partner and add column biaya admin

Browse Source
This commit is contained in:
rahman 2022-05-11 20:33:04 +07:00
parent e1c7c673a7
commit 6a26068339
2 changed files with 331 additions and 332 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

661
src/component/ProductComponent.js
View File

@ -64,40 +64,40 @@ export const ProductComponent = observer((props) => {
dataIndex: "current_price_price", dataIndex: "current_price_price",
key: "current_price_price", key: "current_price_price",
render: (text) => render: (text) =>
new Intl.NumberFormat("id-ID", { new Intl.NumberFormat("id-ID", {
style: "currency", style: "currency",
currency: "IDR", currency: "IDR",
}).format(text), }).format(text),
}, },
{ {
title: "Harga Jual", title: "Harga Jual",
dataIndex: "mark_up_price", dataIndex: "mark_up_price",
key: "mark_up_price", key: "mark_up_price",
render: (text) => render: (text) =>
new Intl.NumberFormat("id-ID", { new Intl.NumberFormat("id-ID", {
style: "currency", style: "currency",
currency: "IDR", currency: "IDR",
}).format(text), }).format(text),
}, },
{ {
title: "Harga", title: "Harga",
dataIndex: "price", dataIndex: "price",
key: "price", key: "price",
render: (text) => render: (text) =>
new Intl.NumberFormat("id-ID", { new Intl.NumberFormat("id-ID", {
style: "currency", style: "currency",
currency: "IDR", currency: "IDR",
}).format(text), }).format(text),
}, },
{ {
title: "Biaya Admin", title: "Biaya Admin",
dataIndex: "admin_price", dataIndex: "admin_price",
key: "admin_price", key: "admin_price",
render: (text) => render: (text) =>
new Intl.NumberFormat("id-ID", { new Intl.NumberFormat("id-ID", {
style: "currency", style: "currency",
currency: "IDR", currency: "IDR",
}).format(text), }).format(text),
}, },
{ {
title: "Supplier", title: "Supplier",
@ -114,27 +114,27 @@ export const ProductComponent = observer((props) => {
dataIndex: "tersedia", dataIndex: "tersedia",
key: "tersedia", key: "tersedia",
render: (text, record) => ( render: (text, record) => (
<Tag <Tag
color={record?.product_status === "ACTIVE" ? "blue" : "#E3E8EE"} color={record?.product_status === "ACTIVE" ? "blue" : "#E3E8EE"}
style={{ color: "#4F566B" }} style={{ color: "#4F566B" }}
> >
{record?.product_status === "ACTIVE" ? " Tersedia" : "Tidak"} {record?.product_status === "ACTIVE" ? " Tersedia" : "Tidak"}
</Tag> </Tag>
), ),
}, },
{ {
title: "Tindakan", title: "Tindakan",
key: "action", key: "action",
render: (text, record) => ( render: (text, record) => (
<Button <Button
onClick={async () => { onClick={async () => {
history.push( history.push(
LINKS.PRODUCT_DETAIL.replace(":id", record.product_id) LINKS.PRODUCT_DETAIL.replace(":id", record.product_id)
); );
}} }}
> >
Detail Detail
</Button> </Button>
), ),
}, },
]; ];
@ -145,7 +145,6 @@ export const ProductComponent = observer((props) => {
if (store.authentication.userData.role !== "Admin") delete columns[8]; if (store.authentication.userData.role !== "Admin") delete columns[8];
if (store.authentication.userData.role !== "Admin") delete columns[6]; if (store.authentication.userData.role !== "Admin") delete columns[6];
if (store.authentication.userData.role !== "Admin") delete columns[2]; if (store.authentication.userData.role !== "Admin") delete columns[2];
if (store.authentication.userData.role !== "Admin") delete columns[5];
if (store.authentication.userData.role === "Admin Partner") delete columns[7]; if (store.authentication.userData.role === "Admin Partner") delete columns[7];
//if (store.authentication.userData.role !== "Admin") delete columns[8]; //if (store.authentication.userData.role !== "Admin") delete columns[8];
//if (store.authentication.userData.role === "Admin Partner") delete columns[5]; //if (store.authentication.userData.role === "Admin Partner") delete columns[5];
@ -190,10 +189,10 @@ export const ProductComponent = observer((props) => {
try { try {
const response = await store.product.update(idData, data); const response = await store.product.update(idData, data);
response?.body?.statusCode === 201 || response?.body?.statusCode === 200 response?.body?.statusCode === 201 || response?.body?.statusCode === 200
? message.success( ? message.success(
response?.body?.message || "Berhasil Ubah Data Produk" response?.body?.message || "Berhasil Ubah Data Produk"
) )
: message.error(response?.body?.message || "Gagal Ubah Data Produk"); : message.error(response?.body?.message || "Gagal Ubah Data Produk");
} catch (e) { } catch (e) {
message.error(e.response?.body?.message || "Gagal Ubah Data Produk"); message.error(e.response?.body?.message || "Gagal Ubah Data Produk");
} }
@ -206,8 +205,8 @@ export const ProductComponent = observer((props) => {
try { try {
const response = await store.product.create(data); const response = await store.product.create(data);
response?.body?.statusCode === 201 || response?.body?.statusCode === 200 response?.body?.statusCode === 201 || response?.body?.statusCode === 200
? message.success(response?.body?.message || "Berhasil Tambah Produk") ? message.success(response?.body?.message || "Berhasil Tambah Produk")
: message.error(response?.body?.message || "Gagal Tambah Produk"); : message.error(response?.body?.message || "Gagal Tambah Produk");
} catch (e) { } catch (e) {
console.log(e, "apa errornya"); console.log(e, "apa errornya");
message.error(e.response?.body?.message || "Gagal Tambah Produk"); message.error(e.response?.body?.message || "Gagal Tambah Produk");
@ -227,8 +226,8 @@ export const ProductComponent = observer((props) => {
setFilterSupplier([]); setFilterSupplier([]);
setFilterSubCategories([]); setFilterSubCategories([]);
store.authentication.userData.role === "Admin Partner" store.authentication.userData.role === "Admin Partner"
? await store.product.getProductPartner() ? await store.product.getProductPartner()
: await store.product.getData(); : await store.product.getData();
//await store.product.getData(); //await store.product.getData();
modalLoader.setLoading(false); modalLoader.setLoading(false);
}; };
@ -245,8 +244,8 @@ export const ProductComponent = observer((props) => {
store.product.filterSubCategory = filterSubCategories; store.product.filterSubCategory = filterSubCategories;
modalLoader.setLoading(true); modalLoader.setLoading(true);
store.authentication.userData.role === "Admin Partner" store.authentication.userData.role === "Admin Partner"
? await store.product.getProductPartner(filterSubCategories) ? await store.product.getProductPartner(filterSubCategories)
: await store.product.getData(); : await store.product.getData();
//await store.product.getData(); //await store.product.getData();
modalLoader.setLoading(false); modalLoader.setLoading(false);
//store.product.page=1 //store.product.page=1
@ -254,12 +253,12 @@ export const ProductComponent = observer((props) => {
const footerLayoutFilter = [ const footerLayoutFilter = [
<Button <Button
key={"remove"} key={"remove"}
onClick={handleRemoveFilter} onClick={handleRemoveFilter}
style={{ style={{
backgroundColor: "#e74e5e", backgroundColor: "#e74e5e",
color: "#fff", color: "#fff",
}} }}
> >
Hapus Filter Hapus Filter
</Button>, </Button>,
@ -267,12 +266,12 @@ export const ProductComponent = observer((props) => {
Batal Batal
</Button>, </Button>,
<Button <Button
key={"submit"} key={"submit"}
onClick={handleSubmitFilter} onClick={handleSubmitFilter}
style={{ style={{
backgroundColor: "#4e79e7", backgroundColor: "#4e79e7",
color: "#fff", color: "#fff",
}} }}
> >
Terapkan Terapkan
</Button>, </Button>,
@ -284,293 +283,293 @@ export const ProductComponent = observer((props) => {
}, },
}); });
return ( return (
<div> <div>
{store.ui.mediaQuery.isDesktop && ( {store.ui.mediaQuery.isDesktop && (
<Table <Table
style={{ style={{
cursor: "pointer", cursor: "pointer",
textAlign: "center", textAlign: "center",
width: store.ui.mediaQuery.isMobile ? 250 : "", width: store.ui.mediaQuery.isMobile ? 250 : "",
}} }}
columns={columns} columns={columns}
dataSource={ dataSource={
store.authentication.userData.role === "Admin Partner" store.authentication.userData.role === "Admin Partner"
? store.product.dataProductPartner ? store.product.dataProductPartner
: store.product.data : store.product.data
} }
onRow={handleClickRow} onRow={handleClickRow}
pagination={{ pagination={{
pageSize: store.authentication.userData.role === "Admin" ? store.product.pageSize : store.product.pageSizeProductPartner, pageSize: store.authentication.userData.role === "Admin" ? store.product.pageSize : store.product.pageSizeProductPartner,
total: total:
store.authentication.userData.role === "Admin Partner" store.authentication.userData.role === "Admin Partner"
? store.product.total_data_partner ? store.product.total_data_partner
: store.product.total_data, : store.product.total_data,
current: store.authentication.userData.role === "Admin" ? store.product.page + 1 : store.product.pageProductPartner + 1, current: store.authentication.userData.role === "Admin" ? store.product.page + 1 : store.product.pageProductPartner + 1,
showSizeChanger: true, showSizeChanger: true,
simple: false, simple: false,
}} }}
onChange={async (page) => { onChange={async (page) => {
let pageNumber = page.current; let pageNumber = page.current;
store.authentication.userData.role === "Admin" ? store.product.pageSize = page.pageSize : store.product.pageSizeProductPartner = page.pageSize; store.authentication.userData.role === "Admin" ? store.product.pageSize = page.pageSize : store.product.pageSizeProductPartner = page.pageSize;
store.authentication.userData.role === "Admin" ? store.product.page = pageNumber - 1 : store.product.pageProductPartner = pageNumber - 1 store.authentication.userData.role === "Admin" ? store.product.page = pageNumber - 1 : store.product.pageProductPartner = pageNumber - 1
store.product.filterSubCategory = filterSubCategories store.product.filterSubCategory = filterSubCategories
modalLoader.setLoading(true); modalLoader.setLoading(true);
store.authentication.userData.role === "Admin Partner" store.authentication.userData.role === "Admin Partner"
? await store.product.getProductPartner( ? await store.product.getProductPartner(
// store.authentication.profileData.id filterSubCategories
) )
: await store.product.getData(); : await store.product.getData();
modalLoader.setLoading(false); modalLoader.setLoading(false);
}} }}
/> />
)} )}
{store.ui.mediaQuery.isMobile && ( {store.ui.mediaQuery.isMobile && (
<List <List
itemLayout="horizontal" itemLayout="horizontal"
position={"top"} position={"top"}
pagination={{ pagination={{
onChange: async (page, pageSize) => { onChange: async (page, pageSize) => {
store.authentication.userData.role === "Admin" ? store.product.pageSize = pageSize : store.product.pageSizeProductPartner = pageSize; store.authentication.userData.role === "Admin" ? store.product.pageSize = pageSize : store.product.pageSizeProductPartner = pageSize;
store.authentication.userData.role === "Admin" ? store.product.page = page - 1 : store.product.pageProductPartner = page - 1 store.authentication.userData.role === "Admin" ? store.product.page = page - 1 : store.product.pageProductPartner = page - 1
modalLoader.setLoading(true); modalLoader.setLoading(true);
store.authentication.userData.role === "Admin Partner" store.authentication.userData.role === "Admin Partner"
? await store.product.getProductPartner( ? await store.product.getProductPartner(
// store.authentication.profileData.id filterSubCategories
) )
: await store.product.getData(); : await store.product.getData();
//await store.product.getData(); //await store.product.getData();
modalLoader.setLoading(false); modalLoader.setLoading(false);
}, },
pageSize: store.authentication.userData.role === "Admin" ? store.product.pageSize : store.product.pageSizeProductPartner, pageSize: store.authentication.userData.role === "Admin" ? store.product.pageSize : store.product.pageSizeProductPartner,
total: store.authentication.userData.role === "Admin Partner" total: store.authentication.userData.role === "Admin Partner"
? store.product.total_data_partner ? store.product.total_data_partner
: store.product.total_data, : store.product.total_data,
current: store.authentication.userData.role === "Admin" ? store.product.page + 1 : store.product.pageProductPartner + 1, current: store.authentication.userData.role === "Admin" ? store.product.page + 1 : store.product.pageProductPartner + 1,
style: { marginBottom: "1rem", marginRight: "1rem" }, style: { marginBottom: "1rem", marginRight: "1rem" },
}} }}
dataSource={ dataSource={
store.authentication.userData.role === "Admin Partner" store.authentication.userData.role === "Admin Partner"
? store.product.dataProductPartner ? store.product.dataProductPartner
: store.product.data : store.product.data
} }
style={{ padding: 0 }} style={{ padding: 0 }}
renderItem={(item) => { renderItem={(item) => {
return ( return (
<div> <div>
<List.Item <List.Item
key={item.id} key={item.id}
style={{ style={{
backgroundColor: "#ffffff", backgroundColor: "#ffffff",
paddingTop: 0, paddingTop: 0,
paddingBottom: 0, paddingBottom: 0,
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
}} }}
> >
<List.Item.Meta <List.Item.Meta
className={[""].join(" ")} className={[""].join(" ")}
title={item.product_code} title={item.product_code}
description={ description={
<div style={{}}> <div style={{}}>
<p> <p>
<small>{item.product_name}</small> <br /> <small>{item.product_name}</small> <br />
{/* <small>Harga Beli : {item.current_price_price}</small> {/* <small>Harga Beli : {item.current_price_price}</small>
<br /> */} <br /> */}
<small>Harga Jual : {item.mark_up_price}</small> <small>Harga Jual : {item.mark_up_price}</small>
<br /> <br />
<Button <Button
onClick={async () => { onClick={async () => {
history.push( history.push(
LINKS.PRODUCT_DETAIL.replace( LINKS.PRODUCT_DETAIL.replace(
":id", ":id",
item.product_id item.product_id
) )
); );
}} }}
> >
Detail Detail
</Button> </Button>
</p> </p>
<p></p> <p></p>
</div>
}
/>
<div style={{ marginRight: 16 }}>
<p
style={{
fontSize: 9,
margin: 0,
}}
>
<Tag
color={
item?.product_status === "ACTIVE" ? "blue" : "#E3E8EE"
}
style={{ color: "#4F566B" }}
>
{item?.product_status === "ACTIVE"
? " Tersedia"
: "Tidak"}
</Tag>
</p>
</div>
</List.Item>
<Divider plain style={{ margin: 0 }} />
</div> </div>
); }
}} />
/> <div style={{ marginRight: 16 }}>
)} <p
<Modal style={{
visible={store.product.visibleModalProduct} fontSize: 9,
title={idData ? "Edit Product" : "Create a new Product"} margin: 0,
okText={idData ? "Edit" : "Create"}
cancelText="Batal"
onCancel={() => {
form.resetFields();
handleCancel();
}}
onOk={() => {
form
.validateFields()
.then((values) => {
console.log(values, "isi form");
handleSubmit(values);
form.resetFields();
})
.catch((info) => {
console.error("Validate Failed:", info);
});
}}
>
<Form form={form} layout="vertical">
<Form.Item
name="name"
label="Name"
rules={[{ required: true, message: "Please input name!" }]}
>
<Input />
</Form.Item>
<Form.Item
name="price"
label="Price"
rules={[{ required: true, message: "Please input price!" }]}
>
<InputNumber
style={{ width: "100%" }}
formatter={(value) =>
`Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")}
/>
</Form.Item>
<Form.Item
name="markUpPrice"
label="Mark Up Price"
rules={[{ required: true, message: "Please input mark up price!" }]}
>
<InputNumber
style={{ width: "100%" }}
formatter={(value) =>
`Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")}
/>
</Form.Item>
<Form.Item
name="code"
label="Code"
rules={[{ required: true, message: "Please input code!" }]}
>
<Input />
</Form.Item>
<Form.Item
name="status"
label="Status"
rules={[{ required: true, message: "Please select Status!" }]}
>
<Select placeholder="Select Sub Category" allowClear>
<Option value="ACTIVE">AKTIF</Option>
<Option value="INACTIVE">INAKTIF</Option>
</Select>
</Form.Item>
<Form.Item
name="subCategoriesId"
label="Sub categories"
rules={[
{ required: true, message: "Please select sub categories!" },
]}
>
<Select placeholder="Select Sub Category" allowClear>
{store.category.dataSubCategories.map((item) => (
<Option value={item.id} key={item.id}>
{item.name}
</Option>
))}
</Select>
</Form.Item>
</Form>
</Modal>
<Modal
visible={store.product.visibleModalFilterProduct}
title={"Filter"}
footer={footerLayoutFilter}
onCancel={async () => {
// setFilterSupplier([]);
// setFilterSubCategories([]);
store.product.filterSupplier = null;
store.product.filterSubCategory = null;
store.product.visibleModalFilterProduct = false;
await store.product.getData();
}}
>
<Row>
{store.authentication.userData.role === "Admin" && (
<Col span={24}>
<Title level={5} type={"secondary"} strong>
Filter Supplier
</Title>
<Select
mode={"multiple"}
placeholder="Choose Supplier"
onChange={(val) => {
setFilterSupplier(val);
}} }}
style={{ marginBottom: "20px", width: "100%" }} >
value={filterSupplier} <Tag
> color={
{store.supplier.data.map((item) => ( item?.product_status === "ACTIVE" ? "blue" : "#E3E8EE"
<Option value={item.id} key={item.id}> }
{item.name} style={{ color: "#4F566B" }}
</Option> >
))} {item?.product_status === "ACTIVE"
</Select> ? " Tersedia"
</Col> : "Tidak"}
)} </Tag>
</p>
</div>
</List.Item>
<Divider plain style={{ margin: 0 }} />
</div>
);
}}
/>
)}
<Modal
visible={store.product.visibleModalProduct}
title={idData ? "Edit Product" : "Create a new Product"}
okText={idData ? "Edit" : "Create"}
cancelText="Batal"
onCancel={() => {
form.resetFields();
handleCancel();
}}
onOk={() => {
form
.validateFields()
.then((values) => {
console.log(values, "isi form");
handleSubmit(values);
form.resetFields();
})
.catch((info) => {
console.error("Validate Failed:", info);
});
}}
>
<Form form={form} layout="vertical">
<Form.Item
name="name"
label="Name"
rules={[{ required: true, message: "Please input name!" }]}
>
<Input />
</Form.Item>
<Form.Item
name="price"
label="Price"
rules={[{ required: true, message: "Please input price!" }]}
>
<InputNumber
style={{ width: "100%" }}
formatter={(value) =>
`Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")}
/>
</Form.Item>
<Form.Item
name="markUpPrice"
label="Mark Up Price"
rules={[{ required: true, message: "Please input mark up price!" }]}
>
<InputNumber
style={{ width: "100%" }}
formatter={(value) =>
`Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")}
/>
</Form.Item>
<Form.Item
name="code"
label="Code"
rules={[{ required: true, message: "Please input code!" }]}
>
<Input />
</Form.Item>
<Form.Item
name="status"
label="Status"
rules={[{ required: true, message: "Please select Status!" }]}
>
<Select placeholder="Select Sub Category" allowClear>
<Option value="ACTIVE">AKTIF</Option>
<Option value="INACTIVE">INAKTIF</Option>
</Select>
</Form.Item>
<Form.Item
name="subCategoriesId"
label="Sub categories"
rules={[
{ required: true, message: "Please select sub categories!" },
]}
>
<Select placeholder="Select Sub Category" allowClear>
{store.category.dataSubCategories.map((item) => (
<Option value={item.id} key={item.id}>
{item.name}
</Option>
))}
</Select>
</Form.Item>
</Form>
</Modal>
<Modal
visible={store.product.visibleModalFilterProduct}
title={"Filter"}
footer={footerLayoutFilter}
onCancel={async () => {
// setFilterSupplier([]);
// setFilterSubCategories([]);
store.product.filterSupplier = null;
store.product.filterSubCategory = null;
store.product.visibleModalFilterProduct = false;
await store.product.getData();
}}
>
<Row>
{store.authentication.userData.role === "Admin" && (
<Col span={24}> <Col span={24}>
<Title level={5} type={"secondary"} strong> <Title level={5} type={"secondary"} strong>
Filter Sub-Categories Filter Supplier
</Title> </Title>
<Select <Select
mode={"multiple"} mode={"multiple"}
placeholder="Choose Sub-Category" placeholder="Choose Supplier"
onChange={(val) => { onChange={(val) => {
setFilterSubCategories(val); setFilterSupplier(val);
}} }}
style={{ marginBottom: "20px", width: "100%" }} style={{ marginBottom: "20px", width: "100%" }}
value={filterSubCategories} value={filterSupplier}
> >
{store.product.dataSubCategories.map((item) => ( {store.supplier.data.map((item) => (
<Option value={item.id} key={item.id}> <Option value={item.id} key={item.id}>
{item.name} {item.name}
</Option> </Option>
))} ))}
</Select> </Select>
</Col> </Col>
</Row> )}
</Modal> <Col span={24}>
</div> <Title level={5} type={"secondary"} strong>
Filter Sub-Categories
</Title>
<Select
mode={"multiple"}
placeholder="Choose Sub-Category"
onChange={(val) => {
setFilterSubCategories(val);
}}
style={{ marginBottom: "20px", width: "100%" }}
value={filterSubCategories}
>
{store.product.dataSubCategories.map((item) => (
<Option value={item.id} key={item.id}>
{item.name}
</Option>
))}
</Select>
</Col>
</Row>
</Modal>
</div>
); );
}); });

2
src/store/product.js
View File

@ -101,7 +101,7 @@ export class Product {
} }
async getProductPartner(id) { async getProductPartner(id) {
console.log({ id });
if (id === undefined) { if (id === undefined) {
try { try {
const response = await http.get(`/product/by-categories?page=${this.pageProductPartner}&pageSize=${this.pageSizeProductPartner}&sub-category=`); const response = await http.get(`/product/by-categories?page=${this.pageProductPartner}&pageSize=${this.pageSizeProductPartner}&sub-category=`);