quasar-ui-danx 0.0.39 → 0.0.41

package/package.json

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

package/src/components/ActionTable/ActionTable.vue

@@ -84,6 +84,9 @@
         </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/Utility/Tools/ActionInputComponent.vue

@@ -4,18 +4,20 @@
         v-if="activeActionInput"
         :component="activeActionInput.component"
         :is-saving="isSaving"
-        @confirm="activeActionInput.confirm"
+        @confirm="onConfirm"
         @close="activeActionInput.cancel"
     />
   </div>
 </template>
 <script setup>
-import RenderComponent from 'src/components/Utility/Tools/RenderComponent';
+import { ref } from 'vue';
 import { activeActionInput } from '../../../helpers';
+import RenderComponent from './RenderComponent';
 
-defineProps({
-  isSaving: Boolean
-
-});
-const emit = defineEmits(['result']);
+const isSaving = ref(false);
+async function onConfirm(input) {
+  isSaving.value = true;
+  await activeActionInput.value.confirm(input);
+  isSaving.value = false;
+}
 </script>

package/src/helpers/actions.ts

@@ -1,30 +1,32 @@
-import { ref, shallowRef } from "vue";
+import { shallowRef } from "vue";
 import { FlashMessages } from "./index";
 
 interface ActionOptions {
-    name: string;
-    label: string;
+    name?: string;
+    label?: string;
     menu?: boolean;
     batch?: boolean;
+    category?: string;
     inputComponent?: (target: object[] | object) => any;
-    enabled?: (target: object) => boolean;
-    onAction?: (action: string | null, target: object, input: any) => any;
-    onBatchAction?: (action: string | null, targets: object[], input: any) => any;
-    onFinish?: (action: string | null, targets: object, input: any) => void;
+    enabled?: (target: object[] | 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
+ * This helper allows you applyActionto 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 activeAction = ref(null);
-    const activeTarget = ref(null);
+    const isSavingTarget = shallowRef(null);
 
     /**
      * Resolves an action by name or object, adds globalOptions and overrides any passes options
@@ -44,8 +46,7 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
 
     return {
         actions,
-        activeAction,
-        activeTarget,
+        isSavingTarget,
         resolveAction,
 
         /**
@@ -66,7 +67,7 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
         },
 
         /**
-         * Applies an action to an item.
+         * TODO: HOW TO INTEGRATE optimistic updates and single item updates?
          */
         async applyAction(item, input, itemData = {}) {
             isSavingItem.value = item;
@@ -99,24 +100,35 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
         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) {
-                input = await new Promise((resolve, reject) => {
+                // 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: resolve,
+                        confirm: async () => resolve(await onConfirmAction(action, target, input)),
                         cancel: reject
                     };
                 });
                 activeActionInput.value = null;
+            } else {
+                result = await onConfirmAction(action, target, input);
             }
 
-            return await onConfirmAction(action, target, input);
+            isSavingTarget.value = null;
+            return result;
         }
     };
 }
 
-async function onConfirmAction(action, target, input) {
+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);
     }
@@ -141,7 +153,7 @@ async function onConfirmAction(action, target, input) {
         }
 
         if (action.onSuccess) {
-            await action.onSuccess(result, target, input);
+            action.onSuccess(result, target, input);
         }
 
     } else {
@@ -157,12 +169,12 @@ async function onConfirmAction(action, target, input) {
         FlashMessages.combine("error", errors);
 
         if (action.onError) {
-            await action.onError(result, target, input);
+            action.onError(result, target, input);
         }
     }
 
     if (action.onFinish) {
-        await action.onFinish(result, target, input);
+        action.onFinish(result, target, input);
     }
 
     return result;