saasufy-components 3.4.1 → 3.6.0

package/collection-adder.js

@@ -63,31 +63,47 @@ class CollectionAdder extends SocketConsumer {
 
     let trimSpaces = this.hasAttribute('trim-spaces');
 
-    let newModelData = {
-      ...this.modelFieldValues,
-      ...radioData,
-      ...Object.fromEntries(
-        [...this.querySelectorAll('.collection-adder-input')]
-          .filter(input => input.value !== '')
-          .map((input) => {
-            let fieldType = this.fieldTypes[input.name];
-            let Type = getTypeCastFunction(fieldType);
-            let value;
-            if (fieldType === 'checkbox') {
-              value = input.checked;
-            } else {
-              value = input.value;
-            }
-            let sanitizedValue = Type(value);
-            if (trimSpaces && typeof sanitizedValue === 'string') {
-              sanitizedValue = sanitizedValue.trim();
-            }
-            return [ input.name, sanitizedValue ];
-          })
-      )
-    };
-
     try {
+      let newModelData = {
+        ...this.modelFieldValues,
+        ...radioData,
+        ...Object.fromEntries(
+          await Promise.all(
+            [...this.querySelectorAll('.collection-adder-input')].filter(
+              input => input.value !== ''
+            )
+            .map(
+              async (input) => {
+                let fieldType = this.fieldTypes[input.name];
+                let Type = getTypeCastFunction(fieldType);
+                let value;
+                if (input.type === 'file' && input.files && input.files.length) {
+                  let reader = new FileReader();
+                  let readerLoadPromise = new Promise((resolve, reject) => {
+                    reader.addEventListener('load', () => {
+                      resolve(reader.result);
+                    });
+                    reader.addEventListener('error', () => {
+                      reject(new Error('Failed to read file'));
+                    });
+                  });
+                  reader.readAsDataURL(input.files[0]);
+                  value = await readerLoadPromise;
+                } else if (fieldType === 'checkbox') {
+                  value = input.checked;
+                } else {
+                  value = input.value;
+                }
+                let sanitizedValue = Type(value);
+                if (trimSpaces && typeof sanitizedValue === 'string') {
+                  sanitizedValue = sanitizedValue.trim();
+                }
+                return [ input.name, sanitizedValue ];
+              }
+            )
+          )
+        )
+      };
       await this.collection.create(newModelData);
       messageContainer.classList.add('success');
       messageContainer.classList.remove('error');
@@ -250,6 +266,14 @@ class CollectionAdder extends SocketConsumer {
             inputLabel
           }"${extraAttributesString}></textarea>`
         );
+      } else if (inputType === 'file') {
+        items.push(
+          `<input class="collection-adder-input" type="${
+            inputType
+          }" name="${
+            field
+          }"${extraAttributesString} />`
+        );
       } else {
         items.push(
           `<input class="collection-adder-input" type="${

package/model-input.js

@@ -167,10 +167,11 @@ class ModelInput extends SocketConsumer {
       elementType = 'input';
     }
     this.inputElement = document.createElement(elementType);
+    let optionList = null;
     if (type === 'select') {
       if (options) {
-        let optionElements = options
-          .split(',')
+        optionList = options.split(',');
+        let optionElements = optionList
           .map((option) => {
             return `<option value="${option}">${option}</option>`;
           })
@@ -208,7 +209,7 @@ class ModelInput extends SocketConsumer {
       this.appendChild(errorMessageContainer);
     }
     this.appendChild(this.inputElement);
-    let destroyInputSync = this.syncInputElementWithModel(this.inputElement, model, modelField, errorMessageContainer);
+    let destroyInputSync = this.syncInputElementWithModel(this.inputElement, model, modelField, errorMessageContainer, optionList);
     this.destroy = () => {
       destroyInputSync();
       this.isLoadedConsumer && this.isLoadedConsumer.kill();
@@ -233,9 +234,22 @@ class ModelInput extends SocketConsumer {
     }
   }
 
-  syncInputElementWithModel(inputElement, model, fieldName, messageContainerElement) {
+  verifyValue(fieldValue, optionList, inputElement, messageContainerElement) {
+    if (optionList && !optionList.includes(fieldValue)) {
+      inputElement.classList.add('error');
+      inputElement.classList.remove('success');
+      if (messageContainerElement) {
+        messageContainerElement.textContent = 'Invalid selection';
+        messageContainerElement.classList.add('error');
+        messageContainerElement.classList.remove('hidden');
+      }
+    }
+  }
+
+  syncInputElementWithModel(inputElement, model, fieldName, messageContainerElement, optionList) {
     if (model.isLoaded) {
       let fieldValue = model.value[fieldName];
+      this.verifyValue(fieldValue, optionList, inputElement, messageContainerElement);
       this.updateInputElement(inputElement, fieldValue);
     }
     let stopSaving = this.saveInputElementOnEdit(inputElement, model, fieldName, messageContainerElement);
@@ -245,6 +259,7 @@ class ModelInput extends SocketConsumer {
         let hasFocus = document.activeElement === this.inputElement;
         if (event.resourceField !== fieldName || (hasFocus && !event.isRemote)) continue;
         let fieldValue = model.value[fieldName];
+        this.verifyValue(fieldValue, optionList, inputElement, messageContainerElement);
         this.updateInputElement(inputElement, fieldValue);
       }
     })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "3.4.1",
+  "version": "3.6.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {

package/styles.css

@@ -26,12 +26,12 @@ input[type=text]:focus,input[type=password]:focus,input[type=number]:focus,selec
   outline-color: #00a5e5;
 }
 
-input[type=text].error:focus,input[type=password].error:focus,input[type=number].error:focus,select.error:focus,textarea.error:focus {
+input[type=text].error,input[type=password].error,input[type=number].error,select.error,textarea.error {
   border-color: #ff0000;
   outline-color: #ff0000;
 }
 
-input[type=text].warning:focus,input[type=password].warning:focus,input[type=number].warning:focus,select.warning:focus,textarea.warning:focus {
+input[type=text].warning,input[type=password].warning,input[type=number].warning,select.warning,textarea.warning {
   border-color: #ee9900;
   outline-color: #ee9900;
 }