@necrolab/dashboard 0.5.15 → 0.5.17

package/src/stores/ui.js

@@ -3,7 +3,20 @@ import { defineStore } from "pinia";
 import { ConnectionHandler } from "@/stores/connection.js";
 import { toast } from "vue3-toastify";
 import { createLogger } from "@/stores/logger";
-import { timeDifference, betterSort, sortTaskIds } from "@/stores/utils";
+import { timeDifference } from "@/libs/utils/time";
+import { betterSort, sortTaskIds } from "@/libs/utils/array";
+
+const TOAST_CONFIG = {
+    autoClose: 1400,
+    pauseOnHover: false,
+    hideProgressBar: false,
+    closeOnClick: true,
+    pauseOnFocusLoss: false,
+    transition: "slide",
+    position: "top-right",
+    closeButton: true,
+    newestOnTop: true
+};
 
 import mockTaskData from "@/stores/sampleData.js";
 import { useRouter } from "vue-router";
@@ -56,13 +69,10 @@ export const useUIStore = defineStore("ui", () => {
     });
     const taskIdOrder = ref(Object.keys(tasks.value));
     const modalData = ref({});
-    const taskFilter = ref("All"); // 'All' or 'Checkout'
+    const taskFilter = ref("All");
     const selectedTaskForView = ref(null);
     const connection = new ConnectionHandler();
 
-    const startPoint = ref(0);
-    const pullChange = ref(0);
-
     const currentEvent = ref("");
     const currentCountry = ref({ id: "US", siteId: "TM_US", url: "https://www.ticketmaster.com" });
     const currentModule = ref("TM");
@@ -99,19 +109,33 @@ export const useUIStore = defineStore("ui", () => {
     });
     const currentDropdown = ref("");
 
-    // Set the _timeLeftString property every second
-    setInterval(() => {
-        const t1 = new Date();
-        for (const [key, value] of Object.entries(tasks.value)) {
-            if (value.expirationTime)
-                tasks.value[key]._timeLeftString =
-                    value.expirationTime == "Invalid Date"
-                        ? "No Cartholds"
-                        : timeDifference(Date.parse(value.expirationTime), t1.getTime());
-            else tasks.value[key]._timeLeftString = undefined;
+    // Optimized: Use requestAnimationFrame instead of setInterval to reduce CPU waste
+    // Only update times when tab is visible and at most once per second
+    let lastTimeUpdate = 0;
+    let lastSyncCheck = 0;
+    let rafId = null;
+
+    const updateTaskTimes = (timestamp) => {
+        // Only update once per second
+        if (timestamp - lastTimeUpdate >= 1000) {
+            lastTimeUpdate = timestamp;
+            const now = Date.now();
+
+            for (const [key, value] of Object.entries(tasks.value)) {
+                if (value.expirationTime) {
+                    tasks.value[key]._timeLeftString =
+                        value.expirationTime == "Invalid Date"
+                            ? "No Cartholds"
+                            : timeDifference(Date.parse(value.expirationTime), now);
+                } else {
+                    tasks.value[key]._timeLeftString = undefined;
+                }
+            }
         }
 
-        if (t1.getSeconds() % 10 === 0) {
+        // Sync taskIdOrder every 10 seconds (optimized with Map for O(1) lookups)
+        if (timestamp - lastSyncCheck >= 10000) {
+            lastSyncCheck = timestamp;
             const allIds = new Set(Object.keys(tasks.value));
             const orderIds = new Set(taskIdOrder.value);
 
@@ -123,20 +147,44 @@ export const useUIStore = defineStore("ui", () => {
 
                 if (missingIds.length > 0) {
                     missingIds.sort(sortTaskIds);
+                    // Optimized: Binary search for insertion point
                     for (const id of missingIds) {
-                        let pos = taskIdOrder.value.length;
-                        for (let i = 0; i < taskIdOrder.value.length; i++) {
-                            if (sortTaskIds(id, taskIdOrder.value[i]) < 0) {
-                                pos = i;
-                                break;
+                        let left = 0;
+                        let right = taskIdOrder.value.length;
+                        while (left < right) {
+                            const mid = Math.floor((left + right) / 2);
+                            if (sortTaskIds(id, taskIdOrder.value[mid]) < 0) {
+                                right = mid;
+                            } else {
+                                left = mid + 1;
                             }
                         }
-                        taskIdOrder.value.splice(pos, 0, id);
+                        taskIdOrder.value.splice(left, 0, id);
                     }
                 }
             }
         }
-    }, 1000);
+
+        rafId = requestAnimationFrame(updateTaskTimes);
+    };
+
+    rafId = requestAnimationFrame(updateTaskTimes);
+
+    // Pause updates when tab is hidden to save CPU
+    document.addEventListener('visibilitychange', () => {
+        if (document.hidden) {
+            if (rafId) {
+                cancelAnimationFrame(rafId);
+                rafId = null;
+            }
+        } else {
+            if (!rafId) {
+                lastTimeUpdate = 0;
+                lastSyncCheck = 0;
+                rafId = requestAnimationFrame(updateTaskTimes);
+            }
+        }
+    });
 
     connection.init("/api/updates?type=tasks");
 
@@ -155,7 +203,6 @@ export const useUIStore = defineStore("ui", () => {
         document.body.style.top = `-${scrollY}px`;
         document.body.style.width = "100%";
         document.body.style.height = "100%";
-        document.body.style.left = "0"; // Add left positioning
 
         // iOS specific properties
         document.body.style.overflow = "hidden";
@@ -360,19 +407,16 @@ export const useUIStore = defineStore("ui", () => {
         return selected;
     };
 
-    const getSelectedProfiles = () => {
-        const res = search.value.profiles.results.filter((p) => p.selected);
-        if (res.length === 0) return search.value.profiles.results;
-        else return res;
-    };
-    const getSelectedAccounts = () => {
-        const res = search.value.accounts.results.filter((p) => p.selected);
-        if (res.length === 0) return search.value.accounts.results;
-        else return res;
+    const getSelectedItems = (source) => {
+        const res = source.results.filter((p) => p.selected);
+        return res.length === 0 ? source.results : res;
     };
 
+    const getSelectedProfiles = () => getSelectedItems(search.value.profiles);
+    const getSelectedAccounts = () => getSelectedItems(search.value.accounts);
+
     const startSpinner = (msg) => {
-        if (router.currentRoute.value.name == "login" || window.location.href.includes(":5173")) return;
+        if (router.currentRoute.value.name == "login") return;
         showSpinner.value = true;
         spinnerMessage.value = msg;
         preventScroll();
@@ -421,17 +465,12 @@ export const useUIStore = defineStore("ui", () => {
         reverseTasks,
 
         // refresh
-        startPoint,
-        pullChange,
-        setStartPoint: (point) => (startPoint.value = point),
-        setPullChange: () => (pullChange.value = length),
         tasks,
 
         // top main checkbox
         mainCheckbox,
         toggleMainCheckbox,
 
-        createAcconts: (cnfg) => connection.sendCreateAccounts(cnfg),
 
         // single
         deleteTask: (taskId) => {
@@ -472,14 +511,6 @@ export const useUIStore = defineStore("ui", () => {
             const selectedTasks = getSelectedTasks();
             for (const value of Object.values(selectedTasks)) connection.sendDeleteTask(value.taskId);
         },
-        foldTasks: () => {
-            const selectedTasks = getSelectedTasks();
-            for (const key of Object.keys(selectedTasks)) tasks.value[key].isExpanded = false;
-        },
-        expandTasks: () => {
-            const selectedTasks = getSelectedTasks();
-            for (const key of Object.keys(selectedTasks)) tasks.value[key].isExpanded = true;
-        },
         startTasks: () => {
             const selectedTasks = getSelectedTasks();
             for (const value of Object.values(selectedTasks)) if (!value.active) connection.sendStartTask(value.taskId);
@@ -509,30 +540,8 @@ export const useUIStore = defineStore("ui", () => {
         massEditPresaleCode: (eventId, presaleCode) => connection.sendMassEditPresaleCode(eventId, presaleCode),
 
         // alerts
-        showError: (err) =>
-            toast.error(err, {
-                autoClose: 1400,
-                pauseOnHover: false,
-                hideProgressBar: false,
-                closeOnClick: true,
-                pauseOnFocusLoss: false,
-                transition: "slide",
-                position: "top-right",
-                closeButton: true,
-                newestOnTop: true
-            }),
-        showSuccess: (msg) =>
-            toast.success(msg, {
-                autoClose: 1400,
-                pauseOnHover: false,
-                hideProgressBar: false,
-                closeOnClick: true,
-                pauseOnFocusLoss: false,
-                transition: "slide",
-                position: "top-right",
-                closeButton: true,
-                newestOnTop: true
-            }),
+        showError: (err) => toast.error(err, TOAST_CONFIG),
+        showSuccess: (msg) => toast.success(msg, TOAST_CONFIG),
         // Country
         currentCountry,
         setCurrentCountry: (country, closeModal, newModule) => {

package/src/utils/tableHelpers.js

@@ -0,0 +1 @@
+export const getRowClass = (index) => index % 2 === 1 ? 'table-row-even' : 'table-row-odd';

package/src/views/Accounts.vue

@@ -13,7 +13,8 @@
                     <button
                         :disabled="ui.disabledButtons['create-accounts']"
                         @click="ui.toggleModal('account-creator', true)"
-                        class="smooth-hover">
+                        class="smooth-hover"
+                        aria-label="Create accounts">
                         <PlayIcon class="w-4 h-4" />
                     </button>
                 </li>
@@ -21,7 +22,8 @@
                     <button
                         :disabled="ui.disabledButtons['add-accounts']"
                         @click="ui.toggleModal('create-account', true)"
-                        class="smooth-hover">
+                        class="smooth-hover"
+                        aria-label="Add account">
                         <PlusIcon class="w-4 h-4" />
                     </button>
                 </li>
@@ -38,6 +40,7 @@
                 <input
                     class="h-10 w-44 text-white text-sm p-2 bg-dark-500 flex items-center relative"
                     placeholder="Search Email"
+                    aria-label="Search email"
                     autocomplete="new-password"
                     data-dashlane-rid=""
                     data-dashlane-label=""
@@ -58,59 +61,41 @@
 
             <div class="ml-auto gap-2 hidden md:flex">
                 <div
-                    class="bg-dark-400 border border-dark-650 justify-between px-4 w-44 text-white text-xs font-medium items-center rounded-md ml-auto h-10 hidden md:flex">
+                    class="bg-dark-400 dark-border-rounded-md flex-between px-4 w-44 text-button ml-auto h-10 hidden md:flex">
                     <p>Privacy</p>
                     <Switch class="scale-75" v-model="privacy" />
                 </div>
                 <button
                     :disabled="ui.disabledButtons['create-accounts']"
-                    class="bg-dark-400 disabled:opacity-70 smooth-hover border border-dark-650 hover:border-dark-700 w-44 flex text-white text-xs font-medium justify-center items-center rounded-md ml-auto h-10"
+                    class="bg-dark-400 disabled:opacity-70 smooth-hover dark-border-rounded-md hover:border-dark-700 btn-focus-ring w-44 flex items-center justify-center gap-2 text-button ml-auto h-10"
                     @click="ui.toggleModal('account-creator')">
                     Create Accounts
-                    <PlayIcon class="ml-2" />
+                    <PlayIcon class="icon-md" />
                 </button>
 
                 <button
                     :disabled="ui.disabledButtons['add-accounts']"
-                    class="bg-dark-400 disabled:opacity-70 smooth-hover border border-dark-650 hover:border-dark-700 w-44 flex text-white text-xs font-medium justify-center items-center rounded-md ml-auto h-10"
+                    class="bg-dark-400 disabled:opacity-70 smooth-hover dark-border-rounded-md hover:border-dark-700 btn-focus-ring w-44 flex items-center justify-center gap-2 text-button ml-auto h-10"
                     @click="ui.toggleModal('create-account')">
                     Add Account
-                    <PlusIcon class="ml-2" />
+                    <PlusIcon class="icon-md" />
                 </button>
             </div>
         </div>
 
         <!-- Tasks (Table) -->
-        <AccountView :accounts="processedTasks" class="max-h-big-acc" />
+        <AccountView :accounts="processedTasks" />
 
         <!-- Modal -->
         <transition-group name="fade">
             <CreateAccount v-if="activeModal === 'create-account'" />
-            <AccountCreator v-if="activeModal === 'account-creator'" />
+            <CreateAccountBatch v-if="activeModal === 'account-creator'" />
         </transition-group>
     </div>
 </template>
-<style lang="scss" scoped>
-/* Page buttons styling - match Tasks page */
-button.bg-dark-400 {
-    &:active,
-    &:focus {
-        outline: 1px solid oklch(0.72 0.15 145);
-        outline-offset: 0;
-        border-color: oklch(0.72 0.15 145) !important;
-    }
-}
-
-.max-h-big-acc {
-    max-height: calc(100vh - 14rem);
-    overflow: auto;
-}
-</style>
 <script setup>
-import { computed, watch, ref } from "vue";
+import { computed, defineAsyncComponent, watch, ref } from "vue";
 import AccountView from "@/components/Editors/Account/AccountView.vue";
-import AccountCreator from "@/components/Editors/Account/AccountCreator.vue";
-import CreateAccount from "@/components/Editors/Account/CreateAccount.vue";
 import { useUIStore } from "@/stores/ui";
 import { PlusIcon, PlayIcon, MailIcon } from "@/components/icons";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
@@ -118,6 +103,10 @@ import TagToggle from "@/components/Editors/TagToggle.vue";
 import Switch from "@/components/ui/controls/atomic/Switch.vue";
 import EyeToggle from "@/components/ui/controls/EyeToggle.vue";
 
+// Lazy-loaded modal components
+const CreateAccountBatch = defineAsyncComponent(() => import("@/components/Editors/Account/CreateAccountBatch.vue"));
+const CreateAccount = defineAsyncComponent(() => import("@/components/Editors/Account/CreateAccount.vue"));
+
 const ui = useUIStore();
 const activeModal = computed(() => ui.activeModal);
 const allTags = ref([]);
@@ -156,15 +145,7 @@ watch(
         ui.search.accounts.results = filterAccounts();
     }
 );
-const getAllTags = () => {
-    let tags = ["Any"];
-    ui.search.accounts.results.forEach((p) =>
-        p.tags.forEach((tag) => {
-            if (!tags.includes(tag)) tags.push(tag);
-        })
-    );
-    return tags;
-};
+import { useGetAllTags } from "@/composables/useGetAllTags";
 
-allTags.value = getAllTags();
+allTags.value = useGetAllTags(ui.search.accounts.results);
 </script>