@opengeoweb/taf 2.4.0 → 2.4.1

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@opengeoweb/form-fields'), require('@mui/material'), require('react-hook-form'), require('react-sortablejs'), require('@opengeoweb/api'), require('@opengeoweb/shared'), require('moment'), require('lodash'), require('@mui/styles/makeStyles'), require('@mui/icons-material'), require('react-dom'), require('@mui/material/LinearProgress'), require('@mui/icons-material/DoDisturb'), require('@mui/material/Box')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@opengeoweb/form-fields', '@mui/material', 'react-hook-form', 'react-sortablejs', '@opengeoweb/api', '@opengeoweb/shared', 'moment', 'lodash', '@mui/styles/makeStyles', '@mui/icons-material', 'react-dom', '@mui/material/LinearProgress', '@mui/icons-material/DoDisturb', '@mui/material/Box'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Taf = {}, global.React, global.formFields, global.material, global.reactHookForm, global.reactSortablejs, global.api, global.shared, global.moment, global.lodash, global.makeStyles, global.iconsMaterial, global.ReactDOM, global.LinearProgress, global.DoDisturbIcon, global.Box));
-})(this, (function (exports, React, formFields, material, reactHookForm, reactSortablejs, api, shared, moment, lodash, makeStyles, iconsMaterial, ReactDOM, LinearProgress, DoDisturbIcon, Box) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('react-hook-form'), require('react-sortablejs'), require('@opengeoweb/form-fields'), require('@opengeoweb/api'), require('@opengeoweb/shared'), require('moment'), require('lodash'), require('@mui/styles/makeStyles'), require('@mui/icons-material'), require('react-dom'), require('@mui/material/LinearProgress'), require('@mui/icons-material/DoDisturb'), require('@mui/material/Box')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', 'react-hook-form', 'react-sortablejs', '@opengeoweb/form-fields', '@opengeoweb/api', '@opengeoweb/shared', 'moment', 'lodash', '@mui/styles/makeStyles', '@mui/icons-material', 'react-dom', '@mui/material/LinearProgress', '@mui/icons-material/DoDisturb', '@mui/material/Box'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Taf = {}, global.React, global.material, global.reactHookForm, global.reactSortablejs, global.formFields, global.api, global.shared, global.moment, global.lodash, global.makeStyles, global.iconsMaterial, global.ReactDOM, global.LinearProgress, global.DoDisturbIcon, global.Box));
+})(this, (function (exports, React, material, reactHookForm, reactSortablejs, formFields, api, shared, moment, lodash, makeStyles, iconsMaterial, ReactDOM, LinearProgress, DoDisturbIcon, Box) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -2218,9 +2218,10 @@
       .filter(function (value) {
         return Object.keys(value).length;
       });
+      var parsedBaseForecast = productToPost.baseForecast && parseFormValues(productToPost.baseForecast, tafStart, tafEnd);
 
       var parsedFormValues = __assign(__assign({}, productToPost), {
-        baseForecast: parseFormValues(productToPost.baseForecast, tafStart, tafEnd),
+        baseForecast: parsedBaseForecast,
         changeGroups: parsedChangeGroups
       });
 
@@ -3486,6 +3487,170 @@
       }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.DragIndicator, null));
     };
 
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+    var getCustomError = function getCustomError(error) {
+      var name = error.ref.name;
+      var isChangeGroup = name.includes('changeGroups');
+      var matchRowNumber = name.match(/\[(.*?)\]/);
+      var row = matchRowNumber ? parseInt(matchRowNumber[1], 10) : null;
+      return __assign(__assign({}, error), {
+        isChangeGroup: isChangeGroup,
+        row: row
+      });
+    };
+    var getIssuesLabel = function getIssuesLabel(sumOfErrors) {
+      switch (sumOfErrors) {
+        case 0:
+          return '0 issues';
+
+        case 1:
+          return '1 issue';
+
+        default:
+          return sumOfErrors + " issues";
+      }
+    };
+
+    var getErrorValues = function getErrorValues(fieldErrors) {
+      if (!fieldErrors) return [];
+      return Object.keys(fieldErrors).reduce(function (list, key) {
+        var error = __assign({}, fieldErrors[key]);
+
+        if (error.ref) {
+          return list.concat(getCustomError(error));
+        }
+
+        return list.concat(getErrorValues(error));
+      }, []);
+    };
+
+    var filterDuplicateErrors = function filterDuplicateErrors(errors) {
+      return errors.reduce(function (list, error) {
+        // check on type validateRequiredSub and validateRequiredMainOptional since these are giving 'duplicates'
+        if (error.type === 'validateRequiredSub') {
+          var exist = list.find(function (e) {
+            return e.type === 'validateRequiredSub' && e.row === error.row;
+          });
+          return exist ? list : list.concat(error);
+        }
+
+        if (error.type === 'validateRequiredMainOptional') {
+          var exist = list.find(function (e) {
+            return e.type === 'validateRequiredMainOptional' && e.row === error.row;
+          });
+          return exist ? list : list.concat(error);
+        }
+
+        return list.concat(error);
+      }, []);
+    };
+    var getErrors = function getErrors(errors) {
+      var errorList = Object.keys(errors).reduce(function (list, key) {
+        var errorValue = errors[key];
+
+        if (Array.isArray(errorValue)) {
+          var errorValues = errorValue.reduce(function (l, i) {
+            return l.concat(getErrorValues(i));
+          }, []);
+          return list.concat.apply(list, __spreadArray([], __read(errorValues)));
+        }
+
+        return list.concat(getErrorValues(errorValue));
+      }, []);
+      return errorList;
+    };
+
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var IssuesButton = function IssuesButton(_a) {
+      var _b = _a.errors,
+          errors = _b === void 0 ? {} : _b,
+          _c = _a.isIssuesPaneOpen,
+          isIssuesPaneOpen = _c === void 0 ? false : _c,
+          _d = _a.setIsIssuesPaneOpen,
+          setIsIssuesPaneOpen = _d === void 0 ? function () {
+        return null;
+      } : _d;
+      var errorList = filterDuplicateErrors(getErrors(errors));
+      var totalErrors = errorList.length;
+      var errorStatus = totalErrors > 0 ? 'error' : 'success';
+      var buttonColor = "geowebColors.functional." + errorStatus;
+
+      var toggleIssuesPane = function toggleIssuesPane(newPosition) {
+        return setIsIssuesPaneOpen(!isIssuesPaneOpen, newPosition);
+      };
+
+      var onClickButton = function onClickButton(event) {
+        var _a;
+
+        var _b = event.currentTarget.getBoundingClientRect(),
+            left = _b.left,
+            top = _b.top;
+
+        var parentOffset = ((_a = document.getElementById('tafmodule')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {
+          top: 0,
+          left: 0
+        };
+        var newPosition = {
+          left: left - parentOffset.left + 100,
+          top: top - parentOffset.top
+        };
+        toggleIssuesPane(newPosition);
+      };
+
+      return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+        title: "View details"
+      }, /*#__PURE__*/React__namespace.createElement(material.Chip, {
+        "data-testid": "issuesButton",
+        className: "status-" + errorStatus,
+        size: "small",
+        label: getIssuesLabel(totalErrors),
+        onClick: onClickButton,
+        sx: {
+          width: '74px',
+          color: '#ffffff',
+          backgroundColor: buttonColor,
+          '&:hover': {
+            backgroundColor: buttonColor
+          },
+          '&:focus': {
+            backgroundColor: buttonColor
+          },
+          fontSize: 12
+        }
+      }));
+    };
+
     var ThumbsUp = function ThumbsUp(props) {
       return /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, __assign({
         fontSize: "inherit",
@@ -3572,12 +3737,40 @@
       return index + 1 + ". " + fieldErrorTitle + ": " + getErrorDefaultMessage(error);
     };
     var MODAL_DIALOG_ELEMENT = 'modal-dialog';
+    var useIssuesPane = function useIssuesPane() {
+      var _a = __read(React__namespace.useState(false), 2),
+          isIssuesPaneOpen = _a[0],
+          setIsIssuesPaneOpen = _a[1];
+
+      var _b = __read(React__namespace.useState(null), 2),
+          startPosition = _b[0],
+          setStartPosition = _b[1];
+
+      var onToggleIssuesPane = function onToggleIssuesPane(isOpen, newPosition) {
+        if (!startPosition) {
+          setStartPosition(newPosition);
+        }
+
+        setIsIssuesPaneOpen(isOpen);
+      };
+
+      var onCloseIssuesPane = function onCloseIssuesPane() {
+        return setIsIssuesPaneOpen(false);
+      };
+
+      return {
+        isIssuesPaneOpen: isIssuesPaneOpen,
+        startPosition: startPosition,
+        onToggleIssuesPane: onToggleIssuesPane,
+        onCloseIssuesPane: onCloseIssuesPane
+      };
+    };
 
     var IssuesPane = function IssuesPane(_a) {
-      var isOpen = _a.isOpen,
-          handleClose = _a.handleClose,
-          _b = _a.errorList,
+      var _b = _a.errorList,
           errorList = _b === void 0 ? [] : _b,
+          isOpen = _a.isOpen,
+          handleClose = _a.handleClose,
           _c = _a.startPosition,
           startPosition = _c === void 0 ? {
         left: 20,
@@ -3620,204 +3813,96 @@
       }))), rootElement);
     };
 
-    var getCustomError = function getCustomError(error) {
-      var name = error.ref.name;
-      var isChangeGroup = name.includes('changeGroups');
-      var matchRowNumber = name.match(/\[(.*?)\]/);
-      var row = matchRowNumber ? parseInt(matchRowNumber[1], 10) : null;
-      return __assign(__assign({}, error), {
-        isChangeGroup: isChangeGroup,
-        row: row
-      });
-    };
-
-    var getIssuesLabel = function getIssuesLabel(sumOfErrors) {
-      switch (sumOfErrors) {
-        case 0:
-          return '0 issues';
-
-        case 1:
-          return '1 issue';
-
-        default:
-          return sumOfErrors + " issues";
-      }
-    };
-
-    var getErrorValues = function getErrorValues(fieldErrors) {
-      if (!fieldErrors) return [];
-      return Object.keys(fieldErrors).reduce(function (list, key) {
-        var error = __assign({}, fieldErrors[key]);
-
-        if (error.ref) {
-          return list.concat(getCustomError(error));
-        }
-
-        return list.concat(getErrorValues(error));
-      }, []);
-    };
-
-    var filterDuplicateErrors = function filterDuplicateErrors(errors) {
-      return errors.reduce(function (list, error) {
-        // check on type validateRequiredSub and validateRequiredMainOptional since these are giving 'duplicates'
-        if (error.type === 'validateRequiredSub') {
-          var exist = list.find(function (e) {
-            return e.type === 'validateRequiredSub' && e.row === error.row;
-          });
-          return exist ? list : list.concat(error);
-        }
-
-        if (error.type === 'validateRequiredMainOptional') {
-          var exist = list.find(function (e) {
-            return e.type === 'validateRequiredMainOptional' && e.row === error.row;
-          });
-          return exist ? list : list.concat(error);
-        }
-
-        return list.concat(error);
-      }, []);
-    };
-
-    var getErrors = function getErrors(errors) {
-      var errorList = Object.keys(errors).reduce(function (list, key) {
-        var errorValue = errors[key];
-
-        if (Array.isArray(errorValue)) {
-          var errorValues = errorValue.reduce(function (l, i) {
-            return l.concat(getErrorValues(i));
-          }, []);
-          return list.concat.apply(list, __spreadArray([], __read(errorValues)));
-        }
+    var fromStatusToAction = function fromStatusToAction(tafStatus) {
+      switch (tafStatus) {
+        case 'DRAFT':
+          return 'DRAFT';
 
-        return list.concat(getErrorValues(errorValue));
-      }, []);
-      return errorList;
-    };
+        case 'DRAFT_AMENDED':
+          return 'DRAFT_AMEND';
 
-    var IssuesButton = function IssuesButton(_a) {
-      var _b = _a.errors,
-          errors = _b === void 0 ? {} : _b;
-      var errorList = filterDuplicateErrors(getErrors(errors));
-      var totalErrors = errorList.length;
-      var errorStatus = totalErrors > 0 ? 'error' : 'success';
-      var buttonColor = "geowebColors.functional." + errorStatus;
+        case 'DRAFT_CORRECTED':
+          return 'DRAFT_CORRECT';
 
-      var _c = __read(React__namespace.useState(false), 2),
-          isIssuesPaneOpen = _c[0],
-          setIsIssuesPaneOpen = _c[1];
+        case 'PUBLISHED':
+          return 'PUBLISH';
 
-      var toggleIssuesPane = function toggleIssuesPane() {
-        return setIsIssuesPaneOpen(!isIssuesPaneOpen);
-      };
+        case 'AMENDED':
+          return 'AMEND';
 
-      var _d = __read(React__namespace.useState({
-        left: 0,
-        top: 0
-      }), 2),
-          startPosition = _d[0],
-          setStartPosition = _d[1];
+        case 'CORRECTED':
+          return 'CORRECT';
 
-      var onClickButton = function onClickButton(event) {
-        var _a;
+        case 'CANCELLED':
+          return 'CANCEL';
 
-        var _b = event.currentTarget.getBoundingClientRect(),
-            left = _b.left,
-            top = _b.top;
+        default:
+          return 'NEW';
+      }
+    }; // prevents default functionality
 
-        var parentOffset = ((_a = document.getElementById('tafmodule')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {
-          top: 0,
-          left: 0
-        };
-        var newPosition = {
-          left: left - parentOffset.left + 100,
-          top: top - parentOffset.top
-        };
-        setStartPosition(newPosition);
-        toggleIssuesPane();
-      };
-
-      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
-        title: "View details"
-      }, /*#__PURE__*/React__namespace.createElement(material.Chip, {
-        "data-testid": "issuesButton",
-        className: "status-" + errorStatus,
-        size: "small",
-        label: getIssuesLabel(totalErrors),
-        onClick: onClickButton,
-        sx: {
-          width: '74px',
-          color: '#ffffff',
-          backgroundColor: buttonColor,
-          '&:hover': {
-            backgroundColor: buttonColor
-          },
-          '&:focus': {
-            backgroundColor: buttonColor
-          },
-          fontSize: 12
-        }
-      })), /*#__PURE__*/React__namespace.createElement(IssuesPane, {
-        errorList: errorList,
-        handleClose: toggleIssuesPane,
-        isOpen: isIssuesPaneOpen,
-        startPosition: startPosition
-      }));
-    };
 
     var noop = function noop() {};
 
     var TafForm = function TafForm(_a) {
-      var // can be removed after old TAF is gone
-      defaultTafAction = _a.tafAction,
-          isDefaultDisabled = _a.isDisabled,
-          _b = _a.staticTAC,
-          staticTAC = _b === void 0 ? '' : _b,
+      var _b = _a.isDisabled,
+          isDefaultDisabled = _b === void 0 ? false : _b,
           tafFromBackend = _a.tafFromBackend,
           _c = _a.onFormAction,
           onFormAction = _c === void 0 ? function () {
         return null;
-      } : _c;
+      } : _c,
+          _d = _a.onFormDirty,
+          onFormDirty = _d === void 0 ? function () {
+        return null;
+      } : _d,
+          _e = _a.isIssuesPaneOpen,
+          isIssuesPaneOpen = _e === void 0 ? false : _e,
+          _f = _a.setIsIssuesPaneOpen,
+          setIsIssuesPaneOpen = _f === void 0 ? function () {
+        return null;
+      } : _f;
       var originalTaf = tafFromBackend.taf;
+      var defaultTafAction = fromStatusToAction(originalTaf.status);
 
-      var _d = __read(React__default["default"].useState(defaultTafAction), 2),
-          tafAction = _d[0],
-          setTafAction = _d[1];
+      var _g = __read(React__default["default"].useState(defaultTafAction), 2),
+          tafAction = _g[0],
+          setTafAction = _g[1];
 
-      var _e = __read(React__default["default"].useState(isDefaultDisabled), 2),
-          isDisabled = _e[0],
-          setIsDisabled = _e[1];
+      var _h = __read(React__default["default"].useState(isDefaultDisabled), 2),
+          isDisabled = _h[0],
+          setIsDisabled = _h[1];
 
       var confirmDialog = shared.useConfirmationDialog();
 
-      var _f = shared.useDraftFormHelpers(),
-          toggleIsDraft = _f.toggleIsDraft,
-          DraftFieldHelper = _f.DraftFieldHelper;
+      var _j = shared.useDraftFormHelpers(),
+          toggleIsDraft = _j.toggleIsDraft,
+          DraftFieldHelper = _j.DraftFieldHelper;
 
       var api$1 = api.useApiContext().api;
       var isMounted = shared.useIsMounted().isMounted;
 
-      var _g = reactHookForm.useFormContext(),
-          control = _g.control,
-          handleSubmit = _g.handleSubmit,
-          watch = _g.watch,
-          trigger = _g.trigger,
-          formState = _g.formState,
-          getValues = _g.getValues,
-          setValue = _g.setValue,
-          reset = _g.reset;
+      var _k = reactHookForm.useFormContext(),
+          control = _k.control,
+          handleSubmit = _k.handleSubmit,
+          trigger = _k.trigger,
+          formState = _k.formState,
+          getValues = _k.getValues,
+          setValue = _k.setValue,
+          reset = _k.reset;
 
       var isFormDirty = formState.isDirty,
           errors = formState.errors;
       shared.usePreventBrowserClose(isFormDirty && !isDisabled);
       var hiddenInputFields = ['baseTime', 'issueDate', 'type', 'uuid', 'validDateStart', 'validDateEnd', 'status', 'previousId', 'previousValidDateStart', 'previousValidDateEnd'];
 
-      var _h = __read(React__default["default"].useState(watch()), 2),
-          delayedFormValues = _h[0],
-          setDelayedFormValues = _h[1];
+      var _l = __read(React__default["default"].useState(getValues()), 2),
+          delayedFormValues = _l[0],
+          setDelayedFormValues = _l[1];
 
-      var _j = __read(useTACGenerator(convertTafValuesToObject(delayedFormValues), api$1.getTAC, staticTAC), 2),
-          TAC = _j[0],
-          updateTAC = _j[1];
+      var _m = __read(useTACGenerator(tafFromBackend.taf, api$1.getTAC), 2),
+          TAC = _m[0],
+          updateTAC = _m[1];
 
       var hasErrors = Object.keys(errors).length;
 
@@ -3826,7 +3911,7 @@
       };
 
       React__default["default"].useEffect(function () {
-        if (staticTAC === '' && isMounted.current && isFormDirty) {
+        if (isMounted.current && isFormDirty) {
           var newTAC = hasErrors ? null : convertTafValuesToObject(delayedFormValues);
           updateTAC(newTAC);
         } // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -3838,7 +3923,11 @@
           updateTAC(convertTafValuesToObject(delayedFormValues));
         } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-      }, [hasErrors]);
+      }, [hasErrors]); // Needed to be able to show a confirmation dialog on switching tabs when form is edited and not saved
+
+      React__default["default"].useEffect(function () {
+        onFormDirty(isFormDirty);
+      }, [isFormDirty, onFormDirty]);
 
       var onSubmit = function onSubmit(data) {
         // eslint-disable-next-line no-console
@@ -3956,19 +4045,19 @@
         }
       };
 
-      var _k = reactHookForm.useFieldArray({
+      var _o = reactHookForm.useFieldArray({
         control: control,
         name: 'changeGroups'
       }),
-          fields = _k.fields,
-          insert = _k.insert,
-          remove = _k.remove,
-          move = _k.move;
+          fields = _o.fields,
+          insert = _o.insert,
+          remove = _o.remove,
+          move = _o.move;
 
-      var _l = useDragOrder(trigger, move, onFormBlur),
-          onChangeOrder = _l.onChangeOrder,
-          onStartDrag = _l.onStartDrag,
-          activeDraggingIndex = _l.activeDraggingIndex;
+      var _p = useDragOrder(trigger, move, onFormBlur),
+          onChangeOrder = _p.onChangeOrder,
+          onStartDrag = _p.onStartDrag,
+          activeDraggingIndex = _p.activeDraggingIndex;
 
       var onRemoverow = function onRemoverow(index) {
         confirmDialog({
@@ -4049,16 +4138,32 @@
         });
       };
 
+      var _q = __read(React__default["default"].useState(false), 2),
+          shouldValidate = _q[0],
+          setShouldValidate = _q[1];
+
       React__default["default"].useEffect(function () {
-        if (!isDisabled) {
+        var defaultValues = prepareTafValues(tafFromBackend.taf, undefined, !isDisabled && !tafFromBackend.taf.changeGroups); // set initial form values
+
+        reset(defaultValues); // set validate flag to validate after the values have been set
+
+        setShouldValidate(true);
+        return function () {
+          reset();
+        }; // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, []);
+      React__default["default"].useEffect(function () {
+        if (shouldValidate && !isDisabled) {
           // trigger validation on all changegroup validity times after initial load since they could be outside the new validity period
-          var validFields = fields.map(function (_field, index) {
+          var _a = tafFromBackend.taf.changeGroups,
+              changeGroups = _a === void 0 ? [] : _a;
+          var validFields = changeGroups.map(function (_field, index) {
             return "changeGroups[" + index + "].valid";
           });
           trigger(validFields);
         } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-      }, []);
+      }, [shouldValidate]);
       return /*#__PURE__*/React__default["default"].createElement("form", {
         "data-testid": "taf-form",
         onSubmit: handleSubmit(onSubmit),
@@ -4136,7 +4241,9 @@
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
       }, /*#__PURE__*/React__default["default"].createElement(IssuesButton, {
-        errors: errors
+        errors: errors,
+        isIssuesPaneOpen: isIssuesPaneOpen,
+        setIsIssuesPaneOpen: setIsIssuesPaneOpen
       }))), /*#__PURE__*/React__default["default"].createElement(TafFormButtons, {
         isFormDisabled: isDisabled,
         tafAction: tafAction,
@@ -4151,50 +4258,6 @@
       }), /*#__PURE__*/React__default["default"].createElement(DraftFieldHelper, null));
     };
 
-    /* *
-     * Licensed under the Apache License, Version 2.0 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
-     * */
-
-    var TafFormWrapper = function TafFormWrapper(_a) {
-      var tafFromBackend = _a.tafFromBackend,
-          mode = _a.mode,
-          _b = _a.TAC,
-          TAC = _b === void 0 ? '' : _b,
-          onFormAction = _a.onFormAction,
-          tafAction = _a.tafAction;
-      var taf = tafFromBackend.taf;
-      var isDisabled = mode === 'view';
-      var defaultValues = prepareTafValues(taf, undefined, !isDisabled && !taf.changeGroups);
-      var options = {
-        defaultValues: defaultValues,
-        mode: 'onTouched',
-        reValidateMode: 'onChange',
-        criteriaMode: 'all'
-      };
-      return /*#__PURE__*/React__default["default"].createElement(formFields.ReactHookFormProvider, {
-        options: options
-      }, /*#__PURE__*/React__default["default"].createElement(TafForm, {
-        isDisabled: isDisabled,
-        staticTAC: TAC,
-        onFormAction: onFormAction,
-        tafFromBackend: tafFromBackend,
-        tafAction: tafAction
-      }));
-    };
-
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -4381,14 +4444,25 @@
       };
     };
 
-    var EditIcon = function EditIcon(props) {
-      var theme = material.useTheme();
-      return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, __assign({}, props), /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("path", {
-        d: "m8.332 17.09-.005.001-2.652.604.956-2.542.001-.001.001-.001.857-.744 1.69 1.945-.848.738zm.71.815L20.932 7.577 17.823 4 5.933 14.329l-.01.008.005.005L4.173 19l4.857-1.09-.004-.02.019.02-.002-.005z",
-        fillRule: "evenodd",
-        fill: "" + theme.palette.geowebColors.buttons.tertiary["default"].color
-      })));
-    };
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+    var EditIcon = material.createSvgIcon( /*#__PURE__*/React__namespace.createElement("path", {
+      d: "m8.332 17.09-.005.001-2.652.604.956-2.542.001-.001.001-.001.857-.744 1.69 1.945-.848.738zm.71.815L20.932 7.577 17.823 4 5.933 14.329l-.01.008.005.005L4.173 19l4.857-1.09-.004-.02.019.02-.002-.005z"
+    }), 'Edit');
 
     var StatusIcon = function StatusIcon(_a) {
       var timeSlot = _a.timeSlot,
@@ -4399,45 +4473,64 @@
       }
 
       if (status === 'EXPIRED') {
-        return /*#__PURE__*/React__namespace.createElement(iconsMaterial.Schedule, {
+        return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+          title: "Expired",
+          placement: "right"
+        }, /*#__PURE__*/React__namespace.createElement(iconsMaterial.Schedule, {
           "data-testid": "status-expired",
           fontSize: "small",
           sx: {
             transform: 'scaleX(-1)',
             color: 'geowebColors.buttons.tertiary.disabled.color'
           }
-        });
+        }));
       }
 
       if (status === 'CANCELLED') {
-        return /*#__PURE__*/React__namespace.createElement(DoDisturbIcon__default["default"], {
+        return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+          title: "Cancelled",
+          placement: "right"
+        }, /*#__PURE__*/React__namespace.createElement(DoDisturbIcon__default["default"], {
           "data-testid": "status-cancelled",
           fontSize: "small",
           sx: {
             color: 'geowebColors.captions.captionError.rgba'
           }
-        });
+        }));
       }
 
       if (status === 'DRAFT' || status === 'DRAFT_CORRECTED' || status === 'DRAFT_AMENDED') {
-        return /*#__PURE__*/React__namespace.createElement(EditIcon, {
-          "data-testid": "status-draft"
-        });
+        return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+          title: "Draft",
+          placement: "right"
+        }, /*#__PURE__*/React__namespace.createElement(material.SvgIcon, {
+          component: EditIcon,
+          "data-testid": "status-draft",
+          sx: {
+            color: 'geowebColors.buttons.tertiary.default.color'
+          }
+        }));
       }
 
-      return timeSlot === 'ACTIVE' ? /*#__PURE__*/React__namespace.createElement(iconsMaterial.CheckCircle, {
+      return timeSlot === 'ACTIVE' ? /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+        title: "Active",
+        placement: "right"
+      }, /*#__PURE__*/React__namespace.createElement(iconsMaterial.CheckCircle, {
         "data-testid": "status-active",
         fontSize: "small",
         sx: {
           color: 'geowebColors.functional.success'
         }
-      }) : /*#__PURE__*/React__namespace.createElement(iconsMaterial.Schedule, {
+      })) : /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+        title: "Upcoming",
+        placement: "right"
+      }, /*#__PURE__*/React__namespace.createElement(iconsMaterial.Schedule, {
         "data-testid": "status-upcoming",
         fontSize: "small",
         sx: {
           color: 'geowebColors.functional.success'
         }
-      });
+      }));
     };
 
     /* *
@@ -4727,7 +4820,13 @@
       var timeSlot = _a.timeSlot,
           _b = _a.onChangeTimeSlot,
           onChangeTimeSlot = _b === void 0 ? function () {} : _b,
-          tafFromBackend = _a.tafFromBackend;
+          _c = _a.tafFromBackend,
+          tafFromBackend = _c === void 0 ? {
+        taf: {
+          baseTime: '2022-01-06T12:00:00Z',
+          location: 'EHAM'
+        }
+      } : _c;
 
       if (!tafFromBackend) {
         return null;
@@ -4735,9 +4834,9 @@
 
       var activeTab = timeSlot === 'UPCOMING' ? 0 : 1;
 
-      var _c = getBaseTime(tafFromBackend.taf.baseTime, tafFromBackend.taf.location),
-          currentBaseTime = _c.currentBaseTime,
-          nextBaseTime = _c.nextBaseTime;
+      var _d = getBaseTime(tafFromBackend.taf.baseTime, tafFromBackend.taf.location),
+          currentBaseTime = _d.currentBaseTime,
+          nextBaseTime = _d.nextBaseTime;
 
       var tabs = [{
         title: "Upcoming " + formatBaseTime(nextBaseTime),
@@ -4755,12 +4854,13 @@
         value: activeTab,
         onChange: onChangeTab,
         "aria-label": "timeslot-tabs",
+        "data-testid": "timeslot-tabs",
         variant: "fullWidth"
       }, tabs.map(function (tab, index) {
         return /*#__PURE__*/React__default["default"].createElement(material.Tab, __assign({
           key: tab.title,
           label: tab.title,
-          "data-testid": "tab-" + index,
+          "data-testid": "toptab-" + index,
           sx: {
             fontSize: 16
           }
@@ -4885,16 +4985,26 @@
           activeTafIndex = _a.activeTafIndex,
           index = _a.index,
           _b = _a.onPostTaf,
-          onPostTaf = _b === void 0 ? function () {} : _b;
+          onPostTaf = _b === void 0 ? function () {} : _b,
+          _c = _a.onFormDirty,
+          onFormDirty = _c === void 0 ? function () {
+        return null;
+      } : _c,
+          _d = _a.isIssuesPaneOpen,
+          isIssuesPaneOpen = _d === void 0 ? false : _d,
+          _e = _a.setIsIssuesPaneOpen,
+          setIsIssuesPaneOpen = _e === void 0 ? function () {
+        return null;
+      } : _e;
       var api$1 = api.useApiContext().api;
 
-      var _c = __read(React__default["default"].useState(false), 2),
-          isLoading = _c[0],
-          setLoading = _c[1];
+      var _f = __read(React__default["default"].useState(false), 2),
+          isLoading = _f[0],
+          setLoading = _f[1];
 
-      var _d = __read(React__default["default"].useState(null), 2),
-          error = _d[0],
-          setError = _d[1]; // removes cancelled error message
+      var _g = __read(React__default["default"].useState(null), 2),
+          error = _g[0],
+          setError = _g[1]; // removes cancelled error message
 
 
       React__default["default"].useEffect(function () {
@@ -4925,7 +5035,8 @@
                 _a.sent();
 
                 setLoading(false);
-                setError(null); // callback
+                setError(null);
+                onFormDirty(false); // callback
 
                 onPostTaf();
                 return [3
@@ -5071,42 +5182,86 @@
         title: error.title,
         info: error.message,
         dataTestId: "taf-error"
-      }), /*#__PURE__*/React__default["default"].createElement(TafFormWrapper, {
-        mode: getViewMode(tafFromBackend.taf.status),
+      }), /*#__PURE__*/React__default["default"].createElement(TafForm, {
+        isDisabled: getViewMode(tafFromBackend.taf.status) === 'view',
         tafFromBackend: tafFromBackend,
-        onFormAction: onTafAction
+        onFormAction: onTafAction,
+        onFormDirty: onFormDirty,
+        isIssuesPaneOpen: isIssuesPaneOpen,
+        setIsIssuesPaneOpen: setIsIssuesPaneOpen
       }));
     };
 
+    var IssuesPaneWrapper = function IssuesPaneWrapper(props) {
+      var errors = reactHookForm.useFormContext().formState.errors;
+      var errorList = filterDuplicateErrors(getErrors(errors));
+      return /*#__PURE__*/React__namespace.createElement(IssuesPane, __assign({
+        errorList: errorList
+      }, props));
+    };
+
     var TafLayout = function TafLayout(_a) {
       var _b = _a.tafList,
           tafList = _b === void 0 ? [] : _b,
           _c = _a.onPostTaf,
           onPostTaf = _c === void 0 ? function () {} : _c;
+      var confirmDialog = shared.useConfirmationDialog();
 
-      var _d = __read(React__default["default"].useState(sortTafTimeSlots(tafList)), 2),
-          _e = _d[0],
-          upcoming = _e.upcoming,
-          current = _e.current,
-          expired = _e.expired,
-          updateSortedTafs = _d[1];
-
-      var _f = __read(upcoming.slice(-1), 1),
-          lastUpcomingTaf = _f[0];
-
-      var _g = __read(React__default["default"].useState('UPCOMING'), 2),
-          timeSlot = _g[0],
-          setTimeSlot = _g[1];
-
-      var _h = __read(React__default["default"].useState(upcoming), 2),
-          locations = _h[0],
-          setLocations = _h[1];
+      var _d = useIssuesPane(),
+          isIssuesPaneOpen = _d.isIssuesPaneOpen,
+          onToggleIssuesPane = _d.onToggleIssuesPane,
+          onCloseIssuesPane = _d.onCloseIssuesPane,
+          startPosition = _d.startPosition;
+
+      var _e = __read(React__default["default"].useState(sortTafTimeSlots(tafList)), 2),
+          _f = _e[0],
+          upcoming = _f.upcoming,
+          current = _f.current,
+          expired = _f.expired,
+          updateSortedTafs = _e[1];
+
+      var _g = __read(current.slice(-1), 1),
+          lastCurrentTaf = _g[0];
+
+      var _h = __read(React__default["default"].useState('UPCOMING'), 2),
+          timeSlot = _h[0],
+          setTimeSlot = _h[1];
+
+      var _j = __read(React__default["default"].useState(upcoming), 2),
+          locations = _j[0],
+          setLocations = _j[1];
+
+      var _k = __read(React__default["default"].useState(0), 2),
+          activeTafIndex = _k[0],
+          setActiveTafIndex = _k[1];
+
+      var _l = __read(React__default["default"].useState(false), 2),
+          isFormDirty = _l[0],
+          setIsFormDirty = _l[1];
+
+      function onChangeTab(action, value) {
+        if (isFormDirty) {
+          confirmDialog({
+            title: 'Whoops',
+            description: 'Do you want to leave this open TAF without saving it? All changes will be lost.',
+            confirmLabel: 'Exit without saving'
+          }).then(function () {
+            action(value);
+          });
+        } else {
+          action(value);
+        }
+      }
 
-      var _j = __read(React__default["default"].useState(0), 2),
-          activeTafIndex = _j[0],
-          setActiveTafIndex = _j[1];
+      var onChangeLocationTab = function onChangeLocationTab(index) {
+        onChangeTab(setActiveTafIndex, index);
+      };
 
       var onChangeTimeSlot = function onChangeTimeSlot(newTimeSlot) {
+        onChangeTab(changeTimeSlot, newTimeSlot);
+      };
+
+      var changeTimeSlot = function changeTimeSlot(newTimeSlot) {
         setTimeSlot(newTimeSlot);
         setLocations(newTimeSlot === 'ACTIVE' ? current : upcoming);
         setActiveTafIndex(0);
@@ -5166,7 +5321,7 @@
         xs: 12,
         sm: 9
       }, /*#__PURE__*/React__default["default"].createElement(TopTabs, {
-        tafFromBackend: lastUpcomingTaf,
+        tafFromBackend: lastCurrentTaf,
         timeSlot: timeSlot,
         onChangeTimeSlot: onChangeTimeSlot
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
@@ -5190,7 +5345,7 @@
       }, /*#__PURE__*/React__default["default"].createElement(LocationTabs, {
         tafList: locations,
         activeIndex: activeTafIndex,
-        onChangeTab: setActiveTafIndex,
+        onChangeTab: onChangeLocationTab,
         timeSlot: timeSlot
       })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
@@ -5214,7 +5369,10 @@
           activeTafIndex: activeTafIndex,
           index: index,
           tafFromBackend: tafFromBackend,
-          onPostTaf: onPostTaf
+          onPostTaf: onPostTaf,
+          onFormDirty: setIsFormDirty,
+          isIssuesPaneOpen: isIssuesPaneOpen,
+          setIsIssuesPaneOpen: onToggleIssuesPane
         });
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
@@ -5231,7 +5389,39 @@
         currentTafs: current,
         expiredTafs: expired,
         activeTaf: activeTaf
-      })))))));
+      })))))), /*#__PURE__*/React__default["default"].createElement(IssuesPaneWrapper, {
+        handleClose: onCloseIssuesPane,
+        isOpen: isIssuesPaneOpen,
+        startPosition: startPosition
+      }));
+    };
+
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var TafWrapper = function TafWrapper(_a) {
+      var children = _a.children;
+      return /*#__PURE__*/React__namespace.createElement(shared.ConfirmationServiceProvider, null, /*#__PURE__*/React__namespace.createElement(formFields.ReactHookFormProvider, {
+        options: {
+          mode: 'onTouched',
+          reValidateMode: 'onChange',
+          criteriaMode: 'all'
+        }
+      }, children));
     };
 
     var TafModule = function TafModule() {
@@ -5319,10 +5509,10 @@
     };
 
     var Wrapper = function Wrapper() {
-      return /*#__PURE__*/React__namespace.createElement(shared.ConfirmationServiceProvider, null, /*#__PURE__*/React__namespace.createElement(TafModule, null));
+      return /*#__PURE__*/React__namespace.createElement(TafWrapper, null, /*#__PURE__*/React__namespace.createElement(TafModule, null));
     };
 
-    var createApi = function createApi(url, appUrl, auth, setAuth, authTokenUrl, authClientId) {
+    var createApi$1 = function createApi(url, appUrl, auth, setAuth, authTokenUrl, authClientId) {
       var axiosInstance = api.createApiInstance(url, appUrl, auth, setAuth, authTokenUrl, authClientId);
       return {
         // api data
@@ -5338,9 +5528,974 @@
       };
     };
 
-    exports.TafFormWrapper = TafFormWrapper;
+    var currentDate = moment__default["default"].utc().format('YYYY-MM-DD');
+    var tomorrowDate = moment__default["default"].utc().add(1, 'day').format('YYYY-MM-DD');
+    var airportPeriod = 6;
+    var airportValidity = 40;
+
+    var validDateRange = function validDateRange(refHour, period) {
+      var startHour = period * Math.floor(parseInt(refHour.format('HH'), 10) / period) % 24;
+      var start = refHour.set({
+        hour: startHour,
+        minute: 0,
+        second: 0
+      });
+      var end = start.clone().add(airportValidity, 'hours');
+      return [start.format('YYYY-MM-DDTHH:mm:ss'), end.format('YYYY-MM-DDTHH:mm:ss')];
+    };
+
+    var dateAdd = function dateAdd(refDateAsString, hours) {
+      return moment__default["default"].utc(refDateAsString).add(hours, 'hours').format('YYYY-MM-DDTHH:mm:ss');
+    };
+
+    var _a = __read(validDateRange(moment__default["default"].utc(), airportPeriod), 2),
+        currentValidDateStart = _a[0],
+        currentValidDateEnd = _a[1];
+
+    var _b = __read(validDateRange(moment__default["default"].utc().add(6, 'hours'), airportPeriod), 2),
+        upcomingValidDateStart = _b[0],
+        upcomingValidDateEnd = _b[1];
+
+    var _c = __read(validDateRange(moment__default["default"].utc().add(-6, 'hours'), airportPeriod), 2),
+        expiredValidDateStart = _c[0],
+        expiredValidDateEnd = _c[1];
+
+    var fakeTafList = [{
+      creationDate: upcomingValidDateStart,
+      canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+      taf: {
+        uuid: '5f9583fjdf0f337925',
+        baseTime: upcomingValidDateStart,
+        validDateStart: upcomingValidDateStart,
+        validDateEnd: upcomingValidDateEnd,
+        location: 'EHAM',
+        status: 'NEW',
+        type: 'NORMAL',
+        messageType: 'ORG',
+        baseForecast: {
+          valid: {
+            start: upcomingValidDateStart,
+            end: upcomingValidDateEnd
+          }
+        }
+      }
+    }, {
+      creationDate: upcomingValidDateStart,
+      canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+      taf: {
+        uuid: '5f9583fjd111137925',
+        baseTime: upcomingValidDateStart,
+        validDateStart: upcomingValidDateStart,
+        validDateEnd: upcomingValidDateEnd,
+        location: 'EHRD',
+        status: 'DRAFT',
+        type: 'NORMAL',
+        messageType: 'ORG',
+        baseForecast: {
+          valid: {
+            start: upcomingValidDateStart,
+            end: upcomingValidDateEnd
+          },
+          wind: {
+            direction: 180,
+            speed: 10,
+            unit: 'KT'
+          },
+          cavOK: true
+        }
+      }
+    }, {
+      creationDate: upcomingValidDateStart,
+      canbe: ['CANCELLED', 'AMENDED', 'DISCARDED'],
+      taf: {
+        uuid: '754905485',
+        baseTime: upcomingValidDateStart,
+        previousId: '5f9583fjdf45ff4330f337925',
+        validDateStart: upcomingValidDateStart,
+        validDateEnd: upcomingValidDateEnd,
+        previousValidDateStart: upcomingValidDateStart,
+        previousValidDateEnd: upcomingValidDateEnd,
+        location: 'EHLE',
+        status: 'DRAFT_AMENDED',
+        type: 'NORMAL',
+        messageType: 'AMD',
+        baseForecast: {
+          valid: {
+            start: upcomingValidDateStart,
+            end: upcomingValidDateEnd
+          },
+          visibility: {
+            range: 600,
+            unit: 'M'
+          },
+          wind: {
+            direction: 180,
+            speed: 10,
+            unit: 'KT'
+          },
+          weather: {
+            weather1: 'SN'
+          },
+          cloud: {
+            cloud1: {
+              coverage: 'BKN',
+              height: 35
+            }
+          }
+        },
+        changeGroups: [{
+          change: 'TEMPO',
+          probability: 'PROB30',
+          valid: {
+            start: dateAdd(upcomingValidDateStart, 3),
+            end: dateAdd(upcomingValidDateStart, 4)
+          },
+          visibility: {
+            range: 100,
+            unit: 'M'
+          },
+          cloud: {
+            cloud1: {
+              verticalVisibility: 5
+            }
+          }
+        }]
+      }
+    }, {
+      creationDate: upcomingValidDateStart,
+      canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+      taf: {
+        uuid: '43545345345',
+        issueDate: upcomingValidDateStart,
+        baseTime: currentDate + "T18:00:00Z",
+        validDateStart: currentDate + "T18:00:00Z",
+        validDateEnd: upcomingValidDateEnd,
+        previousId: 'jkdjkdfjkgdf',
+        previousValidDateStart: upcomingValidDateStart,
+        previousValidDateEnd: upcomingValidDateEnd,
+        location: 'EHLE',
+        status: 'CORRECTED',
+        type: 'NORMAL',
+        messageType: 'COR',
+        baseForecast: {
+          valid: {
+            start: upcomingValidDateStart,
+            end: upcomingValidDateEnd
+          },
+          wind: {
+            direction: 350,
+            speed: 46,
+            gust: 67,
+            unit: 'KT'
+          },
+          cavOK: true
+        },
+        changeGroups: [{
+          change: 'BECMG',
+          valid: {
+            start: dateAdd(upcomingValidDateStart, 1),
+            end: dateAdd(upcomingValidDateStart, 2)
+          },
+          visibility: {
+            range: 1000,
+            unit: 'M'
+          },
+          weather: {
+            weather1: 'MIFG'
+          },
+          cloud: {
+            cloud1: 'NSC'
+          }
+        }, {
+          change: 'FM',
+          valid: {
+            start: dateAdd(upcomingValidDateStart, 2)
+          },
+          visibility: {
+            range: 6000,
+            unit: 'M'
+          },
+          weather: {
+            weather1: '+SHRA'
+          },
+          cloud: {
+            cloud1: {
+              coverage: 'BKN',
+              height: 40
+            },
+            cloud2: {
+              coverage: 'OVC',
+              height: 60,
+              type: 'CB'
+            }
+          }
+        }]
+      }
+    }, {
+      creationDate: upcomingValidDateStart,
+      canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+      taf: {
+        uuid: '5f9583fjdf45ff4330f337925',
+        issueDate: upcomingValidDateStart,
+        baseTime: upcomingValidDateStart,
+        validDateStart: upcomingValidDateStart,
+        validDateEnd: upcomingValidDateEnd,
+        location: 'EHGG',
+        status: 'PUBLISHED',
+        type: 'NORMAL',
+        messageType: 'ORG',
+        baseForecast: {
+          valid: {
+            start: upcomingValidDateEnd,
+            end: upcomingValidDateEnd
+          },
+          visibility: {
+            range: 600,
+            unit: 'M'
+          },
+          wind: {
+            direction: 180,
+            speed: 10,
+            unit: 'KT'
+          },
+          weather: {
+            weather1: 'SN'
+          },
+          cloud: {
+            cloud1: {
+              coverage: 'BKN',
+              height: 35
+            }
+          }
+        },
+        changeGroups: [{
+          change: 'TEMPO',
+          probability: 'PROB30',
+          valid: {
+            start: dateAdd(upcomingValidDateStart, 1),
+            end: dateAdd(upcomingValidDateStart, 2)
+          },
+          visibility: {
+            range: 200,
+            unit: 'M'
+          },
+          cloud: {
+            cloud1: {
+              verticalVisibility: 5
+            }
+          }
+        }]
+      }
+    }, {
+      creationDate: upcomingValidDateStart,
+      canbe: ['AMENDED'],
+      taf: {
+        uuid: '5464565464',
+        previousId: '5445fghrfg3546456',
+        issueDate: upcomingValidDateStart,
+        baseTime: upcomingValidDateStart,
+        validDateStart: upcomingValidDateStart,
+        validDateEnd: upcomingValidDateEnd,
+        previousValidDateStart: upcomingValidDateStart,
+        previousValidDateEnd: upcomingValidDateEnd,
+        location: 'EHBK',
+        status: 'CANCELLED',
+        type: 'NORMAL',
+        messageType: 'CNL',
+        baseForecast: {
+          valid: {
+            start: upcomingValidDateStart,
+            end: upcomingValidDateEnd
+          },
+          visibility: {
+            range: 600,
+            unit: 'M'
+          },
+          wind: {
+            direction: 180,
+            speed: 10,
+            unit: 'KT'
+          },
+          weather: {
+            weather1: 'SN'
+          },
+          cloud: {
+            cloud1: {
+              coverage: 'BKN',
+              height: 35
+            }
+          }
+        }
+      }
+    }, {
+      creationDate: upcomingValidDateStart,
+      canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+      taf: {
+        uuid: 'gh56734fghfgh',
+        previousId: '8574jnf93475',
+        issueDate: currentDate + "T16:16:00Z",
+        baseTime: upcomingValidDateStart,
+        validDateStart: upcomingValidDateStart,
+        validDateEnd: upcomingValidDateEnd,
+        previousValidDateStart: upcomingValidDateStart,
+        previousValidDateEnd: upcomingValidDateEnd,
+        location: 'TNCB',
+        status: 'AMENDED',
+        type: 'NORMAL',
+        messageType: 'AMD',
+        baseForecast: {
+          valid: {
+            start: currentDate + "T16:12:00Z",
+            end: upcomingValidDateEnd
+          },
+          visibility: {
+            range: 600,
+            unit: 'M'
+          },
+          wind: {
+            direction: 180,
+            speed: 10,
+            unit: 'KT'
+          },
+          weather: {
+            weather1: 'SN'
+          },
+          cloud: {
+            cloud1: {
+              coverage: 'BKN',
+              height: 35
+            }
+          }
+        }
+      }
+    }, {
+      creationDate: currentValidDateStart,
+      canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+      taf: {
+        uuid: 'giskdj09845872039',
+        issueDate: currentValidDateStart,
+        baseTime: currentValidDateStart,
+        validDateStart: currentValidDateStart,
+        validDateEnd: currentValidDateEnd,
+        location: 'EHAM',
+        status: 'PUBLISHED',
+        type: 'NORMAL',
+        messageType: 'ORG',
+        baseForecast: {
+          valid: {
+            start: currentValidDateStart,
+            end: currentValidDateEnd
+          },
+          visibility: {
+            range: 500,
+            unit: 'M'
+          },
+          wind: {
+            direction: 200,
+            speed: 20,
+            gust: 35,
+            unit: 'KT'
+          },
+          weather: {
+            weather1: 'SN'
+          },
+          cloud: {
+            cloud1: {
+              coverage: 'BKN',
+              height: 40
+            }
+          }
+        }
+      }
+    }, {
+      creationDate: currentValidDateStart,
+      canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+      taf: {
+        uuid: 'ghskdj09845872039',
+        baseTime: currentValidDateStart,
+        validDateStart: currentValidDateStart,
+        validDateEnd: currentValidDateEnd,
+        location: 'EHRD',
+        status: 'NEW',
+        type: 'NORMAL',
+        messageType: 'ORG',
+        baseForecast: {
+          valid: {
+            start: currentValidDateStart,
+            end: currentValidDateEnd
+          }
+        }
+      }
+    }, {
+      creationDate: currentValidDateStart,
+      canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+      taf: {
+        uuid: 'ghskdj09845872040',
+        issueDate: currentValidDateStart,
+        baseTime: currentValidDateStart,
+        validDateStart: currentValidDateStart,
+        validDateEnd: currentValidDateEnd,
+        location: 'EHLE',
+        status: 'NEW',
+        type: 'NORMAL',
+        messageType: 'ORG',
+        baseForecast: {
+          valid: {
+            start: currentValidDateStart,
+            end: currentValidDateEnd
+          }
+        }
+      }
+    }, {
+      creationDate: currentDate + "T06:00:00Z",
+      canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+      taf: {
+        uuid: 'ghskdj09845872041',
+        issueDate: currentValidDateStart,
+        baseTime: currentValidDateStart,
+        validDateStart: currentValidDateStart,
+        validDateEnd: currentValidDateEnd,
+        location: 'EHGG',
+        status: 'NEW',
+        type: 'NORMAL',
+        messageType: 'ORG',
+        baseForecast: {
+          valid: {
+            start: currentValidDateStart,
+            end: currentValidDateEnd
+          }
+        }
+      }
+    }, {
+      creationDate: currentDate + "T06:00:00Z",
+      canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+      taf: {
+        uuid: 'ghskdj09845872042',
+        issueDate: currentValidDateStart,
+        baseTime: currentValidDateStart,
+        validDateStart: currentValidDateStart,
+        validDateEnd: currentValidDateEnd,
+        location: 'EHBK',
+        status: 'NEW',
+        type: 'NORMAL',
+        messageType: 'ORG',
+        baseForecast: {
+          valid: {
+            start: currentValidDateStart,
+            end: currentValidDateEnd
+          }
+        }
+      }
+    }, {
+      creationDate: currentDate + "T06:00:00Z",
+      canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+      taf: {
+        uuid: 'ghskdj09845872043',
+        issueDate: currentValidDateStart,
+        baseTime: currentValidDateStart,
+        validDateStart: currentValidDateStart,
+        validDateEnd: currentValidDateEnd,
+        location: 'TNCB',
+        status: 'NEW',
+        type: 'NORMAL',
+        messageType: 'ORG',
+        baseForecast: {
+          valid: {
+            start: currentValidDateStart,
+            end: currentValidDateEnd
+          }
+        }
+      }
+    }, {
+      creationDate: expiredValidDateStart,
+      canbe: [],
+      taf: {
+        uuid: 'sdkjhsdf90845890',
+        issueDate: expiredValidDateStart,
+        baseTime: expiredValidDateStart,
+        validDateStart: expiredValidDateStart,
+        validDateEnd: expiredValidDateEnd,
+        location: 'EHAM',
+        status: 'EXPIRED',
+        type: 'NORMAL',
+        messageType: 'ORG',
+        baseForecast: {
+          valid: {
+            start: expiredValidDateStart,
+            end: expiredValidDateEnd
+          },
+          cavOK: true,
+          wind: {
+            direction: 50,
+            speed: 5,
+            unit: 'KT'
+          }
+        },
+        changeGroups: [{
+          change: 'BECMG',
+          valid: {
+            start: dateAdd(expiredValidDateStart, 1),
+            end: dateAdd(expiredValidDateStart, 4)
+          },
+          visibility: {
+            range: 1000,
+            unit: 'M'
+          },
+          weather: {
+            weather1: 'MIFG'
+          }
+        }, {
+          change: 'FM',
+          valid: {
+            start: dateAdd(expiredValidDateStart, 5)
+          },
+          visibility: {
+            range: 6000,
+            unit: 'M'
+          },
+          weather: {
+            weather1: '+SHRA'
+          },
+          cloud: {
+            cloud1: {
+              coverage: 'BKN',
+              height: 40
+            },
+            cloud2: {
+              coverage: 'OVC',
+              height: 60,
+              type: 'CB'
+            }
+          }
+        }]
+      }
+    }];
+    var fakeNewTaf = {
+      creationDate: currentDate + "T12:00:00Z",
+      canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+      taf: {
+        type: 'NORMAL',
+        messageType: 'ORG',
+        status: 'NEW',
+        uuid: '5f9583fjdf0445332f337925',
+        baseTime: currentDate + "T12:00:00Z",
+        validDateStart: currentDate + "T12:00:00Z",
+        validDateEnd: tomorrowDate + "T18:00:00Z",
+        location: 'EHBK',
+        baseForecast: {
+          valid: {
+            start: currentDate + "T12:00:00Z",
+            end: tomorrowDate + "T18:00:00Z"
+          }
+        }
+      }
+    };
+    ({
+      creationDate: "2022-01-06T12:00:00Z",
+      canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+      taf: __assign(__assign({}, fakeNewTaf.taf), {
+        baseTime: "2022-01-06T12:00:00Z",
+        validDateStart: "2022-01-06T12:00:00Z",
+        validDateEnd: "2022-01-07T18:00:00Z",
+        baseForecast: {
+          valid: {
+            start: "2022-01-06T12:00:00Z",
+            end: "2022-01-07T18:00:00Z"
+          }
+        }
+      })
+    });
+    var fakePublishedTaf = {
+      creationDate: currentDate + "T12:00:00Z",
+      canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+      taf: {
+        uuid: 'slsdkjg-023895',
+        issueDate: currentDate + "T12:00:00Z",
+        baseTime: currentDate + "T12:00:00Z",
+        validDateStart: currentDate + "T12:00:00Z",
+        validDateEnd: tomorrowDate + "T18:00:00Z",
+        location: 'EHLE',
+        status: 'PUBLISHED',
+        type: 'NORMAL',
+        messageType: 'ORG',
+        baseForecast: {
+          valid: {
+            start: currentDate + "T12:00:00Z",
+            end: tomorrowDate + "T18:00:00Z"
+          },
+          wind: {
+            direction: 50,
+            speed: 5,
+            unit: 'KT'
+          },
+          cavOK: true
+        },
+        changeGroups: [{
+          change: 'FM',
+          valid: {
+            start: currentDate + "T12:00:00Z"
+          },
+          visibility: {
+            range: 6000,
+            unit: 'M'
+          },
+          weather: {
+            weather1: '+SHRA'
+          },
+          wind: {
+            direction: 10,
+            speed: 10,
+            unit: 'KT',
+            gust: 35
+          },
+          cloud: {
+            cloud1: {
+              coverage: 'BKN',
+              height: 40
+            },
+            cloud2: {
+              coverage: 'OVC',
+              height: 60,
+              type: 'CB'
+            }
+          }
+        }, {
+          change: 'BECMG',
+          valid: {
+            start: currentDate + "T23:00:00Z",
+            end: tomorrowDate + "T00:00:00Z"
+          },
+          wind: {
+            direction: 150,
+            speed: 5,
+            unit: 'KT'
+          },
+          visibility: {
+            range: 1000,
+            unit: 'M'
+          },
+          weather: {
+            weather1: 'MIFG'
+          }
+        }]
+      }
+    };
+    ({
+      creationDate: "2022-01-06T12:00:00Z",
+      canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+      taf: __assign(__assign({}, fakePublishedTaf.taf), {
+        location: 'EHGG',
+        baseTime: "2022-01-06T12:00:00Z",
+        issueDate: "2022-01-06T12:00:00Z",
+        validDateStart: "2022-01-06T12:00:00Z",
+        validDateEnd: "2022-01-07T18:00:00Z",
+        baseForecast: __assign(__assign({}, fakePublishedTaf.taf.baseForecast), {
+          valid: {
+            start: "2022-01-06T12:00:00Z",
+            end: "2022-01-07T18:00:00Z"
+          }
+        }),
+        changeGroups: [{
+          change: 'FM',
+          valid: {
+            start: "2022-01-06T12:00:00Z"
+          },
+          visibility: {
+            range: 6000,
+            unit: 'M'
+          },
+          weather: {
+            weather1: '+SHRA'
+          },
+          wind: {
+            direction: 10,
+            speed: 10,
+            unit: 'KT',
+            gust: 35
+          },
+          cloud: {
+            cloud1: {
+              coverage: 'BKN',
+              height: 40
+            },
+            cloud2: {
+              coverage: 'OVC',
+              height: 60,
+              type: 'CB'
+            }
+          }
+        }, {
+          change: 'BECMG',
+          valid: {
+            start: "2022-01-06T23:00:00Z",
+            end: "2022-01-07T00:00:00Z"
+          },
+          wind: {
+            direction: 150,
+            speed: 5,
+            unit: 'KT'
+          },
+          visibility: {
+            range: 1000,
+            unit: 'M'
+          },
+          weather: {
+            weather1: 'MIFG'
+          }
+        }]
+      })
+    });
+    var fakeDraftTaf = {
+      creationDate: currentDate + "T18:00:00Z",
+      canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+      taf: {
+        uuid: '5f9583fjdf0f337925',
+        baseTime: currentDate + "T18:00:00Z",
+        validDateStart: currentDate + "T18:00:00Z",
+        validDateEnd: tomorrowDate + "T23:59:00Z",
+        location: 'EHLE',
+        status: 'DRAFT',
+        type: 'NORMAL',
+        messageType: 'ORG',
+        baseForecast: {
+          valid: {
+            start: currentDate + "T18:00:00Z",
+            end: tomorrowDate + "T23:59:00Z"
+          },
+          wind: {
+            direction: 150,
+            speed: 5,
+            unit: 'KT'
+          },
+          visibility: {
+            range: 1000,
+            unit: 'M'
+          },
+          weather: {
+            weather1: 'BCFG'
+          },
+          cloud: {
+            cloud1: {
+              coverage: 'FEW',
+              height: 15
+            }
+          }
+        }
+      }
+    };
+    ({
+      creationDate: "2022-01-06T18:00:00Z",
+      canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+      taf: __assign(__assign({}, fakeDraftTaf.taf), {
+        baseTime: "2022-01-06T18:00:00Z",
+        validDateStart: "2022-01-06T18:00:00Z",
+        validDateEnd: "2022-01-07T23:59:00Z",
+        baseForecast: __assign(__assign({}, fakeDraftTaf.taf.baseForecast), {
+          valid: {
+            start: "2022-01-06T18:00:00Z",
+            end: "2022-01-07T23:59:00Z"
+          }
+        })
+      })
+    });
+    var fakeDraftAmendmentTaf = {
+      creationDate: currentDate + "T14:00:00Z",
+      canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+      taf: {
+        uuid: '954905487',
+        previousId: '5f9583fjdf45ff4330f337925',
+        issueDate: currentDate + "T14:00:00Z",
+        baseTime: currentDate + "T12:00:00Z",
+        validDateStart: currentDate + "T14:00:00Z",
+        validDateEnd: tomorrowDate + "T18:00:00Z",
+        previousValidDateStart: currentDate + "T12:00:00Z",
+        previousValidDateEnd: tomorrowDate + "T18:00:00Z",
+        location: 'EHAM',
+        status: 'DRAFT_AMENDED',
+        type: 'NORMAL',
+        messageType: 'AMD',
+        baseForecast: {
+          valid: {
+            start: currentDate + "T14:00:00Z",
+            end: tomorrowDate + "T18:00:00Z"
+          },
+          visibility: {
+            range: 600,
+            unit: 'M'
+          },
+          wind: {
+            direction: 180,
+            speed: 10,
+            unit: 'KT'
+          },
+          weather: {
+            weather1: 'SN'
+          },
+          cloud: {
+            cloud1: {
+              coverage: 'BKN',
+              height: 35
+            }
+          }
+        },
+        changeGroups: [{
+          change: 'TEMPO',
+          probability: 'PROB30',
+          valid: {
+            start: currentDate + "T15:00:00Z",
+            end: currentDate + "T16:00:00Z"
+          },
+          visibility: {
+            range: 100,
+            unit: 'M'
+          },
+          cloud: {
+            cloud1: {
+              verticalVisibility: 5
+            }
+          }
+        }]
+      }
+    };
+
+    ({
+      creationDate: "2022-01-06T14:00:00Z",
+      canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+      taf: __assign(__assign({}, fakeDraftAmendmentTaf.taf), {
+        location: 'EHRD',
+        issueDate: "2022-01-06T14:00:00Z",
+        baseTime: "2022-01-06T12:00:00Z",
+        validDateStart: "2022-01-06T14:00:00Z",
+        validDateEnd: "2022-01-07T18:00:00Z",
+        previousValidDateStart: "2022-01-06T12:00:00Z",
+        previousValidDateEnd: "2022-01-07T18:00:00Z",
+        baseForecast: __assign(__assign({}, fakeDraftAmendmentTaf.taf.baseForecast), {
+          valid: {
+            start: "2022-01-06T14:00:00Z",
+            end: "2022-01-07T18:00:00Z"
+          }
+        }),
+        changeGroups: []
+      })
+    });
+    var fakeAmendmentTaf = {
+      creationDate: currentDate + "T14:00:00Z",
+      canbe: ['CANCELLED', 'CORRECTED', 'AMENDED'],
+      taf: {
+        uuid: '754905486',
+        previousId: '5f9583fjdf45ff4330f337925',
+        issueDate: currentDate + "T14:00:00Z",
+        baseTime: currentDate + "T12:00:00Z",
+        validDateStart: currentDate + "T14:00:00Z",
+        validDateEnd: tomorrowDate + "T18:00:00Z",
+        previousValidDateStart: currentDate + "T12:00:00Z",
+        previousValidDateEnd: tomorrowDate + "T18:00:00Z",
+        location: 'EHAM',
+        status: 'AMENDED',
+        type: 'NORMAL',
+        messageType: 'AMD',
+        baseForecast: {
+          valid: {
+            start: currentDate + "T14:00:00Z",
+            end: tomorrowDate + "T18:00:00Z"
+          },
+          visibility: {
+            range: 600,
+            unit: 'M'
+          },
+          wind: {
+            direction: 180,
+            speed: 10,
+            unit: 'KT'
+          },
+          weather: {
+            weather1: 'SN'
+          },
+          cloud: {
+            cloud1: {
+              coverage: 'BKN',
+              height: 35
+            }
+          }
+        }
+      }
+    }; // Only use for display purposes in the list!
+
+    ({
+      creationDate: "2022-01-06T14:00:00Z",
+      canbe: ['CANCELLED', 'CORRECTED', 'AMENDED'],
+      taf: __assign(__assign({}, fakeAmendmentTaf.taf), {
+        uuid: '7549058980',
+        issueDate: "2022-01-06T14:00:00Z",
+        baseTime: "2022-01-06T12:00:00Z",
+        validDateStart: "2022-01-06T14:00:00Z",
+        validDateEnd: "2022-01-07T18:00:00Z",
+        previousValidDateStart: "2022-01-06T12:00:00Z",
+        previousValidDateEnd: "2022-01-07T18:00:00Z",
+        baseForecast: __assign(__assign({}, fakeAmendmentTaf.taf.baseForecast), {
+          valid: {
+            start: "2022-01-06T14:00:00Z",
+            end: "2022-01-07T18:00:00Z"
+          }
+        })
+      })
+    });
+
+    var fakeTafTac = 'TAF EHAM 0812/0918 20020G35KT 0500 SN BKN040\nBECMG 0814/0816 0700 BKN001=';
+
+    var fakePromise = function fakePromise(withRandomError) {
+      return new Promise(function (resolve, reject) {
+        setTimeout(function () {
+          if (!withRandomError) return resolve();
+          var randomError = Math.floor(Math.random() * 4) + 1;
+          return randomError === 4 ? reject(new Error('something went wrong')) : resolve();
+        }, 300);
+      });
+    };
+
+    var fakeAxiosInstance = {
+      // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-module-boundary-types
+      get: function get(_url, _params) {
+        return fakePromise(false);
+      },
+      // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-module-boundary-types
+      post: function post(_url, _params) {
+        return fakePromise(false);
+      }
+    };
+    var createApi = function createApi() {
+      return {
+        getTafList: function getTafList() {
+          // eslint-disable-next-line no-console
+          console.log('Retrieving new TAF list');
+          return fakeAxiosInstance.get('/taflist').then(function () {
+            return {
+              data: __spreadArray([], __read(fakeTafList))
+            };
+          });
+        },
+        getTAC: function getTAC() {
+          // eslint-disable-next-line no-console
+          return fakeAxiosInstance.post('/taf2tac').then(function () {
+            return {
+              data: fakeTafTac
+            };
+          });
+        },
+        postTaf: function postTaf(_postTaf) {
+          // eslint-disable-next-line no-console
+          console.log("The new status of the taf will be " + _postTaf.changeStatusTo); // eslint-disable-next-line no-console
+
+          console.log('form has been posted with following values:', _postTaf.taf);
+          return fakeAxiosInstance.post('/taf', _postTaf);
+        }
+      };
+    };
+
+    exports.TafForm = TafForm;
     exports.TafModule = Wrapper;
-    exports.createApi = createApi;
+    exports.createApi = createApi$1;
+    exports.createFakeApi = createApi;
 
     Object.defineProperty(exports, '__esModule', { value: true });