quasar-ui-danx 0.0.10 → 0.0.11

package/src/helpers/downloadPdf.ts

@@ -0,0 +1,92 @@
+import { download } from "danx/src/helpers/download";
+
+/**
+ * Asynchronously load a file from the URL and trigger a download in the browser
+ *
+ * @param url
+ * @param filename
+ * @param postParams
+ * @returns {Promise<void>}
+ */
+export async function downloadFile(url, filename = "", postParams = null) {
+  let fetchOptions = undefined;
+
+  if (postParams) {
+    fetchOptions = {
+      method: "POST",
+      "Content-Type": "application/json",
+      body: JSON.stringify(postParams)
+    };
+  }
+
+  const response = await fetch(url, fetchOptions);
+
+  if (!response.ok) {
+    throw Error("File download failed: invalid response from server");
+  }
+
+  let errorMessage;
+
+  // Handle a JSON response (which indicates an error occurred)
+  try {
+    // @ts-expect-error data is defined on response
+    const jsonResponse = JSON.parse(new TextDecoder().decode(response.data));
+    console.error("Error downloading file:", jsonResponse);
+    errorMessage = jsonResponse.message;
+    if (jsonResponse.errors) {
+      errorMessage = jsonResponse.errors[0].message;
+    }
+  } catch (e) {
+    // we expect an error thrown for invalid JSON when the response is a file
+  }
+
+  if (errorMessage) {
+    throw new Error("Failed to download file: " + errorMessage);
+  }
+
+  await downloadFileResponse(response, filename);
+}
+
+/**
+ * Downloads a file from a response object w/ a file attachment
+ *
+ * @param response
+ * @param filename
+ */
+export async function downloadFileResponse(response, filename = "") {
+  const contentDisposition = getResponseHeader(
+    response,
+    "content-disposition",
+    ""
+  );
+
+  const contentType = getResponseHeader(response, "content-type", "");
+
+  const match = contentDisposition.match(/filename="([^"]+)"/);
+
+  filename = filename || (match && match[1]) || "download.pdf";
+
+  let data = response.data;
+  if (!data) {
+    data = await response.blob();
+  }
+
+  download(data, filename, contentType);
+}
+
+/**
+ * Get a header from a response object
+ * @param response
+ * @param header
+ * @param defaultValue
+ * @returns {*}
+ */
+export function getResponseHeader(response, header, defaultValue) {
+  if (response.headers) {
+    if (typeof response.headers.get === "function") {
+      return response.headers.get(header) || defaultValue;
+    } else {
+      return response.headers[header] || defaultValue;
+    }
+  }
+}

package/src/helpers/files.ts

@@ -0,0 +1,52 @@
+import { FlashMessages, useCompatibility } from "danx/src/helpers";
+import ExifReader from "exifreader";
+
+export async function resolveFileLocation(file, waitMessage = null) {
+  if (file.location) {
+    return file.location;
+  }
+
+  try {
+    const tags = await ExifReader.load(file.blobUrl || file.url, {
+      expanded: true
+    });
+    if (tags.gps) {
+      return {
+        latitude: tags.gps.Latitude,
+        longitude: tags.gps.Longitude
+      };
+    }
+
+    const { waitForLocation, location } = useCompatibility();
+
+    // Show a waiting for location message if we have not returned within 1 second
+    if (waitMessage) {
+      setTimeout(() => {
+        if (!location.value && waitMessage) {
+          FlashMessages.warning(waitMessage);
+        }
+      }, 1000);
+    }
+
+    // Wait for the browser to return the location (https only as http will not return a location)
+    if (window.location.protocol === "https:") {
+      await waitForLocation();
+    }
+    // Ignore the wait message if we already returned
+    waitMessage = false;
+    if (!location.value) {
+      return null;
+    }
+
+    return {
+      latitude: location.value.latitude,
+      longitude: location.value.longitude,
+      accuracy: location.value.accuracy,
+      altitude: location.value.altitude,
+      altitudeAccuracy: location.value.altitudeAccuracy
+    };
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+}

package/src/helpers/formats.ts

@@ -0,0 +1,183 @@
+import { DateTime, IANAZone } from "luxon";
+
+const SERVER_TZ = new IANAZone("America/Chicago");
+
+/**
+ * Converts a date string from the server's time zone to the user's time zone.
+ * @param {String} dateTimeString
+ * @returns {DateTime}
+ */
+export function localizedDateTime(dateTimeString) {
+  dateTimeString = dateTimeString?.replace("T", " ");
+  // noinspection JSCheckFunctionSignatures
+  return DateTime.fromSQL(dateTimeString, { zone: SERVER_TZ }).setZone("local");
+}
+
+/**
+ * Converts a date string from the user's time zone to the server's time zone.
+ * @param dateTimeString
+ * @returns {DateTime}
+ */
+export function remoteDateTime(dateTimeString) {
+  dateTimeString = dateTimeString?.replace("T", " ");
+  // noinspection JSCheckFunctionSignatures
+  return DateTime.fromSQL(dateTimeString, { zone: "local" }).setZone(SERVER_TZ);
+}
+
+/**
+ * @param {DateTime|String} dateTime
+ * @returns {DateTime|*}
+ */
+export function parseDateTime(dateTime) {
+  if (typeof dateTime === "string") {
+    dateTime = dateTime.replace("T", " ").replace(/\//g, "-");
+    return DateTime.fromSQL(dateTime);
+  }
+  return dateTime || DateTime.fromSQL("0000-00-00 00:00:00");
+}
+
+/**
+ * Parses a Quasar formatted date string into a Luxon DateTime object
+ * @param date
+ * @param format
+ * @returns {DateTime}
+ */
+export function parseQDate(date, format = "yyyy/MM/dd") {
+  return DateTime.fromFormat(date, format);
+}
+
+/**
+ * Parses a Quasar formatted date/time string into a Luxon DateTime object
+ * @param date
+ * @param format
+ * @returns {DateTime}
+ */
+export function parseQDateTime(date, format = "yyyy/MM/dd HH:mm:ss") {
+  return DateTime.fromFormat(date, format);
+}
+
+/**
+ * Formats a Luxon DateTime object into a Quasar formatted date string
+ * @param date
+ * @returns {string}
+ */
+export function fQDate(date) {
+  return fDate(date, { format: "yyyy/MM/dd" });
+}
+
+/**
+ *
+ * @param {String} dateTimeString
+ * @param options
+ * @returns {string}
+ */
+export function fLocalizedDateTime(dateTimeString, options = {}) {
+  return fDateTime(localizedDateTime(dateTimeString), options);
+}
+
+/**
+ * Formats a date/time object or string into a human-readable format
+ *
+ * @param {String|Object} dateTime
+ * @param format
+ * @param {String|null} empty
+ * @returns {string}
+ */
+export function fDateTime(
+  dateTime = null,
+  { format = "M/d/yy h:mma", empty = "- -" } = {}
+) {
+  const formatted = (dateTime ? parseDateTime(dateTime) : DateTime.now()).toFormat(format).toLowerCase();
+  return formatted === "invalid datetime" ? empty : formatted;
+}
+
+/**
+ * Formats a date/time object or string into the best format for DB input
+ * @param dateTime
+ * @returns {string}
+ */
+export function dbDateTime(dateTime = null) {
+  return fDateTime(dateTime, { format: "yyyy-MM-dd HH:mm:ss", empty: null });
+}
+
+/**
+ * Formats a date object or string into a human-readable format
+ * @param {String|Object} dateTime
+ * @param {String|null} empty
+ * @param format
+ * @returns {string}
+ */
+export function fDate(dateTime, { empty = "--", format = "M/d/yy" } = {}) {
+  const formatted = parseDateTime(dateTime).toFormat(format);
+  return ["Invalid DateTime", "invalid datetime"].includes(formatted) ? empty : formatted;
+}
+
+/**
+ * Formats a number of seconds into Hours / Minutes / Seconds or just Minutes and Seconds
+ *
+ * @param second
+ * @returns {string}
+ */
+export function fSecondsToTime(second) {
+  const time = DateTime.now().setZone("UTC").startOf("year").set({ second });
+  const hours = Math.floor(second / 3600);
+  return (hours ? hours + ":" : "") + time.toFormat("mm:ss");
+}
+
+/**
+ * Formats an amount into USD currency format
+ * @param amount
+ * @returns {string}
+ */
+export function fCurrency(amount) {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD"
+  }).format(amount);
+}
+
+/**
+ * Formats a number into a human-readable format
+ * @param number
+ * @param options
+ * @returns {string}
+ */
+export function fNumber(number, options = {}) {
+  return new Intl.NumberFormat("en-US", options).format(number);
+}
+
+/**
+ * Truncates the string by removing chars from the middle of the string
+ * @param str
+ * @param maxLength
+ * @returns {string|*}
+ */
+export function centerTruncate(str, maxLength) {
+  if (str.length > maxLength) {
+    const frontCharCount = Math.floor((maxLength - 3) / 2);
+    const backCharCount = maxLength - frontCharCount - 3;
+    return (
+      str.substring(0, frontCharCount) +
+      "..." +
+      str.substring(str.length - backCharCount)
+    );
+  } else {
+    return str;
+  }
+}
+
+/**
+ * Formats a number into a percentage
+ * @param num
+ * @param options
+ * @returns {string}
+ */
+export function fPercent(num, options = { multiplier: 100, maximumFractionDigits: 1, NaN: "N/A" }) {
+  num = parseFloat(num);
+
+  if (isNaN(num)) {
+    return options.NaN;
+  }
+
+  return fNumber(num * options.multiplier, options) + "%";
+}

package/src/helpers/http.ts

@@ -0,0 +1,62 @@
+export const request = {
+  async get(url, options = {}) {
+    return fetch(url, {
+      method: "get",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json"
+      },
+      ...options
+    });
+  },
+
+  async post(url, data = {}, options = {}) {
+    return fetch(url, {
+      method: "post",
+      body: JSON.stringify(data),
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json"
+      },
+      ...options
+    }).then((r) => r.json());
+  }
+};
+
+/**
+ * Fetches a resource list applying the filter. If there is a selected resource,
+ * stores that resource from the already populated list. If that resource does not exist
+ * also fetches that resource record from the endpoint, then adds it to the list if it
+ * does not exist in the filtered list
+ *
+ * @param fetchFn
+ * @param list
+ * @param id
+ * @param filter
+ * @returns {Promise<void>}
+ */
+export async function fetchResourceListWithSelected(fetchFn, list, id, filter) {
+  // First make sure we have the selected record, so we can always add it to the list
+  let selectedResource;
+  if (id) {
+    selectedResource = list.value.find((c) => c.id === id) || (await fetchFn({ id }))[0];
+  }
+
+  // Get the filtered campaign list
+  list.value = await fetchFn(filter);
+
+  // If our selected campaign is not in the filtered list, add it
+  if (selectedResource && !list.value.find((c) => c.id === id)) {
+    list.value.push(selectedResource);
+  }
+}
+
+/**
+ * Returns the value of the URL parameter (if it is set)
+ * @param key
+ * @param url
+ */
+export function getUrlParam(key, url = undefined) {
+  const params = new URLSearchParams(url?.replace(/.*\?/, "") || window.location.search);
+  return params.get(key);
+}

package/src/helpers/index.ts

@@ -1 +1,10 @@
-export * from './utils';
+export * from "./array";
+export * from "./compatibility";
+export * from "./files";
+export * from "./FileUpload";
+export * from "./FlashMessages";
+export * from "./http";
+export * from "./multiFileUpload";
+export * from "./singleFileUpload";
+export * from "./storage";
+export * from "./utils";

package/src/helpers/multiFileUpload.ts

@@ -0,0 +1,68 @@
+import { FileUpload, FileUploadOptions } from "danx/src/helpers/FileUpload";
+import { ref } from "vue";
+
+export function useMultiFileUpload(options: FileUploadOptions) {
+  const uploadedFiles = ref([]);
+  const onCompleteCb = ref(null);
+  const onFilesChangeCb = ref(null);
+  const onFilesSelected = (e) => {
+    uploadedFiles.value = [...uploadedFiles.value, ...e.target.files];
+    new FileUpload(e.target.files, options)
+      .onProgress(({ file }) => {
+        updateFileInList(file);
+      })
+      .onComplete(({ file, uploadedFile }) => {
+        updateFileInList(file, uploadedFile);
+      })
+      .onAllComplete(() => {
+        onCompleteCb.value && onCompleteCb.value();
+        onFilesChangeCb.value && onFilesChangeCb.value(uploadedFiles.value);
+      })
+      .upload();
+  };
+
+  function updateFileInList(file, replace = null) {
+    const index = uploadedFiles.value.findIndex(f => f.id === file.id);
+    if (index !== -1) {
+      uploadedFiles.value.splice(index, 1, replace || file);
+    }
+    onFilesChangeCb.value && onFilesChangeCb.value(uploadedFiles.value);
+  }
+
+  const onDrop = (e) => {
+    onFilesSelected({ target: { files: e.dataTransfer.files } });
+  };
+
+  const onFilesChange = (cb) => {
+    onFilesChangeCb.value = cb;
+  };
+
+  const onComplete = (cb) => {
+    onCompleteCb.value = cb;
+  };
+
+  const onClear = () => {
+    uploadedFiles.value = [];
+    onFilesChangeCb.value && onFilesChangeCb.value(uploadedFiles.value);
+    onCompleteCb.value && onCompleteCb.value();
+  };
+
+  const onRemove = (file) => {
+    const index = uploadedFiles.value.findIndex(f => f.id === file.id);
+    if (index !== -1) {
+      uploadedFiles.value.splice(index, 1);
+    }
+    onFilesChangeCb.value && onFilesChangeCb.value(uploadedFiles.value);
+    onCompleteCb.value && onCompleteCb.value();
+  };
+
+  return {
+    onClear,
+    onRemove,
+    onComplete,
+    onFilesChange,
+    onDrop,
+    onFilesSelected,
+    uploadedFiles
+  };
+}

package/src/helpers/singleFileUpload.ts

@@ -0,0 +1,54 @@
+import { FileUpload, FileUploadOptions } from "danx/src/helpers";
+import { computed, ref } from "vue";
+
+export function useSingleFileUpload(options: FileUploadOptions) {
+  const uploadedFile = ref(null);
+  const onCompleteCb = ref(null);
+  const onFileChangeCb = ref(null);
+
+  const onFileSelected = (e) => {
+    uploadedFile.value = null;
+    new FileUpload(e.target.files[0], options)
+      .onProgress(({ file }) => {
+        uploadedFile.value = file;
+        onFileChangeCb.value && onFileChangeCb.value(uploadedFile.value);
+      })
+      .onComplete(({ uploadedFile: completedFile }) => {
+        uploadedFile.value = completedFile;
+        onCompleteCb.value && onCompleteCb.value(uploadedFile.value);
+        onFileChangeCb.value && onFileChangeCb.value(uploadedFile.value);
+      })
+      .upload();
+  };
+
+  const onDrop = (e) => {
+    onFileSelected({ target: { files: e.dataTransfer.files } });
+  };
+
+  const isFileUploaded = computed(() => {
+    return uploadedFile.value && uploadedFile.value.url;
+  });
+
+  const onFileChange = (cb) => {
+    onFileChangeCb.value = cb;
+  };
+
+  const onComplete = (cb) => {
+    onCompleteCb.value = cb;
+  };
+
+  const onClear = () => {
+    uploadedFile.value = null;
+    onFileChangeCb.value && onFileChangeCb.value(uploadedFile.value);
+  };
+
+  return {
+    isFileUploaded,
+    onClear,
+    onComplete,
+    onFileChange,
+    onDrop,
+    onFileSelected,
+    uploadedFile
+  };
+}

package/src/helpers/storage.ts

@@ -0,0 +1,8 @@
+export function setItem(key, value) {
+  localStorage.setItem(key, JSON.stringify(value));
+}
+
+export function getItem(key, defaultValue = null) {
+  const item = localStorage.getItem(key);
+  return item ? JSON.parse(item) : defaultValue;
+}