saasufy-components 1.7.0 → 1.7.2

package/collection-adder.js

@@ -8,6 +8,7 @@ class CollectionAdder extends SocketConsumer {
 
     this.typeCastFunctions = {
       text: String,
+      textarea: String,
       checkbox: Boolean,
       number: Number
     };
@@ -112,8 +113,8 @@ class CollectionAdder extends SocketConsumer {
         inputTypeParams = inputTypeParts[3] ? inputTypeParts[3].split(',') : [];
       }
       if (inputType === 'checkbox') {
-        items.push(`
-          <label>
+        items.push(
+          `<label>
             ${
               field
             }
@@ -122,23 +123,29 @@ class CollectionAdder extends SocketConsumer {
             }" name="${
               field
             }" />
-          </label>
-        `);
+          </label>`
+        );
       } else if (inputType === 'text-select') {
         items.push(
-          `
-            <div class="collection-adder-select-text-row">
-              <input class="collection-adder-input" type="text" name="${
-                field
-              }" placeholder="${
-                field
-              }" />
-              <select class="collection-adder-select">
-                <option value="" selected disabled hidden>Options</option>
-                ${inputTypeParams.map(param => `<option value="${param}">${param}</option>`)}
-              </select>
-            </div>
-          `
+          `<div class="collection-adder-select-text-row">
+            <input class="collection-adder-input" type="text" name="${
+              field
+            }" placeholder="${
+              field
+            }" />
+            <select class="collection-adder-select">
+              <option value="" selected disabled hidden>Options</option>
+              ${inputTypeParams.map(param => `<option value="${param}">${param}</option>`)}
+            </select>
+          </div>`
+        );
+      } else if (inputType === 'textarea') {
+        items.push(
+          `<textarea class="collection-adder-input" name="${
+            field
+          }" placeholder="${
+            field
+          }"></textarea>`
         );
       } else {
         items.push(
@@ -186,11 +193,17 @@ class CollectionAdder extends SocketConsumer {
         ...modelFieldValues,
         ...Object.fromEntries(
           [...event.target.querySelectorAll('.collection-adder-input')]
+            .filter(input => input.value !== '')
             .map((input) => {
-              let Type = this.getTypeCastFunction(
-                fieldTypes[input.name]
-              );
-              return [ input.name, Type(input.value) ];
+              let fieldType = fieldTypes[input.name];
+              let Type = this.getTypeCastFunction(fieldType);
+              let value;
+              if (fieldType === 'checkbox') {
+                value = input.checked;
+              } else {
+                value = input.value;
+              }
+              return [ input.name, Type(value) ];
             })
         )
       };

package/collection-browser.js

@@ -155,12 +155,19 @@ class CollectionBrowser extends SocketConsumer {
 
     let itemTemplate = this.shadowRoot.querySelector('slot[name="item"]').assignedNodes()[0];
     let noItemTemplate = this.shadowRoot.querySelector('slot[name="no-item"]').assignedNodes()[0];
+    let firstItemTemplate = this.shadowRoot.querySelector('slot[name="first-item"]').assignedNodes()[0];
+    let lastItemTemplate = this.shadowRoot.querySelector('slot[name="last-item"]').assignedNodes()[0];
 
+    let items = [];
+
+    if (firstItemTemplate) {
+      items.push(firstItemTemplate.innerHTML);
+    }
     if (noItemTemplate && !this.collection.value.length) {
-      viewportNode.innerHTML = noItemTemplate.innerHTML;
+      items.push(noItemTemplate.innerHTML);
     } else if (itemTemplate) {
       let type = this.getAttribute('type-alias') || this.collection.type;
-      let items = [];
+
       for (let modelItem of this.collection.value) {
         let itemString = renderTemplate(
           itemTemplate.innerHTML,
@@ -168,8 +175,11 @@ class CollectionBrowser extends SocketConsumer {
         );
         items.push(itemString);
       }
-      viewportNode.innerHTML = items.join('');
     }
+    if (lastItemTemplate) {
+      items.push(lastItemTemplate.innerHTML);
+    }
+    viewportNode.innerHTML = items.join('');
   }
 
   render() {
@@ -204,6 +214,8 @@ class CollectionBrowser extends SocketConsumer {
     this.shadowRoot.innerHTML = `
       <slot name="item"></slot>
       <slot name="no-item"></slot>
+      <slot name="first-item"></slot>
+      <slot name="last-item"></slot>
       <slot name="viewport"></slot>
       <slot name="previous-page"></slot>
       <slot name="page-number"></slot>

package/package.json

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