quasar-ui-danx 0.0.10 → 0.0.12

package/src/helpers/FileUpload.ts

@@ -0,0 +1,295 @@
+import { FlashMessages, resolveFileLocation } from "@ui/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 { sleep } from "@ui/helpers";
+import { useGeolocation } from "@vueuse/core";
+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 "@ui/helpers/formats";
+
+export function diffInDays(date1, date2) {
+    return parseDateTime(date2).diff(parseDateTime(date1), ["days"]).days;
+}

package/src/helpers/download.ts

@@ -0,0 +1,200 @@
+// 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);
+    };
+
+    // @ts-ignore
+    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) {
+                // @ts-ignore
+                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 {
+            // IE10 can't do a[download], only Blobs
+            // everyone else can save dataURLs un-processed
+            // @ts-ignore
+            return navigator.msSaveBlob ? navigator.msSaveBlob(dataUrlToBlob(payload), fileName) : saver(payload);
+        }
+    } // 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
+
+    // @ts-ignore
+    if (navigator.msSaveBlob) {
+        // IE10+ : (has Blob, but not a[download] or URL)
+        // @ts-ignore
+        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 {
+                // @ts-ignore
+                return saver("data:" + mimeType + ";base64," + self.btoa(blob));
+            } catch (y) {
+                // @ts-ignore
+                return saver("data:" + mimeType + "," + encodeURIComponent(blob));
+            }
+        }
+
+        // Blob but not URL support:
+        reader = new FileReader();
+        reader.onload = function (e) {
+            // @ts-ignore
+            saver(this.result);
+        };
+        reader.readAsDataURL(blob);
+    }
+    return true;
+}