@zohodesk/library-platform 1.1.3-exp.1 → 1.1.3-exp.2

package/es/library/dot/components/table-list/frameworks/ui/sub-components/Rows.js

@@ -1,24 +1,34 @@
 import React from 'react';
 import Row from "./row/Row";
+import { SortableElement } from 'react-sortable-hoc';
+const SortableRow = SortableElement(props => /*#__PURE__*/React.createElement(Row, { ...props
+}));
 
-function Rows(_ref) {
+const Rows = _ref => {
   let {
     headers,
     rows,
     isFlexibleColumns,
+    isReorderEnabled,
     isSelectionEnabled,
     rowCursor,
     hasRowActions,
     rowActionsColumnWidth,
-    isKeyboardControlsEnabled
+    isKeyboardControlsEnabled,
+    dropIndicator
   } = _ref;
-  return rows.map((row, index) => /*#__PURE__*/React.createElement(Row, {
-    key: index,
-    ...getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled)
-  }));
-}
+  return rows.map((row, index) => {
+    const isDroppable = dropIndicator.index !== null ? dropIndicator.index === index ? true : false : false;
+    const dropPosition = dropIndicator.position;
+    return /*#__PURE__*/React.createElement(SortableRow, {
+      key: `${row.id}`,
+      index: index,
+      ...getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled, isDroppable, dropPosition)
+    });
+  });
+};
 
-function getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled) {
+function getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled, isDroppable, dropPosition) {
   const {
     id,
     columns,
@@ -38,11 +48,14 @@ function getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, rowCur
     isFocussed,
     selectionTooltip,
     isFlexibleColumns,
+    isReorderEnabled,
     isSelectionEnabled,
     cursor: rowCursor,
     hasActions: hasRowActions,
     isKeyboardControlsEnabled,
-    rowActionsColumnWidth
+    rowActionsColumnWidth,
+    isDroppable,
+    dropPosition
   };
 }
 

package/es/library/dot/components/table-list/frameworks/ui/sub-components/header/MassAction.js

@@ -2,10 +2,13 @@ import React from 'react';
 import TableHeadFirstNode from '@zohodesk-private/desk-components/es/table/TableHeadFirstNode/TableHeadFirstNode';
 import TableHeading from '@zohodesk-private/desk-components/es/table/TableHeading/TableHeading';
 import ActionEventMediator from "../../../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
+import style from "./../../../ui/css/TableList.module.css";
 
 function MassAction(_ref) {
   let {
     isSelectionEnabled,
+    isReorderEnabled,
+    isKeyboardControlsEnabled,
     actions
   } = _ref;
 
@@ -13,14 +16,28 @@ function MassAction(_ref) {
     return null;
   }
 
+  const customPropsContainer = isReorderEnabled && isSelectionEnabled ? {
+    $data_width: 56
+  } : {};
+
   if (!actions || actions.length === 0) {
-    return /*#__PURE__*/React.createElement(TableHeadFirstNode, null, /*#__PURE__*/React.createElement(TableHeading, {
+    return /*#__PURE__*/React.createElement(TableHeadFirstNode, {
+      customStyle: {
+        container: isReorderEnabled && isSelectionEnabled ? `${style.offsetLeft24} ${style.paddingRight24}` : isKeyboardControlsEnabled && isSelectionEnabled ? `${style.offsetLeft8} ${style.paddingRight16}` : isKeyboardControlsEnabled ? style.offsetLeft8 : style.offsetLeft0
+      },
+      $customProps_container: customPropsContainer
+    }, /*#__PURE__*/React.createElement(TableHeading, {
       $i18n_text: "M/A",
       $i18n_tooltip: "Mass Action"
     }));
   }
 
-  return /*#__PURE__*/React.createElement(TableHeadFirstNode, null, /*#__PURE__*/React.createElement(ActionEventMediator, {
+  return /*#__PURE__*/React.createElement(TableHeadFirstNode, {
+    customStyle: {
+      container: isReorderEnabled && isSelectionEnabled ? `${style.offsetLeft24} ${style.paddingRight24}` : isKeyboardControlsEnabled && isSelectionEnabled ? `${style.offsetLeft8} ${style.paddingRight16}` : isKeyboardControlsEnabled ? style.offsetLeft8 : style.offsetLeft0
+    },
+    $customProps_container: customPropsContainer
+  }, /*#__PURE__*/React.createElement(ActionEventMediator, {
     actions: actions
   }));
 }

package/es/library/dot/components/table-list/frameworks/ui/sub-components/row/Row.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import TableRow from '@zohodesk-private/desk-components/es/table/TableList/TableList';
+import DragHandle from '@zohodesk-private/desk-components/es/DragHandle/DragHandle';
 import RowSelection from "./RowSelection";
 import Columns from "./Columns";
 import RowActions from "./RowActions";
 import { createCustomComponent } from "../../../../../../../custom-component";
 import { RowEventHandlersFactory } from "./RowEventHandlersFactory";
 import TableRowProperties from "../../../../../../../../cc/table-list/row/Properties";
-import TableRowConstants from "../../../../../../../../cc/table-list/row/Constants"; // @ts-ignore
+import TableRowConstants from "../../../../../../../../cc/table-list/row/Constants";
+import { SortableHandle } from 'react-sortable-hoc'; // @ts-ignore
 
 import style from "../../css/TableList.module.css";
 
@@ -19,12 +21,15 @@ function RowView(_ref, ref) {
     dispatch
   } = helpers;
   const {
+    isReorderEnabled,
     isSelectionEnabled,
     isSelected,
     isSelectable,
     isKeyboardControlsEnabled,
     isFocussed,
-    selectionTooltip
+    selectionTooltip,
+    isDroppable,
+    dropPosition
   } = state.properties;
   const {
     id,
@@ -39,11 +44,11 @@ function RowView(_ref, ref) {
     type,
     actions
   } = rowActionLocation;
-  return /*#__PURE__*/React.createElement(TableRow, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableRow, {
     key: id,
     ref: ref,
     testId: id,
-    $flag_padding: !isSelectionEnabled,
+    $flag_padding: !isSelectionEnabled && !isReorderEnabled,
     $flag_active: isSelected,
     $flag_hasHighlighter: isKeyboardControlsEnabled,
     $flag_isHighlighted: isFocussed,
@@ -56,8 +61,14 @@ function RowView(_ref, ref) {
     customStyle: {
       $pointer: style[`rowCursor_${cursor}`]
     }
-  }, renderRowSelection({
+  }, renderReorderer({
+    isSelectionEnabled,
+    isReorderEnabled,
+    isKeyboardControlsEnabled
+  }), renderRowSelection({
     isSelectionEnabled,
+    isReorderEnabled,
+    isKeyboardControlsEnabled,
     id,
     selectionTooltip,
     isSelected,
@@ -71,12 +82,16 @@ function RowView(_ref, ref) {
     columnWidth: rowActionsColumnWidth,
     type,
     actions
-  }));
+  }), isDroppable && /*#__PURE__*/React.createElement("div", {
+    className: `${style.rowDropIndicator} ${dropPosition === 'downward' && style.dropIndicatorTop} ${dropPosition === 'upward' && style.dropIndicatorBottom}`
+  })));
 }
 
 function renderRowSelection(_ref2) {
   let {
     isSelectionEnabled,
+    isReorderEnabled,
+    isKeyboardControlsEnabled,
     id,
     selectionTooltip,
     isSelected,
@@ -85,6 +100,8 @@ function renderRowSelection(_ref2) {
   } = _ref2;
   return /*#__PURE__*/React.createElement(RowSelection, {
     isSelectionEnabled: isSelectionEnabled,
+    isReorderEnabled: isReorderEnabled,
+    isKeyboardControlsEnabled: isKeyboardControlsEnabled,
     id: id,
     tooltip: selectionTooltip,
     selected: isSelected,
@@ -93,24 +110,52 @@ function renderRowSelection(_ref2) {
   });
 }
 
-function renderColumns(_ref3) {
+function renderReorderer(_ref3) {
+  let {
+    isSelectionEnabled,
+    isReorderEnabled,
+    isKeyboardControlsEnabled
+  } = _ref3;
+  const DragHandler = SortableHandle(_ref4 => {
+    let {
+      isSelectionEnabled,
+      isReorderEnabled,
+      isKeyboardControlsEnabled
+    } = _ref4;
+    return /*#__PURE__*/React.createElement("td", {
+      tabIndex: 0,
+      className: `${style.dragHandleWrapper} ${isKeyboardControlsEnabled && isSelectionEnabled && !isReorderEnabled ? style.paddingRight16 : isKeyboardControlsEnabled ? `${style.offsetLeft8} ${style.paddingLeft0} ${style.paddingRight8}` : `${style.offsetLeft0} ${style.paddingLeft8}`}`
+    }, /*#__PURE__*/React.createElement(DragHandle, {
+      customStyle: {
+        container: `${style.dragHandleContainer} `
+      }
+    }));
+  });
+  return isReorderEnabled ? /*#__PURE__*/React.createElement(DragHandler, {
+    isSelectionEnabled: isSelectionEnabled,
+    isReorderEnabled: isReorderEnabled,
+    isKeyboardControlsEnabled: isKeyboardControlsEnabled
+  }) : null;
+}
+
+function renderColumns(_ref5) {
   let {
     columns,
     isFlexibleColumns
-  } = _ref3;
+  } = _ref5;
   return /*#__PURE__*/React.createElement(Columns, {
     data: columns,
     isFlexibleColumns: isFlexibleColumns
   });
 }
 
-function renderRowActions(_ref4) {
+function renderRowActions(_ref6) {
   let {
     hasActions,
     columnWidth,
     actions,
     type
-  } = _ref4;
+  } = _ref6;
   return /*#__PURE__*/React.createElement(RowActions, {
     hasActions: hasActions,
     columnWidth: columnWidth,

package/es/library/dot/components/table-list/frameworks/ui/sub-components/row/RowSelection.js

@@ -1,10 +1,13 @@
 import React from 'react';
 import TableListSelect from '@zohodesk-private/desk-components/es/table/TableListSelect/TableListSelect';
 import { TableListConstants } from "../../../../../../../../cc/table-list";
+import style from "./../../css/TableList.module.css";
 
 function RowSelection(_ref) {
   let {
     isSelectionEnabled,
+    isReorderEnabled,
+    isKeyboardControlsEnabled,
     id,
     tooltip,
     selected,
@@ -16,10 +19,17 @@ function RowSelection(_ref) {
     return null;
   }
 
+  const customPropsContainer = isReorderEnabled && isSelectionEnabled ? {
+    $data_width: 56
+  } : {};
   return /*#__PURE__*/React.createElement(TableListSelect, {
     $data_id: id,
     $i18n_tooltip: tooltip,
     $flag_checked: selected,
+    customStyle: {
+      container: isReorderEnabled && isSelectionEnabled ? `${style.offsetLeft24} ${style.paddingRight24}` : isKeyboardControlsEnabled && isSelectionEnabled ? `${style.paddingRight16} ${style.offsetLeft8}` : isKeyboardControlsEnabled ? style.offsetLeft8 : style.offsetLeft0
+    },
+    $customProps_container: customPropsContainer,
     $flag_disabled: !selectable,
     $event_onChange: (_, event) => dispatch({
       type: TableListConstants.TABLE_LIST_TOGGLE_ITEM_SELECTION,

package/es/library/dot/components/table-list/frameworks/utils/reOrder.js

@@ -0,0 +1,76 @@
+function reorderImmutableArray(arr, fromIndex, toIndex) {
+  const start = fromIndex < 0 ? arr.length + fromIndex : fromIndex;
+
+  if (start >= 0 && start < arr.length) {
+    const end = toIndex < 0 ? arr.length + toIndex : toIndex;
+    const [item] = arr.splice(start, 1);
+    arr.splice(end, 0, item);
+  }
+}
+
+export function reorderArray(arr, fromIndex, toIndex) {
+  const copy = [...arr];
+  reorderImmutableArray(copy, fromIndex, toIndex);
+  return copy;
+}
+export function parseCssNumberWithUnit(value) {
+  if (typeof value !== "string") return null;
+  const regex = /^(-?\d+(\.\d+)?)([a-z%]*)$/i;
+  const match = value.trim().match(regex);
+  if (!match) return null;
+  return {
+    number: parseFloat(match[1]),
+    unit: match[3] || ""
+  };
+}
+export function setTableUserSelect(ref, value) {
+  if (ref.current) {
+    ref.current.style.userSelect = value;
+  }
+}
+export function adjustHelperElementPosition(ref, draggingClass) {
+  if (ref.current) {
+    const TableScrollLeft = ref.current.scrollLeft;
+    const helperElement = ref.current.querySelector(`.${draggingClass}`);
+
+    if (helperElement) {
+      const helperLeft = parseCssNumberWithUnit(helperElement.style.left);
+
+      if (helperLeft && helperLeft.unit === 'px') {
+        helperElement.style.left = `${helperLeft.number + TableScrollLeft}px`;
+      }
+    }
+  }
+}
+export function getDropIndicator(_ref) {
+  let {
+    index,
+    oldIndex,
+    newIndex,
+    rowsLength
+  } = _ref;
+  const isMovingDown = newIndex > oldIndex;
+  let dropIndex, normalizedDropIndex, dropPosition;
+
+  if (isMovingDown) {
+    dropIndex = newIndex < index ? newIndex : newIndex + 1;
+  } else {
+    dropIndex = newIndex <= index ? newIndex - 1 : newIndex;
+  }
+
+  normalizedDropIndex = dropIndex;
+  dropPosition = isMovingDown ? 'downward' : 'upward';
+
+  if (dropIndex < 0) {
+    normalizedDropIndex = 0;
+    dropPosition = 'downward';
+  } else if (dropIndex >= rowsLength) {
+    normalizedDropIndex = rowsLength - 1;
+    dropPosition = 'upward';
+  }
+
+  return {
+    index: normalizedDropIndex,
+    position: dropPosition
+  };
+}

package/es/platform/client-actions/translators/client-actions-translator/index.js

@@ -20,8 +20,11 @@ export default class ClientActionsTranslator {
   }
 
   static transform(actions, context) {
-    const resolvedActions = ActionContextResolver.resolveActions(actions, context);
-    const evaluatedActions = resolvedActions.filter(action => ConditionResolver.evaluateCondition(action.conditions, context, action.id));
+    const replacementContext = {
+      "@context": context
+    };
+    const resolvedActions = ActionContextResolver.resolveActions(actions, replacementContext);
+    const evaluatedActions = resolvedActions.filter(action => ConditionResolver.evaluateCondition(action.conditions, replacementContext, action.id));
     const finalTransformedActions = evaluatedActions.map(action => this.transformToActionViewModel(action));
     return finalTransformedActions;
   }

package/es/platform/client-actions/translators/condition-resolver/field-evaluators/GetResolvedContextFieldValue.js

@@ -1,6 +1,7 @@
+import TemplateResolver from "../../../template-resolver";
 export function getResolvedContextFieldValue(context, field) {
-  if (field.includes(".")) {
-    let value = field.split(".").reduce((obj, key) => obj && obj[key], context);
+  if (field.includes('.')) {
+    let value = TemplateResolver.replaceContextVariables(field, context);
     return value;
   }
 

package/es/platform/client-actions/translators/context-resolver/index.js

@@ -45,10 +45,7 @@ export class ActionContextResolver {
   }
 
   static resolveActions(actions, context) {
-    const replacementContext = {
-      "@context": context
-    };
-    return actions ? actions.map(action => this.resolveAction(action, replacementContext)) : [];
+    return actions ? actions.map(action => this.resolveAction(action, context)) : [];
   }
 
 }

package/es/platform/components/form-connected/frameworks/FormConnectedFactory.js

@@ -0,0 +1,33 @@
+import Properties from "../../../../cc/form-connected/Properties";
+import { createCustomComponent } from "../../../../library/custom-component";
+import ZHttpBehaviourFactory from "../../../zhttp/frameworks/ZHttpBehaviourFactory";
+import RecordBehaviourFactory from "../../../zrecord/frameworks/RecordBehaviourFactory";
+import FormConnectedView from "./FormConnectedView";
+import defaultDataBroker from "../../../data-source";
+import DataBrokerBehaviourFactory from "../../../zdata-source/frameworks/DataBrokerBehaviourFactory";
+import FormTranslator from "../../../zform/adapters/presenter/FormTranslator";
+import ZFormBehaviourFactory from "../../../zform/frameworks/ui/ZFormBehaviourFactory";
+import FieldValidationBehaviourFactory from "../../../../library/behaviours/field-validation/frameworks/ui/FieldValidationBehaviourFactory";
+import EventHandlersfactory from "./EventHandlersFactory";
+export default class FormConnectedFactory {
+  static create(_ref) {
+    let {
+      name,
+      customValidators,
+      dataBroker = defaultDataBroker,
+      eventHandlers = {},
+      View = FormConnectedView
+    } = _ref;
+    return createCustomComponent({
+      name: name,
+      View: View,
+      properties: Properties,
+      eventHandlers: EventHandlersfactory.create(eventHandlers),
+      transformState: FormTranslator.transformState,
+      behaviours: [ZHttpBehaviourFactory.create(), DataBrokerBehaviourFactory.create(), RecordBehaviourFactory.create(dataBroker.httpTemplates), FieldValidationBehaviourFactory.create(), ZFormBehaviourFactory.create({
+        customValidators
+      })]
+    });
+  }
+
+}

package/es/{desk-frameworks → platform/components}/form-connected/frameworks/FormConnectedView.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Form from "../../../library/dot/components/form/frameworks/ui/Form";
+import Form from "../../../../library/dot/components/form/frameworks/ui/Form";
 
 function View(_ref, ref) {
   let {

package/es/{desk-frameworks → platform/components}/form-connected/frameworks/FormSdkFactory.js

@@ -2,8 +2,7 @@
 export default class FormSdkFactory {
   static create(_ref) {
     let {
-      state,
-      dispatch
+      state
     } = _ref;
     return {
       zform: {
@@ -12,21 +11,11 @@ export default class FormSdkFactory {
         },
         getFieldValue: name => {
           let field = state.behaviours.zform.sections.flatMap(section => section.fields).find(field => field.name === name);
-
-          if (field) {
-            return field.value;
-          }
-
-          return null;
+          return field ? field.value : null;
         },
         getFieldValidationResult: name => {
           let field = state.behaviours.zform.sections.flatMap(section => section.fields).find(field => field.name === name);
-
-          if (field) {
-            return field.errorMessage;
-          }
-
-          return null;
+          return field ? field.errorMessage : null;
         }
       }
     };

package/es/platform/components/table-connected/adapters/controllers/ColumnChooserOpenedController.js

@@ -0,0 +1,28 @@
+import AbstractController from "./AbstractController";
+import { COLUMN_CHOOSER_BEHAVIOUR_OPENED } from "../../../../../bc/column-chooser/Constants";
+export default class ColumnChooserOpenedController extends AbstractController {
+  handle(event) {
+    const state = event.state;
+    const {
+      zfield
+    } = state.behaviours;
+    const {
+      fields: availableFields,
+      selectedFields
+    } = zfield;
+    const columnChooserOptionsOrder = selectedFields;
+    availableFields.forEach(field => {
+      if (!selectedFields.includes(field.name)) {
+        columnChooserOptionsOrder.push(field.name);
+      }
+    });
+    event.dispatch({
+      type: COLUMN_CHOOSER_BEHAVIOUR_OPENED,
+      payload: {
+        order: columnChooserOptionsOrder,
+        selectedArray: selectedFields
+      }
+    });
+  }
+
+}

package/es/{desk-frameworks → platform/components}/table-connected/adapters/controllers/ColumnChooserUpdateController.js

@@ -1,15 +1,16 @@
 import AbstractController from "./AbstractController";
-import { FIELD_EXECUTE } from "../../../../bc/zfield/Constants";
+import { FIELD_EXECUTE } from "../../../../../bc/zfield/Constants";
 export default class ColumnChooserUpdateController extends AbstractController {
   handle(event) {
     const {
-      state
+      state,
+      dispatch
     } = event;
     const {
       context
     } = state.properties;
     const fields = event.action.payload.selectedArray;
-    const action = {
+    dispatch({
       type: FIELD_EXECUTE,
       payload: {
         actionName: 'updateSelectedFields',
@@ -18,8 +19,7 @@ export default class ColumnChooserUpdateController extends AbstractController {
         },
         apiName: 'updateSelectedFields'
       }
-    };
-    event.dispatch(action);
+    });
   }
 
 }

package/es/platform/components/table-connected/adapters/controllers/ReOrderFinishController.js

@@ -0,0 +1,21 @@
+import AbstractController from "./AbstractController";
+import { ZLIST_RECORD_REORDER } from "../../../../../bc/zlist/Constants";
+export class ReOrderFinishController extends AbstractController {
+  handle(event) {
+    const {
+      dispatch
+    } = event;
+    const {
+      oldIndex,
+      newIndex
+    } = event.action.payload;
+    dispatch({
+      type: ZLIST_RECORD_REORDER,
+      payload: {
+        oldIndex,
+        newIndex
+      }
+    });
+  }
+
+}

package/es/{desk-frameworks → platform/components}/table-connected/adapters/controllers/ResizeByMouseController.js

@@ -1,4 +1,4 @@
-import { RESIZE_MOUSE } from "../../../../bc/table-column-resizer/Constants";
+import { RESIZE_MOUSE } from "../../../../../bc/table-column-resizer/Constants";
 import AbstractController from "./AbstractController";
 export default class ResizeByMouseController extends AbstractController {
   handle(event) {

package/es/{desk-frameworks → platform/components}/table-connected/adapters/controllers/ResizeEndController.js

@@ -1,4 +1,4 @@
-import { RESIZE_ENDED } from "../../../../bc/table-column-resizer/Constants";
+import { RESIZE_ENDED } from "../../../../../bc/table-column-resizer/Constants";
 import AbstractController from "./AbstractController";
 export default class ResizeEndController extends AbstractController {
   handle(event) {

package/es/{desk-frameworks → platform/components}/table-connected/adapters/controllers/ResizeFinishController.js

@@ -1,4 +1,4 @@
-import { STORE_REQUESTED } from "../../../../bc/local-storage/Constants";
+import { STORE_REQUESTED } from "../../../../../bc/local-storage/Constants";
 import AbstractController from "./AbstractController";
 export class ResizeFinishController extends AbstractController {
   handle(event) {

package/es/{desk-frameworks → platform/components}/table-connected/adapters/controllers/ResizeStartController.js

@@ -1,4 +1,4 @@
-import { RESIZE_STARTED } from "../../../../bc/table-column-resizer/Constants";
+import { RESIZE_STARTED } from "../../../../../bc/table-column-resizer/Constants";
 import AbstractController from "./AbstractController";
 export default class ResizeStartController extends AbstractController {
   handle(event) {
@@ -11,7 +11,7 @@ export default class ResizeStartController extends AbstractController {
       mouseEvent
     } = event.action.payload;
     const mouseX = mouseEvent.clientX;
-    const lineClientRect = lineElement.getBoundingClientRect(); // HACK: calculate the initial position of the line element because of lineElement will not be read form entity because of clean architecture. 
+    const lineClientRect = lineElement.getBoundingClientRect(); // HACK: calculate the initial position of the line element because of lineElement will not be read form entity because of clean architecture.
     // lineElement is not part of the entity, it is part of the view.
     // Note: the reason for this (lineClientRect.width / 2) is , Even line is 2 or 3 px thick we need to take center position.
 

package/es/{desk-frameworks → platform/components}/table-connected/adapters/controllers/ScrollController.js

@@ -1,4 +1,4 @@
-import { RESIZE_SCROLL } from "../../../../bc/table-column-resizer/Constants";
+import { RESIZE_SCROLL } from "../../../../../bc/table-column-resizer/Constants";
 import AbstractController from "./AbstractController";
 export default class ScrollController extends AbstractController {
   handle(event) {