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

feat: handler modal dynamic

Browse Source
This commit is contained in:
caturbgs 2021-12-22 14:43:04 +07:00
parent 7edf7650ec
commit 7cf403f19d
3 changed files with 55 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/component/ProductComponent.js
View File

@ -15,9 +15,8 @@ export const ProductComponent = observer((props) => {
const {Option} = Select;
const history = useHistory();
const [idData, setIdData] = useState("");
const [filterSupplier, setFilterSupplier] = useState(null);
const [filterCategories, setFilterCategories] = useState(null);
const [filterSubCategories, setFilterSubCategories] = useState(null);
const [filterSupplier, setFilterSupplier] = useState([]);
const [filterSubCategories, setFilterSubCategories] = useState([]);
const modalLoader = useContext(ModalLoaderContext);
const handleEditButton = (data) => {
@ -163,17 +162,17 @@ export const ProductComponent = observer((props) => {
const handleRemoveFilter = async () => {
store.product.filterSupplier = null;
store.product.filterSubCategory = null;
setFilterSupplier(null);
setFilterCategories(null);
setFilterSubCategories(null);
setFilterSupplier([]);
store.product.filterCategory = null;
setFilterSubCategories([]);
await store.product.getData();
store.product.visibleModalFilterProduct = false;
};
const handleCancelFilter = () => {
setFilterSupplier(null);
setFilterCategories(null);
setFilterSubCategories(null);
setFilterSupplier([]);
store.product.filterCategory = null;
setFilterSubCategories([]);
store.product.visibleModalFilterProduct = false;
};
@ -186,6 +185,16 @@ export const ProductComponent = observer((props) => {
store.product.visibleModalFilterProduct = false;
};
const handleFilterCategory = async (value) => {
if (value) {
store.product.filterCategory = value;
await store.product.getDataSubCategories();
} else {
store.product.filterCategory = null;
await store.product.getDataSubCategories();
}
};
const footerLayoutFilter = [
<Button
key={"remove"}
@ -409,6 +418,7 @@ export const ProductComponent = observer((props) => {
setFilterSupplier(val);
}}
style={{marginBottom: "20px", width: "100%"}}
value={filterSupplier}
>
{store.supplier.data.map((item) => (
<Option value={item.id} key={item.id}>
@ -424,12 +434,9 @@ export const ProductComponent = observer((props) => {
<Select
mode={"multiple"}
placeholder="Choose Category"
onChange={async (val) => {
setFilterCategories(val);
store.product.filterByCategory = val;
await store.product.getDataSubCategories();
}}
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}>
@ -449,6 +456,7 @@ export const ProductComponent = observer((props) => {
setFilterSubCategories(val);
}}
style={{marginBottom: "20px", width: "100%"}}
value={filterSubCategories}
>
{store.product.dataSubCategories.map((item) => (
<Option value={item.id} key={item.id}>

2
src/pages/Product/Product.js
View File

@ -21,7 +21,7 @@ export const Product = observer(() => {
await Promise.allSettled([
store.supplier.getData(),
store.category.getData(),
store.category.getDataSubCategories(),
store.product.getDataSubCategories(),
]);
await store.product.getData();
modalLoader.setLoading(false);

4
src/store/product.js
View File

@ -21,7 +21,7 @@ export class Product {
pageSizeSubCategories = 10
dataSubCategories = [];
total_dataSubCategories = 0;
filterByCategory = null;
filterCategory = null;
constructor(ctx) {
this.ctx = ctx;
@ -44,7 +44,7 @@ export class Product {
async getDataSubCategories() {
try {
const response = await http.get(`/product/sub-categories?category=${this.filterByCategory}&page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
const response = await http.get(`/product/sub-categories?category=${this.filterCategory}&page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
this.dataSubCategories = response.body.data.map((item, idx) => {
item.key = idx;
return item