@necrolab/dashboard 0.4.49 → 0.4.51

package/src/components/ui/controls/atomic/MultiDropdown.vue

@@ -1,58 +1,56 @@
 <template>
-  <div @click="toggleOpened" class="dropdown" ref="dropdownRef">
-    <span class="dropdown-display">
-      <span class="dropdown-value" :class="capitalize ? 'capitalize' : ''">
-        {{ displayValue }}
-      </span>
-      <div class="dropdown-counter">
-        <span v-if="selectedOptions.length > 1" class="counter-badge">
-          {{ selectedOptions.length }}
-        </span>
-        <DownIcon class="dropdown-arrow" :class="opened ? 'rotate-180' : ''" />
-      </div>
-    </span>
-    <Teleport to="body">
-      <transition name="dropdown-fade">
-        <div
-          v-if="opened"
-          class="dropdown-menu-portal multi scrollable"
-          :style="menuStyle"
-          @click.stop
-          @wheel.stop
-          @touchmove.stop
-        >
-          <div class="option-list scrollable">
-            <button
-              v-for="(option, i) in props.options"
-              :key="option.value"
-              class="dropdown-item"
-              :class="i !== 0 ? 'border-t border-dark-650' : ''"
-              @click.stop="toggleOption(option.value)"
-            >
-              <span class="dropdown-item-text" :class="capitalize ? 'capitalize' : ''">
-                {{ option.label }}
-              </span>
-              <CheckmarkIcon v-if="selectedOptions.includes(option.value)" class="ml-2" />
-            </button>
-          </div>
-
-          <div v-if="selectedOptions.length > 0" class="selected-summary">
-            <div class="flex items-center justify-between">
-              <div class="selected-count">
-                <span class="count-badge">
-                  {{ selectedOptions.length }}
-                </span>
-                <span class="count-label">
-                  item{{ selectedOptions.length === 1 ? "" : "s" }} selected
+    <div @click="toggleOpened" class="dropdown" ref="dropdownRef">
+        <span class="dropdown-display">
+            <span class="dropdown-value" :class="capitalize ? 'capitalize' : ''">
+                {{ displayValue }}
+            </span>
+            <div class="dropdown-counter">
+                <span v-if="selectedOptions.length > 1" class="counter-badge">
+                    {{ selectedOptions.length }}
                 </span>
-              </div>
-              <button class="clear-button" @click.stop="clearAll">Clear All</button>
+                <DownIcon class="dropdown-arrow" :class="opened ? 'rotate-180' : ''" />
             </div>
-          </div>
-        </div>
-      </transition>
-    </Teleport>
-  </div>
+        </span>
+        <Teleport to="body">
+            <transition name="dropdown-fade">
+                <div
+                    v-if="opened"
+                    class="dropdown-menu-portal multi scrollable"
+                    :style="menuStyle"
+                    @click.stop
+                    @wheel.stop
+                    @touchmove.stop>
+                    <div class="option-list scrollable">
+                        <button
+                            v-for="(option, i) in props.options"
+                            :key="option.value"
+                            class="dropdown-item"
+                            :class="i !== 0 ? 'border-t border-dark-650' : ''"
+                            @click.stop="toggleOption(option.value)">
+                            <span class="dropdown-item-text" :class="capitalize ? 'capitalize' : ''">
+                                {{ option.label }}
+                            </span>
+                            <CheckmarkIcon v-if="selectedOptions.includes(option.value)" class="ml-2" />
+                        </button>
+                    </div>
+
+                    <div v-if="selectedOptions.length > 0" class="selected-summary">
+                        <div class="flex items-center justify-between">
+                            <div class="selected-count">
+                                <span class="count-badge">
+                                    {{ selectedOptions.length }}
+                                </span>
+                                <span class="count-label">
+                                    item{{ selectedOptions.length === 1 ? "" : "s" }} selected
+                                </span>
+                            </div>
+                            <button class="clear-button" @click.stop="clearAll">Clear All</button>
+                        </div>
+                    </div>
+                </div>
+            </transition>
+        </Teleport>
+    </div>
 </template>
 
 <script setup>
@@ -65,13 +63,13 @@ import { useClickOutside } from "@/composables/useClickOutside";
 const ui = useUIStore();
 
 const props = defineProps({
-  onSelect: { type: Function },
-  default: { type: String },
-  options: { type: Array, required: true },
-  rightAmount: { type: String },
-  topPadding: { type: String },
-  capitalize: { type: Boolean },
-  includeAdjacentButtons: { type: Boolean, default: false },
+    onSelect: { type: Function },
+    default: { type: String },
+    options: { type: Array, required: true },
+    rightAmount: { type: String },
+    topPadding: { type: String },
+    capitalize: { type: Boolean },
+    includeAdjacentButtons: { type: Boolean, default: false }
 });
 
 const selectedOptions = ref([]);
@@ -80,283 +78,279 @@ const id = Math.random();
 const opened = computed(() => ui.currentDropdown === id);
 
 const displayValue = computed(() => {
-  if (selectedOptions.value.length === 0) {
-    return props.default || "Select options...";
-  }
-
-  if (selectedOptions.value.length === 1) {
-    const option = props.options.find((opt) => opt.value === selectedOptions.value[0]);
-    return option ? option.label : selectedOptions.value[0];
-  }
-
-  if (selectedOptions.value.length <= 2) {
-    const labels = selectedOptions.value.map((val) => {
-      const option = props.options.find((opt) => opt.value === val);
-      return option ? option.label : val;
-    });
-    return labels.join(", ");
-  }
-
-  const firstOption = props.options.find((opt) => opt.value === selectedOptions.value[0]);
-  const firstName = firstOption ? firstOption.label : selectedOptions.value[0];
-  return `${firstName} +${selectedOptions.value.length - 1} more`;
+    if (selectedOptions.value.length === 0) {
+        return props.default || "Select options...";
+    }
+
+    if (selectedOptions.value.length === 1) {
+        const option = props.options.find((opt) => opt.value === selectedOptions.value[0]);
+        return option ? option.label : selectedOptions.value[0];
+    }
+
+    if (selectedOptions.value.length <= 2) {
+        const labels = selectedOptions.value.map((val) => {
+            const option = props.options.find((opt) => opt.value === val);
+            return option ? option.label : val;
+        });
+        return labels.join(", ");
+    }
+
+    const firstOption = props.options.find((opt) => opt.value === selectedOptions.value[0]);
+    const firstName = firstOption ? firstOption.label : selectedOptions.value[0];
+    return `${firstName} +${selectedOptions.value.length - 1} more`;
 });
 
 // Use composables for positioning and click outside
 const { menuStyle, updatePosition } = useDropdownPosition(dropdownRef, {
-  maxHeight: 280,
-  includeAdjacentButtons: props.includeAdjacentButtons,
-  estimateHeight: () => {
-    const optionsCount = props.options?.length || 0;
-    const summaryHeight = selectedOptions.value.length > 0 ? 70 : 0;
-    const baseMaxHeight = selectedOptions.value.length > 0 ? 280 : 200;
-    const optionListHeight = Math.min(optionsCount * 44, 200);
-    return Math.min(optionListHeight + summaryHeight, baseMaxHeight);
-  },
+    maxHeight: 280,
+    includeAdjacentButtons: props.includeAdjacentButtons,
+    estimateHeight: () => {
+        const optionsCount = props.options?.length || 0;
+        const summaryHeight = selectedOptions.value.length > 0 ? 70 : 0;
+        const baseMaxHeight = selectedOptions.value.length > 0 ? 280 : 200;
+        const optionListHeight = Math.min(optionsCount * 44, 200);
+        return Math.min(optionListHeight + summaryHeight, baseMaxHeight);
+    }
 });
 
 useClickOutside(dropdownRef, () => {
-  if (opened.value) {
-    ui.setCurrentDropdown("");
-  }
+    if (opened.value) {
+        ui.setCurrentDropdown("");
+    }
 });
 
 const toggleOpened = () => {
-  if (opened.value) {
-    ui.setCurrentDropdown("");
-  } else {
-    ui.setCurrentDropdown(id);
-    updatePosition();
-  }
+    if (opened.value) {
+        ui.setCurrentDropdown("");
+    } else {
+        ui.setCurrentDropdown(id);
+        updatePosition();
+    }
 };
 
 const toggleOption = (option) => {
-  const index = selectedOptions.value.indexOf(option);
-  if (index === -1) {
-    selectedOptions.value.push(option);
-  } else {
-    selectedOptions.value.splice(index, 1);
-  }
-
-  // Handle default logic
-  if (selectedOptions.value.length === 0 && props.default) {
-    selectedOptions.value = [props.default];
-  }
-  if (
-    selectedOptions.value.length > 1 &&
-    selectedOptions.value.includes(props.default) &&
-    option !== props.default
-  ) {
-    selectedOptions.value = selectedOptions.value.filter((e) => e !== props.default);
-  } else if (option === props.default) {
-    selectedOptions.value = [props.default];
-  }
+    const index = selectedOptions.value.indexOf(option);
+    if (index === -1) {
+        selectedOptions.value.push(option);
+    } else {
+        selectedOptions.value.splice(index, 1);
+    }
 
-  if (typeof props.onSelect === "function") {
-    props.onSelect(selectedOptions.value);
-  }
+    // Handle default logic
+    if (selectedOptions.value.length === 0 && props.default) {
+        selectedOptions.value = [props.default];
+    }
+    if (selectedOptions.value.length > 1 && selectedOptions.value.includes(props.default) && option !== props.default) {
+        selectedOptions.value = selectedOptions.value.filter((e) => e !== props.default);
+    } else if (option === props.default) {
+        selectedOptions.value = [props.default];
+    }
+
+    if (typeof props.onSelect === "function") {
+        props.onSelect(selectedOptions.value);
+    }
 
-  // Recalculate position after selection changes
-  updatePosition();
+    // Recalculate position after selection changes
+    updatePosition();
 };
 
 const clearAll = () => {
-  // Default to first option instead of empty
-  if (props.options && props.options.length > 0) {
-    selectedOptions.value = [props.options[0].value];
-    if (typeof props.onSelect === "function") {
-      props.onSelect([props.options[0].value]);
+    // Default to first option instead of empty
+    if (props.options && props.options.length > 0) {
+        selectedOptions.value = [props.options[0].value];
+        if (typeof props.onSelect === "function") {
+            props.onSelect([props.options[0].value]);
+        }
+    } else if (props.default) {
+        selectedOptions.value = [props.default];
+        if (typeof props.onSelect === "function") {
+            props.onSelect([props.default]);
+        }
+    } else {
+        selectedOptions.value = [];
+        if (typeof props.onSelect === "function") {
+            props.onSelect([]);
+        }
     }
-  } else if (props.default) {
-    selectedOptions.value = [props.default];
-    if (typeof props.onSelect === "function") {
-      props.onSelect([props.default]);
-    }
-  } else {
-    selectedOptions.value = [];
-    if (typeof props.onSelect === "function") {
-      props.onSelect([]);
-    }
-  }
 
-  // Recalculate position after clearing
-  updatePosition();
+    // Recalculate position after clearing
+    updatePosition();
 };
 
 // Initialize with default option if provided
 if (props.default && !selectedOptions.value.includes(props.default)) {
-  selectedOptions.value = [props.default];
+    selectedOptions.value = [props.default];
 }
 </script>
 
 <style scoped>
 .dropdown {
-  @apply relative w-full h-12 text-white ml-auto rounded-lg ring-0;
-  background: linear-gradient(135deg, #2a2b30 0%, #2e2f34 100%);
-  border: 1px solid #3d3e44;
-  padding: 0.75rem;
+    @apply relative w-full h-10 text-white ml-auto rounded-lg ring-0;
+    background: linear-gradient(135deg, #2a2b30 0%, #2e2f34 100%);
+    border: 1px solid #3d3e44;
+    padding: 0.75rem;
 }
 
 .dropdown:hover {
-  @apply border-dark-400;
+    @apply border-dark-400;
 }
 
 .dropdown:focus-within {
-  @apply border-blue-500;
+    @apply border-blue-500;
 }
 
 @media (max-width: 810px) {
-  .dropdown {
-    @apply h-10;
-    padding: 0.625rem;
-  }
+    .dropdown {
+        @apply h-10;
+        padding: 0.625rem;
+    }
 }
 
 .dropdown-display {
-  @apply flex items-center justify-between z-10;
+    @apply flex items-center justify-between z-10;
 }
 
 .dropdown-value {
-  @apply w-full overflow-hidden block truncate pr-2 text-sm;
+    @apply w-full overflow-hidden block truncate pr-2 text-sm;
 }
 
 .dropdown-counter {
-  @apply flex items-center gap-2 absolute right-2;
+    @apply flex items-center gap-2 absolute right-2;
 }
 
 .counter-badge {
-  @apply bg-green-500 text-white text-xs font-semibold px-1.5 py-0.5 rounded-full text-center min-w-[18px] shadow-sm;
+    @apply bg-green-500 text-white text-xs font-semibold px-1.5 py-0.5 rounded-full text-center min-w-[18px] shadow-sm;
 }
 
 .dropdown-arrow {
-  @apply min-w-4 min-h-4 transition-all duration-300;
+    @apply min-w-4 min-h-4 transition-all duration-300;
 }
 
 .dropdown-menu-portal {
-  @apply rounded-xl shadow-2xl overflow-hidden;
-  background: linear-gradient(135deg, #2a2b30 0%, #2e2f34 100%);
-  border: 1px solid #3d3e44;
-  backdrop-filter: blur(12px);
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2),
-    0 0 0 1px rgba(255, 255, 255, 0.05);
-  overscroll-behavior: contain !important;
-  touch-action: pan-y !important;
-  -webkit-overflow-scrolling: touch !important;
-  scrollbar-width: thin;
-  scrollbar-color: #4b5563 transparent;
+    @apply rounded-xl shadow-2xl overflow-hidden;
+    background: linear-gradient(135deg, #2a2b30 0%, #2e2f34 100%);
+    border: 1px solid #3d3e44;
+    backdrop-filter: blur(12px);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2),
+        0 0 0 1px rgba(255, 255, 255, 0.05);
+    overscroll-behavior: contain !important;
+    touch-action: pan-y !important;
+    -webkit-overflow-scrolling: touch !important;
+    scrollbar-width: thin;
+    scrollbar-color: #4b5563 transparent;
 }
 
 .dropdown-menu-portal::-webkit-scrollbar {
-  width: 6px;
+    width: 6px;
 }
 
 .dropdown-menu-portal::-webkit-scrollbar-track {
-  background: transparent;
+    background: transparent;
 }
 
 .dropdown-menu-portal::-webkit-scrollbar-thumb {
-  background: #4b5563;
-  border-radius: 3px;
+    background: #4b5563;
+    border-radius: 3px;
 }
 
 .dropdown-menu-portal::-webkit-scrollbar-thumb:hover {
-  background: #6b7280;
+    background: #6b7280;
 }
 
 .dropdown-menu-portal.multi .option-list {
-  @apply max-h-48 overflow-y-auto;
-  overscroll-behavior: contain !important;
-  touch-action: pan-y !important;
-  -webkit-overflow-scrolling: touch !important;
+    @apply max-h-48 overflow-y-auto;
+    overscroll-behavior: contain !important;
+    touch-action: pan-y !important;
+    -webkit-overflow-scrolling: touch !important;
 }
 
 .dropdown-item {
-  @apply cursor-pointer text-left w-full text-white transition-all duration-200 flex justify-between items-center;
-  padding: 0.75rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  border-bottom: 1px solid rgba(61, 62, 68, 0.3);
+    @apply cursor-pointer text-left w-full text-white transition-all duration-200 flex justify-between items-center;
+    padding: 0.75rem 1rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    border-bottom: 1px solid rgba(61, 62, 68, 0.3);
 }
 
 .dropdown-item:last-child {
-  border-bottom: none;
+    border-bottom: none;
 }
 
 .dropdown-item:hover {
-  @apply bg-dark-600;
-  color: #ffffff;
+    @apply bg-dark-600;
+    color: #ffffff;
 }
 
 .dropdown-item:active {
-  @apply bg-dark-650;
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
+    @apply bg-dark-650;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
 }
 
 .dropdown-item:first-child {
-  @apply rounded-t-xl;
+    @apply rounded-t-xl;
 }
 
 .dropdown-item:last-child {
-  @apply rounded-b-xl;
+    @apply rounded-b-xl;
 }
 
 .dropdown-item-text {
-  @apply overflow-hidden;
+    @apply overflow-hidden;
 }
 
 /* Checkmark styling */
 .dropdown-item svg {
-  @apply w-4 h-4;
-  color: #10b981;
+    @apply w-4 h-4;
+    color: #10b981;
 }
 
 .selected-summary {
-  @apply border-t bg-dark-550 w-full px-4 py-3;
-  border-top: 1px solid rgba(61, 62, 68, 0.5);
+    @apply border-t bg-dark-550 w-full px-4 py-3;
+    border-top: 1px solid rgba(61, 62, 68, 0.5);
 }
 
 .selected-count {
-  @apply flex items-center gap-2;
+    @apply flex items-center gap-2;
 }
 
 .count-badge {
-  @apply bg-green-500 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-sm;
+    @apply bg-green-500 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-sm;
 }
 
 .count-label {
-  @apply text-xs font-medium text-light-400;
+    @apply text-xs font-medium text-light-400;
 }
 
 .clear-button {
-  @apply text-xs bg-red-500 text-white transition-colors duration-200 font-medium px-3 py-1.5 rounded-lg shadow-sm;
+    @apply text-xs bg-red-500 text-white transition-colors duration-200 font-medium px-3 py-1.5 rounded-lg shadow-sm;
 }
 
 .clear-button:hover {
-  @apply bg-red-400;
+    @apply bg-red-400;
 }
 
 /* Transition animations */
 .dropdown-fade-enter-active {
-  @apply transition-all duration-300;
+    @apply transition-all duration-300;
 }
 
 .dropdown-fade-leave-active {
-  @apply transition-all duration-200;
+    @apply transition-all duration-200;
 }
 
 .dropdown-fade-enter-from {
-  @apply opacity-0;
-  transform: translateY(-8px) scale(0.95);
+    @apply opacity-0;
+    transform: translateY(-8px) scale(0.95);
 }
 
 .dropdown-fade-leave-to {
-  @apply opacity-0;
-  transform: translateY(-4px) scale(0.98);
+    @apply opacity-0;
+    transform: translateY(-4px) scale(0.98);
 }
 
 .dropdown-fade-enter-to,
 .dropdown-fade-leave-from {
-  @apply opacity-100;
-  transform: translateY(0) scale(1);
+    @apply opacity-100;
+    transform: translateY(0) scale(1);
 }
 </style>

package/src/stores/sampleData.js

@@ -1,3 +1,5 @@
+const queueStats = false;
+
 export default {
     Profile: {
         name: "Admin",
@@ -17,7 +19,7 @@ export default {
             email: "grantelam@hotmail.com",
             password: "Dkstrhf4srth56Gksj",
             status: "Event already happened long long long long long long longlong long long long",
-            inQueue: true,
+            inQueue: queueStats,
             statusColor: "red",
             manual: false,
             incapsulaBypass: false,
@@ -324,7 +326,7 @@ export default {
             active: true,
             email: "taylortaxjbr26248@gmail.com",
             password: "OwZz9PfKtWsrS7",
-            status: "Waiting for Queue",
+            status: queueStats ? "Waiting for Queue" : "Waiting for Stock",
             statusColor: "white",
             manual: false,
             incapsulaBypass: false,

package/src/stores/ui.js

@@ -233,10 +233,7 @@ export const useUIStore = defineStore("ui", () => {
         let relevantTasks = Object.values(tasks.value).filter((t) => t.siteId === currentCountry.value.siteId);
         if (currentEvent.value) relevantTasks = relevantTasks.filter((t) => t.eventId === currentEvent.value);
 
-        queueStats.value.total = 0;
         queueStats.value.queued = relevantTasks.filter((t) => t.inQueue).length || 0;
-        // if (DEBUG) queueStats.value.queued += 50000;
-        queueStats.value.show = queueStats.value.total > 0;
         const sleepingStatuses = ["sleeping in queue", "waiting for drop", "waiting for carting", "waiting for queue"];
         queueStats.value.sleeping = relevantTasks.filter((t) =>
             sleepingStatuses.includes(t.status.toLowerCase())
@@ -246,6 +243,10 @@ export const useUIStore = defineStore("ui", () => {
             .filter((e) => !isNaN(e))
             .filter(Boolean);
         queueStats.value.nextQueuePasses = positions.sort((a, b) => a - b);
+
+        // Only show stats if there are any queued tasks, sleeping tasks, or queue positions
+        queueStats.value.show =
+            queueStats.value.queued > 0 || queueStats.value.sleeping > 0 || queueStats.value.nextQueuePasses.length > 0;
     };
 
     const toggleModal = (name, clearValue = false) => {