Skip to content
This repository has been archived by the owner on Dec 13, 2020. It is now read-only.

Commit

Permalink
Merge pull request #1423 from metasfresh/dev-1415
Browse files Browse the repository at this point in the history 
Move filter caption from frequent filter to all filters
  • Loading branch information
@teosarca
teosarca authored Dec 7, 2017
2 parents 84c2be4 + 2480649 commit 1b96c46
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 70 deletions.
80 changes: 63 additions & 17 deletions src/components/filters/Filters.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {push} from 'react-router-redux';
import counterpart from 'counterpart';

import { TableCell } from '../table/TableCell';

import FiltersFrequent from './FiltersFrequent';
import FiltersNotFrequent from './FiltersNotFrequent';

class Filters extends Component {
constructor(props) {
super(props);

this.state = {
filter: null,
notValidFields: null,
widgetShown: false
}
}
state = {
filter: null,
notValidFields: null,
widgetShown: false
};

componentWillReceiveProps(props) {
const {filtersActive} = props;
Expand Down Expand Up @@ -108,16 +106,51 @@ class Filters extends Component {
})
}

annotateFilters = unannotatedFilters => {
const { filter } = this.state;

return unannotatedFilters.map(unannotatedFilter => {
const parameter = unannotatedFilter.parameters[0];
const filterType = parameter.widgetType;
const isActive = this.isFilterActive(unannotatedFilter.filterId);
const activeParameter = (
isActive && filter[0] && filter[0].parameters[0]
);
const captionValue = activeParameter
? TableCell.fieldValueToString(
activeParameter.valueTo
? [
activeParameter.value,
activeParameter.valueTo
]
: activeParameter.value,
filterType
)
: '';

return {
...unannotatedFilter,
captionValue,
isActive
};
});
};

// PARSING FILTERS ---------------------------------------------------------

sortFilters = (data) => {
sortFilters = data => {
return {
frequentFilters: data.filter(filter => filter.frequent),
notFrequentFilters: data.filter(filter =>
!filter.frequent && !filter.static),
staticFilters: data.filter(filter => filter.static)
frequentFilters: this.annotateFilters(
data.filter(filter => filter.frequent)
),
notFrequentFilters: this.annotateFilters(
data.filter(filter => !filter.frequent && !filter.static)
),
staticFilters: this.annotateFilters(
data.filter(filter => filter.static)
)
}
}
};

isFilterValid = (filters) => {
if (filters.parameters) {
Expand All @@ -129,6 +162,19 @@ class Filters extends Component {
return true;
}

isFilterActive = filterId => {
const { filter } = this.state;

if (filter) {
const activeFilter = filter.find(
item => item.filterId === filterId
);
return typeof activeFilter !== 'undefined' && activeFilter;
}

return false;
};

parseToPatch = (params) => {
return params.map(param =>
Object.assign({}, param, {
Expand All @@ -142,7 +188,7 @@ class Filters extends Component {
render() {
const {filterData, windowType, viewId} = this.props;
const {
frequentFilters, notFrequentFilters, staticFilters
frequentFilters, notFrequentFilters
} = this.sortFilters(filterData);
const {notValidFields, widgetShown, filter} = this.state;

Expand Down
39 changes: 6 additions & 33 deletions src/components/filters/FiltersFrequent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,18 +28,6 @@ class FiltersFrequent extends Component {
dropdownToggled();
}

isActive(filterId) {
const { active } = this.props;
let result = false;

if (active) {
let activeFilter = active.find( (item) => item.filterId === filterId );
result = (typeof activeFilter !== 'undefined') && activeFilter;
}

return result;
}

render() {
const {
data, windowType, notValidFields, viewId, handleShow,
Expand All @@ -53,31 +41,16 @@ class FiltersFrequent extends Component {
{data.map((item, index) => {
const parameter = item.parameters[0];
const filterType = parameter.widgetType;
const isActive = this.isActive(item.filterId);
const dateStepper = (
// keep implied information (e.g. for refactoring)
item.frequent &&

item.parameters.length === 1 &&
parameter.showIncrementDecrementButtons &&
isActive &&
item.isActive &&
TableCell.DATE_FIELD_TYPES.includes(filterType) &&
!TableCell.TIME_FIELD_TYPES.includes(filterType)
);
const activeParameter = (
isActive && active[index].parameters[0]
);
const captionValue = isActive
? TableCell.fieldValueToString(
activeParameter.valueTo
? [
activeParameter.value,
activeParameter.valueTo
]
: activeParameter.value,
filterType
)
: '';

return (
<div className="filter-wrapper" key={index}>
Expand All @@ -93,13 +66,13 @@ class FiltersFrequent extends Component {
onClick={() => this.toggleFilter(index, item)}
className={cx(classes, {
['btn-select']: openFilterId === index,
['btn-active']: isActive,
['btn-active']: item.isActive,
['btn-distance']: !dateStepper
})}
>
<i className="meta-icon-preview" />
{isActive
? `${item.caption}: ${captionValue}`
{item.isActive
? `${item.caption}: ${item.captionValue}`
: `${counterpart.translate(
'window.filters.caption2'
)}: ${item.caption}`
Expand All @@ -117,15 +90,15 @@ class FiltersFrequent extends Component {

{openFilterId === index &&
<FiltersItem
captionValue={captionValue}
captionValue={item.captionValue}
key={index}
windowType={windowType}
data={item}
closeFilterMenu={() => this.toggleFilter()}
clearFilters={clearFilters}
applyFilters={applyFilters}
notValidFields={notValidFields}
isActive={isActive}
isActive={item.isActive}
active={active}
onShow={() => handleShow(true)}
onHide={() => handleShow(false)}
Expand Down
35 changes: 15 additions & 20 deletions src/components/filters/FiltersNotFrequent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,21 +54,7 @@ class FiltersNotFrequent extends Component {
const openFilter =
getItemsByProperty(data, 'filterId', openFilterId)[0];

let activeFilter, activeFilterModel;
let activeFilterCaption = openFilter && openFilter.caption;
if (active && data) {
activeFilter = active.find( (item) => {
return data.find( (dataItem) => {
if (dataItem.filterId === item.filterId) {
activeFilterModel = dataItem;
activeFilterCaption = dataItem.caption;
}

return (dataItem.filterId === item.filterId);
});
});
}
const isActive = !!activeFilter;
const activeFilter = data.filter(filter => filter.isActive)[0] || {};

return (
<div className="filter-wrapper">
Expand All @@ -78,16 +64,21 @@ class FiltersNotFrequent extends Component {
'btn btn-filter btn-meta-outline-secondary ' +
'btn-distance btn-sm' +
(isOpenDropdown ? ' btn-select': '') +
(isActive ? ' btn-active' : '')
(activeFilter.isActive ? ' btn-active' : '')
}
>
<i className="meta-icon-preview" />
{ activeFilter ? 'Filter: ' + activeFilterCaption : 'Filter'}
{activeFilter.isActive
? `${activeFilter.caption}: ${
activeFilter.captionValue
}`
: 'Filter'
}
</button>

{ isOpenDropdown &&
<div className="filters-overlay">
{ (!openFilterId && !isActive) ?
{ (!openFilterId && !activeFilter.isActive) ?
<ul className="filter-menu">
{data.map((item, index) =>
<li
Expand All @@ -102,8 +93,12 @@ class FiltersNotFrequent extends Component {
</ul>
:
<FiltersItem
captionValue={activeFilter.captionValue}
windowType={windowType}
data={activeFilterModel || openFilter}
data={activeFilter.isActive
? activeFilter
: openFilter
}
closeFilterMenu={() =>
this.toggleDropdown(false)
}
Expand All @@ -113,7 +108,7 @@ class FiltersNotFrequent extends Component {
clearFilters={clearFilters}
applyFilters={applyFilters}
notValidFields={notValidFields}
isActive={isActive}
isActive={activeFilter.isActive}
active={active}
onShow={() => handleShow(true)}
onHide={() => handleShow(false)}
Expand Down

0 comments on commit 1b96c46

Please sign in to comment.