@opengeoweb/layer-select 10.0.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)
   });
 };
 
@@ -2448,8 +2485,11 @@ var ServiceOptionsDialogConnect = function ServiceOptionsDialogConnect(_ref) {
       isUpdating: true
     })));
   }, [dispatch]);
-  var setServicePopupInfo = React.useCallback(function (payload) {
-    dispatch(layerSelectActions.toggleServicePopup(Object.assign({}, payload)));
+  var setServicePopupInfo = React.useCallback(function (popupInfo) {
+    var payload = Object.assign({}, popupInfo, {
+      variant: popupInfo.variant || 'default'
+    });
+    dispatch(layerSelectActions.toggleServicePopup(payload));
   }, [dispatch]);
   var showSnackbar = React.useCallback(function (message) {
     dispatch(snackbarActions.openSnackbar(message));
@@ -2685,28 +2725,20 @@ var getTitleForVariant = function getTitleForVariant(t, variant) {
       return 'Service';
   }
 };
-var fields = {
-  serviceUrl: {
-    name: 'serviceUrl',
-    label: 'This service refers to this URL'
-  },
-  serviceName: {
-    name: 'serviceName',
-    label: 'Service name'
-  },
-  serviceAbstracts: {
-    name: 'serviceAbstracts',
-    label: 'Abstracts'
-  }
-};
+var FormFields;
+(function (FormFields) {
+  FormFields["serviceUrl"] = "serviceUrl";
+  FormFields["serviceName"] = "serviceName";
+  FormFields["serviceAbstracts"] = "serviceAbstracts";
+})(FormFields || (FormFields = {}));
 var InitialValidationsTrigger = function InitialValidationsTrigger(_ref) {
   var trigger = _ref.trigger,
     getValues = _ref.getValues,
     onValidField = _ref.onValidField;
   React.useEffect(function () {
-    var value = getValues(fields.serviceUrl.name);
+    var value = getValues(FormFields.serviceUrl);
     if (value) {
-      void trigger(fields.serviceUrl.name).then(function (isValid) {
+      void trigger(FormFields.serviceUrl).then(function (isValid) {
         return isValid && onValidField(value);
       });
     }
@@ -2756,8 +2788,8 @@ var ServicePopupUnwrapped = function ServicePopupUnwrapped(_ref2) {
             return loadWMSService(newServiceUrl, true);
           case 4:
             service = _context.sent;
-            setValue(fields.serviceName.name, service.name);
-            setValue(fields.serviceAbstracts.name, service["abstract"]);
+            setValue(FormFields.serviceName, service.name);
+            setValue(FormFields.serviceAbstracts, service["abstract"] || '');
             setIsLoading(false);
             setShouldForceReload(false);
             _context.next = 16;
@@ -2767,7 +2799,7 @@ var ServicePopupUnwrapped = function ServicePopupUnwrapped(_ref2) {
             _context.t0 = _context["catch"](0);
             setIsLoading(false);
             setShouldForceReload(true);
-            setError(fields.serviceUrl.name, {
+            setError(FormFields.serviceUrl, {
               message: t('validations-request-failed'),
               type: 'SYSTEM'
             });
@@ -2787,7 +2819,7 @@ var ServicePopupUnwrapped = function ServicePopupUnwrapped(_ref2) {
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            clearErrors(fields.serviceUrl.name);
+            clearErrors(FormFields.serviceUrl);
             setIsLoading(true);
             _context2.prev = 2;
             _context2.next = 5;
@@ -2811,7 +2843,7 @@ var ServicePopupUnwrapped = function ServicePopupUnwrapped(_ref2) {
             _context2.prev = 12;
             _context2.t0 = _context2["catch"](2);
             setIsLoading(false);
-            setError(fields.serviceUrl.name, {
+            setError(FormFields.serviceUrl, {
               message: t('validations-request-failed'),
               type: 'SYSTEM'
             });
@@ -2829,16 +2861,16 @@ var ServicePopupUnwrapped = function ServicePopupUnwrapped(_ref2) {
     return validateServiceUrl(t, value, services);
   };
   var onFocusServiceUrl = function onFocusServiceUrl() {
-    var hasValue = getValues(fields.serviceUrl.name);
-    if (!errors[fields.serviceUrl.name] && hasValue) {
-      void trigger(fields.serviceUrl.name);
+    var hasValue = getValues(FormFields.serviceUrl);
+    if (!errors[FormFields.serviceUrl] && hasValue) {
+      void trigger(FormFields.serviceUrl);
     }
   };
   var onBlurServiceUrl = function onBlurServiceUrl() {
-    void trigger(fields.serviceUrl.name).then(function () {
-      var hasValue = getValues(fields.serviceUrl.name);
-      if (!errors[fields.serviceUrl.name] && hasValue) {
-        void fetchServiceData(getValues(fields.serviceUrl.name));
+    void trigger(FormFields.serviceUrl).then(function () {
+      var hasValue = getValues(FormFields.serviceUrl);
+      if (!errors[FormFields.serviceUrl] && hasValue) {
+        void fetchServiceData(getValues(FormFields.serviceUrl));
       }
     });
   };
@@ -2851,8 +2883,8 @@ var ServicePopupUnwrapped = function ServicePopupUnwrapped(_ref2) {
     return validateServiceName(t, value, services, serviceName);
   };
   var getFormAreRequiredFieldsEmpty = function getFormAreRequiredFieldsEmpty() {
-    var serviceNameField = watch(fields.serviceName.name);
-    var serviceUrlField = watch(fields.serviceUrl.name);
+    var serviceNameField = watch(FormFields.serviceName);
+    var serviceUrlField = watch(FormFields.serviceUrl);
     return serviceNameField === '' || serviceNameField === undefined || serviceUrlField === '' || serviceUrlField === undefined;
   };
   var getFormHasformErrors = function getFormHasformErrors() {
@@ -2882,7 +2914,9 @@ var ServicePopupUnwrapped = function ServicePopupUnwrapped(_ref2) {
       }
     },
     children: jsxs("form", {
-      onSubmit: handleSubmit(addNewService),
+      onSubmit: handleSubmit(function (formValues) {
+        return addNewService(formValues);
+      }),
       children: [jsxs(DialogTitle, {
         sx: {
           alignItems: 'center',
@@ -2937,7 +2971,7 @@ var ServicePopupUnwrapped = function ServicePopupUnwrapped(_ref2) {
           padding: '8px 16px'
         },
         children: [jsx(ReactHookFormTextField, {
-          name: fields.serviceUrl.name,
+          name: FormFields.serviceUrl,
           label: t('service-url-label'),
           onFocus: onFocusServiceUrl,
           autoFocus: !shouldDisableAutoFocus,
@@ -2971,7 +3005,7 @@ var ServicePopupUnwrapped = function ServicePopupUnwrapped(_ref2) {
           },
           defaultValue: serviceUrl
         }), jsx(ReactHookFormTextField, {
-          name: fields.serviceName.name,
+          name: FormFields.serviceName,
           label: t('service-name-label'),
           rules: {
             required: true,
@@ -2989,7 +3023,7 @@ var ServicePopupUnwrapped = function ServicePopupUnwrapped(_ref2) {
         }), jsx(ReactHookFormTextField, {
           multiline: true,
           rows: 4,
-          name: fields.serviceAbstracts.name,
+          name: FormFields.serviceAbstracts,
           label: t('service-abstracts-label'),
           disabled: isShowPopup || isLoading,
           isReadOnly: isShowPopup,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/layer-select",
-  "version": "10.0.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/components/ServiceOptionsDialog/ServiceOptionsDialog.d.ts

@@ -13,7 +13,7 @@ export interface ServicePopupInfo {
     isOpen: boolean;
     serviceId?: string;
     serviceUrl?: string;
-    variant?: layerSelectTypes.PopupVariant;
+    variant: layerSelectTypes.PopupVariant;
 }
 export declare const ServiceOptionsDialog: React.FC<ServiceOptionsDialogProps>;
 export {};

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

@@ -82,7 +82,7 @@ export declare const isAllFiltersChecked: ((state: LayerSelectModuleState) => bo
  * @param {object} store store: object - object from which the service state will be extracted
  * @returns {array} returnType: LayerWithServiceName - an array of all filtered activelayers
  */
-export declare const getFilteredLayers: ((state: LayerSelectModuleState & import("@opengeoweb/store").CoreAppStore) => LayerWithServiceName[]) & import("reselect").OutputSelectorFields<(args_0: string[], args_1: import("dist/libs/store/src/store/mapStore/types").Services, args_2: string[], args_3: boolean, args_4: string) => LayerWithServiceName[], {
+export declare const getFilteredLayers: ((state: LayerSelectModuleState & import("@opengeoweb/store").CoreAppStore) => LayerWithServiceName[]) & import("reselect").OutputSelectorFields<(args_0: string[], args_1: import("dist/libs/store/src/store/map/types").Services, args_2: string[], args_3: boolean, args_4: string) => LayerWithServiceName[], {
     clearCache: () => void;
 }> & {
     clearCache: () => void;
@@ -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 {

package/src/lib/utils/testUtils.d.ts

@@ -1,4 +1,4 @@
 import { Store } from '@reduxjs/toolkit';
 import { uiTypes, WebMapStateModuleState } from '@opengeoweb/store';
 import { LayerSelectModuleState } from '../store/types';
-export declare const createMockStore: (mockState: LayerSelectModuleState & uiTypes.UIModuleState & WebMapStateModuleState) => Store;
+export declare const createMockStore: (mockState?: LayerSelectModuleState & uiTypes.UIModuleState & WebMapStateModuleState) => Store;