Merge pull request #13597 from Jose4gg/master

Allow to pass `step` to datetime/time fields
strapi · Aug 24, 2022 · 6ceb77e · 6ceb77e
2 parents faac5b3 + 39b8ece
commit 6ceb77e
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 5 deletions.
diff --git a/packages/core/admin/admin/src/content-manager/components/Inputs/index.js b/packages/core/admin/admin/src/content-manager/components/Inputs/index.js
@@ -164,6 +164,33 @@ function Inputs({
 
   const { label, description, placeholder, visible } = metadatas;
 
+  /**
+   * It decides whether using the default `step` accoding to its `inputType` or the one
+   * obtained from `metadatas`.
+   *
+   * The `metadatas.step` is returned when the `inputValue` is divisible by it or when the
+   * `inputValue` is empty, otherwise the default `step` is returned.
+   */
+  const inputStep = useMemo(() => {
+    if (!metadatas.step || (inputType !== 'datetime' && inputType !== 'time')) {
+      return step;
+    }
+
+    if (!inputValue) {
+      return metadatas.step;
+    }
+
+    let minutes;
+
+    if (inputType === 'datetime') {
+      minutes = parseInt(inputValue.substr(14, 2), 10);
+    } else if (inputType === 'time') {
+      minutes = parseInt(inputValue.slice(-2), 10);
+    }
+
+    return minutes % metadatas.step === 0 ? metadatas.step : step;
+  }, [inputType, inputValue, metadatas.step, step]);
+
   if (visible === false) {
     return null;
   }
@@ -242,7 +269,7 @@ function Inputs({
       options={options}
       placeholder={placeholder ? { id: placeholder, defaultMessage: placeholder } : null}
       required={fieldSchema.required || false}
-      step={step}
+      step={inputStep}
       type={inputType}
       // validations={validations}
       value={inputValue}

diff --git a/packages/core/admin/admin/src/content-manager/components/Inputs/utils/getStep.js b/packages/core/admin/admin/src/content-manager/components/Inputs/utils/getStep.js
@@ -3,10 +3,6 @@ const getStep = (type) => {
 
   if (type === 'float' || type === 'decimal') {
     step = 0.01;
-  } else if (type === 'time' || type === 'datetime') {
-    // Since we cannot set a value that is not in the list of the time picker, we need to set the step to 1
-    // TODO: Fix the timepicker in order to be able to set any value regardless of the list
-    step = 1;
   } else {
     step = 1;
   }

diff --git a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/ModalForm.js b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/ModalForm.js
@@ -20,6 +20,10 @@ const FIELD_SIZES = [
 
 const NON_RESIZABLE_FIELD_TYPES = ['dynamiczone', 'component', 'json', 'richtext'];
 
+const TIME_FIELD_OPTIONS = [1, 5, 10, 15, 30, 60];
+
+const TIME_FIELD_TYPES = ['datetime', 'time'];
+
 const ModalForm = ({ onMetaChange, onSizeChange }) => {
   const { formatMessage } = useIntl();
   const { modifiedData, selectedField, attributes, fieldForm } = useLayoutDnd();
@@ -73,6 +77,10 @@ const ModalForm = ({ onMetaChange, onSizeChange }) => {
       return null;
     }
 
+    if (meta === 'step') {
+      return null;
+    }
+
     return (
       <GridItem col={6} key={meta}>
         <GenericInput
@@ -120,10 +128,33 @@ const ModalForm = ({ onMetaChange, onSizeChange }) => {
     </GridItem>
   );
 
+  const hasTimePicker = TIME_FIELD_TYPES.includes(attributes[selectedField].type);
+
+  const timeStepField = (
+    <GridItem col={6} key="step">
+      <Select
+        value={get(fieldForm, ['metadata', 'step'], 1)}
+        name="step"
+        onChange={(value) => onMetaChange({ target: { name: 'step', value } })}
+        label={formatMessage({
+          id: getTrad('containers.SettingPage.editSettings.step.label'),
+          defaultMessage: 'Time interval (minutes)',
+        })}
+      >
+        {TIME_FIELD_OPTIONS.map((value) => (
+          <Option key={value} value={value}>
+            {value}
+          </Option>
+        ))}
+      </Select>
+    </GridItem>
+  );
+
   return (
     <>
       {metaFields}
       {canResize && sizeField}
+      {hasTimePicker && timeStepField}
     </>
   );
 };

diff --git a/packages/core/content-manager/server/controllers/validation/model-configuration.js b/packages/core/content-manager/server/controllers/validation/model-configuration.js
@@ -53,6 +53,15 @@ const createMetadasSchema = (schema) => {
               editable: yup.boolean(),
               visible: yup.boolean(),
               mainField: yup.string(),
+              step: yup
+                .number()
+                .integer()
+                .positive()
+                .test(
+                  'isDivisibleBy60',
+                  'Step must be either 1 or divisible by 60',
+                  (value) => !value || value === 1 || (value * 24) % 60 === 0
+                ),
             })
             .noUnknown()
             .required(),