Merge pull request #1585 from GuidoZam/patch-number-min-max

DynamicForm Number min max

Author: joaojmendes

src/controls/dynamicForm/DynamicForm.tsx

@@ -208,10 +208,8 @@ export class DynamicForm extends React.Component<
             shouldBeReturnBack = true;
           }
         } else if (val.fieldType === "Number") {
-          if (!val.showAsPercentage) {
-            if ((val.newValue < val.minimumValue) || (val.newValue > val.maximumValue)) {
-              shouldBeReturnBack = true;
-            }
+          if ((val.newValue < val.minimumValue) || (val.newValue > val.maximumValue)) {
+            shouldBeReturnBack = true;
           }
         }
       });
@@ -527,6 +525,9 @@ export class DynamicForm extends React.Component<
           let richText = false;
           let dateFormat: DateFormat | undefined;
           let principalType = "";
+          let minValue: number | undefined;
+          let maxValue: number | undefined;
+          let showAsPercentage: boolean | undefined;
           if (item !== null) {
             defaultValue = item[field.EntityPropertyName];
           } else {
@@ -538,6 +539,10 @@ export class DynamicForm extends React.Component<
             });
           } else if (fieldType === "Note") {
             richText = field.RichText;
+          } else if (fieldType === "Number") {
+            minValue = field.MinimumValue;
+            maxValue = field.MaximumValue;
+            showAsPercentage = field.ShowAsPercentage;
           } else if (fieldType === "Lookup") {
             lookupListId = field.LookupList;
             lookupField = field.LookupField;
@@ -715,9 +720,9 @@ export class DynamicForm extends React.Component<
             listItemId: listItemId,
             principalType: principalType,
             description: field.Description,
-            maximumValue: field.MaximumValue,
-            minimumValue: field.MinimumValue,
-            showAsPercentage: field.ShowAsPercentage
+            minimumValue: minValue,
+            maximumValue: maxValue,
+            showAsPercentage: showAsPercentage,
           });
           tempFields.sort((a, b) => a.Order - b.Order);
         }

src/controls/dynamicForm/dynamicField/DynamicField.tsx

@@ -95,7 +95,6 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
 
     const labelEl = <label className={(required) ? styles.fieldRequired + ' ' + styles.fieldLabel : styles.fieldLabel}>{labelText}</label>;
     const errorText = this.getRequiredErrorText();
-    const errorTextforNumber = this.getNumberErrorText();
     const errorTextEl = <text className={styles.errormessage}>{errorText}</text>;
     const descriptionEl = <text className={styles.fieldDescription}>{description}</text>;
     const hasImage = !!changedValue;
@@ -213,6 +212,7 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
         </div>;
 
       case 'Lookup':
+        //eslint-disable-next-line no-case-declarations
         const lookupValue = this.props.newValue ? this.props.newValue : defaultValue;
         return <div>
           <div className={styles.titleContainer}>
@@ -236,6 +236,7 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
         </div>;
 
       case 'LookupMulti':
+        //eslint-disable-next-line no-case-declarations
         const lookupMultiValue = this.props.newValue ? this.props.newValue : defaultValue;
         return <div>
           <div className={styles.titleContainer}>
@@ -259,6 +260,9 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
         </div>;
 
       case 'Number':
+        //eslint-disable-next-line no-case-declarations
+        const customNumberErrorMessage = this.getNumberErrorText();
+
         return <div>
           <div className={styles.titleContainer}>
             <Icon className={styles.fieldIcon} iconName={"NumberField"} />
@@ -272,7 +276,7 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
             onChange={(e, newText) => { this.onChange(newText); }}
             disabled={disabled}
             onBlur={this.onBlur}
-            errorMessage={errorTextforNumber} />
+            errorMessage={customNumberErrorMessage} />
           {descriptionEl}
         </div>;
 
@@ -601,17 +605,34 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
       showAsPercentage
     } = this.props;
 
-    let errorText: string | null = null;
+    if ((changedValue === undefined || changedValue === '' || changedValue === null || this.isEmptyArray(changedValue)) && this.props.required) {
+      return strings.DynamicFormRequiredErrorMessage;
+    }
+
+    let minValue = minimumValue !== undefined && minimumValue !== -(Number.MAX_VALUE) ? minimumValue : undefined;
+    let maxValue = maximumValue !== undefined && maximumValue !== Number.MAX_VALUE ? maximumValue : undefined;
 
-    errorText = this.getRequiredErrorText();
-    if (!errorText && (changedValue < minimumValue) || (changedValue > maximumValue)) {
-      if (!showAsPercentage) {
-        errorText = strings.DynamicFormNumberErrorMessage
-          .replace('{0}', minimumValue.toString())
-          .replace('{1}', maximumValue.toString());
+    if (showAsPercentage === true) {
+      // In case of percentage we need to convert the min and max values to a percentage value
+      minValue = minValue !== undefined ? minValue * 100 : undefined;
+      maxValue = maxValue !== undefined ? maxValue * 100 : undefined;
+    }
+
+    if (changedValue !== undefined && changedValue !== null && changedValue.length > 0) {
+      if (minValue !== undefined && maxValue !== undefined && (changedValue < minValue || changedValue > maxValue)) {
+        return strings.DynamicFormNumberValueMustBeBetween.replace('{0}', minValue.toString()).replace('{1}', maxValue.toString());
+      }
+      else {
+        if (minValue !== undefined && changedValue < minValue) {
+          return strings.DynamicFormNumberValueMustBeGreaterThan.replace('{0}', minValue.toString());
+        }
+        else if (maxValue !== undefined && changedValue > maxValue) {
+          return strings.DynamicFormNumberValueMustBeLowerThan.replace('{0}', maxValue.toString());
+        }
       }
     }
-    return errorText;
+
+    return null;
   }
 
   private isEmptyArray(value): boolean {

src/controls/dynamicForm/dynamicField/IDynamicFieldProps.ts

@@ -32,7 +32,7 @@ export interface IDynamicFieldProps {
   dateFormat?: DateFormat;
   firstDayOfWeek: number;
   additionalData?: FieldChangeAdditionalData;
-  principalType?:string;
+  principalType?: string;
   description?: string;
   maximumValue?: number;
   minimumValue?: number;

src/loc/bg-bg.ts

@@ -364,9 +364,11 @@ define([], () => {
   "DynamicFormTermPanelTitle": "Изберете Термин",
   "DynamicFormEnterURLPlaceholder": "Въведете URL адрес",
   "DynamicFormEnterDescriptionPlaceholder": "Алтернативен текст",
-  "DynamicFormDialogValidationErrorTitle": "Validation Error",
-  "DynamicFormDialogValidationErrorMessage": "There are validation errors, please fix them before saving.",
-  "DynamicFormNumberErrorMessage": "The value of this field must be between {0} and {1}.",
+  "DynamicFormDialogValidationErrorTitle": "Грешка при валидиране",
+  "DynamicFormDialogValidationErrorMessage": "Има грешки при проверката, моля, поправете ги, преди да запазите.",
+  "DynamicFormNumberValueMustBeGreaterThan": "Стойността трябва да е по-голяма от {0}",
+  "DynamicFormNumberValueMustBeBetween": "Стойността трябва да е между {0} и {1}",
+  "DynamicFormNumberValueMustBeLowerThan": "Стойността трябва да е по-ниска от {0}",
   "customDisplayName": "Използвайте това местоположение:",
   "ListItemCommentDIalogDeleteSubText": "Наистина ли искате да изтриете този коментар?",
   "ListItemCommentsDialogDeleteTitle": "Потвърдете Изтриване на коментар",

src/loc/ca-es.ts

@@ -364,9 +364,11 @@ define([], () => {
   "DynamicFormTermPanelTitle": "Selecciona el terme",
   "DynamicFormEnterURLPlaceholder": "Introduïu una adreça URL",
   "DynamicFormEnterDescriptionPlaceholder": "Text alternatiu",
-  "DynamicFormDialogValidationErrorTitle": "Validation Error",
-  "DynamicFormDialogValidationErrorMessage": "There are validation errors, please fix them before saving.",
-  "DynamicFormNumberErrorMessage": "The value of this field must be between {0} and {1}.",
+  "DynamicFormDialogValidationErrorTitle": "Error de validació",
+  "DynamicFormDialogValidationErrorMessage": "Hi ha errors de validació, si us plau, corregiu-los abans de desar.",
+  "DynamicFormNumberValueMustBeGreaterThan": "El valor ha de ser superior a {0}",
+  "DynamicFormNumberValueMustBeBetween": "El valor ha d'estar entre {0} i {1}",
+  "DynamicFormNumberValueMustBeLowerThan": "El valor ha de ser inferior a {0}",
   "customDisplayName": "Utilitzeu aquesta ubicació:",
   "ListItemCommentDIalogDeleteSubText": "Esteu segur que voleu suprimir aquest comentari?",
   "ListItemCommentsDialogDeleteTitle": "Confirmació de la supressió del comentari",

src/loc/da-dk.ts

@@ -364,9 +364,11 @@ define([], () => {
   "DynamicFormTermPanelTitle": "Vælg ord",
   "DynamicFormEnterURLPlaceholder": "Angiv en URL-adresse",
   "DynamicFormEnterDescriptionPlaceholder": "Alternativ tekst",
-  "DynamicFormDialogValidationErrorTitle": "Validation Error",
-  "DynamicFormDialogValidationErrorMessage": "There are validation errors, please fix them before saving.",
-  "DynamicFormNumberErrorMessage": "Værdien af ​​dette felt skal være mellem {0} og {1}.",
+  "DynamicFormDialogValidationErrorTitle": "Valideringsfejl",
+  "DynamicFormDialogValidationErrorMessage": "Der er valideringsfejl. Ret dem venligst før du gemmer.",
+  "DynamicFormNumberValueMustBeGreaterThan": "Værdien skal være større end {0}",
+  "DynamicFormNumberValueMustBeBetween": "Værdien skal være mellem {0} og {1}",
+  "DynamicFormNumberValueMustBeLowerThan": "Værdien skal være lavere end {0}",
   "customDisplayName": "Brug denne placering:",
   "ListItemCommentDIalogDeleteSubText": "Er du sikker på, at du vil slette denne kommentar?",
   "ListItemCommentsDialogDeleteTitle": "Bekræft kommentar til sletning",

src/loc/de-de.ts

@@ -364,9 +364,11 @@ define([], () => {
   "DynamicFormTermPanelTitle": "Knoten auswählen",
   "DynamicFormEnterURLPlaceholder": "Geben Sie eine URL ein",
   "DynamicFormEnterDescriptionPlaceholder": "Alternativtext",
-  "DynamicFormDialogValidationErrorTitle": "Validation Error",
-  "DynamicFormDialogValidationErrorMessage": "There are validation errors, please fix them before saving.",
-  "DynamicFormNumberErrorMessage": "Der Wert dieses Feldes muss zwischen {0} und {1} liegen.",
+  "DynamicFormDialogValidationErrorTitle": "Validierungsfehler",
+  "DynamicFormDialogValidationErrorMessage": "Es liegen Validierungsfehler vor. Bitte beheben Sie diese vor dem Speichern.",
+  "DynamicFormNumberValueMustBeGreaterThan": "Der Wert muss größer als {0} sein.",
+  "DynamicFormNumberValueMustBeBetween": "Der Wert muss zwischen {0} und {1} liegen.",
+  "DynamicFormNumberValueMustBeLowerThan": "Der Wert muss niedriger als {0} sein.",
   "customDisplayName": "Verwenden Sie diesen Speicherort:",
   "ListItemCommentDIalogDeleteSubText": "Sind Sie sicher, dass Sie diesen Kommentar löschen möchten?",
   "ListItemCommentsDialogDeleteTitle": "Kommentar löschen bestätigen",

src/loc/el-gr.ts

@@ -364,9 +364,11 @@ define([], () => {
   "DynamicFormTermPanelTitle": "Επιλογή όρου",
   "DynamicFormEnterURLPlaceholder": "Εισαγωγή διεύθυνσης URL",
   "DynamicFormEnterDescriptionPlaceholder": "Εναλλακτικό κείμενο",
-  "DynamicFormDialogValidationErrorTitle": "Validation Error",
-  "DynamicFormDialogValidationErrorMessage": "There are validation errors, please fix them before saving.",
-  "DynamicFormNumberErrorMessage": "Η τιμή αυτού του πεδίου πρέπει να είναι μεταξύ {0} και {1}.",
+  "DynamicFormDialogValidationErrorTitle": "Σφάλμα επικύρωσης",
+  "DynamicFormDialogValidationErrorMessage": "Υπάρχουν σφάλματα επικύρωσης, διορθώστε τα πριν την αποθήκευση.",
+  "DynamicFormNumberValueMustBeGreaterThan": "Η τιμή πρέπει να είναι μεγαλύτερη από {0}",
+  "DynamicFormNumberValueMustBeBetween": "Η τιμή πρέπει να είναι μεταξύ {0} και {1}",
+  "DynamicFormNumberValueMustBeLowerThan": "Η τιμή πρέπει να είναι μικρότερη από {0}",
   "customDisplayName": "Χρησιμοποιήστε αυτήν τη θέση:",
   "ListItemCommentDIalogDeleteSubText": "Είστε βέβαιοι ότι θέλετε να διαγράψετε αυτό το σχόλιο;",
   "ListItemCommentsDialogDeleteTitle": "Επιβεβαίωση διαγραφής σχολίου",

src/loc/en-us.ts

@@ -384,7 +384,9 @@ define([], () => {
     DynamicFormEnterDescriptionPlaceholder: "Alternative text",
     DynamicFormDialogValidationErrorTitle: "Validation Error",
     DynamicFormDialogValidationErrorMessage: "There are validation errors, please fix them before saving.",
-    DynamicFormNumberErrorMessage: "The value of this field must be between {0} and {1}.",
+    DynamicFormNumberValueMustBeGreaterThan: "Value must be greater than {0}",
+    DynamicFormNumberValueMustBeBetween: "Value must be between {0} and {1}",
+    DynamicFormNumberValueMustBeLowerThan: "Value must be lower than {0}",
     customDisplayName: "Use this location:",
     ListItemCommentDIalogDeleteSubText: "Are you sure that you want to delete this comment?",
     ListItemCommentsDialogDeleteTitle: "Confirm Delete Comment",

src/loc/es-es.ts

@@ -364,9 +364,11 @@ define([], () => {
   "DynamicFormTermPanelTitle": "Seleccionar término",
   "DynamicFormEnterURLPlaceholder": "Introducir una dirección URL",
   "DynamicFormEnterDescriptionPlaceholder": "Texto alternativo",
-  "DynamicFormDialogValidationErrorTitle": "Validation Error",
-  "DynamicFormDialogValidationErrorMessage": "There are validation errors, please fix them before saving.",
-  "DynamicFormNumberErrorMessage": "The value of this field must be between {0} and {1}.",
+  "DynamicFormDialogValidationErrorTitle": "Error de validacion",
+  "DynamicFormDialogValidationErrorMessage": "Hay errores de validación, corríjalos antes de guardar.",
+  "DynamicFormNumberValueMustBeGreaterThan": "El valor debe ser mayor que {0}",
+  "DynamicFormNumberValueMustBeBetween": "El valor debe estar entre {0} y {1}",
+  "DynamicFormNumberValueMustBeLowerThan": "El valor debe ser inferior a {0}",
   "customDisplayName": "Utilice esta ubicación:",
   "ListItemCommentDIalogDeleteSubText": "¿Está seguro de que desea eliminar este comentario?",
   "ListItemCommentsDialogDeleteTitle": "Confirmar comentario de eliminación",