quasar-ui-danx 0.0.27 → 0.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.0.27",
+  "version": "0.0.29",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",

package/src/components/ActionTable/ActionMenu.vue

@@ -1,23 +1,12 @@
 <template>
-  <div>
-    <PopoverMenu
-        class="px-4 h-full flex"
-        :items="items"
-        @action-item="onAction"
-    />
-    <Component
-        v-if="confirmDialog"
-        :is="confirmDialog.is"
-        v-bind="confirmDialog.props"
-        :is-saving="isSaving"
-        @close="onCancel"
-        @confirm="onConfirmAction"
-    />
-  </div>
+  <PopoverMenu
+      class="px-4 h-full flex"
+      :items="items"
+      @action-item="onAction"
+  />
 </template>
 <script setup>
-import { ref, shallowRef } from 'vue';
-import { FlashMessages } from '../../helpers';
+import { performAction } from '../../helpers';
 import { PopoverMenu } from '../Utility';
 
 const emit = defineEmits(['action']);
@@ -33,65 +22,8 @@ const props = defineProps({
 });
 
 
-const activeAction = shallowRef(null);
-const confirmDialog = shallowRef(null);
-const isSaving = ref(false);
-
 function onAction(item) {
   emit('action', item);
-
-  activeAction.value = item;
-
-  if (item.confirmDialog) {
-    confirmDialog.value = typeof item.confirmDialog === 'function' ? item.confirmDialog(props.rows) : item.confirmDialog;
-  } else {
-    console.log('handle default action');
-  }
-}
-
-function onCancel() {
-  activeAction.value = null;
-  confirmDialog.value = null;
+  performAction(item, props.rows);
 }
-
-async function onConfirmAction(input) {
-  if (!activeAction.value.onAction) {
-    throw new Error('No onAction handler found for the selected action:' + activeAction.value.action);
-  }
-
-  isSaving.value = true;
-  const result = await activeAction.value.onAction(input, props.rows);
-  isSaving.value = false;
-
-  if (!result.success) {
-    const errors = [];
-    if (result.errors) {
-      errors.push(...result.errors);
-    } else if (result.error) {
-      errors.push(result.error.message);
-    } else {
-      errors.push('An unknown error occurred. Please try again later.');
-    }
-
-    FlashMessages.combine('error', errors);
-
-    if (activeAction.value.onError) {
-      await activeAction.value.onError(result, input);
-    }
-  }
-
-  FlashMessages.success(`The update was successful`);
-
-  if (activeAction.value.onSuccess) {
-    await activeAction.value.onSuccess(result, input);
-  }
-
-  if (activeAction.value.onFinish) {
-    await activeAction.value.onFinish();
-  }
-
-  confirmDialog.value = null;
-  activeAction.value = null;
-}
-
 </script>

package/src/components/ActionTable/Filters/index.ts

@@ -1,6 +1,6 @@
 export {
     default as CollapsableFiltersSidebar
 } from "./CollapsableFiltersSidebar.vue";
-export { default as FilterFieldList } from "src/components/ActionTable/Filters/FilterFieldList.vue";
+export { default as FilterFieldList } from "./FilterFieldList.vue";
 export { default as FilterListToggle } from "./FilterListToggle.vue";
 export { default as FilterToolbarLayout } from "./FilterToolbarLayout.vue";

package/src/components/ActionTable/Layouts/ActionTableLayout.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="flex flex-grow flex-col flex-nowrap overflow-hidden h-full bg-white">
+    <slot name="top" />
+    <slot name="toolbar" />
+    <div class="flex flex-nowrap flex-grow overflow-hidden w-full">
+      <slot name="filters" />
+      <slot />
+    </div>
+    <ActionPerformerTool
+        v-if="activeAction"
+        :targets="actionTargets"
+        :action="activeAction"
+        @done="clearAction"
+    />
+  </div>
+</template>
+<script setup>
+import { actionTargets, activeAction, clearAction } from '../../../helpers';
+import { ActionPerformerTool } from '../../Utility';
+</script>

package/src/components/ActionTable/Layouts/index.ts

@@ -0,0 +1 @@
+export { default as ActionTableLayout } from "./ActionTableLayout.vue";

package/src/components/ActionTable/index.ts

@@ -1,5 +1,6 @@
 export * from "./Filters";
 export * from "./Form";
+export * from "./Layouts";
 export * from "./listActions";
 export * from "./listHelpers";
 export * from "./tableColumns";

package/src/components/ActionTable/listActions.ts

@@ -1,6 +1,6 @@
 import { computed, ref, watch } from "vue";
-import { getItem, setItem } from "../../helpers";
-import { getFilterFromUrl, waitForRef } from "./listHelpers";
+import { getItem, setItem, waitForRef } from "../../helpers";
+import { getFilterFromUrl } from "./listHelpers";
 
 export function useListActions(name, {
     listRoute,

package/src/components/ActionTable/listHelpers.ts

@@ -1,4 +1,4 @@
-import { onMounted, watch } from "vue";
+import { onMounted } from "vue";
 import { getUrlParam } from "../../helpers";
 
 export function registerStickyScrolling(tableRef) {
@@ -37,29 +37,12 @@ export function mapSortBy(pagination, columns) {
     ];
 }
 
-/**
- * Wait for a ref to have a value and then resolve the promise
- *
- * @param ref
- * @param value
- * @returns {Promise<void>}
- */
-export function waitForRef(ref, value) {
-    return new Promise<void>((resolve) => {
-        watch(ref, (newValue) => {
-            if (newValue === value) {
-                resolve();
-            }
-        });
-    });
-}
-
 /**
  * Returns the filter from the URL if it is set
  * @param url
  * @param allowedKeys
  */
-export function getFilterFromUrl(url, allowedKeys = null) {
+export function getFilterFromUrl(url: string, allowedKeys = null) {
     const filter = {};
     const urlFilter = getUrlParam("filter", url);
     if (urlFilter) {

package/src/components/Utility/Popovers/PopoverMenu.vue

@@ -34,7 +34,7 @@
           </a>
           <q-item
               v-else
-              :key="item.action"
+              :key="item.name || item.action"
               clickable
               :class="item.class"
               @click="onAction(item)"
@@ -55,7 +55,7 @@ defineProps({
     type: Array,
     required: true,
     validator(items) {
-      return items.every((item) => item.label && (item.url || item.action));
+      return items.every((item) => item.label && (item.url || item.action || item.name));
     }
   },
   disabled: Boolean,
@@ -63,7 +63,7 @@ defineProps({
 });
 
 function onAction(item) {
-  emit('action', item.action);
+  emit('action', item.name || item.action);
   emit('action-item', item);
 }
 </script>

package/src/components/Utility/Tools/ActionPerformerTool.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <Component
+        v-if="confirmDialog"
+        :is="confirmDialog.is"
+        v-bind="confirmDialog.props"
+        :is-saving="isSaving"
+        @confirm="onConfirmAction"
+        @close="$emit('done')"
+    />
+  </div>
+</template>
+<script setup>
+import { onMounted, ref, shallowRef } from 'vue';
+import { FlashMessages } from '../../../helpers';
+
+const emit = defineEmits(['done']);
+const props = defineProps({
+  action: {
+    type: Object,
+    required: true
+  },
+  targets: {
+    type: Array,
+    required: true
+  }
+});
+
+const confirmDialog = shallowRef(props.action.confirmDialog ? props.action.confirmDialog(props.targets) : null);
+const isSaving = ref(null);
+
+onMounted(async () => {
+  // If there is no dialog, we auto-confirm the action
+  if (!confirmDialog.value) {
+    await onConfirmAction();
+  }
+});
+
+async function onConfirmAction(input) {
+  if (!props.action.onAction) {
+    throw new Error('No onAction handler found for the selected action:' + props.action.name);
+  }
+
+  isSaving.value = true;
+  const result = await props.action.onAction(props.targets, input);
+  isSaving.value = false;
+
+  if (!result.success) {
+    const errors = [];
+    if (result.errors) {
+      errors.push(...result.errors);
+    } else if (result.error) {
+      errors.push(result.error.message);
+    } else {
+      errors.push('An unknown error occurred. Please try again later.');
+    }
+
+    FlashMessages.combine('error', errors);
+
+    if (props.action.onError) {
+      await props.action.onError(result, props.targets, input);
+    }
+  }
+
+  FlashMessages.success(`The update was successful`);
+
+  if (props.action.onSuccess) {
+    await props.action.onSuccess(result, props.targets, input);
+  }
+
+  if (props.action.onFinish) {
+    await props.action.onFinish(result, props.targets, input);
+  }
+
+  emit('done');
+}
+</script>

package/src/components/Utility/Tools/index.ts

@@ -0,0 +1 @@
+export { default as ActionPerformerTool } from "./ActionPerformerTool.vue";

package/src/components/Utility/index.ts

@@ -4,4 +4,5 @@ export * from "./Files";
 export * from "./Formats";
 export * from "./Layouts";
 export * from "./Popovers";
+export * from "./Tools";
 export * from "./Transitions";

package/src/helpers/index.ts

@@ -9,6 +9,7 @@ export * from "./FlashMessages";
 export * from "./formats";
 export * from "./http";
 export * from "./multiFileUpload";
+export * from "./performAction";
 export * from "./singleFileUpload";
 export * from "./storage";
 export * from "./utils";

package/src/helpers/performAction.ts

@@ -0,0 +1,58 @@
+import { ref } from "vue";
+import { waitForRef } from "./index";
+
+export const activeAction = ref(null);
+export const actionTargets = ref([]);
+
+/**
+ * Hook to perform an action on a set of targets
+ * This helper allows you to perform actions by name on a set of targets using a provided list of actions
+ *
+ * @param actions
+ * @returns {{performAction(name, targets): Promise<void>}}
+ */
+export function usePerformAction(actions: any[]) {
+    return {
+        /**
+         * Perform an action on a set of targets
+         *
+         * @param name - can either be a string or an action object
+         * @param targets - an array of targets (or a single target object)
+         * @returns {Promise<void>}
+         */
+        async performAction(name, targets) {
+            const action = typeof name === "string" ? actions.find(a => a.name === name) : name;
+            if (!action) {
+                throw new Error(`Unknown action: ${name}`);
+            }
+            targets = Array.isArray(targets) ? targets : [targets];
+
+            await performAction(action, targets);
+        }
+    };
+}
+
+/**
+ * Perform an action on a set of targets
+ *
+ * NOTE: This function and variables should be used w/ the ActionPerformerTool - make sure to use a Layout that has
+ * rendered this component so the actions will be performed
+ *
+ * @param action
+ * @param targets
+ * @returns {Promise<void>}
+ */
+export async function performAction(action: any, targets: any[]): Promise<void> {
+    activeAction.value = action;
+    actionTargets.value = targets;
+    await waitForRef(activeAction, null);
+}
+
+/**
+ * Clear the active action and targets - (note: this will tear down any dialogs / rendered components) triggered by the
+ * ActionPerformerTool
+ */
+export function clearAction() {
+    activeAction.value = null;
+    actionTargets.value = [];
+}

package/src/helpers/utils.ts

@@ -1,3 +1,5 @@
+import { watch } from "vue";
+
 /**
  * Sleep function to be used in conjuction with async await:
  *
@@ -7,7 +9,24 @@
  * @returns {Promise<any>}
  */
 export function sleep(delay) {
-  return new Promise((resolve) => setTimeout(resolve, delay));
+    return new Promise((resolve) => setTimeout(resolve, delay));
+}
+
+/**
+ * Wait for a ref to have a value and then resolve the promise
+ *
+ * @param ref
+ * @param value
+ * @returns {Promise<void>}
+ */
+export function waitForRef(ref, value) {
+    return new Promise<void>((resolve) => {
+        watch(ref, (newValue) => {
+            if (newValue === value) {
+                resolve();
+            }
+        });
+    });
 }
 
 /**
@@ -18,7 +37,7 @@ export function sleep(delay) {
  * @returns {number}
  */
 export function minmax(min, max, value) {
-  return Math.max(min, Math.min(max, value));
+    return Math.max(min, Math.min(max, value));
 }
 
 /**
@@ -27,7 +46,7 @@ export function minmax(min, max, value) {
  * @returns {number}
  */
 export function metersToMiles(meters) {
-  return meters * 0.000621371;
+    return meters * 0.000621371;
 }
 
 /**
@@ -36,7 +55,7 @@ export function metersToMiles(meters) {
  * @returns {number}
  */
 export function milesToMeters(miles) {
-  return miles / 0.000621371;
+    return miles / 0.000621371;
 }
 
 /**
@@ -45,19 +64,19 @@ export function milesToMeters(miles) {
  * @returns {null|{lng: number, lat: number}}
  */
 export function parseCoords(location) {
-  const latLong = location.split(",");
+    const latLong = location.split(",");
 
-  if (latLong.length === 2) {
-    const lat = parseFloat(latLong[0].trim());
-    const lng = parseFloat(latLong[1].trim());
+    if (latLong.length === 2) {
+        const lat = parseFloat(latLong[0].trim());
+        const lng = parseFloat(latLong[1].trim());
 
-    if (!isNaN(lat) && !isNaN(lng)) {
-      return {
-        lat,
-        lng,
-      };
+        if (!isNaN(lat) && !isNaN(lng)) {
+            return {
+                lat,
+                lng,
+            };
+        }
     }
-  }
 
-  return null;
+    return null;
 }