@necrolab/dashboard 0.4.3

package/src/components/Editors/TagToggle.vue

@@ -0,0 +1,41 @@
+<template>
+    <button
+        @click="increase"
+        class="h-10 px-1 text-white bg-dark-500 relative border-2 border-dark-550 overflow-hidden"
+    >
+        <span v-if="sortOptions[currentOpt % sortOptions.length] === 'Enabled'"
+            ><img class="mx-auto" height="16px" width="14px" src="@/assets/img/square_check.svg"
+        /></span>
+        <span v-else-if="sortOptions[currentOpt % sortOptions.length] === 'Disabled'"
+            ><img class="mx-auto" height="16px" width="14px" src="@/assets/img/square_uncheck.svg"
+        /></span>
+        <!-- <span v-else-if="sortOptions[currentOpt % sortOptions.length] === 'All'"
+            ><img height="16px" width="14px" src="@/assets/img/wildcard.svg"
+        /></span> -->
+        <span v-else>{{ sortOptions[currentOpt % sortOptions.length] }}</span>
+    </button>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+let sortOptions = ref([]);
+const currentOpt = ref(0);
+
+const props = defineProps({
+    filter: Object,
+    index: Number,
+    expandedFilter: Number,
+    filterBuilder: Object,
+    options: Object
+});
+
+sortOptions.value = props.options;
+
+const emit = defineEmits(["change"]);
+
+const increase = () => {
+    currentOpt.value++;
+    emit("change", sortOptions.value[currentOpt.value % sortOptions.value.length]);
+};
+</script>

package/src/components/Filter/Filter.vue

@@ -0,0 +1,409 @@
+<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 text-gray mt-1 truncate" v-if="getFilterSubtitle()">{{ getFilterSubtitle() }}</p>
+                    </div>
+                </div>
+                <div class="expanded-content mt-4 mx-2 sm:mx-0" 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>
+                    <!-- 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>
+                    <!-- CATCH_ALL_GA -->
+                    <div v-if="filterType === 1">
+                        <button
+                            @click.stop="update({ buyAny: true, floor: false, generalAdmission: false })"
+                            class="conversion-btn"
+                        >
+                            <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"
+                        >
+                            <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"
+                        >
+                            <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 text-gray whitespace-nowrap">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 text-gray whitespace-nowrap">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>
+                </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>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
+import PriceSortToggle from "@/components/Filter/PriceSortToggle.vue";
+import { ref } from "vue";
+
+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";
+
+let isAllRows = ref(false);
+
+const props = defineProps({
+    filter: Object,
+    index: Number,
+    expandedFilter: String,
+    filterBuilder: Object
+});
+
+const handleFilterClick = (id) => {
+    if (props.filterBuilder.expandedFilter === id) {
+        props.filterBuilder.setExpandedFilter(null);
+        props.filterBuilder.updateCss();
+    } else {
+        ui.logger.Info("Expanding filter", filter);
+        props.filterBuilder.setExpandedFilter(id);
+        props.filterBuilder.updateCss();
+    }
+};
+
+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) {
+        case filterTypes.INVALID:
+            ui.logger.Error("Invalid:", filter.value);
+            return `🟥 INVALID FILTER ${excluded}`;
+        case filterTypes.CATCH_ALL:
+            return `Catch-All ${excluded}`;
+        case filterTypes.CATCH_ALL_GA:
+            return `Catch-All (GA) ${excluded}`;
+        case filterTypes.GLOBAL_FIRSTROW:
+            return `All first rows ${excluded}`;
+        case filterTypes.NORMAL_FIRSTROW:
+            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;
+            isAllRows.value = selectedRowAmount === totalRowAmount || !filter.value?.rows?.length;
+
+            if (isAllRows.value) return `${filter.value.section} (full section) ${excluded}`;
+            else if (selectedRowAmount > 5) return `${filter.value.section} (${selectedRowAmount} rows) ${excluded}`;
+            else if (selectedRowAmount === 0) return `${filter.value.section} (no rows selected) ${excluded}`;
+            else {
+                const rows = "(" + filter.value.rows?.join(", ") + ")";
+                return `${filter.value.section} ${filter.value.rows?.length ? rows : ""} ${excluded}`;
+            }
+        }
+
+        case filterTypes.CATCH_ALL_FLOOR:
+            return `Catch-All (Floor) ${excluded}`;
+        default:
+            ui.logger.Info("Title: Other:", filter.value);
+            return `Other ${filterType.value}`;
+    }
+};
+
+const handleExcludeClick = (e) => {
+    filter.value = props.filterBuilder.replaceById(filter.value.id, { exclude: e });
+};
+
+const update = (args, updateAll = false) => {
+    ui.logger.Info(`[${props.filter.id}] update`, args, updateAll);
+    delete args.id;
+    args.event = props.filterBuilder.currentEventId;
+    const updated = props.filterBuilder.replaceById(filter.value.id, args);
+    if (!updated) return;
+    filter.value = updated;
+    filterType.value = props.filterBuilder.getFilterType(updated);
+    filterTitle.value = getFilterTitle();
+    if (updateAll) props.filterBuilder.updateHooks.forEach((fn) => fn());
+};
+
+let filter = ref(props.filter);
+let filterType = ref(props.filterBuilder.getFilterType(filter.value));
+let filterTitle = ref(getFilterTitle());
+
+props.filterBuilder.onUpdate(() => {
+    const newData = props.filterBuilder.filters.find((e) => e.id === filter.value.id) || {};
+    ui.logger.Info(`[${props.filter.id}] calling onUpdate`, newData);
+    if (typeof newData.maxPrice === "number") update({ maxPrice: newData.maxPrice });
+    else {
+        filterTitle.value = getFilterTitle();
+    }
+    // else if (newData.id === filter.value.id) update(newData);
+});
+</script>
+
+<style scoped>
+.filter-card {
+    @apply bg-dark-500 border border-dark-550 mb-1 shadow-sm relative;
+}
+
+.filter-card:not(:last-child) {
+    border-bottom: 2px solid #1B1C2B;
+}
+
+.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 text-gray font-medium;
+}
+
+.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(32, 32, 54, 0.9);
+    color: white;
+}
+
+.filter-input:focus {
+    border-color: #4A4A61;
+    background-color: rgba(45, 47, 74, 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(32, 32, 54, 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(74, 74, 97, 0.8);
+    border-color: #4A4A61;
+}
+
+.delete-btn:hover {
+    background-color: rgba(239, 68, 68, 0.8);
+    border-color: #F87171;
+    color: #F87171;
+}
+
+.drag-handle.sortable-chosen {
+    border: 1px solid #4A4A61;
+    background-color: rgba(74, 74, 97, 0.2);
+}
+
+.filter-card.sortable-ghost {
+    @apply opacity-50;
+    border: 1px solid #4A4A61;
+    background-color: rgba(74, 74, 97, 0.1);
+}
+
+.filter-card.sortable-drag {
+    @apply shadow-lg transform rotate-2 scale-105;
+}
+
+.expanded-filter {
+    border-left: 4px solid #4A4A61;
+    background-color: rgba(27, 28, 43, 0.95);
+}
+
+.expanded-content {
+    background-color: rgba(27, 28, 43, 0.95);
+    border-radius: 6px;
+    padding: 12px;
+}
+
+.controls-section {
+    background-color: rgba(27, 28, 43, 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

@@ -0,0 +1,236 @@
+<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>
+        </div>
+
+        <div class="ml-auto flex">
+            <button
+                class="btn-action"
+                @click="save()"
+            >
+                Apply
+            </button>
+
+            <button
+                class="btn-action ml-2"
+                @click="done()"
+            >
+                Close
+            </button>
+        </div>
+    </Modal>
+</template>
+<style lang="scss" scoped>
+.input-wrapper {
+    label {
+        @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: #1a1a2e;
+}
+
+.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 #2d2d3b;
+    border-radius: 8px;
+    z-index: 10;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    white-space: pre;
+    overflow: auto;
+}
+
+/* Enhance the text selection color */
+.code-editor::selection {
+    background: rgba(98, 114, 164, 0.4);
+}
+
+.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";
+
+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();
+        }
+    });
+});
+
+function done() {
+    ui.toggleModal("");
+}
+
+function save() {
+    const out = JSON.parse(text.value);
+    props.filter.reset();
+    props.filter.globalFilter = out.globalFilter;
+    props.filter.filters = out.filters;
+    props.filter.updateCss();
+    done();
+}
+
+const errorMessage = computed(() => {
+    try {
+        JSON.stringify(JSON.parse(text.value), null, 4);
+        return "";
+    } catch (e) {
+        return e.message;
+    }
+});
+</script>