From c50e770745e4c344be2699fcc57113e6d7781183 Mon Sep 17 00:00:00 2001 From: himeshr Date: Wed, 31 Jul 2024 18:43:54 +0530 Subject: [PATCH] #1461 | Fix issues with CustomDashboard filter view, styling and clear --- packages/openchs-android/package-lock.json | 14 +-- .../action/mydashboard/FiltersActionsV2.js | 5 +- .../service/CustomDashboardCacheService.js | 2 +- .../openchs-android/src/views/LandingView.js | 1 - .../customDashboard/CustomDashboardView.js | 29 ++--- .../src/views/filter/AppliedFiltersV2.js | 111 ++++++++++-------- .../src/views/primitives/Colors.js | 2 +- 7 files changed, 87 insertions(+), 77 deletions(-) diff --git a/packages/openchs-android/package-lock.json b/packages/openchs-android/package-lock.json index e161cb834..64a4eec65 100644 --- a/packages/openchs-android/package-lock.json +++ b/packages/openchs-android/package-lock.json @@ -36,7 +36,7 @@ "lodash": "4.17.21", "moment": "2.29.4", "native-base": "3.4.9", - "openchs-models": "1.31.96", + "openchs-models": "1.31.98", "prop-types": "15.8.1", "react": "18.2.0", "react-native": "0.72.3", @@ -16453,9 +16453,9 @@ } }, "node_modules/openchs-models": { - "version": "1.31.96", - "resolved": "https://registry.npmjs.org/openchs-models/-/openchs-models-1.31.96.tgz", - "integrity": "sha512-dyRsF34RP2ag4V8ILS5TvJi9g2BIRoDRXRuUM3lvu1g7YHIXI+XfjZaTFSKBuyd+orbSSFjY4UxjzI4r2wnAGA==", + "version": "1.31.98", + "resolved": "https://registry.npmjs.org/openchs-models/-/openchs-models-1.31.98.tgz", + "integrity": "sha512-kHDzwwRPA4l/eF3e1cL2omox44JSHmpg45q/eNSNsr+ZZAqql3M0MgoSOKTo72Y4c4Gevx0fIScnWFWIc8hZZg==", "dependencies": { "uuid": "^9.0.1" }, @@ -35199,9 +35199,9 @@ } }, "openchs-models": { - "version": "1.31.96", - "resolved": "https://registry.npmjs.org/openchs-models/-/openchs-models-1.31.96.tgz", - "integrity": "sha512-dyRsF34RP2ag4V8ILS5TvJi9g2BIRoDRXRuUM3lvu1g7YHIXI+XfjZaTFSKBuyd+orbSSFjY4UxjzI4r2wnAGA==", + "version": "1.31.98", + "resolved": "https://registry.npmjs.org/openchs-models/-/openchs-models-1.31.98.tgz", + "integrity": "sha512-kHDzwwRPA4l/eF3e1cL2omox44JSHmpg45q/eNSNsr+ZZAqql3M0MgoSOKTo72Y4c4Gevx0fIScnWFWIc8hZZg==", "requires": { "uuid": "^9.0.1" } diff --git a/packages/openchs-android/src/action/mydashboard/FiltersActionsV2.js b/packages/openchs-android/src/action/mydashboard/FiltersActionsV2.js index 36009f253..4b22e10f0 100644 --- a/packages/openchs-android/src/action/mydashboard/FiltersActionsV2.js +++ b/packages/openchs-android/src/action/mydashboard/FiltersActionsV2.js @@ -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 { @@ -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); } } diff --git a/packages/openchs-android/src/service/CustomDashboardCacheService.js b/packages/openchs-android/src/service/CustomDashboardCacheService.js index a34bd212a..4128a5424 100644 --- a/packages/openchs-android/src/service/CustomDashboardCacheService.js +++ b/packages/openchs-android/src/service/CustomDashboardCacheService.js @@ -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); } diff --git a/packages/openchs-android/src/views/LandingView.js b/packages/openchs-android/src/views/LandingView.js index 21a91f688..da182c63c 100644 --- a/packages/openchs-android/src/views/LandingView.js +++ b/packages/openchs-android/src/views/LandingView.js @@ -151,7 +151,6 @@ class LandingView extends AbstractComponent { hideBackButton={true}/>} {register && } {menu && this.Icon(name, style)}/>} - {dashboard && this.dispatchAction(Actions.ON_SEARCH_CLICK)} showSearch={true} customDashboardType={CustomDashboardType.None}/>} {secondaryDashboardSelected && this.Icon(name, style)} diff --git a/packages/openchs-android/src/views/customDashboard/CustomDashboardView.js b/packages/openchs-android/src/views/customDashboard/CustomDashboardView.js index edc4156a4..c4cc91569 100644 --- a/packages/openchs-android/src/views/customDashboard/CustomDashboardView.js +++ b/packages/openchs-android/src/views/customDashboard/CustomDashboardView.js @@ -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, @@ -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 onFilterPressed()}> - {I18n.t('filter')} ; @@ -308,15 +309,11 @@ class CustomDashboardView extends AbstractComponent { {this.state.filtersPresent && this.onFilterPressed()}/>} - - {hasFilters && - - this.onClearFilters()} - dashboard={dashboard} - selectedFilterValues={this.state.customDashboardFilters}/> - - } + this.onClearFilters()} + dashboard={dashboard} + hasFilters={hasFilters} + selectedFilterValues={this.state.customDashboardFilters}/> {this.renderCards()} diff --git a/packages/openchs-android/src/views/filter/AppliedFiltersV2.js b/packages/openchs-android/src/views/filter/AppliedFiltersV2.js index cea34d9cd..22a0b866b 100644 --- a/packages/openchs-android/src/views/filter/AppliedFiltersV2.js +++ b/packages/openchs-android/src/views/filter/AppliedFiltersV2.js @@ -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"; @@ -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; @@ -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' }, }); @@ -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 && ( - {this.props.applied && - this.onClearFilter(this.props.postClearAction)}> - - - - - } - - { - 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) && - x.name).join(", ")}/>; - case Concept.dataType.Date: - return !_.isNil(selectedFilterValue) && - case Concept.dataType.DateTime: - return !_.isNil(selectedFilterValue) && - case Concept.dataType.Time: - return !_.isNil(selectedFilterValue) && - case Range.DateRange: - return !_.isNil(selectedFilterValue) && !selectedFilterValue.isEmpty() && - 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) && ; - default: - return !_.isNil(selectedFilterValue) && ; - } - })} - - + }}> + + + this.onClearFilter(this.props.postClearAction)}> + + + + + + + { + 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) && + x.name).join(", ")}/>; + case Concept.dataType.Date: + return !_.isNil(selectedFilterValue) && + case Concept.dataType.DateTime: + return !_.isNil(selectedFilterValue) && + case Concept.dataType.Time: + return !_.isNil(selectedFilterValue) && + case Range.DateRange: + return !_.isNil(selectedFilterValue) && !selectedFilterValue.isEmpty() && + + 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) && + ; + default: + return !_.isNil(selectedFilterValue) && + ; + } + })} + + + ); } } diff --git a/packages/openchs-android/src/views/primitives/Colors.js b/packages/openchs-android/src/views/primitives/Colors.js index 93c04bf26..99a0a32b2 100644 --- a/packages/openchs-android/src/views/primitives/Colors.js +++ b/packages/openchs-android/src/views/primitives/Colors.js @@ -34,7 +34,7 @@ class Colors { static ChecklistItemExpired = 'red'; static FilterBar = '#114486'; - static FilterClear = '#B9F6D6'; + static FilterButtonColor = '#EBF4F3'; static getCode(colorName) { return color[colorName];