quasar-ui-danx 0.0.23 → 0.0.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "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/BatchActionMenu.vue

@@ -23,7 +23,7 @@
 </template>
 <script setup>
 import { computed, ref } from 'vue';
-import PopoverMenu from '../../components/Utility/Popover/PopoverMenu';
+import { PopoverMenu } from '../Utility';
 
 const emit = defineEmits(['action']);
 const props = defineProps({

package/src/components/ActionTable/Form/Fields/MultiFileField.vue

@@ -33,7 +33,7 @@
     </div>
 
     <div class="max-w-[50em] flex items-stretch justify-start">
-      <ImagePreview
+      <FilePreview
           v-for="file in uploadedFiles"
           :key="'file-upload-' + file.id"
           class="w-32 m-2 cursor-pointer bg-neutral-plus-5"
@@ -44,7 +44,7 @@
           :removable="!readonly && !disable"
           @remove="onRemove(file)"
       />
-      <ImagePreview
+      <FilePreview
           v-if="!disable && !readonly"
           class="w-32 m-2 cursor-pointer border border-dashed border-blue-base"
           disabled
@@ -63,7 +63,7 @@
 <script setup>
 import { onMounted } from 'vue';
 import { useMultiFileUpload } from '../../../../helpers';
-import { ImagePreview } from '../../../Utility';
+import { FilePreview } from '../../../Utility';
 import FieldLabel from './FieldLabel';
 
 const emit = defineEmits(['update:model-value']);

package/src/components/ActionTable/Form/Fields/SingleFileField.vue

@@ -31,7 +31,7 @@
       />
     </div>
 
-    <ImagePreview
+    <FilePreview
         v-if="!readonly || uploadedFile"
         class="w-32 cursor-pointer mt-2"
         :class="{'border border-dashed border-blue-base': !uploadedFile, 'mx-auto': !readonly}"
@@ -50,7 +50,7 @@
 <script setup>
 import { onMounted } from 'vue';
 import { useSingleFileUpload } from '../../../../helpers';
-import { ImagePreview } from '../../../Utility';
+import { FilePreview } from '../../../Utility';
 import FieldLabel from './FieldLabel';
 
 const emit = defineEmits(['update:model-value']);

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/DragAndDrop/ListItemDraggable.vue

@@ -16,8 +16,8 @@
   </div>
 </template>
 <script setup>
-import SvgImg from 'src/components/Utility/Files/SvgImg';
 import { DragHandleDotsIcon as DragHandleIcon } from '../../svg';
+import { SvgImg } from '../Utility';
 import { ListDragAndDrop } from './listDragAndDrop';
 
 const emit = defineEmits(['position', 'update:list-items']);

package/src/components/Utility/Files/FilePreview.vue

@@ -99,10 +99,10 @@
 
 <script setup>
 import { DocumentTextIcon as TextFileIcon, DownloadIcon, PlayIcon } from '@heroicons/vue/outline';
-import { FullScreenCarouselDialog } from 'src/components/Utility/index';
-import { download } from 'src/helpers';
-import { ImageIcon, PdfIcon, TrashIcon as RemoveIcon } from 'src/svg';
 import { computed, ref } from 'vue';
+import { download } from '../../../helpers';
+import { ImageIcon, PdfIcon, TrashIcon as RemoveIcon } from '../../../svg';
+import { FullScreenCarouselDialog } from '../Dialogs';
 
 const emit = defineEmits(['remove']);
 const props = defineProps({

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>