@opengeoweb/warnings 9.29.0 → 9.29.1

package/index.esm.js

@@ -13,12 +13,12 @@ import { generateMapId, LayerType, getWMJSMapById, getGeoCoordFromLatLong, WMBBO
 import { snackbarActions, snackbarTypes } from '@opengeoweb/snackbar';
 import * as React from 'react';
 import React__default, { useState, useEffect, useRef } from 'react';
-import { styled, Box, Typography, ListItem, Grid2, Paper, ListItemButton, Stack, LinearProgress, Button, MenuItem, FormHelperText, Tabs, Tab, Card, CardContent, CircularProgress, Menu, DialogTitle, DialogContent, Switch } from '@mui/material';
+import { styled, Box, Typography, ListItem, Grid2, Paper, ListItemButton, Stack, LinearProgress, Button, MenuItem, FormHelperText, Tabs, Tab, Card, CardContent, CircularProgress, Menu, DialogTitle, DialogContent, Switch, ListItemIcon, Checkbox, ListItemText } from '@mui/material';
 import { VariableSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { getApi, createApiInstance, createNonAuthApiInstance, createFakeApiInstance, ApiProvider, ProductStatus, useAirmetList, useSigmetList } from '@opengeoweb/api';
 import { useFormContext } from 'react-hook-form';
-import { isEqual, cloneDeep, clamp } from 'lodash';
+import { isEqual, cloneDeep, clamp, debounce } from 'lodash';
 import { useAuthenticationContext } from '@opengeoweb/authentication';
 import { produce } from 'immer';
 import { isAxiosError } from 'axios';
@@ -149,8 +149,10 @@ var en = {
 	"filter-source": "Sources",
 	"filter-hide": "Hide {{subject}}",
 	"filter-show": "Show {{subject}}",
-	airmet: "Airmet",
-	sigmet: "Sigmet",
+	"filter-only": "ONLY",
+	"warning-domain-aviation": "Aviation",
+	"warning-domain-maritime": "Maritime",
+	"warning-domain-public": "Public",
 	"error-title-retry": "Try again",
 	"aviation-phenomenon-radioactive-cloud": "Radioactive cloud",
 	"aviation-phenomenon-heavy-sandstorm": "Heavy sandstorm",
@@ -318,7 +320,6 @@ var nl = {
 	"filter-phenomenon": "Fenomenen",
 	"filter-level": "Niveaus",
 	"filter-source": "Bronnen",
-	"error-title-retry": "Probeer opnieuw",
 	"warning-dialog-expire-succes": "Waarschuwing laten verlopen is succesvol",
 	"warning-dialog-expire-title": "Waarschuwing laten verlopen",
 	"warning-dialog-expire-confirm": "Verlopen",
@@ -326,7 +327,12 @@ var nl = {
 	"warning-dialog-withdraw-succes": "Waarschuwing is succesvol ingetrokken",
 	"warning-dialog-withdraw-title": "Waarschuwing intrekken",
 	"warning-dialog-withdraw-confirm": "Intrekken",
-	"warning-dialog-withdraw-description": "Weet je zeker dat je deze waarschuwing wilt intrekken?"
+	"warning-dialog-withdraw-description": "Weet je zeker dat je deze waarschuwing wilt intrekken?",
+	"filter-only": "ALLEEN",
+	"warning-domain-aviation": "Luchtvaart",
+	"warning-domain-maritime": "Maritiem",
+	"warning-domain-public": "Publiek",
+	"error-title-retry": "Probeer opnieuw"
 };
 var fi = {
 	"drawing-tool-form-tools": "Työkalut",
@@ -452,7 +458,6 @@ var fi = {
 	"filter-phenomenon": "ei käännetty",
 	"filter-level": "ei käännetty",
 	"filter-source": "ei käännetty",
-	"error-title-retry": "Yritä uudelleen",
 	"warning-dialog-expire-succes": "ei käännetty",
 	"warning-dialog-expire-title": "ei käännetty",
 	"warning-dialog-expire-confirm": "ei käännetty",
@@ -460,7 +465,12 @@ var fi = {
 	"warning-dialog-withdraw-succes": "ei käännetty",
 	"warning-dialog-withdraw-title": "ei käännetty",
 	"warning-dialog-withdraw-confirm": "ei käännetty",
-	"warning-dialog-withdraw-description": "ei käännetty"
+	"warning-dialog-withdraw-description": "ei käännetty",
+	"filter-only": "Pelkästään",
+	"warning-domain-aviation": "ei käännetty",
+	"warning-domain-maritime": "ei käännetty",
+	"warning-domain-public": "ei käännetty",
+	"error-title-retry": "Yritä uudelleen"
 };
 var no = {
 	"drawing-tool-form-tools": "Verktøy",
@@ -586,7 +596,6 @@ var no = {
 	"filter-phenomenon": "Fenomen",
 	"filter-level": "Grad",
 	"filter-source": "Kilder",
-	"error-title-retry": "Prøv igjen",
 	"warning-dialog-expire-succes": "ikke oversatt",
 	"warning-dialog-expire-title": "ikke oversatt",
 	"warning-dialog-expire-confirm": "ikke oversatt",
@@ -594,7 +603,12 @@ var no = {
 	"warning-dialog-withdraw-succes": "ikke oversatt",
 	"warning-dialog-withdraw-title": "ikke oversatt",
 	"warning-dialog-withdraw-confirm": "ikke oversatt",
-	"warning-dialog-withdraw-description": "ikke oversatt"
+	"warning-dialog-withdraw-description": "ikke oversatt",
+	"filter-only": "BARE",
+	"warning-domain-aviation": "ikke oversatt",
+	"warning-domain-maritime": "ikke oversatt",
+	"warning-domain-public": "ikke oversatt",
+	"error-title-retry": "Prøv igjen"
 };
 var warningsTranslations = {
 	en: en,
@@ -4164,9 +4178,6 @@ const getFilterlistWithTranslationKeys = filterList => filterList.reduce((fiterL
 const defaultFilters = [{
   key: 'incident',
   translationKey: 'filter-incident'
-}, {
-  key: 'domain',
-  translationKey: 'filter-domain'
 }, {
   key: 'phenomenon',
   translationKey: 'filter-phenomenon',
@@ -13909,7 +13920,6 @@ const FilterChipWithOptions = ({
         children: jsx(FilterChip, {
           id: id,
           label: label,
-          onAction: onClickOptions,
           actionIcon: actionButton(selectedFiltersAmount),
           isSelected: isAnyFilterSelected,
           handleClick: onClickOptions,
@@ -14071,14 +14081,218 @@ const FilterChipWithOptionsConnect = ({
   }));
 };
 
+const FilterOption = ({
+  filterId,
+  optionId,
+  checked,
+  onClick,
+  label
+}) => {
+  const {
+    t
+  } = useWarningsTranslation();
+  const [showOnly, setShowOnly] = useState(false);
+  const updateShowOnly = debounce(show => setShowOnly(show), 100);
+  return jsx(ListItem, Object.assign({
+    disablePadding: true,
+    dense: true,
+    sx: {
+      width: '100%',
+      minWidth: '300px',
+      paddingRight: '0px',
+      marginLeft: '-12px',
+      fontSize: '12px'
+    },
+    secondaryAction: showOnly && jsx(CustomIconButton, Object.assign({
+      "aria-label": `Only ${optionId}`,
+      style: {
+        backgroundColor: 'transparent',
+        width: 'auto'
+      },
+      edge: "end",
+      onClick: () => onClick(!checked, true),
+      onMouseOver: () => updateShowOnly(true),
+      onMouseOut: () => updateShowOnly(false)
+    }, {
+      children: jsx(Typography, Object.assign({
+        sx: {
+          color: 'geowebColors.buttons.primary.default.fill',
+          fontSize: '14px',
+          fontWeight: 500
+        }
+      }, {
+        children: t('filter-only')
+      }))
+    }))
+  }, {
+    children: jsxs(ListItemButton, Object.assign({
+      role: undefined,
+      onClick: () => onClick(!checked),
+      onMouseOver: () => updateShowOnly(true),
+      onMouseOut: () => updateShowOnly(false),
+      dense: true,
+      disableGutters: true,
+      sx: {
+        padding: 0
+      }
+    }, {
+      children: [jsx(ListItemIcon, {
+        children: jsx(Checkbox, {
+          checked: checked,
+          tabIndex: -1,
+          disableRipple: true,
+          inputProps: {
+            'aria-labelledby': optionId,
+            'aria-label': optionId
+          }
+        })
+      }), jsx(ListItemText, {
+        id: optionId,
+        sx: {
+          padding: 0,
+          margin: 0
+        },
+        primary: label || t(`warning-${filterId}-${optionId}`)
+      })]
+    }))
+  }), optionId);
+};
+
+const ExpandableFilterChip = ({
+  id,
+  options,
+  updateFilter
+}) => {
+  const {
+    t
+  } = useWarningsTranslation();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const selectedOptions = Object.keys(options).filter(k => options[k]);
+  const allSelected = selectedOptions.length === Object.keys(options).length;
+  return jsxs(Fragment, {
+    children: [jsx(CustomTooltip, Object.assign({
+      title: t('filter-options'),
+      placement: "bottom"
+    }, {
+      children: jsx("span", Object.assign({
+        style: {
+          margin: 0
+        }
+      }, {
+        children: jsx(FilterChip, {
+          id: id,
+          label: t(`filter-${id}`),
+          isSelected: selectedOptions.length > 0,
+          onClick: ref => setAnchorEl(ref),
+          isDisabled: false,
+          size: "medium",
+          actionIcon: jsxs(Grid2, Object.assign({
+            container: true,
+            alignItems: "center",
+            style: {
+              marginRight: '8px',
+              minWidth: '36px'
+            }
+          }, {
+            children: [jsx(Options, {}), jsx(Typography, Object.assign({
+              variant: "body2",
+              sx: {
+                paddingLeft: 0.5
+              }
+            }, {
+              children: selectedOptions.length > 0 && selectedOptions.length
+            }))]
+          }))
+        })
+      }))
+    })), jsxs(Menu, Object.assign({
+      title: t(`filter-${id}`),
+      open: Boolean(anchorEl),
+      onClose: () => setAnchorEl(null),
+      anchorEl: anchorEl,
+      BackdropProps: {
+        style: {
+          opacity: 0,
+          transition: 'none'
+        }
+      },
+      sx: {
+        padding: 3
+      }
+    }, {
+      children: [jsxs(DialogTitle, Object.assign({
+        id: "dialog-title",
+        sx: {
+          zIndex: 1,
+          padding: '8px 18px 16px 24px',
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center'
+        }
+      }, {
+        children: [jsx(Typography, Object.assign({
+          sx: {
+            fontSize: '20px',
+            fontWeight: 500,
+            paddingRight: 1
+          },
+          "data-testid": "customDialog-title",
+          component: "span"
+        }, {
+          children: t(`filter-${id}`)
+        })), jsx(CustomIconButton, Object.assign({
+          "aria-label": t('close-dialog-confirm'),
+          onClick: () => setAnchorEl(null),
+          sx: {
+            '&.MuiIconButton-root': {
+              color: 'geowebColors.greys.accessible'
+            }
+          }
+        }, {
+          children: jsx(Close, {})
+        }))]
+      })), jsxs(DialogContent, Object.assign({
+        sx: {
+          padding: '0px 24px 16px 24px'
+        }
+      }, {
+        children: [jsxs(Grid2, Object.assign({
+          container: true,
+          justifyContent: "space-between",
+          alignItems: "center"
+        }, {
+          children: [t('filter-select-all'), jsx(Switch, {
+            inputProps: {
+              'aria-label': t('filter-select-all')
+            },
+            checked: allSelected,
+            onChange: () => updateFilter(id, 'ALL', !allSelected),
+            sx: {
+              marginRight: '-12px',
+              marginTop: '-6px'
+            }
+          })]
+        })), jsx(Box, {
+          children: Object.keys(options).map(optionId => {
+            return jsx(FilterOption, {
+              filterId: id,
+              optionId: optionId,
+              checked: options[optionId],
+              onClick: (checked, only) => updateFilter(id, optionId, checked, only)
+            }, `${id}-${optionId}`);
+          })
+        })]
+      }))]
+    }))]
+  });
+};
+
 const FilterList = ({
   filters: _filters = [],
   onClickAll: _onClickAll = () => {},
   isAllSelected: _isAllSelected = true,
-  showSigmet: _showSigmet = false,
-  showAirmet: _showAirmet = false,
-  setShowSigmet,
-  setShowAirmet
+  filterState,
+  updateFilter
 }) => {
   const {
     t
@@ -14116,49 +14330,11 @@ const FilterList = ({
       return jsx(FilterChipWithOptionsConnect, {
         filter: filter
       }, filter.id);
-    }), setShowSigmet && jsx(CustomTooltip, Object.assign({
-      title: _showSigmet ? t('filter-hide', {
-        subject: t('sigmet')
-      }) : t('filter-show', {
-        subject: t('sigmet')
-      }),
-      placement: "bottom"
-    }, {
-      children: jsx("span", Object.assign({
-        style: {
-          margin: 0
-        }
-      }, {
-        children: jsx(FilterChip, {
-          id: "sigmet",
-          label: t('sigmet'),
-          isSelected: _showSigmet,
-          handleClick: () => setShowSigmet(!_showSigmet),
-          size: "medium"
-        })
-      }))
-    })), setShowAirmet && jsx(CustomTooltip, Object.assign({
-      title: _showAirmet ? t('filter-hide', {
-        subject: t('airmet')
-      }) : t('filter-show', {
-        subject: t('airmet')
-      }),
-      placement: "bottom"
-    }, {
-      children: jsx("span", Object.assign({
-        style: {
-          margin: 0
-        }
-      }, {
-        children: jsx(FilterChip, {
-          id: "airmet",
-          label: t('airmet'),
-          isSelected: _showAirmet,
-          handleClick: () => setShowAirmet(!_showAirmet),
-          size: "medium"
-        })
-      }))
-    }))]
+    }), filterState && Object.keys(filterState).map(filterId => jsx(ExpandableFilterChip, {
+      id: filterId,
+      options: filterState[filterId],
+      updateFilter: updateFilter
+    }, filterId))]
   }));
 };
 
@@ -14774,6 +14950,57 @@ const WarningListItem = _a => {
   }), warning.id);
 };
 
+var Domain;
+(function (Domain) {
+  Domain["aviation"] = "aviation";
+  Domain["maritime"] = "maritime";
+  Domain["public"] = "public";
+})(Domain || (Domain = {}));
+const defaultDomainFilter = {
+  aviation: false,
+  maritime: false,
+  public: true
+};
+const useWarningFilters = () => {
+  const [domainFilter, setDomainFilter] = useState(defaultDomainFilter);
+  const updateState = (state, optionKey, value, only) => {
+    if (only) {
+      return Object.keys(state).reduce((acc, k) => Object.assign(Object.assign({}, acc), {
+        [k]: k === optionKey
+      }), {});
+    }
+    return optionKey === 'ALL' ? Object.keys(state).reduce((acc, k) => Object.assign(Object.assign({}, acc), {
+      [k]: value
+    }), {}) : Object.assign(Object.assign({}, state), {
+      [optionKey]: value
+    });
+  };
+  const updateFilter = (filterKey, optionKey, value, only) => {
+    if (filterKey === 'ALL') {
+      return;
+    }
+    if (filterKey === 'domain') {
+      setDomainFilter(state => {
+        return updateState(state, optionKey, value, only);
+      });
+    }
+  };
+  const byFilterState = warning => {
+    const levelDomain = ['SIG', 'AIR'].find(d => d === warning.warningDetail.level) ? Domain.aviation : Domain.public;
+    if (!domainFilter[levelDomain]) {
+      return false;
+    }
+    return true;
+  };
+  return {
+    filterState: {
+      domain: domainFilter
+    },
+    updateFilter,
+    byFilterState
+  };
+};
+
 const sortWarningsOnStatus = warnings => {
   return warnings.reduce((allWarnings, warning) => {
     const status = warning.status || mapProductStatusToWarningStatus(warning.productStatus);
@@ -14838,10 +15065,6 @@ const PublicWarningList = ({
   error,
   selectedPublicWarningId: _selectedPublicWarningId = '',
   lastUpdatedTime,
-  showSigmet,
-  showAirmet,
-  setShowSigmet,
-  setShowAirmet,
   onSelectWarning: _onSelectWarning = () => {},
   onEditWarning: _onEditWarning = () => {},
   onCreateWarning: _onCreateWarning = () => {},
@@ -14856,7 +15079,12 @@ const PublicWarningList = ({
   const {
     t
   } = useWarningsTranslation();
-  const sortedWarnings = sortWarningsOnStatus(_warnings);
+  const {
+    filterState,
+    updateFilter,
+    byFilterState
+  } = useWarningFilters();
+  const sortedWarnings = sortWarningsOnStatus(_warnings.filter(byFilterState));
   const items = [{
     status: PublicWarningStatus.TODO,
     totalWarnings: sortedWarnings.todo.length
@@ -14947,10 +15175,8 @@ const PublicWarningList = ({
           filters: filters,
           isAllSelected: _isAllChipSelected,
           onClickAll: _onClickAllChip,
-          showSigmet: showSigmet,
-          showAirmet: showAirmet,
-          setShowSigmet: setShowSigmet,
-          setShowAirmet: setShowAirmet
+          filterState: filterState,
+          updateFilter: updateFilter
         })
       })), jsxs(Grid2, Object.assign({
         className: "create-warning",
@@ -15297,8 +15523,6 @@ const PublicWarningListConnect = () => {
     refetch: refetchSigmetList,
     isFetching: isFetchingSigmet
   } = useSigmetList();
-  const [showAirmet, setShowAirmet] = React__default.useState(false);
-  const [showSigmet, setShowSigmet] = React__default.useState(false);
   const [confirmDialogOptions, setConfirmDialogOptions] = React__default.useState(undefined);
   const filters = useSelector(selectAllFilters);
   const isAllChipSelected = useSelector(getIsAllSelected);
@@ -15431,7 +15655,7 @@ const PublicWarningListConnect = () => {
   }, [dispatch, warnings]);
   const transformedSigmets = (sigmetList === null || sigmetList === void 0 ? void 0 : sigmetList.map(transformSigmetToWarningFormat)) || [];
   const transformedAirmets = (airmetList === null || airmetList === void 0 ? void 0 : airmetList.map(transformAirmetToWarningFormat)) || [];
-  const combinedWarnings = filteredWarnings.concat(showSigmet ? transformedSigmets : []).concat(showAirmet ? transformedAirmets : []).sort((w1, w2) => {
+  const combinedWarnings = filteredWarnings.concat(transformedSigmets).concat(transformedAirmets).sort((w1, w2) => {
     var _a;
     return ((_a = w2.lastUpdatedTime) === null || _a === void 0 ? void 0 : _a.localeCompare(w1.lastUpdatedTime || '')) || 0;
   });
@@ -15452,11 +15676,7 @@ const PublicWarningListConnect = () => {
       onRefetchWarnings: fetchWarnings,
       filters: filters,
       isAllChipSelected: isAllChipSelected,
-      onClickAllChip: onClickAllChip,
-      showSigmet: showSigmet,
-      showAirmet: showAirmet,
-      setShowSigmet: setShowSigmet,
-      setShowAirmet: setShowAirmet
+      onClickAllChip: onClickAllChip
     }), confirmDialogOptions && jsx(ConfirmDeleteWarningDialog, {
       onClose: () => setConfirmDialogOptions(undefined),
       title: confirmDialogOptions.title,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/warnings",
-  "version": "9.29.0",
+  "version": "9.29.1",
   "description": "GeoWeb warinings library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {

package/src/lib/components/FilterList/ExpandableFilterChip.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { FilterState, UpdateFilter } from '../PublicWarningList/hooks';
+type IdType = keyof FilterState;
+interface Props {
+    id: IdType;
+    options: FilterState[IdType];
+    updateFilter: UpdateFilter;
+}
+declare const ExpandableFilterChip: React.FC<Props>;
+export default ExpandableFilterChip;

package/src/lib/components/FilterList/FilterList.d.ts

@@ -1,13 +1,12 @@
 import { FC } from 'react';
 import { WarningListFilter } from '../../store/publicWarnings/types';
+import { FilterState, UpdateFilter } from '../PublicWarningList/hooks';
 interface FilterListProps {
     filters?: WarningListFilter[];
     onClickAll?: (isChecked: boolean) => void;
     isAllSelected?: boolean;
-    showSigmet?: boolean;
-    showAirmet?: boolean;
-    setShowSigmet?: React.Dispatch<React.SetStateAction<boolean>>;
-    setShowAirmet?: React.Dispatch<React.SetStateAction<boolean>>;
+    filterState?: FilterState;
+    updateFilter: UpdateFilter;
 }
 declare const FilterList: FC<FilterListProps>;
 export default FilterList;

package/src/lib/components/FilterList/FilterOption.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+import { FilterState, OptionKey } from '../PublicWarningList/hooks';
+type FilterType = keyof FilterState;
+interface Props {
+    filterId: FilterType;
+    optionId: OptionKey<FilterType>;
+    checked: boolean;
+    onClick: (checked: boolean, only?: boolean) => void;
+    label?: ReactNode;
+}
+declare const FilterOption: React.FC<Props>;
+export default FilterOption;

package/src/lib/components/PublicWarningList/PublicWarningList.d.ts

@@ -20,9 +20,5 @@ export declare const PublicWarningList: React.FC<{
     filters?: WarningListFilter[];
     onClickAllChip?: (isChecked: boolean) => void;
     isAllChipSelected?: boolean;
-    showSigmet?: boolean;
-    showAirmet?: boolean;
-    setShowSigmet?: React.Dispatch<React.SetStateAction<boolean>>;
-    setShowAirmet?: React.Dispatch<React.SetStateAction<boolean>>;
 } & WarningStatusProps>;
 export default PublicWarningList;

package/src/lib/components/PublicWarningList/hooks.d.ts

@@ -0,0 +1,19 @@
+import { PublicWarning } from '../../store/publicWarningForm/types';
+declare enum Domain {
+    aviation = "aviation",
+    maritime = "maritime",
+    public = "public"
+}
+declare const defaultDomainFilter: Record<Domain, boolean>;
+export interface FilterState {
+    domain: typeof defaultDomainFilter;
+}
+export type FilterKeyType = keyof FilterState;
+export type OptionKey<T extends FilterKeyType> = keyof FilterState[T];
+export type UpdateFilter = <T extends FilterKeyType>(filterKey: T | 'ALL', optionKey: OptionKey<T> | 'ALL', value: boolean, only?: boolean) => void;
+export declare const useWarningFilters: () => {
+    filterState: FilterState;
+    updateFilter: UpdateFilter;
+    byFilterState: (warning: PublicWarning) => boolean;
+};
+export {};