@necrolab/dashboard 0.5.15 → 0.5.17

package/src/components/Tasks/CreateTaskTM.vue

@@ -8,7 +8,7 @@
         </template>
 
         <!-- Task Form -->
-        <div class="grid-responsive-1-2 gap-responsive mb-4 mt-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4 mt-4">
             <!-- Event ID -->
             <FormField label="Event ID" :icon="StadiumIcon" required>
                 <input
@@ -43,30 +43,12 @@
             </FormField>
 
             <!-- Task Amount -->
-            <div class="input-wrapper">
-                <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">
-                        <button @click="task.taskQuantity++">
-                            <UpIcon />
-                        </button>
-                        <button @click="if (task.taskQuantity > 1) task.taskQuantity--;">
-                            <DownIcon />
-                        </button>
-                    </div>
-                </div>
-            </div>
+            <FormField label="Amount" :icon="HashIcon" incrementer @increment="task.taskQuantity++" @decrement="task.taskQuantity > 1 && task.taskQuantity--">
+                <input placeholder="20" min="1" type="number" pattern="\d*" v-model="task.taskQuantity" />
+            </FormField>
 
             <!-- Profile Tag(s)  -->
-            <div class="input-wrapper">
-                <label class="label-override mb-2">
-                    Profile Tag(s)
-                    <TagIcon />
-                </label>
+            <FormField label="Profile Tag(s)" :icon="TagIcon" noWrapper>
                 <MultiDropdown
                     class="w-full will-change-auto"
                     :onSelect="(v) => (task.profileTags = v)"
@@ -76,7 +58,7 @@
                             return { label: opt, value: opt };
                         })
                     " />
-            </div>
+            </FormField>
 
             <!-- CL Origin -->
             <FormField v-if="isEU(ui.currentCountry.siteId)" label="CL Origin" :icon="AwardIcon">
@@ -84,11 +66,7 @@
             </FormField>
 
             <!-- Account Tag  -->
-            <div class="input-wrapper">
-                <label class="label-override mb-2">
-                    Account Tag
-                    <ScannerIcon />
-                </label>
+            <FormField label="Account Tag" :icon="ScannerIcon" noWrapper>
                 <Dropdown
                     :onClick="(f) => (task.accountTag = f)"
                     default="Default tag"
@@ -97,7 +75,7 @@
                     :allowDefault="false"
                     :capitalize="true"
                     class="dropdown w-full" />
-            </div>
+            </FormField>
 
             <!-- Start Offset -->
             <FormField label="Start Offset (Minutes)" :icon="ShieldIcon" incrementer @increment="task.startOffset = (task.startOffset || 0) + 1" @decrement="task.startOffset > 0 && task.startOffset--">
@@ -111,150 +89,37 @@
         </div>
         <div class="mb-3 border border-dark-650" />
         <!-- Task Switches -->
-        <div v-if="!isEU(ui.currentCountry.siteId)" class="task-switches grid grid-cols-3 justify-between gap-y-1">
-            <div class="switch-wrapper mb-2 flex flex-col">
-                <h4 class="text-responsive-sm">
-                    Aged
-                    <span class="hidden xs:block">Account</span>
-                    <SandclockIcon />
-                </h4>
-                <Switch class="mx-auto" v-model="task.agedAccount" />
-            </div>
-            <div class="switch-wrapper flex flex-col">
-                <h4>
-                    Manual
-                    <HandIcon />
-                </h4>
-                <Switch class="mx-auto" v-model="task.manual" />
-            </div>
-            <div class="switch-wrapper flex flex-col">
-                <h4>
-                    <span class="hidden xs:block">Do Not Pay</span>
-                    <span class="block xs:hidden">DNP</span>
-                    <SavingsIcon />
-                </h4>
-                <Switch class="mx-auto" v-model="task.doNotPay" />
-            </div>
-            <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 />
-                </h4>
-                <Switch class="mx-auto" v-model="task.quickQueue" />
-            </div>
-            <div class="switch-wrapper flex flex-col">
-                <h4>
-                    <span class="hidden xs:block">Login Later</span>
-                    <span class="block xs:hidden">Login Lat.</span>
-
-                    <GroupIcon />
-                </h4>
-                <Switch class="mx-auto" v-model="task.loginAfterCart" />
-            </div>
-            <div class="switch-wrapper flex flex-col">
-                <h4>
-                    <span class="hidden xs:block">Smart Timer</span>
-                    <span class="block xs:hidden">Timer</span>
-                    <TimerIcon />
-                </h4>
-                <Switch class="mx-auto" v-model="task.smartTimer" />
-            </div>
-            <div class="switch-wrapper flex flex-col">
-                <h4>
-                    <span class="hidden xs:block">Supports</span>
-                    OTP
-                    <MailIcon class="h-[17px] scale-90" />
-                </h4>
-                <Switch class="mx-auto" v-model="task.otpAccount" />
-            </div>
-            <div class="switch-wrapper flex flex-col">
-                <h4>
-                    Presale
-                    <span class="hidden xs:block">Queue</span>
-                    <AwardIcon class="scale-90" />
-                </h4>
-                <Switch class="mx-auto" v-model="task.presaleMode" />
-            </div>
-            <div class="switch-wrapper flex flex-col">
-                <h4>
-                    Strict
-                    <span class="hidden xs:block">Presale</span>
-                    <AwardIcon class="scale-90" />
-                </h4>
-                <Switch class="mx-auto" v-model="task.presaleStrict" />
-            </div>
+        <div v-if="!isEU(ui.currentCountry.siteId)" class="grid grid-cols-3 justify-between gap-y-1">
+            <TaskToggle class="mb-2" :icon="SandclockIcon" label="Aged Account" responsive-label="Aged" v-model="task.agedAccount" icon-class="" />
+            <TaskToggle :icon="HandIcon" label="Manual" v-model="task.manual" icon-class="" />
+            <TaskToggle :icon="SavingsIcon" label="Do Not Pay" responsive-label="DNP" v-model="task.doNotPay" icon-class="" />
+            <TaskToggle :icon="SkiIcon" label="Quick Queue" responsive-label="Quick Q." v-model="task.quickQueue" icon-class="" />
+            <TaskToggle :icon="GroupIcon" label="Login Later" responsive-label="Login Lat." v-model="task.loginAfterCart" icon-class="" />
+            <TaskToggle :icon="TimerIcon" label="Smart Timer" responsive-label="Timer" v-model="task.smartTimer" icon-class="" />
+            <TaskToggle :icon="MailIcon" label="Supports OTP" responsive-label="OTP" v-model="task.otpAccount" icon-class="h-4.25 scale-90" />
+            <TaskToggle :icon="AwardIcon" label="Presale Queue" responsive-label="Presale" v-model="task.presaleMode" />
+            <TaskToggle :icon="AwardIcon" label="Strict Presale" responsive-label="Strict" v-model="task.presaleStrict" />
         </div>
         <div v-if="isEU(ui.currentCountry.siteId)">
-            <div class="task-switches mb-4 grid grid-cols-4 justify-between gap-y-4">
-                <div class="switch-wrapper flex flex-col">
-                    <h4 class="text-xs">
-                        Manual
-                        <HandIcon class="scale-90" />
-                    </h4>
-                    <Switch class="mx-auto" v-model="task.manual" />
-                </div>
-                <div class="switch-wrapper flex flex-col">
-                    <h4>
-                        <span class="hidden xs:block">Do Not Pay</span>
-                        <span class="block xs:hidden">DNP</span>
-                        <SavingsIcon class="scale-90" />
-                    </h4>
-                    <Switch class="mx-auto" v-model="task.doNotPay" />
-                </div>
-                <div class="switch-wrapper flex flex-col">
-                    <h4>
-                        <span class="hidden xs:block">Smart Timer</span>
-                        <span class="block xs:hidden">Timer</span>
-                        <TimerIcon class="scale-90" />
-                    </h4>
-                    <Switch class="mx-auto" v-model="task.smartTimer" />
-                </div>
-                <div class="switch-wrapper flex flex-col">
-                    <h4>
-                        <span class="hidden xs:block">Login Later</span>
-                        <span class="block xs:hidden">Login Lat.</span>
-                        <GroupIcon class="scale-90" />
-                    </h4>
-                    <Switch class="mx-auto" v-model="task.loginAfterCart" />
-                </div>
+            <div class="mb-4 grid grid-cols-4 justify-between gap-y-4">
+                <TaskToggle :icon="HandIcon" label="Manual" v-model="task.manual" />
+                <TaskToggle :icon="SavingsIcon" label="Do Not Pay" responsive-label="DNP" v-model="task.doNotPay" />
+                <TaskToggle :icon="TimerIcon" label="Smart Timer" responsive-label="Timer" v-model="task.smartTimer" />
+                <TaskToggle :icon="GroupIcon" label="Login Later" responsive-label="Login Lat." v-model="task.loginAfterCart" />
             </div>
 
-            <div class="task-switches grid grid-cols-4 justify-between gap-y-4">
-                <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" />
-                    </h4>
-                    <Switch class="mx-auto" v-model="task.quickQueue" />
-                </div>
-
-                <div class="switch-wrapper flex flex-col">
-                    <h4>
-                        Supports OTP
-                        <MailIcon class="h-[17px] scale-90" />
-                    </h4>
-                    <Switch class="mx-auto" v-model="task.otpAccount" />
-                </div>
-                <div class="switch-wrapper flex flex-col">
-                    <h4>
-                        Aged
-                        <span class="hidden xs:block">Account</span>
-                        <SandclockIcon />
-                    </h4>
-                    <Switch class="mx-auto" v-model="task.agedAccount" />
-                </div>
+            <div class="grid grid-cols-4 justify-between gap-y-4">
+                <TaskToggle :icon="SkiIcon" label="Quick Queue" responsive-label="Quick Q." v-model="task.quickQueue" />
+                <TaskToggle :icon="MailIcon" label="Supports OTP" v-model="task.otpAccount" icon-class="h-4.25 scale-90" />
+                <TaskToggle :icon="SandclockIcon" label="Aged Account" responsive-label="Aged" v-model="task.agedAccount" icon-class="" />
             </div>
         </div>
 
         <!-- Task prefab -->
         <div class="my-3 border border-dark-650" />
-        <button
-            class="button-default ml-auto mt-4 bg-dark-400"
-            @click="createTask">
+        <button class="btn-modal ml-auto mt-4 w-36" @click="createTask">
             Create
-            <EditIcon />
+            <EditIcon class="ml-2" />
         </button>
     </Modal>
 </template>
@@ -263,7 +128,7 @@
 import { ref, watch } from "vue";
 import Modal from "@/components/ui/Modal.vue";
 import FormField from "@/components/ui/FormField.vue";
-import Switch from "@/components/ui/controls/atomic/Switch.vue";
+import TaskToggle from "@/components/ui/TaskToggle.vue";
 import {
     MailIcon,
     CameraIcon,
@@ -279,17 +144,16 @@ import {
     TimerIcon,
     SavingsIcon,
     EditIcon,
-    UpIcon,
-    DownIcon,
     SandclockIcon,
-    CartIcon,
     PencilIcon
 } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
 import { countries } from "@/stores/countries";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
 import MultiDropdown from "@/components/ui/controls/atomic/MultiDropdown.vue";
-import { isEU, firstUpper, parseTmEventUrl, removeDuplicates } from "@/stores/utils";
+import { firstUpper } from "@/libs/utils/string";
+import { isEU, parseTmEventUrl } from "@/libs/utils/eventUrl";
+import { removeDuplicates } from "@/libs/utils/array";
 
 const ui = useUIStore();
 
@@ -388,23 +252,3 @@ watch(
 );
 </script>
 
-<style lang="scss" scoped>
-.label-override {
-    @apply flex items-center;
-    color: #e1e1e4 !important;
-
-    svg {
-        @apply ml-2;
-
-        path {
-            fill: #e1e1e4 !important;
-        }
-    }
-}
-
-.switch-wrapper {
-    svg path {
-        fill: oklch(0.65 0 0) !important;
-    }
-}
-</style>

package/src/components/Tasks/EventDetailRow.vue

@@ -0,0 +1,21 @@
+<template>
+    <div v-if="content" class="flex items-start gap-1 text-3xs leading-tight-sm min-h-2.75">
+        <svg class="icon-sm" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <slot name="icon"></slot>
+        </svg>
+        <span :class="['text-light-500 text-3xs leading-tight-sm', truncate ? 'truncate' : '']">{{ content }}</span>
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    content: {
+        type: String,
+        required: true
+    },
+    truncate: {
+        type: Boolean,
+        default: false
+    }
+});
+</script>

package/src/components/Tasks/MassEdit.vue

@@ -2,8 +2,8 @@
     <Modal>
         <template #header> Mass Edit Presale Code <i class="fa fa-edit ml-3 mt-1"></i> </template>
         <!-- Event ID -->
-        <div class="input-wrapper mt-7 mb-4">
-            <label class="label-override mb-2">Event ID <StadiumIcon /></label>
+        <div class="mt-7 mb-4">
+            <label class="flex mb-2 label-override">Event ID <StadiumIcon /></label>
             <div class="input-default required">
                 <input
                     :placeholder="!isEU(ui.currentCountry.siteId) ? '102PDA9125510GYU' : '529171'"
@@ -12,33 +12,23 @@
             </div>
         </div>
         <!-- Presale Code -->
-        <div class="input-wrapper mb-8">
-            <label class="label-override mb-2">Presale Code <BagIcon /></label>
+        <div class="mb-8">
+            <label class="flex mb-2 label-override">Presale Code <BagIcon /></label>
             <div class="input-default required">
                 <input placeholder="presale code" v-model="code" />
             </div>
         </div>
-        <button
-            class="button-default bg-dark-400 w-48 text-xs flex items-center justify-center gap-x-2 ml-auto border border-light-300 hover:border-light-400"
-            @click="done()"
-        >
+        <button class="btn-modal ml-auto" @click="done()">
             Edit <EditIcon />
         </button>
     </Modal>
 </template>
-<style lang="scss" scoped>
-.input-wrapper {
-    label {
-        @apply flex;
-    }
-}
-</style>
 <script setup>
 import Modal from "@/components/ui/Modal.vue";
 import { StadiumIcon, BagIcon, EditIcon } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
 import { ref } from "vue";
-import { isEU } from "@/stores/utils";
+import { isEU } from "@/libs/utils/eventUrl";
 
 const ui = useUIStore();
 const code = ref("");