@necrolab/dashboard 0.4.220 → 0.5.1

package/src/components/Editors/TagToggle.vue

@@ -1,7 +1,8 @@
 <template>
     <button
         @click="increase"
-        class="h-10 px-1 text-white bg-dark-500 relative border-2 border-dark-550 overflow-hidden"
+        class="h-10 px-1 text-white bg-dark-500 relative overflow-hidden"
+        :class="noBorder ? 'border-0' : 'border-2 border-dark-550'"
     >
         <span v-if="sortOptions[currentOpt % sortOptions.length] === 'Enabled'"
             ><img class="mx-auto" height="16px" width="14px" src="@/assets/img/square_check.svg"
@@ -27,7 +28,11 @@ const props = defineProps({
     index: Number,
     expandedFilter: Number,
     filterBuilder: Object,
-    options: Object
+    options: Object,
+    noBorder: {
+        type: Boolean,
+        default: false
+    }
 });
 
 sortOptions.value = props.options;

package/src/components/Filter/Filter.vue

@@ -1,104 +1,147 @@
 <template>
-    <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 
+        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>
-                <div @click="handleFilterClick(filter.id)" v-if="filterBuilder.expandedFilter === filter.id">
+                <div class="expanded-content mt-4 mx-2 sm:mx-0" v-if="filterBuilder.expandedFilter === filter.id">
                     <!-- NORMAL -->
-                    <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 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">
-                        <p>Section: {{ filter?.section }}</p>
-                        <p>Row: {{ filter?._row }}</p>
-                        <p>Event: {{ filter?.event || "-" }}</p>
+                    <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="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"
+                            @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="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"
+                            @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="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"
+                            @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="flex gap-2 items-center">
-                    <div class="flex items-center gap-2">
-                        <Checkbox :toggled="filter.exclude || false" @valueUpdate="handleExcludeClick" />
-                        <p>Excluded</p>
+                <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>
-                    <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-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 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>
@@ -113,7 +156,7 @@ import { useUIStore } from "@/stores/ui";
 const ui = useUIStore();
 
 // eslint-disable-next-line no-unused-vars
-import { UpIcon, DownIcon, ReloadIcon, TrashIcon, MenuIcon } from "@/components/icons";
+import { UpIcon, DownIcon, ReloadIcon, TrashIcon, MenuIcon, WildcardIcon, BoxIcon, GroupIcon, FilterIcon, StadiumIcon } from "@/components/icons";
 
 let isAllRows = ref(false);
 
@@ -136,6 +179,46 @@ 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) {
@@ -202,3 +285,137 @@ 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: oklch(0.28 0 0);
+    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: oklch(0.28 0 0);
+}
+
+.delete-btn:hover {
+    background-color: rgba(239, 68, 68, 0.8);
+    border-color: #F87171;
+    color: #F87171;
+}
+
+.drag-handle.sortable-chosen {
+    border: 1px solid oklch(0.28 0 0);
+    background-color: rgba(68, 69, 75, 0.2);
+}
+
+.filter-card.sortable-ghost {
+    @apply opacity-50;
+    border: 1px solid oklch(0.28 0 0);
+    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 oklch(0.28 0 0);
+    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>