@opengeoweb/taf 2.14.0 → 2.15.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    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/shared'), require('lodash'), require('moment'), require('@opengeoweb/theme'), require('@mui/styles/makeStyles'), require('react-dom'), require('@opengeoweb/api'), require('@mui/material/LinearProgress'), require('@mui/material/Box')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', 'react-hook-form', 'react-sortablejs', '@opengeoweb/form-fields', '@opengeoweb/shared', 'lodash', 'moment', '@opengeoweb/theme', '@mui/styles/makeStyles', 'react-dom', '@opengeoweb/api', '@mui/material/LinearProgress', '@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.shared, global.lodash, global.moment, global.theme, global.makeStyles, global.ReactDOM, global.api, global.LinearProgress, global.Box));
-})(this, (function (exports, React, material, reactHookForm, reactSortablejs, formFields, shared, lodash, moment, theme, makeStyles, ReactDOM, api, LinearProgress, Box) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('react-hook-form'), require('react-sortablejs'), require('lodash'), require('@opengeoweb/authentication'), require('@opengeoweb/form-fields'), require('@opengeoweb/shared'), require('moment'), require('@opengeoweb/theme'), require('@mui/styles/makeStyles'), require('react-dom'), require('@opengeoweb/api'), require('@mui/material/LinearProgress'), require('@mui/material/Box')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', 'react-hook-form', 'react-sortablejs', 'lodash', '@opengeoweb/authentication', '@opengeoweb/form-fields', '@opengeoweb/shared', 'moment', '@opengeoweb/theme', '@mui/styles/makeStyles', 'react-dom', '@opengeoweb/api', '@mui/material/LinearProgress', '@mui/material/Box'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Taf = {}, global.React, global.material, global.reactHookForm, global.reactSortablejs, global.lodash, global.authentication, global.formFields, global.shared, global.moment, global.theme, global.makeStyles, global.ReactDOM, global.api, global.LinearProgress, global.Box));
+})(this, (function (exports, React, material, reactHookForm, reactSortablejs, lodash, authentication, formFields, shared, moment, theme, makeStyles, ReactDOM, api, LinearProgress, Box) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -3825,7 +3825,12 @@
           fontSize: '4rem'
         },
         "data-testid": "zeroIssuesImage"
-      }, /*#__PURE__*/React__namespace.createElement(theme.ThumbsUp, null)), errorList.length > 0 && errorList.map(function (error, index) {
+      }, /*#__PURE__*/React__namespace.createElement(theme.ThumbsUp, {
+        sx: {
+          height: '69px',
+          width: '58px'
+        }
+      })), errorList.length > 0 && errorList.map(function (error, index) {
         return /*#__PURE__*/React__namespace.createElement(material.Typography // eslint-disable-next-line react/no-array-index-key
         , {
           // eslint-disable-next-line react/no-array-index-key
@@ -3909,9 +3914,59 @@
       }, children);
     };
 
+    var styles = {
+      label: {
+        color: 'geowebColors.buttons.tertiary.default.color',
+        opacity: 1,
+        fontSize: '12px',
+        fontWeight: 500
+      }
+    };
+
+    var SwitchButton = function SwitchButton(props) {
+      return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+        title: "Switch mode"
+      }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(material.FormLabel, {
+        sx: styles.label
+      }, "Viewer"), /*#__PURE__*/React__namespace.createElement(material.Switch, __assign({
+        "data-testid": "switchMode"
+      }, props)), /*#__PURE__*/React__namespace.createElement(material.FormLabel, {
+        sx: styles.label
+      }, "Editor")));
+    };
+
+    /* *
+     * 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 TafAvatar = function TafAvatar(_a) {
+      var editor = _a.editor,
+          _b = _a.tooltipPlacement,
+          tooltipPlacement = _b === void 0 ? 'bottom' : _b;
+      return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+        title: "Editor: " + editor,
+        placement: tooltipPlacement
+      }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(shared.Avatar, {
+        size: "small"
+      }, shared.getInitials(editor))));
+    };
+
     var noop = function noop() {};
 
-    var TafForm = function TafForm(_a) {
+    var TafForm = /*#__PURE__*/React__default["default"].memo(function (_a) {
       var tafFromBackend = _a.tafFromBackend,
           _b = _a.onFormAction,
           onFormAction = _b === void 0 ? function () {
@@ -3928,43 +3983,50 @@
           _f = _a.setIsDisabled,
           setIsDisabled = _f === void 0 ? function () {
         return null;
-      } : _f;
-      var originalTaf = tafFromBackend.taf;
+      } : _f,
+          _g = _a.onSwitchEditor,
+          onSwitchEditor = _g === void 0 ? function () {
+        return null;
+      } : _g;
+      var originalTaf = tafFromBackend.taf,
+          editor = tafFromBackend.editor;
+      var auth = authentication.useAuthenticationContext().auth;
+      var isEditor = editor === (auth === null || auth === void 0 ? void 0 : auth.username) || false;
       var isDefaultDisabled = getIsFormDefaultDisabled(tafFromBackend.taf.status);
       var confirmDialog = shared.useConfirmationDialog();
 
-      var _g = shared.useDraftFormHelpers(true),
-          toggleIsDraft = _g.toggleIsDraft,
-          DraftFieldHelper = _g.DraftFieldHelper;
+      var _h = shared.useDraftFormHelpers(true),
+          toggleIsDraft = _h.toggleIsDraft,
+          DraftFieldHelper = _h.DraftFieldHelper;
 
-      var _h = useTafModuleContext(),
-          registerValidateForm = _h.registerValidateForm,
-          tafAction = _h.tafAction,
-          setIsFormDirty = _h.setIsFormDirty,
-          setTafAction = _h.setTafAction,
-          TAC = _h.TAC,
-          updateTAC = _h.updateTAC,
-          setTAC = _h.setTAC;
+      var _j = useTafModuleContext(),
+          registerValidateForm = _j.registerValidateForm,
+          tafAction = _j.tafAction,
+          setIsFormDirty = _j.setIsFormDirty,
+          setTafAction = _j.setTafAction,
+          TAC = _j.TAC,
+          updateTAC = _j.updateTAC,
+          setTAC = _j.setTAC;
 
       var isMounted = shared.useIsMounted().isMounted;
 
-      var _j = reactHookForm.useFormContext(),
-          control = _j.control,
-          handleSubmit = _j.handleSubmit,
-          trigger = _j.trigger,
-          formState = _j.formState,
-          getValues = _j.getValues,
-          setValue = _j.setValue,
-          reset = _j.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 _k = __read(React__default["default"].useState(getValues()), 2),
-          delayedFormValues = _k[0],
-          setDelayedFormValues = _k[1];
+      var _l = __read(React__default["default"].useState(getValues()), 2),
+          delayedFormValues = _l[0],
+          setDelayedFormValues = _l[1];
 
       var hasErrors = Object.keys(errors).length;
 
@@ -4036,6 +4098,92 @@
         setTafAction(action);
       };
 
+      var setIsEditor = function setIsEditor(checked) {
+        return __awaiter(void 0, void 0, void 0, function () {
+          var editor, didSucceed;
+          return __generator(this, function (_a) {
+            switch (_a.label) {
+              case 0:
+                editor = checked ? auth === null || auth === void 0 ? void 0 : auth.username : '';
+
+                if (editor === tafFromBackend.editor) {
+                  // do nothing, correct editor is already set
+                  return [2
+                  /*return*/
+                  , true];
+                }
+
+                if (!(tafFromBackend.editor !== '' && tafFromBackend.editor !== null && tafFromBackend.editor !== (auth === null || auth === void 0 ? void 0 : auth.username))) return [3
+                /*break*/
+                , 2];
+                return [4
+                /*yield*/
+                , confirmDialog({
+                  title: 'Switch to editor mode',
+                  description: 'This TAF is already in edit mode and important information could get lost in the switching process.',
+                  confirmLabel: 'Edit mode'
+                })];
+
+              case 1:
+                _a.sent();
+
+                _a.label = 2;
+
+              case 2:
+                return [4
+                /*yield*/
+                , onSwitchEditor(__assign(__assign({}, tafFromBackend), {
+                  editor: editor
+                }))];
+
+              case 3:
+                didSucceed = _a.sent();
+                return [2
+                /*return*/
+                , didSucceed];
+            }
+          });
+        });
+      };
+
+      var onSwitchMode = function onSwitchMode(event) {
+        var checked = event.target.checked;
+
+        if (!checked && isFormDirty) {
+          confirmDialog({
+            title: 'Whoops',
+            description: 'Are you sure you want to switch to viewer mode? Your unsaved changes will be lost.',
+            confirmLabel: 'Switch mode'
+          }).then(function () {
+            return __awaiter(void 0, void 0, void 0, function () {
+              var didSucceed;
+              return __generator(this, function (_a) {
+                switch (_a.label) {
+                  case 0:
+                    return [4
+                    /*yield*/
+                    , setIsEditor(checked)];
+
+                  case 1:
+                    didSucceed = _a.sent();
+
+                    if (didSucceed) {
+                      resetForm(undefined, isDefaultDisabled);
+                      resetTAC();
+                    }
+
+                    return [2
+                    /*return*/
+                    ];
+                }
+              });
+            });
+          });
+        } else {
+          setIsEditor(checked);
+        }
+      };
+
       var onTafEditModeButtonPress = function onTafEditModeButtonPress(action) {
         switch (action) {
           case 'DRAFT':
@@ -4109,7 +4257,23 @@
         switch (action) {
           case 'CANCEL':
             showConfirmDialog(action).then(function () {
-              onFormAction(action, convertTafValuesToObject(prepareTafValues(tafFromBackend.taf, action)));
+              return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                  switch (_a.label) {
+                    case 0:
+                      return [4
+                      /*yield*/
+                      , onFormAction(action, convertTafValuesToObject(prepareTafValues(tafFromBackend.taf, action)))];
+
+                    case 1:
+                      _a.sent();
+
+                      return [2
+                      /*return*/
+                      ];
+                  }
+                });
+              });
             });
             break;
 
@@ -4119,19 +4283,19 @@
         }
       };
 
-      var _l = reactHookForm.useFieldArray({
+      var _m = reactHookForm.useFieldArray({
         control: control,
         name: 'changeGroups'
       }),
-          fields = _l.fields,
-          insert = _l.insert,
-          remove = _l.remove,
-          move = _l.move;
+          fields = _m.fields,
+          insert = _m.insert,
+          remove = _m.remove,
+          move = _m.move;
 
-      var _m = useDragOrder(trigger, move, onFormBlur),
-          onChangeOrder = _m.onChangeOrder,
-          onStartDrag = _m.onStartDrag,
-          activeDraggingIndex = _m.activeDraggingIndex;
+      var _o = useDragOrder(trigger, move, onFormBlur),
+          onChangeOrder = _o.onChangeOrder,
+          onStartDrag = _o.onStartDrag,
+          activeDraggingIndex = _o.activeDraggingIndex;
 
       var onRemoverow = function onRemoverow(index) {
         confirmDialog({
@@ -4212,12 +4376,12 @@
         });
       };
 
-      var _o = __read(React__default["default"].useState(false), 2),
-          shouldValidate = _o[0],
-          setShouldValidate = _o[1];
+      var _p = __read(React__default["default"].useState(false), 2),
+          shouldValidate = _p[0],
+          setShouldValidate = _p[1];
 
       React__default["default"].useEffect(function () {
-        setIsDisabled(isDefaultDisabled);
+        setIsDisabled(!isEditor || 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
@@ -4252,9 +4416,13 @@
 
         reset(newValues); // eslint-disable-next-line react-hooks/exhaustive-deps
       }, [tafFromBackend]);
+      React__default["default"].useEffect(function () {
+        // update disabled state when editor changed
+        setIsDisabled(!isEditor || isDefaultDisabled); // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [editor]);
       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
+          // trigger validation on all changegroup validity times after form is enabled since they could be outside the new validity period
           var _a = tafFromBackend.taf.changeGroups,
               changeGroups = _a === void 0 ? [] : _a;
           var validFields = changeGroups.map(function (_field, index) {
@@ -4263,8 +4431,33 @@
           trigger(validFields);
         } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-      }, [shouldValidate]);
-      return /*#__PURE__*/React__default["default"].createElement("form", {
+      }, [shouldValidate, isDisabled]);
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: {
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          position: 'absolute',
+          top: {
+            xs: '20px',
+            sm: '0px'
+          },
+          right: {
+            xs: 'calc(50% -  70px)',
+            sm: '8px'
+          }
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(SwitchButton, {
+        checked: isEditor,
+        onChange: onSwitchMode
+      }), /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: {
+          width: '16px',
+          marginLeft: 1
+        }
+      }, editor && /*#__PURE__*/React__default["default"].createElement(TafAvatar, {
+        editor: editor
+      }))), /*#__PURE__*/React__default["default"].createElement("form", {
         "data-testid": "taf-form",
         onSubmit: handleSubmit(onSubmit),
         onBlur: onFormBlur
@@ -4330,7 +4523,7 @@
             index: index
           })
         });
-      })), !isDisabled && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      })), !isDisabled && isEditor && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         justifyContent: "space-between",
         alignItems: "center",
@@ -4344,7 +4537,7 @@
         errors: errors,
         isIssuesPaneOpen: isIssuesPaneOpen,
         setIsIssuesPaneOpen: setIsIssuesPaneOpen
-      }))), /*#__PURE__*/React__default["default"].createElement(TafFormButtons, {
+      }))), isEditor && /*#__PURE__*/React__default["default"].createElement(TafFormButtons, {
         isFormDisabled: isDisabled,
         tafAction: tafAction,
         canBe: tafFromBackend.canbe,
@@ -4355,8 +4548,12 @@
           name: field,
           key: field
         });
-      }), /*#__PURE__*/React__default["default"].createElement(DraftFieldHelper, null));
-    };
+      }), /*#__PURE__*/React__default["default"].createElement(DraftFieldHelper, null)));
+    }, function (prevProps, nextProps) {
+      // prevent re-render
+      return !nextProps.isDisabled && prevProps.tafFromBackend !== nextProps.tafFromBackend && // if editor changed it should rerender
+      prevProps.tafFromBackend.editor === nextProps.tafFromBackend.editor;
+    });
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -4962,7 +5159,7 @@
           },
           position: 'absolute',
           right: '8px',
-          top: '30px'
+          top: '48px'
         }
       }, /*#__PURE__*/React__namespace.createElement(theme.ListItem, null)), /*#__PURE__*/React__namespace.createElement(material.Dialog, {
         open: isOpen,
@@ -5075,7 +5272,8 @@
           paddingTop: '32px'
         }
       }, tafList.map(function (_a, index) {
-        var taf = _a.taf;
+        var taf = _a.taf,
+            editor = _a.editor;
         return /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
           key: taf.uuid,
           selected: index === activeIndex,
@@ -5100,8 +5298,18 @@
           onClick: function onClick() {
             return onChangeTab(index);
           }
-        }, /*#__PURE__*/React__namespace.createElement(Box__default["default"], {
+        }, editor && /*#__PURE__*/React__namespace.createElement(Box__default["default"], {
+          sx: {
+            position: 'absolute',
+            top: '4px',
+            left: '8px'
+          }
+        }, /*#__PURE__*/React__namespace.createElement(TafAvatar, {
+          editor: editor,
+          tooltipPlacement: "right"
+        })), /*#__PURE__*/React__namespace.createElement(Box__default["default"], {
           component: "span",
+          "data-testid": "taf-location",
           sx: {
             fontSize: '12px',
             fontWeight: '500',
@@ -5160,13 +5368,15 @@
     };
 
     var parseErrorMessage = function parseErrorMessage(error, params) {
+      var message = shared.getErrorMessage(error);
       return params.changeStatusTo === 'CANCELLED' ? {
         type: 'CANCELLED',
-        title: 'Cancelling this TAF failed, please try again'
+        title: 'Cancelling this TAF failed, please try again',
+        message: message
       } : {
         type: 'SERVER',
         title: 'An error has occurred while saving, please try again',
-        message: shared.isAxiosError(error) ? shared.getAxiosErrorMessage(error) : error.message
+        message: message
       };
     };
 
@@ -5251,18 +5461,22 @@
           postTaf = _c === void 0 ? function () {
         return null;
       } : _c,
-          _d = _a.isIssuesPaneOpen,
-          isIssuesPaneOpen = _d === void 0 ? false : _d,
-          _e = _a.setIsIssuesPaneOpen,
-          setIsIssuesPaneOpen = _e === void 0 ? function () {
+          _d = _a.patchTaf,
+          patchTaf = _d === void 0 ? function () {
         return null;
-      } : _e,
-          _f = _a.isFormDisabled,
-          isFormDisabled = _f === void 0 ? false : _f,
-          _g = _a.setIsFormDisabled,
-          setIsFormDisabled = _g === void 0 ? function () {
+      } : _d,
+          _e = _a.isIssuesPaneOpen,
+          isIssuesPaneOpen = _e === void 0 ? false : _e,
+          _f = _a.setIsIssuesPaneOpen,
+          setIsIssuesPaneOpen = _f === void 0 ? function () {
         return null;
-      } : _g,
+      } : _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) {
@@ -5389,7 +5603,8 @@
         isIssuesPaneOpen: isIssuesPaneOpen,
         setIsIssuesPaneOpen: setIsIssuesPaneOpen,
         isDisabled: isFormDisabled,
-        setIsDisabled: setIsFormDisabled
+        setIsDisabled: setIsFormDisabled,
+        onSwitchEditor: patchTaf
       })));
     };
 
@@ -5401,6 +5616,57 @@
       }, props));
     };
 
+    /* *
+     * 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 getLastUpdateTitle = function getLastUpdateTitle(time) {
+      return "Last updated " + time;
+    };
+
+    var LastUpdateTime = function LastUpdateTime(_a) {
+      var _b = _a.onUpdateTaf,
+          onUpdateTaf = _b === void 0 ? function () {} : _b,
+          lastUpdateTime = _a.lastUpdateTime;
+      return /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: {
+          display: 'flex',
+          alignItems: 'center',
+          height: '100%',
+          justifyContent: 'flex-end'
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        sx: {
+          color: 'geowebColors.captions.captionStatus.rgba',
+          fontSize: '10px',
+          lineHeight: '1.6',
+          letterSpacing: '0.33px'
+        },
+        "data-testid": "lastupdated-time"
+      }, getLastUpdateTitle(lastUpdateTime)), /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+        title: "Click to refresh"
+      }, /*#__PURE__*/React__default["default"].createElement(shared.ToolButton, {
+        "data-testid": "updateTafBtn",
+        onClick: onUpdateTaf,
+        sx: {
+          marginRight: 1,
+          marginLeft: 1
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(theme.Cached, null))));
+    };
+
     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.",
@@ -5410,8 +5676,9 @@
     var TafLayout = function TafLayout(_a) {
       var _b = _a.tafList,
           tafList = _b === void 0 ? [] : _b,
-          _c = _a.onPostTaf,
-          onPostTaf = _c === void 0 ? function () {} : _c;
+          _c = _a.onUpdateTaf,
+          onUpdateTaf = _c === void 0 ? function () {} : _c,
+          lastUpdateTime = _a.lastUpdateTime;
       var api$1 = api.useApiContext().api;
       var confirmDialog = shared.useConfirmationDialog();
 
@@ -5424,39 +5691,46 @@
       var _e = usePostTafRequest(api$1.postTaf),
           isLoading = _e.isLoading,
           postTafRequest = _e.doRequest,
-          error = _e.error,
-          setError = _e.setError;
+          postError = _e.error;
+
+      var _f = usePostTafRequest(api$1.patchTaf),
+          patchTafRequest = _f.doRequest,
+          patchError = _f.error;
 
-      var _f = useTafModuleContext(),
-          onValidateForm = _f.onValidateForm,
-          tafAction = _f.tafAction,
-          isFormDirty = _f.isFormDirty;
+      var _g = useTafModuleContext(),
+          onValidateForm = _g.onValidateForm,
+          tafAction = _g.tafAction,
+          isFormDirty = _g.isFormDirty;
 
-      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 _h = __read(React__default["default"].useState(sortTafTimeSlots(tafList)), 2),
+          _j = _h[0],
+          upcoming = _j.upcoming,
+          current = _j.current,
+          expired = _j.expired,
+          updateSortedTafs = _h[1];
 
-      var _j = __read(current.slice(-1), 1),
-          lastCurrentTaf = _j[0];
+      var _k = __read(current.slice(-1), 1),
+          lastCurrentTaf = _k[0];
 
-      var _k = __read(React__default["default"].useState('UPCOMING'), 2),
-          timeSlot = _k[0],
-          setTimeSlot = _k[1];
+      var _l = __read(React__default["default"].useState('UPCOMING'), 2),
+          timeSlot = _l[0],
+          setTimeSlot = _l[1];
 
-      var _l = __read(React__default["default"].useState(upcoming), 2),
-          locations = _l[0],
-          setLocations = _l[1];
+      var _m = __read(React__default["default"].useState(upcoming), 2),
+          locations = _m[0],
+          setLocations = _m[1];
 
-      var _m = __read(React__default["default"].useState(0), 2),
-          activeTafIndex = _m[0],
-          setActiveTafIndex = _m[1];
+      var _o = __read(React__default["default"].useState(0), 2),
+          activeTafIndex = _o[0],
+          setActiveTafIndex = _o[1];
 
-      var _o = __read(React__default["default"].useState(false), 2),
-          isFormDisabled = _o[0],
-          setIsFormDisabled = _o[1];
+      var _p = __read(React__default["default"].useState(false), 2),
+          isFormDisabled = _p[0],
+          setIsFormDisabled = _p[1];
+
+      var _q = __read(React__default["default"].useState(), 2),
+          error = _q[0],
+          setError = _q[1];
 
       var postTaf = function postTaf(data) {
         return __awaiter(void 0, void 0, void 0, function () {
@@ -5471,7 +5745,42 @@
                 _a.sent(); // callback
 
 
-                onPostTaf();
+                onUpdateTaf();
+                return [2
+                /*return*/
+                ];
+            }
+          });
+        });
+      };
+
+      var patchTaf = function patchTaf(data) {
+        return __awaiter(void 0, void 0, void 0, function () {
+          return __generator(this, function (_a) {
+            switch (_a.label) {
+              case 0:
+                _a.trys.push([0, 2,, 3]);
+
+                return [4
+                /*yield*/
+                , patchTafRequest(data)];
+
+              case 1:
+                _a.sent(); // callback
+
+
+                onUpdateTaf();
+                return [2
+                /*return*/
+                , true];
+
+              case 2:
+                _a.sent();
+                return [2
+                /*return*/
+                , false];
+
+              case 3:
                 return [2
                 /*return*/
                 ];
@@ -5573,7 +5882,8 @@
         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(postError);
+        var cancelErrorTimeout = postError && postError.type === 'CANCELLED' ? setTimeout(function () {
           setError(null);
         }, 10000) : null;
         return function () {
@@ -5581,7 +5891,10 @@
             clearTimeout(cancelErrorTimeout);
           }
         };
-      }, [error, setError]);
+      }, [postError]);
+      React__default["default"].useEffect(function () {
+        setError(patchError);
+      }, [patchError]);
 
       if (!tafList) {
         return null;
@@ -5627,6 +5940,13 @@
         tafFromBackend: lastCurrentTaf,
         timeSlot: timeSlot,
         onChangeTimeSlot: onChangeTimeSlot
+      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+        item: true,
+        xs: 12,
+        sm: 3
+      }, lastUpdateTime && /*#__PURE__*/React__default["default"].createElement(LastUpdateTime, {
+        lastUpdateTime: lastUpdateTime,
+        onUpdateTaf: onUpdateTaf
       }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         flexGrow: 1,
@@ -5676,6 +5996,7 @@
           isFormDisabled: isFormDisabled,
           setIsFormDisabled: setIsFormDisabled,
           postTaf: postTaf,
+          patchTaf: patchTaf,
           isLoading: isLoading,
           error: error
         });
@@ -5717,23 +6038,80 @@
       }, children)));
     };
 
+    var getCurrentDate = function getCurrentDate() {
+      return moment__default["default"].utc().format('HH:mm');
+    };
+
     var TafModule = function TafModule() {
       var api$1 = api.useApiContext().api;
 
-      var _a = api.useApi(api$1.getTafList),
-          getTafListError = _a.error,
-          isLoading = _a.isLoading,
-          tafList = _a.result,
-          fetchNewTafList = _a.fetchApiData;
+      var _a = __read(React__namespace.useState([]), 2),
+          tafList = _a[0],
+          setTafList = _a[1];
 
-      shared.usePoller([tafList, getTafListError], function () {
-        return fetchNewTafList({});
-      });
+      var _b = __read(React__namespace.useState(true), 2),
+          isLoading = _b[0],
+          setIsLoading = _b[1];
+
+      var _c = __read(React__namespace.useState(null), 2),
+          getTafListError = _c[0],
+          setError = _c[1];
+
+      var _d = __read(React__namespace.useState(), 2),
+          lastUpdateTime = _d[0],
+          setLastUpdateTime = _d[1];
+
+      var fetchNewTafList = function fetchNewTafList() {
+        return __awaiter(void 0, void 0, void 0, function () {
+          var result, error_1;
+          return __generator(this, function (_a) {
+            switch (_a.label) {
+              case 0:
+                setIsLoading(true);
+                setError(null);
+                _a.label = 1;
+
+              case 1:
+                _a.trys.push([1, 3,, 4]);
+
+                return [4
+                /*yield*/
+                , api$1.getTafList()];
+
+              case 2:
+                result = _a.sent();
+                setTafList(result.data);
+                setIsLoading(false);
+                setLastUpdateTime(getCurrentDate());
+                return [3
+                /*break*/
+                , 4];
 
-      var onPostTaf = function onPostTaf() {
-        fetchNewTafList({});
+              case 3:
+                error_1 = _a.sent();
+                setError(error_1);
+                setIsLoading(false);
+                return [3
+                /*break*/
+                , 4];
+
+              case 4:
+                return [2
+                /*return*/
+                ];
+            }
+          });
+        });
       };
 
+      var onUpdateTaf = function onUpdateTaf() {
+        fetchNewTafList();
+      };
+
+      React__namespace.useEffect(function () {
+        fetchNewTafList(); // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, []);
+      shared.usePoller([tafList, getTafListError], fetchNewTafList);
       var hasTafListError = getTafListError !== null;
       return /*#__PURE__*/React__namespace.createElement(material.Box, {
         component: "div",
@@ -5758,7 +6136,8 @@
         }
       }), /*#__PURE__*/React__namespace.createElement(TafLayout, {
         tafList: tafList,
-        onPostTaf: onPostTaf
+        onUpdateTaf: onUpdateTaf,
+        lastUpdateTime: lastUpdateTime
       }));
     };
 
@@ -5780,10 +6159,32 @@
           return axiosInstance.post.apply(axiosInstance, __spreadArray(['/taf2tac'], __read(__spreadArray([__assign({}, tafData)], __read(signal ? [{
             signal: signal
           }] : [])))));
+        },
+        patchTaf: function patchTaf(formData) {
+          return axiosInstance.patch('/taf', __assign({}, formData));
         }
       };
     };
 
+    /* *
+     * 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 MOCK_USERNAME = 'user.name';
+
     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;
@@ -5819,6 +6220,7 @@
     var fakeTafList = [{
       creationDate: upcomingValidDateStart,
       canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+      editor: MOCK_USERNAME,
       taf: {
         uuid: '5f9583fjdf0f337925',
         baseTime: upcomingValidDateStart,
@@ -5838,6 +6240,7 @@
     }, {
       creationDate: upcomingValidDateStart,
       canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+      editor: null,
       taf: {
         uuid: '5f9583fjd111137925',
         baseTime: upcomingValidDateStart,
@@ -5863,6 +6266,7 @@
     }, {
       creationDate: upcomingValidDateStart,
       canbe: ['CANCELLED', 'AMENDED', 'DISCARDED'],
+      editor: null,
       taf: {
         uuid: '754905485',
         baseTime: upcomingValidDateStart,
@@ -5920,6 +6324,7 @@
     }, {
       creationDate: upcomingValidDateStart,
       canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+      editor: MOCK_USERNAME,
       taf: {
         uuid: '43545345345',
         issueDate: upcomingValidDateStart,
@@ -5990,6 +6395,7 @@
     }, {
       creationDate: upcomingValidDateStart,
       canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+      editor: null,
       taf: {
         uuid: '5f9583fjdf45ff4330f337925',
         issueDate: upcomingValidDateStart,
@@ -6045,6 +6451,7 @@
     }, {
       creationDate: upcomingValidDateStart,
       canbe: ['AMENDED'],
+      editor: null,
       taf: {
         uuid: '5464565464',
         previousId: '5445fghrfg3546456',
@@ -6086,6 +6493,7 @@
     }, {
       creationDate: upcomingValidDateStart,
       canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+      editor: 'max.jansen',
       taf: {
         uuid: 'gh56734fghfgh',
         previousId: '8574jnf93475',
@@ -6127,6 +6535,7 @@
     }, {
       creationDate: currentValidDateStart,
       canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+      editor: null,
       taf: {
         uuid: 'giskdj09845872039',
         issueDate: currentValidDateStart,
@@ -6166,6 +6575,7 @@
     }, {
       creationDate: currentValidDateStart,
       canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+      editor: null,
       taf: {
         uuid: 'ghskdj09845872039',
         baseTime: currentValidDateStart,
@@ -6185,6 +6595,7 @@
     }, {
       creationDate: currentValidDateStart,
       canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+      editor: null,
       taf: {
         uuid: 'ghskdj09845872040',
         issueDate: currentValidDateStart,
@@ -6205,6 +6616,7 @@
     }, {
       creationDate: currentDate + "T06:00:00Z",
       canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+      editor: null,
       taf: {
         uuid: 'ghskdj09845872041',
         issueDate: currentValidDateStart,
@@ -6225,6 +6637,7 @@
     }, {
       creationDate: currentDate + "T06:00:00Z",
       canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+      editor: null,
       taf: {
         uuid: 'ghskdj09845872042',
         issueDate: currentValidDateStart,
@@ -6245,6 +6658,7 @@
     }, {
       creationDate: currentDate + "T06:00:00Z",
       canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+      editor: null,
       taf: {
         uuid: 'ghskdj09845872043',
         issueDate: currentValidDateStart,
@@ -6265,6 +6679,7 @@
     }, {
       creationDate: expiredValidDateStart,
       canbe: [],
+      editor: null,
       taf: {
         uuid: 'sdkjhsdf90845890',
         issueDate: expiredValidDateStart,
@@ -6329,6 +6744,7 @@
     var fakeNewTaf = {
       creationDate: currentDate + "T12:00:00Z",
       canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+      editor: null,
       taf: {
         type: 'NORMAL',
         messageType: 'ORG',
@@ -6349,6 +6765,7 @@
     ({
       creationDate: "2022-01-06T12:00:00Z",
       canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+      editor: MOCK_USERNAME,
       taf: __assign(__assign({}, fakeNewTaf.taf), {
         baseTime: "2022-01-06T12:00:00Z",
         validDateStart: "2022-01-06T12:00:00Z",
@@ -6364,6 +6781,7 @@
     var fakePublishedTaf = {
       creationDate: currentDate + "T12:00:00Z",
       canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+      editor: null,
       taf: {
         uuid: 'slsdkjg-023895',
         issueDate: currentDate + "T12:00:00Z",
@@ -6439,7 +6857,9 @@
     ({
       creationDate: "2022-01-06T12:00:00Z",
       canbe: ['CANCELLED', 'AMENDED', 'CORRECTED'],
+      editor: MOCK_USERNAME,
       taf: __assign(__assign({}, fakePublishedTaf.taf), {
+        uuid: 'sowi3u4o-lsdjflsk',
         location: 'EHGG',
         baseTime: "2022-01-06T12:00:00Z",
         issueDate: "2022-01-06T12:00:00Z",
@@ -6504,6 +6924,7 @@
     var fakeDraftTaf = {
       creationDate: currentDate + "T18:00:00Z",
       canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+      editor: null,
       taf: {
         uuid: '5f9583fjdf0f337925',
         baseTime: currentDate + "T18:00:00Z",
@@ -6542,6 +6963,7 @@
     ({
       creationDate: "2022-01-06T18:00:00Z",
       canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+      editor: MOCK_USERNAME,
       taf: __assign(__assign({}, fakeDraftTaf.taf), {
         baseTime: "2022-01-06T18:00:00Z",
         validDateStart: "2022-01-06T18:00:00Z",
@@ -6557,6 +6979,7 @@
     var fakeDraftAmendmentTaf = {
       creationDate: currentDate + "T14:00:00Z",
       canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+      editor: null,
       taf: {
         uuid: '954905487',
         previousId: '5f9583fjdf45ff4330f337925',
@@ -6617,6 +7040,7 @@
     ({
       creationDate: "2022-01-06T14:00:00Z",
       canbe: ['DRAFTED', 'DISCARDED', 'PUBLISHED'],
+      editor: null,
       taf: __assign(__assign({}, fakeDraftAmendmentTaf.taf), {
         location: 'EHRD',
         issueDate: "2022-01-06T14:00:00Z",
@@ -6637,6 +7061,7 @@
     var fakeAmendmentTaf = {
       creationDate: currentDate + "T14:00:00Z",
       canbe: ['CANCELLED', 'CORRECTED', 'AMENDED'],
+      editor: null,
       taf: {
         uuid: '754905486',
         previousId: '5f9583fjdf45ff4330f337925',
@@ -6680,6 +7105,7 @@
     ({
       creationDate: "2022-01-06T14:00:00Z",
       canbe: ['CANCELLED', 'CORRECTED', 'AMENDED'],
+      editor: MOCK_USERNAME,
       taf: __assign(__assign({}, fakeAmendmentTaf.taf), {
         uuid: '7549058980',
         issueDate: "2022-01-06T14:00:00Z",
@@ -6717,6 +7143,14 @@
       });
     };
 
+    var fakeUpdatedTafList = __spreadArray([], __read(fakeTafList));
+
+    var setFakeUpdatedList = function setFakeUpdatedList(newList) {
+      fakeUpdatedTafList = newList;
+    };
+    var getFakeUpdatedList = function getFakeUpdatedList() {
+      return fakeUpdatedTafList;
+    };
     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) {
@@ -6725,6 +7159,10 @@
       // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-module-boundary-types
       post: function post(_url, _params, _signal) {
         return fakePromise(false, _signal);
+      },
+      // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-module-boundary-types
+      patch: function patch(_url, _params, _signal) {
+        return fakePromise(false, _signal);
       }
     };
     var createApi = function createApi() {
@@ -6734,7 +7172,7 @@
           console.log('Retrieving new TAF list');
           return fakeAxiosInstance.get('/taflist').then(function () {
             return {
-              data: __spreadArray([], __read(fakeTafList))
+              data: getFakeUpdatedList()
             };
           });
         },
@@ -6753,6 +7191,21 @@
               data: fakeTafTac
             };
           });
+        },
+        patchTaf: function patchTaf(_patchTaf) {
+          var updatedList = getFakeUpdatedList().map(function (tafFromBackend) {
+            if (tafFromBackend.taf.uuid === _patchTaf.taf.uuid) {
+              return __assign(__assign({}, tafFromBackend), {
+                editor: _patchTaf.editor
+              });
+            }
+
+            return tafFromBackend;
+          });
+          setFakeUpdatedList(updatedList); // eslint-disable-next-line no-console
+
+          console.log("The new editor of the taf will be " + (_patchTaf.editor || 'empty'));
+          return fakeAxiosInstance.patch('/taf', _patchTaf);
         }
       };
     };