fixed category filtering bug
This commit is contained in:
parent
a184219005
commit
0049d16385
@ -88,7 +88,7 @@ const CategoryFilterDesktop = ({
|
||||
}
|
||||
/>
|
||||
|
||||
{menuItems.map((item, index) => (
|
||||
{menuItems?.map((item, index) => (
|
||||
<SubList
|
||||
categoryType={item.key}
|
||||
categories={item.categories || []}
|
||||
@ -112,4 +112,4 @@ export default inject(({ oformsStore }) => ({
|
||||
|
||||
oformsFilter: oformsStore.oformsFilter,
|
||||
filterOformsByCategory: oformsStore.filterOformsByCategory,
|
||||
}))(withTranslation(["FormGallery"])(observer(CategoryFilterDesktop)));
|
||||
}))(withTranslation(["FormGallery"])(CategoryFilterDesktop));
|
||||
|
@ -2,21 +2,21 @@ import * as Styled from "./index.styled";
|
||||
|
||||
import DropDownItem from "@docspace/components/drop-down-item";
|
||||
import { useState, useRef } from "react";
|
||||
import { inject } from "mobx-react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import CategorySubList from "./CategorySubList";
|
||||
import Scrollbar from "@docspace/components/scrollbar";
|
||||
import ComboButton from "@docspace/components/combobox/sub-components/combo-button";
|
||||
import { getOformCategoryTitle } from "@docspace/client/src/helpers/utils";
|
||||
import { getDefaultOformLocale } from "@docspace/common/utils";
|
||||
|
||||
const CategoryFilterMobile = ({
|
||||
t,
|
||||
|
||||
menuItems,
|
||||
|
||||
onViewAllTemplates,
|
||||
formsByBranch,
|
||||
formsByType,
|
||||
formsByCompilation,
|
||||
currentCategory,
|
||||
filterOformsByCategory,
|
||||
|
||||
...rest
|
||||
}) => {
|
||||
@ -39,11 +39,15 @@ const CategoryFilterMobile = ({
|
||||
if (calculatedHeight > maxCalculatedHeight)
|
||||
calculatedHeight = maxCalculatedHeight;
|
||||
|
||||
const onViewAllTemplates = () => filterOformsByCategory("", "");
|
||||
|
||||
return (
|
||||
<Styled.CategoryFilterMobileWrapper ref={wrapperRef} {...rest}>
|
||||
<ComboButton
|
||||
selectedOption={{
|
||||
label: t("FormGallery:Categories"),
|
||||
label:
|
||||
getOformCategoryTitle(currentCategory, getDefaultOformLocale()) ||
|
||||
t("FormGallery:Categories"),
|
||||
}}
|
||||
isOpen={isOpen}
|
||||
scaled={true}
|
||||
@ -103,11 +107,5 @@ const CategoryFilterMobile = ({
|
||||
|
||||
export default inject(({ oformsStore }) => ({
|
||||
currentCategory: oformsStore.currentCategory,
|
||||
|
||||
fetchCategoriesByBranch: oformsStore.fetchCategoriesByBranch,
|
||||
fetchCategoriesByType: oformsStore.fetchCategoriesByType,
|
||||
fetchPopularCategories: oformsStore.fetchPopularCategories,
|
||||
|
||||
oformsFilter: oformsStore.oformsFilter,
|
||||
filterOformsByCategory: oformsStore.filterOformsByCategory,
|
||||
}))(withTranslation(["FormGallery"])(CategoryFilterMobile));
|
||||
|
@ -2,12 +2,10 @@ import { useState, useEffect } from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import CategoryFilterDesktop from "./DesktopView";
|
||||
import CategoryFilterMobile from "./MobileView";
|
||||
import { getOformCategoryTitle } from "@docspace/client/src/helpers/utils";
|
||||
import { smallTablet } from "@docspace/components/utils/device";
|
||||
import { isMobileOnly } from "react-device-detect";
|
||||
|
||||
import styled, { css } from "styled-components";
|
||||
import { getDefaultOformLocale } from "@docspace/common/utils";
|
||||
|
||||
export const StyledCategoryFilterWrapper = styled.div`
|
||||
width: 100%;
|
||||
@ -39,20 +37,14 @@ export const StyledCategoryFilterWrapper = styled.div`
|
||||
`}
|
||||
`;
|
||||
|
||||
const categoryLocale = getDefaultOformLocale();
|
||||
|
||||
const CategoryFilter = ({
|
||||
currentCategory,
|
||||
oformsFilter,
|
||||
filterOformsByCategory,
|
||||
|
||||
fetchCategoryList,
|
||||
fetchCategories,
|
||||
}) => {
|
||||
const [menuItems, setMenuItems] = useState([]);
|
||||
|
||||
const onViewAllTemplates = () => filterOformsByCategory("", "");
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
let newMenuItems = await fetchCategoryList();
|
||||
@ -81,16 +73,11 @@ const CategoryFilter = ({
|
||||
})
|
||||
.finally(() => setMenuItems(newMenuItems));
|
||||
})();
|
||||
}, [oformsFilter.locale]);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<StyledCategoryFilterWrapper className="categoryFilterWrapper">
|
||||
<CategoryFilterMobile
|
||||
className="mobileView"
|
||||
currentCategoryTitle={getOformCategoryTitle(currentCategory)}
|
||||
onViewAllTemplates={onViewAllTemplates}
|
||||
menuItems={menuItems}
|
||||
/>
|
||||
<CategoryFilterMobile className="mobileView" menuItems={menuItems} />
|
||||
<CategoryFilterDesktop className="desktopView" menuItems={menuItems} />
|
||||
</StyledCategoryFilterWrapper>
|
||||
);
|
||||
|
@ -30,12 +30,8 @@ const FormGallery = ({
|
||||
const [isInitLoading, setIsInitLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
!isInitLoading &&
|
||||
location.search !== `?${oformsFilter.toUrlParams()}`
|
||||
) {
|
||||
if (!isInitLoading && location.search !== `?${oformsFilter.toUrlParams()}`)
|
||||
navigate(`${location.pathname}?${oformsFilter.toUrlParams()}`);
|
||||
}
|
||||
}, [oformsFilter]);
|
||||
|
||||
useEffect(() => {
|
||||
|
@ -67,7 +67,6 @@ class OformsStore {
|
||||
filter.total = paginationData.total;
|
||||
}
|
||||
|
||||
console.log(oformData?.data?.data);
|
||||
runInAction(() => {
|
||||
this.setOformsFilter(filter);
|
||||
this.setOformFiles(oformData?.data?.data ?? []);
|
||||
@ -162,9 +161,7 @@ class OformsStore {
|
||||
this.oformsFilter.categoryId = categoryId;
|
||||
const newOformsFilter = this.oformsFilter.clone();
|
||||
|
||||
runInAction(() => {
|
||||
this.getOforms(newOformsFilter);
|
||||
});
|
||||
runInAction(() => this.getOforms(newOformsFilter));
|
||||
};
|
||||
|
||||
filterOformsByLocale = async (locale) => {
|
||||
|
Loading…
Reference in New Issue
Block a user