quasar-ui-danx 0.0.26 → 0.0.28

package/package.json

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

package/src/components/ActionTable/ActionMenu.vue

@@ -5,19 +5,11 @@
         :items="items"
         @action-item="onAction"
     />
-    <Component
-        v-if="confirmDialog"
-        :is="confirmDialog.is"
-        v-bind="confirmDialog.props"
-        :is-saving="isSaving"
-        @close="onCancel"
-        @confirm="onConfirmAction"
-    />
   </div>
 </template>
 <script setup>
 import { ref, shallowRef } from 'vue';
-import { FlashMessages } from '../../helpers';
+import { FlashMessages, performAction } from '../../helpers';
 import { PopoverMenu } from '../Utility';
 
 const emit = defineEmits(['action']);
@@ -40,13 +32,7 @@ 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');
-  }
+  performAction(item, props.rows);
 }
 
 function onCancel() {

package/src/components/ActionTable/Filters/CollapsableFiltersSidebar.vue

@@ -7,7 +7,7 @@
       name="admin-ads"
       @update:collapse="$emit('update:show-filters', !$event)"
   >
-    <FilterGroupList
+    <FilterFieldList
         :filter="filter"
         :filter-fields="filterFields"
         @update:filter="$emit('update:filter', $event)"
@@ -15,7 +15,7 @@
   </CollapsableSidebar>
 </template>
 <script setup>
-import { FilterGroupList } from '.';
+import { FilterFieldList } from '.';
 import { CollapsableSidebar } from '../../Utility';
 
 defineEmits(['update:filter', 'update:show-filters']);

package/src/components/ActionTable/Filters/{FilterGroupList.vue → FilterFieldList.vue}

@@ -17,7 +17,7 @@
           />
         </template>
 
-        <FilterGroupItem
+        <FilterFieldItem
             v-else
             :name="group.name"
             :count="activeCountByGroup[group.name]"
@@ -31,7 +31,7 @@
               class="mb-4"
               @update:model-value="updateFilter(field, $event)"
           />
-        </FilterGroupItem>
+        </FilterFieldItem>
 
         <q-separator
             v-if="index < (filterFields.length - 1)"
@@ -44,7 +44,7 @@
 <script setup>
 import { computed } from 'vue';
 import FilterableField from './FilterableField';
-import FilterGroupItem from './FilterGroupItem';
+import FilterFieldItem from './FilterFieldItem';
 
 const emit = defineEmits(['update:filter']);
 const props = defineProps({

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

@@ -1,6 +1,6 @@
 export {
     default as CollapsableFiltersSidebar
 } from "./CollapsableFiltersSidebar.vue";
-export { default as FilterGroupList } from "./FilterGroupList.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,15 @@
+<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" />
+  </div>
+</template>
+<script setup>
+import { actionTargets, activeAction } 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

@@ -10,7 +10,6 @@ export function useListActions(name, {
     applyActionRoute = null,
     applyBatchActionRoute = null,
     itemDetailsRoute = null,
-    filterGroups = null,
     refreshFilters = false,
     urlPattern = null,
     filterDefaults = {}
@@ -98,10 +97,10 @@ export function useListActions(name, {
     /**
      * Watches for a filter URL parameter and applies the filter if it is set.
      */
-    function applyFilterFromUrl(url, filterGroups = null) {
+    function applyFilterFromUrl(url, filterFields = null) {
         if (url.match(urlPattern)) {
             // A flat list of valid filterable field names
-            const validFilterKeys = filterGroups?.value?.map(group => group.fields.map(field => field.name)).flat();
+            const validFilterKeys = filterFields?.value?.map(group => group.fields.map(field => field.name)).flat();
 
             const urlFilter = getFilterFromUrl(url, validFilterKeys);
 
@@ -352,7 +351,6 @@ export function useListActions(name, {
         isApplyingBatchAction,
         activeItem,
         formTab,
-        filterGroups,
 
         // Actions
         loadSummary,

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

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <Component v-if="confirmDialog" :is="confirmDialog" :is-saving="isSaving" @confirm="onConfirmAction" />
+  </div>
+</template>
+<script setup>
+import { onMounted, ref, shallowRef } from 'vue';
+
+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 () => {
+  console.log('mounting action', props.action, props.targets);
+  // If there is no dialog, we auto-confirm the action
+  if (!confirmDialog.value) {
+    onConfirmAction();
+  }
+});
+
+function onConfirmAction(input) {
+  console.log('action confirmed', 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;
+  });
+}
+</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,10 @@
+import { ref } from "vue";
+
+export const activeAction = ref(null);
+export const actionTargets = ref([]);
+
+export async function performAction(action, targets) {
+    console.log("performing action", action, targets);
+    activeAction.value = action;
+    actionTargets.value = targets;
+}