quasar-ui-danx 0.0.31 → 0.0.33

package/package.json

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

package/src/components/ActionTable/ActionMenu.vue

@@ -1,9 +1,12 @@
 <template>
   <PopoverMenu
-      class="px-4 h-full flex"
+      class="px-2 flex action-button"
       :items="activeItems"
+      :disabled="targets.length === 0"
       @action-item="onAction"
-  />
+  >
+    <q-tooltip v-if="targets.length === 0">{{ tooltip }}</q-tooltip>
+  </PopoverMenu>
 </template>
 <script setup>
 import { computed } from 'vue';
@@ -19,12 +22,16 @@ const props = defineProps({
   targets: {
     type: Array,
     required: true
+  },
+  tooltip: {
+    type: String,
+    default: 'First select records to perform a batch action'
   }
 });
 
 const activeItems = computed(() => props.items.filter(item => {
   if (item.enabled === undefined) return true;
-  return typeof item.enabled === 'function' ? !!item.enabled(props.targets) : !!item.enabled;
+  return typeof item.enabled === 'function' ? !!item.enabled(props.targets?.[0] ?? null, props.targets) : !!item.enabled;
 }));
 
 function onAction(item) {

package/src/components/ActionTable/ActionTable.vue

@@ -70,12 +70,13 @@
               {{ rowProps.value }}
             </slot>
           </div>
-          <ActionMenu
-              v-if="rowProps.col.actions" class="ml-2"
-              :items="rowProps.col.actions"
-              :targets="[rowProps.row]"
-              @action="(action) => $emit('action', {action: action, row: rowProps.row})"
-          />
+          <div v-if="rowProps.col.actions" class="flex-grow flex justify-end pl-2">
+            <ActionMenu
+                :items="rowProps.col.actions"
+                :targets="[rowProps.row]"
+                @action="(action) => $emit('action', {action: action, row: rowProps.row})"
+            />
+          </div>
         </component>
       </q-td>
     </template>

package/src/components/ActionTable/index.ts

@@ -6,7 +6,6 @@ export * from "./listHelpers";
 export * from "./tableColumns";
 export { default as ActionMenu } from "./ActionMenu.vue";
 export { default as ActionTable } from "./ActionTable.vue";
-export { default as BatchActionMenu } from "./BatchActionMenu.vue";
 export { default as EmptyTableState } from "./EmptyTableState.vue";
 export { default as RenderComponent } from "./RenderComponent.vue";
 export { default as TableSummaryRow } from "./TableSummaryRow.vue";

package/src/components/ActionTable/listActions.ts

@@ -2,18 +2,30 @@ import { computed, ref, watch } from "vue";
 import { getItem, setItem, waitForRef } from "../../helpers";
 import { getFilterFromUrl } from "./listHelpers";
 
-export function useListActions(name, {
+interface ListActionsOptions {
+    listRoute: Function;
+    summaryRoute?: Function;
+    filterFieldOptionsRoute?: Function;
+    moreRoute?: Function;
+    applyActionRoute?: Function;
+    itemDetailsRoute?: Function;
+    urlPattern?: RegExp;
+    filterDefaults?: Record<string, any>;
+    refreshFilters?: boolean;
+}
+
+
+export function useListActions(name: string, {
     listRoute,
-    filterFieldOptionsRoute,
     summaryRoute = null,
+    filterFieldOptionsRoute = null,
     moreRoute = null,
     applyActionRoute = null,
-    applyBatchActionRoute = null,
     itemDetailsRoute = null,
     refreshFilters = false,
     urlPattern = null,
     filterDefaults = {}
-}) {
+}: ListActionsOptions) {
     let isInitialized = false;
     const PAGE_SETTINGS_KEY = `${name}-pagination-settings`;
     const pagedItems = ref(null);
@@ -60,23 +72,22 @@ export function useListActions(name, {
     }
 
     async function loadList() {
-        if (isInitialized) {
-            isLoadingList.value = true;
-            setPagedItems(await listRoute(pager.value));
-            isLoadingList.value = false;
-        }
+        if (!isInitialized) return;
+        isLoadingList.value = true;
+        setPagedItems(await listRoute(pager.value));
+        isLoadingList.value = false;
     }
 
     async function loadSummary() {
-        if (summaryRoute && isInitialized) {
-            isLoadingSummary.value = true;
-            const summaryFilter = { id: null, ...filter.value, ...globalFilter.value };
-            if (selectedRows.value.length) {
-                summaryFilter.id = selectedRows.value.map((row) => row.id);
-            }
-            summary.value = await summaryRoute(summaryFilter);
-            isLoadingSummary.value = false;
+        if (!summaryRoute || !isInitialized) return;
+
+        isLoadingSummary.value = true;
+        const summaryFilter = { id: null, ...filter.value, ...globalFilter.value };
+        if (selectedRows.value.length) {
+            summaryFilter.id = selectedRows.value.map((row) => row.id);
         }
+        summary.value = await summaryRoute(summaryFilter);
+        isLoadingSummary.value = false;
     }
 
     // Filter fields are the field values available for the currently applied filter on Creative Groups
@@ -89,6 +100,7 @@ export function useListActions(name, {
     });
 
     async function loadFilterFieldOptions() {
+        if (!filterFieldOptionsRoute || !isInitialized) return;
         isLoadingFilters.value = true;
         filterFieldOptions.value = await filterFieldOptionsRoute(filter.value);
         isLoadingFilters.value = false;
@@ -240,21 +252,6 @@ export function useListActions(name, {
         return result;
     }
 
-    /**
-     * Applies an action to all selected items.
-     */
-    const isApplyingBatchAction = ref(false);
-
-    async function applyBatchAction(input) {
-        isApplyingBatchAction.value = true;
-        const batchFilter = { id: selectedRows.value.map(r => r.id) };
-        const result = await applyBatchActionRoute(batchFilter, input);
-        isApplyingBatchAction.value = false;
-        await refreshAll();
-
-        return result;
-    }
-
     // The active ad for viewing / editing in the Ad Form
     const activeItem = ref(null);
     // Controls the tab on the Ad Form
@@ -267,7 +264,7 @@ export function useListActions(name, {
      */
     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
@@ -337,11 +334,11 @@ export function useListActions(name, {
         activeItem.value = pagedItems.value.data[nextIndex];
     }
 
-    // Async load the settings for this Action List
-    setTimeout(() => {
+    // Initialize the list actions and load settings, lists, summaries, filter fields, etc.
+    function initialize() {
         isInitialized = true;
         loadSettings();
-    }, 1);
+    }
 
     return {
         // State
@@ -359,18 +356,17 @@ export function useListActions(name, {
         pager,
         quasarPagination,
         isApplyingActionToItem,
-        isApplyingBatchAction,
         activeItem,
         formTab,
 
         // Actions
+        initialize,
         loadSummary,
         resetPaging,
         loadList,
         loadMore,
         refreshAll,
         applyAction,
-        applyBatchAction,
         getNextItem,
         openItemForm,
         applyFilterFromUrl

package/src/components/Utility/Popovers/PopoverMenu.vue

@@ -3,6 +3,7 @@
       class="p-3 actionable"
       :class="{'opacity-50 cursor-not-allowed': disabled}"
   >
+    <slot />
     <Transition
         mode="out-in"
         :duration="150"

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

@@ -45,7 +45,15 @@ async function onConfirmAction(input) {
   const result = await props.action.onAction(props.targets, input);
   isSaving.value = false;
 
-  if (!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);
@@ -62,16 +70,8 @@ async function onConfirmAction(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/http.ts

@@ -1,26 +1,26 @@
 export const request = {
-  async get(url, options = {}) {
-    return fetch(url, {
-      method: "get",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json"
-      },
-      ...options
-    });
-  },
+    async get(url, options = {}) {
+        return fetch(url, {
+            method: "get",
+            headers: {
+                Accept: "application/json",
+                "Content-Type": "application/json"
+            },
+            ...options
+        }).then((r) => r.json());
+    },
 
-  async post(url, data = {}, options = {}) {
-    return fetch(url, {
-      method: "post",
-      body: JSON.stringify(data),
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json"
-      },
-      ...options
-    }).then((r) => r.json());
-  }
+    async post(url, data = {}, options = {}) {
+        return fetch(url, {
+            method: "post",
+            body: JSON.stringify(data),
+            headers: {
+                Accept: "application/json",
+                "Content-Type": "application/json"
+            },
+            ...options
+        }).then((r) => r.json());
+    }
 };
 
 /**
@@ -36,19 +36,19 @@ export const request = {
  * @returns {Promise<void>}
  */
 export async function fetchResourceListWithSelected(fetchFn, list, id, filter) {
-  // First make sure we have the selected record, so we can always add it to the list
-  let selectedResource;
-  if (id) {
-    selectedResource = list.value.find((c) => c.id === id) || (await fetchFn({ id }))[0];
-  }
+    // First make sure we have the selected record, so we can always add it to the list
+    let selectedResource;
+    if (id) {
+        selectedResource = list.value.find((c) => c.id === id) || (await fetchFn({ id }))[0];
+    }
 
-  // Get the filtered campaign list
-  list.value = await fetchFn(filter);
+    // Get the filtered campaign list
+    list.value = await fetchFn(filter);
 
-  // If our selected campaign is not in the filtered list, add it
-  if (selectedResource && !list.value.find((c) => c.id === id)) {
-    list.value.push(selectedResource);
-  }
+    // If our selected campaign is not in the filtered list, add it
+    if (selectedResource && !list.value.find((c) => c.id === id)) {
+        list.value.push(selectedResource);
+    }
 }
 
 /**
@@ -57,6 +57,6 @@ export async function fetchResourceListWithSelected(fetchFn, list, id, filter) {
  * @param url
  */
 export function getUrlParam(key, url = undefined) {
-  const params = new URLSearchParams(url?.replace(/.*\?/, "") || window.location.search);
-  return params.get(key);
+    const params = new URLSearchParams(url?.replace(/.*\?/, "") || window.location.search);
+    return params.get(key);
 }

package/src/helpers/performAction.ts

@@ -12,6 +12,17 @@ export const actionTargets = ref([]);
  * @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
@@ -31,7 +42,8 @@ export function usePerformAction(actions: any[]) {
             await performAction({ ...action, ...options }, targets);
         },
 
-        batchActions: actions.filter(a => a.batch)
+        actions,
+        filterActions,
     };
 }
 

package/src/styles/actions.scss

@@ -0,0 +1,10 @@
+.action-button {
+  cursor: pointer;
+  border-radius: 0.5em;
+  transition: all 0.5s;
+  outline: 1px solid transparent;
+
+  &:hover {
+    @apply bg-blue-light outline outline-blue-base;
+  }
+}

package/src/components/ActionTable/BatchActionMenu.vue

@@ -1,60 +0,0 @@
-<template>
-  <div>
-    <PopoverMenu
-        class="bg-neutral-plus-6 px-4 h-full flex"
-        :items="items"
-        :disabled="selectedRows.length === 0"
-        @action="onAction"
-    />
-    <q-tooltip v-if="selectedRows.length === 0">
-      Batch actions require a selection
-    </q-tooltip>
-    <slot>
-      <Component
-          :is="activeComponent.is"
-          v-if="activeComponent"
-          v-bind="activeComponent.props"
-          :is-saving="isSaving"
-          @close="activeAction = false"
-          @confirm="onConfirmAction"
-      />
-    </slot>
-  </div>
-</template>
-<script setup>
-import { computed, ref } from 'vue';
-import { PopoverMenu } from '../Utility';
-
-const emit = defineEmits(['action']);
-const props = defineProps({
-  items: {
-    type: Array,
-    required: true
-  },
-  selectedRows: {
-    type: Array,
-    required: true
-  },
-  applyBatchAction: {
-    type: Function,
-    required: true
-  },
-  isSaving: Boolean
-});
-
-
-const activeAction = ref(null);
-const activeComponent = computed(() => (props.items.find(i => i.action === activeAction.value)?.component || (() => null))(props.selectedRows));
-
-function onAction(action) {
-  activeAction.value = action;
-  emit('action', action);
-}
-async function onConfirmAction(input) {
-  const result = await props.applyBatchAction(input || activeComponent.value.input());
-
-  if (result?.success) {
-    activeAction.value = null;
-  }
-}
-</script>