quasar-ui-danx 0.0.10 → 0.0.12

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

@@ -0,0 +1,2 @@
+export * from "./Fields";
+export { default as RenderedForm } from "./RenderedForm.vue";

package/src/components/ActionTable/RenderComponentColumn.vue

@@ -0,0 +1,22 @@
+<template>
+  <Component
+    :is="component.is"
+    v-bind="component.props"
+    @action="$emit('action', $event)"
+  >{{ component.value || component.props?.text || rowProps.value }}</Component>
+</template>
+<script setup>
+import { computed } from "vue";
+
+defineEmits(["action"]);
+const props = defineProps({
+  rowProps: {
+    type: Object,
+    required: true
+  }
+});
+
+const component = computed(() => {
+  return props.rowProps.col.component(props.rowProps.row);
+});
+</script>

package/src/components/ActionTable/TableSummaryRow.vue

@@ -0,0 +1,95 @@
+<template>
+  <q-tr
+      class="sticky-column-1 transition-all sticky-row"
+      :class="{'!bg-neutral-plus-7': !selectedCount, '!bg-blue-base text-white selected': selectedCount, 'opacity-50': loading}"
+  >
+    <q-td
+        :colspan="stickyColspan"
+        class="font-bold transition-all"
+        :class="{'!bg-neutral-plus-7 !pl-5': !selectedCount, '!bg-blue-base text-white !pl-4': selectedCount}"
+    >
+      <div class="flex flex-nowrap items-center">
+        <div
+            v-if="selectedCount"
+            class="flex items-center"
+        >
+          <ClearIcon
+              class="w-6 mr-3"
+              @click="$emit('clear')"
+          />
+          {{ fNumber(selectedCount) }} {{ selectedLabel }}
+        </div>
+        <div v-else-if="itemCount">
+          {{ fNumber(itemCount) }} {{ label }}
+        </div>
+        <q-spinner
+            v-if="loading"
+            class="ml-3"
+            size="18"
+        />
+      </div>
+      </q-td>
+      <q-td
+          v-for="column in summaryColumns"
+          :key="column.name"
+          :align="column.align || 'left'"
+      >
+        <template v-if="summary">
+          {{ formatValue(column) }}
+        </template>
+        </q-td>
+        </q-tr>
+</template>
+<script setup>
+import { fNumber } from '@ui/helpers/formats';
+import { XCircleIcon as ClearIcon } from '@heroicons/vue/solid';
+import { computed } from 'vue';
+
+defineEmits(['clear']);
+const props = defineProps({
+  loading: Boolean,
+  label: {
+    type: String,
+    default: 'Rows'
+  },
+  selectedLabel: {
+    type: String,
+    default: 'Selected'
+  },
+  selectedCount: {
+    type: Number,
+    default: 0
+  },
+  itemCount: {
+    type: Number,
+    default: 0
+  },
+  summary: {
+    type: Object,
+    default: null
+  },
+  columns: {
+    type: Array,
+    required: true
+  },
+  stickyColspan: {
+    type: Number,
+    default: 2
+  }
+});
+
+const summaryColumns = computed(() => {
+  // The sticky columns are where we display the selection count and should not be included in the summary columns
+  return props.columns.slice(props.stickyColspan - 1);
+});
+
+function formatValue(column) {
+  const value = props.summary[column.name];
+  if (value === undefined) return '';
+
+  if (column.format) {
+    return column.format(value);
+  }
+  return value;
+}
+</script>

package/src/components/ActionTable/index.ts

@@ -0,0 +1,10 @@
+export * from "./Filters";
+export * from "./Form";
+export * from "./listActions";
+export * from "./listHelpers";
+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 RenderComponentColumn } from "./RenderComponentColumn.vue";
+export { default as TableSummaryRow } from "./TableSummaryRow.vue";

package/src/components/ActionTable/listActions.ts

@@ -0,0 +1,362 @@
+import { getItem, setItem } from "@ui/helpers";
+import { computed, ref, watch } from "vue";
+import { getFilterFromUrl, mapSortBy, waitForRef } from "./listHelpers";
+
+export function useListActions(name, {
+    listRoute,
+    filterFieldOptionsRoute,
+    summaryRoute = null,
+    moreRoute = null,
+    applyActionRoute = null,
+    applyBatchActionRoute = null,
+    itemDetailsRoute = null,
+    columns = null,
+    filterGroups = null,
+    refreshFilters = false,
+    urlPattern = null,
+    filterDefaults = {}
+}) {
+    const PAGE_SETTINGS_KEY = `${name}-pagination-settings`;
+    const pagedItems = ref(null);
+    const filter = ref({});
+    const showFilters = ref(getItem(`${name}-show-filters`, true));
+    const selectedRows = ref([]);
+    const isLoadingList = ref(false);
+    const isLoadingSummary = ref(false);
+    const summary = ref(null);
+
+    const filterActiveCount = computed(() => Object.keys(filter.value).filter(key => filter.value[key] !== undefined).length);
+
+    const PAGING_DEFAULT = {
+        sortBy: null,
+        descending: false,
+        page: 1,
+        rowsNumber: 0,
+        rowsPerPage: 50
+    };
+    const quasarPagination = ref(PAGING_DEFAULT);
+
+    const pager = computed(() => ({
+        perPage: quasarPagination.value.rowsPerPage,
+        page: quasarPagination.value.page,
+        filter: filter.value,
+        sort: columns ? mapSortBy(quasarPagination.value, columns) : undefined
+    }));
+
+    // When any part of the filter changes, get the new list of creatives
+    watch(pager, () => {
+        saveSettings();
+        loadList();
+    });
+    watch(filter, () => {
+        saveSettings();
+        loadSummary();
+    });
+    watch(selectedRows, loadSummary);
+
+    if (refreshFilters) {
+        watch(filter, loadFilterFieldOptions);
+    }
+
+    async function loadList() {
+        isLoadingList.value = true;
+        setPagedItems(await listRoute(pager.value));
+        isLoadingList.value = false;
+    }
+
+    async function loadSummary() {
+        if (summaryRoute) {
+            isLoadingSummary.value = true;
+            const summaryFilter = { id: null, ...filter.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
+    // (ie: all states available under the current filter)
+    const filterFieldOptions = ref({});
+    const isLoadingFilters = ref(false);
+
+    watch(() => showFilters.value, (show) => {
+        setItem(`${name}-show-filters`, show);
+    });
+
+    async function loadFilterFieldOptions() {
+        isLoadingFilters.value = true;
+        filterFieldOptions.value = await filterFieldOptionsRoute(filter.value);
+        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) {
+        if (url.match(urlPattern)) {
+            const urlFilter = getFilterFromUrl(url, validFilterKeys.value);
+
+            if (Object.keys(urlFilter).length > 0) {
+                filter.value = urlFilter;
+            }
+        }
+    }
+
+    // Set the reactive pager to map from the Laravel pagination to Quasar pagination
+    // and automatically update the list of ads
+    function setPagedItems(items) {
+        if (Array.isArray(items)) {
+            pagedItems.value = { data: items, meta: { total: items.length } };
+        } else {
+            pagedItems.value = items;
+            if (items?.meta && items.meta.total !== quasarPagination.value.rowsNumber) {
+                quasarPagination.value.rowsNumber = items.meta.total;
+            }
+        }
+    }
+
+    /**
+     * Resets the filter and pagination settings to their defaults.
+     */
+    function resetPaging() {
+        quasarPagination.value = PAGING_DEFAULT;
+    }
+
+    /**
+     * Updates a row in the paged items list with the new item data. Uses the item's id to find the row.
+     *
+     * @param updatedItem
+     */
+    function setItemInPagedList(updatedItem) {
+        const data = pagedItems.value?.data?.map(item => (item.id === updatedItem.id && (item.updated_at === null || item.updated_at <= updatedItem.updated_at)) ? updatedItem : item);
+        pagedItems.value = { ...pagedItems.value, data };
+    }
+
+    /**
+     * Loads more items into the list.
+     * @param index
+     * @param perPage
+     */
+    async function loadMore(index, perPage = undefined) {
+        const newItems = await moreRoute({
+            page: index + 1,
+            perPage,
+            filter: filter.value
+        });
+
+        if (newItems && newItems.length > 0) {
+            pagedItems.value.data = [...pagedItems.value.data, ...newItems];
+            return true;
+        }
+
+        return false;
+    }
+
+    /**
+     * Refreshes the list, summary, and filter field options.
+     * @returns {Promise<Awaited<void>[]>}
+     */
+    async function refreshAll() {
+        return Promise.all([loadList(), loadSummary(), loadFilterFieldOptions()]);
+    }
+
+    /**
+     * Loads the filter and pagination settings from local storage.
+     */
+    function loadSettings() {
+        const settings = getItem(PAGE_SETTINGS_KEY);
+
+        // Load the filter settings from local storage
+        if (settings) {
+            filter.value = { ...settings.filter, ...filter.value };
+            quasarPagination.value = settings.quasarPagination;
+        } else {
+            // If no local storage settings, apply the default filters
+            filter.value = { ...filterDefaults, ...filter.value };
+        }
+
+        // Load the URL filters if they are set
+        applyFilterFromUrl(window.location.href);
+
+        setTimeout(() => {
+            if (!isLoadingList.value) {
+                loadList();
+            }
+
+            if (!isLoadingSummary.value) {
+                loadSummary();
+            }
+
+            if (!isLoadingFilters.value) {
+                loadFilterFieldOptions();
+            }
+        }, 1);
+    }
+
+    /**
+     * Saves the current filter and pagination settings to local storage.
+     */
+    async function saveSettings() {
+        const settings = {
+            filter: filter.value,
+            quasarPagination: { ...quasarPagination.value, page: 1 }
+        };
+        // save in local storage
+        setItem(PAGE_SETTINGS_KEY, settings);
+    }
+
+    /**
+     * Applies an action to an item.
+     */
+    const isApplyingActionToItem = ref(null);
+    let actionResultCount = 0;
+
+    async function applyAction(item, input, itemData = {}) {
+        isApplyingActionToItem.value = item;
+        const resultNumber = ++actionResultCount;
+        setItemInPagedList({ ...item, ...input, ...itemData });
+        const result = await applyActionRoute(item, input);
+        if (result.success) {
+            // Only render the most recent campaign changes
+            if (resultNumber !== actionResultCount) return;
+
+            // Update the updated item in the previously loaded list if it exists
+            setItemInPagedList(result.item);
+
+            // Update the active item if it is the same as the updated item
+            if (activeItem.value?.id === result.item.id) {
+                activeItem.value = { ...activeItem.value, ...result.item };
+            }
+        }
+        isApplyingActionToItem.value = null;
+        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
+    const formTab = ref("general");
+
+    // Whenever the active item changes, fill the additional item details
+    // (ie: tasks, verifications, creatives, etc.)
+    if (itemDetailsRoute) {
+        watch(() => activeItem.value, async (newItem, oldItem) => {
+            if (newItem && oldItem?.id !== newItem.id) {
+                const result = await itemDetailsRoute(newItem);
+
+                // Only set the ad details if we are the response for the currently loaded item
+                // NOTE: race conditions might allow the finished loading item to be different to the currently
+                // requested item
+                if (result?.id === activeItem.value?.id) {
+                    activeItem.value = result;
+                }
+            }
+        });
+    }
+
+    /**
+     * Opens the item's form with the given item and tab
+     *
+     * @param item
+     * @param tab
+     */
+    function openItemForm(item, tab) {
+        activeItem.value = item;
+        formTab.value = tab;
+    }
+
+    /**
+     * Gets the next item in the list at the given offset (ie: 1 or -1) from the current position in the list of the
+     * selected item. If the next item is on a previous or next page, it will load the page first then select the item
+     * @param offset
+     * @returns {Promise<void>}
+     */
+    async function getNextItem(offset) {
+        const index = pagedItems.value?.data.findIndex(i => i.id === activeItem.value.id);
+        if (index === undefined) return;
+        let nextIndex = index + offset;
+
+        // Load the previous page if the offset is before index 0
+        if (nextIndex < 0) {
+            if (quasarPagination.value.page > 1) {
+                quasarPagination.value = { ...quasarPagination.value, page: quasarPagination.value.page - 1 };
+                await waitForRef(isLoadingList, false);
+                nextIndex = pagedItems.value.data.length - 1;
+            } else {
+                // There are no more previous pages
+                return;
+            }
+        }
+
+        // Load the next page if the offset is past the last index
+        if (nextIndex >= pagedItems.value.data.length) {
+            if (quasarPagination.value.page < pagedItems.value.meta.last_page) {
+                quasarPagination.value = { ...quasarPagination.value, page: quasarPagination.value.page + 1 };
+                await waitForRef(isLoadingList, false);
+                nextIndex = 0;
+            } else {
+                // There are no more next pages
+                return;
+            }
+        }
+
+        activeItem.value = pagedItems.value.data[nextIndex];
+    }
+
+    // Async load the settings for this Action List
+    setTimeout(loadSettings, 1);
+
+    return {
+        // State
+        pagedItems,
+        filter,
+        filterActiveCount,
+        showFilters,
+        summary,
+        filterFieldOptions,
+        selectedRows,
+        isLoadingList,
+        isLoadingFilters,
+        isLoadingSummary,
+        pager,
+        quasarPagination,
+        isApplyingActionToItem,
+        isApplyingBatchAction,
+        activeItem,
+        formTab,
+        columns,
+        filterGroups,
+
+        // Actions
+        loadSummary,
+        resetPaging,
+        loadList,
+        loadMore,
+        refreshAll,
+        applyAction,
+        applyBatchAction,
+        getNextItem,
+        openItemForm,
+        applyFilterFromUrl
+    };
+}

package/src/components/ActionTable/listHelpers.ts

@@ -0,0 +1,74 @@
+import { getUrlParam } from "@ui/helpers";
+import { onMounted, watch } from "vue";
+
+export function registerStickyScrolling(tableRef) {
+    onMounted(() => {
+        const scrollEl = tableRef.value.$el.getElementsByClassName("q-table__middle")[0];
+        scrollEl.addEventListener("scroll", onScroll);
+
+        function onScroll({ target }) {
+            // Add / remove scroll y class based on whether we're scrolling vertically
+            if (target.scrollTop > 0) {
+                scrollEl.classList.add("is-scrolling-y");
+            } else {
+                scrollEl.classList.remove("is-scrolling-y");
+            }
+
+            // Add / remove scroll x class based on whether we're scrolling horizontally
+            if (target.scrollLeft > 0) {
+                scrollEl.classList.add("is-scrolling-x");
+            } else {
+                scrollEl.classList.remove("is-scrolling-x");
+            }
+        }
+    });
+}
+
+export function mapSortBy(pagination, columns) {
+    if (!pagination.sortBy) return null;
+
+    const column = columns.find(c => c.name === pagination.sortBy);
+    return [
+        {
+            column: column.sortBy || column.name,
+            expression: column.sortByExpression || undefined,
+            order: pagination.descending ? "desc" : "asc"
+        }
+    ];
+}
+
+/**
+ * Wait for a ref to have a value and then resolve the promise
+ *
+ * @param ref
+ * @param value
+ * @returns {Promise<void>}
+ */
+export function waitForRef(ref, value) {
+    return new Promise<void>((resolve) => {
+        watch(ref, (newValue) => {
+            if (newValue === value) {
+                resolve();
+            }
+        });
+    });
+}
+
+/**
+ * Returns the filter from the URL if it is set
+ * @param url
+ * @param allowedKeys
+ */
+export function getFilterFromUrl(url, allowedKeys = null) {
+    const filter = {};
+    const urlFilter = getUrlParam("filter", url);
+    if (urlFilter) {
+        const fields = JSON.parse(urlFilter);
+        Object.keys(fields).forEach((key) => {
+            if (!allowedKeys || allowedKeys.includes(key)) {
+                filter[key] = fields[key];
+            }
+        });
+    }
+    return filter;
+}

package/src/components/ActionTable/tableColumns.ts

@@ -0,0 +1,72 @@
+import { getItem, setItem } from "@ui/helpers";
+import { computed, ref, watch } from "vue";
+
+export function useTableColumns(name, columns, options = { titleMinWidth: 120, titleMaxWidth: 200 }) {
+    const COLUMN_ORDER_KEY = `${name}-column-order`;
+    const VISIBLE_COLUMNS_KEY = `${name}-visible-columns`;
+    const TITLE_COLUMNS_KEY = `${name}-title-columns`;
+    const TITLE_WIDTH_KEY = `${name}-title-width`;
+
+    // The list that defines the order the columns should appear in
+    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)));
+
+    // 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, []));
+
+    // The width of the title column
+    const titleWidth = ref(getItem(TITLE_WIDTH_KEY, options.titleMinWidth));
+
+    /**
+     * When the title column is resized, update the titleWidth
+     * @param val
+     */
+    function onResizeTitleColumn(val) {
+        titleWidth.value = Math.max(Math.min(val.distance + val.startDropZoneSize, options.titleMaxWidth), options.titleMinWidth);
+    }
+
+    // Columns that should be locked to the left side of the table
+    const lockedColumns = computed(() => orderedColumns.value.slice(0, 1));
+
+    // The resolved list of columns in the order they should appear in
+    const orderedColumns = computed(() => [...columns].sort((a, b) => {
+        const aIndex = columnOrder.value.indexOf(a.name);
+        const bIndex = columnOrder.value.indexOf(b.name);
+        return aIndex === -1 ? 1 : bIndex === -1 ? -1 : aIndex - bIndex;
+    }));
+
+    // The ordered list of columns. The ordering of this list is editable and will be stored in localStorage
+    const sortableColumns = computed({
+        get() {
+            return orderedColumns.value.slice(1);
+        },
+        set(newColumns) {
+            columnOrder.value = [...lockedColumns.value.map(c => c.name), ...newColumns.map(c => c.name)];
+            setItem(COLUMN_ORDER_KEY, columnOrder.value);
+        }
+    });
+
+    // The list of columns that are visible. To edit the visible columns, edit the hiddenColumnNames list
+    const visibleColumns = computed(() => orderedColumns.value.filter(c => !hiddenColumnNames.value.includes(c.name)));
+
+    // The list of columns that should be included in the title of a row
+    const orderedTitleColumns = computed(() => orderedColumns.value.filter(c => titleColumnNames.value.includes(c.name)));
+
+    // Save changes to the list of hidden columns in localStorage
+    watch(() => hiddenColumnNames.value, () => setItem(VISIBLE_COLUMNS_KEY, hiddenColumnNames.value));
+    watch(() => titleColumnNames.value, () => setItem(TITLE_COLUMNS_KEY, titleColumnNames.value));
+    watch(() => titleWidth.value, () => setItem(TITLE_WIDTH_KEY, titleWidth.value));
+
+    return {
+        sortableColumns,
+        lockedColumns,
+        visibleColumns,
+        hiddenColumnNames,
+        titleColumnNames,
+        titleWidth,
+        orderedTitleColumns,
+        onResizeTitleColumn
+    };
+}