implemented remainig field like date, date-time, tag and their valida…

…tions
ManageIQ · Jul 2, 2024 · d06f9dd · d06f9dd
1 parent 5abf820
commit d06f9dd
Show file tree

Hide file tree

Showing 7 changed files with 162 additions and 93 deletions.
diff --git a/app/javascript/components/service/ServiceValidator.js b/app/javascript/components/service/ServiceValidator.js
@@ -35,14 +35,22 @@ class ServiceValidator {
     return { valid: (data.field.required ? !!data.value : true), value: data.value !== '' };
   }
 
-  static date(data) {
-    console.log('date validation');
-    return { valid: true, value: data.value };
+  static date({ field, value }) {
+    const { day, month, year } = value;
+    const hasDate = !!((day && month && year));
+    return { valid: field.required ? hasDate : true, value: { day, month, year } };
+  }
+
+  static time({ field, value }) {
+    const { hour, minute } = value;
+    const hasMinute = !!((hour && { hour, minute }));
+    return { valid: field.required ? hasMinute : true, value: { hour, minute } };
   }
 
   static dateTime(data) {
-    console.log('dateTime validation');
-    return { valid: true, value: data.value };
+    const date = this.date(data);
+    const time = this.time(data);
+    return { valid: data.field.required ? !!(date.valid && time.valid) : true, value: { ...date.value, ...time.value } };
   }
 
   static dropDown(data) {
@@ -52,13 +60,13 @@ class ServiceValidator {
   }
 
   static radio(data) {
-    console.log('radio validation');
-    return { valid: true, value: data.value };
+    return { valid: data.field.required ? !!data.value : true, value: data.value };
   }
 
   static tag(data) {
-    console.log('tag validation');
-    return { valid: true, value: data.value };
+    const isMulti = !!(data.field.options && !data.field.options.force_single_value);
+    const valid = isMulti ? !!(data.value.length > 0) : !!data.value.id;
+    return { valid: data.field.required ? valid : true, value: data.value };
   }
 
   static textBox(data) {
@@ -74,7 +82,6 @@ class ServiceValidator {
   }
 
   static default(data) {
-    console.log('default validation', data);
     return { valid: true, value: data.value };
   }
 }

diff --git a/app/javascript/components/service/dialogFieldItems/DateField.jsx b/app/javascript/components/service/dialogFieldItems/DateField.jsx
@@ -1,22 +1,22 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { DatePicker, DatePickerInput } from 'carbon-components-react';
-import { requiredLabel, fieldComponentId, currentDateTime } from '../helper';
-import FieldLabel from './FieldLabel';
+import {
+  requiredLabel, fieldComponentId, extractDate, dateString,
+} from '../helper';
 import ServiceContext from '../ServiceContext';
 import ServiceValidator from '../ServiceValidator';
 
 /** Component to render the Radio buttons in the Service/DialogTabs/DialogGroups/DialogFields component */
 const DateField = ({ field }) => {
   const { data, setData } = useContext(ServiceContext);
   const fieldData = data.dialogFields[field.name];
-  const { currentDate } = currentDateTime();
-  console.log('fieldData', fieldData);
-  console.log('radio', field.values);
+  const selectedDate = dateString(fieldData.value);
 
-  const onChange = (checked) => {
+  const onChange = (selectedItem) => {
     if (data.isOrderServiceForm) {
-      const { valid, value } = ServiceValidator.validateField({ value: checked, field, isOrderServiceForm: data.isOrderServiceForm });
+      const extractedDate = extractDate(selectedItem[0]);
+      const { valid, value } = ServiceValidator.validateField({ field, value: extractedDate, isOrderServiceForm: data.isOrderServiceForm });
       data.dialogFields[field.name] = { value, valid };
       setData({
         ...data,
@@ -28,7 +28,7 @@ const DateField = ({ field }) => {
 
   return (
     <div className="field-date">
-      <DatePicker datePickerType="single" value={currentDate}>
+      <DatePicker datePickerType="single" value={selectedDate} onChange={onChange}>
         <DatePickerInput
           placeholder="mm/dd/yyyy"
           labelText={field.label}

diff --git a/app/javascript/components/service/dialogFieldItems/DateTimeField.jsx b/app/javascript/components/service/dialogFieldItems/DateTimeField.jsx
@@ -1,48 +1,60 @@
-import React, { useState, useContext } from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { DatePicker, Dropdown, DatePickerInput } from 'carbon-components-react';
-import { requiredLabel, fieldComponentId, currentDateTime } from '../helper';
-import FieldLabel from './FieldLabel';
+import {
+  requiredLabel, fieldComponentId, currentDateTime, dateTimeString, extractDateTime,
+} from '../helper';
 import ServiceContext from '../ServiceContext';
 import ServiceValidator from '../ServiceValidator';
 
 /** Component to render the Radio buttons in the Service/DialogTabs/DialogGroups/DialogFields component */
 const DateTimeField = ({ field }) => {
   const { data, setData } = useContext(ServiceContext);
   const fieldData = data.dialogFields[field.name];
+  const selectedDateTime = dateTimeString(fieldData.value);
 
-  const {
-    hours, minutes, currentHour, currentMinute, currentDate,
-  } = currentDateTime();
+  const { hours, minutes } = currentDateTime();
 
-  const [time, setTime] = useState({
-    hours: 'Hours',
-    minutes: 'Minutes',
-  });
-
-  const onHourChange = (e) => {
-    setTime({ ...time, hours: e.target.value });
+  const onHourChange = ({ selectedItem }) => {
+    if (data.isOrderServiceForm) {
+      fieldData.value.hour = selectedItem.id;
+      data.dialogFields[field.name] = { ...fieldData };
+      setData({
+        ...data,
+        dialogFields: { ...data.dialogFields },
+        fieldsToRefresh: field.dialog_field_responders,
+      });
+    }
   };
 
-  const onMinuteChange = (e) => {
-    setTime({ ...time, minutes: e.target.value });
+  const onMinuteChange = ({ selectedItem }) => {
+    if (data.isOrderServiceForm) {
+      fieldData.value.minute = selectedItem.id;
+      data.dialogFields[field.name] = { ...fieldData };
+      setData({
+        ...data,
+        dialogFields: { ...data.dialogFields },
+        fieldsToRefresh: field.dialog_field_responders,
+      });
+    }
   };
 
-  // const onChange = (checked) => {
-  //   if (data.isOrderServiceForm) {
-  //     const { valid, value } = ServiceValidator.validateField({ value: checked, field, isOrderServiceForm: data.isOrderServiceForm });
-  //     data.dialogFields[field.name] = { value, valid };
-  //     setData({
-  //       ...data,
-  //       dialogFields: { ...data.dialogFields },
-  //       fieldsToRefresh: field.dialog_field_responders,
-  //     });
-  //   }
-  // };
+  const onDateChange = (selectedItem) => {
+    if (data.isOrderServiceForm) {
+      const extractedDateTime = extractDateTime(selectedItem[0], selectedDateTime);
+      const { valid, value } = ServiceValidator.validateField({ field, value: extractedDateTime, isOrderServiceForm: data.isOrderServiceForm });
+      data.dialogFields[field.name] = { value, valid };
+      setData({
+        ...data,
+        dialogFields: { ...data.dialogFields },
+        fieldsToRefresh: field.dialog_field_responders,
+      });
+    }
+  };
 
   return (
     <div className="time-picker-container">
-      <DatePicker datePickerType="single" value={currentDate}>
+      <DatePicker datePickerType="single" value={selectedDateTime.date} onChange={onDateChange}>
         <DatePickerInput
           placeholder="mm/dd/yyyy"
           labelText={field.label}
@@ -56,12 +68,10 @@ const DateTimeField = ({ field }) => {
       <Dropdown
         className="time-picker"
         disabled={!!data.fieldsToRefresh.length > 0}
-        invalid={!fieldData.valid}
         id={`hours-${fieldComponentId(field)}`}
         titleText="Hours"
-        initialSelectedItem={currentHour}
+        initialSelectedItem={selectedDateTime.hour}
         // selectedItem={fieldData.value}
-        invalidText={requiredLabel(field.required)}
         label={__('Hrs')}
         items={hours}
         itemToString={(item) => (item ? item.text : '')}
@@ -71,12 +81,10 @@ const DateTimeField = ({ field }) => {
       <Dropdown
         className="time-picker"
         disabled={!!data.fieldsToRefresh.length > 0}
-        invalid={!fieldData.valid}
         id={`minutes-${fieldComponentId(field)}`}
         titleText="Minutes"
-        initialSelectedItem={currentMinute}
+        initialSelectedItem={selectedDateTime.minute}
         // selectedItem={fieldData.value}
-        invalidText={requiredLabel(field.required)}
         label={__('Min')}
         items={minutes}
         itemToString={(item) => (item ? item.text : '')}

diff --git a/app/javascript/components/service/dialogFieldItems/RadioField.jsx b/app/javascript/components/service/dialogFieldItems/RadioField.jsx
@@ -10,12 +10,10 @@ import ServiceValidator from '../ServiceValidator';
 const RadioField = ({ field }) => {
   const { data, setData } = useContext(ServiceContext);
   const fieldData = data.dialogFields[field.name];
-  console.log('fieldData', fieldData);
-  console.log('radio', field.values);
 
-  const onChange = (checked) => {
+  const onChange = (selectedValue) => {
     if (data.isOrderServiceForm) {
-      const { valid, value } = ServiceValidator.validateField({ value: checked, field, isOrderServiceForm: data.isOrderServiceForm });
+      const { valid, value } = ServiceValidator.validateField({ value: selectedValue, field, isOrderServiceForm: data.isOrderServiceForm });
       data.dialogFields[field.name] = { value, valid };
       setData({
         ...data,
@@ -28,12 +26,14 @@ const RadioField = ({ field }) => {
   return (
     <div className="field-radio-buttons">
       <RadioButtonGroup
-        legendText={field.label}
+        legendText={<FieldLabel field={field} />}
         name={field.name}
         id={fieldComponentId(field)}
         readOnly={field.read_only}
         invalid={!fieldData.valid}
         invalidText={requiredLabel(field.required)}
+        onChange={onChange}
+        valueSelected={fieldData.value} // Ensure the selected value is correctly handled
       >
         {
           field.values.map((radio) => (
@@ -43,11 +43,11 @@ const RadioField = ({ field }) => {
               labelText={radio[1]}
               value={radio[0]}
               id={`radio-${radio[1]}`}
-              onChange={onChange}
             />
           ))
         }
       </RadioButtonGroup>
+      {field.required && !fieldData.valid && <div className="bx--form__helper-text">{requiredLabel(field.required)}</div>}
     </div>
   );
 };

diff --git a/app/javascript/components/service/dialogFieldItems/TagField.jsx b/app/javascript/components/service/dialogFieldItems/TagField.jsx
@@ -6,15 +6,13 @@ import ServiceContext from '../ServiceContext';
 
 /** Component to render the TagField in the Service/DialogTabs/DialogGroups/DialogFields component */
 const TagField = ({ field }) => {
-  console.log(field);
   const { data } = useContext(ServiceContext);
-  const isMulti = true;
+  const isMulti = !!(field.options && !field.options.force_single_value);
 
   let options = [['1', 'Option1'], ['2', 'Option2']].map((item) => ({ id: item[0], text: item[1] }));
   if (data.isOrderServiceForm) {
     options = field.values ? field.values.map((item) => ({ id: item.id, text: item.description })) : [];
   }
-  console.log(options);
   return (
     <>
       {
@@ -31,6 +29,7 @@ TagField.propTypes = {
     id: PropTypes.string,
     options: PropTypes.shape({
       force_multi_value: PropTypes.bool,
+      force_single_value: PropTypes.bool,
     }),
     default_value: PropTypes.string,
     label: PropTypes.string.isRequired,