gd-sprest-bs 10.3.0 → 10.3.3

package/build/components/field/index.js

@@ -208,14 +208,11 @@ var Field = function (props) {
             }
             // Get the items
             var items = getChoiceItems(displayRadioButtons, props.field, props.value);
-            // See if this is not a required field, or if the allow fill in option is set
-            if ((!isRequired && !displayRadioButtons) || allowFillIn) {
-                // Add a blank entry
-                items = [{
-                        text: "",
-                        value: null
-                    }].concat(items);
-            }
+            // Add a blank entry
+            items = [{
+                    text: "",
+                    value: null
+                }].concat(items);
             // See if we are allowing custom values
             if (allowFillIn) {
                 // Set the base validation
@@ -309,6 +306,85 @@ var Field = function (props) {
                 }
             }
             break;
+        // Image
+        case gd_sprest_1.SPTypes.FieldType.Image:
+            var fileInfo_1 = null;
+            var imageValue_1 = controlProps.value;
+            // Set the type
+            controlProps.type = core_1.Components.FormControlTypes.TextField;
+            controlProps.placeholder = "Add an image";
+            controlProps.isDisabled = true;
+            // Update the value
+            if (controlProps.value) {
+                // Update the value to only display the file name
+                try {
+                    var imageProps = JSON.parse(controlProps.value);
+                    controlProps.value = imageProps.fileName;
+                }
+                catch (_a) { }
+            }
+            // Validate the extension
+            baseValidation = function (ctrl, results) {
+                // See if we are uploading a new file
+                if (fileInfo_1) {
+                    // Ensure it's an image
+                    var info = fileInfo_1.name.split('.');
+                    var fileExt = info[info.length - 1].toLowerCase();
+                    if (["tiff", "pjp", "jfif", "bmp", "gif", "svg", "png", "xbm", "dib", "jxl",
+                        "jpeg", "svgz", "jpg", "webp", "ico", "tif", "pjpeg", "avif"].indexOf(fileExt) < 0) {
+                        // Set the flag
+                        results.isValid = false;
+                        results.invalidMessage = "The file must be an image.";
+                    }
+                }
+                // Else, see if a value doesn't exist
+                else if (results.value == null) {
+                    // Set the flag based on if it's required
+                    results.isValid = ctrl.props.required ? false : results.isValid;
+                }
+                // Return the results
+                return results;
+            };
+            onControlRendered = controlProps.onControlRendered;
+            controlProps.onControlRendered = function (ctrl) {
+                // Append the edit button
+                core_1.Components.Button({
+                    el: ctrl.textbox.el,
+                    type: core_1.Components.ButtonTypes.OutlineSecondary,
+                    text: "Edit",
+                    onClick: function () {
+                        // Show a file loader
+                        gd_sprest_1.Helper.ListForm.showFileDialog().then(function (file) {
+                            // Save the file info
+                            fileInfo_1 = file;
+                            fileInfo_1.fieldId = props.field.Id;
+                            fileInfo_1.fieldName = props.field.InternalName;
+                            // Set the value to the file name
+                            ctrl.textbox.setValue(file.name);
+                        });
+                    }
+                });
+                // Append the clear button
+                core_1.Components.Button({
+                    el: ctrl.textbox.el,
+                    type: core_1.Components.ButtonTypes.OutlineSecondary,
+                    text: "Clear",
+                    onClick: function () {
+                        // Clear the value
+                        ctrl.textbox.setValue("");
+                        fileInfo_1 = null;
+                        imageValue_1 = null;
+                    }
+                });
+                // Call the rendered event
+                onControlRendered ? onControlRendered(ctrl) : null;
+            };
+            // Set the get value event
+            controlProps.onGetValue = function () {
+                // Return the file information
+                return fileInfo_1 || imageValue_1;
+            };
+            break;
         // Lookup
         case gd_sprest_1.SPTypes.FieldType.Lookup:
             // Default the lookup field props will determine the default type
@@ -855,6 +931,11 @@ var Field = function (props) {
                 name: props.field.InternalName,
                 value: control ? control.getValue() : null
             };
+            // See if there is a custom value
+            if (control.props.onGetValue) {
+                // Update the value
+                fieldValue.value = control.props.onGetValue(control.props);
+            }
             // Update the field name/value, based on the type
             switch (props.field.FieldTypeKind) {
                 // Boolean
@@ -898,6 +979,9 @@ var Field = function (props) {
                     // Ensure a value exists, otherwise null
                     fieldValue.value = fieldValue.value ? fieldValue.value.toISOString() : null;
                     break;
+                // Image
+                case gd_sprest_1.SPTypes.FieldType.Image:
+                    break;
                 // Lookup
                 case gd_sprest_1.SPTypes.FieldType.Lookup:
                     // Append 'Id' to the field name
@@ -991,14 +1075,16 @@ var Field = function (props) {
                     // See if this is a multi-value field
                     if (props.field.AllowMultipleValues) {
                         var values_2 = fieldValue.value || [];
-                        // Default the value
-                        fieldValue.value = { results: [] };
                         // Parse the options
                         for (var j = 0; j < values_2.length; j++) {
                             var userValue = values_2[j];
                             // Add the field value
                             userValue.Id ? fieldValue.value.results.push(userValue.Id) : null;
                         }
+                        // Clear the value if no values exist
+                        if (fieldValue.value.results.length == 0) {
+                            fieldValue.value = null;
+                        }
                     }
                     else {
                         var userValue = fieldValue.value ? fieldValue.value[0] : null;
@@ -1042,6 +1128,11 @@ var Field = function (props) {
                 var baseResult = baseValidation(control, { isValid: control.isValid, value: control.getValue() });
                 // Validate the current control
                 var result = controlProps.onValidate ? controlProps.onValidate(controlProps, baseResult) : baseResult;
+                // See if a custom validation method exists
+                if (controlProps.onValidate) {
+                    // Call the custom validation method
+                    result = controlProps.onValidate(controlProps, baseResult);
+                }
                 // Return the flag
                 if (typeof (result) === "boolean") {
                     // Update the validation

package/build/components/listForm/index.js

@@ -83,8 +83,20 @@ var renderDisplay = function (fieldName, props) {
     if (field.SchemaXml.indexOf('ShowInDisplayForm="FALSE"') > 0) {
         return control;
     }
-    // See if this is a note field
-    if (field.FieldTypeKind == gd_sprest_1.SPTypes.FieldType.Note) {
+    // See if this is an image field
+    if (field.FieldTypeKind == gd_sprest_1.SPTypes.FieldType.Image) {
+        // Ensure a value exists
+        if (value) {
+            // Update the html
+            try {
+                var imgInfo = JSON.parse(value);
+                html = "<img style='height: 64px; width: 64px;' src='" + imgInfo.serverRelativeUrl + "' alt='" + imgInfo.fileName + "' />";
+            }
+            catch (_a) { }
+        }
+    }
+    // Else, see if this is a note field
+    else if (field.FieldTypeKind == gd_sprest_1.SPTypes.FieldType.Note) {
         // Update the html
         html = html.replace(/\r?\n/g, '<br />');
     }
@@ -170,8 +182,16 @@ var renderDisplay = function (fieldName, props) {
     // Detect html
     if (/<*>/g.test(html)) {
         var isMultiLine = html.indexOf("<br />") >= 0 ? true : false;
-        // Ensure this isn't a rich text field or multi-line
-        if (!isRichText && !isMultiLine) {
+        // See if it's an image
+        if (field.FieldTypeKind == gd_sprest_1.SPTypes.FieldType.Image) {
+            // Set the rendered event
+            control.onControlRendered = function (control) {
+                // Override the html rendered
+                control.el.innerHTML = html;
+            };
+        }
+        // Else, ensure this isn't a rich text field or multi-line
+        else if (!isRichText && !isMultiLine) {
             // Update the control to be read-only
             control.type = core_1.Components.FormControlTypes.Readonly;
             // Set the rendered event
@@ -445,6 +465,136 @@ exports.ListForm.renderEditForm = function (props) {
             });
         });
     };
+    // Method to upload the images
+    var images = [];
+    var uploadImages = function (info) {
+        // Return a promise
+        return new Promise(function (resolve) {
+            var values = {};
+            // Ensure we have images
+            if (images.length == 0) {
+                // Do nothing
+                resolve(values);
+                return;
+            }
+            // Get the list folder
+            gd_sprest_1.Helper.ListFormField.getOrCreateImageFolder(info).then(function (fld) {
+                // Removes the existing image
+                var removeExisting = function (value) {
+                    // Return a promise
+                    return new Promise(function (resolve) {
+                        // Try to get the image info
+                        var imageInfo = null;
+                        try {
+                            imageInfo = JSON.parse(value);
+                        }
+                        catch (_a) { }
+                        // Ensure the info exists
+                        if (imageInfo) {
+                            // See if the file exists
+                            fld.Files(imageInfo.fileName).execute(
+                            // Exists
+                            function (file) {
+                                // Delete the file
+                                file.delete().execute(function () {
+                                    // Resolve the request
+                                    resolve(null);
+                                });
+                            }, 
+                            // Doesn't exist
+                            function () {
+                                // Resolve the request
+                                resolve(null);
+                            });
+                        }
+                        else {
+                            // Resolve the request
+                            resolve(null);
+                        }
+                    });
+                };
+                // Validates the list name
+                var validateFileName = function (fileName) {
+                    // Return a promise
+                    return new Promise(function (resolve) {
+                        // Get the file name w/out the extension
+                        var info = fileName.toLowerCase().split('.');
+                        var fileExt = info[info.length - 1];
+                        var fileNameNoExt = "";
+                        for (var i = 0; i < info.length - 1; i++) {
+                            fileNameNoExt += info[i];
+                        }
+                        // Get the files with a similar name
+                        fld.Files().query({
+                            Filter: "startswith(Name, '" + fileNameNoExt + "')",
+                            Top: 5000
+                        }).execute(function (files) {
+                            var isValid = true;
+                            var counter = -1;
+                            var validFileName = null;
+                            // See if no files were found
+                            if (files.results.length == 0) {
+                                // Resolve the request
+                                resolve(fileName);
+                                return;
+                            }
+                            // Loop until it's valid
+                            do {
+                                // Reset the flag and file name
+                                validFileName = fileNameNoExt + (++counter == 0 ? "" : counter) + "." + fileExt;
+                                isValid = true;
+                                // Parse the files
+                                for (var i = 0; i < files.results.length; i++) {
+                                    var file = files.results[i];
+                                    // See if there is a match
+                                    if (file.Name.toLowerCase() == validFileName) {
+                                        // Set the flag
+                                        isValid = false;
+                                        break;
+                                    }
+                                }
+                            } while (!isValid);
+                            // Resolve the request
+                            resolve(validFileName);
+                        });
+                    });
+                };
+                // Parse the images
+                gd_sprest_1.Helper.Executor(images, function (imageInfo) {
+                    // See if this is a file that needs to be uploaded
+                    if (imageInfo.name && imageInfo.data && imageInfo.fieldName) {
+                        // Return a promise
+                        return new Promise(function (resolve) {
+                            // Remove the existing image
+                            removeExisting(info.item ? info.item[imageInfo.fieldName] : null).then(function () {
+                                // Validate the name
+                                validateFileName(imageInfo.name).then(function (fileName) {
+                                    // Upload the file
+                                    fld.Files().add(fileName, true, imageInfo.data).execute(function (file) {
+                                        // Update the field value
+                                        values[imageInfo.fieldName] = JSON.stringify({
+                                            fieldId: imageInfo.fieldId,
+                                            fieldName: imageInfo.fieldName,
+                                            fileName: file.Name,
+                                            id: file.UniqueId,
+                                            nativeFile: {},
+                                            serverRelativeUrl: file.ServerRelativeUrl,
+                                            type: "thumbnail"
+                                        });
+                                        // Resolve the request
+                                        resolve(null);
+                                    });
+                                });
+                            });
+                        });
+                    }
+                }).then(function () {
+                    // Resolve the request
+                    resolve(values);
+                });
+            });
+        });
+    };
     // Render a loading message
     var progress = core_1.Components.Progress({
         el: props.el,
@@ -803,6 +953,8 @@ exports.ListForm.renderEditForm = function (props) {
             // Set the content type id
             values["ContentTypeId"] = props.info.contentType.Id.StringValue;
         }
+        // Clear the image values
+        images = [];
         // Parse the fields
         for (var fieldName in props.info.fields) {
             // Get the form field and skip readonly fields
@@ -812,11 +964,6 @@ exports.ListForm.renderEditForm = function (props) {
             }
             // Get the field value
             var fieldValue = formField.getValue();
-            // See if an event exists
-            if (formField.controlProps.onGetValue) {
-                // Update the value
-                fieldValue.value = formField.controlProps.onGetValue(formField.controlProps);
-            }
             // Set the item value
             values[fieldValue.name] = fieldValue.value;
             // See if this is the file leaf ref
@@ -824,6 +971,12 @@ exports.ListForm.renderEditForm = function (props) {
                 // Update the 'Title'
                 values["Title"] = values["Title"] || values[fieldValue.name];
             }
+            // See if this is an image field
+            var field = props.info.fields[fieldName];
+            if (field && field.FieldTypeKind == gd_sprest_1.SPTypes.FieldType.Image) {
+                // Add the value if it exists
+                fieldValue.value ? images.push(fieldValue.value) : null;
+            }
         }
         // Return the form values
         return values;
@@ -909,11 +1062,6 @@ exports.ListForm.renderEditForm = function (props) {
                 }
                 // Validate the form field and update the status flag
                 var controlIsValid = formField.isValid();
-                // See if there is a custom method
-                if (formField.controlProps.onValidate) {
-                    // Call the event
-                    controlIsValid = formField.controlProps.onValidate(formField.controlProps, formField.getValue());
-                }
                 // Update the flag
                 isValid = isValid && controlIsValid;
             }
@@ -947,21 +1095,25 @@ exports.ListForm.renderEditForm = function (props) {
             };
             // Return a promise
             return new Promise(function (resolve, reject) {
-                // Call the saving event
-                onSaving(__assign(__assign({}, getValues()), customValues)).then(function (values) {
-                    // Update the item
-                    exports.ListForm.saveItem(props.info, values).then(function (info) {
-                        // Remove the attachments
-                        removeAttachments(info).then(function () {
-                            // Save the attachments
-                            saveAttachments(info).then(function () {
-                                // Update the info
-                                props.info = info;
-                                // Resolve the promise
-                                resolve(props.info.item);
+                var formValues = getValues();
+                // Upload the images
+                uploadImages(props.info).then(function (imageValues) {
+                    // Call the saving event
+                    onSaving(__assign(__assign(__assign({}, formValues), imageValues), customValues)).then(function (values) {
+                        // Update the item
+                        exports.ListForm.saveItem(props.info, values).then(function (info) {
+                            // Remove the attachments
+                            removeAttachments(info).then(function () {
+                                // Save the attachments
+                                saveAttachments(info).then(function () {
+                                    // Update the info
+                                    props.info = info;
+                                    // Resolve the promise
+                                    resolve(props.info.item);
+                                });
                             });
-                        });
-                    }, reject);
+                        }, reject);
+                    });
                 });
             });
         }