add time component in dropdown #1549

Author: iamfaran

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComp.tsx

@@ -1,5 +1,6 @@
 import { CellProps } from "components/table/EditableCell";
 import { DateTimeComp } from "comps/comps/tableComp/column/columnTypeComps/columnDateTimeComp";
+import { TimeComp } from "./columnTypeComps/columnTimeComp";
 import { ButtonComp } from "comps/comps/tableComp/column/simpleColumnTypeComps";
 import { withType } from "comps/generators";
 import { trans } from "i18n";
@@ -67,6 +68,11 @@ const actionOptions = [
     label: trans("table.image"),
     value: "image",
   },
+  {
+    label: trans("table.time"),
+    value: "time",
+  },
+
   {
     label: trans("table.date"),
     value: "date",
@@ -116,6 +122,7 @@ export const ColumnTypeCompMap = {
   rating: RatingComp,
   progress: ProgressComp,
   date: DateComp,
+  time: TimeComp,
 };
 
 type ColumnTypeMapType = typeof ColumnTypeCompMap;

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTimeComp.tsx

@@ -0,0 +1,71 @@
+import {
+    ColumnTypeCompBuilder,
+    ColumnTypeViewFn,
+  } from "comps/comps/tableComp/column/columnTypeCompBuilder";
+  import { ColumnValueTooltip } from "comps/comps/tableComp/column/simpleColumnTypeComps";
+  import { StringControl } from "comps/controls/codeControl";
+  import { withDefault } from "comps/generators";
+  import { formatPropertyView } from "comps/utils/propertyUtils";
+  import { trans } from "i18n";
+  import {
+    TIME_FORMAT,
+    formatTimestamp,
+    timestampToHumanReadable,
+  } from "util/dateTimeUtils";
+  import { DateEdit } from "./columnDateComp";
+  
+  const childrenMap = {
+    text: StringControl,
+    format: withDefault(StringControl, TIME_FORMAT),
+    inputFormat: withDefault(StringControl, TIME_FORMAT),
+  };
+  
+  let inputFormat = TIME_FORMAT;
+  
+  const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) =>
+    props.text;
+  
+  export const TimeComp = (function () {
+    return new ColumnTypeCompBuilder(
+      childrenMap,
+      (props, dispatch) => {
+        inputFormat = props.inputFormat;
+        const value = props.changeValue ?? getBaseValue(props, dispatch);
+  
+        // Convert value to a number if it's a valid timestamp
+        const timestamp = Number(value);
+        if (!isNaN(timestamp)) {
+          return formatTimestamp(timestamp);
+        }
+  
+        return timestampToHumanReadable(timestamp) ?? value; // Returns readable time
+      },
+      (nodeValue) => {
+        const timestamp = Number(nodeValue.text.value);
+        return !isNaN(timestamp)
+          ? timestampToHumanReadable(timestamp) // Convert to readable format if valid timestamp
+          : nodeValue.text.value; // Otherwise, return original value
+      },
+      getBaseValue
+    )
+      .setEditViewFn((props) => (
+        <DateEdit
+          value={props.value}
+          onChange={props.onChange}
+          onChangeEnd={props.onChangeEnd}
+          showTime={true} // Ensures only time is shown
+          inputFormat={inputFormat}
+        />
+      ))
+      .setPropertyViewFn((children) => (
+        <>
+          {children.text.propertyView({
+            label: trans("table.columnValue"),
+            tooltip: ColumnValueTooltip,
+          })}
+          {formatPropertyView({ children, placeholder: TIME_FORMAT })}
+        </>
+      ))
+      .build();
+  })();
+  

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -2029,6 +2029,7 @@ export const en = {
     "tag": "Tag",
     "select": "Select",
     "dropdown": "Dropdown",
+    "time" : "Time",
     "date": "Date",
     "dateTime": "Date Time",
     "badgeStatus": "Status",