@necrolab/dashboard 0.4.220 → 0.5.1

package/src/components/Tasks/Task.vue

@@ -1,244 +1,465 @@
 <template>
-    <Row
-        class="relative text-white"
-        @click="ui.setOpenContextMenu('')"
-        @click.right.prevent="ui.setOpenContextMenu('')"
-    >
-        <div class="block md:hidden absolute left-1 top-0">
-            <h4 class="text-xs task-id text-white">
-                {{ props.task.taskId }}
-            </h4>
-        </div>
-        <div class="col-span-1 lg:col-span-2 flex">
+    <Row class="relative grid-cols-10 gap-2 text-white lg:grid-cols-12" @click="ui.setOpenContextMenu('')">
+        <div class="col-span-1 flex items-center justify-start lg:col-span-2">
             <Checkbox
-                class="ml-0 mr-4"
+                class="ml-2 mr-4 flex-shrink-0"
                 :toggled="props.task.selected"
-                @valueUpdate="ui.toggleTaskSelected(props.task.taskId)"
-            />
-            <h4 class="task-id-alt mx-auto hidden md:block text-white" @click="copy(props.task.eventId)">
+                @valueUpdate="ui.toggleTaskSelected(props.task.taskId)" />
+            <h4
+                class="task-event-id mx-auto hidden cursor-pointer text-white hover:text-light-300 lg:block"
+                @click="copy(props.task.eventId)">
                 {{ props.task.eventId }}
             </h4>
         </div>
-        <div class="col-span-2 hidden md:block">
-            <h4 class="text-white">{{ props.task.quantity }}</h4>
-        </div>
-        <div class="col-span-2">
-            <h4 class="text-white">
+        <div class="col-span-2 overflow-hidden">
+            <h4 class="text-white text-xs leading-tight">
                 <span v-if="!props.task.reservedTicketsList">-</span>
-                <div v-else>
-                    <div v-for="l in props.task.reservedTicketsList.split(' | ')" :key="l">
-                        <span v-if="!!l.trim()">{{ l.trim() }}</span>
+                <div v-else class="overflow-hidden">
+                    <div v-for="(l, index) in props.task.reservedTicketsList.split('\n')" :key="l" class="truncate">
+                        <span
+                            v-if="!!l.trim()"
+                            class="text-xs"
+                            :class="{ 'text-green-400 font-bold': isTotalPrice(l, index, props.task.reservedTicketsList.split('\n')) }"
+                        >{{ l.trim() }}</span>
                     </div>
                 </div>
                 <span
-                    class="ml-1 font-bold"
-                    :class="[
-                        props.task._timeLeftString == '00:00' || props.task._timeLeftString == 'No Cartholds'
-                            ? 'text-red-400'
-                            : ''
-                    ]"
-                    >{{ props.task._timeLeftString !== "00:00" ? props.task._timeLeftString : "Expired" }}</span
-                >
+                    class="block mt-1 font-bold text-xs"
+                    :class="{
+                        'text-red-400':
+                            props.task._timeLeftString === '00:00' || props.task._timeLeftString === 'No Cartholds'
+                    }">
+                    {{ props.task._timeLeftString !== "00:00" ? props.task._timeLeftString : "Expired" }}
+                </span>
             </h4>
         </div>
-        <div class="col-span-6 md:col-span-4 lg:col-span-3 text-center justify-center">
-            <div class="flex md:gap-x-2 rounded-2xl w-fit shadow-3xl mx-auto items-center justify-center bg-dark-600">
-                <!-- Status circle -->
+        <div class="col-span-5 justify-center text-center md:col-span-4 lg:col-span-5">
+            <div class="status-container">
                 <div
-                    class="w-2 h-2 rounded-full mx-1 md:ml-3 ml-2"
-                    :class="[
+                    class="status-indicator"
+                    :class="
                         colorToClass(
                             props.task.active || props.task.status.toLowerCase() === 'idle'
                                 ? props.task.statusColor
                                 : 'red'
                         )
-                    ]"
-                ></div>
-                <!-- Actual status -->
-                <span class="font-bold text-sm p-1 md:mr-3 mr-2 truncate uppercase">{{
-                    truncate(props.task.status, statusTruncateLength)
-                }}</span>
+                    "></div>
+                <span class="status-text">{{ props.task.status }}</span>
             </div>
         </div>
-        <div class="col-span-2 flex">
-            <ul class="task-buttons bg-dark-600 px-1 lg:px-2 rounded-full shadow-3xl items-center">
+        <div class="col-span-2 flex lg:col-span-3 overflow-visible">
+            <ul class="task-buttons overflow-visible">
                 <li>
-                    <button class="p-1" v-if="task.active" @click="ui.stopTask(task.taskId)">
+                    <button v-if="task.active" @click="ui.stopTask(task.taskId)">
                         <PauseIcon />
                     </button>
-                    <button class="p-1" v-else @click="ui.startTask(task.taskId)">
+                    <button v-else @click="ui.startTask(task.taskId)">
                         <PlayIcon />
                     </button>
                 </li>
-                <li v-if="task.status?.toLowerCase() === 'waiting' && props.task._timeLeftString !== '00:00'">
-                    <button class="p-1" @click="ui.continueTask(task.taskId, 'autocheckout')">
+                <li v-if="task.status?.toLowerCase() == 'waiting' && props.task._timeLeftString !== '00:00'">
+                    <button @click="ui.continueTask(task.taskId, 'autocheckout')">
                         <BagWhiteIcon />
                     </button>
                 </li>
-                <li v-if="task.status?.toLowerCase() === 'waiting'">
-                    <button class="p-1" @click="ui.continueTask(task.taskId, 'change_reservation')">
+                <li v-if="task.status?.toLowerCase() == 'waiting'">
+                    <button @click="ui.continueTask(task.taskId, 'change_reservation')">
                         <EditIcon />
                     </button>
                 </li>
                 <li>
-                    <button class="p-1" @click="ui.deleteTask(task.taskId)">
+                    <button @click="ui.deleteTask(task.taskId)">
                         <TrashIcon />
                     </button>
                 </li>
-                <li
-                    class="text-xl -mt-2"
-                    @click.right.prevent="window.setTimeout(() => ui.setOpenContextMenu(task.taskId), 10)"
-                >
-                    <!-- eslint-disable-next-line vue/no-mutating-props -->
-                    <button class="p-1 mt-1" @click="props.task.isExpanded = !props.task.isExpanded">
-                        <span>{{ props.task.isExpanded ? "-" : "+" }}</span>
+                <li @contextmenu.prevent="handleRightClick">
+                    <button @click="openViewTaskModal">
+                        <EyeIcon />
                     </button>
                 </li>
             </ul>
         </div>
-        <div class="hidden md:block col-span-1 absolute right-5 top-4 lg:flex items-center justify-center">
-            <h4 class="text-center text-xs task-id text-white">
+        <div class="absolute right-5 top-4 col-span-1 hidden items-center justify-center md:block lg:flex">
+            <h4 class="task-id text-center text-xs text-white">
                 {{ props.task.taskId }}
             </h4>
         </div>
+
+        <!-- Context menu -->
         <transition name="fade">
             <div
-                class="col-span-12 flex flex-wrap gap-x-4 gap-y-4 lg:gap-x-10 pt-8 pb-2 xl:justify-around will-change-auto"
-                v-if="props.task.isExpanded"
-            >
-                <!-- <div class="flex gap-x-2 " @click="copy(props.task.eventId)">
-          <StadiumWhiteIcon />
-          <h4 class="text-white">{{ props.task.eventId }}</h4>
-        </div>
-        <div class="flex gap-x-2 md:hidden">
-          <BagWhiteIcon />
-          <h4 class="text-white">{{ props.task.quantity }}</h4>
-        </div> -->
-
-                <!-- Details -->
-                <TaskLabel
-                    class="md:hidden"
-                    image="stadium_w"
-                    :text="props.task.eventId"
-                    @click="copy(props.task.eventId)"
-                />
-
-                <TaskLabel class="md:hidden" image="bag_w" :text="props.task.quantity" />
-                <TaskLabel
-                    v-if="props.task.email"
-                    image="mail"
-                    :text="props.task.email"
-                    @click="copy(props.task.email)"
-                />
-                <TaskLabel
-                    v-if="props.task.password"
-                    image="key"
-                    :text="props.task.password"
-                    @click="copy(props.task.password)"
-                />
-                <TaskLabel v-if="!props.task.email && !props.task.password" image="mail" text="No account chosen yet" />
-                <TaskLabel v-if="props.task.profileName" image="profile" :text="props.task.profileName" />
-                <TaskLabel image="camera" :text="props.task.proxy" @click="copy(props.task.proxy)" />
-                <TaskLabel image="timer" :text="props.task.smartTimer ? 'On' : 'Off'" />
-                <TaskLabel image="groups" :text="props.task.loginAfterCart ? 'On' : 'Off'" />
-                <TaskLabel image="hand" :text="props.task.manual ? 'On' : 'Off'" />
-                <TaskLabel image="savings" :text="props.task.doNotPay ? 'On' : 'Off'" />
-                <TaskLabel image="loyalty" :text="props.task.presaleMode ? 'On' : 'Off'" />
-                <TaskLabel image="ski" :text="props.task.quickQueue ? 'On' : 'Off'" />
-                <TaskLabel image="scanner" :text="props.task.accountTag" />
-                <TaskLabel image="sell" :text="props.task.profileTags.join(', ')" />
-                <TaskLabel
-                    v-if="props.task.presaleCode"
-                    @click="copy(props.task.presaleCode)"
-                    image="pencil"
-                    :text="props.task.presaleCode"
-                />
-
-                <TaskLabel v-if="props.task.eventName" image="stadium_w" :text="props.task.eventName" />
-                <TaskLabel v-if="props.task.eventVenue" image="stadium_w" :text="props.task.eventVenue" />
-                <TaskLabel
-                    v-if="props.task.eventLocalDate"
-                    image="stadium_w"
-                    :text="formatDate(props.task.eventLocalDate)"
-                />
-                <TaskLabel image="sandclock" :text="props.task.agedAccount ? 'On' : 'Off'" />
+                v-if="ui.openContextMenu === task.taskId"
+                ref="contextMenuRef"
+                class="w-42 context-menu z-max fixed grid grid-cols-1 gap-1 rounded-lg border border-dark-650 bg-dark-500 p-1 text-white shadow-xl"
+                :style="contextMenuPosition">
+                <button class="btn-primary" @click="openInNewTab(`${ui.currentCountry.url}/event/${task.eventId}`)">
+                    Open Event
+                </button>
+                <button v-if="task.openerLink" class="btn-primary" @click="openInBrowser(false)">
+                    Open in browser (proxy)
+                </button>
+                <button v-if="task.openerLink" class="btn-primary" @click="openInBrowser(true)">
+                    Open in browser (debug)
+                </button>
             </div>
         </transition>
-
-        <!-- Context menu -->
-
-        <div class="absolute -bottom-1.5 right-5">
-            <transition name="fade">
-                <div
-                    v-if="ui.openContextMenu === task.taskId"
-                    class="bg-light-300 text-white w-42 grid grid-cols-1 p-1 gap-1 z-50 rounded-lg shadow-xl relative"
-                >
-                    <!-- <span class="text-light-400">{{ task.taskId }}</span> -->
-                    <button
-                        class="bg-dark-500 smooth-hover p-1 rounded-lg"
-                        @click="openInNewTab(`${ui.currentCountry.url}/event/${task.eventId}`)"
-                    >
-                        Open Event
-                    </button>
-                    <button
-                        v-if="task.openerLink"
-                        class="bg-dark-500 smooth-hover p-1 rounded-lg"
-                        @click="openInBrowser(false)"
-                    >
-                        Open in browser (proxy)
-                    </button>
-                    <button
-                        v-if="task.openerLink"
-                        class="bg-dark-500 smooth-hover p-1 rounded-lg"
-                        @click="openInBrowser(true)"
-                    >
-                        Open in browser (debug)
-                    </button>
-                </div>
-            </transition>
-        </div>
     </Row>
 </template>
 <style lang="scss" scoped>
 h4 {
     @apply text-center;
+    color: oklch(0.90 0 0);
 }
 
-@media (max-width: 1024px) {
-    h4 {
-        font-size: 10px !important;
+.status-container {
+    @apply mx-auto flex w-fit items-center justify-center rounded-lg border border-dark-650 bg-dark-500;
+    padding: 6px 12px;
+    gap: 6px;
+    max-width: 100%;
+    pointer-events: none;
+
+    @media (max-width: 768px) {
+        padding: 4px 8px;
+        gap: 4px;
+    }
+}
+
+.status-text {
+    @apply truncate text-sm font-medium uppercase;
+    color: oklch(0.90 0 0);
+    letter-spacing: 0.025em;
+
+    @media (max-width: 768px) {
+        font-size: 0.65rem;
+        max-width: 140px;
+    }
+}
+
+.task-buttons {
+    @apply mx-auto flex items-center justify-center rounded;
+    background: oklch(0.2046 0 0);
+    border: 2px solid oklch(0.2809 0 0);
+    padding: 2px;
+    gap: 1px;
+    flex-shrink: 0;
+    overflow: visible;
+
+    button {
+        @apply relative flex items-center justify-center rounded border-0 outline-0 transition-all duration-150;
+        background: transparent;
+        width: 22px;
+        height: 22px;
+        color: oklch(0.90 0 0);
+        border-radius: 4px;
+
+        &:hover {
+            background: oklch(0.72 0.15 145 / 0.15);
+            color: oklch(1 0 0);
+        }
+
+        &:active {
+            background: oklch(0.72 0.15 145 / 0.25);
+        }
     }
+
+    svg,
+    img {
+        width: 12px;
+        height: 12px;
+        position: relative;
+        z-index: 1;
+    }
+
+    svg path {
+        fill: currentColor;
+    }
+
+    span {
+        @apply relative z-[1] text-xs font-medium;
+    }
+}
+
+/* Tablet sizing - medium buttons */
+@media (min-width: 768px) and (max-width: 1023px) {
+    .task-buttons {
+        padding: 2px;
+        gap: 1px;
+        border-radius: 6px;
+
+        button {
+            width: 26px;
+            height: 26px;
+            border-radius: 5px;
+        }
+
+        svg,
+        img {
+            width: 14px;
+            height: 14px;
+        }
+
+        span {
+            font-size: 0.75rem;
+        }
+    }
+}
+
+/* Desktop sizing - large buttons */
+@media (min-width: 1024px) {
     .task-buttons {
-        @apply gap-x-3;
+        padding: 3px;
+        gap: 2px;
+        border-radius: 8px;
+
+        button {
+            width: 28px;
+            height: 28px;
+            border-radius: 6px;
+        }
+
+        svg,
+        img {
+            width: 16px;
+            height: 16px;
+        }
+
+        span {
+            font-size: 0.875rem;
+        }
+    }
+}
+
+/* Mobile specific styling - changed from 480px to 640px for earlier transition */
+@media (max-width: 640px) {
+    /* Position adjustment for mobile taskId */
+    .block.md\\:hidden {
+        left: 4rem !important;
+        top: 0.25rem !important;
+        z-index: 1 !important;
     }
+
+    /* Improved button layout for mobile */
+    .task-buttons {
+        padding: 1px;
+        gap: 1px;
+        border-radius: 4px;
+        border: 2px solid oklch(0.2809 0 0) !important;
+        max-width: 100%;
+        min-height: 28px;
+        height: auto;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        background: oklch(0.2046 0 0);
+
+        button {
+            width: 20px;
+            height: 20px;
+            border-radius: 3px;
+            min-width: 20px;
+            border: none !important;
+            flex-shrink: 0;
+            margin: 0.5px;
+            background: transparent;
+
+            &:hover {
+                background: oklch(0.72 0.15 145 / 0.15);
+            }
+
+            &:active {
+                background: oklch(0.72 0.15 145 / 0.25);
+            }
+        }
+
+        svg,
+        img {
+            width: 10px;
+            height: 10px;
+        }
+
+        span {
+            font-size: 0.7rem;
+            line-height: 1;
+        }
+
+        /* Improved list item layout */
+        li {
+            display: flex;
+            margin: 0;
+            padding: 0;
+        }
+    }
+
+    /* Make the actions column more flexible */
+    .col-span-2.lg\\:col-span-3 {
+        min-width: 0;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 2px;
+    }
+
+    /* Compact status container */
+    .status-container {
+        border: none !important;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
+        padding: 2px 4px;
+        font-size: 0.7rem;
+        max-width: 100%;
+    }
+
+    .status-text {
+        font-size: 0.65rem;
+        letter-spacing: 0;
+    }
+
+    /* Reduce row height to accommodate smaller elements */
+    .task-row-container {
+        min-height: 45px !important;
+    }
+}
+
+.task-id {
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    margin: 0;
+    color: oklch(0.65 0 0);
+    background: rgba(46, 47, 52, 0.4);
+    padding: 2px 6px;
+    border-radius: 4px;
+    border: 1px solid oklch(0.26 0 0);
+}
+
+.task-event-id {
+    font-size: 11px;
+    font-weight: 500;
+    text-align: center;
+    color: oklch(0.82 0 0);
+
+    &:hover {
+        color: #ffffff;
+    }
+
+    @media (max-width: 1024px) {
+        font-size: 10px;
+    }
+
+    @media (max-width: 768px) {
+        font-size: 9px;
+    }
+}
+
+/* Responsive task styling */
+@screen lg {
+    h4 {
+        font-size: 10px;
+    }
+
     .task-id {
-        font-size: 6px !important;
+        font-size: 8px;
     }
-    .task-id-alt {
-        font-size: 7px !important;
+
+    .task-event-id {
+        font-size: 10px;
     }
 }
 </style>
+
 <script setup>
+/// <reference path="@/types/index.js" />
+
 import { Row } from "@/components/Table";
-import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon } from "@/components/icons";
+import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon, EyeIcon } from "@/components/icons";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import { useUIStore } from "@/stores/ui";
 import TaskLabel from "@/components/Tasks/TaskLabel.vue";
-import { ref } from "vue";
+import ViewTask from "@/components/Tasks/ViewTask.vue";
+import { computed, ref, onMounted, onUnmounted, nextTick } from "vue";
 
 const ui = useUIStore();
 
+/** @type {{ task: Task }} */
 const props = defineProps({
     task: { type: Object }
 });
 
+// Context menu positioning
+const contextMenuPosition = ref({});
+const contextMenuRef = ref(null);
+
+// Handle right-click to position context menu
+const handleRightClick = (event) => {
+    const menuWidth = 168; // w-42 = 10.5rem = 168px
+    const menuHeight = 200; // Approximate height
+
+    let x = event.clientX;
+    let y = event.clientY - 55;
+
+    // Prevent menu from going off screen
+    if (x + menuWidth > window.innerWidth) {
+        x = event.clientX - menuWidth; // Show to the left instead
+    }
+    if (y + menuHeight > window.innerHeight) {
+        y = event.clientY - menuHeight; // Show above instead
+    }
+
+    contextMenuPosition.value = {
+        left: `${x}px`,
+        top: `${y}px`
+    };
+
+    // Open the context menu for this task
+    ui.setOpenContextMenu(props.task.taskId);
+
+    // Add click outside listener after menu opens
+    nextTick(() => {
+        document.addEventListener("click", handleClickOutside);
+    });
+};
+
+// Handle clicking outside the context menu
+const handleClickOutside = (event) => {
+    if (contextMenuRef.value && !contextMenuRef.value.contains(event.target)) {
+        ui.setOpenContextMenu("");
+        document.removeEventListener("click", handleClickOutside);
+    }
+};
+
+// Cleanup on unmount
+onUnmounted(() => {
+    document.removeEventListener("click", handleClickOutside);
+});
+
 const copy = (txt) => {
     if (!txt) return;
     navigator.clipboard.writeText(txt);
     ui.showSuccess("Copied text");
 };
 
+const openViewTaskModal = () => {
+    ui.selectedTaskForView = props.task;
+    ui.toggleModal('view-task');
+};
+
+const isTotalPrice = (line, index, lines) => {
+    const trimmed = line.trim();
+    if (!trimmed) return false;
+
+    // Check if this is the last non-empty line
+    const nonEmptyLines = lines.filter(l => l.trim());
+    const isLastLine = index === lines.lastIndexOf(nonEmptyLines[nonEmptyLines.length - 1]);
+
+    if (!isLastLine) return false;
+
+    // Check if line is a standalone price (not in parentheses)
+    // Matches: $345.88, €345.88, £345.88, ¥345.88, etc.
+    // Does NOT match: ($86.47) or 2× 301/E ($86.47)
+    const totalPricePattern = /^[$€£¥₹₽¢]\s*[\d,]+\.?\d*$/;
+    return totalPricePattern.test(trimmed) && !trimmed.includes('(') && !trimmed.includes(')');
+};
+
 const colorMapping = new Map();
 colorMapping.set("green", "bg-green-400");
 colorMapping.set("red", "bg-red-400");
@@ -248,23 +469,18 @@ const colorToClass = (color) => {
     return colorMapping.get(color) || "bg-white";
 };
 
-const truncate = (text, after) => {
-    if (text?.length <= after || after === -1) return text;
-    return text?.substring(0, after) + "...";
-};
-
 const openInBrowser = (debug) => {
     if (!props.task.openerLink) return;
     ui.showSuccess(`Opening in browser ${debug ? "(debug)" : ""}`);
     const input = props.task.openerLink;
-    const data = JSON.parse(atob(input.split("://")[1]));
+    const data = JSON.parse(atob(input.split("://").pop()));
     data.config.debug = debug;
     const out = "necro://" + btoa(JSON.stringify(data));
     openInNewTab(out);
 };
 
 const formatDate = (date) => {
-    if (!date) return "-";
+    if (!date) return "TBA";
     const d = new Date(date);
     const iso = d.toISOString();
     const [year, month, day] = iso.substring(0, 10).split("-");
@@ -285,15 +501,4 @@ const openInNewTab = (href) => {
         href: href
     }).click();
 };
-
-const getMaxStatusLength = (width) => {
-    if (width > 1279) return -1;
-    if (width > 767) return 25;
-    if (width > 639) return 30;
-    if (width > 540) return 18;
-    return 13;
-};
-
-let statusTruncateLength = ref(getMaxStatusLength(window.innerWidth));
-window.addEventListener("resize", () => (statusTruncateLength.value = getMaxStatusLength(window.innerWidth)));
 </script>

package/src/components/Tasks/TaskLabel.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="flex rounded-2xl gap-x-2 w-fit shadow-3xl mx-auto items-center justify-center bg-dark-600">
-        <img class="ml-3" v-if="logo" :src="logo" />
+    <div class="flex rounded-2xl gap-x-2 max-w-full shadow-3xl mx-auto items-center justify-center bg-dark-600">
+        <img class="ml-3 flex-shrink-0" v-if="logo" :src="logo" />
         <div v-else class="ml-3"></div>
         <span class="font-bold p-2 truncate mr-3">{{ text }}</span>
     </div>