quasar-ui-danx 0.0.38 → 0.0.40

package/package.json

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

package/src/components/ActionTable/ActionMenu.vue

@@ -2,16 +2,15 @@
   <PopoverMenu
       class="px-2 flex action-button"
       :items="activeActions"
-      :disabled="targets.length === 0"
-      :tooltip="targets.length === 0 ? tooltip : null"
-      :loading="loading || isSaving"
+      :disabled="!hasTarget"
+      :tooltip="!hasTarget ? tooltip : null"
+      :loading="loading"
       :loading-component="loadingComponent"
-      @action-item="onAction"
+      @action-item="$emit('action', $event)"
   />
 </template>
 <script setup>
-import { computed, ref } from 'vue';
-import { performAction } from '../../helpers';
+import { computed } from 'vue';
 import { PopoverMenu } from '../Utility';
 
 const emit = defineEmits(['action']);
@@ -20,8 +19,8 @@ const props = defineProps({
     type: Array,
     required: true
   },
-  targets: {
-    type: Array,
+  target: {
+    type: [Array, Object],
     required: true
   },
   tooltip: {
@@ -35,16 +34,10 @@ const props = defineProps({
   }
 });
 
+const hasTarget = computed(() => !!props.target?.length);
+
 const activeActions = computed(() => props.actions.filter(action => {
   if (action.enabled === undefined) return true;
-  return typeof action.enabled === 'function' ? !!action.enabled(props.targets?.[0] ?? null, props.targets) : !!action.enabled;
+  return typeof action.enabled === 'function' ? !!action.enabled(props.target) : !!action.enabled;
 }));
-
-const isSaving = ref(false);
-async function onAction(action) {
-  emit('action', action);
-  isSaving.value = true;
-  await performAction(action, props.targets);
-  isSaving.value = false;
-}
 </script>

package/src/components/ActionTable/ActionTable.vue

@@ -76,14 +76,17 @@
           <div v-if="rowProps.col.actions" class="flex-grow flex justify-end pl-2">
             <ActionMenu
                 :actions="rowProps.col.actions"
-                :targets="[rowProps.row]"
+                :target="rowProps.row"
                 :loading="isSavingItem?.id === rowProps.row.id"
-                @action="(action) => $emit('action', {action: action, row: rowProps.row})"
+                @action="(action) => $emit('action', {action, target: rowProps.row})"
             />
           </div>
         </component>
       </q-td>
     </template>
+    <template #bottom>
+      <ActionInputComponent />
+    </template>
   </q-table>
 </template>
 
@@ -92,7 +95,7 @@ import { ref } from 'vue';
 import { getItem, setItem } from '../../helpers';
 import { DragHandleIcon as RowResizeIcon } from '../../svg';
 import { HandleDraggable } from '../DragAndDrop';
-import { mapSortBy, RenderComponent } from '../index';
+import { ActionInputComponent, mapSortBy, RenderComponent } from '../index';
 import { ActionMenu, EmptyTableState, registerStickyScrolling, TableSummaryRow } from './index';
 
 defineEmits(['action', 'filter', 'update:quasar-pagination', 'update:selected-rows']);

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

@@ -6,15 +6,5 @@
       <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/index.ts

@@ -1,7 +1,7 @@
 export * from "./Filters";
 export * from "./Form";
 export * from "./Layouts";
-export * from "./listActions";
+export * from "./listControls";
 export * from "./listHelpers";
 export * from "./tableColumns";
 export { default as ActionMenu } from "./ActionMenu.vue";

package/src/components/ActionTable/{listActions.ts → listControls.ts}

@@ -7,20 +7,17 @@ interface ListActionsOptions {
     summaryRoute?: Function;
     filterFieldOptionsRoute?: Function;
     moreRoute?: Function;
-    applyActionRoute?: Function;
     itemDetailsRoute?: Function;
     urlPattern?: RegExp;
     filterDefaults?: Record<string, any>;
     refreshFilters?: boolean;
 }
 
-
-export function useListActions(name: string, {
+export function useListControls(name: string, {
     listRoute,
     summaryRoute = null,
     filterFieldOptionsRoute = null,
     moreRoute = null,
-    applyActionRoute = null,
     itemDetailsRoute = null,
     refreshFilters = false,
     urlPattern = null,
@@ -225,33 +222,6 @@ export function useListActions(name: string, {
         setItem(PAGE_SETTINGS_KEY, settings);
     }
 
-    /**
-     * Applies an action to an item.
-     */
-    const isSavingItem = ref(null);
-    let actionResultCount = 0;
-
-    async function applyAction(item, input, itemData = {}) {
-        isSavingItem.value = item;
-        const resultNumber = ++actionResultCount;
-        setItemInPagedList({ ...item, ...input, ...itemData });
-        const result = await applyActionRoute(item, input);
-        if (result.success) {
-            // Only render the most recent campaign changes
-            if (resultNumber !== actionResultCount) return;
-
-            // Update the updated item in the previously loaded list if it exists
-            setItemInPagedList(result.item);
-
-            // Update the active item if it is the same as the updated item
-            if (activeItem.value?.id === result.item.id) {
-                activeItem.value = { ...activeItem.value, ...result.item };
-            }
-        }
-        isSavingItem.value = null;
-        return result;
-    }
-
     // The active ad for viewing / editing
     const activeItem = ref(null);
     // Controls the active panel (ie: tab) if rendering a panels drawer or similar
@@ -355,7 +325,6 @@ export function useListActions(name: string, {
         isLoadingSummary,
         pager,
         quasarPagination,
-        isSavingItem,
         activeItem,
         activePanel,
 
@@ -366,9 +335,9 @@ export function useListActions(name: string, {
         loadList,
         loadMore,
         refreshAll,
-        applyAction,
         getNextItem,
         openItemForm,
-        applyFilterFromUrl
+        applyFilterFromUrl,
+        setItemInPagedList
     };
 }

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

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <RenderComponent
+        v-if="activeActionInput"
+        :component="activeActionInput.component"
+        :is-saving="isSaving"
+        @confirm="onConfirm"
+        @close="activeActionInput.cancel"
+    />
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { activeActionInput } from '../../../helpers';
+import RenderComponent from './RenderComponent';
+
+const isSaving = ref(false);
+async function onConfirm(input) {
+  isSaving.value = true;
+  await activeActionInput.value.confirm(input);
+  isSaving.value = false;
+}
+</script>

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

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

package/src/helpers/actions.ts

@@ -0,0 +1,180 @@
+import { shallowRef } from "vue";
+import { FlashMessages } from "./index";
+
+interface ActionOptions {
+    name: string;
+    label: string;
+    menu?: boolean;
+    batch?: boolean;
+    inputComponent?: (target: object[] | object) => any;
+    enabled?: (target: object) => boolean;
+    onAction?: (action: string | null, target: object, input: any) => Promise<any>;
+    onBatchAction?: (action: string | null, targets: object[], input: any) => Promise<any>;
+    onSuccess?: (action: string | null, targets: object, input: any) => any;
+    onError?: (action: string | null, targets: object, input: any) => any;
+    onFinish?: (action: string | null, targets: object, input: any) => any;
+}
+
+export const activeActionInput = shallowRef(null);
+
+/**
+ * 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
+ * @param {ActionOptions} globalOptions
+ */
+export function useActions(actions: ActionOptions[], globalOptions: ActionOptions = null) {
+    const isSavingTarget = shallowRef(null);
+
+    /**
+     * Resolves an action by name or object, adds globalOptions and overrides any passes options
+     *
+     * @param name
+     * @param {any} options
+     * @returns {any}
+     */
+    function resolveAction(name, options = null) {
+        const action = typeof name === "string" ? actions.find(a => a.name === name) : name;
+        if (!action) {
+            throw new Error(`Unknown action: ${name}`);
+        }
+
+        return { ...globalOptions, ...action, ...options };
+    }
+
+    return {
+        actions,
+        isSavingTarget,
+        resolveAction,
+
+        /**
+         * Filter the list of actions based on the provided filters in key-value pairs
+         * You can filter on any ActionOptions property by matching the value exactly or by providing an array of values
+         *
+         * @param filters
+         * @returns {ActionOptions[]}
+         */
+        filterActions(filters: object) {
+            let filteredActions = [...actions];
+
+            for (const filter of Object.keys(filters)) {
+                const filterValue = filters[filter];
+                filteredActions = filteredActions.filter(a => a[filter] === filterValue || (Array.isArray(filterValue) && filterValue.includes(a[filter])));
+            }
+            return filteredActions;
+        },
+
+        /**
+         * TODO: HOW TO INTEGRATE optimistic updates and single item updates?
+         */
+        async applyAction(item, input, itemData = {}) {
+            isSavingItem.value = item;
+
+            setItemInPagedList({ ...item, ...input, ...itemData });
+            const result = await applyActionRoute(item, input);
+            if (result.success) {
+                // Only render the most recent campaign changes
+                if (resultNumber !== actionResultCount) return;
+
+                // Update the updated item in the previously loaded list if it exists
+                setItemInPagedList(result.item);
+
+                // Update the active item if it is the same as the updated item
+                if (activeItem.value?.id === result.item.id) {
+                    activeItem.value = { ...activeItem.value, ...result.item };
+                }
+            }
+            isSavingItem.value = null;
+            return result;
+        },
+
+        /**
+         * Perform an action on a set of targets
+         *
+         * @param {string} name - can either be a string or an action object
+         * @param {object[]|object} target - an array of targets or a single target object
+         * @param {any} input
+         */
+        async performAction(name: string | object, target: object[] | object, input: any = null) {
+            const action = resolveAction(name);
+            const component = action.inputComponent && action.inputComponent(target);
+            let result = null;
+
+            isSavingTarget.value = target;
+
+            // If no component input is required, we can directly perform the action
+            if (component) {
+                // If the action requires an input, we set the activeActionInput to the input component.
+                // This will tell the ActionInputComponent to render the input component, and confirm or cancel the
+                // action The confirm function has the input from the component passed and will resolve the promise
+                // with the result of the action
+                result = await new Promise((resolve, reject) => {
+                    activeActionInput.value = {
+                        component,
+                        confirm: async () => resolve(await onConfirmAction(action, target, input)),
+                        cancel: reject
+                    };
+                });
+                activeActionInput.value = null;
+            } else {
+                result = await onConfirmAction(action, target, input);
+            }
+
+            isSavingTarget.value = null;
+            return result;
+        }
+    };
+}
+
+async function onConfirmAction(action: ActionOptions, target: object[] | object, input: any = null) {
+    if (!action.onAction) {
+        throw new Error("No onAction handler found for the selected action:" + action.name);
+    }
+
+    let result: any;
+    try {
+        if (Array.isArray(target)) {
+            result = await action.onBatchAction(action.name, target, input);
+        } else {
+            result = await action.onAction(action.name, target, input);
+        }
+    } catch (e) {
+        console.error(e);
+        result = { error: `An error occurred while performing the action ${action.label}. Please try again later.` };
+    }
+
+    // If there is no return value or the result marks it as successful, we show a success message
+    if (result === undefined || result?.success) {
+
+        if (result?.success) {
+            FlashMessages.success(`The update was successful`);
+        }
+
+        if (action.onSuccess) {
+            action.onSuccess(result, target, input);
+        }
+
+    } else {
+        const errors = [];
+        if (result.errors) {
+            errors.push(...result.errors);
+        } else if (result.error) {
+            errors.push(typeof result.error === "string" ? result.error : result.error.message);
+        } else {
+            errors.push("An unknown error occurred. Please try again later.");
+        }
+
+        FlashMessages.combine("error", errors);
+
+        if (action.onError) {
+            action.onError(result, target, input);
+        }
+    }
+
+    if (action.onFinish) {
+        action.onFinish(result, target, input);
+    }
+
+    return result;
+}

package/src/helpers/index.ts

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

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

@@ -1,88 +0,0 @@
-<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;
-  let result;
-  try {
-    result = await props.action.onAction(props.targets, input);
-  } catch (e) {
-    console.error(e);
-    result = { error: `An error occurred while performing the action ${props.action.label}. Please try again later.` };
-  }
-
-  isSaving.value = false;
-
-  // If there is no return value or the result marks it as successful, we show a success message
-  if (result === undefined || result?.success) {
-
-    if (result?.success) {
-      FlashMessages.success(`The update was successful`);
-    }
-
-    if (props.action.onSuccess) {
-      await props.action.onSuccess(result, props.targets, input);
-    }
-
-    emit('done');
-  } else {
-    const errors = [];
-    if (result.errors) {
-      errors.push(...result.errors);
-    } else if (result.error) {
-      errors.push(typeof result.error === 'string' ? result.error : 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);
-    }
-  }
-
-  if (props.action.onFinish) {
-    await props.action.onFinish(result, props.targets, input);
-  }
-}
-</script>

package/src/helpers/performAction.ts

@@ -1,73 +0,0 @@
-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[]) {
-
-    function filterActions(filters) {
-        let filteredActions = [...actions];
-
-        for (const filter of Object.keys(filters)) {
-            const filterValue = filters[filter];
-            filteredActions = filteredActions.filter(a => a[filter] === filterValue || (Array.isArray(filterValue) && filterValue.includes(a[filter])));
-        }
-        return filteredActions;
-    }
-
-    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);
-        },
-
-        actions,
-        filterActions,
-    };
-}
-
-/**
- * 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 = [];
-}