quasar-ui-danx 0.0.10 → 0.0.11

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>
+  <QTr
+    class="sticky-column-1 transition-all sticky-row"
+    :class="{'!bg-neutral-plus-7': !selectedCount, '!bg-blue-base text-white selected': selectedCount, 'opacity-50': loading}"
+  >
+    <QTd
+      :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>
+        <QSpinner
+          v-if="loading"
+          class="ml-3"
+          size="18"
+        />
+      </div>
+    </QTd>
+    <QTd
+      v-for="column in summaryColumns"
+      :key="column.name"
+      :align="column.align || 'left'"
+    >
+      <template v-if="summary">
+        {{ formatValue(column) }}
+      </template>
+    </QTd>
+  </QTr>
+</template>
+<script setup>
+import { XCircleIcon as ClearIcon } from "@heroicons/vue/solid";
+import { fNumber } from "danx/src/helpers/formats";
+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,15 @@
+export * from "./Form/Fields";
+export * from "danx/src/components/ActionTable/tableHelpers";
+export * from "./listActions";
+export * from "./tableColumns";
+export { default as ActionTable } from "./ActionTable";
+export { default as BatchActionMenu } from "./BatchActionMenu";
+export {
+  default as CollapsableFiltersSidebar
+} from "danx/src/components/ActionTable/Filters/CollapsableFiltersSidebar";
+export { default as EmptyTableState } from "./EmptyTableState";
+export { default as FilterGroupList } from "./Filters/FilterGroupList";
+export { default as FilterListToggle } from "./Filters/FilterListToggle";
+export { default as RenderComponentColumn } from "./RenderComponentColumn";
+export { default as RenderedForm } from "./Form/RenderedForm";
+export { default as TableSummaryRow } from "./TableSummaryRow";

package/src/components/ActionTable/listActions.ts

@@ -0,0 +1,361 @@
+import { getFilterFromUrl, mapSortBy, waitForRef } from "danx/src/components/ActionTable/tableHelpers";
+import { getItem, setItem } from "danx/src/helpers";
+import { computed, ref, watch } from "vue";
+
+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/tableColumns.ts

@@ -0,0 +1,72 @@
+import { getItem, setItem } from "danx/src/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
+  };
+}

package/src/components/ActionTable/tableHelpers.ts

@@ -0,0 +1,83 @@
+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<unknown>}
+ */
+export function waitForRef(ref, value) {
+  return new Promise((resolve) => {
+    watch(ref, (newValue) => {
+      if (newValue === value) {
+        resolve();
+      }
+    });
+  });
+}
+
+/**
+ * Returns the value of the URL parameter (if it is set)
+ * @param key
+ * @param url
+ */
+export function getUrlParam(key, url = undefined) {
+  const params = new URLSearchParams(url?.replace(/.*\?/, "") || window.location.search);
+  return params.get(key);
+}
+
+/**
+ * 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;
+}