[WC-1361]: timeline grouping bug (#180)

Author: Illia Obukhau

packages/pluggableWidgets/timeline-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We fixed incorrect month grouping in custom visualization mode
+
 ## [3.1.0] - 2021-12-23
 
 ### Added

packages/pluggableWidgets/timeline-web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "timeline-web",
   "widgetName": "Timeline",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Shows timeline",
   "copyright": "© Mendix Technology BV 2022. All rights reserved.",
   "author": "Mendix",

packages/pluggableWidgets/timeline-web/src/Timeline.tsx

@@ -3,7 +3,7 @@ import { TimelineContainerProps } from "../typings/TimelineProps";
 import "./ui/Timeline.scss";
 import { ActionValue, WebIcon } from "mendix";
 import TimelineComponent, { getGroupHeaderByType } from "./components/TimelineComponent";
-import { getHeaderOption } from "./utils/utils";
+import { getGroupByMethodForCustomMode, getHeaderOption } from "./utils/utils";
 
 export interface BasicItemType {
     icon?: WebIcon;
@@ -44,7 +44,11 @@ export default function Timeline(props: TimelineContainerProps): ReactElement {
                     action: props.onClick?.get(item)
                 };
             } else {
-                groupKey = getGroupHeaderByType(groupAttribute?.formatter, props.groupByKey, date);
+                groupKey = getGroupHeaderByType(
+                    groupAttribute?.formatter,
+                    getGroupByMethodForCustomMode(props.groupByKey),
+                    date
+                );
                 constructedItem = {
                     icon: props.customIcon?.get(item),
                     groupHeader: props.customGroupHeader?.get(item),

packages/pluggableWidgets/timeline-web/src/Timeline.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8" ?>
-<widget id="com.mendix.widget.web.timeline.Timeline" pluginWidget="true" needsEntityContext="true" offlineCapable="true" supportedPlatform="Web" xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../../../../node_modules/mendix/custom_widget.xsd">
+<widget id="com.mendix.widget.web.timeline.Timeline" pluginWidget="true" needsEntityContext="true" offlineCapable="true" supportedPlatform="Web" xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../node_modules/mendix/custom_widget.xsd">
     <name>Timeline</name>
     <description>Shows vertical timeline with events</description>
     <studioProCategory>Display</studioProCategory>
@@ -61,7 +61,7 @@
                     <description>Format group header with current language's format</description>
                     <enumerationValues>
                         <enumerationValue key="dayName">Day name</enumerationValue>
-                        <enumerationValue key="dayMonth">Day &amp; month</enumerationValue>
+                        <enumerationValue key="dayMonth">Day and month</enumerationValue>
                         <enumerationValue key="fullDate">Day, month, year</enumerationValue>
                     </enumerationValues>
                 </property>
@@ -70,12 +70,12 @@
                     <description />
                     <enumerationValues>
                         <enumerationValue key="month">Month</enumerationValue>
-                        <enumerationValue key="monthYear">Month &amp; year</enumerationValue>
+                        <enumerationValue key="monthYear">Month and year</enumerationValue>
                     </enumerationValues>
                 </property>
                 <property key="ungroupedEventsPosition" type="enumeration" defaultValue="end">
                     <caption>Ungrouped events position</caption>
-                    <description>Position in the list of events without a date &amp; time</description>
+                    <description>Position in the list of events without a date and time</description>
                     <enumerationValues>
                         <enumerationValue key="beginning">Beginning of the timeline</enumerationValue>
                         <enumerationValue key="end">End of the timeline</enumerationValue>

packages/pluggableWidgets/timeline-web/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Timeline" version="3.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Timeline" version="3.1.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Timeline.xml" />
         </widgetFiles>

packages/pluggableWidgets/timeline-web/src/utils/utils.ts

@@ -1,4 +1,4 @@
-import { TimelineContainerProps } from "../../typings/TimelineProps";
+import { GroupByKeyEnum, GroupByMonthOptionsEnum, TimelineContainerProps } from "../../typings/TimelineProps";
 
 export type GroupHeaderConfig = Pick<
     TimelineContainerProps,
@@ -8,3 +8,11 @@ export type GroupHeaderConfig = Pick<
 export function getHeaderOption({ groupByKey, groupByDayOptions, groupByMonthOptions }: GroupHeaderConfig) {
     return groupByKey === "day" ? groupByDayOptions : groupByKey === "month" ? groupByMonthOptions : "year";
 }
+
+export function getGroupByMethodForCustomMode(groupByKey: GroupByKeyEnum): GroupByMonthOptionsEnum | GroupByKeyEnum {
+    if (groupByKey === "month") {
+        return "monthYear";
+    }
+
+    return groupByKey;
+}

packages/pluggableWidgets/timeline-web/typings/TimelineProps.d.ts

@@ -40,7 +40,11 @@ export interface TimelineContainerProps {
 }
 
 export interface TimelinePreviewProps {
+    /**
+     * @deprecated Deprecated since version 9.18.0. Please use class property instead.
+     */
     className: string;
+    class: string;
     style: string;
     styleObject?: CSSProperties;
     readOnly: boolean;