quasar-ui-danx 0.0.28 → 0.0.30

package/package.json

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

package/src/components/ActionTable/ActionMenu.vue

@@ -1,15 +1,12 @@
 <template>
-  <div>
-    <PopoverMenu
-        class="px-4 h-full flex"
-        :items="items"
-        @action-item="onAction"
-    />
-  </div>
+  <PopoverMenu
+      class="px-4 h-full flex"
+      :items="items"
+      @action-item="onAction"
+  />
 </template>
 <script setup>
-import { ref, shallowRef } from 'vue';
-import { FlashMessages, performAction } from '../../helpers';
+import { performAction } from '../../helpers';
 import { PopoverMenu } from '../Utility';
 
 const emit = defineEmits(['action']);
@@ -25,59 +22,8 @@ const props = defineProps({
 });
 
 
-const activeAction = shallowRef(null);
-const confirmDialog = shallowRef(null);
-const isSaving = ref(false);
-
 function onAction(item) {
   emit('action', item);
-
   performAction(item, props.rows);
 }
-
-function onCancel() {
-  activeAction.value = null;
-  confirmDialog.value = null;
-}
-
-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/Layouts/ActionTableLayout.vue

@@ -6,10 +6,15 @@
       <slot name="filters" />
       <slot />
     </div>
-    <ActionPerformerTool v-if="activeAction" :targets="actionTargets" :action="activeAction" />
+    <ActionPerformerTool
+        v-if="activeAction"
+        :targets="actionTargets"
+        :action="activeAction"
+        @done="clearAction"
+    />
   </div>
 </template>
 <script setup>
-import { actionTargets, activeAction } from '../../../helpers';
+import { actionTargets, activeAction, clearAction } from '../../../helpers';
 import { ActionPerformerTool } from '../../Utility';
 </script>

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,
@@ -165,7 +165,7 @@ export function useListActions(name, {
      * @returns {Promise<Awaited<void>[]>}
      */
     async function refreshAll() {
-        return Promise.all([loadList(), loadSummary(), loadFilterFieldOptions()]);
+        return Promise.all([loadList(), loadSummary(), loadFilterFieldOptions(), getActiveItemDetails()]);
     }
 
     /**
@@ -260,19 +260,30 @@ export function useListActions(name, {
     // Controls the tab on the Ad Form
     const formTab = ref("general");
 
+    /**
+     * Gets the additional details for the currently active item.
+     * (ie: data that is not normally loaded in the list because it is not needed for the list view)
+     * @returns {Promise<void>}
+     */
+    async function getActiveItemDetails() {
+        if (!activeItem.value) return;
+        
+        const result = await itemDetailsRoute(activeItem.value);
+
+        // Only set the ad details if we are the response for the currently loaded item
+        // NOTE: race conditions might allow the finished loading item to be different to the currently
+        // requested item
+        if (result?.id === activeItem.value?.id) {
+            activeItem.value = result;
+        }
+    }
+
     // Whenever the active item changes, fill the additional item details
     // (ie: tasks, verifications, creatives, etc.)
     if (itemDetailsRoute) {
         watch(() => activeItem.value, async (newItem, oldItem) => {
             if (newItem && oldItem?.id !== newItem.id) {
-                const result = await itemDetailsRoute(newItem);
-
-                // Only set the ad details if we are the response for the currently loaded item
-                // NOTE: race conditions might allow the finished loading item to be different to the currently
-                // requested item
-                if (result?.id === activeItem.value?.id) {
-                    activeItem.value = result;
-                }
+                await getActiveItemDetails();
             }
         });
     }

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

@@ -1,11 +1,20 @@
 <template>
   <div>
-    <Component v-if="confirmDialog" :is="confirmDialog" :is-saving="isSaving" @confirm="onConfirmAction" />
+    <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,
@@ -21,22 +30,48 @@ const confirmDialog = shallowRef(props.action.confirmDialog ? props.action.confi
 const isSaving = ref(null);
 
 onMounted(async () => {
-  console.log('mounting action', props.action, props.targets);
   // If there is no dialog, we auto-confirm the action
   if (!confirmDialog.value) {
-    onConfirmAction();
+    await onConfirmAction();
   }
 });
 
-function onConfirmAction(input) {
-  console.log('action confirmed', input);
+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;
-  props.action.onAction().then(() => {
-    isSaving.value = false;
-  });
+  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/helpers/performAction.ts

@@ -1,10 +1,59 @@
 import { ref } from "vue";
+import { waitForRef } from "./index";
 
 export const activeAction = ref(null);
 export const actionTargets = ref([]);
 
-export async function performAction(action, targets) {
-    console.log("performing action", action, targets);
+/**
+ * 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)
+         * @param options
+         * @returns {Promise<void>}
+         */
+        async performAction(name, targets, options = {}) {
+            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, ...options }, 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;
 }