@necrolab/dashboard 0.4.61 → 0.4.208

package/src/components/Filter/Filter.vue

@@ -1,147 +1,104 @@
 <template>
-    <div 
-        class="filter-card group text-white text-sm transition-all duration-200 hover:bg-dark-400 relative"
-        :class="{
-            'expanded-filter': filterBuilder.expandedFilter === filter.id,
-            'excluded-filter': filter.exclude,
-            'normal-filter': !filterBuilder.expandedFilter && !filter.exclude
-        }"
-    >
-        <div class="grid grid-cols-12 items-center py-3 px-2 sm:px-4 gap-2 sm:gap-3">
-            <div class="col-span-9 sm:col-span-10">
-                <div class="flex items-center gap-2 sm:gap-3 cursor-pointer flex-1" @click="handleFilterClick(filter.id)">
-                    <div class="filter-type-badge flex-shrink-0">
-                        <component :is="getFilterIcon()" class="w-3 h-3 sm:w-4 sm:h-4" />
-                    </div>
-                    <div class="flex-1 min-w-0">
-                        <h3 class="font-medium text-white group-hover:text-light-400 transition-colors text-sm sm:text-base truncate">{{ filterTitle }}</h3>
-                        <p class="text-xs mt-1 truncate text-light-400" v-if="getFilterSubtitle()">{{ getFilterSubtitle() }}</p>
-                    </div>
+    <div class="text-white text-sm border-t-2 border-t-dark-550">
+        <div class="grid grid-cols-7 items-center">
+            <div class="col-span-6 m-4 sm:m-1 mr-4">
+                <div class="flex items-center h-7 gap-2">
+                    <h3 @click="handleFilterClick(filter.id)">{{ filterTitle }}</h3>
+                    <Checkbox
+                        :class="`${filterBuilder.selectedFilters.includes(filter.id) ? 'border-green-400' : null}`"
+                        :toggled="filterBuilder.isForCurrentEvent(props.filter)"
+                        @click="
+                            filterBuilder.selectedFilters.includes(filter.id)
+                                ? filterBuilder.unselectFilter(filter.id)
+                                : filterBuilder.selectFilter(filter.id)
+                        "
+                    />
                 </div>
-                <div class="expanded-content mt-4 mx-2 sm:mx-0" v-if="filterBuilder.expandedFilter === filter.id">
+                <div @click="handleFilterClick(filter.id)" v-if="filterBuilder.expandedFilter === filter.id">
                     <!-- NORMAL -->
-                    <div v-if="filterType === 2" class="space-y-2">
-                        <div class="info-row">
-                            <span class="label">Section:</span>
-                            <span class="value">{{ filter?.section }}</span>
-                        </div>
-                        <div class="info-row" v-if="filter.rows?.length">
-                            <span class="label">Rows:</span>
-                            <span class="value">{{ filter?.rows?.join(", ") }}</span>
-                        </div>
-                        <div class="info-row">
-                            <span class="label">Event:</span>
-                            <span class="value">{{ filter?.event || filter?.eventId || "-" }}</span>
-                        </div>
+                    <div v-if="filterType === 2">
+                        <p>Section: {{ filter?.section }}</p>
+                        <p v-if="filter.rows?.length">Rows: {{ filter?.rows?.join(", ") }}</p>
+                        <p>Event: {{ filter?.event || filter?.eventId || "-" }}</p>
                     </div>
                     <!-- NORMAL_FIRSTROW -->
-                    <div v-if="filterType === 3" class="space-y-2">
-                        <div class="info-row">
-                            <span class="label">Section:</span>
-                            <span class="value">{{ filter?.section }}</span>
-                        </div>
-                        <div class="info-row">
-                            <span class="label">Row:</span>
-                            <span class="value">{{ filter?._row }}</span>
-                        </div>
-                        <div class="info-row">
-                            <span class="label">Event:</span>
-                            <span class="value">{{ filter?.event || "-" }}</span>
-                        </div>
+                    <div v-if="filterType === 3">
+                        <p>Section: {{ filter?.section }}</p>
+                        <p>Row: {{ filter?._row }}</p>
+                        <p>Event: {{ filter?.event || "-" }}</p>
                     </div>
                     <!-- CATCH_ALL_GA -->
                     <div v-if="filterType === 1">
                         <button
-                            @click.stop="update({ buyAny: true, floor: false, generalAdmission: false })"
-                            class="conversion-btn"
+                            @click="update({ buyAny: true, floor: false, generalAdmission: false })"
+                            class="border-2 rounded border-dark-550 px-1 h-8 my-2 text-gray bg-dark-550 overflow-hidden"
                         >
-                            <component :is="'WildcardIcon'" class="w-4 h-4" />
                             Convert to wildcard
                         </button>
                     </div>
                     <!-- CATCH_ALL -->
                     <div v-if="filterType === 0">
                         <button
-                            @click.stop="update({ floor: true, buyAny: false, generalAdmission: false })"
-                            class="conversion-btn"
+                            @click="update({ floor: true, buyAny: false, generalAdmission: false })"
+                            class="border-2 rounded border-dark-550 px-1 h-8 text-gray my-2 bg-dark-550 overflow-hidden"
                         >
-                            <component :is="'BoxIcon'" class="w-4 h-4" />
                             Convert to Floor Wildcard
                         </button>
                     </div>
                     <!-- CATCH_ALL_FLOOR -->
                     <div v-if="filterType === 5">
                         <button
-                            @click.stop="update({ generalAdmission: true, floor: false, buyAny: false })"
-                            class="conversion-btn"
+                            @click="update({ generalAdmission: true, floor: false, buyAny: false })"
+                            class="border-2 rounded border-dark-550 px-1 h-8 text-gray my-2 bg-dark-550 overflow-hidden"
                         >
-                            <component :is="'GroupIcon'" class="w-4 h-4" />
                             Convert to GA Wildcard
                         </button>
                     </div>
                 </div>
-                <div v-if="filterBuilder.expandedFilter === filter.id" class="controls-section mt-4 mx-2 sm:mx-0">
-                    <div class="flex flex-col sm:flex-row flex-wrap gap-3 sm:items-center">
-                        <div class="flex items-center gap-2 control-group">
-                            <Checkbox :toggled="filter.exclude || false" @valueUpdate="handleExcludeClick" />
-                            <label class="text-sm font-medium">Excluded</label>
-                        </div>
-                        <div class="flex items-center gap-2 control-group">
-                            <label class="text-xs whitespace-nowrap text-light-400">Min:</label>
-                            <input
-                                type="number"
-                                :value="filter.minPrice"
-                                @change="
-                                    (e) =>
-                                        update(
-                                            {
-                                                minPrice: e.target.value - 0
-                                            },
-                                            true
-                                        )
-                                "
-                                placeholder="0"
-                                class="filter-input w-16 sm:w-20"
-                            />
-                        </div>
-                        <div class="flex items-center gap-2 control-group">
-                            <label class="text-xs whitespace-nowrap text-light-400">Max:</label>
-                            <input
-                                type="number"
-                                :value="filter.maxPrice"
-                                @change="
-                                    (e) =>
-                                        update(
-                                            {
-                                                maxPrice: e.target.value - 0
-                                            },
-                                            true
-                                        )
-                                "
-                                placeholder="1000"
-                                class="filter-input w-16 sm:w-20"
-                            />
-                        </div>
-                        <div class="control-group">
-                            <PriceSortToggle
-                                :current="filter.priceSort"
-                                @change="(e) => props.filterBuilder.replaceById(filter.id, { priceSort: e })"
-                            />
-                        </div>
+                <div v-if="filterBuilder.expandedFilter === filter.id" class="flex gap-2 items-center">
+                    <div class="flex items-center gap-2">
+                        <Checkbox :toggled="filter.exclude || false" @valueUpdate="handleExcludeClick" />
+                        <p>Excluded</p>
                     </div>
+                    <input
+                        type="text"
+                        :value="filter.minPrice"
+                        @change="
+                            (e) =>
+                                update(
+                                    {
+                                        minPrice: e.target.value - 0
+                                    },
+                                    true
+                                )
+                        "
+                        placeholder="min"
+                        class="w-16 bg-dark-500 border-2 rounded border-dark-550 px-1 h-8"
+                    />
+                    <input
+                        type="number"
+                        :value="filter.maxPrice"
+                        @change="
+                            (e) =>
+                                update(
+                                    {
+                                        maxPrice: e.target.value - 0
+                                    },
+                                    true
+                                )
+                        "
+                        placeholder="max"
+                        class="w-16 bg-dark-500 border-2 rounded border-dark-550 px-1 h-8"
+                    />
+                    <PriceSortToggle
+                        :current="filter.priceSort"
+                        @change="(e) => props.filterBuilder.replaceById(filter.id, { priceSort: e })"
+                    />
                 </div>
             </div>
-            <div class="col-span-3 sm:col-span-2 flex justify-end items-center gap-1 sm:gap-2">
-                <div class="drag-handle handle filter-action-btn drag-btn cursor-grab active:cursor-grabbing" title="Drag to reorder">
-                    <MenuIcon class="w-3 h-3 sm:w-4 sm:h-4" />
-                </div>
-                <button 
-                    @click="filterBuilder.deleteFilterById(filter.id)" 
-                    class="delete-btn filter-action-btn"
-                    title="Delete filter"
-                >
-                    <TrashIcon class="w-3 h-3 sm:w-4 sm:h-4" />
-                </button>
+            <div class="col-span-1 flex justify-self-end m-1 items-center gap-2">
+                <MenuIcon class="scale-75 cursor-grab handle" />
+                <TrashIcon class="cursor-pointer" @click="filterBuilder.deleteFilterById(filter.id)" />
             </div>
         </div>
     </div>
@@ -156,7 +113,7 @@ import { useUIStore } from "@/stores/ui";
 const ui = useUIStore();
 
 // eslint-disable-next-line no-unused-vars
-import { UpIcon, DownIcon, ReloadIcon, TrashIcon, MenuIcon, WildcardIcon, BoxIcon, GroupIcon, FilterIcon, StadiumIcon } from "@/components/icons";
+import { UpIcon, DownIcon, ReloadIcon, TrashIcon, MenuIcon } from "@/components/icons";
 
 let isAllRows = ref(false);
 
@@ -179,46 +136,6 @@ const handleFilterClick = (id) => {
 };
 
 const filterTypes = props.filterBuilder.filterTypes;
-
-const getFilterIcon = () => {
-    switch (filterType.value) {
-        case filterTypes.CATCH_ALL:
-            return WildcardIcon;
-        case filterTypes.CATCH_ALL_GA:
-            return GroupIcon;
-        case filterTypes.CATCH_ALL_FLOOR:
-            return BoxIcon;
-        case filterTypes.NORMAL:
-        case filterTypes.NORMAL_FIRSTROW:
-            return StadiumIcon;
-        default:
-            return FilterIcon;
-    }
-};
-
-const getFilterSubtitle = () => {
-    switch (filterType.value) {
-        case filterTypes.NORMAL: {
-            const selectedRowAmount = filter.value?.rows?.length;
-            if (filter.value?.rows?.length && selectedRowAmount <= 5) {
-                return `Rows: ${filter.value.rows.join(", ")}`;
-            } else if (selectedRowAmount > 5) {
-                return `${selectedRowAmount} rows selected`;
-            }
-            return selectedRowAmount === 0 ? "Full section" : null;
-        }
-        case filterTypes.NORMAL_FIRSTROW:
-            return `First row in ${filter.value.section}`;
-        case filterTypes.CATCH_ALL:
-            return "Matches all tickets";
-        case filterTypes.CATCH_ALL_GA:
-            return "Matches all GA tickets";
-        case filterTypes.CATCH_ALL_FLOOR:
-            return "Matches all floor tickets";
-        default:
-            return null;
-    }
-};
 const getFilterTitle = () => {
     const excluded = filter.value.exclude ? "[BL]" : "";
     switch (filterType.value) {
@@ -235,7 +152,7 @@ const getFilterTitle = () => {
             return `${filter.value.section} (first row) ${excluded}`;
         case filterTypes.NORMAL: {
             const selectedRowAmount = filter.value?.rows?.length;
-            const totalRowAmount = document.querySelectorAll(`path[section='${filter.value.section}']`)?.length;
+            const totalRowAmount = document.querySelectorAll(`path[sectionname='${filter.value.section}']`)?.length;
             isAllRows.value = selectedRowAmount === totalRowAmount || !filter.value?.rows?.length;
 
             if (isAllRows.value) return `${filter.value.section} (full section) ${excluded}`;
@@ -285,137 +202,3 @@ props.filterBuilder.onUpdate(() => {
     // else if (newData.id === filter.value.id) update(newData);
 });
 </script>
-
-<style scoped>
-.filter-card {
-    @apply bg-dark-500 border-dark-550 relative;
-    border: 1px solid rgba(61, 62, 68, 0.3);
-    margin-bottom: 8px;
-    transition: all 0.15s ease-out;
-}
-
-.filter-card:hover:not(.expanded-filter) {
-    border-color: rgba(61, 62, 68, 0.6);
-    background-color: rgba(46, 47, 52, 0.8);
-}
-
-.expanded-filter:hover {
-    border-color: rgba(61, 62, 68, 0.8);
-}
-
-.filter-card + .filter-card {
-    border-top: 1px solid rgba(61, 62, 68, 0.2);
-}
-
-.filter-type-badge {
-    @apply w-6 h-6 sm:w-8 sm:h-8 rounded-full bg-dark-400 flex items-center justify-center flex-shrink-0;
-}
-
-.info-row {
-    @apply flex justify-between items-center;
-}
-
-.label {
-    @apply text-xs font-medium text-light-400;
-}
-
-.value {
-    @apply text-sm text-white;
-}
-
-.conversion-btn {
-    @apply flex items-center gap-2 px-3 py-2 bg-dark-400 hover:bg-dark-300 border border-dark-550 rounded-md text-sm font-medium transition-colors;
-}
-
-.control-group {
-    @apply flex items-center gap-2;
-}
-
-.filter-input {
-    @apply border border-dark-550 rounded px-2 py-1.5 text-sm text-white focus:outline-none transition-colors;
-    background-color: rgba(35, 36, 41, 0.9);
-    color: white;
-}
-
-.filter-input:focus {
-    border-color: #44454b;
-    background-color: rgba(46, 47, 52, 0.9);
-}
-
-.filter-input::placeholder {
-    color: #9CA3AF;
-}
-
-.filter-action-btn {
-    @apply flex items-center justify-center rounded-full transition-all duration-200 border-2 border-transparent;
-    width: 28px;
-    height: 28px;
-    color: #9CA3AF;
-    background-color: rgba(35, 36, 41, 0.8);
-    backdrop-filter: blur(4px);
-}
-
-@media (min-width: 640px) {
-    .filter-action-btn {
-        width: 32px;
-        height: 32px;
-    }
-}
-
-.filter-action-btn:hover {
-    color: white;
-    transform: scale(1.15);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-}
-
-.drag-btn:hover {
-    background-color: rgba(68, 69, 75, 0.8);
-    border-color: #44454b;
-}
-
-.delete-btn:hover {
-    background-color: rgba(239, 68, 68, 0.8);
-    border-color: #F87171;
-    color: #F87171;
-}
-
-.drag-handle.sortable-chosen {
-    border: 1px solid #44454b;
-    background-color: rgba(68, 69, 75, 0.2);
-}
-
-.filter-card.sortable-ghost {
-    @apply opacity-50;
-    border: 1px solid #44454b;
-    background-color: rgba(68, 69, 75, 0.1);
-}
-
-.filter-card.sortable-drag {
-    @apply shadow-lg transform rotate-2 scale-105;
-}
-
-.expanded-filter {
-    border-left: 4px solid #44454b;
-    background-color: rgba(26, 27, 30, 0.95);
-}
-
-.expanded-content {
-    background-color: rgba(26, 27, 30, 0.95);
-    border-radius: 6px;
-    padding: 12px;
-}
-
-.controls-section {
-    background-color: rgba(26, 27, 30, 0.98);
-    border-radius: 6px;
-    padding: 12px;
-}
-
-.excluded-filter {
-    border-left: 4px solid #EE8282;
-}
-
-.normal-filter {
-    border-left: 4px solid transparent;
-}
-</style>

package/src/components/Filter/FilterPreview.vue

@@ -1,31 +1,35 @@
 <template>
     <Modal class="overflow-y-scroll max-w-screen">
-        <template #header>
-            Filter JSON data
-            <FilterIcon class="ml-4" />
-        </template>
-
-        <div class="my-3">
-            <div class="editor-container">
-                <div class="editor-wrapper">
-                    <pre ref="codeDisplay" class="language-json code-highlight"></pre>
-                    <textarea
-                        ref="codeEditor"
-                        v-model="text"
-                        class="code-editor"
-                        spellcheck="false"
-                        @scroll="syncScroll"
-                        @input="highlightCode"
-                        @keydown.tab.prevent="handleTab"></textarea>
-                </div>
-            </div>
-            <p class="text-red-400 text-bold mt-2">{{ errorMessage }}</p>
+        <template #header> Filter JSON data <FilterIcon class="ml-4" /> </template>
+
+        <div class="max-h-80 overflow-auto hidden-scrollbars z-0 my-3">
+            <CodeEditor
+                v-model="text"
+                width="100%"
+                spellcheck="false"
+                :hide_header="true"
+                :language_selector="false"
+                :languages="[['json', 'JSON']]"
+                theme="dark"
+                class=""
+            ></CodeEditor>
+            <p class="text-red-400 text-bold">{{ errorMessage }}</p>
         </div>
 
         <div class="ml-auto flex">
-            <button class="btn-action" @click="save()">Apply</button>
-
-            <button class="btn-action ml-2" @click="done()">Close</button>
+            <button
+                class="button-default hover:opacity-70 active:opacity-50 bg-dark-400 w-48 text-xs flex items-center justify-center gap-x-2"
+                @click="save()"
+            >
+                Apply
+            </button>
+
+            <button
+                class="button-default hover:opacity-70 active:opacity-50 bg-dark-400 w-48 text-xs flex items-center justify-center gap-x-2 ml-2"
+                @click="done()"
+            >
+                Close
+            </button>
         </div>
     </Modal>
 </template>
@@ -35,165 +39,20 @@
         @apply flex;
     }
 }
-
-/* Prism.js syntax highlighting styles */
-.editor-container {
-    position: relative;
-    min-height: 300px;
-    max-height: 500px;
-    border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-    overflow: hidden;
-    background-color: #2e2f34;
-}
-
-.editor-wrapper {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    min-height: 300px;
-    max-height: 500px;
-}
-
-.code-editor {
-    width: 100%;
-    height: 100%;
-    min-height: 300px;
-    max-height: 500px;
-    background-color: transparent;
-    /* Make text completely transparent */
-    color: rgba(0, 0, 0, 0);
-    caret-color: #e2e8f0;
-    font-family: "JetBrains Mono", "Fira Code", "Menlo", "Monaco", "Courier New", monospace;
-    padding: 12px;
-    border: none;
-    resize: none;
-    font-size: 14px;
-    line-height: 1.6;
-    tab-size: 4;
-    outline: none;
-    border: 1px solid #3d3e44;
-    border-radius: 8px;
-    z-index: 10;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    white-space: pre;
-    overflow: auto;
-}
-
-.code-highlight {
-    width: 100%;
-    height: 100%;
-    min-height: 300px;
-    max-height: 500px;
-    overflow: auto;
-    white-space: pre;
-    font-family: "JetBrains Mono", "Fira Code", "Menlo", "Monaco", "Courier New", monospace;
-    font-size: 14px;
-    line-height: 1.6;
-    background-color: transparent !important;
-    pointer-events: none;
-    z-index: 5;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    padding: 12px;
-    margin: 0;
-}
 </style>
 <script setup>
 import Modal from "@/components/ui/Modal.vue";
 import { FilterIcon } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
-import { ref, computed, onMounted, nextTick } from "vue";
+import { ref, computed } from "vue";
+import CodeEditor from "simple-code-editor";
 
 const props = defineProps({
     filter: Object
 });
 
 const ui = useUIStore();
-const text = ref(JSON.stringify(props.filter.out(), null, 4));
-const codeEditor = ref(null);
-const codeDisplay = ref(null);
-
-// Function to highlight code using Prism
-const highlightCode = () => {
-    if (!codeDisplay.value || !codeEditor.value) return;
-
-    // Ensure Prism is available
-    if (typeof Prism === "undefined") {
-        console.error("Prism is not loaded");
-        return;
-    }
-
-    // Use requestAnimationFrame for smoother updates
-    requestAnimationFrame(() => {
-        try {
-            // Update the pre element with highlighted HTML
-            const highlighted = Prism.highlight(text.value || "", Prism.languages.json, "json");
-            codeDisplay.value.innerHTML = highlighted;
-            codeDisplay.value.className = "language-json code-highlight";
-        } catch (e) {
-            console.error("Highlight error:", e);
-            // Fallback to plain text if highlighting fails
-            codeDisplay.value.textContent = text.value || "";
-        }
-
-        // Ensure scroll positions are synced after highlighting
-        syncScroll();
-    });
-};
-
-// Function to sync scrolling between textarea and highlighted code
-const syncScroll = () => {
-    if (!codeDisplay.value || !codeEditor.value) return;
-
-    // Synchronize scrolling between the textarea and the highlighted code
-    requestAnimationFrame(() => {
-        codeDisplay.value.scrollTop = codeEditor.value.scrollTop;
-        codeDisplay.value.scrollLeft = codeEditor.value.scrollLeft;
-    });
-};
-
-// Function to handle tab key press in the editor
-const handleTab = (e) => {
-    const textarea = codeEditor.value;
-    const start = textarea.selectionStart;
-    const end = textarea.selectionEnd;
-
-    // Insert 4 spaces at cursor position
-    const spaces = "    ";
-    text.value = text.value.substring(0, start) + spaces + text.value.substring(end);
-
-    // Move cursor position after the inserted tab
-    nextTick(() => {
-        textarea.selectionStart = textarea.selectionEnd = start + spaces.length;
-        highlightCode();
-    });
-};
-
-// Initialize syntax highlighting
-onMounted(() => {
-    // Apply highlighting when the component is mounted
-    nextTick(() => {
-        highlightCode();
-
-        // Ensure scroll synchronization on initial load
-        if (codeEditor.value && codeDisplay.value) {
-            syncScroll();
-        }
-
-        // Focus the editor
-        if (codeEditor.value) {
-            codeEditor.value.focus();
-        }
-    });
-});
+const text = ref(JSON.stringify(props.filter.out(), null, "\t"));
 
 function done() {
     ui.toggleModal("");