quasar-ui-danx 0.0.32 → 0.0.34

package/package.json

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

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/Form/Fields/DateRangeField.vue

@@ -87,16 +87,21 @@ function toQDateValue(val) {
 }
 
 const dateRangeValue = computed(() => {
-  let range = dateRange.value;
+  let range;
 
-  if (typeof range === 'string') {
+  if (typeof dateRange.value === 'string') {
     range = {
-      from: range,
-      to: range
+      from: dateRange.value,
+      to: dateRange.value
+    };
+  } else if (dateRange.value) {
+    range = {
+      from: dateRange.value.from,
+      to: dateRange.value.to
     };
   }
 
-  if (range?.from && range?.to && props.withTime) {
+  if (range?.from && range?.to && props.withTime && !range.from.includes('00:00:00')) {
     range.from += ' 00:00:00';
     range.to += ' 23:59:59';
   }

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/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>