quasar-ui-danx 0.2.32 → 0.3.0

package/src/components/ActionTable/ActionTableHeaderColumn.vue

@@ -46,7 +46,8 @@ const columnStyle = computed(() => {
   const width = props.settings?.width || column.value.width;
   return {
     width: width ? `${width}px` : undefined,
-    minWidth: column.value.minWidth ? `${column.value.minWidth}px` : undefined
+    minWidth: column.value.minWidth ? `${column.value.minWidth}px` : undefined,
+    ...(column.value.headerStyle || {})
   };
 });
 

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

@@ -2,7 +2,7 @@
   <div class="flex items-center transition-all" :class="{'w-72': showFilters, 'w-[6.5rem]': !showFilters}">
     <div class="flex-grow">
       <QBtn
-          class="toggle-button border-blue-700"
+          class="btn-blue-highlight border-blue-700"
           :class="{'highlighted': showFilters}"
           @click="$emit('update:show-filters', !showFilters)"
       >
@@ -38,7 +38,6 @@ const props = defineProps({
 const activeCount = computed(() => Object.keys(props.filter).filter(key => props.filter[key] !== undefined).length);
 </script>
 <style lang="scss" scoped>
-
 .btn-blue-highlight {
   @apply rounded-lg border border-solid;
 

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

@@ -2,12 +2,13 @@
   <QToggle
       :data-testid="'boolean-field-' + field.id"
       :model-value="modelValue"
+      :disable="disable || readonly"
       :toggle-indeterminate="toggleIndeterminate"
       :indeterminate-value="undefined"
       @update:model-value="$emit('update:model-value', $event)"
   >
     <FieldLabel
-        :field="field"
+        :field="{...field, label}"
         :show-name="showName"
         :class="labelClass"
     />
@@ -19,6 +20,10 @@ import FieldLabel from "./FieldLabel";
 
 defineEmits(["update:model-value"]);
 defineProps({
+  label: {
+    type: String,
+    default: null
+  },
   modelValue: {
     type: [Boolean],
     default: undefined
@@ -32,6 +37,8 @@ defineProps({
     default: "text-sm"
   },
   showName: Boolean,
-  toggleIndeterminate: Boolean
+  toggleIndeterminate: Boolean,
+  disable: Boolean,
+  readonly: Boolean
 });
 </script>

package/src/components/ActionTable/Form/RenderedForm.vue

@@ -1,5 +1,46 @@
 <template>
   <div class="rendered-form">
+    <div v-if="form.variations > 1" class="mb-4">
+      <QTabs v-model="currentVariation" class="text-xs">
+        <QTab
+            v-for="(name, index) in variationNames"
+            :key="name"
+            :name="name"
+            class="p-0"
+        >
+          <div class="flex flex-nowrap items-center text-sm">
+            <div>{{ name }}</div>
+            <template v-if="!disable && !readonly">
+              <a
+                  @click="() => (variationToEdit = name) && (newVariationName = name)"
+                  class="ml-1 p-1 hover:opacity-100 opacity-20 hover:bg-blue-200 rounded"
+              >
+                <EditIcon class="w-3 text-blue-900" />
+              </a>
+              <a
+                  v-if="index > 0"
+                  @click="variationToDelete = name"
+                  class="ml-1 p-1 hover:opacity-100 opacity-20 hover:bg-red-200 rounded"
+              >
+                <RemoveIcon class="w-3 text-red-900" />
+              </a>
+            </template>
+          </div>
+        </QTab>
+        <QTab
+            v-if="canAddVariation"
+            name="add"
+            key="add-new-variation"
+            @click="onAddVariation"
+            class="bg-blue-600 rounded-t-lg !text-white"
+        >
+          <template v-if="saving">
+            <QSpinnerBall class="w-4" />
+          </template>
+          <template v-else>+ Add Variation</template>
+        </QTab>
+      </QTabs>
+    </div>
     <div
         v-for="(field, index) in mappedFields"
         :key="field.id"
@@ -7,7 +48,8 @@
     >
       <Component
           :is="field.component"
-          v-model="fieldValues[field.name]"
+          :key="field.name + '-' + currentVariation"
+          :model-value="getFieldValue(field.name)"
           :field="field"
           :label="field.label || undefined"
           :no-label="noLabel"
@@ -17,10 +59,36 @@
           @update:model-value="onInput(field.name, $event)"
       />
     </div>
+    <ConfirmDialog
+        v-if="variationToEdit"
+        title="Change variation name"
+        @confirm="onChangeVariationName"
+        @close="variationToEdit = null"
+    >
+      <TextField
+          v-model="newVariationName"
+          label="Enter name"
+          placeholder="Variation Name"
+          input-class="bg-white"
+      />
+    </ConfirmDialog>
+    <ConfirmDialog
+        v-if="variationToDelete"
+        :title="`Remove variation ${variationToDelete}?`"
+        content="You cannot undo this action. If there was any analytics collected for this variation, it will still be attributed to the ad."
+        confirm-class="bg-red-900 text-white"
+        content-class="w-96"
+        @confirm="onRemoveVariation(variationToDelete)"
+        @close="variationToDelete = ''"
+    />
   </div>
 </template>
 <script setup>
-import { reactive } from "vue";
+import { PencilIcon as EditIcon } from "@heroicons/vue/solid";
+import { computed, ref } from "vue";
+import { FlashMessages, incrementName, replace } from "../../../helpers";
+import { TrashIcon as RemoveIcon } from "../../../svg";
+import { ConfirmDialog } from "../../Utility";
 import {
   BooleanField,
   DateField,
@@ -36,17 +104,18 @@ import {
 const emit = defineEmits(["update:values"]);
 const props = defineProps({
   values: {
-    type: Object,
+    type: Array,
     default: null
   },
-  fields: {
-    type: Array,
+  form: {
+    type: Object,
     required: true
   },
   noLabel: Boolean,
   showName: Boolean,
   disable: Boolean,
-  readonly: Boolean
+  readonly: Boolean,
+  saving: Boolean
 });
 
 const FORM_FIELD_MAP = {
@@ -61,16 +130,83 @@ const FORM_FIELD_MAP = {
   WYSIWYG: WysiwygField
 };
 
-const mappedFields = props.fields.map((field) => ({
+const mappedFields = props.form.fields.map((field) => ({
   placeholder: `Enter ${field.label}`,
   ...field,
   component: FORM_FIELD_MAP[field.type],
   default: field.type === "BOOLEAN" ? false : ""
 }));
 
-const fieldValues = reactive(props.values || {});
+const variationNames = computed(() => {
+  return [...new Set(props.values.map(v => v.variation))].sort();
+});
+
+const currentVariation = ref(variationNames.value[0] || "default");
+const newVariationName = ref("");
+const variationToEdit = ref("");
+const variationToDelete = ref("");
+const canAddVariation = computed(() => variationNames.value.length < props.form.variations && !props.readonly && !props.disable);
+
+function getFieldResponse(name) {
+  if (!props.values) return undefined;
+  return props.values.find((v) => v.variation === currentVariation.value && v.name === name);
+}
+function getFieldValue(name) {
+  return getFieldResponse(name)?.value;
+}
+function onInput(name, value) {
+  const fieldResponse = getFieldResponse(name);
+  const newFieldResponse = {
+    name,
+    variation: currentVariation.value,
+    value
+  };
+  const newValues = replace(props.values, fieldResponse, newFieldResponse, true);
+  emit("update:values", newValues);
+}
+
+function onAddVariation() {
+  if (props.saving) return;
+
+  const previousName = variationNames.value[variationNames.value.length - 1];
+  const newName = incrementName(previousName === "default" ? "Variation" : previousName);
+
+  const newVariation = props.form.fields.map((field) => ({
+    variation: newName,
+    name: field.name,
+    value: field.type === "BOOLEAN" ? false : null
+  }));
+  const newValues = [...props.values, ...newVariation];
+  emit("update:values", newValues);
+  currentVariation.value = newName;
+}
+
+function onChangeVariationName() {
+  if (!newVariationName.value) return;
+  if (variationNames.value.includes(newVariationName.value)) {
+    FlashMessages.error("Variation name already exists");
+    return;
+  }
+  const newValues = props.values.map((v) => {
+    if (v.variation === variationToEdit.value) {
+      return { ...v, variation: newVariationName.value };
+    }
+    return v;
+  });
+  emit("update:values", newValues);
+
+  currentVariation.value = newVariationName.value;
+  variationToEdit.value = "";
+  newVariationName.value = "";
+}
+
+function onRemoveVariation(name) {
+  const newValues = props.values.filter((v) => v.variation !== name);
+  emit("update:values", newValues);
 
-function onInput(key, value) {
-  emit("update:values", { ...fieldValues, [key]: value });
+  if (currentVariation.value === name) {
+    currentVariation.value = variationNames.value[0];
+  }
+  variationToDelete.value = "";
 }
 </script>

package/src/components/ActionTable/listControls.ts

@@ -1,8 +1,8 @@
-import { computed, ref, watch } from "vue";
-import { getItem, setItem, waitForRef } from "../../helpers";
+import { computed, Ref, ref, ShallowRef, shallowRef, watch } from "vue";
+import { ActionTargetItem, getItem, setItem, waitForRef } from "../../helpers";
 import { getFilterFromUrl } from "./listHelpers";
 
-interface ListActionsOptions {
+export interface ListActionsOptions {
     listRoute: Function;
     summaryRoute?: Function | null;
     filterFieldOptionsRoute?: Function | null;
@@ -13,6 +13,14 @@ interface ListActionsOptions {
     refreshFilters?: boolean;
 }
 
+export interface PagedItems {
+    data: any[] | undefined;
+    meta: {
+        total: number;
+        last_page?: number;
+    } | undefined;
+}
+
 export function useListControls(name: string, {
     listRoute,
     summaryRoute = null,
@@ -25,14 +33,19 @@ export function useListControls(name: string, {
 }: ListActionsOptions) {
     let isInitialized = false;
     const PAGE_SETTINGS_KEY = `${name}-pagination-settings`;
-    const pagedItems = ref(null);
-    const filter = ref({});
+    const pagedItems: Ref<PagedItems | null> = shallowRef(null);
+    const filter: Ref<object | any> = ref({});
     const globalFilter = ref({});
     const showFilters = ref(false);
-    const selectedRows = ref([]);
+    const selectedRows = shallowRef([]);
     const isLoadingList = ref(false);
     const isLoadingSummary = ref(false);
-    const summary = ref(null);
+    const summary = shallowRef(null);
+
+    // The active ad for viewing / editing
+    const activeItem: ShallowRef<ActionTargetItem | null> = shallowRef(null);
+    // Controls the active panel (ie: tab) if rendering a panels drawer or similar
+    const activePanel = shallowRef(null);
 
     // Filter fields are the field values available for the currently applied filter on Creative Groups
     // (ie: all states available under the current filter)
@@ -86,7 +99,7 @@ export function useListControls(name: string, {
         isLoadingSummary.value = true;
         const summaryFilter = { id: null, ...filter.value, ...globalFilter.value };
         if (selectedRows.value.length) {
-            summaryFilter.id = selectedRows.value.map((row) => row.id);
+            summaryFilter.id = selectedRows.value.map((row: { id: string }) => row.id);
         }
         summary.value = await summaryRoute(summaryFilter);
         isLoadingSummary.value = false;
@@ -108,7 +121,7 @@ export function useListControls(name: string, {
      * Watches for a filter URL parameter and applies the filter if it is set.
      */
     function applyFilterFromUrl(url: string, filterFields = null) {
-        if (url.match(urlPattern)) {
+        if (urlPattern && url.match(urlPattern)) {
             // A flat list of valid filterable field names
             const validFilterKeys = filterFields?.value?.map(group => group.fields.map(field => field.name)).flat();
 
@@ -125,15 +138,32 @@ export function useListControls(name: string, {
 
     // Set the reactive pager to map from the Laravel pagination to Quasar pagination
     // and automatically update the list of ads
-    function setPagedItems(items) {
+    function setPagedItems(items: any[] | PagedItems) {
+        let data, meta;
+
         if (Array.isArray(items)) {
-            pagedItems.value = { data: items, meta: { total: items.length } };
+            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;
-            }
+            data = items.data;
+            meta = items.meta;
         }
+
+        // Update the Quasar pagination rows number if it is different from the total
+        if (meta && meta.total !== quasarPagination.value.rowsNumber) {
+            quasarPagination.value.rowsNumber = meta.total;
+        }
+
+        // Add a reactive isSaving property to each item (for performance reasons in checking saving state)
+        data = data.map((item: any) => {
+            // We want to keep the isSaving state if it is already set, as optimizations prevent reloading the
+            // components, and therefore reactivity is not responding to the new isSaving state
+            const oldItem = pagedItems.value?.data?.find(i => i.id === item.id);
+            return { ...item, isSaving: oldItem?.isSaving || ref(false) };
+        });
+
+        pagedItems.value = { data, meta };
     }
 
     /**
@@ -148,9 +178,12 @@ export function useListControls(name: string, {
      *
      * @param updatedItem
      */
-    function setItemInPagedList(updatedItem) {
+    function setItemInList(updatedItem: any) {
         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 };
+        setPagedItems({
+            data,
+            meta: { total: pagedItems.value.meta.total }
+        });
 
         // Update the active item as well if it is set
         if (activeItem.value?.id === updatedItem.id) {
@@ -160,10 +193,10 @@ export function useListControls(name: string, {
 
     /**
      * Loads more items into the list.
-     * @param index
-     * @param perPage
      */
-    async function loadMore(index, perPage = undefined) {
+    async function loadMore(index: number, perPage = undefined) {
+        if (!moreRoute) return;
+
         const newItems = await moreRoute({
             page: index + 1,
             perPage,
@@ -171,7 +204,10 @@ export function useListControls(name: string, {
         });
 
         if (newItems && newItems.length > 0) {
-            pagedItems.value.data = [...pagedItems.value.data, ...newItems];
+            setPagedItems({
+                data: [...pagedItems.value.data, ...newItems],
+                meta: { total: pagedItems.value.meta.total }
+            });
             return true;
         }
 
@@ -180,7 +216,6 @@ export function useListControls(name: string, {
 
     /**
      * Refreshes the list, summary, and filter field options.
-     * @returns {Promise<Awaited<void>[]>}
      */
     async function refreshAll() {
         return Promise.all([loadList(), loadSummary(), loadFilterFieldOptions(), getActiveItemDetails()]);
@@ -188,10 +223,8 @@ export function useListControls(name: string, {
 
     /**
      * Updates the settings in local storage
-     * @param key
-     * @param value
      */
-    function updateSettings(key, value) {
+    function updateSettings(key: string, value: any) {
         const settings = getItem(PAGE_SETTINGS_KEY) || {};
         settings[key] = value;
         setItem(PAGE_SETTINGS_KEY, settings);
@@ -242,11 +275,6 @@ export function useListControls(name: string, {
         setItem(PAGE_SETTINGS_KEY, settings);
     }
 
-    // The active ad for viewing / editing
-    const activeItem = ref(null);
-    // Controls the active panel (ie: tab) if rendering a panels drawer or similar
-    const activePanel = ref(null);
-
     /**
      * Gets the additional details for the currently active item.
      * (ie: data that is not normally loaded in the list because it is not needed for the list view)
@@ -261,7 +289,8 @@ export function useListControls(name: string, {
         // 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;
+            const loadedItem = pagedItems.value?.data.find((i: { id: string }) => i.id === result.id);
+            activeItem.value = { ...result, isSaving: loadedItem.isSaving || ref(false) };
         }
     }
 
@@ -289,12 +318,13 @@ export function useListControls(name: string, {
     /**
      * 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;
+    async function getNextItem(offset: number) {
+        if (!pagedItems.value) return;
+
+        const index = pagedItems.value.data.findIndex((i: { id: string }) => i.id === activeItem.value?.id);
+        if (index === undefined || index === null) return;
+
         let nextIndex = index + offset;
 
         // Load the previous page if the offset is before index 0
@@ -321,7 +351,7 @@ export function useListControls(name: string, {
             }
         }
 
-        activeItem.value = pagedItems.value.data[nextIndex];
+        activeItem.value = pagedItems.value?.data[nextIndex];
     }
 
     // Initialize the list actions and load settings, lists, summaries, filter fields, etc.
@@ -358,6 +388,6 @@ export function useListControls(name: string, {
         getNextItem,
         activatePanel,
         applyFilterFromUrl,
-        setItemInPagedList
+        setItemInList
     };
 }

package/src/components/ActionTable/tableColumns.ts

@@ -9,9 +9,9 @@ export interface TableColumn {
     field: string,
     format?: Function,
     innerClass?: string | object,
-    style?: string,
-    headerStyle?: string,
-    isSaving?: boolean | Function,
+    style?: string | object,
+    headerStyle?: string | object,
+    isSavingRow?: boolean | Function,
     label: string,
     maxWidth?: number,
     minWidth?: number,

package/src/components/PanelsDrawer/PanelsDrawerPanels.vue

@@ -6,7 +6,7 @@
     <QTabPanel v-for="panel in panels" :key="panel.name" :name="panel.name">
       <RenderVnode
           v-if="panel.vnode"
-          :vnode="panel.vnode()"
+          :vnode="panel.vnode"
       />
     </QTabPanel>
   </QTabPanels>

package/src/components/Utility/Tools/RenderVnode.vue

@@ -1,5 +1,19 @@
 <script>
-const RenderVnode = (props) => props.vnode;
-RenderVnode.props = { vnode: { type: Object, required: true } };
+const RenderVnode = (props) => {
+  if (props.vnode.__v_isVNode) {
+    return props.vnode;
+  }
+
+  if (props.vnode.__v_isRef) {
+    return props.vnode.value;
+  }
+
+  if (typeof props.vnode === "function") {
+    return props.vnode();
+  }
+
+  return null;
+};
+RenderVnode.props = { vnode: { type: [Function, Object], required: true } };
 export default RenderVnode;
 </script>

package/src/helpers/actions.ts

@@ -1,17 +1,23 @@
-import { ref, shallowRef, VNode } from "vue";
+import { useDebounceFn } from "@vueuse/core";
+import { Ref, shallowRef, VNode } from "vue";
 import { FlashMessages } from "./FlashMessages";
 
-type ActionTarget = object[] | object;
+export type ActionTargetItem = {
+    id: number | string;
+    isSaving: Ref<boolean>;
+    [key: string]: any;
+};
+export type ActionTarget = ActionTargetItem[] | ActionTargetItem;
 
-interface ActionOptions {
+export interface ActionOptions {
     name?: string;
     label?: string;
     menu?: boolean;
     batch?: boolean;
     category?: string;
     class?: string;
+    debounce?: number;
     trigger?: (target: ActionTarget, input: any) => Promise<any>;
-    activeTarget?: any;
     vnode?: (target: ActionTarget) => VNode;
     enabled?: (target: object) => boolean;
     batchEnabled?: (targets: object[]) => boolean;
@@ -24,7 +30,7 @@ interface ActionOptions {
     onFinish?: (result: any, targets: ActionTarget, input: any) => any;
 }
 
-export const activeActionVnode: object = shallowRef(null);
+export const activeActionVnode: Ref = shallowRef(null);
 
 /**
  * Hook to perform an action on a set of targets
@@ -36,31 +42,25 @@ export const activeActionVnode: object = shallowRef(null);
 export function useActions(actions: ActionOptions[], globalOptions: ActionOptions | null = null) {
     const mappedActions = actions.map(action => {
         const mappedAction: ActionOptions = { ...globalOptions, ...action };
-        if (!mappedAction.trigger) {
-            mappedAction.trigger = (target, input) => performAction(mappedAction, target, input);
-            mappedAction.activeTarget = ref(null);
+        if (mappedAction.debounce) {
+            mappedAction.trigger = useDebounceFn((target, input) => performAction(mappedAction, target, input, true), mappedAction.debounce);
+        } else if (!mappedAction.trigger) {
+            mappedAction.trigger = (target, input) => performAction(mappedAction, target, input, true);
         }
         return mappedAction;
     });
 
     /**
-     * Check if the provided target is currently being saved by any of the actions
+     * Set the reactive saving state of a target
      */
-    function isSavingTarget(target: any): boolean {
-        if (!target) return false;
-
-        for (const action of mappedActions) {
-            const activeTargets = (Array.isArray(action.activeTarget.value) ? action.activeTarget.value : [action.activeTarget.value]).filter(t => t);
-            if (activeTargets.length === 0) continue;
-
-            for (const activeTarget of activeTargets) {
-                if (activeTarget === target || (activeTarget.id && activeTarget.id === target.id)) {
-                    return true;
-                }
+    function setTargetSavingState(target: ActionTarget, saving: boolean) {
+        if (Array.isArray(target)) {
+            for (const t of target) {
+                t.isSaving.value = saving;
             }
+        } else {
+            target.isSaving.value = saving;
         }
-
-        return false;
     }
 
     /**
@@ -69,22 +69,23 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
      * @param {string} name - can either be a string or an action object
      * @param {object[]|object} target - an array of targets or a single target object
      * @param {any} input - The input data to pass to the action handler
+     * @param isTriggered - Whether the action was triggered by a trigger function
      */
-    async function performAction(name: string | object, target: ActionTarget, input: any = null) {
-        const action: ActionOptions = typeof name === "string" ? mappedActions.find(a => a.name === name) : name;
+    async function performAction(name: string | object, target: ActionTarget, input: any = null, isTriggered = false) {
+        const action: ActionOptions | null | undefined = typeof name === "string" ? mappedActions.find(a => a.name === name) : name;
         if (!action) {
             throw new Error(`Unknown action: ${name}`);
         }
 
-        if (!action.activeTarget) {
-            throw new Error(`Action ${action.name} does not have an activeTarget ref. Please use useActions() or manually set the activeTarget ref`);
+        // We always want to call the trigger function if it exists, unless it's already been triggered
+        // This provides behavior like debounce and custom action resolution
+        if (action.trigger && !isTriggered) {
+            return action.trigger(target, input);
         }
 
         const vnode = action.vnode && action.vnode(target);
         let result: any;
 
-        action.activeTarget.value = target;
-
         // Run the onStart handler if it exists and quit the operation if it returns false
         if (action.onStart) {
             if (!action.onStart(action, target, input)) {
@@ -92,6 +93,8 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
             }
         }
 
+        setTargetSavingState(target, true);
+
         // If additional input is required, first render the vnode and wait for the confirm or cancel action
         if (vnode) {
             // If the action requires an input, we set the activeActionVnode to the input component.
@@ -119,7 +122,8 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
             result = await onConfirmAction(action, target, input);
         }
 
-        action.activeTarget.value = null;
+        setTargetSavingState(target, false);
+
         return result;
     }
 
@@ -135,14 +139,13 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
 
         for (const filter of Object.keys(filters)) {
             const filterValue = filters[filter];
-            filteredActions = filteredActions.filter(a => a[filter] === filterValue || (Array.isArray(filterValue) && filterValue.includes(a[filter])));
+            filteredActions = filteredActions.filter((a: object) => a[filter] === filterValue || (Array.isArray(filterValue) && filterValue.includes(a[filter])));
         }
         return filteredActions;
     }
 
     return {
         actions: mappedActions,
-        isSavingTarget,
         filterActions,
         performAction
     };