quasar-ui-danx 0.0.24 → 0.0.26

package/package.json

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

package/src/components/ActionTable/ActionMenu.vue

@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <PopoverMenu
+        class="px-4 h-full flex"
+        :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 { PopoverMenu } from '../Utility';
+
+const emit = defineEmits(['action']);
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true
+  },
+  rows: {
+    type: Array,
+    required: true
+  }
+});
+
+
+const activeAction = shallowRef(null);
+const confirmDialog = shallowRef(null);
+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');
+  }
+}
+
+function onCancel() {
+  activeAction.value = null;
+  confirmDialog.value = null;
+}
+
+async function onConfirmAction(input) {
+  if (!activeAction.value.onAction) {
+    throw new Error('No onAction handler found for the selected action:' + activeAction.value.action);
+  }
+
+  isSaving.value = true;
+  const result = await activeAction.value.onAction(input, props.rows);
+  isSaving.value = false;
+
+  if (!result.success) {
+    const errors = [];
+    if (result.errors) {
+      errors.push(...result.errors);
+    } else if (result.error) {
+      errors.push(result.error.message);
+    } else {
+      errors.push('An unknown error occurred. Please try again later.');
+    }
+
+    FlashMessages.combine('error', errors);
+
+    if (activeAction.value.onError) {
+      await activeAction.value.onError(result, input);
+    }
+  }
+
+  FlashMessages.success(`The update was successful`);
+
+  if (activeAction.value.onSuccess) {
+    await activeAction.value.onSuccess(result, input);
+  }
+
+  if (activeAction.value.onFinish) {
+    await activeAction.value.onFinish();
+  }
+
+  confirmDialog.value = null;
+  activeAction.value = null;
+}
+
+</script>

package/src/components/ActionTable/ActionTable.vue

@@ -12,7 +12,7 @@
       color="blue-base"
       @update:selected="$emit('update:selected-rows', $event)"
       @update:pagination="() => {}"
-      @request="$emit('update:quasar-pagination', $event.pagination)"
+      @request="$emit('update:quasar-pagination', {...$event.pagination, __sort: mapSortBy($event.pagination, columns)})"
   >
     <template #no-data>
       <slot name="empty">
@@ -51,24 +51,30 @@
       <q-td :key="rowProps.key" :props="rowProps">
         <component
             :is="rowProps.col.onClick ? 'a' : 'div'"
+            class="flex items-center flex-nowrap"
             @click="() => rowProps.col.onClick && rowProps.col.onClick(rowProps.row)"
         >
-          <template v-if="rowProps.col.component">
-            <RenderComponent
-                :row-props="rowProps"
-                @action="$emit('action', $event)"
-            />
-          </template>
-          <template v-else-if="rowProps.col.fieldList">
+          <RenderComponent
+              v-if="rowProps.col.component"
+              :row-props="rowProps"
+              @action="$emit('action', $event)"
+          />
+          <div v-else-if="rowProps.col.fieldList">
             <div v-for="field in rowProps.col.fieldList" :key="field">
               {{ rowProps.row[field] }}
             </div>
-          </template>
-          <template v-else>
+          </div>
+          <div v-else>
             <slot v-bind="{name: rowProps.col.name, row: rowProps.row, value: rowProps.value}">
               {{ rowProps.value }}
             </slot>
-          </template>
+          </div>
+          <ActionMenu
+              v-if="rowProps.col.actions" class="ml-2"
+              :items="rowProps.col.actions"
+              :rows="[rowProps.row]"
+              @action="(action) => $emit('action', {action: action, row: rowProps.row})"
+          />
         </component>
       </q-td>
     </template>
@@ -79,7 +85,14 @@
 import { ref } from 'vue';
 import { DragHandleIcon as RowResizeIcon } from '../../svg';
 import { HandleDraggable } from '../DragAndDrop';
-import { EmptyTableState, registerStickyScrolling, RenderComponent, TableSummaryRow } from './index';
+import {
+  ActionMenu,
+  EmptyTableState,
+  mapSortBy,
+  registerStickyScrolling,
+  RenderComponent,
+  TableSummaryRow
+} from './index';
 
 defineEmits(['action', 'filter', 'update:quasar-pagination', 'update:selected-rows']);
 defineProps({

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

@@ -9,7 +9,7 @@
   >
     <FilterGroupList
         :filter="filter"
-        :filter-groups="filterGroups"
+        :filter-fields="filterFields"
         @update:filter="$emit('update:filter', $event)"
     />
   </CollapsableSidebar>
@@ -29,7 +29,7 @@ defineProps({
     type: Object,
     default: null
   },
-  filterGroups: {
+  filterFields: {
     type: Array,
     default: () => []
   }

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

@@ -2,7 +2,7 @@
   <q-list>
     <div class="px-4 py-2 max-w-full">
       <template
-          v-for="(group, index) in filterGroups"
+          v-for="(group, index) in filterFields"
           :key="'group-' + group.name"
       >
         <template v-if="group.flat">
@@ -34,12 +34,12 @@
         </FilterGroupItem>
 
         <q-separator
-            v-if="index < (filterGroups.length - 1)"
+            v-if="index < (filterFields.length - 1)"
             class="my-2"
         />
       </template>
     </div>
-    </q-list>
+  </q-list>
 </template>
 <script setup>
 import { computed } from 'vue';
@@ -48,7 +48,7 @@ import FilterGroupItem from './FilterGroupItem';
 
 const emit = defineEmits(['update:filter']);
 const props = defineProps({
-  filterGroups: {
+  filterFields: {
     type: Array,
     required: true
   },
@@ -61,7 +61,7 @@ const props = defineProps({
 
 const activeCountByGroup = computed(() => {
   const activeCountByGroup = {};
-  for (const group of props.filterGroups) {
+  for (const group of props.filterFields) {
     activeCountByGroup[group.name] = group.fields.filter(field => props.filter[field.name] !== undefined).length;
   }
   return activeCountByGroup;

package/src/components/ActionTable/index.ts

@@ -3,6 +3,7 @@ export * from "./Form";
 export * from "./listActions";
 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";

package/src/components/ActionTable/listActions.ts

@@ -1,6 +1,6 @@
 import { computed, ref, watch } from "vue";
 import { getItem, setItem } from "../../helpers";
-import { getFilterFromUrl, mapSortBy, waitForRef } from "./listHelpers";
+import { getFilterFromUrl, waitForRef } from "./listHelpers";
 
 export function useListActions(name, {
     listRoute,
@@ -10,7 +10,6 @@ export function useListActions(name, {
     applyActionRoute = null,
     applyBatchActionRoute = null,
     itemDetailsRoute = null,
-    columns = null,
     filterGroups = null,
     refreshFilters = false,
     urlPattern = null,
@@ -30,6 +29,7 @@ export function useListActions(name, {
     const filterActiveCount = computed(() => Object.keys(filter.value).filter(key => filter.value[key] !== undefined).length);
 
     const PAGING_DEFAULT = {
+        __sort: null,
         sortBy: null,
         descending: false,
         page: 1,
@@ -42,7 +42,7 @@ export function useListActions(name, {
         perPage: quasarPagination.value.rowsPerPage,
         page: quasarPagination.value.page,
         filter: { ...filter.value, ...globalFilter.value },
-        sort: columns ? mapSortBy(quasarPagination.value, columns) : undefined
+        sort: quasarPagination.value.__sort || undefined
     }));
 
     // When any part of the filter changes, get the new list of creatives
@@ -95,15 +95,15 @@ export function useListActions(name, {
         isLoadingFilters.value = false;
     }
 
-    // A flat list of valid filterable field names
-    const validFilterKeys = computed(() => filterGroups?.value?.map(group => group.fields.map(field => field.name)).flat());
-
     /**
      * Watches for a filter URL parameter and applies the filter if it is set.
      */
-    function applyFilterFromUrl(url) {
+    function applyFilterFromUrl(url, filterGroups = null) {
         if (url.match(urlPattern)) {
-            const urlFilter = getFilterFromUrl(url, validFilterKeys.value);
+            // A flat list of valid filterable field names
+            const validFilterKeys = filterGroups?.value?.map(group => group.fields.map(field => field.name)).flat();
+
+            const urlFilter = getFilterFromUrl(url, validFilterKeys);
 
             if (Object.keys(urlFilter).length > 0) {
                 filter.value = urlFilter;
@@ -187,9 +187,6 @@ export function useListActions(name, {
             filter.value = { ...filterDefaults, ...filter.value };
         }
 
-        // Load the URL filters if they are set
-        applyFilterFromUrl(window.location.href);
-
         setTimeout(() => {
             if (!isLoadingList.value) {
                 loadList();
@@ -355,7 +352,6 @@ export function useListActions(name, {
         isApplyingBatchAction,
         activeItem,
         formTab,
-        columns,
         filterGroups,
 
         // Actions

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

@@ -37,19 +37,19 @@
               :key="item.action"
               clickable
               :class="item.class"
-              @click="$emit('action', item.action)"
+              @click="onAction(item)"
           >
             {{ item.label }}
-            </q-item>
+          </q-item>
         </template>
-        </q-list>
-        </q-menu>
+      </q-list>
+    </q-menu>
   </a>
 </template>
 <script setup>
 import { DotsVerticalIcon as MenuIcon } from '@heroicons/vue/outline';
 
-defineEmits(['action']);
+const emit = defineEmits(['action', 'action-item']);
 defineProps({
   items: {
     type: Array,
@@ -61,4 +61,9 @@ defineProps({
   disabled: Boolean,
   loading: Boolean
 });
+
+function onAction(item) {
+  emit('action', item.action);
+  emit('action-item', item);
+}
 </script>