quasar-ui-danx 0.2.32 → 0.3.1

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/Fields/MultiFileField.vue

@@ -21,7 +21,7 @@
       <a
           v-if="uploadedFiles.length > 0"
           class="ml-3 text-red-900"
-          @click="onClear"
+          @click="clearUploadedFiles"
       >Clear</a>
       <input
           ref="file"
@@ -81,7 +81,7 @@ const props = defineProps({
   readonly: Boolean
 });
 
-const { onComplete, onDrop, onFilesSelected, uploadedFiles, onClear, onRemove } = useMultiFileUpload();
+const { onComplete, onDrop, onFilesSelected, uploadedFiles, clearUploadedFiles, onRemove } = useMultiFileUpload();
 onMounted(() => {
   if (props.modelValue) {
     uploadedFiles.value = props.modelValue;

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

@@ -234,7 +234,7 @@ function resolveSelectionLabel(option) {
  * @returns {string|*|string}
  */
 function resolveValue(option) {
-  if (typeof option === "string") {
+  if (!option || typeof option === "string") {
     return option;
   }
   let value = option.value;

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

@@ -21,7 +21,7 @@
       <a
           v-if="uploadedFile"
           class="ml-3 text-red-900"
-          @click="onClear"
+          @click="clearUploadedFile"
       >Clear</a>
       <input
           ref="file"
@@ -67,7 +67,7 @@ const props = defineProps({
   disable: Boolean,
   readonly: Boolean
 });
-const { onComplete, onDrop, onFileSelected, uploadedFile, onClear } = useSingleFileUpload();
+const { onComplete, onDrop, onFileSelected, uploadedFile, clearUploadedFile } = useSingleFileUpload();
 onComplete(() => emit("update:model-value", uploadedFile.value));
 
 onMounted(() => {

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 || "(Default)" }}</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 !== false"
+        title="Change variation name"
+        @confirm="onChangeVariationName"
+        @close="variationToEdit = false"
+    >
+      <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,85 @@ 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] || "");
+const newVariationName = ref("");
+const variationToEdit = ref(false);
+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 ? "Variation 1" : 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 = false;
+  newVariationName.value = "";
+}
+
+function onRemoveVariation(name) {
+  if (!name) return;
+
+  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,21 @@
 <script>
-const RenderVnode = (props) => props.vnode;
-RenderVnode.props = { vnode: { type: Object, required: true } };
+import { isRef, isVNode } from "vue";
+
+const RenderVnode = (props) => {
+  if (isVNode(props.vnode)) {
+    return props.vnode;
+  }
+
+  if (isRef(props.vnode)) {
+    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/config/index.ts

@@ -1,13 +1,8 @@
 import { QNotifyCreateOptions } from "quasar";
-
-export interface DanxFileUploadOptions {
-    directory?: string;
-    presignedUploadUrl?: Function | null;
-    uploadCompletedUrl?: Function | null;
-}
+import { FileUploadOptions } from "../helpers";
 
 export interface DanxOptions {
-    fileUpload: DanxFileUploadOptions;
+    fileUpload: FileUploadOptions;
     flashMessages: {
         default: QNotifyCreateOptions;
         success: QNotifyCreateOptions;