big refactor of headerMenu

Author: RafaelGB

src/components/HeaderMenu.tsx

@@ -5,12 +5,7 @@ import {
   StyleVariables,
 } from "helpers/Constants";
 import { dbTrim, c, getLabelHeader } from "helpers/StylesHelper";
-import TrashIcon from "components/img/Trash";
-import TextIcon from "components/img/Text";
-import MultiIcon from "components/img/Multi";
 import HashIcon from "components/img/Hash";
-import TaskIcon from "components/img/TaskIcon";
-import TagsIcon from "components/img/TagsIcon";
 import CalendarTimeIcon from "components/img/CalendarTime";
 import CalendarIcon from "components/img/CalendarIcon";
 import AdjustmentsIcon from "components/img/AdjustmentsIcon";
@@ -111,89 +106,8 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
       setKeyState: setkeyState,
     },
   };
-  const typesTest =
-    header_action_types_section.run(headerActionResponse).buttons;
-  const types = [
-    {
-      onClick: (e: any) => {
-        dispatch({
-          type: ActionTypes.UPDATE_COLUMN_TYPE,
-          columnId: column.id,
-          dataType: DataTypes.SELECT,
-        });
-        setShowType(false);
-        setExpanded(false);
-      },
-      icon: <MultiIcon />,
-      label: DataTypes.SELECT,
-    },
-    {
-      onClick: (e: any) => {
-        dispatch({
-          type: ActionTypes.UPDATE_COLUMN_TYPE,
-          columnId: column.id,
-          dataType: DataTypes.TAGS,
-        });
-        setShowType(false);
-        setExpanded(false);
-      },
-      icon: <TagsIcon />,
-      label: DataTypes.TAGS,
-    },
-    {
-      onClick: (e: any) => {
-        dispatch({
-          type: ActionTypes.UPDATE_COLUMN_TYPE,
-          columnId: column.id,
-          dataType: DataTypes.TEXT,
-        });
-        setShowType(false);
-        setExpanded(false);
-      },
-      icon: <TextIcon />,
-      label: DataTypes.TEXT,
-    },
-    {
-      onClick: (e: any) => {
-        dispatch({
-          type: ActionTypes.UPDATE_COLUMN_TYPE,
-          columnId: column.id,
-          dataType: DataTypes.NUMBER,
-        });
-        setShowType(false);
-        setExpanded(false);
-      },
-      icon: <HashIcon />,
-      label: DataTypes.NUMBER,
-    },
-    {
-      onClick: (e: any) => {
-        dispatch({
-          type: ActionTypes.UPDATE_COLUMN_TYPE,
-          columnId: column.id,
-          dataType: DataTypes.CALENDAR,
-        });
-        setShowType(false);
-        setExpanded(false);
-      },
-      icon: <CalendarIcon />,
-      label: MetadataLabels.CALENDAR,
-    },
-    {
-      onClick: (e: any) => {
-        dispatch({
-          type: ActionTypes.UPDATE_COLUMN_TYPE,
-          columnId: column.id,
-          dataType: DataTypes.CALENDAR_TIME,
-        });
-        setShowType(false);
-        setExpanded(false);
-      },
-      icon: <CalendarTimeIcon />,
-      label: MetadataLabels.CALENDAR_TIME,
-    },
-  ];
-  types.push(...typesTest);
+  const types = header_action_types_section.run(headerActionResponse).buttons;
+
   const typePopper = usePopper(typeReferenceElement, typePopperElement, {
     placement: "right",
     strategy: "fixed",

src/components/headerActions/HeaderActiontypesSection.ts

@@ -1,14 +1,26 @@
 import { HeaderActionResponse } from "cdm/HeaderActionModel";
 import { AbstractChain, AbstractHandler } from "patterns/AbstractFactoryChain";
 import CheckboxTypeHandlerAction from "components/headerActions/handlers/types/CheckboxTypeHeaderAction";
+import TextTypeHeaderAction from "components/headerActions/handlers/types/TextTypeHeaderAction";
+import SelectTypeHeaderAction from "components/headerActions/handlers/types/SelectTypeHeaderAction";
+import TagsTypeHeaderAction from "components/headerActions/handlers/types/TagsTypeHeaderAction";
+import NumberTypeHeaderAction from "components/headerActions/handlers/types/NumberTypeHeaderAction";
+import DateTypeHeaderAction from "components/headerActions/handlers/types/DateTypeHeaderAction";
+import DatetimeTypeHeaderAction from "components/headerActions/handlers/types/DatetimeTypeHeaderAction";
 class HeaderActionTypesSection extends AbstractChain<HeaderActionResponse> {
     protected customHandle(abstractResponse: HeaderActionResponse): HeaderActionResponse {
         return abstractResponse;
     }
 
     protected getHandlers(): AbstractHandler<HeaderActionResponse>[] {
         return [
-            new CheckboxTypeHandlerAction()
+            new TextTypeHeaderAction(),
+            new NumberTypeHeaderAction(),
+            new SelectTypeHeaderAction(),
+            new TagsTypeHeaderAction(),
+            new CheckboxTypeHandlerAction(),
+            new DateTypeHeaderAction(),
+            new DatetimeTypeHeaderAction(),
         ];
     }
 }

src/components/headerActions/handlers/types/DateTypeHeaderAction.tsx

@@ -0,0 +1,33 @@
+import { HeaderActionResponse } from "cdm/HeaderActionModel";
+import { AbstractHeaderAction } from "components/headerActions/handlers/AbstractHeaderAction";
+import CalendarIcon from "components/img/CalendarIcon";
+import React from "react";
+import { ActionTypes, DataTypes, MetadataLabels } from "helpers/Constants";
+
+export default class DateTypeHeaderAction extends AbstractHeaderAction {
+  globalHeaderActionResponse: HeaderActionResponse;
+  handle(headerActionResponse: HeaderActionResponse): HeaderActionResponse {
+    this.globalHeaderActionResponse = headerActionResponse;
+    this.addDateType();
+    return this.goNext(this.globalHeaderActionResponse);
+  }
+  private addDateType() {
+    const { hooks } = this.globalHeaderActionResponse;
+    const { initialState, column } =
+      this.globalHeaderActionResponse.headerMenuProps.headerProps;
+    const checkBoxType = {
+      onClick: (e: any) => {
+        initialState.dispatch({
+          type: ActionTypes.UPDATE_COLUMN_TYPE,
+          columnId: column.id,
+          dataType: DataTypes.CALENDAR,
+        });
+        hooks.setShowType(false);
+        hooks.setExpanded(false);
+      },
+      icon: <CalendarIcon />,
+      label: MetadataLabels.CALENDAR,
+    };
+    this.globalHeaderActionResponse.buttons.push(checkBoxType);
+  }
+}

src/components/headerActions/handlers/types/DatetimeTypeHeaderAction.tsx

@@ -0,0 +1,34 @@
+import { HeaderActionResponse } from "cdm/HeaderActionModel";
+import { AbstractHeaderAction } from "components/headerActions/handlers/AbstractHeaderAction";
+import React from "react";
+import { ActionTypes, DataTypes, MetadataLabels } from "helpers/Constants";
+import TaskIcon from "components/img/TaskIcon";
+import CalendarTimeIcon from "components/img/CalendarTime";
+
+export default class DatetimeTypeHeaderAction extends AbstractHeaderAction {
+  globalHeaderActionResponse: HeaderActionResponse;
+  handle(headerActionResponse: HeaderActionResponse): HeaderActionResponse {
+    this.globalHeaderActionResponse = headerActionResponse;
+    this.addDatetimeType();
+    return this.goNext(this.globalHeaderActionResponse);
+  }
+  private addDatetimeType() {
+    const { hooks } = this.globalHeaderActionResponse;
+    const { initialState, column } =
+      this.globalHeaderActionResponse.headerMenuProps.headerProps;
+    const checkBoxType = {
+      onClick: (e: any) => {
+        initialState.dispatch({
+          type: ActionTypes.UPDATE_COLUMN_TYPE,
+          columnId: column.id,
+          dataType: DataTypes.CALENDAR_TIME,
+        });
+        hooks.setShowType(false);
+        hooks.setExpanded(false);
+      },
+      icon: <CalendarTimeIcon />,
+      label: MetadataLabels.CALENDAR_TIME,
+    };
+    this.globalHeaderActionResponse.buttons.push(checkBoxType);
+  }
+}

src/components/headerActions/handlers/types/NumberTypeHeaderAction.tsx

@@ -0,0 +1,33 @@
+import { HeaderActionResponse } from "cdm/HeaderActionModel";
+import { AbstractHeaderAction } from "components/headerActions/handlers/AbstractHeaderAction";
+import HashIcon from "components/img/Hash";
+import React from "react";
+import { ActionTypes, DataTypes } from "helpers/Constants";
+
+export default class NumberTypeHeaderAction extends AbstractHeaderAction {
+  globalHeaderActionResponse: HeaderActionResponse;
+  handle(headerActionResponse: HeaderActionResponse): HeaderActionResponse {
+    this.globalHeaderActionResponse = headerActionResponse;
+    this.addNumberType();
+    return this.goNext(this.globalHeaderActionResponse);
+  }
+  private addNumberType() {
+    const { hooks } = this.globalHeaderActionResponse;
+    const { initialState, column } =
+      this.globalHeaderActionResponse.headerMenuProps.headerProps;
+    const checkBoxType = {
+      onClick: (e: any) => {
+        initialState.dispatch({
+          type: ActionTypes.UPDATE_COLUMN_TYPE,
+          columnId: column.id,
+          dataType: DataTypes.NUMBER,
+        });
+        hooks.setShowType(false);
+        hooks.setExpanded(false);
+      },
+      icon: <HashIcon />,
+      label: DataTypes.NUMBER,
+    };
+    this.globalHeaderActionResponse.buttons.push(checkBoxType);
+  }
+}

src/components/headerActions/handlers/types/SelectTypeHeaderAction.tsx

@@ -0,0 +1,33 @@
+import { HeaderActionResponse } from "cdm/HeaderActionModel";
+import { AbstractHeaderAction } from "components/headerActions/handlers/AbstractHeaderAction";
+import MultiIcon from "components/img/Multi";
+import React from "react";
+import { ActionTypes, DataTypes } from "helpers/Constants";
+
+export default class SelectTypeHeaderAction extends AbstractHeaderAction {
+  globalHeaderActionResponse: HeaderActionResponse;
+  handle(headerActionResponse: HeaderActionResponse): HeaderActionResponse {
+    this.globalHeaderActionResponse = headerActionResponse;
+    this.addSelectType();
+    return this.goNext(this.globalHeaderActionResponse);
+  }
+  private addSelectType() {
+    const { hooks } = this.globalHeaderActionResponse;
+    const { initialState, column } =
+      this.globalHeaderActionResponse.headerMenuProps.headerProps;
+    const selectType = {
+      onClick: (e: any) => {
+        initialState.dispatch({
+          type: ActionTypes.UPDATE_COLUMN_TYPE,
+          columnId: column.id,
+          dataType: DataTypes.SELECT,
+        });
+        hooks.setShowType(false);
+        hooks.setExpanded(false);
+      },
+      icon: <MultiIcon />,
+      label: DataTypes.SELECT,
+    };
+    this.globalHeaderActionResponse.buttons.push(selectType);
+  }
+}

src/components/headerActions/handlers/types/TagsTypeHeaderAction.tsx

@@ -0,0 +1,33 @@
+import { HeaderActionResponse } from "cdm/HeaderActionModel";
+import { AbstractHeaderAction } from "components/headerActions/handlers/AbstractHeaderAction";
+import React from "react";
+import { ActionTypes, DataTypes } from "helpers/Constants";
+import TagsIcon from "components/img/TagsIcon";
+
+export default class TagsTypeHeaderAction extends AbstractHeaderAction {
+  globalHeaderActionResponse: HeaderActionResponse;
+  handle(headerActionResponse: HeaderActionResponse): HeaderActionResponse {
+    this.globalHeaderActionResponse = headerActionResponse;
+    this.addTagsType();
+    return this.goNext(this.globalHeaderActionResponse);
+  }
+  private addTagsType() {
+    const { hooks } = this.globalHeaderActionResponse;
+    const { initialState, column } =
+      this.globalHeaderActionResponse.headerMenuProps.headerProps;
+    const checkBoxType = {
+      onClick: (e: any) => {
+        initialState.dispatch({
+          type: ActionTypes.UPDATE_COLUMN_TYPE,
+          columnId: column.id,
+          dataType: DataTypes.TAGS,
+        });
+        hooks.setShowType(false);
+        hooks.setExpanded(false);
+      },
+      icon: <TagsIcon />,
+      label: DataTypes.TAGS,
+    };
+    this.globalHeaderActionResponse.buttons.push(checkBoxType);
+  }
+}

src/components/headerActions/handlers/types/TextTypeHeaderAction.tsx

@@ -0,0 +1,33 @@
+import { HeaderActionResponse } from "cdm/HeaderActionModel";
+import { AbstractHeaderAction } from "components/headerActions/handlers/AbstractHeaderAction";
+import TextIcon from "components/img/Text";
+import React from "react";
+import { ActionTypes, DataTypes } from "helpers/Constants";
+
+export default class TextTypeHeaderAction extends AbstractHeaderAction {
+  globalHeaderActionResponse: HeaderActionResponse;
+  handle(headerActionResponse: HeaderActionResponse): HeaderActionResponse {
+    this.globalHeaderActionResponse = headerActionResponse;
+    this.addTextType();
+    return this.goNext(this.globalHeaderActionResponse);
+  }
+  private addTextType() {
+    const { hooks } = this.globalHeaderActionResponse;
+    const { initialState, column } =
+      this.globalHeaderActionResponse.headerMenuProps.headerProps;
+    const textBoxType = {
+      onClick: (e: any) => {
+        initialState.dispatch({
+          type: ActionTypes.UPDATE_COLUMN_TYPE,
+          columnId: column.id,
+          dataType: DataTypes.TEXT,
+        });
+        hooks.setShowType(false);
+        hooks.setExpanded(false);
+      },
+      icon: <TextIcon />,
+      label: DataTypes.TEXT,
+    };
+    this.globalHeaderActionResponse.buttons.push(textBoxType);
+  }
+}