quasar-ui-danx 0.0.41 → 0.0.42

package/package.json

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

package/src/components/ActionTable/ActionMenu.vue

@@ -21,7 +21,7 @@ const props = defineProps({
   },
   target: {
     type: [Array, Object],
-    required: true
+    default: () => []
   },
   tooltip: {
     type: String,
@@ -34,10 +34,13 @@ const props = defineProps({
   }
 });
 
-const hasTarget = computed(() => !!props.target?.length);
+const hasTarget = computed(() => Array.isArray(props.target) ? props.target.length > 0 : !!props.target);
 
 const activeActions = computed(() => props.actions.filter(action => {
-  if (action.enabled === undefined) return true;
-  return typeof action.enabled === 'function' ? !!action.enabled(props.target) : !!action.enabled;
+  if (Array.isArray(props.target)) {
+    return action.batchEnabled ? action.batchEnabled(props.target) : true;
+  }
+
+  return action.enabled ? action.enabled(props.target) : true;
 }));
 </script>

package/src/components/ActionTable/ActionTable.vue

@@ -61,7 +61,7 @@
               :params="[rowProps.row]"
               :component="rowProps.col.component"
               :text="rowProps.value"
-              @action="$emit('action', $event)"
+              @action="action => $emit('action', {action,target: rowProps.row})"
           />
           <div v-else-if="rowProps.col.fieldList">
             <div v-for="field in rowProps.col.fieldList" :key="field">
@@ -77,8 +77,8 @@
             <ActionMenu
                 :actions="rowProps.col.actions"
                 :target="rowProps.row"
-                :loading="isSavingItem?.id === rowProps.row.id"
-                @action="(action) => $emit('action', {action, target: rowProps.row})"
+                :loading="isSavingRow(rowProps.row)"
+                @action="(action) => $emit('action', action, rowProps.row)"
             />
           </div>
         </component>
@@ -116,7 +116,7 @@ const props = defineProps({
     type: Object,
     required: true
   },
-  isSavingItem: {
+  isSavingTarget: {
     type: Object,
     default: null
   },
@@ -158,6 +158,15 @@ function getColumnStyle(column) {
   }
   return null;
 }
+
+function isSavingRow(row) {
+  if (!props.isSavingTarget) return false;
+
+  if (Array.isArray(props.isSavingTarget)) {
+    return !!props.isSavingTarget.find(t => t.id === row.id);
+  }
+  return props.isSavingTarget.id === row.id;
+}
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,9 +1,16 @@
 <template>
   <Component
+      v-if="content"
       :is="resolvedComponent.is"
       v-bind="{...resolvedComponent.props, ...overrideProps}"
       @action="$emit('action', $event)"
-  >{{ resolvedComponent.value || resolvedComponent.props?.text || text }}</Component>
+  >{{ content }}</Component>
+  <Component
+      v-else
+      :is="resolvedComponent.is"
+      v-bind="{...resolvedComponent.props, ...overrideProps}"
+      @action="$emit('action', $event)"
+  />
 </template>
 <script setup>
 import { computed } from 'vue';
@@ -20,7 +27,7 @@ const props = defineProps({
   },
   text: {
     type: String,
-    default: ''
+    default: undefined
   },
   overrideProps: {
     type: Object,
@@ -28,6 +35,7 @@ const props = defineProps({
   }
 });
 
+const content = computed(() => resolvedComponent.value?.value || resolvedComponent.value?.props?.text || props.text);
 const resolvedComponent = computed(() => {
   if (typeof props.component === 'function') {
     return props.component(...props.params);

package/src/helpers/actions.ts

@@ -7,8 +7,10 @@ interface ActionOptions {
     menu?: boolean;
     batch?: boolean;
     category?: string;
+    class?: string;
     inputComponent?: (target: object[] | object) => any;
-    enabled?: (target: object[] | object) => boolean;
+    enabled?: (target: object) => boolean;
+    batchEnabled?: (targets: 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;
@@ -20,7 +22,7 @@ export const activeActionInput = shallowRef(null);
 
 /**
  * Hook to perform an action on a set of targets
- * This helper allows you applyActionto perform actions by name on a set of targets using a provided list of actions
+ * 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
@@ -70,8 +72,6 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
          * 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) {
@@ -86,7 +86,6 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
                     activeItem.value = { ...activeItem.value, ...result.item };
                 }
             }
-            isSavingItem.value = null;
             return result;
         },
 
@@ -113,10 +112,19 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
                 result = await new Promise((resolve, reject) => {
                     activeActionInput.value = {
                         component,
-                        confirm: async () => resolve(await onConfirmAction(action, target, input)),
-                        cancel: reject
+                        confirm: async input => {
+                            const result = await onConfirmAction(action, target, input);
+
+                            // Only resolve when we have a non-error response, so we can show the error message w/o
+                            // hiding the dialog / inputComponent
+                            if (result === undefined || result === true || result?.success) {
+                                resolve(result);
+                            }
+                        },
+                        cancel: resolve
                     };
                 });
+
                 activeActionInput.value = null;
             } else {
                 result = await onConfirmAction(action, target, input);
@@ -146,16 +154,14 @@ async function onConfirmAction(action: ActionOptions, target: object[] | object,
     }
 
     // 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 (result === undefined || result === true || result?.success) {
+        if (result?.success && Array.isArray(target)) {
+            FlashMessages.success(`Successfully performed action ${action.label} on ${target.length} items`);
         }
 
         if (action.onSuccess) {
             action.onSuccess(result, target, input);
         }
-
     } else {
         const errors = [];
         if (result.errors) {
@@ -177,5 +183,6 @@ async function onConfirmAction(action: ActionOptions, target: object[] | object,
         action.onFinish(result, target, input);
     }
 
+    console.log("onConrirm result", result);
     return result;
 }