IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed Bug 57845 - Client.Filter. Remove the need to confirm filter cleaning

Browse Source
This commit is contained in:
TimofeyBoyko 2022-07-01 07:12:02 +03:00
parent 5bfb1512f6
commit 4d383cac9d
2 changed files with 96 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
packages/asc-web-common/components/FilterInput/sub-components/FilterBlock.js
View File

@ -20,7 +20,6 @@ import {
import { withTranslation } from "react-i18next";
import Scrollbar from "@appserver/components/scrollbar";
//TODO: fix translate
const FilterBlock = ({
t,
selectedFilterData,
@ -38,6 +37,7 @@ const FilterBlock = ({
const [filterData, setFilterData] = React.useState([]);
const [filterValues, setFilterValues] = React.useState([]);
const [clearFilter, setClearFilter] = React.useState(false);
const changeShowSelector = (isAuthor, group) => {
setShowSelector((val) => {
@ -83,9 +83,11 @@ const FilterBlock = ({
setFilterData(items);
};
const clearFilter = () => {
const onClearFilter = () => {
changeSelectedItems([]);
setFilterValues([]);
setClearFilter(true);
selectedFilterData.filterValues.length > 0 && onFilter && onFilter([]);
};
const changeFilterValue = (group, key, isSelected, label) => {
@ -96,6 +98,16 @@ const FilterBlock = ({
setFilterValues(value);
changeSelectedItems(value);
const idx = selectedFilterData.filterValues.findIndex(
(item) => item.group === group
);
if (idx > -1) {
setClearFilter(true);
onFilter(value);
}
return;
}
@ -121,41 +133,47 @@ const FilterBlock = ({
};
React.useEffect(() => {
const data = getFilterData();
if (!clearFilter) {
const data = getFilterData();
const items = data.filter((item) => item.isHeader === true);
const items = data.filter((item) => item.isHeader === true);
items.forEach((item) => {
const groupItem = data.filter(
(val) => val.group === item.group && val.isHeader !== true
);
items.forEach((item) => {
const groupItem = data.filter(
(val) => val.group === item.group && val.isHeader !== true
);
groupItem.forEach((item) => (item.isSelected = false));
groupItem.forEach((item) => (item.isSelected = false));
item.groupItem = groupItem;
});
if (selectedFilterData.filterValues) {
selectedFilterData.filterValues.forEach((value) => {
items.forEach((item) => {
if (item.group === value.group) {
item.groupItem.forEach((groupItem) => {
if (groupItem.key === value.key || groupItem.isSelector) {
groupItem.isSelected = true;
if (groupItem.isSelector) {
groupItem.selectedLabel = value.label;
groupItem.selectedKey = value.key;
}
}
});
}
});
item.groupItem = groupItem;
});
}
setFilterData(items);
setFilterValues(selectedFilterData.filterValues);
}, [selectedFilterData, getFilterData]);
if (selectedFilterData.filterValues) {
selectedFilterData.filterValues.forEach((value) => {
items.forEach((item) => {
if (item.group === value.group) {
item.groupItem.forEach((groupItem) => {
if (groupItem.key === value.key || groupItem.isSelector) {
groupItem.isSelected = true;
if (groupItem.isSelector) {
groupItem.selectedLabel = value.label;
groupItem.selectedKey = value.key;
}
}
});
}
});
});
}
const newFilterValues = selectedFilterData.filterValues.map((value) => ({
...value,
}));
setFilterData(items);
setFilterValues(newFilterValues);
}
}, [selectedFilterData, getFilterData, clearFilter]);
const onFilterAction = () => {
onFilter && onFilter(filterValues);
@ -175,6 +193,39 @@ const FilterBlock = ({
changeFilterValue(showSelector.group, items[0].key, false, items[0].label);
};
const isEqualFilter = () => {
const selectedFilterValues = selectedFilterData.filterValues;
let isEqual = true;
if (
filterValues.length === 0 ||
selectedFilterValues.length > filterValues.length
)
return !isEqual;
if (
(selectedFilterValues.length === 0 && filterValues.length > 0) ||
selectedFilterValues.length !== filterValues.length
) {
isEqual = false;
return !isEqual;
}
filterValues.forEach((value) => {
const oldValue = selectedFilterValues.find(
(item) => item.group === value.group
);
isEqual = isEqual && oldValue?.key === value.key;
});
return !isEqual;
};
const showFooter = isEqualFilter();
return (
<>
{showSelector.show ? (
@ -208,13 +259,13 @@ const FilterBlock = ({
</StyledFilterBlock>
</>
) : (
<StyledFilterBlock>
<StyledFilterBlock showFooter={showFooter}>
<StyledFilterBlockHeader>
<Heading size="medium">{contextMenuHeader}</Heading>
<IconButton
iconName="/static/images/clear.react.svg"
isFill={true}
onClick={clearFilter}
onClick={onClearFilter}
size={17}
/>
</StyledFilterBlockHeader>
@ -237,15 +288,17 @@ const FilterBlock = ({
})}
</Scrollbar>
</div>
<StyledFilterBlockFooter>
<Button
size="normal"
primary={true}
label={t("AddFilter")}
scale={true}
onClick={onFilterAction}
/>
</StyledFilterBlockFooter>
{showFooter && (
<StyledFilterBlockFooter>
<Button
size="normal"
primary={true}
label={t("AddFilter")}
scale={true}
onClick={onFilterAction}
/>
</StyledFilterBlockFooter>
)}
<StyledControlContainer onClick={hideFilterBlock}>
<StyledCrossIcon />

2
packages/asc-web-common/components/FilterInput/sub-components/StyledFilterBlock.js
View File

@ -50,7 +50,7 @@ const StyledFilterBlock = styled.div`
}
.filter-body {
height: calc(100% - 125px);
height: ${(props) => (props.showFooter ? "calc(100% - 125px)" : "100%")};
}
`;