quasar-ui-danx 0.0.9 → 0.0.11

package/src/helpers/FileUpload.ts

@@ -0,0 +1,294 @@
+import { FlashMessages, resolveFileLocation } from "danx/src/helpers";
+import { uid } from "quasar";
+
+export type FileUploadOptions = {
+  directory: string,
+  presignedUploadUrl: (...params) => "",
+  uploadCompletedUrl: (...params) => "",
+};
+
+export class FileUpload {
+  files: { id: string, blobUrl: string }[] = [];
+  fileUploads = [];
+  onErrorCb = null;
+  onProgressCb = null;
+  onCompleteCb = null;
+  onAllCompleteCb = null;
+  options: FileUploadOptions = {
+    directory: "file-upload",
+    presignedUploadUrl: null,
+    uploadCompletedUrl: null
+  };
+
+  constructor(files, options: FileUploadOptions) {
+    if (!Array.isArray(files) && !(files instanceof FileList)) {
+      files = [files];
+    }
+    this.files = files;
+    this.fileUploads = [];
+    this.onErrorCb = null;
+    this.onProgressCb = null;
+    this.onCompleteCb = null;
+    this.onAllCompleteCb = null;
+
+    this.options = {
+      ...this.options,
+      ...options
+    };
+    this.prepare();
+  }
+
+  /**
+   * Prepares all files for upload and provides an id and blobUrl for each file
+   */
+  prepare() {
+    // Prepare required attributes
+    for (const file of this.files) {
+      if (!(file instanceof File)) {
+        throw Error(
+          "FileUpload constructor requires a File object or a list of File objects"
+        );
+      }
+
+      file.id = uid();
+      file.blobUrl = URL.createObjectURL(file);
+
+      // Prepare FormData
+      const formData = new FormData();
+      formData.append("file", file);
+
+      this.fileUploads.push({
+        file,
+        xhr: null, // NOTE: The XHR will be setup asynchronously right before sending file uploads
+        formData,
+        isComplete: false
+      });
+    }
+  }
+
+  /**
+   * Callback for when all files have been uploaded
+   */
+  onAllComplete(cb) {
+    this.onAllCompleteCb = cb;
+    return this;
+  }
+
+  /**
+   * Callback fired once for each file upon successful completion of upload
+   * @param cb
+   * @returns {FileUpload}
+   */
+  onComplete(cb) {
+    this.onCompleteCb = cb;
+    return this;
+  }
+
+  /**
+   * Callback fired each time there is an upload progress update for a file
+   * @param cb
+   * @returns {FileUpload}
+   */
+  onProgress(cb) {
+    this.onProgressCb = cb;
+    return this;
+  }
+
+  /**
+   * Callback fired when an error occurs during upload
+   * @param cb
+   * @returns {FileUpload}
+   */
+  onError(cb) {
+    this.onErrorCb = cb;
+    return this;
+  }
+
+  /**
+   * Handles the error events / fires the callback if it is set
+   * @param e
+   * @param file
+   * @param error
+   */
+  errorHandler(e, file, error = null) {
+    if (this.onErrorCb) {
+      this.onErrorCb({ e, file, error });
+    }
+  }
+
+  /**
+   * Resolve the locations of all the files
+   * @returns {Promise<FileUpload>}
+   */
+  async resolveLocation(waitMessage = null) {
+    for (const fileUpload of this.fileUploads) {
+      fileUpload.file.location = await resolveFileLocation(
+        fileUpload.file,
+        waitMessage
+      );
+      fileUpload.formData.append(
+        "meta",
+        JSON.stringify(fileUpload.file.location)
+      );
+    }
+    return this;
+  }
+
+  /**
+   * Fires the progress callback
+   * @param fileUpload
+   * @param progress
+   */
+  fireProgressCallback(fileUpload, progress) {
+    fileUpload.file.progress = progress;
+    this.onProgressCb && this.onProgressCb({ file: this.wrapFile(fileUpload.file), progress });
+  }
+
+  /**
+   * Fires the complete callback
+   * @param fileUpload
+   * @param uploadedFile
+   */
+  fireCompleteCallback(fileUpload, uploadedFile) {
+    fileUpload.isComplete = true;
+    fileUpload.file.progress = 1;
+    this.onCompleteCb && this.onCompleteCb({ file: this.wrapFile(fileUpload.file), uploadedFile });
+  }
+
+  /**
+   * Check if all files have been uploaded and call the callback if they have
+   */
+  checkAllComplete() {
+    if (this.onAllCompleteCb) {
+      if (this.fileUploads.every((fileUpload) => fileUpload.isComplete)) {
+        this.onAllCompleteCb({ files: this.fileUploads });
+      }
+    }
+  }
+
+  /**
+   * Returns a native JS object that is easier to work with than the File objects (no weird behavior of missing
+   * properties, easily printable, etc.)
+   * @param file
+   * @returns {{size, name, progress, location, blobUrl: *, id, type}}
+   */
+  wrapFile(file) {
+    return {
+      id: file.id,
+      name: file.name,
+      size: file.size,
+      type: file.type,
+      progress: file.progress,
+      location: file.location,
+      blobUrl: file.blobUrl
+    };
+  }
+
+  /**
+   * Registers all the callbacks requested for the XHR / post-processing of file uploads
+   */
+  setXhrCallbacks() {
+    // Set the error callbacks
+    for (const fileUpload of this.fileUploads) {
+      fileUpload.xhr.addEventListener(
+        "error",
+        (e) => this.errorHandler(e, fileUpload.file),
+        false
+      );
+    }
+
+    // Set the progress callbacks
+    if (this.onProgressCb) {
+      for (const fileUpload of this.fileUploads) {
+        fileUpload.xhr.upload.addEventListener(
+          "progress",
+          (e) => {
+            // Max of 95%, so we can indicate we are completing the signed URL process
+            const progress = Math.min(.95, e.loaded / e.total);
+            this.fireProgressCallback(fileUpload, progress);
+          },
+          false
+        );
+      }
+    }
+
+    // Set the load callbacks which registers the Complete / All Complete callbacks and handles non-xhr related errors
+    for (const fileUpload of this.fileUploads) {
+      fileUpload.xhr.addEventListener(
+        "load",
+        async (e) => {
+          try {
+            // First complete the presigned upload to get the updated file resource data
+            const uploadedFile = await this.completePresignedUpload(fileUpload);
+
+            // Fire the file complete callbacks
+            this.fireCompleteCallback(fileUpload, uploadedFile);
+            this.checkAllComplete();
+          } catch (error) {
+            this.errorHandler(e, fileUpload.file, error);
+          }
+        },
+        false
+      );
+    }
+  }
+
+  /**
+   * Mark the presigned upload as completed and return the file resource from the platform server
+   * @param fileUpload
+   * @returns {Promise<void>}
+   */
+  async completePresignedUpload(fileUpload) {
+    // Show 95% as the last 5% will be to complete the presigned upload
+    this.fireProgressCallback(fileUpload, .95);
+
+    // Let the platform know the presigned upload is complete
+    return await fetch(this.options.uploadCompletedUrl(fileUpload.file.resource_id), { method: "POST" }).then(r => r.json());
+  }
+
+  /**
+   * Start uploading all files
+   */
+  async upload() {
+    for (const fileUpload of this.fileUploads) {
+      const mimeType = fileUpload.file.mimeType || fileUpload.file.type;
+      const presignedUrl = this.options.presignedUploadUrl(this.options.directory, fileUpload.file.name, mimeType);
+
+      // Fetch presigned upload URL
+      const fileResource = await fetch(presignedUrl).then(r => r.json());
+
+      if (!fileResource.url) {
+        FlashMessages.error("Could not fetch presigned upload URL for file " + fileUpload.file.name);
+        continue;
+      }
+
+      const isS3Upload = !fileResource.url.match("upload-presigned-url-contents");
+
+      // We need the file resource ID to complete the presigned upload
+      fileUpload.file.resource_id = fileResource.id;
+
+      // Prepare XHR request
+      const xhr = new XMLHttpRequest();
+
+      // The XHR request is different based on weather we're sending to S3 or the platform server
+      if (isS3Upload) {
+        xhr.open("PUT", fileResource.url);
+        xhr.setRequestHeader("Content-Type", mimeType);
+        fileUpload.body = fileUpload.file;
+      } else {
+        xhr.open("POST", fileResource.url);
+        fileUpload.body = fileUpload.formData;
+      }
+
+      fileUpload.xhr = xhr;
+    }
+
+    // Set all the callbacks on the XHR requests
+    this.setXhrCallbacks();
+
+    // Send all the XHR file uploads
+    for (const fileUpload of this.fileUploads) {
+      fileUpload.xhr.send(fileUpload.body);
+    }
+  }
+}

package/src/helpers/FlashMessages.ts

@@ -0,0 +1,79 @@
+import { watch } from "vue";
+
+export class FlashMessages {
+  static notify;
+
+  static PROP_DEFINITIONS = {
+    successMsg: {
+      type: String,
+      default: ""
+    },
+    errorMsg: {
+      type: String,
+      default: ""
+    },
+    warningMsg: {
+      type: String,
+      default: ""
+    }
+  };
+
+  static enable(msgProps) {
+    FlashMessages.success(msgProps.successMsg);
+    FlashMessages.error(msgProps.errorMsg);
+    FlashMessages.warning(msgProps.warningMsg);
+    watch(() => msgProps.successMsg, FlashMessages.success);
+    watch(() => msgProps.errorMsg, FlashMessages.error);
+    watch(() => msgProps.warningMsg, FlashMessages.warning);
+  }
+
+  static send(message, options = {}) {
+    if (message) {
+      FlashMessages.notify({
+        message,
+        timeout: 2500,
+        color: "gray-base",
+        textColor: "white",
+        position: "top",
+        closeBtn: "X",
+        ...options
+      });
+    }
+  }
+
+  static success(message, options = {}) {
+    FlashMessages.send(message, {
+      color: "green-light",
+      textColor: "green-dark",
+      icon: "hero:check-circle",
+      ...options
+    });
+  }
+
+  static error(message, options = {}) {
+    FlashMessages.send(message, {
+      color: "red-light",
+      textColor: "red-dark",
+      icon: "hero:alert",
+      ...options
+    });
+  }
+
+  static warning(message, options = {}) {
+    FlashMessages.send(message, {
+      color: "yellow-lighter",
+      textColor: "yellow-base",
+      icon: "hero:alert",
+      ...options
+    });
+  }
+
+  static combine(type, messages, options = {}) {
+    FlashMessages[type](messages.map(m => typeof m === "string" ? m : (m.message || m.Message)).join("<br/>"), {
+      ...options,
+      html: true
+    });
+  }
+}
+
+export const notify = new FlashMessages();

package/src/helpers/array.ts

@@ -0,0 +1,37 @@
+/**
+ *
+ * @param array
+ * @param item
+ * @param newItem
+ * @returns {*[]}
+ */
+export function replace(array, item, newItem = undefined) {
+  const index =
+    typeof item === "function" ? array.findIndex(item) : array.indexOf(item);
+  if (index === false) {
+    console.error("Item not found in array", item, array);
+    throw new Error("Item not found in array");
+  }
+  const newArray = [...array];
+  newItem !== undefined
+    ? newArray.splice(index, 1, newItem)
+    : newArray.splice(index, 1);
+  return newArray;
+}
+
+export function remove(array, item) {
+  return replace(array, item);
+}
+
+/**
+ * Remove duplicate items from an array using a callback to compare 2 elements
+ * @param array
+ * @param cb
+ * @returns {*}
+ */
+export function uniqueBy(array, cb) {
+  return array.filter((a, index, self) => {
+    // Check if the current element 'a' is the first occurrence in the array
+    return index === self.findIndex((b) => cb(a, b));
+  });
+}

package/src/helpers/compatibility.ts

@@ -0,0 +1,64 @@
+import { useGeolocation } from "@vueuse/core";
+import { sleep } from "quasar-ui-danx/src/helpers";
+import { computed } from "vue";
+
+let isLoaded = false;
+let hasAlreadyWaited = false;
+let geolocationError = null;
+let hasLocation = null;
+let geolocation = null;
+
+export function useCompatibility(requestLocation = true) {
+  if (!isLoaded && requestLocation) {
+    const { coords, error, locatedAt } = useGeolocation();
+    geolocationError = error;
+    hasLocation = locatedAt;
+    geolocation = coords;
+    isLoaded = true;
+  }
+
+  const isLocationSupported = "geolocation" in navigator;
+
+  const location = computed(() => {
+    if (hasLocation?.value) {
+      return geolocation?.value;
+    }
+    return null;
+  });
+
+  const isCompatible = computed(() => !geolocationError?.value && !!hasLocation?.value);
+
+  /**
+   * Wait for location to be available and returns the location when it is or null after the wait period times out.
+   * @param maxWait
+   */
+  const waitForLocation = async (maxWait = 3000) => {
+    // We only should wait once, if we already waited and failed, its unlikely the location will be available at a
+    // later time
+    if (hasAlreadyWaited) {
+      return location;
+    }
+
+    hasAlreadyWaited = true;
+    let waitTime = 0;
+    while (!location.value) {
+      await sleep(100);
+      waitTime += 100;
+
+      if (waitTime > maxWait) {
+        return null;
+      }
+    }
+
+    return location;
+  };
+
+  return {
+    isLocationSupported,
+    isCompatible,
+    geolocationError,
+    hasLocation,
+    location,
+    waitForLocation
+  };
+}

package/src/helpers/date.ts

@@ -0,0 +1,5 @@
+import { parseDateTime } from "danx/src/helpers/formats";
+
+export function diffInDays(date1, date2) {
+  return parseDateTime(date2).diff(parseDateTime(date1), ["days"]).days;
+}

package/src/helpers/download.ts

@@ -0,0 +1,192 @@
+// download.js v4.2, by dandavis; 2008-2016. [CCBY2] see http://danml.com/download.html for tests/usage
+// v1 landed a FF+Chrome compat way of downloading strings to local un-named files, upgraded to use a hidden frame and
+// optional mime v2 added named files via a[download], msSaveBlob, IE (10+) support, and window.URL support for
+// larger+faster saves than dataURLs v3 added dataURL and Blob Input, bind-toggle arity, and legacy dataURL fallback
+// was improved with force-download mime and base64 support. 3.1 improved safari handling. v4 adds AMD/UMD, commonJS,
+// and plain browser support v4.1 adds url download capability via solo URL argument (same domain/CORS only) v4.2 adds
+// semantic variable names, long (over 2MB) dataURL support, and hidden by default temp anchors
+// https://github.com/rndme/download
+
+/* eslint-disable */
+export function download(data, strFileName, strMimeType) {
+  var self = window;
+  // this script is only for browsers anyway...
+
+  var defaultMime = "application/octet-stream";
+  // this default mime also triggers iframe downloads
+
+  var mimeType = strMimeType || defaultMime;
+
+  var payload = data;
+
+  var url = !strFileName && !strMimeType && payload;
+
+  var anchor = document.createElement("a");
+
+  var toString = function(a) {
+    return String(a);
+  };
+
+  var myBlob = self.Blob || self.MozBlob || self.WebKitBlob || toString;
+
+  var fileName = strFileName || "download";
+
+  var blob;
+
+  var reader;
+  myBlob = myBlob.call ? myBlob.bind(self) : Blob;
+
+  if (String(this) === "true") {
+    // reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback
+    payload = [payload, mimeType];
+    mimeType = payload[0];
+    payload = payload[1];
+  }
+
+  if (url && url.length < 2048) {
+    // if no filename and no mime, assume a url was passed as the only argument
+    fileName = url.split("/").pop().split("?")[0];
+    anchor.href = url; // assign href prop to temp anchor
+
+    // if the browser determines that it's a potentially valid url path:
+    if (
+      anchor.href.indexOf(url) !== -1 ||
+      anchor.href.indexOf(encodeURI(url)) !== -1 ||
+      anchor.href === encodeURI(url)
+    ) {
+      var ajax = new XMLHttpRequest();
+      ajax.open("GET", url + "?no-cache=" + Date.now(), true);
+      ajax.responseType = "blob";
+      ajax.onload = function(e) {
+        download(e.target.response, fileName, defaultMime);
+      };
+      ajax.onerror = function(e) {
+        // As a fallback, just open the request in a new tab
+        window.open(url, "_blank").focus();
+      };
+      setTimeout(function() {
+        ajax.send();
+      }, 0); // allows setting custom ajax headers using the return:
+      return ajax;
+    } else {
+      throw new Error("Invalid URL given, cannot download file: " + url);
+    }
+  } // end if url?
+
+  // go ahead and download dataURLs right away
+  if (/^data:[\w+-]+\/[\w+-]+[,;]/.test(payload)) {
+    if (payload.length > 1024 * 1024 * 1.999 && myBlob !== toString) {
+      payload = dataUrlToBlob(payload);
+      mimeType = payload.type || defaultMime;
+    } else {
+      return navigator.msSaveBlob // IE10 can't do a[download], only Blobs:
+        ? navigator.msSaveBlob(dataUrlToBlob(payload), fileName)
+        : saver(payload); // everyone else can save dataURLs un-processed
+    }
+  } // end if dataURL passed?
+
+  blob =
+    payload instanceof myBlob
+      ? payload
+      : new myBlob([payload], { type: mimeType });
+
+  function dataUrlToBlob(strUrl) {
+    var parts = strUrl.split(/[:;,]/);
+
+    var type = parts[1];
+
+    var decoder = parts[2] === "base64" ? atob : decodeURIComponent;
+
+    var binData = decoder(parts.pop());
+
+    var mx = binData.length;
+
+    var i = 0;
+
+    var uiArr = new Uint8Array(mx);
+
+    for (i; i < mx; ++i) uiArr[i] = binData.charCodeAt(i);
+
+    return new myBlob([uiArr], { type: type });
+  }
+
+  function saver(url, winMode) {
+    if ("download" in anchor) {
+      // html5 A[download]
+      anchor.href = url;
+      anchor.setAttribute("download", fileName);
+      anchor.className = "download-js-link";
+      anchor.innerHTML = "downloading...";
+      anchor.style.display = "none";
+      document.body.appendChild(anchor);
+      setTimeout(function() {
+        anchor.click();
+        document.body.removeChild(anchor);
+        if (winMode === true) {
+          setTimeout(function() {
+            self.URL.revokeObjectURL(anchor.href);
+          }, 250);
+        }
+      }, 66);
+      return true;
+    }
+
+    // handle non-a[download] safari as best we can:
+    if (
+      /(Version)\/(\d+)\.(\d+)(?:\.(\d+))?.*Safari\//.test(navigator.userAgent)
+    ) {
+      url = url.replace(/^data:([\w/\-+]+)/, defaultMime);
+      if (!window.open(url)) {
+        // popup blocked, offer direct download:
+        if (
+          confirm(
+            "Displaying New Document\n\nUse Save As... to download, then click back to return to this page."
+          )
+        ) {
+          location.href = url;
+        }
+      }
+      return true;
+    }
+
+    // do iframe dataURL download (old ch+FF):
+    var f = document.createElement("iframe");
+    document.body.appendChild(f);
+
+    if (!winMode) {
+      // force a mime that will download:
+      url = "data:" + url.replace(/^data:([\w/\-+]+)/, defaultMime);
+    }
+    f.src = url;
+    setTimeout(function() {
+      document.body.removeChild(f);
+    }, 333);
+  } // end saver
+
+  if (navigator.msSaveBlob) {
+    // IE10+ : (has Blob, but not a[download] or URL)
+    return navigator.msSaveBlob(blob, fileName);
+  }
+
+  if (self.URL) {
+    // simple fast and modern way using Blob and URL:
+    saver(self.URL.createObjectURL(blob), true);
+  } else {
+    // handle non-Blob()+non-URL browsers:
+    if (typeof blob === "string" || blob.constructor === toString) {
+      try {
+        return saver("data:" + mimeType + ";base64," + self.btoa(blob));
+      } catch (y) {
+        return saver("data:" + mimeType + "," + encodeURIComponent(blob));
+      }
+    }
+
+    // Blob but not URL support:
+    reader = new FileReader();
+    reader.onload = function(e) {
+      saver(this.result);
+    };
+    reader.readAsDataURL(blob);
+  }
+  return true;
+}