quasar-ui-danx 0.2.31 → 0.3.0

package/src/components/ActionTable/ActionTable.vue

@@ -34,22 +34,12 @@
         />
       </template>
       <template #header-cell="rowProps">
-        <QTh
-            :key="rowProps.key"
-            :props="rowProps"
-            :data-drop-zone="`resize-column-` + rowProps.col.name"
-            :class="cls['handle-drop-zone']"
-        >
-          {{ rowProps.col.label }}
-          <HandleDraggable
-              v-if="rowProps.col.resizeable"
-              :drop-zone="`resize-column-` + rowProps.col.name"
-              :class="cls['resize-handle']"
-              @resize="onResizeColumn(rowProps.col, $event)"
-          >
-            <RowResizeIcon class="w-4 text-gray-600" />
-          </HandleDraggable>
-        </QTh>
+        <ActionTableHeaderColumn
+            v-model="columnSettings"
+            :row-props="rowProps"
+            :name="name"
+            @update:model-value="onUpdateColumnSettings"
+        />
       </template>
       <template #body-cell="rowProps">
         <ActionTableColumn
@@ -65,13 +55,12 @@
 </template>
 
 <script setup>
-import { QTable, QTh } from "quasar";
+import { QTable } from "quasar";
 import { ref } from "vue";
 import { getItem, setItem } from "../../helpers";
-import { DragHandleIcon as RowResizeIcon } from "../../svg";
-import { HandleDraggable } from "../DragAndDrop";
 import { ActionVnode } from "../Utility";
 import ActionTableColumn from "./ActionTableColumn.vue";
+import ActionTableHeaderColumn from "./ActionTableHeaderColumn";
 import EmptyTableState from "./EmptyTableState.vue";
 import { mapSortBy, registerStickyScrolling } from "./listHelpers";
 import TableSummaryRow from "./TableSummaryRow.vue";
@@ -118,32 +107,7 @@ registerStickyScrolling(actionTable);
 
 const COLUMN_SETTINGS_KEY = `column-settings-${props.name}`;
 const columnSettings = ref(getItem(COLUMN_SETTINGS_KEY) || {});
-function onResizeColumn(column, val) {
-  columnSettings.value = {
-    ...columnSettings.value,
-    [column.name]: {
-      width: Math.max(Math.min(val.distance + val.startDropZoneSize, column.maxWidth || 500), column.minWidth || 80)
-    }
-  };
+function onUpdateColumnSettings() {
   setItem(COLUMN_SETTINGS_KEY, columnSettings.value);
 }
 </script>
-
-<style lang="scss" module="cls">
-.handle-drop-zone {
-  .resize-handle {
-    position: absolute;
-    top: 0;
-    right: -.45em;
-    width: .9em;
-    opacity: 0;
-    transition: all .3s;
-  }
-
-  &:hover {
-    .resize-handle {
-      opacity: 1;
-    }
-  }
-}
-</style>

package/src/components/ActionTable/ActionTableColumn.vue

@@ -52,11 +52,14 @@ const props = defineProps({
 const row = computed(() => props.rowProps.row);
 const column = computed(() => props.rowProps.col);
 const value = computed(() => props.rowProps.value);
-const isSaving = computed(() => column.value.isSaving && column.value.isSaving(row.value));
+const isSaving = computed(() => row.value.isSaving?.value);
 
 const columnStyle = computed(() => {
   const width = props.settings?.width || column.value.width;
-  return width ? { width: `${width}px` } : null;
+  return {
+    width: width ? `${width}px` : undefined,
+    minWidth: column.value.minWidth ? `${column.value.minWidth}px` : undefined
+  };
 });
 
 const columnClass = computed(() => ({

package/src/components/ActionTable/ActionTableHeaderColumn.vue

@@ -0,0 +1,83 @@
+<template>
+  <QTh
+      :key="rowProps.key"
+      :props="rowProps"
+      :data-drop-zone="isResizeable && `resize-column-` + column.name"
+      :class="isResizeable && cls['handle-drop-zone']"
+      :style="columnStyle"
+  >
+    {{ column.label }}
+    <HandleDraggable
+        v-if="isResizeable"
+        :drop-zone="`resize-column-` + column.name"
+        :class="cls['resize-handle']"
+        @resize="onResizeColumn"
+    >
+      <RowResizeIcon class="w-4 text-gray-600" />
+    </HandleDraggable>
+  </QTh>
+</template>
+<script setup>
+import { QTh } from "quasar";
+import { computed } from "vue";
+import { DragHandleIcon as RowResizeIcon } from "../../svg";
+import { HandleDraggable } from "../DragAndDrop";
+
+const emit = defineEmits(["update:model-value"]);
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true
+  },
+  name: {
+    type: String,
+    required: true
+  },
+  rowProps: {
+    type: Object,
+    required: true
+  }
+});
+
+const column = computed(() => props.rowProps.col);
+const isResizeable = computed(() => column.value.resizeable);
+
+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,
+    ...(column.value.headerStyle || {})
+  };
+});
+
+
+function onResizeColumn(val) {
+  const settings = {
+    ...props.modelValue,
+    [column.value.name]: {
+      width: Math.max(Math.min(val.distance + val.startDropZoneSize, column.value.maxWidth || 500), column.value.minWidth || 80)
+    }
+  };
+  emit("update:model-value", settings);
+}
+</script>
+
+<style lang="scss" module="cls">
+.handle-drop-zone {
+  .resize-handle {
+    position: absolute;
+    top: 0;
+    right: -.45em;
+    width: .9em;
+    opacity: 0;
+    transition: all .3s;
+  }
+
+  &:hover {
+    .resize-handle {
+      opacity: 1;
+    }
+  }
+}
+</style>

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/index.ts

@@ -8,5 +8,6 @@ export * from "./tableColumns";
 export { default as ActionMenu } from "./ActionMenu.vue";
 export { default as ActionTable } from "./ActionTable.vue";
 export { default as ActionTableColumn } from "./ActionTableColumn.vue";
+export { default as ActionTableHeaderColumn } from "./ActionTableHeaderColumn.vue";
 export { default as EmptyTableState } from "./EmptyTableState.vue";
 export { default as TableSummaryRow } from "./TableSummaryRow.vue";

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,