@necrolab/dashboard 0.4.220 → 0.5.1

package/src/views/Tasks.vue

@@ -1,105 +1,238 @@
 <template>
-    <div>
-        <div class="flex gap-5 items-center pt-5 pb-2">
-            <!-- Heading -->
-            <GearIcon class="w-5 cursor-pointer" @click="ui.toggleModal('quick-settings')" />
-            <h4 class="text-white text-base font-bold">
-                Tasks
-                <span class="text-light-300 pl-1">{{ taskCount }}</span>
-            </h4>
-            <ul class="mobile-icons">
-                <li>
-                    <button
-                        class="text-sm"
-                        :disabled="ui.disabledButtons['add-tasks']"
-                        @click="ui.toggleModal('create-task')"
-                    >
-                        <span class="mb-0.5">+</span>
-                    </button>
-                </li>
-                <li>
-                    <button @click="ui.deleteTasks()">
-                        <TrashIcon class="h-3.5 w-3.5" />
-                    </button>
-                </li>
-            </ul>
-        </div>
+  <div class="tasks-page">
+    <div class="flex items-center justify-between pb-2" style="padding-top: 1.5rem">
+      <div class="flex items-center justify-center gap-4">
+        <GearIcon
+          class="w-5 cursor-pointer smooth-hover"
+          @click="ui.toggleModal('quick-settings')"
+        />
+        <h4 class="text-base font-semibold text-light-300">
+          Tasks
+          <span class="text-sm font-medium text-light-400 pl-1">{{ taskCount }}</span>
+        </h4>
+      </div>
+      <ul class="mobile-icons mobile-header-controls">
+        <li>
+          <button @click="ui.startTasks()"><PlayIcon class="w-4 h-4" /></button>
+        </li>
+        <li>
+          <button @click="ui.stopTasks()"><PauseIcon class="w-4 h-4" /></button>
+        </li>
+        <li>
+          <button
+            class="text-sm"
+            :disabled="ui.disabledButtons['add-tasks']"
+            @click="ui.toggleModal('create-task')"
+          >
+            <PlusIcon class="w-4 h-4" />
+          </button>
+        </li>
+        <li>
+          <button @click="ui.deleteTasks()"><TrashIcon class="h-3.5 w-3.5" /></button>
+        </li>
+      </ul>
+    </div>
 
-        <Stats />
-
-        <!-- Controls -->
-        <div class="controls-wrapper mb-6 sm:ml-0 md:ml-0.5 lg:ml-0 ml-0">
-            <DesktopControls
-                class="hidden lg:flex"
-                @stopAll="ui.stopTasks()"
-                @startAll="ui.startTasks()"
-                @expand="ui.expandTasks()"
-                @fold="ui.foldTasks()"
-                @deleteAll="ui.deleteTasks()"
-            />
-            <MobileControls
-                class="flex lg:hidden"
-                @stopAll="ui.stopTasks()"
-                @startAll="ui.startTasks()"
-                @deleteAll="ui.deleteTasks()"
-                @expand="ui.expandTasks()"
-                @fold="ui.foldTasks()"
+    <div class="controls-wrapper">
+      <div class="controls-wrapper lg:mb-3">
+        <DesktopControls
+          class="desktop-controls-hide"
+          @stopAll="ui.stopTasks()"
+          @startAll="ui.startTasks()"
+          @deleteAll="ui.deleteTasks()"
+        />
+      </div>
+
+      <!-- Mobile: Stats + Filter on same row -->
+      <div class="flex md:hidden items-center justify-between gap-2 mb-1">
+        <Stats class="stats-component flex-1" />
+        <PriceSortToggle
+          class="min-w-20 max-w-28 flex-shrink-0 h-8"
+          :options="['All', 'Checkout']"
+          :darker="true"
+          :current="ui.taskFilter"
+          @change="(e) => ui.setTaskFilter(e)"
+        />
+      </div>
+
+      <!-- Desktop: Event Dropdown + Search + Filter + Stats on ONE row -->
+      <div class="hidden md:flex items-center gap-2 lg:mb-2 mb-1">
+        <div
+          v-if="uniqEventIds.length > 1"
+          class="w-52 flex-shrink-0"
+        >
+          <Dropdown
+            :onClick="(f) => ui.setCurrentEvent(f)"
+            default="All events"
+            :chosen="ui.currentEvent"
+            :options="uniqEventIds"
+            :allowDefault="true"
+            class="input-default w-full hover:bg-dark-400 event-dropdown"
+            rightAmount="right-2"
+          />
+        </div>
+        <div class="w-52 flex-shrink-0">
+          <div class="input-default flex items-center">
+            <input
+              v-model="taskSearchQuery"
+              type="text"
+              placeholder="Search tasks..."
+              class="h-full w-full bg-transparent text-sm text-white outline-none"
             />
+            <span v-if="taskSearchQuery" class="ml-2 text-xs text-light-500">{{ filteredTaskCount }}</span>
+          </div>
         </div>
-        <div class="flex items-center gap-2 mb-2">
-            <div
-                v-if="uniqEventIds.length > 1"
-                class="w-full min-w-32 max-w-72 md:max-w-48 flex rounded input-default hover:bg-dark-400"
-                style="height: 2.5rem !important"
-            >
-                <Dropdown
-                    :onClick="(f) => ui.setCurrentEvent(f)"
-                    default="All events"
-                    :chosen="ui.currentEvent"
-                    :options="uniqEventIds"
-                    :allowDefault="true"
-                    class="w-56"
-                    rightAmount="right-2"
-                />
-            </div>
-            <div>
-                <PriceSortToggle
-                    class="h-10 hover:bg-dark-400 border-dark-550 border-2 min-w-24"
-                    :options="['All', 'Checkout']"
-                    :darker="true"
-                    :current="ui.taskFilter"
-                    @change="(e) => ui.setTaskFilter(e)"
-                />
-            </div>
+        <PriceSortToggle
+          class="min-w-24 max-w-28 flex-shrink-0"
+          :options="['All', 'Checkout']"
+          :darker="true"
+          :current="ui.taskFilter"
+          @change="(e) => ui.setTaskFilter(e)"
+        />
+        <Stats class="stats-component ml-auto" />
+      </div>
+
+      <!-- Mobile: Event Dropdown + Search stacked -->
+      <div class="flex md:hidden flex-col gap-2 mb-1">
+        <div
+          v-if="uniqEventIds.length > 1"
+          class="w-full"
+        >
+          <Dropdown
+            :onClick="(f) => ui.setCurrentEvent(f)"
+            default="All events"
+            :chosen="ui.currentEvent"
+            :options="uniqEventIds"
+            :allowDefault="true"
+            class="input-default w-full hover:bg-dark-400 event-dropdown"
+            rightAmount="right-2"
+          />
+        </div>
+        <div class="w-full">
+          <div class="input-default flex items-center">
+            <input
+              v-model="taskSearchQuery"
+              type="text"
+              placeholder="Search tasks..."
+              class="h-full w-full bg-transparent text-sm text-white outline-none"
+            />
+            <span v-if="taskSearchQuery" class="ml-2 text-xs text-light-500">{{ filteredTaskCount }}</span>
+          </div>
         </div>
+      </div>
 
-        <!-- Tasks (Table) -->
-        <TaskView class="mb-6" :tasks="ui.tasks" />
-        <!-- Utilities -->
-        <Utilities />
-        <!-- Modal -->
-        <transition-group name="fade" mode="out-in">
-            <CreateTaskTM v-if="ui.currentModule == 'TM' && activeModal === 'create-task'" @new="ui.addNewTask" />
-            <CreateTaskAXS v-if="ui.currentModule == 'AXS' && activeModal === 'create-task'" @new="ui.addNewTask" />
-
-            <!-- TODO: make the same changes as above -->
-            <CheckStock v-if="activeModal === 'check-stock'" />
-            <ScrapeVenue v-if="activeModal === 'scrape-venue'" />
-            <MassEditPresaleCode v-if="activeModal === 'mass-edit-presale-code'" />
-            <QuickSettings v-if="activeModal === 'quick-settings'" />
-        </transition-group>
+      <TaskView class="lg:mb-3 mb-2" :tasks="ui.tasks" :searchQuery="taskSearchQuery" />
+
+      <Utilities class="utilities-section" />
     </div>
+
+    <transition-group name="fade">
+      <CreateTaskTM
+        v-if="ui.currentModule == 'TM' && activeModal === 'create-task'"
+        @new="ui.addNewTask"
+      />
+      <CreateTaskAXS
+        v-if="ui.currentModule == 'AXS' && activeModal === 'create-task'"
+        @new="ui.addNewTask"
+      />
+      <CheckStock v-if="activeModal === 'check-stock'" />
+      <ScrapeVenue v-if="activeModal === 'scrape-venue'" />
+      <MassEditPresaleCode v-if="activeModal === 'mass-edit-presale-code'" />
+      <QuickSettings v-if="activeModal === 'quick-settings'" />
+    </transition-group>
+  </div>
 </template>
 <style lang="scss" scoped>
 .custom-dropdown-content {
-    top: 2.6rem !important;
-    left: -13px;
-    @apply border border-light-300;
+  top: 2.6rem !important;
+  left: -13px;
+  @apply border border-dark-650;
+}
+
+/* ==========================================================================
+   TASKS PAGE RESPONSIVE LAYOUT - MOBILE FIRST
+   ========================================================================== */
+
+/* Default mobile layout */
+.desktop-controls-hide {
+  display: none;
+}
+
+.mobile-header-controls {
+  display: flex;
+}
+
+/* Event dropdown base styling */
+.event-dropdown {
+  min-width: 0;
+  /* Match PriceSortToggle height instead of input-default */
+  height: 40px !important;
+}
+
+.event-dropdown .dropdown-value {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Small mobile screens (portrait) */
+@media (max-width: 480px) and (orientation: portrait) {
+  .event-dropdown {
+    height: 40px !important; /* Match PriceSortToggle height exactly */
+  }
+
+  .event-dropdown .dropdown-value {
+    max-width: calc(100vw - 140px);
+    font-size: 0.875rem;
+  }
+
+  .event-dropdown .dropdown-display {
+    padding-right: 2rem;
+  }
+}
+
+/* Extra small screens */
+@media (max-width: 375px) and (orientation: portrait) {
+  .event-dropdown {
+    height: 40px !important; /* Maintain 40px height to match PriceSortToggle */
+  }
+
+  .event-dropdown .dropdown-value {
+    max-width: calc(100vw - 120px);
+    font-size: 0.8rem;
+  }
+}
+
+/* Mobile landscape - hide non-essential elements */
+@media (max-height: 500px) and (orientation: landscape) {
+  .stats-component,
+  .utilities-section,
+  .filter-controls {
+    display: none;
+  }
+
+  .pb-2 {
+    padding-top: 1rem !important;
+    padding-bottom: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+}
+
+/* Tablet and small desktop - show desktop controls */
+@media (min-width: 650px) {
+  .desktop-controls-hide {
+    display: flex;
+  }
+
+  .mobile-header-controls {
+    display: none;
+  }
 }
 </style>
 <script setup>
-import { computed } from "vue";
-import { MobileControls, DesktopControls } from "@/components/Tasks/Controls";
+import { computed, onMounted, ref } from "vue";
+import { DesktopControls } from "@/components/Tasks/Controls";
 import TaskView from "@/components/Tasks/TaskView.vue";
 import Utilities from "@/components/Tasks/Utilities.vue";
 import CreateTaskTM from "@/components/Tasks/CreateTaskTM.vue";
@@ -110,22 +243,57 @@ import MassEditPresaleCode from "@/components/Tasks/MassEdit.vue";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
 import Stats from "@/components/Tasks/Stats.vue";
 import { useUIStore } from "@/stores/ui";
-import { TrashIcon, GearIcon } from "@/components/icons";
+import { TrashIcon, GearIcon, PlusIcon, PlayIcon, PauseIcon } from "@/components/icons";
 import QuickSettings from "@/components/Tasks/QuickSettings.vue";
 import PriceSortToggle from "@/components/Filter/PriceSortToggle.vue";
+
 const ui = useUIStore();
 const activeModal = computed(() => ui.activeModal);
 const taskCount = computed(() => Object.keys(ui.getSelectedTasks()).length);
 ui.refreshQueueStats();
 
+const taskSearchQuery = ref('');
+
+const filteredTaskCount = computed(() => {
+  if (!taskSearchQuery.value.trim()) return '';
+
+  const searchLower = taskSearchQuery.value.toLowerCase().trim();
+  let count = 0;
+
+  Object.values(ui.tasks).forEach(task => {
+    if (task.hidden) return;
+
+    const searchableText = [
+      task.eventId,
+      task.eventName,
+      task.eventVenue,
+      task.email,
+      task.taskId,
+      task.status,
+      task.profileName,
+      task.presaleCode,
+      task.reservedTicketsList
+    ].filter(Boolean).join(' ').toLowerCase();
+
+    if (searchableText.includes(searchLower)) count++;
+  });
+
+  return count;
+});
+
+// Ensure "All events" is always selected on page load
+onMounted(() => {
+  ui.setCurrentEvent("");
+});
+
 const uniqEventIds = computed(() => {
-    const ids = [
-        ...new Set(
-            Object.values(ui.tasks)
-                .filter((t) => t.siteId === ui.currentCountry.siteId && !t.eventId.includes("@"))
-                .map((v) => v.eventId)
-        )
-    ];
-    return ids;
+  const ids = [
+    ...new Set(
+      Object.values(ui.tasks)
+        .filter((t) => t.siteId === ui.currentCountry.siteId && !t.eventId?.includes("@"))
+        .map((v) => `${v.eventName} (${v.eventId})`)
+    ),
+  ];
+  return ids;
 });
 </script>