@opengeoweb/taf 2.4.1 → 2.5.0

package/index.umd.js

@@ -2298,6 +2298,10 @@
     var TAC_MISSING_DATA = 'Missing data: no TAC can be generated';
     var TAC_NOT_AVAILABLE = 'No TAC available';
     var TAC_RETRIEVING_DATA = 'Retrieving TAC';
+    var TAC_FAILED = 'Failed to retrieve TAC';
+    var tacHasError = function tacHasError(tac) {
+      return tac === TAC_MISSING_DATA || tac === TAC_NOT_AVAILABLE || tac === TAC_RETRIEVING_DATA || tac === TAC_FAILED;
+    };
     var useTACGenerator = function useTACGenerator(taf, requestTAC, standardTAC) {
       if (standardTAC === void 0) {
         standardTAC = '';
@@ -2308,8 +2312,7 @@
           setTAC = _a[1];
 
       var isMounted = shared.useIsMounted().isMounted;
-
-      var retrieveTAC = function retrieveTAC(tafToPost) {
+      var retrieveTAC = React__default["default"].useCallback(function (tafToPost) {
         if (shouldRetrieveTAC(tafToPost)) {
           requestTAC(tafToPost).then(function (result) {
             if (isMounted.current) {
@@ -2317,14 +2320,13 @@
             }
           })["catch"](function () {
             if (isMounted.current) {
-              setTAC('Failed to retrieve TAC');
+              setTAC(TAC_FAILED);
             }
           });
         } else {
           setTAC(TAC_MISSING_DATA);
         }
-      };
-
+      }, [isMounted, requestTAC]);
       React__default["default"].useEffect(function () {
         if (taf.status !== 'NEW' && !standardTAC) {
           retrieveTAC(taf);
@@ -2485,6 +2487,10 @@
         return 'AMD';
       }
 
+      if (tafAction === 'CANCEL') {
+        return 'CNL';
+      }
+
       return taf.messageType;
     }; // For corrections and amendment we need to add the previousValidStart and End for the TAC converter
 
@@ -2531,6 +2537,36 @@
         changeGroups: [emptyChangegroup]
       });
     };
+    var getIsFormDefaultDisabled = function getIsFormDefaultDisabled(status) {
+      return !(status === 'NEW' || status === 'DRAFT' || status === 'DRAFT_AMENDED' || status === 'DRAFT_CORRECTED');
+    };
+    var fromStatusToAction = function fromStatusToAction(tafStatus) {
+      switch (tafStatus) {
+        case 'DRAFT':
+          return 'DRAFT';
+
+        case 'DRAFT_AMENDED':
+          return 'DRAFT_AMEND';
+
+        case 'DRAFT_CORRECTED':
+          return 'DRAFT_CORRECT';
+
+        case 'PUBLISHED':
+          return 'PUBLISH';
+
+        case 'AMENDED':
+          return 'AMEND';
+
+        case 'CORRECTED':
+          return 'CORRECT';
+
+        case 'CANCELLED':
+          return 'CANCEL';
+
+        default:
+          return 'NEW';
+      }
+    };
 
     var textFieldStyle = function textFieldStyle(theme) {
       return {
@@ -3309,6 +3345,36 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
+    var tafActionToDraftAction = function tafActionToDraftAction(tafAction) {
+      switch (tafAction) {
+        case 'AMEND':
+        case 'DRAFT_AMEND':
+          return 'DRAFT_AMEND';
+
+        case 'CORRECT':
+        case 'DRAFT_CORRECT':
+          return 'DRAFT_CORRECT';
+
+        default:
+          return 'DRAFT';
+      }
+    };
+
+    var tafActionToPublishAction = function tafActionToPublishAction(tafAction) {
+      switch (tafAction) {
+        case 'AMEND':
+        case 'DRAFT_AMEND':
+          return 'AMEND';
+
+        case 'CORRECT':
+        case 'DRAFT_CORRECT':
+          return 'CORRECT';
+
+        default:
+          return 'PUBLISH';
+      }
+    };
+
     var buttonsStyle = {
       button: {
         minWidth: {
@@ -3338,7 +3404,7 @@
           return onTafViewModeButtonPress('CANCEL');
         }
       }, "Cancel"), canBe.includes('CORRECTED') && /*#__PURE__*/React__default["default"].createElement(material.Button, {
-        "data-testid": "correctaf",
+        "data-testid": "correcttaf",
         variant: "tertiary",
         onClick: function onClick() {
           return onTafViewModeButtonPress('CORRECT');
@@ -3392,21 +3458,7 @@
           if action DRAFT_AMEND - new status will be DRAFT_AMENDED
           if action DRAFT_CORRECT - new status will be DRAFT_CORRECTED
           */
-          switch (tafAction) {
-            case 'AMEND':
-            case 'DRAFT_AMEND':
-              onTafEditModeButtonPress('DRAFT_AMEND');
-              break;
-
-            case 'CORRECT':
-            case 'DRAFT_CORRECT':
-              onTafEditModeButtonPress('DRAFT_CORRECT');
-              break;
-
-            default:
-              onTafEditModeButtonPress('DRAFT');
-              break;
-          }
+          onTafEditModeButtonPress(tafActionToDraftAction(tafAction));
         }
       }, "Save"), /*#__PURE__*/React__default["default"].createElement(material.Button, {
         "data-testid": "publishtaf",
@@ -3419,21 +3471,7 @@
           if action DRAFT_AMEND - new status will be AMENDED
           if action DRAFT_CORRECT - new status will be CORRECTED
           */
-          switch (tafAction) {
-            case 'AMEND':
-            case 'DRAFT_AMEND':
-              onTafEditModeButtonPress('AMEND');
-              break;
-
-            case 'CORRECT':
-            case 'DRAFT_CORRECT':
-              onTafEditModeButtonPress('CORRECT');
-              break;
-
-            default:
-              onTafEditModeButtonPress('PUBLISH');
-              break;
-          }
+          onTafEditModeButtonPress(tafActionToPublishAction(tafAction));
         }
       }, "Publish"))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
@@ -3813,71 +3851,85 @@
       }))), rootElement);
     };
 
-    var fromStatusToAction = function fromStatusToAction(tafStatus) {
-      switch (tafStatus) {
-        case 'DRAFT':
-          return 'DRAFT';
-
-        case 'DRAFT_AMENDED':
-          return 'DRAFT_AMEND';
-
-        case 'DRAFT_CORRECTED':
-          return 'DRAFT_CORRECT';
-
-        case 'PUBLISHED':
-          return 'PUBLISH';
-
-        case 'AMENDED':
-          return 'AMEND';
+    var TafModuleContext = /*#__PURE__*/React__namespace.createContext({
+      onValidateForm: null,
+      registerValidateForm: null,
+      tafAction: null,
+      setTafAction: null
+    });
+    var useTafModuleContext = function useTafModuleContext() {
+      return React__namespace.useContext(TafModuleContext);
+    };
+    var useTafModuleState = function useTafModuleState() {
+      var _a = __read(React__namespace.useState(function () {
+        return new Promise(function () {
+          return true;
+        });
+      }), 2),
+          onValidateForm = _a[0],
+          registerValidateForm = _a[1];
 
-        case 'CORRECTED':
-          return 'CORRECT';
+      var _b = __read(React__namespace.useState(), 2),
+          tafAction = _b[0],
+          setTafAction = _b[1];
 
-        case 'CANCELLED':
-          return 'CANCEL';
-
-        default:
-          return 'NEW';
-      }
-    }; // prevents default functionality
+      var onRegisterValidateForm = function onRegisterValidateForm(promiseToRegister) {
+        registerValidateForm(function () {
+          return promiseToRegister;
+        });
+      };
 
+      return {
+        onValidateForm: onValidateForm,
+        registerValidateForm: onRegisterValidateForm,
+        tafAction: tafAction,
+        setTafAction: setTafAction
+      };
+    };
+    var TafModuleProvider = function TafModuleProvider(_a) {
+      var children = _a.children;
+      var contextState = useTafModuleState();
+      return /*#__PURE__*/React__namespace.createElement(TafModuleContext.Provider, {
+        value: contextState
+      }, children);
+    };
 
     var noop = function noop() {};
 
     var TafForm = function TafForm(_a) {
-      var _b = _a.isDisabled,
-          isDefaultDisabled = _b === void 0 ? false : _b,
-          tafFromBackend = _a.tafFromBackend,
-          _c = _a.onFormAction,
-          onFormAction = _c === void 0 ? function () {
+      var tafFromBackend = _a.tafFromBackend,
+          _b = _a.onFormAction,
+          onFormAction = _b === void 0 ? function () {
+        return null;
+      } : _b,
+          _c = _a.onFormDirty,
+          onFormDirty = _c === void 0 ? function () {
         return null;
       } : _c,
-          _d = _a.onFormDirty,
-          onFormDirty = _d === void 0 ? function () {
+          _d = _a.isIssuesPaneOpen,
+          isIssuesPaneOpen = _d === void 0 ? false : _d,
+          _e = _a.setIsIssuesPaneOpen,
+          setIsIssuesPaneOpen = _e === void 0 ? function () {
         return null;
-      } : _d,
-          _e = _a.isIssuesPaneOpen,
-          isIssuesPaneOpen = _e === void 0 ? false : _e,
-          _f = _a.setIsIssuesPaneOpen,
-          setIsIssuesPaneOpen = _f === void 0 ? function () {
+      } : _e,
+          _f = _a.isDisabled,
+          isDisabled = _f === void 0 ? false : _f,
+          _g = _a.setIsDisabled,
+          setIsDisabled = _g === void 0 ? function () {
         return null;
-      } : _f;
+      } : _g;
       var originalTaf = tafFromBackend.taf;
-      var defaultTafAction = fromStatusToAction(originalTaf.status);
-
-      var _g = __read(React__default["default"].useState(defaultTafAction), 2),
-          tafAction = _g[0],
-          setTafAction = _g[1];
-
-      var _h = __read(React__default["default"].useState(isDefaultDisabled), 2),
-          isDisabled = _h[0],
-          setIsDisabled = _h[1];
-
+      var isDefaultDisabled = getIsFormDefaultDisabled(tafFromBackend.taf.status);
       var confirmDialog = shared.useConfirmationDialog();
 
-      var _j = shared.useDraftFormHelpers(),
-          toggleIsDraft = _j.toggleIsDraft,
-          DraftFieldHelper = _j.DraftFieldHelper;
+      var _h = shared.useDraftFormHelpers(),
+          toggleIsDraft = _h.toggleIsDraft,
+          DraftFieldHelper = _h.DraftFieldHelper;
+
+      var _j = useTafModuleContext(),
+          registerValidateForm = _j.registerValidateForm,
+          tafAction = _j.tafAction,
+          setTafAction = _j.setTafAction;
 
       var api$1 = api.useApiContext().api;
       var isMounted = shared.useIsMounted().isMounted;
@@ -3972,6 +4024,7 @@
             toggleIsDraft(true);
             handleSubmit(function (data) {
               onFormAction(action, convertTafValuesToObject(data));
+              reset(getValues());
             })();
             break;
 
@@ -4035,7 +4088,7 @@
         switch (action) {
           case 'CANCEL':
             showConfirmDialog(action).then(function () {
-              onFormAction(action, tafFromBackend.taf);
+              onFormAction(action, convertTafValuesToObject(prepareTafValues(tafFromBackend.taf, action)));
             });
             break;
 
@@ -4143,13 +4196,33 @@
           setShouldValidate = _q[1];
 
       React__default["default"].useEffect(function () {
-        var defaultValues = prepareTafValues(tafFromBackend.taf, undefined, !isDisabled && !tafFromBackend.taf.changeGroups); // set initial form values
+        setIsDisabled(isDefaultDisabled);
+        var defaultValues = prepareTafValues(tafFromBackend.taf, undefined, !isDefaultDisabled && !tafFromBackend.taf.changeGroups); // set initial form values
 
         reset(defaultValues); // set validate flag to validate after the values have been set
 
-        setShouldValidate(true);
+        setShouldValidate(true); // register validate method to use in parent components
+
+        var onValidateFormPromise = function onValidateFormPromise() {
+          return new Promise(function (resolve, reject) {
+            toggleIsDraft(true);
+            handleSubmit(function (formData) {
+              resolve(convertTafValuesToObject(formData));
+            })().then(function (formData) {
+              if (formData === undefined) {
+                reject();
+              }
+
+              resolve(formData);
+            });
+          });
+        };
+
+        registerValidateForm(onValidateFormPromise); // set default taf action
+
+        setTafAction(fromStatusToAction(originalTaf.status));
         return function () {
-          reset();
+          reset({});
         }; // eslint-disable-next-line react-hooks/exhaustive-deps
       }, []);
       React__default["default"].useEffect(function () {
@@ -4443,6 +4516,35 @@
         'aria-controls': "simple-tabpanel-" + index
       };
     };
+    var emptyBaseForecast = {
+      wind: '',
+      visibility: '',
+      weather: {
+        weather1: '',
+        weather2: '',
+        weather3: ''
+      },
+      cloud: {
+        cloud1: '',
+        cloud2: '',
+        cloud3: '',
+        cloud4: ''
+      }
+    };
+    var prepareTafExportValues = function prepareTafExportValues(tafToCopy, currentTaf) {
+      var _a;
+
+      var convertedCopy = prepareTafValues(tafToCopy, undefined, false);
+      var baseForecast = convertedCopy.baseForecast,
+          _b = convertedCopy.changeGroups,
+          changeGroups = _b === void 0 ? [] : _b;
+      return __assign(__assign({}, currentTaf), {
+        baseForecast: __assign(__assign(__assign({}, emptyBaseForecast), baseForecast), {
+          valid: (_a = currentTaf === null || currentTaf === void 0 ? void 0 : currentTaf.baseForecast) === null || _a === void 0 ? void 0 : _a.valid
+        }),
+        changeGroups: changeGroups
+      });
+    };
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -4533,6 +4635,38 @@
       }));
     };
 
+    /* *
+     * 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 ExportIcon = /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, null, /*#__PURE__*/React__default["default"].createElement("path", {
+      d: "M14.744 5.476a1.252 1.252 0 1 0 0 2.504h2.752v9.516H6.48v-1.753a1.251 1.251 0 1 0-2.504 0v3.004c0 .693.561 1.253 1.252 1.253h13.52C19.44 20 20 19.44 20 18.747V6.727c0-.69-.56-1.251-1.252-1.251zM9.133 2.385a1.252 1.252 0 0 0-1.77 0L1.773 7.974l5.54 5.54c.49.49 1.281.49 1.77 0l.022-.026a1.25 1.25 0 0 0-.021-1.745L6.568 9.225h1.371c.914 0 2.756.618 4.045 2.763 1.29 2.145.352 2.526.653 2.526.301 0 1.943-1.798.721-4.295-1.71-3.498-4.6-3.498-5.346-3.498H6.568l2.565-2.565a1.253 1.253 0 0 0 0-1.771z"
+    }));
+
+    var ExportButton = function ExportButton(_a) {
+      var onClick = _a.onClick,
+          isHidden = _a.isHidden;
+      return isHidden ? null : /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+        title: "Import TAC",
+        placement: "left"
+      }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(shared.ToolButton, {
+        onClick: onClick,
+        "data-testid": "export-tac-button"
+      }, ExportIcon)));
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -4553,18 +4687,40 @@
     var TacContainer = function TacContainer(_a) {
       var taf = _a.taf,
           _b = _a.isActive,
-          isActive = _b === void 0 ? false : _b;
+          isActive = _b === void 0 ? false : _b,
+          _c = _a.isFormDisabled,
+          isFormDisabled = _c === void 0 ? false : _c;
       var api$1 = api.useApiContext().api;
 
-      var _c = __read(useTACGenerator(taf, api$1.getTAC), 2),
-          TAC = _c[0],
-          retrieveTAC = _c[1];
+      var _d = __read(useTACGenerator(taf, api$1.getTAC), 2),
+          TAC = _d[0],
+          retrieveTAC = _d[1];
 
       var status = taf.status,
           location = taf.location,
           baseTime = taf.baseTime;
       var locationLabel = getLocationSetting(location).label;
       var timeSlot = getTafTimeSlot(baseTime, location, status);
+
+      var _e = reactHookForm.useFormContext(),
+          getValues = _e.getValues,
+          trigger = _e.trigger,
+          setValue = _e.setValue;
+
+      var handleExport = function handleExport() {
+        var currentTaf = getValues();
+        var newTaf = prepareTafExportValues(taf, currentTaf);
+        setValue('baseForecast', newTaf.baseForecast, {
+          shouldDirty: true
+        });
+        setValue('changeGroups', newTaf.changeGroups, {
+          shouldDirty: true
+        });
+        setTimeout(function () {
+          trigger(); // trigger all fields validation
+        }, 0);
+      };
+
       React__default["default"].useEffect(function () {
         if (isActive) {
           retrieveTAC(taf);
@@ -4580,14 +4736,22 @@
         sx: {
           display: 'flex',
           alignItems: 'center',
-          marginBottom: '2px'
+          justifyContent: 'space-between',
+          height: 24
         }
       }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
         sx: {
-          width: 20,
-          height: 20,
           display: 'flex',
-          marginRight: '6px'
+          alignItems: 'center'
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: {
+          width: 24,
+          height: 24,
+          display: 'flex',
+          marginRight: '2px',
+          alignItems: 'center',
+          justifyContent: 'center'
         }
       }, /*#__PURE__*/React__default["default"].createElement(StatusIcon, {
         timeSlot: timeSlot,
@@ -4614,7 +4778,10 @@
         },
         "data-testid": "tafLocationLabel",
         component: "span"
-      }, locationLabel))), /*#__PURE__*/React__default["default"].createElement(material.Box, {
+      }, locationLabel))), /*#__PURE__*/React__default["default"].createElement(ExportButton, {
+        onClick: handleExport,
+        isHidden: isFormDisabled || tacHasError(TAC)
+      })), /*#__PURE__*/React__default["default"].createElement(material.Box, {
         sx: {
           fontSize: '12px',
           letterSpacing: '0.4px',
@@ -4650,11 +4817,13 @@
           _e = _a.hideTitle,
           hideTitle = _e === void 0 ? false : _e,
           _f = _a.activeTaf,
-          activeTaf = _f === void 0 ? null : _f;
+          activeTaf = _f === void 0 ? null : _f,
+          _g = _a.isFormDisabled,
+          isFormDisabled = _g === void 0 ? false : _g;
 
-      var _g = __read(React__default["default"].useState(0), 2),
-          activeTab = _g[0],
-          setActiveTab = _g[1];
+      var _h = __read(React__default["default"].useState(0), 2),
+          activeTab = _h[0],
+          setActiveTab = _h[1];
 
       var scrollRef = React__default["default"].useRef(null);
       var tabs = [{
@@ -4746,7 +4915,8 @@
           return /*#__PURE__*/React__default["default"].createElement(TacContainer, {
             key: taf.uuid,
             taf: taf,
-            isActive: isActiveLocation(taf.location)
+            isActive: isActiveLocation(taf.location),
+            isFormDisabled: isFormDisabled
           });
         }));
       })));
@@ -4980,84 +5150,71 @@
       }
     };
 
-    var TafPanel = function TafPanel(_a) {
-      var tafFromBackend = _a.tafFromBackend,
-          activeTafIndex = _a.activeTafIndex,
-          index = _a.index,
-          _b = _a.onPostTaf,
-          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 parseErrorMessage = function parseErrorMessage(error, params) {
+      return params.changeStatusTo === 'CANCELLED' ? {
+        type: 'CANCELLED',
+        title: 'Cancelling this TAF failed, please try again'
+      } : {
+        type: 'SERVER',
+        title: 'An error has occurred while saving, please try again',
+        message: shared.getAxiosErrorMessage(error)
+      };
+    };
 
-      var _f = __read(React__default["default"].useState(false), 2),
-          isLoading = _f[0],
-          setLoading = _f[1];
+    var usePostTafRequest = function usePostTafRequest(request, errorParser) {
+      if (errorParser === void 0) {
+        errorParser = parseErrorMessage;
+      }
 
-      var _g = __read(React__default["default"].useState(null), 2),
-          error = _g[0],
-          setError = _g[1]; // removes cancelled error message
+      var isMounted = shared.useIsMounted().isMounted;
 
+      var _a = __read(React__default["default"].useState(false), 2),
+          isLoading = _a[0],
+          setLoading = _a[1];
 
-      React__default["default"].useEffect(function () {
-        var cancelErrorTimeout = error && error.type === 'CANCELLED' ? setTimeout(function () {
-          setError(null);
-        }, 10000) : null;
-        return function () {
-          if (cancelErrorTimeout !== null) {
-            clearTimeout(cancelErrorTimeout);
-          }
-        };
-      }, [error]);
+      var _b = __read(React__default["default"].useState(null), 2),
+          error = _b[0],
+          setError = _b[1];
 
-      var postTaf = function postTaf(data) {
+      var doRequest = function doRequest(params) {
         return __awaiter(void 0, void 0, void 0, function () {
-          var error_1, newError;
+          var error_1, newErrorr;
           return __generator(this, function (_a) {
             switch (_a.label) {
               case 0:
-                _a.trys.push([0, 2,, 3]);
-
                 setLoading(true);
+                _a.label = 1;
+
+              case 1:
+                _a.trys.push([1, 3,, 4]);
+
                 return [4
                 /*yield*/
-                , api$1.postTaf(data)];
+                , request(params)];
 
-              case 1:
+              case 2:
                 _a.sent();
 
+                if (!isMounted.current) return [2
+                /*return*/
+                ];
                 setLoading(false);
                 setError(null);
-                onFormDirty(false); // callback
-
-                onPostTaf();
                 return [3
                 /*break*/
-                , 3];
+                , 4];
 
-              case 2:
+              case 3:
                 error_1 = _a.sent();
-                newError = data.changeStatusTo === 'CANCELLED' ? {
-                  type: 'CANCELLED',
-                  title: 'Cancelling this TAF failed, please try again'
-                } : {
-                  type: 'SERVER',
-                  title: 'An error has occurred while saving, please try again',
-                  message: shared.getAxiosErrorMessage(error_1)
-                };
-                setError(newError);
+                if (!isMounted.current) return [2
+                /*return*/
+                ];
+                newErrorr = errorParser ? errorParser(error_1, params) : error_1;
                 setLoading(false);
-                throw error_1;
+                setError(newErrorr);
+                throw newErrorr;
 
-              case 3:
+              case 4:
                 return [2
                 /*return*/
                 ];
@@ -5066,9 +5223,41 @@
         });
       };
 
-      var getViewMode = function getViewMode(status) {
-        return status === 'NEW' || status === 'DRAFT' || status === 'DRAFT_AMENDED' || status === 'DRAFT_CORRECTED' ? 'edit' : 'view';
+      return {
+        isLoading: isLoading,
+        error: error,
+        setError: setError,
+        doRequest: doRequest
       };
+    };
+
+    var TafPanel = function TafPanel(_a) {
+      var tafFromBackend = _a.tafFromBackend,
+          activeTafIndex = _a.activeTafIndex,
+          index = _a.index,
+          _b = _a.isLoading,
+          isLoading = _b === void 0 ? false : _b,
+          _c = _a.postTaf,
+          postTaf = _c === void 0 ? function () {
+        return null;
+      } : _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,
+          _g = _a.isFormDisabled,
+          isFormDisabled = _g === void 0 ? false : _g,
+          _h = _a.setIsFormDisabled,
+          setIsFormDisabled = _h === void 0 ? function () {
+        return null;
+      } : _h,
+          error = _a.error;
 
       var onTafAction = function onTafAction(action, taf) {
         return __awaiter(void 0, void 0, void 0, function () {
@@ -5183,12 +5372,13 @@
         info: error.message,
         dataTestId: "taf-error"
       }), /*#__PURE__*/React__default["default"].createElement(TafForm, {
-        isDisabled: getViewMode(tafFromBackend.taf.status) === 'view',
         tafFromBackend: tafFromBackend,
         onFormAction: onTafAction,
         onFormDirty: onFormDirty,
         isIssuesPaneOpen: isIssuesPaneOpen,
-        setIsIssuesPaneOpen: setIsIssuesPaneOpen
+        setIsIssuesPaneOpen: setIsIssuesPaneOpen,
+        isDisabled: isFormDisabled,
+        setIsDisabled: setIsFormDisabled
       }));
     };
 
@@ -5200,11 +5390,18 @@
       }, props));
     };
 
+    var CONFIRM_DIALOG_OPTIONS = {
+      title: 'Whoops',
+      description: "It's not possible to autosave this TAF due to the presence of issue(s). Are you sure you want to close this TAF? Any changes made will be lost.",
+      confirmLabel: 'Exit without saving'
+    };
+
     var TafLayout = function TafLayout(_a) {
       var _b = _a.tafList,
           tafList = _b === void 0 ? [] : _b,
           _c = _a.onPostTaf,
           onPostTaf = _c === void 0 ? function () {} : _c;
+      var api$1 = api.useApiContext().api;
       var confirmDialog = shared.useConfirmationDialog();
 
       var _d = useIssuesPane(),
@@ -5213,44 +5410,128 @@
           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 _e = usePostTafRequest(api$1.postTaf),
+          isLoading = _e.isLoading,
+          postTafRequest = _e.doRequest,
+          error = _e.error,
+          setError = _e.setError;
+
+      var _f = useTafModuleContext(),
+          onValidateForm = _f.onValidateForm,
+          tafAction = _f.tafAction;
+
+      var _g = __read(React__default["default"].useState(sortTafTimeSlots(tafList)), 2),
+          _h = _g[0],
+          upcoming = _h.upcoming,
+          current = _h.current,
+          expired = _h.expired,
+          updateSortedTafs = _g[1];
 
-      var _g = __read(current.slice(-1), 1),
-          lastCurrentTaf = _g[0];
+      var _j = __read(current.slice(-1), 1),
+          lastCurrentTaf = _j[0];
 
-      var _h = __read(React__default["default"].useState('UPCOMING'), 2),
-          timeSlot = _h[0],
-          setTimeSlot = _h[1];
+      var _k = __read(React__default["default"].useState('UPCOMING'), 2),
+          timeSlot = _k[0],
+          setTimeSlot = _k[1];
 
-      var _j = __read(React__default["default"].useState(upcoming), 2),
-          locations = _j[0],
-          setLocations = _j[1];
+      var _l = __read(React__default["default"].useState(upcoming), 2),
+          locations = _l[0],
+          setLocations = _l[1];
 
-      var _k = __read(React__default["default"].useState(0), 2),
-          activeTafIndex = _k[0],
-          setActiveTafIndex = _k[1];
+      var _m = __read(React__default["default"].useState(0), 2),
+          activeTafIndex = _m[0],
+          setActiveTafIndex = _m[1];
 
-      var _l = __read(React__default["default"].useState(false), 2),
-          isFormDirty = _l[0],
-          setIsFormDirty = _l[1];
+      var _o = __read(React__default["default"].useState(false), 2),
+          isFormDirty = _o[0],
+          setIsFormDirty = _o[1];
+
+      var _p = __read(React__default["default"].useState(false), 2),
+          isFormDisabled = _p[0],
+          setIsFormDisabled = _p[1];
+
+      var postTaf = function postTaf(data) {
+        return __awaiter(void 0, void 0, void 0, function () {
+          return __generator(this, function (_a) {
+            switch (_a.label) {
+              case 0:
+                return [4
+                /*yield*/
+                , postTafRequest(data)];
+
+              case 1:
+                _a.sent(); // callback
+
+
+                onPostTaf();
+                return [2
+                /*return*/
+                ];
+            }
+          });
+        });
+      };
 
       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);
+        return __awaiter(this, void 0, void 0, function () {
+          var taf;
+          return __generator(this, function (_a) {
+            switch (_a.label) {
+              case 0:
+                if (!isFormDirty) return [3
+                /*break*/
+                , 6];
+                _a.label = 1;
+
+              case 1:
+                _a.trys.push([1, 4,, 5]);
+
+                return [4
+                /*yield*/
+                , onValidateForm()];
+
+              case 2:
+                taf = _a.sent();
+                return [4
+                /*yield*/
+                , postTaf({
+                  taf: taf,
+                  changeStatusTo: fromActionToStatus(tafActionToDraftAction(tafAction))
+                })];
+
+              case 3:
+                _a.sent();
+
+                action(value);
+                return [3
+                /*break*/
+                , 5];
+
+              case 4:
+                _a.sent();
+                confirmDialog(CONFIRM_DIALOG_OPTIONS).then(function () {
+                  action(value);
+                });
+                return [3
+                /*break*/
+                , 5];
+
+              case 5:
+                return [3
+                /*break*/
+                , 7];
+
+              case 6:
+                action(value);
+                _a.label = 7;
+
+              case 7:
+                return [2
+                /*return*/
+                ];
+            }
           });
-        } else {
-          action(value);
-        }
+        });
       }
 
       var onChangeLocationTab = function onChangeLocationTab(index) {
@@ -5279,6 +5560,16 @@
         var newIndex = newActiveIndex !== -1 ? newActiveIndex : activeTafIndex;
         setActiveTafIndex(newIndex); // eslint-disable-next-line react-hooks/exhaustive-deps
       }, [tafList, setLocations]);
+      React__default["default"].useEffect(function () {
+        var cancelErrorTimeout = error && error.type === 'CANCELLED' ? setTimeout(function () {
+          setError(null);
+        }, 10000) : null;
+        return function () {
+          if (cancelErrorTimeout !== null) {
+            clearTimeout(cancelErrorTimeout);
+          }
+        };
+      }, [error, setError]);
 
       if (!tafList) {
         return null;
@@ -5369,10 +5660,14 @@
           activeTafIndex: activeTafIndex,
           index: index,
           tafFromBackend: tafFromBackend,
-          onPostTaf: onPostTaf,
           onFormDirty: setIsFormDirty,
           isIssuesPaneOpen: isIssuesPaneOpen,
-          setIsIssuesPaneOpen: onToggleIssuesPane
+          setIsIssuesPaneOpen: onToggleIssuesPane,
+          isFormDisabled: isFormDisabled,
+          setIsFormDisabled: setIsFormDisabled,
+          postTaf: postTaf,
+          isLoading: isLoading,
+          error: error
         });
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
@@ -5388,7 +5683,8 @@
         upcomingTafs: upcoming,
         currentTafs: current,
         expiredTafs: expired,
-        activeTaf: activeTaf
+        activeTaf: activeTaf,
+        isFormDisabled: isFormDisabled
       })))))), /*#__PURE__*/React__default["default"].createElement(IssuesPaneWrapper, {
         handleClose: onCloseIssuesPane,
         isOpen: isIssuesPaneOpen,
@@ -5415,13 +5711,13 @@
 
     var TafWrapper = function TafWrapper(_a) {
       var children = _a.children;
-      return /*#__PURE__*/React__namespace.createElement(shared.ConfirmationServiceProvider, null, /*#__PURE__*/React__namespace.createElement(formFields.ReactHookFormProvider, {
+      return /*#__PURE__*/React__namespace.createElement(TafModuleProvider, null, /*#__PURE__*/React__namespace.createElement(shared.ConfirmationServiceProvider, null, /*#__PURE__*/React__namespace.createElement(formFields.ReactHookFormProvider, {
         options: {
           mode: 'onTouched',
           reValidateMode: 'onChange',
           criteriaMode: 'all'
         }
-      }, children));
+      }, children)));
     };
 
     var TafModule = function TafModule() {
@@ -6163,7 +6459,7 @@
           change: 'BECMG',
           valid: {
             start: currentDate + "T23:00:00Z",
-            end: tomorrowDate + "T00:00:00Z"
+            end: tomorrowDate + "T01:00:00Z"
           },
           wind: {
             direction: 150,
@@ -6419,7 +6715,7 @@
           }
         }
       }
-    }; // Only use for display purposes in the list!
+    };
 
     ({
       creationDate: "2022-01-06T14:00:00Z",