@opengeoweb/layer-select 10.1.0 → 10.2.0

package/index.esm.js

@@ -7,7 +7,7 @@ import { Filter, LayersAdd, Add, Cached, Edit, Visibility, Delete, Close, Copy }
 import { uiTypes, serviceActions, selectorMemoizationOptions, serviceSelectors, uiActions, getUserAddedServices, setUserAddedServices, layerActions, uiSelectors, layerSelectors, useSetupDialog, mapSelectors, layerTypes } from '@opengeoweb/store';
 import { createEntityAdapter, createSlice, createSelector, createListenerMiddleware, isAnyOf } from '@reduxjs/toolkit';
 import { compact, countBy, partition } from 'lodash';
-import { Switch, Grid2, List, Box, Typography, Backdrop, CircularProgress, Button, ListItem, ListItemText, Dialog, DialogTitle, LinearProgress, DialogContent, InputAdornment, DialogActions } from '@mui/material';
+import { Switch, Grid2, List, Box, Typography, useTheme, Backdrop, CircularProgress, Button, ListItem, ListItemText, Dialog, DialogTitle, LinearProgress, DialogContent, InputAdornment, DialogActions } from '@mui/material';
 import 'i18next';
 import { useTranslation } from 'react-i18next';
 import { FixedSizeList } from 'react-window';
@@ -622,7 +622,7 @@ var getFilteredLayers = createSelector([getEnabledServiceIds, serviceSelectors.g
 /**
  * Returns service popup details
  *
- * Example getActiveServices(store, 'server-id');
+ * Example getServicePopupDetails(store, 'server-id');
  * @param {object} store store: object - store object
  * @returns {object} returnType: object of active service
  */
@@ -630,6 +630,27 @@ var getServicePopupDetails = function getServicePopupDetails(store) {
   var _store$layerSelect3;
   return (store == null || (_store$layerSelect3 = store.layerSelect) == null ? void 0 : _store$layerSelect3.servicePopup) || initialServicePopupState;
 };
+/**
+ * Returns service with active filtered layers from seaerch
+ *
+ * Example getFilteredActiveServices(store);
+ * @param {object} store store: object - store object
+ * @returns {object} returnType: object of active service
+ */
+var getFilteredActiveServices = createSelector([getFilteredLayers, getActiveServices, getSearchFilter], function (layers, activeServices, searchResult) {
+  var servicesResult = searchResult.length ? layers.reduce(function (layers, _ref) {
+    var serviceName = _ref.serviceName;
+    return layers.includes(serviceName) ? layers : layers.concat(serviceName);
+  }, []) : [];
+  var updatedServices = Object.fromEntries(Object.entries(activeServices).map(function (_ref2) {
+    var key = _ref2[0],
+      service = _ref2[1];
+    return [key, Object.assign({}, service, {
+      isInSearch: servicesResult.includes(service.serviceId)
+    })];
+  }));
+  return updatedServices;
+}, selectorMemoizationOptions);
 
 var selectors = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -643,6 +664,7 @@ var selectors = /*#__PURE__*/Object.freeze({
   getCheckedFilterIds: getCheckedFilterIds,
   getEnabledServiceIds: getEnabledServiceIds,
   getFilterById: getFilterById,
+  getFilteredActiveServices: getFilteredActiveServices,
   getFilteredLayers: getFilteredLayers,
   getFilters: getFilters,
   getSearchFilter: getSearchFilter,
@@ -1936,9 +1958,12 @@ var ServiceChip = function ServiceChip(_ref) {
     service = _ref.service,
     isSelected = _ref.isSelected,
     isDisabled = _ref.isDisabled,
-    toggleChip = _ref.toggleChip;
+    toggleChip = _ref.toggleChip,
+    isInSearch = _ref.isInSearch;
   var _useLayerSelectTransl = useLayerSelectTranslation(),
     t = _useLayerSelectTransl.t;
+  var _useTheme = useTheme(),
+    geowebColors = _useTheme.palette.geowebColors;
   var chip = all ? 'all' : service && service.serviceUrl;
   return jsx(CustomTooltip, {
     title: service != null && service["abstract"] ? "Abstract: " + service["abstract"] : '',
@@ -1955,7 +1980,17 @@ var ServiceChip = function ServiceChip(_ref) {
           return toggleChip(chip);
         },
         disabled: isDisabled,
-        sx: style$1,
+        sx: Object.assign({}, style$1, isInSearch && Object.assign({
+          backgroundColor: geowebColors.chip.highlightDefault.rgba + "!important",
+          '&:hover': {
+            backgroundColor: geowebColors.chip.highlightDefaultMouseOver.rgba + "!important"
+          }
+        }, isSelected && {
+          backgroundColor: geowebColors.chip.highlightActiveDefault.rgba + "!important",
+          '&:hover': {
+            backgroundColor: geowebColors.chip.highlightActiveMouseOver.rgba + "!important"
+          }
+        })),
         children: service ? service.serviceName : t('all')
       })
     })
@@ -1967,6 +2002,7 @@ var ServiceChipConnect = function ServiceChipConnect(_ref) {
     isAllSelected = _ref.isAllSelected;
   var dispatch = useDispatch();
   var serviceId = service.serviceId;
+  var isInSearch = service.isInSearch || false;
   var toggleChip = function toggleChip() {
     if (service.enabled) {
       if (isAllSelected) {
@@ -1988,7 +2024,8 @@ var ServiceChipConnect = function ServiceChipConnect(_ref) {
     service: service,
     toggleChip: toggleChip,
     isSelected: isAllSelected ? false : service.enabled,
-    isDisabled: service.isLoading
+    isDisabled: service.isLoading,
+    isInSearch: isInSearch
   });
 };
 var AllChipConnect = function AllChipConnect(_ref2) {
@@ -2058,12 +2095,12 @@ var ServiceList = function ServiceList(_ref) {
 
 var ServiceListConnect = function ServiceListConnect(_ref) {
   var setHeight = _ref.setHeight;
-  var activeServices = useAppSelector(function (store) {
-    return getActiveServices(store);
+  var filteredActiveServices = useAppSelector(function (store) {
+    return getFilteredActiveServices(store);
   });
   return jsx(ServiceList, {
     setHeight: setHeight,
-    activeServicesById: sortByService(activeServices)
+    activeServicesById: sortByService(filteredActiveServices)
   });
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/layer-select",
-  "version": "10.1.0",
+  "version": "10.2.0",
   "description": "GeoWeb layer select library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {

package/src/lib/components/ServiceList/ServiceChip.d.ts

@@ -6,6 +6,7 @@ interface ServiceChipProps {
     isSelected?: boolean;
     isDisabled?: boolean;
     toggleChip?: (service: string) => void;
+    isInSearch?: boolean;
 }
 export declare const ServiceChip: React.FC<ServiceChipProps>;
 export {};

package/src/lib/store/selectors.d.ts

@@ -90,8 +90,48 @@ export declare const getFilteredLayers: ((state: LayerSelectModuleState & import
 /**
  * Returns service popup details
  *
- * Example getActiveServices(store, 'server-id');
+ * Example getServicePopupDetails(store, 'server-id');
  * @param {object} store store: object - store object
  * @returns {object} returnType: object of active service
  */
 export declare const getServicePopupDetails: (store: LayerSelectModuleState) => ServicePopupObject;
+/**
+ * Returns service with active filtered layers from seaerch
+ *
+ * Example getFilteredActiveServices(store);
+ * @param {object} store store: object - store object
+ * @returns {object} returnType: object of active service
+ */
+export declare const getFilteredActiveServices: ((state: LayerSelectModuleState & import("@opengeoweb/store").CoreAppStore) => {
+    [k: string]: {
+        isInSearch: boolean;
+        serviceId?: string | undefined;
+        serviceName?: string | undefined;
+        serviceUrl?: string | undefined;
+        abstract?: string | undefined;
+        enabled?: boolean | undefined;
+        filterIds?: string[] | undefined;
+        scope?: import("dist/libs/store/src/store/map/types").ServiceScope | undefined;
+        isLoading?: boolean | undefined;
+        keywords?: string[] | undefined;
+        groups?: string[] | undefined;
+    };
+}) & import("reselect").OutputSelectorFields<(args_0: LayerWithServiceName[], args_1: ActiveServiceObjectEntities, args_2: string) => {
+    [k: string]: {
+        isInSearch: boolean;
+        serviceId?: string | undefined;
+        serviceName?: string | undefined;
+        serviceUrl?: string | undefined;
+        abstract?: string | undefined;
+        enabled?: boolean | undefined;
+        filterIds?: string[] | undefined;
+        scope?: import("dist/libs/store/src/store/map/types").ServiceScope | undefined;
+        isLoading?: boolean | undefined;
+        keywords?: string[] | undefined;
+        groups?: string[] | undefined;
+    };
+}, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};

package/src/lib/store/types.d.ts

@@ -15,6 +15,7 @@ export interface ActiveServiceObject {
     isLoading?: boolean;
     keywords?: string[];
     groups?: string[];
+    isInSearch?: boolean;
 }
 export type FilterType = 'keywords' | 'groups';
 export interface Filter {