Merge branch 'develop' into 'devops-staging'

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

See merge request empatnusabangsa/ppob/ppob-frontend!169
This commit is contained in:
Rahman Efendi 2022-05-11 13:35:00 +00:00
commit eb68f65d9f
2 changed files with 331 additions and 332 deletions

View File

@ -64,40 +64,40 @@ export const ProductComponent = observer((props) => {
dataIndex: "current_price_price",
key: "current_price_price",
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
},
{
title: "Harga Jual",
dataIndex: "mark_up_price",
key: "mark_up_price",
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
},
{
title: "Harga",
dataIndex: "price",
key: "price",
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
},
{
title: "Biaya Admin",
dataIndex: "admin_price",
key: "admin_price",
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
},
{
title: "Supplier",
@ -114,27 +114,27 @@ export const ProductComponent = observer((props) => {
dataIndex: "tersedia",
key: "tersedia",
render: (text, record) => (
<Tag
color={record?.product_status === "ACTIVE" ? "blue" : "#E3E8EE"}
style={{ color: "#4F566B" }}
>
{record?.product_status === "ACTIVE" ? " Tersedia" : "Tidak"}
</Tag>
<Tag
color={record?.product_status === "ACTIVE" ? "blue" : "#E3E8EE"}
style={{ color: "#4F566B" }}
>
{record?.product_status === "ACTIVE" ? " Tersedia" : "Tidak"}
</Tag>
),
},
{
title: "Tindakan",
key: "action",
render: (text, record) => (
<Button
onClick={async () => {
history.push(
LINKS.PRODUCT_DETAIL.replace(":id", record.product_id)
);
}}
>
Detail
</Button>
<Button
onClick={async () => {
history.push(
LINKS.PRODUCT_DETAIL.replace(":id", record.product_id)
);
}}
>
Detail
</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[6];
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") delete columns[8];
//if (store.authentication.userData.role === "Admin Partner") delete columns[5];
@ -190,10 +189,10 @@ export const ProductComponent = observer((props) => {
try {
const response = await store.product.update(idData, data);
response?.body?.statusCode === 201 || response?.body?.statusCode === 200
? message.success(
response?.body?.message || "Berhasil Ubah Data Produk"
)
: message.error(response?.body?.message || "Gagal Ubah Data Produk");
? message.success(
response?.body?.message || "Berhasil Ubah Data Produk"
)
: message.error(response?.body?.message || "Gagal Ubah Data Produk");
} catch (e) {
message.error(e.response?.body?.message || "Gagal Ubah Data Produk");
}
@ -206,8 +205,8 @@ export const ProductComponent = observer((props) => {
try {
const response = await store.product.create(data);
response?.body?.statusCode === 201 || response?.body?.statusCode === 200
? message.success(response?.body?.message || "Berhasil Tambah Produk")
: message.error(response?.body?.message || "Gagal Tambah Produk");
? message.success(response?.body?.message || "Berhasil Tambah Produk")
: message.error(response?.body?.message || "Gagal Tambah Produk");
} catch (e) {
console.log(e, "apa errornya");
message.error(e.response?.body?.message || "Gagal Tambah Produk");
@ -227,8 +226,8 @@ export const ProductComponent = observer((props) => {
setFilterSupplier([]);
setFilterSubCategories([]);
store.authentication.userData.role === "Admin Partner"
? await store.product.getProductPartner()
: await store.product.getData();
? await store.product.getProductPartner()
: await store.product.getData();
//await store.product.getData();
modalLoader.setLoading(false);
};
@ -245,8 +244,8 @@ export const ProductComponent = observer((props) => {
store.product.filterSubCategory = filterSubCategories;
modalLoader.setLoading(true);
store.authentication.userData.role === "Admin Partner"
? await store.product.getProductPartner(filterSubCategories)
: await store.product.getData();
? await store.product.getProductPartner(filterSubCategories)
: await store.product.getData();
//await store.product.getData();
modalLoader.setLoading(false);
//store.product.page=1
@ -254,12 +253,12 @@ export const ProductComponent = observer((props) => {
const footerLayoutFilter = [
<Button
key={"remove"}
onClick={handleRemoveFilter}
style={{
backgroundColor: "#e74e5e",
color: "#fff",
}}
key={"remove"}
onClick={handleRemoveFilter}
style={{
backgroundColor: "#e74e5e",
color: "#fff",
}}
>
Hapus Filter
</Button>,
@ -267,12 +266,12 @@ export const ProductComponent = observer((props) => {
Batal
</Button>,
<Button
key={"submit"}
onClick={handleSubmitFilter}
style={{
backgroundColor: "#4e79e7",
color: "#fff",
}}
key={"submit"}
onClick={handleSubmitFilter}
style={{
backgroundColor: "#4e79e7",
color: "#fff",
}}
>
Terapkan
</Button>,
@ -284,293 +283,293 @@ export const ProductComponent = observer((props) => {
},
});
return (
<div>
{store.ui.mediaQuery.isDesktop && (
<Table
style={{
cursor: "pointer",
textAlign: "center",
width: store.ui.mediaQuery.isMobile ? 250 : "",
}}
columns={columns}
dataSource={
store.authentication.userData.role === "Admin Partner"
? store.product.dataProductPartner
: store.product.data
}
onRow={handleClickRow}
pagination={{
pageSize: store.authentication.userData.role === "Admin" ? store.product.pageSize : store.product.pageSizeProductPartner,
total:
store.authentication.userData.role === "Admin Partner"
? store.product.total_data_partner
: store.product.total_data,
current: store.authentication.userData.role === "Admin" ? store.product.page + 1 : store.product.pageProductPartner + 1,
showSizeChanger: true,
simple: false,
}}
onChange={async (page) => {
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.page = pageNumber - 1 : store.product.pageProductPartner = pageNumber - 1
store.product.filterSubCategory = filterSubCategories
modalLoader.setLoading(true);
store.authentication.userData.role === "Admin Partner"
? await store.product.getProductPartner(
// store.authentication.profileData.id
)
: await store.product.getData();
modalLoader.setLoading(false);
}}
/>
)}
{store.ui.mediaQuery.isMobile && (
<List
itemLayout="horizontal"
position={"top"}
pagination={{
onChange: async (page, 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
modalLoader.setLoading(true);
store.authentication.userData.role === "Admin Partner"
? await store.product.getProductPartner(
// store.authentication.profileData.id
)
: await store.product.getData();
//await store.product.getData();
modalLoader.setLoading(false);
},
pageSize: store.authentication.userData.role === "Admin" ? store.product.pageSize : store.product.pageSizeProductPartner,
total: store.authentication.userData.role === "Admin Partner"
? store.product.total_data_partner
: store.product.total_data,
current: store.authentication.userData.role === "Admin" ? store.product.page + 1 : store.product.pageProductPartner + 1,
style: { marginBottom: "1rem", marginRight: "1rem" },
}}
dataSource={
store.authentication.userData.role === "Admin Partner"
? store.product.dataProductPartner
: store.product.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={[""].join(" ")}
title={item.product_code}
description={
<div style={{}}>
<p>
<small>{item.product_name}</small> <br />
{/* <small>Harga Beli : {item.current_price_price}</small>
<div>
{store.ui.mediaQuery.isDesktop && (
<Table
style={{
cursor: "pointer",
textAlign: "center",
width: store.ui.mediaQuery.isMobile ? 250 : "",
}}
columns={columns}
dataSource={
store.authentication.userData.role === "Admin Partner"
? store.product.dataProductPartner
: store.product.data
}
onRow={handleClickRow}
pagination={{
pageSize: store.authentication.userData.role === "Admin" ? store.product.pageSize : store.product.pageSizeProductPartner,
total:
store.authentication.userData.role === "Admin Partner"
? store.product.total_data_partner
: store.product.total_data,
current: store.authentication.userData.role === "Admin" ? store.product.page + 1 : store.product.pageProductPartner + 1,
showSizeChanger: true,
simple: false,
}}
onChange={async (page) => {
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.page = pageNumber - 1 : store.product.pageProductPartner = pageNumber - 1
store.product.filterSubCategory = filterSubCategories
modalLoader.setLoading(true);
store.authentication.userData.role === "Admin Partner"
? await store.product.getProductPartner(
filterSubCategories
)
: await store.product.getData();
modalLoader.setLoading(false);
}}
/>
)}
{store.ui.mediaQuery.isMobile && (
<List
itemLayout="horizontal"
position={"top"}
pagination={{
onChange: async (page, 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
modalLoader.setLoading(true);
store.authentication.userData.role === "Admin Partner"
? await store.product.getProductPartner(
filterSubCategories
)
: await store.product.getData();
//await store.product.getData();
modalLoader.setLoading(false);
},
pageSize: store.authentication.userData.role === "Admin" ? store.product.pageSize : store.product.pageSizeProductPartner,
total: store.authentication.userData.role === "Admin Partner"
? store.product.total_data_partner
: store.product.total_data,
current: store.authentication.userData.role === "Admin" ? store.product.page + 1 : store.product.pageProductPartner + 1,
style: { marginBottom: "1rem", marginRight: "1rem" },
}}
dataSource={
store.authentication.userData.role === "Admin Partner"
? store.product.dataProductPartner
: store.product.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={[""].join(" ")}
title={item.product_code}
description={
<div style={{}}>
<p>
<small>{item.product_name}</small> <br />
{/* <small>Harga Beli : {item.current_price_price}</small>
<br /> */}
<small>Harga Jual : {item.mark_up_price}</small>
<br />
<Button
onClick={async () => {
history.push(
LINKS.PRODUCT_DETAIL.replace(
":id",
item.product_id
)
);
}}
>
Detail
</Button>
</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 }} />
<small>Harga Jual : {item.mark_up_price}</small>
<br />
<Button
onClick={async () => {
history.push(
LINKS.PRODUCT_DETAIL.replace(
":id",
item.product_id
)
);
}}
>
Detail
</Button>
</p>
<p></p>
</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}>
<Title level={5} type={"secondary"} strong>
Filter Supplier
</Title>
<Select
mode={"multiple"}
placeholder="Choose Supplier"
onChange={(val) => {
setFilterSupplier(val);
}
/>
<div style={{ marginRight: 16 }}>
<p
style={{
fontSize: 9,
margin: 0,
}}
style={{ marginBottom: "20px", width: "100%" }}
value={filterSupplier}
>
{store.supplier.data.map((item) => (
<Option value={item.id} key={item.id}>
{item.name}
</Option>
))}
</Select>
</Col>
)}
>
<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>
);
}}
/>
)}
<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}>
<Title level={5} type={"secondary"} strong>
Filter Sub-Categories
Filter Supplier
</Title>
<Select
mode={"multiple"}
placeholder="Choose Sub-Category"
onChange={(val) => {
setFilterSubCategories(val);
}}
style={{ marginBottom: "20px", width: "100%" }}
value={filterSubCategories}
mode={"multiple"}
placeholder="Choose Supplier"
onChange={(val) => {
setFilterSupplier(val);
}}
style={{ marginBottom: "20px", width: "100%" }}
value={filterSupplier}
>
{store.product.dataSubCategories.map((item) => (
<Option value={item.id} key={item.id}>
{item.name}
</Option>
{store.supplier.data.map((item) => (
<Option value={item.id} key={item.id}>
{item.name}
</Option>
))}
</Select>
</Col>
</Row>
</Modal>
</div>
)}
<Col span={24}>
<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>
);
});

View File

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