Added component DateTime field (#56)

* Added component DateTime field

* Added correct PR number to changelog

.gitignore

@@ -15,3 +15,4 @@ var
 /include
 /.Python
 /lib
+*.swp

docs/Changelog.rst

@@ -8,6 +8,7 @@
 - #51 Browser history aware listings
 - #50 Support child folder items to any depth
 - #49 Set ajax folderitems to a readonly transaction
+- #56 Added support for DateTime fields
 
 
 2.0.0rc3 (2021-01-04)

webpack/app/components/DateTime.coffee

@@ -0,0 +1,76 @@
+import React from "react"
+
+
+class DateTime extends React.Component
+
+  ###*
+   * DateTime field for the Listing Table
+   *
+   * A datetime field is identified by the column type "datetime" in the listing
+   * view, e.g.  `self.columns = {"Result": {"type": "datetime"}, ... }`
+   *
+  ###
+  constructor: (props) ->
+    super(props)
+
+    # remember the initial value
+    @state =
+      value: props.defaultValue
+
+    # bind event handler to the current context
+    @on_change = @on_change.bind @
+
+  ###*
+   * componentDidUpdate(prevProps, prevState, snapshot)
+   * This is invoked immediately after updating occurs.
+   * This method is not called for the initial render.
+  ###
+  componentDidUpdate: (prevProps) ->
+    if @props.defaultValue != prevProps.defaultValue
+      @setState value: @props.defaultValue
+
+  ###*
+   * Event handler when the value changed of the datetime field
+   * @param event {object} ReactJS event object
+  ###
+  on_change: (event) ->
+    el = event.currentTarget
+    # Extract the UID attribute
+    uid = el.getAttribute("uid")
+    # Extract the column_key attribute
+    name = el.getAttribute("column_key") or el.name
+    # Extract the value of the datetime field
+    value = el.value
+
+    # store the new value
+    @setState
+      value: value
+
+    console.debug "DateTime::on_change: value=#{value}"
+
+    # Call the *update* field handler
+    if @props.update_editable_field
+      @props.update_editable_field uid, name, value, @props.item
+
+  render: ->
+    <span className="form-group">
+      {@props.before and <span className="before_field" dangerouslySetInnerHTML={{__html: @props.before}}></span>}
+      <input type="datetime-local"
+             size={@props.size or 20}
+             uid={@props.uid}
+             name={@props.name}
+             value={@state.value}
+             column_key={@props.column_key}
+             title={@props.title}
+             disabled={@props.disabled}
+             required={@props.required}
+             className={@props.className}
+             placeholder={@props.placeholder}
+             onChange={@props.onChange or @on_change}
+             tabIndex={@props.tabIndex}
+             {...@props.attrs}/>
+      {@props.after and <span className="after_field" dangerouslySetInnerHTML={{__html: @props.after}}></span>}
+    </span>
+
+
+export default DateTime

webpack/app/components/TableCell.coffee

@@ -9,6 +9,7 @@ import CalculatedField from "./CalculatedField.coffee"
 import ReadonlyField from "./ReadonlyField.coffee"
 import Select from "./Select.coffee"
 import StringField from "./StringField.coffee"
+import DateTime from "./DateTime.coffee"
 
 
 class TableCell extends React.Component
@@ -25,6 +26,7 @@ class TableCell extends React.Component
       "multichoice": ":list"
       "numeric": ":records"
       "string": ":records"
+      "datetime": ":records"
       "readonly": ""
       "default": ":records"
     }
@@ -254,7 +256,7 @@ class TableCell extends React.Component
     if @is_interimfield()
       return "interim"
 
-    # check if the field is a string field
+    # check if the field is a string or datetime field
     if resultfield
       return item.result_type or "numeric"
 
@@ -449,6 +451,54 @@ class TableCell extends React.Component
         {...props}
         />)
 
+  ###*
+   * Creates a datetime field component
+   * @param props {object} properties passed to the component
+   * @returns DateTime component
+  ###
+  create_datetime_field: ({props}={}) ->
+    column_key = @get_column_key()
+    item = @get_item()
+    props ?= {}
+
+    name = @get_name()
+    value = @get_value()
+    formatted_value = @get_formatted_value()
+    unit = @get_formatted_unit()
+    uid = @get_uid()
+    converter = @ZPUBLISHER_CONVERTER["string"]
+    fieldname = name + converter
+    title = @props.column.title or column_key
+    selected = @is_selected()
+    disabled = @is_disabled()
+    required = @is_required()
+    css_class = "form-control input-sm"
+    if required then css_class += " required"
+    result_type = "date"
+
+    return (
+      <DateTime
+        key={name}
+        uid={uid}
+        item={item}
+        name={fieldname}
+        defaultValue={value}
+        column_key={column_key}
+        title={title}
+        formatted_value={formatted_value}
+        placeholder={title}
+        selected={selected}
+        disabled={disabled}
+        required={required}
+        className={css_class}
+        results_type={result_type}
+        after={unit}
+        update_editable_field={@props.update_editable_field}
+        save_editable_field={@props.save_editable_field}
+        tabIndex={@props.tabIndex}
+        {...props}
+        />)
+
   ###*
    * Creates a select field component
    * @param props {object} properties passed to the component
@@ -668,6 +718,8 @@ class TableCell extends React.Component
       field = field.concat @create_numeric_field()
     else if type == "string"
       field = field.concat @create_string_field()
+    else if type == "datetime"
+      field = field.concat @create_datetime_field()
 
     return field
 

webpack/webpack.config.js

@@ -66,7 +66,7 @@ module.exports = {
             drop_console: true,
             passes: 2,
           }
-	      },
+	    },
       }),
       // https://webpack.js.org/plugins/css-minimizer-webpack-plugin/
       new CssMinimizerPlugin({