From ace554fb198694ae85fb99becab81ae70456a335 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Fri, 5 Apr 2024 14:46:18 +0200
Subject: [PATCH] feat: add more filters

---
 app/components/OptionSelectGroup.vue |  8 +++--
 app/composables/state.ts             |  4 +--
 app/pages/rules.vue                  | 52 ++++++++++++++++++++++++----
 3 files changed, 54 insertions(+), 10 deletions(-)

diff --git a/app/components/OptionSelectGroup.vue b/app/components/OptionSelectGroup.vue
index 7db2efc..b437d37 100644
--- a/app/components/OptionSelectGroup.vue
+++ b/app/components/OptionSelectGroup.vue
@@ -27,11 +27,15 @@ const value = defineModel<string | number>('modelValue', {
     >
       <div
         :class="[
-          i === value ? '' : 'op35',
+          i === value ? '' : 'op35 saturate-0',
           titles?.[idx] ? '' : 'capitalize',
           classes?.[idx] || '',
         ]"
-      >{{ titles?.[idx] ?? i }}</div>
+      >
+        <slot :value="i" :title="titles?.[idx]" :index="idx">
+          {{ titles?.[idx] ?? i }}
+        </slot>
+      </div>
       <input
         v-model="value" type="radio" :value="i"
         :title="titles?.[idx]"
diff --git a/app/composables/state.ts b/app/composables/state.ts
index bfe9a87..31a1e8e 100644
--- a/app/composables/state.ts
+++ b/app/composables/state.ts
@@ -9,8 +9,8 @@ export const filtersConfigs = reactive<FiltersConfigsPage>({
 export const filtersRules = reactive({
   plugin: '',
   search: '',
-  state: 'using' as 'using' | 'unused' | 'overloads' | '',
-  status: 'active' as 'deprecated' | 'active' | 'recommended' | '',
+  state: 'using' as 'using' | 'unused' | 'overloads' | 'error' | 'warn' | 'off' | 'off-only' | '',
+  status: 'active' as 'deprecated' | 'active' | 'recommended' | 'fixable' | '',
   fixable: null as boolean | null,
 })
 
diff --git a/app/pages/rules.vue b/app/pages/rules.vue
index 7f1e769..a7532e2 100644
--- a/app/pages/rules.vue
+++ b/app/pages/rules.vue
@@ -31,6 +31,23 @@ const conditionalFiltered = computed(() => {
     case 'overloads':
       conditional = conditional.filter(rule => (payload.value.ruleStateMap.get(rule.name)?.length || 0) > 1)
       break
+    case 'error':
+      conditional = conditional.filter(rule => payload.value.ruleStateMap.get(rule.name)?.some(i => i.level === 'error'))
+      break
+    case 'warn':
+      conditional = conditional.filter(rule => payload.value.ruleStateMap.get(rule.name)?.some(i => i.level === 'warn'))
+      break
+    case 'off':
+      conditional = conditional.filter(rule => payload.value.ruleStateMap.get(rule.name)?.some(i => i.level === 'off'))
+      break
+    case 'off-only':
+      conditional = conditional.filter((rule) => {
+        const states = payload.value.ruleStateMap.get(rule.name)
+        if (!states?.length)
+          return false
+        return states.every(i => i.level === 'off')
+      })
+      break
   }
 
   switch (filters.status) {
@@ -40,6 +57,9 @@ const conditionalFiltered = computed(() => {
     case 'recommended':
       conditional = conditional.filter(rule => rule.docs?.recommended)
       break
+    case 'fixable':
+      conditional = conditional.filter(rule => rule.fixable)
+      break
     case 'deprecated':
       conditional = conditional.filter(rule => rule.deprecated)
       break
@@ -110,17 +130,37 @@ function resetFilters() {
         </div>
         <OptionSelectGroup
           v-model="filters.state"
-          :options="['', 'using', 'overloads', 'unused']"
-          :titles="['All', 'Using', 'Overloaded', 'Unused']"
-        />
+          :options="['', 'using', 'unused', 'error', 'warn', 'off', 'overloads', 'off-only']"
+          :titles="['All', 'Using', 'Unused', 'Error', 'Warn', 'Off', 'Overloaded', 'Off Only']"
+        >
+          <template #default="{ value, title }">
+            <div class="flex items-center">
+              <div flex ml--1 mr-1 items-center>
+                <RuleLevelIcon v-if="value === 'error' || value === 'overloads'" level="error" />
+                <RuleLevelIcon v-if="value === 'warn' || value === 'overloads'" level="warn" />
+                <RuleLevelIcon v-if="value === 'off' || value === 'off-only' || value === 'overloads'" level="off" />
+              </div>
+              {{ title || value }}
+            </div>
+          </template>
+        </OptionSelectGroup>
         <div text-right text-sm op50>
           State
         </div>
         <OptionSelectGroup
           v-model="filters.status"
-          :options="['', 'active', 'recommended', 'deprecated']"
-          :titles="['All', 'Active', 'Recommended', 'Deprecated']"
-        />
+          :options="['', 'active', 'recommended', 'fixable', 'deprecated']"
+          :titles="['All', 'Active', 'Recommended', 'Fixable', 'Deprecated']"
+        >
+          <template #default="{ value, title }">
+            <div flex gap-1 items-center>
+              <div v-if="value === 'recommended'" ml--0.5 i-ph-check-square-duotone text-green />
+              <div v-if="value === 'fixable'" ml--0.5 i-ph-wrench-duotone text-amber />
+              <div v-if="value === 'deprecated'" ml--1 i-ph-prohibit-inset-duotone text-gray />
+              {{ title || value }}
+            </div>
+          </template>
+        </OptionSelectGroup>
       </div>
     </div>