quasar-ui-danx 0.3.8 → 0.3.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.3.8",
+  "version": "0.3.10",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",

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

@@ -1,27 +1,45 @@
 <template>
   <div class="rendered-form">
-    <div v-if="form.variations > 1" class="mb-4">
-      <QTabs v-model="currentVariation" class="text-xs">
+    <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"
-            content-class="w-full"
+          v-for="(name, index) in variationNames"
+          :key="name"
+          :name="name"
+          class="p-0"
+          content-class="w-full"
         >
           <div class="flex flex-nowrap items-center text-sm w-full">
-            <div class="flex-grow">{{ name || "1" }}</div>
-            <div v-if="!disable && !readonly && canModifyVariations" class="flex flex-nowrap items-center mr-2">
+            <div
+              v-if="!isVariationFormComplete(name)"
+              class="variation-missing-icon pl-1"
+            >
+              <MissingIcon class="text-red-400 w-4" />
+              <QTooltip>Creative Form Incomplete</QTooltip>
+            </div>
+            <div class="flex-grow">
+              {{ name || "1" }}
+            </div>
+            <div
+              v-if="!disable && !readonly && canModifyVariations"
+              class="flex flex-nowrap items-center mr-2"
+            >
               <a
-                  @click="() => (variationToEdit = name) && (newVariationName = name)"
-                  class="ml-1 p-1 hover:opacity-100 opacity-20 hover:bg-blue-200 rounded"
+                class="ml-1 p-1 hover:opacity-100 opacity-20 hover:bg-blue-200 rounded"
+                @click="() => (variationToEdit = name) && (newVariationName = name)"
               >
                 <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"
+                v-if="index > 0"
+                class="ml-1 p-1 hover:opacity-100 opacity-20 hover:bg-red-200 rounded"
+                @click="variationToDelete = name"
               >
                 <RemoveIcon class="w-3 text-red-900" />
               </a>
@@ -29,63 +47,65 @@
           </div>
         </QTab>
         <QTab
-            v-if="canAddVariation"
-            name="add"
-            key="add-new-variation"
-            @click="onAddVariation"
-            class="bg-blue-600 rounded-t-lg !text-white"
+          v-if="canAddVariation"
+          key="add-new-variation"
+          name="add"
+          class="bg-blue-600 rounded-t-lg !text-white"
+          @click="onAddVariation"
         >
           <template v-if="saving">
             <QSpinnerBall class="w-4" />
           </template>
-          <template v-else>+ Add Variation</template>
+          <template v-else>
+            + Add Variation
+          </template>
         </QTab>
       </QTabs>
     </div>
     <div
-        v-for="(field, index) in mappedFields"
-        :key="field.id"
-        :class="{ 'mt-4': index > 0 }"
+      v-for="(field, index) in mappedFields"
+      :key="field.id"
+      :class="{ 'mt-4': index > 0 }"
     >
       <Component
-          :is="field.component"
-          :key="field.name + '-' + currentVariation"
-          :model-value="getFieldValue(field.name)"
-          :field="field"
-          :label="field.label || undefined"
-          :no-label="noLabel"
-          :show-name="showName"
-          :disable="disable"
-          :readonly="readonly"
-          @update:model-value="onInput(field.name, $event)"
+        :is="field.component"
+        :key="field.name + '-' + currentVariation"
+        :model-value="getFieldValue(field.name)"
+        :field="field"
+        :label="field.label || undefined"
+        :no-label="noLabel"
+        :show-name="showName"
+        :disable="disable"
+        :readonly="readonly"
+        @update:model-value="onInput(field.name, $event)"
       />
     </div>
     <ConfirmDialog
-        v-if="variationToEdit !== false"
-        title="Change variation name"
-        @confirm="onChangeVariationName"
-        @close="variationToEdit = false"
+      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"
+        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 = ''"
+      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 { PencilIcon as EditIcon } from "@heroicons/vue/solid";
+import { ExclamationCircleIcon as MissingIcon, PencilIcon as EditIcon } from "@heroicons/vue/solid";
 import { computed, ref } from "vue";
 import { FlashMessages, incrementName, replace } from "../../../helpers";
 import { TrashIcon as RemoveIcon } from "../../../svg";
@@ -154,9 +174,9 @@ const variationToEdit = ref(false);
 const variationToDelete = ref("");
 const canAddVariation = computed(() => props.canModifyVariations && !props.readonly && !props.disable && variationNames.value.length < props.form.variations);
 
-function getFieldResponse(name) {
+function getFieldResponse(name, variation) {
   if (!props.values) return undefined;
-  return props.values.find((v) => v.variation === currentVariation.value && v.name === name);
+  return props.values.find((v) => v.variation === (variation !== undefined ? variation : currentVariation.value) && v.name === name);
 }
 function getFieldValue(name) {
   return getFieldResponse(name)?.value;
@@ -224,4 +244,19 @@ function onRemoveVariation(name) {
   }
   variationToDelete.value = "";
 }
+
+function isVariationFormComplete(variation) {
+  const requiredGroups = {};
+  return props.form.fields.filter(r => r.required || r.required_group).every((field) => {
+    const fieldResponse = getFieldResponse(field.name, variation);
+    const hasValue = !!fieldResponse && fieldResponse.value !== null;
+    if (field.required_group) {
+      // This required group has already been satisfied
+      if (requiredGroups[field.required_group]) return true;
+      return requiredGroups[field.required_group] = hasValue;
+    } else {
+      return hasValue;
+    }
+  });
+}
 </script>

package/src/components/Utility/Tabs/IndicatorTab.vue

@@ -1,20 +1,22 @@
 <template>
   <QTab
-      :name="name"
-      class="w-full"
-      content-class="w-full"
+    :name="name"
+    class="w-full"
+    content-class="w-full"
   >
     <div class="flex items-center w-full">
-      <div class="flex-grow text-sm">{{ label }}</div>
+      <div class="flex-grow text-sm">
+        {{ label }}
+      </div>
       <div>
         <OverdueIcon
-            v-if="overdue"
-            class="w-5 ml-2"
-            :class="isActive ? 'text-white' : 'text-red-400'"
+          v-if="overdue"
+          class="w-5 ml-2"
+          :class="isActive ? 'text-white' : 'text-red-400'"
         />
         <WarningIcon
-            v-else-if="warning"
-            class="text-yellow-600 w-5"
+          v-else-if="warning"
+          class="text-yellow-600 w-5"
         />
       </div>
     </div>