@necrolab/dashboard 0.4.220 → 0.5.1

package/src/components/Tasks/CreateTaskAXS.vue

@@ -1,76 +1,61 @@
 <template>
-    <Modal class="overflow-y-scroll max-w-screen">
+    <Modal class="max-w-screen overflow-y-scroll">
         <template #header>
             Create Task
             <img src="@/assets/img/pencil.svg" class="ml-4" />
         </template>
 
-        <!-- <div v-if="displayConfigSelector" class="w-3/12 input-wrapper z-inf2 mt-4">
-            <div class="dropdown input-default p-2">
-                <span class="flex justify-between items-center z-inf2 text-white">
-                    <span class="text-sm">Load config</span>
-                    <DownIcon class="absolute right-5" />
-                </span>
-                <div class="dropdown-content z-inf2">
-                    <div
-                        v-bind:key="opt.name"
-                        class="py-1 my-1 cursor-pointer"
-                        v-for="opt in addTaskConfigs"
-                        @click="useConfig(opt.config)"
-                    >
-                        <p>{{ opt.name }}</p>
-                    </div>
-                </div>
-            </div>
-        </div> -->
-
         <!-- Task Form -->
-        <div class="grid grid-cols-2 gap-x-4 gap-y-4 mt-4 mb-4">
+        <div class="form-grid mb-4 mt-4">
             <!-- Event ID -->
             <div class="input-wrapper">
-                <label class="label-override mb-2"
-                    >Event ID
+                <label class="label-override mb-2">
+                    Event ID
                     <StadiumIcon />
                 </label>
-                <div class="input-default">
-                    <input placeholder="827474" v-model="task.eventId" />
-                    <span class="text-red-400 my-auto mr-2 mt-3">* </span>
+                <div class="input-default required">
+                    <input placeholder="827474" v-model="task.eventId" required />
                 </div>
             </div>
             <!-- Email -->
             <div class="input-wrapper">
-                <label class="label-override mb-2"
-                    >Email
+                <label class="label-override mb-2">
+                    Email
                     <MailIcon />
                 </label>
                 <div class="input-default">
-                    <input placeholder="Email" v-model="task.email" />
+                    <input
+                        placeholder="Email"
+                        v-model="task.email"
+                        autocomplete="off"
+                        data-form-type="other"
+                        name="axs_email_not_for_auth" />
                 </div>
             </div>
             <!-- Proxy -->
             <div class="input-wrapper">
-                <label class="label-override mb-2"
-                    >Proxy
+                <label class="label-override mb-2">
+                    Proxy
                     <CameraIcon />
                 </label>
                 <div class="input-default">
-                    <input placeholder="Proxy" v-model="task.proxy" />
+                    <input placeholder="Proxy" v-model="task.proxy" autocomplete="off" />
                 </div>
             </div>
             <!-- Presale Code -->
             <div class="input-wrapper">
-                <label class="label-override mb-2"
-                    >Presale Code
+                <label class="label-override mb-2">
+                    Presale Code
                     <AwardIcon />
                 </label>
                 <div class="input-default">
-                    <input placeholder="Code" v-model="task.presaleCode" maxlength="15" />
+                    <input placeholder="Code" v-model="task.presaleCode" maxlength="15" autocomplete="off" />
                 </div>
             </div>
             <!-- Ticket Quantity -->
             <div class="input-wrapper">
-                <label class="label-override mb-2"
-                    >Ticket Quantity
+                <label class="label-override mb-2">
+                    Ticket Quantity
                     <BagIcon />
                 </label>
                 <div class="input-default">
@@ -87,7 +72,10 @@
             </div>
             <!-- Ticket Quantity -->
             <div class="input-wrapper">
-                <label class="label-override mb-2">Amount <span class="ml-2" style="height: 18px">#</span></label>
+                <label class="label-override mb-2">
+                    Amount
+                    <span class="ml-2 h-[18px]">#</span>
+                </label>
                 <div class="input-default">
                     <input placeholder="20" min="1" type="number" pattern="\d*" v-model="task.taskQuantity" />
                     <div class="input-incrementer">
@@ -102,27 +90,26 @@
             </div>
 
             <!-- Profile Tag(s)  -->
-            <div class="input-wrapper" style="z-index: 50 !important">
-                <label class="label-override mb-2"
-                    >Profile Tag(s)
+            <div class="input-wrapper relative-positioned z-tooltip">
+                <label class="label-override mb-2">
+                    Profile Tag(s)
                     <TagIcon />
                 </label>
                 <MultiDropdown
-                    class="w-full will-change-auto input-default"
+                    class="input-default w-full will-change-auto"
                     :onSelect="(v) => (task.profileTags = v)"
                     default="Any"
                     :options="
                         profileTagsOptions.map((opt) => {
                             return { label: opt, value: opt };
                         })
-                    "
-                />
+                    " />
             </div>
 
             <!-- Account Tag  -->
-            <div class="input-wrapper">
-                <label class="label-override mb-2"
-                    >Account Tag
+            <div class="input-wrapper relative-positioned z-dropdown">
+                <label class="label-override mb-2">
+                    Account Tag
                     <ScannerIcon />
                 </label>
 
@@ -133,20 +120,22 @@
                     :options="accountTagOptions"
                     :allowDefault="false"
                     :capitalize="true"
-                    class="input-default dropdown p-4 w-full"
-                />
+                    class="input-default dropdown w-full p-4" />
             </div>
 
             <div class="input-wrapper">
-                <label class="label-override mb-2">Start Offset (Minutes)<ShieldIcon /></label>
+                <label class="label-override mb-2">
+                    Start Offset (Minutes)
+                    <ShieldIcon />
+                </label>
                 <div class="input-default">
                     <input placeholder="120" type="number" pattern="\d*" v-model="task.startOffset" />
                 </div>
             </div>
 
             <div class="input-wrapper">
-                <label class="label-override mb-2"
-                    >Promo ID
+                <label class="label-override mb-2">
+                    Promo ID
                     <AwardIcon />
                 </label>
                 <div class="input-default">
@@ -154,9 +143,9 @@
                 </div>
             </div>
         </div>
-        <div class="border border-light-300 mb-3" />
+        <div class="mb-3 border border-dark-650" />
         <!-- Task Switches -->
-        <div class="grid grid-cols-4 gap-y-4 mb-4 justify-between task-switches">
+        <div class="task-switches mb-4 grid grid-cols-4 justify-between gap-y-4">
             <div class="switch-wrapper flex flex-col">
                 <h4>
                     <span class="hidden xs:block">Do Not Pay</span>
@@ -176,24 +165,25 @@
             <div class="switch-wrapper flex flex-col">
                 <h4>
                     <span class="hidden xs:block">Quick Queue</span>
-                    <span class="block xs:hidden">Quick Q.</span> <SkiIcon class="scale-90" />
+                    <span class="block xs:hidden">Quick Q.</span>
+                    <SkiIcon class="scale-90" />
                 </h4>
                 <Switch class="mx-auto" v-model="task.quickQueue" />
             </div>
             <div class="switch-wrapper flex flex-col">
                 <h4>
-                    <span class="hidden xs:block">Manual</span>
+                    Manual
+                    <HandIcon />
                 </h4>
                 <Switch class="mx-auto" v-model="task.manual" />
             </div>
         </div>
 
         <!-- Task prefab -->
-        <div class="border border-light-300 my-3" />
+        <div class="my-3 border border-dark-650" />
         <button
-            class="button-default hover:opacity-70 active:opacity-50 bg-dark-400 w-48 text-xs mx-auto flex items-center justify-center gap-x-2"
-            @click="createTask"
-        >
+            class="button-default ml-auto mt-4 bg-dark-400"
+            @click="createTask">
             Create
             <EditIcon />
         </button>
@@ -202,6 +192,7 @@
 
 <script setup>
 import { ref, watch } from "vue";
+import { countries } from "@/stores/countries";
 import Modal from "@/components/ui/Modal.vue";
 import Switch from "@/components/ui/controls/atomic/Switch.vue";
 import {
@@ -227,15 +218,16 @@ import {
 import { useUIStore } from "@/stores/ui";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
 import MultiDropdown from "@/components/ui/controls/atomic/MultiDropdown.vue";
-import { isEU, removeDuplicates } from "@/stores/utils";
+import { firstUpper, parseAxsEventUrl, removeDuplicates } from "@/stores/utils";
 
 const ui = useUIStore();
 
-const accountTagOptions = ref(ui.profile.accountTags);
+const accountTagOptions = ref(ui.profile.tags);
 const defaultTags = ["Amex", "Visa", "Master"];
 
-const profileTagsOptions = ref(removeDuplicates(["Any", ...defaultTags, ...ui.profile.profileTags]));
-
+const profileTagsOptions = ref(
+    removeDuplicates(["Any", ...defaultTags, ...ui.profile.profileTags.map((x) => firstUpper(x))])
+);
 const baseTask = ref({
     selected: false,
     taskId: "",
@@ -261,7 +253,7 @@ const baseTask = ref({
 const task = ref(ui.modalData[`task_${ui.currentCountry.siteId}`] || baseTask);
 
 function createTask() {
-    ui.logger.Info("Created new task", task.value);
+    ui.logger.Info("Created new task", task.value.taskId);
     const eventIds = task.value.eventId.split(",").map((t) => t.trim());
     const presaleCodes = task.value.presaleCode ? task.value.presaleCode.split(",").map((t) => t.trim()) : [undefined];
     eventIds.forEach((eventId) => {
@@ -284,12 +276,28 @@ watch(
     }
 );
 
-watch(() => task.value, (ui.modalData[`task_${ui.currentCountry.siteId}`] = task.value));
+watch(
+    () => task.value,
+    () => (ui.modalData[`task_${ui.currentCountry.siteId}`] = task.value),
+    { deep: true }
+);
 
 watch(
     () => task.value.eventId,
     (url) => {
         ui.logger.Info("URL changed", url);
+        if (!url.includes("https://")) return;
+        try {
+            const parsed = parseAxsEventUrl(url);
+            const country = countries.AXS.find((c) => c.siteId === parsed.siteId);
+            if (country) ui.setCurrentCountry(country, false, ui.currentModule);
+
+            task.value.eventId = parsed.eventId;
+            debugger;
+            if (parsed.promoId) task.value.promoId = parsed.promoId;
+        } catch (ex) {
+            ui.logger.Error("Could not parse url (2)", ex);
+        }
     }
 );
 
@@ -299,7 +307,7 @@ watch(
 <style lang="scss" scoped>
 .label-override {
     @apply flex;
-    color: #6e7084 !important;
+    color: #e1e1e4 !important;
 
     img {
         @apply ml-2;
@@ -308,8 +316,8 @@ watch(
 
 .task-switches {
     h4 {
-        color: #6e7084;
-        @apply text-xs text-center flex items-center gap-x-2 mx-auto;
+        color: #e1e1e4;
+        @apply mx-auto flex items-center gap-x-2 text-center text-xs;
     }
 
     .switch-wrapper {
@@ -325,13 +333,13 @@ watch(
     }
 }
 </style>
-<style lang="scss">
+<style lang="scss" scoped>
 .label-override {
     svg {
         @apply ml-2;
 
         path {
-            fill: #6e7084 !important;
+            fill: #e1e1e4 !important;
         }
     }
     @apply flex items-center;
@@ -340,7 +348,7 @@ watch(
 .switch-wrapper {
     svg {
         path {
-            fill: #6e7084 !important;
+            fill: oklch(0.65 0 0) !important;
         }
     }
 }