@duetds/components 5.1.4 → 5.1.5

package/lib/collection/components/duet-upload/duet-upload.js

@@ -9,6 +9,7 @@ import { inheritGlobalTheme } from "../../utils/themeable-component";
 import { getError, getI18nError } from "./errorcodes.utils";
 import { ErrorItem } from "./upload-editable-item-error";
 import { ProgressItem } from "./upload-editable-item-inprogres";
+import { PendingItem } from "./upload-editable-item-pending";
 import { SuccessItem } from "./upload-editable-item-success";
 import { validateFile, validateTotalAmountIsAboveMax, validateTotalSizeIsAboveMax } from "./upload-validators";
 import { makeXhrRequest } from "./xhr.helpers";
@@ -31,9 +32,13 @@ export class DuetUpload {
      * it will be up to you to handle the upload and return progress information to the upload-component
      */
     this.external = false;
+    /**
+     * If defer-upload is true, duet-upload will not (as recommended) instantly upload files but await a call to uploadPending()
+     */
+    this.deferUpload = false;
     /**
      * If set the upload component will not display an upload button, you will have to create one yourself
-     * and call the exposed method startUpload
+     * and call the exposed method startUpload to open the upload dialog
      */
     this.hideButton = false;
     /**
@@ -46,7 +51,7 @@ export class DuetUpload {
         size: "x-small",
         background: "gray-lightest",
         name: "delete",
-        map: ["success", "failure"],
+        map: ["success", "failure", "pending"],
         label: {
           fi: "Poista tiedosto",
           en: "Poista tiedosto",
@@ -300,6 +305,7 @@ export class DuetUpload {
     this.DefaultGroups = {
       inprogress: "inprogress",
       success: "success",
+      pending: "pending",
       failure: "failure",
     };
     /**
@@ -316,6 +322,14 @@ export class DuetUpload {
           en: "Files inprogress",
         },
       },
+      {
+        id: this.DefaultGroups.pending,
+        label: {
+          en: "Files to upload",
+          sv: "Filer att ladda",
+          fi: "Tiedostot ladattavat",
+        },
+      },
       {
         id: this.DefaultGroups.success,
         label: {
@@ -343,7 +357,6 @@ export class DuetUpload {
       this.element.addEventListener("duetActionEvent", (e) => {
         const detail = e.detail;
         const { action, id, originalEvent } = detail;
-        console.log(e);
         switch (action) {
           case "delete":
             this.onDelete(id, originalEvent);
@@ -372,9 +385,6 @@ export class DuetUpload {
       if (item.valid && item.progress === 100) {
         // if the item has a group, move the file to that group instead
         // of into the standard success group
-        if (item.group) {
-          return item.group;
-        }
         return this.DefaultGroups.success;
       }
       else if (item.progress > 0 && item.progress !== 100) {
@@ -383,6 +393,9 @@ export class DuetUpload {
       else if (!item.valid) {
         return this.DefaultGroups.failure;
       }
+      else if (item.pending) {
+        return this.DefaultGroups.pending;
+      }
       else if (item.group) {
         return item.group;
       }
@@ -397,6 +410,9 @@ export class DuetUpload {
       else if (group === this.DefaultGroups.inprogress) {
         return h(ProgressItem, { progress: data.progress, name: data.item.name });
       }
+      else if (group === this.DefaultGroups.pending) {
+        return h(PendingItem, { name: data.item.name });
+      }
       else if (group === this.DefaultGroups.failure) {
         return h(ErrorItem, { data: data });
       }
@@ -409,9 +425,16 @@ export class DuetUpload {
     };
     this.genHashName = () => Date.now().toString(36) + Math.random();
     this.updateValueInMap = (item, key, value, kick = true) => {
-      const fileItem = this.files.get(item);
-      fileItem[key] = value;
-      this.files.set(item, fileItem);
+      try {
+        const fileItem = this.files.get(item);
+        fileItem[key] = value;
+        this.files.set(item, fileItem);
+      }
+      catch (e) {
+        // if a users tries to update entries on a file that doesn't exist,
+        // this will blow up - so we're swallowing the errors here on purpose
+        // console.warn("operation on missing items")
+      }
       if (kick) {
         this.kick();
       }
@@ -529,6 +552,46 @@ export class DuetUpload {
         fileMaxReached: isTotalFileAmountAboveMax,
       };
     };
+    this.uploadFile = async (fileListItem, force = false, key) => {
+      if (!force && this.deferUpload) {
+        this.updateValueInMap(fileListItem.item.name, "pending", true, false);
+        this.updateValueInMap(fileListItem.item.name, "group", "pending", true);
+      }
+      else if (force) {
+        this.updateValueInMap(fileListItem.item.name, "pending", false, false);
+        this.updateValueInMap(fileListItem.item.name, "group", undefined, true);
+      }
+      try {
+        if (!this.deferUpload || force) {
+          // if all is well AND external file upload handling has not been set, start upload
+          const data = new FormData();
+          data.append("file", fileListItem.item);
+          if (key) {
+            data.append("key", key);
+          }
+          data.append("uid", fileListItem.uid);
+          data.append("name", fileListItem.item.name);
+          data.append("metadata", JSON.stringify({
+            uid: fileListItem.uid,
+            url: this.uri,
+            size: fileListItem.item.size,
+            meta: fileListItem.meta,
+          }));
+          fileListItem.xhr = await this.makeXHRPostRequest(data);
+        }
+      }
+      catch (e) {
+        // in case one of the global maxes have been reached, invalidate the file
+        this.updateValueInMap(fileListItem.item.name, "valid", false, false);
+      }
+    };
+    this.uploadPendingFiles = () => {
+      for (const [key, value] of this.files.entries()) {
+        if (value.group === "pending" && value.pending === true) {
+          this.uploadFile(value, true, key);
+        }
+      }
+    };
     this.getItemFromUID = (uid) => {
       for (const [key, value] of this.files.entries()) {
         if (value.uid === uid) {
@@ -538,7 +601,8 @@ export class DuetUpload {
       return null;
     };
     this.onDelete = (key, ev) => {
-      const retrievedKey = this.getItemFromUID(key).key;
+      const item = this.getItemFromUID(key);
+      const retrievedKey = item.key;
       const deletedItem = this.files.get(retrievedKey);
       this.files.delete(retrievedKey);
       this.validateTotals();
@@ -548,7 +612,8 @@ export class DuetUpload {
         data: { deletion: deletedItem },
         component: "duet-upload",
       });
-      if (!this.external) {
+      // don't send a xhr request if the item was pending, just remove it from the list
+      if (!this.external && !deletedItem.pending) {
         this.makeXHRDeleteRequest(deletedItem);
       }
       this.resetFormFields();
@@ -613,6 +678,7 @@ export class DuetUpload {
       const all = [...this.files.values()];
       const inprogress = [];
       const failure = [];
+      const pending = [];
       const success = [];
       all.forEach(data => {
         const group = this.getGroupFromItemData(data);
@@ -631,6 +697,13 @@ export class DuetUpload {
             group,
           });
         }
+        else if (group === this.DefaultGroups.pending) {
+          pending.push({
+            uid: data.uid,
+            item,
+            group,
+          });
+        }
         else if (group === this.DefaultGroups.failure) {
           failure.push({
             uid: data.uid,
@@ -648,6 +721,7 @@ export class DuetUpload {
       });
       return {
         inprogress,
+        pending,
         failure,
         success,
       };
@@ -729,6 +803,12 @@ export class DuetUpload {
     this.nativeInput.click();
     return;
   }
+  /**
+   * Method for uploading pending files
+   */
+  async uploadPending() {
+    this.uploadPendingFiles();
+  }
   /**
    * Method for forcing a render of the upload list, element.files can be changed externally
    * But it will only rerender on a new Map or a top Level change - this can be used to update
@@ -884,19 +964,14 @@ export class DuetUpload {
           this.updateValueInMap(item.name, "valid", false, false);
         }
         else if (valid && !this.external) {
-          // if all is well AND external file upload handling has not been set, start upload
-          const data = new FormData();
-          data.append("file", item);
-          data.append("uid", uid);
-          data.append("name", item.name);
-          data.append("metadata", JSON.stringify({ uid, url: this.uri, size: item.size, meta: fileListItem.meta }));
-          try {
-            fileListItem.xhr = await this.makeXHRPostRequest(data);
-          }
-          catch (e) {
-            // in case one of the global maxes have been reached, invalidate the file
-            this.updateValueInMap(item.name, "valid", false, false);
-          }
+          await this.uploadFile(fileListItem);
+        }
+        else if (valid && this.external) {
+          this.updateValueInMap(fileListItem.item.name, "pending", true, false);
+          this.updateValueInMap(fileListItem.item.name, "group", "pending", true);
+        }
+        else if (!valid) {
+          this.updateValueInMap(item.name, "valid", false, true);
         }
         // kick the stat to force update
         this.kick();
@@ -1007,6 +1082,24 @@ export class DuetUpload {
       "reflect": false,
       "defaultValue": "false"
     },
+    "deferUpload": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If defer-upload is true, duet-upload will not (as recommended) instantly upload files but await a call to uploadPending()"
+      },
+      "attribute": "defer-upload",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "hideButton": {
       "type": "boolean",
       "mutable": false,
@@ -1019,7 +1112,7 @@ export class DuetUpload {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "If set the upload component will not display an upload button, you will have to create one yourself\nand call the exposed method startUpload"
+        "text": "If set the upload component will not display an upload button, you will have to create one yourself\nand call the exposed method startUpload to open the upload dialog"
       },
       "attribute": "hide-upload-button",
       "reflect": false,
@@ -1044,7 +1137,7 @@ export class DuetUpload {
         "tags": [],
         "text": "Default actions added to the internally used duet-editable-table"
       },
-      "defaultValue": "[\n    {\n      icon: \"action-delete\",\n      color: \"color-danger\",\n      size: \"x-small\",\n      background: \"gray-lightest\",\n      name: \"delete\",\n      map: [\"success\", \"failure\"],\n      label: {\n        fi: \"Poista tiedosto\",\n        en: \"Poista tiedosto\",\n        sv: \"Ta bort filen\",\n      },\n    },\n    {\n      icon: \"navigation-close\",\n      color: \"primary\",\n      size: \"x-small\",\n      background: \"gray-lightest\",\n      name: \"cancel\",\n      map: [\"inprogress\"],\n      label: {\n        fi: \"Keskeyt\u00E4 l\u00E4hetys\",\n        en: \"Cancel the upload\",\n        sv: \"Stop \u00F6verf\u00F6ringen\",\n      },\n    },\n  ]"
+      "defaultValue": "[\n    {\n      icon: \"action-delete\",\n      color: \"color-danger\",\n      size: \"x-small\",\n      background: \"gray-lightest\",\n      name: \"delete\",\n      map: [\"success\", \"failure\", \"pending\"],\n      label: {\n        fi: \"Poista tiedosto\",\n        en: \"Poista tiedosto\",\n        sv: \"Ta bort filen\",\n      },\n    },\n    {\n      icon: \"navigation-close\",\n      color: \"primary\",\n      size: \"x-small\",\n      background: \"gray-lightest\",\n      name: \"cancel\",\n      map: [\"inprogress\"],\n      label: {\n        fi: \"Keskeyt\u00E4 l\u00E4hetys\",\n        en: \"Cancel the upload\",\n        sv: \"Stop \u00F6verf\u00F6ringen\",\n      },\n    },\n  ]"
     },
     "uri": {
       "type": "string",
@@ -1734,7 +1827,7 @@ export class DuetUpload {
           }],
         "text": "Array of group names that you want the editable table to use to display files"
       },
-      "defaultValue": "[\n    {\n      id: this.DefaultGroups.inprogress,\n      label: {\n        fi: \"Kesken olevat tiedostot\",\n        sv: \"Filer inprogress\",\n        en: \"Files inprogress\",\n      },\n    },\n    {\n      id: this.DefaultGroups.success,\n      label: {\n        fi: \"Valmiit tiedostot\",\n        sv: \"Files success\",\n        en: \"Files success\",\n      },\n    },\n    {\n      id: this.DefaultGroups.failure,\n      label: {\n        fi: \"Tiedostot, joissa on virheit\u00E4\",\n        sv: \"Filer med fel\",\n        en: \"Files with errors\",\n      },\n    },\n  ]"
+      "defaultValue": "[\n    {\n      id: this.DefaultGroups.inprogress,\n      label: {\n        fi: \"Kesken olevat tiedostot\",\n        sv: \"Filer inprogress\",\n        en: \"Files inprogress\",\n      },\n    },\n    {\n      id: this.DefaultGroups.pending,\n      label: {\n        en: \"Files to upload\",\n        sv: \"Filer att ladda\",\n        fi: \"Tiedostot ladattavat\",\n      },\n    },\n    {\n      id: this.DefaultGroups.success,\n      label: {\n        fi: \"Valmiit tiedostot\",\n        sv: \"Files success\",\n        en: \"Files success\",\n      },\n    },\n    {\n      id: this.DefaultGroups.failure,\n      label: {\n        fi: \"Tiedostot, joissa on virheit\u00E4\",\n        sv: \"Filer med fel\",\n        en: \"Files with errors\",\n      },\n    },\n  ]"
     }
   }; }
   static get states() { return {
@@ -1954,6 +2047,22 @@ export class DuetUpload {
         "tags": []
       }
     },
+    "uploadPending": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Method for uploading pending files",
+        "tags": []
+      }
+    },
     "refresh": {
       "complexType": {
         "signature": "() => Promise<void>",

package/lib/collection/components/duet-upload/upload-editable-item-pending.js

@@ -0,0 +1,7 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h } from "@stencil/core";
+export const PendingItem = ({ name }) => (h("span", null,
+  h("duet-paragraph", { color: "secondary", margin: "none", size: "small" }, name),
+  h("duet-spacer", { size: "xx-small" })));

package/lib/collection/utils/token-utils.js

@@ -103,3 +103,17 @@ export function getFontSizeByName(name) {
 export function getFontWeightByName(name) {
   return getTokenByName("fontWeight", name);
 }
+export function shadeRGBColor(color, percent) {
+  const f = color.split(","), t = percent < 0 ? 0 : 255, p = percent < 0 ? percent * -1 : percent;
+  let R = parseInt(f[0].slice(4)), G = parseInt(f[1]), B = parseInt(f[2]);
+  R = Math.round((t - R) * p) + R;
+  G = Math.round((t - G) * p) + G;
+  B = Math.round((t - B) * p) + B;
+  R = R < 0 ? 0 : R;
+  R = R > 255 ? 255 : R;
+  G = G < 0 ? 0 : G;
+  G = G > 255 ? 255 : G;
+  B = B < 0 ? 0 : B;
+  B = B > 255 ? 255 : B;
+  return `rgb(${R},${G},${B})`;
+}