quasar-ui-danx 0.0.19 → 0.0.21

package/package.json

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

package/src/components/ActionTable/ActionTable.vue

@@ -77,9 +77,9 @@
 
 <script setup>
 import { ref } from 'vue';
-import { EmptyTableState, registerStickyScrolling, RenderComponent, TableSummaryRow } from '.';
 import { DragHandleIcon as RowResizeIcon } from '../../svg';
 import { HandleDraggable } from '../DragAndDrop';
+import { EmptyTableState, registerStickyScrolling, RenderComponent, TableSummaryRow } from './index';
 
 defineEmits(['action', 'filter', 'update:quasar-pagination', 'update:selected-rows']);
 defineProps({

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

@@ -31,20 +31,8 @@ const props = defineProps({
     type: Object,
     required: true
   },
-  filterGroups: {
-    type: Array,
-    required: true
-  },
   showFilters: Boolean
 });
 
-const filterNameDictionary = computed(() => {
-  return props.filterGroups.reduce((acc, fg) => {
-    fg.fields.forEach(f => {
-      acc[f.name] = true;
-    });
-    return acc;
-  }, {});
-});
-const activeCount = computed(() => Object.keys(props.filter).filter(key => props.filter[key] !== undefined && filterNameDictionary.value[key]).length);
+const activeCount = computed(() => Object.keys(props.filter).filter(key => props.filter[key] !== undefined).length);
 </script>

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

@@ -0,0 +1,33 @@
+<template>
+  <div class="w-full flex justify-end items-center flex-nowrap border-b">
+    <FilterListToggle
+      :show-filters="showFilters"
+      :filter="filter"
+      class="border-r p-4 flex-shrink-0"
+      @update:show-filters="$emit('update:show-filters', $event)"
+      @update:filter="$emit('update:filter', $event)"
+    />
+
+    <div class="flex-grow">
+      <slot />
+    </div>
+
+    <div v-if="$slots['right-side']" class="flex justify-end items-stretch flex-nowrap p-4">
+      <QSeparator vertical class="mx-4 h-10 self-center" />
+
+      <slot name="right-side" />
+    </div>
+  </div>
+</template>
+<script setup>
+import { FilterListToggle } from "quasar-ui-danx";
+
+defineEmits(["update:show-filters", "update:filter"]);
+defineProps({
+  filter: {
+    type: Object,
+    default: null
+  },
+  showFilters: Boolean
+});
+</script>

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

@@ -3,3 +3,4 @@ export {
 } from "./CollapsableFiltersSidebar.vue";
 export { default as FilterGroupList } from "./FilterGroupList.vue";
 export { default as FilterListToggle } from "./FilterListToggle.vue";
+export { default as FilterToolbarLayout } from "./FilterToolbarLayout.vue";

package/src/components/ActionTable/index.ts

@@ -6,5 +6,5 @@ export * from "./tableColumns";
 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 "src/components/ActionTable/RenderComponent.vue";
+export { default as RenderComponent } from "./RenderComponent.vue";
 export { default as TableSummaryRow } from "./TableSummaryRow.vue";

package/src/components/ActionTable/listActions.ts

@@ -16,9 +16,11 @@ export function useListActions(name, {
     urlPattern = null,
     filterDefaults = {}
 }) {
+    let isInitialized = false;
     const PAGE_SETTINGS_KEY = `${name}-pagination-settings`;
     const pagedItems = ref(null);
     const filter = ref({});
+    const globalFilter = ref({});
     const showFilters = ref(getItem(`${name}-show-filters`, true));
     const selectedRows = ref([]);
     const isLoadingList = ref(false);
@@ -39,7 +41,7 @@ export function useListActions(name, {
     const pager = computed(() => ({
         perPage: quasarPagination.value.rowsPerPage,
         page: quasarPagination.value.page,
-        filter: filter.value,
+        filter: { ...filter.value, ...globalFilter.value },
         sort: columns ? mapSortBy(quasarPagination.value, columns) : undefined
     }));
 
@@ -59,15 +61,17 @@ export function useListActions(name, {
     }
 
     async function loadList() {
-        isLoadingList.value = true;
-        setPagedItems(await listRoute(pager.value));
-        isLoadingList.value = false;
+        if (isInitialized) {
+            isLoadingList.value = true;
+            setPagedItems(await listRoute(pager.value));
+            isLoadingList.value = false;
+        }
     }
 
     async function loadSummary() {
-        if (summaryRoute) {
+        if (summaryRoute && isInitialized) {
             isLoadingSummary.value = true;
-            const summaryFilter = { id: null, ...filter.value };
+            const summaryFilter = { id: null, ...filter.value, ...globalFilter.value };
             if (selectedRows.value.length) {
                 summaryFilter.id = selectedRows.value.map((row) => row.id);
             }
@@ -146,7 +150,7 @@ export function useListActions(name, {
         const newItems = await moreRoute({
             page: index + 1,
             perPage,
-            filter: filter.value
+            filter: { ...filter.value, ...globalFilter.value }
         });
 
         if (newItems && newItems.length > 0) {
@@ -169,6 +173,9 @@ export function useListActions(name, {
      * Loads the filter and pagination settings from local storage.
      */
     function loadSettings() {
+        // Only load settings when the class is fully initialized
+        if (!isInitialized) return;
+
         const settings = getItem(PAGE_SETTINGS_KEY);
 
         // Load the filter settings from local storage
@@ -324,12 +331,16 @@ export function useListActions(name, {
     }
 
     // Async load the settings for this Action List
-    setTimeout(loadSettings, 1);
+    setTimeout(() => {
+        isInitialized = true;
+        loadSettings();
+    }, 1);
 
     return {
         // State
         pagedItems,
         filter,
+        globalFilter,
         filterActiveCount,
         showFilters,
         summary,

package/src/components/ActionTable/tableColumns.ts

@@ -11,7 +11,7 @@ export function useTableColumns(name, columns, options = { titleMinWidth: 120, t
     const columnOrder = ref(getItem(COLUMN_ORDER_KEY) || []);
 
     // Manages visible columns on the table
-    const hiddenColumnNames = ref(getItem(VISIBLE_COLUMNS_KEY, columns.filter(c => c.category !== "General" || c.name === "status").map(c => c.name)));
+    const hiddenColumnNames = ref(getItem(VISIBLE_COLUMNS_KEY, []));
 
     // Title columns will have their name appear on the first column of the table as part of the records' title
     const titleColumnNames = ref(getItem(TITLE_COLUMNS_KEY, []));

package/src/components/Utility/ImagePreview.vue

@@ -23,21 +23,21 @@
             <PlayIcon class="w-16" />
           </button>
         </div>
-        <div
-            v-if="isPdf && !thumbUrl"
-            class="flex items-center justify-center h-full"
-        >
-          <PdfIcon class="w-24" />
-        </div>
         <q-img
-            v-else
+            v-if="thumbUrl || isPreviewable"
             fit="scale-down"
             class="non-selectable max-h-full max-w-full h-full"
             :src="(thumbUrl || previewUrl) + '#t=0.1'"
             preload="auto"
             data-testid="previewed-image"
-            data-dusk="previewed-image"
         />
+        <div
+            v-else
+            class="flex items-center justify-center h-full"
+        >
+          <PdfIcon v-if="isPdf" class="w-24" />
+          <TextFileIcon v-else class="w-24" />
+        </div>
       </div>
       <div
           v-if="$slots['action-button']"
@@ -98,7 +98,7 @@
 </template>
 
 <script setup>
-import { DownloadIcon, PlayIcon } from '@heroicons/vue/outline';
+import { DocumentTextIcon as TextFileIcon, DownloadIcon, PlayIcon } from '@heroicons/vue/outline';
 import { computed, ref } from 'vue';
 import { FullScreenCarouselDialog } from '.';
 import { download } from '../../helpers';
@@ -148,6 +148,7 @@ const computedImage = computed(() => {
 const mimeType = computed(
     () => computedImage.value.type || computedImage.value.mime
 );
+const isImage = computed(() => mimeType.value.match(/^image\//));
 const isVideo = computed(() => mimeType.value.match(/^video\//));
 const isPdf = computed(() => mimeType.value.match(/^application\/pdf/));
 const previewUrl = computed(
@@ -156,7 +157,9 @@ const previewUrl = computed(
 const thumbUrl = computed(() => {
   return computedImage.value.transcodes?.thumb?.url;
 });
-
+const isPreviewable = computed(() => {
+  return !!thumbUrl.value || isVideo.value || isImage.value;
+});
 const isConfirmingRemove = ref(false);
 function onRemove() {
   if (!isConfirmingRemove.value) {

package/src/components/Utility/index.ts

@@ -1,11 +1,13 @@
 export { default as CollapsableSidebar } from "./CollapsableSidebar.vue";
 export { default as ConfirmDialog } from "./Dialogs/ConfirmDialog.vue";
 export { default as ContentDrawer } from "./ContentDrawer.vue";
+export { default as FlatList } from "./FlatList.vue";
 export { default as FullScreenCarouselDialog } from "./Dialogs/FullscreenCarouselDialog.vue";
 export { default as FullScreenDialog } from "./Dialogs/FullScreenDialog.vue";
 export { default as ImagePreview } from "./ImagePreview.vue";
 export { default as InfoDialog } from "./Dialogs/InfoDialog.vue";
 export { default as InputDialog } from "./Dialogs/InputDialog.vue";
 export { default as ListTransition } from "./Transitions/ListTransition.vue";
+export { default as RefreshButton } from "./RefreshButton.vue";
 export { default as SlideTransition } from "./Transitions/SlideTransition.vue";
 export { default as StaggeredListTransition } from "./Transitions/StaggeredListTransition.vue";

package/src/config/index.ts

@@ -0,0 +1,14 @@
+export let danxOptions = {
+    fileUpload: {
+        directory: "file-upload",
+        presignedUploadUrl: null,
+        uploadCompletedUrl: null
+    }
+};
+
+export function configure(options) {
+    danxOptions = {
+        ...danxOptions,
+        ...options
+    };
+}

package/src/helpers/FileUpload.ts

@@ -1,4 +1,5 @@
 import { uid } from "quasar";
+import { danxOptions } from "../config";
 import { resolveFileLocation } from "./files";
 import { FlashMessages } from "./FlashMessages";
 
@@ -15,13 +16,9 @@ export class FileUpload {
     onProgressCb = null;
     onCompleteCb = null;
     onAllCompleteCb = null;
-    options: FileUploadOptions = {
-        directory: "file-upload",
-        presignedUploadUrl: null,
-        uploadCompletedUrl: null
-    };
+    options: FileUploadOptions = null;
 
-    constructor(files, options: FileUploadOptions) {
+    constructor(files, options: FileUploadOptions = null) {
         if (!Array.isArray(files) && !(files instanceof FileList)) {
             files = [files];
         }
@@ -33,9 +30,14 @@ export class FileUpload {
         this.onAllCompleteCb = null;
 
         this.options = {
+            ...danxOptions.fileUpload,
             ...this.options,
             ...options
         };
+
+        if (!this.options.presignedUploadUrl) {
+            throw new Error("Please configure the danxOptions: import { configure } from 'quasar-ui-danx';");
+        }
         this.prepare();
     }
 

package/src/helpers/singleFileUpload.ts

@@ -1,7 +1,7 @@
 import { computed, ref } from "vue";
 import { FileUpload, FileUploadOptions } from "./FileUpload";
 
-export function useSingleFileUpload(options: FileUploadOptions) {
+export function useSingleFileUpload(options: FileUploadOptions = null) {
     const uploadedFile = ref(null);
     const onCompleteCb = ref(null);
     const onFileChangeCb = ref(null);

package/src/vue-plugin.js

@@ -1,9 +1,7 @@
+export * from './config';
 export * from './helpers';
-export * from './components/DragAndDrop';
-export * from './components/ActionTable';
-export * from './components/Utility';
+export * from './components';
 export * from './svg';
-// export * from './components';
 
 import packageJson from '../package.json';