Skip to content

Commit

Permalink
#1461 | Fix issues with CustomDashboard filter view, styling and clear
Browse files Browse the repository at this point in the history
  • Loading branch information
@himeshr
himeshr committed Jul 31, 2024
1 parent 0fe13f4 commit c50e770
Show file tree
Hide file tree
Showing 7 changed files with 87 additions and 77 deletions.
14 changes: 7 additions & 7 deletions packages/openchs-android/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 1 addition & 4 deletions packages/openchs-android/src/action/mydashboard/FiltersActionsV2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,6 @@ import DashboardFilterService from "../../service/reports/DashboardFilterService
import _ from "lodash";
import {ArrayUtil, Concept, CustomFilter, DashboardFilterConfig} from 'openchs-models';
import CustomDashboardCacheService from '../../service/CustomDashboardCacheService';

import General from "../../utility/General";
import FormMetaDataSelection from "../../model/FormMetaDataSelection";
import CustomDashboardService from "../../service/customDashboard/CustomDashboardService";

class FiltersActionsV2 {
Expand Down Expand Up @@ -93,7 +90,7 @@ class FiltersActionsV2 {
static clearFilter(state, action, context) {
const customDashboardCacheService = context.get(CustomDashboardCacheService);
customDashboardCacheService.reset(state.dashboardUUID);
return FiltersActionsV2.onLoad(this.getInitialState(), {dashboardUUID: state.dashboardUUID}, context);
return FiltersActionsV2.onLoad(FiltersActionsV2.getInitialState(), {dashboardUUID: state.dashboardUUID}, context);
}
}

Expand Down
2 changes: 1 addition & 1 deletion packages/openchs-android/src/service/CustomDashboardCacheService.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ class CustomDashboardCacheService extends BaseService {
}

reset(dashboardUUID) {
const cache = getDashboardCache(this, dashboardUUID);
const cache = this.findByFiltered("dashboard.uuid", dashboardUUID, CustomDashboardCache.schema.name);
this.delete(cache);
}

Expand Down
1 change: 0 additions & 1 deletion packages/openchs-android/src/views/LandingView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,6 @@ class LandingView extends AbstractComponent {
hideBackButton={true}/>}
{register && <RegisterView hideBackButton={true}/>}
{menu && <MenuView menuIcon={(name, style) => this.Icon(name, style)}/>}
{dashboard && <CustomDashboardView hideBackButton={true} onSearch={() => this.dispatchAction(Actions.ON_SEARCH_CLICK)} showSearch={true} customDashboardType={CustomDashboardType.None}/>}
{secondaryDashboardSelected && <CustomDashboardView
startSync={startSync && this.state.syncRequired}
icon={(name, style) => this.Icon(name, style)}
Expand Down
29 changes: 13 additions & 16 deletions packages/openchs-android/src/views/customDashboard/CustomDashboardView.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import AbstractComponent from "../../framework/view/AbstractComponent";
import CHSContainer from "../common/CHSContainer";
import AppHeader from "../common/AppHeader";
import React, {Fragment} from "react";
import React from "react";
import Reducers from "../../reducer";
import {
CustomDashboardActionNames as Actions,
Expand Down Expand Up @@ -68,21 +68,22 @@ function RefreshSection({I18n, onRefreshPressed, lastUpdatedOn}) {

function FilterSection({I18n, onFilterPressed}) {
const filterLabelStyle = {
color: Styles.grey,
color: Styles.accentColor,
fontSize: Styles.normalTextSize,
backgroundColor: Colors.FilterButtonColor,
fontWeight: 'bold',
textTransform: 'uppercase',
paddingRight: 5
borderRadius: 5,
padding: 5
};
return <TouchableNativeFeedback onPress={() => onFilterPressed()}>
<View style={{
flex: 0.25,
backgroundColor: Colors.SubHeaderBackground,
flex: 0.20,
flexDirection: 'row-reverse',
minHeight: 45,
alignItems: 'center'
alignItems: 'center',
marginLeft: 15
}}>
<MCIIcon style={{fontSize: 30, color: Colors.DullIconColor, paddingRight: 15}} name='tune'/>
<Text style={filterLabelStyle}>{I18n.t('filter')}</Text>
</View>
</TouchableNativeFeedback>;
Expand Down Expand Up @@ -308,15 +309,11 @@ class CustomDashboardView extends AbstractComponent {
{this.state.filtersPresent && <FilterSection I18n={this.I18n} onFilterPressed={() => this.onFilterPressed()}/>}
</View>
<CustomActivityIndicator loading={loading}/>

{hasFilters && <View style={{display: "flex", padding: 10}}>
<SafeAreaView>
<AppliedFiltersV2 dashboardUUID={this.state.activeDashboardUUID}
postClearAction={() => this.onClearFilters()}
dashboard={dashboard}
selectedFilterValues={this.state.customDashboardFilters}/>
</SafeAreaView>
</View>}
<AppliedFiltersV2 dashboardUUID={this.state.activeDashboardUUID}
postClearAction={() => this.onClearFilters()}
dashboard={dashboard}
hasFilters={hasFilters}
selectedFilterValues={this.state.customDashboardFilters}/>
{this.renderCards()}
</ScrollView>
</CHSContainer>
Expand Down
111 changes: 64 additions & 47 deletions packages/openchs-android/src/views/filter/AppliedFiltersV2.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {StyleSheet, Text, TouchableOpacity, View} from "react-native";
import {SafeAreaView, StyleSheet, Text, TouchableOpacity, View} from "react-native";
import React, {Fragment} from 'react';
import AbstractComponent from "../../framework/view/AbstractComponent";
import General from "../../utility/General";
Expand All @@ -8,6 +8,7 @@ import {FilterActionNames} from '../../action/mydashboard/FiltersActionsV2';
import _ from 'lodash';
import Styles from "../primitives/Styles";
import DashboardFilterService from "../../service/reports/DashboardFilterService";
import Colors from '../primitives/Colors';

function FilterDisplay({filter, content, contentSeparator}) {
const separator = _.isNil(contentSeparator) ? '' : contentSeparator;
Expand All @@ -34,7 +35,7 @@ export default class AppliedFiltersV2 extends AbstractComponent {
zIndex: 1,
paddingTop: 2,
fontSize: 24,
color: Styles.greyText,
color: Styles.accentColor,
alignSelf: 'flex-end'
},
});
Expand All @@ -50,53 +51,69 @@ export default class AppliedFiltersV2 extends AbstractComponent {
}

render() {
const {dashboard, selectedFilterValues} = this.props;
const {hasFilters, dashboard, selectedFilterValues} = this.props;
const filterConfigs = this.getService(DashboardFilterService).getFilterConfigsForDashboard(dashboard.uuid);
const showFilters = selectedFilterValues && Object.values(selectedFilterValues).length > 0
&& Object.values(selectedFilterValues).some(sfv => !_.isNil(sfv) && !_.isEmpty(sfv));
return hasFilters && showFilters && (<View style={{
display: "flex",
padding: 10,
backgroundColor: Colors.GreyBackground,
borderRadius: 5,
marginHorizontal: 15

return (
<Fragment>
{this.props.applied && <View>
<TouchableOpacity onPress={() => this.onClearFilter(this.props.postClearAction)}>
<View>
<AvniIcon name={'filter-remove-outline'}
style={AppliedFiltersV2.styles.filterIcon}
type='MaterialCommunityIcons'/>
</View>
</TouchableOpacity>
</View>}
<View style={AppliedFiltersV2.styles.container}>
{
Object.keys(selectedFilterValues).map((filterUUID) => {
const filter = dashboard.getFilter(filterUUID);
const inputDataType = filterConfigs[filterUUID].getInputDataType();
const selectedFilterValue = selectedFilterValues[filterUUID];
switch (inputDataType) {
case Concept.dataType.Coded:
case DashboardFilterConfig.dataTypes.array:
return !_.isEmpty(selectedFilterValue) &&
<FilterDisplay filter={filter} content={selectedFilterValue.map((x) => x.name).join(", ")}/>;
case Concept.dataType.Date:
return !_.isNil(selectedFilterValue) && <FilterDisplay filter={filter} content={General.toDisplayDate(selectedFilterValue)}/>
case Concept.dataType.DateTime:
return !_.isNil(selectedFilterValue) && <FilterDisplay filter={filter} content={General.formatDateTime(selectedFilterValue)}/>
case Concept.dataType.Time:
return !_.isNil(selectedFilterValue) && <FilterDisplay filter={filter} content={General.toDisplayTime(selectedFilterValue)}/>
case Range.DateRange:
return !_.isNil(selectedFilterValue) && !selectedFilterValue.isEmpty() && <FilterDisplay filter={filter}
content={`${General.toDisplayDate(selectedFilterValue.minValue)} - ${General.toDisplayDate(selectedFilterValue.maxValue)}`}/>
case DashboardFilterConfig.dataTypes.formMetaData:
let displayValue = selectedFilterValue.subjectTypes.map(x => x.name).join(", ");
displayValue += selectedFilterValue.programs.length === 0 ? "" : " | ";
displayValue += selectedFilterValue.programs.map(x => x.name).join(", ");
displayValue += selectedFilterValue.encounterTypes.length === 0 ? "" : " | ";
displayValue += selectedFilterValue.encounterTypes.map(x => x.name).join(", ");
return !_.isEmpty(displayValue) && <FilterDisplay filter={filter} content={displayValue}/>;
default:
return !_.isNil(selectedFilterValue) && <FilterDisplay filter={filter} content={selectedFilterValue}/>;
}
})}
</View>
</Fragment>
}}>
<SafeAreaView >
<View>
<TouchableOpacity style={{flex: 1, alignSelf: 'flex-end'}} onPress={() => this.onClearFilter(this.props.postClearAction)}>
<View>
<AvniIcon name={'filter-remove-outline'}
style={AppliedFiltersV2.styles.filterIcon}
type='MaterialCommunityIcons'/>
</View>
</TouchableOpacity>
</View>
<View style={AppliedFiltersV2.styles.container}>
{
Object.keys(selectedFilterValues).map((filterUUID) => {
const filter = dashboard.getFilter(filterUUID);
const inputDataType = filterConfigs[filterUUID].getInputDataType();
const selectedFilterValue = selectedFilterValues[filterUUID];
switch (inputDataType) {
case Concept.dataType.Coded:
case DashboardFilterConfig.dataTypes.array:
return !_.isEmpty(selectedFilterValue) &&
<FilterDisplay filter={filter}
content={selectedFilterValue.map((x) => x.name).join(", ")}/>;
case Concept.dataType.Date:
return !_.isNil(selectedFilterValue) && <FilterDisplay filter={filter}
content={General.toDisplayDate(selectedFilterValue)}/>
case Concept.dataType.DateTime:
return !_.isNil(selectedFilterValue) && <FilterDisplay filter={filter}
content={General.formatDateTime(selectedFilterValue)}/>
case Concept.dataType.Time:
return !_.isNil(selectedFilterValue) && <FilterDisplay filter={filter}
content={General.toDisplayTime(selectedFilterValue)}/>
case Range.DateRange:
return !_.isNil(selectedFilterValue) && !selectedFilterValue.isEmpty() &&
<FilterDisplay filter={filter}
content={`${General.toDisplayDate(selectedFilterValue.minValue)} - ${General.toDisplayDate(selectedFilterValue.maxValue)}`}/>
case DashboardFilterConfig.dataTypes.formMetaData:
let displayValue = selectedFilterValue.subjectTypes.map(x => x.name).join(", ");
displayValue += selectedFilterValue.programs.length === 0 ? "" : " | ";
displayValue += selectedFilterValue.programs.map(x => x.name).join(", ");
displayValue += selectedFilterValue.encounterTypes.length === 0 ? "" : " | ";
displayValue += selectedFilterValue.encounterTypes.map(x => x.name).join(", ");
return !_.isEmpty(displayValue) &&
<FilterDisplay filter={filter} content={displayValue}/>;
default:
return !_.isNil(selectedFilterValue) &&
<FilterDisplay filter={filter} content={selectedFilterValue}/>;
}
})}
</View>
</SafeAreaView>
</View>
);
}
}
2 changes: 1 addition & 1 deletion packages/openchs-android/src/views/primitives/Colors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ class Colors {
static ChecklistItemExpired = 'red';

static FilterBar = '#114486';
static FilterClear = '#B9F6D6';
static FilterButtonColor = '#EBF4F3';

static getCode(colorName) {
return color[colorName];
Expand Down

0 comments on commit c50e770

Please sign in to comment.