feat: add language filter

Author: HerringtonDarkholme

website/src/catalog/RuleFilter.vue

@@ -1,24 +1,30 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
+import { watchEffect, ref } from 'vue'
 import {
   languages,
   ruleFilters,
   features,
   ruleTypes,
+  type Filter,
 } from './data'
 
-const filter = reactive({
+const model = defineModel<Filter>()
+
+const filter = ref({
   selectedLanguages: [] as string[],
   selectedRuleFilters: [] as string[],
   selectedFeatures: [] as string[],
   selectedTypes: [] as string[],
-  sortBy: 'name',
+})
+
+watchEffect(() => {
+  model.value = filter.value
 })
 
 </script>
 <template>
   <form class="filters">
-    <details>
+    <details open>
       <summary>Language Filters</summary>
       <div class="checkbox-group">
         <label v-for="lang in languages" :key="lang">
@@ -28,7 +34,7 @@ const filter = reactive({
       </div>
     </details>
 
-    <details class="filter-group">
+    <details class="filter-group" style="display: none;">
       <summary>Rule Filters</summary>
       <div class="rule-group">
         <div v-for="rules, type in ruleFilters">
@@ -43,7 +49,7 @@ const filter = reactive({
       </div>
     </details>
 
-    <details class="filter-group">
+    <details class="filter-group" style="display: none;">
       <summary>More Filters</summary>
       <div class="rule-group">
         <div>
@@ -64,19 +70,6 @@ const filter = reactive({
             </label>
           </div>
         </div>
-        <div>
-          <em>Sort By</em>
-          <div>
-            <label>
-              <input value="name" type="radio" v-model="filter.sortBy"/>
-              Name
-            </label>
-            <label>
-              <input value="complexity" type="radio" v-model="filter.sortBy"/>
-              Complexity
-            </label>
-          </div>
-        </div>
       </div>
     </details>
   </form>

website/src/catalog/RuleList.vue

@@ -1,11 +1,21 @@
 <script setup lang="ts">
+import { type Filter, getRules } from './data'
+import { computed, type PropType } from 'vue'
 
-import { data as rules } from '../../_data/catalog.data'
+const props = defineProps({
+  filter: {
+    type: Object as PropType<Filter>,
+    required: true,
+  }
+})
 
+const rules = computed(() => getRules(props.filter))
 </script>
 
 <template>
-  <h2> Rule List </h2>
+  <h2>
+    Rule List
+  </h2>
   <ul class="rule-list">
     <li v-for="rule in rules" :key="rule.language + rule.id" class="rule-item">
       <div class="rule-header">

website/src/catalog/data.ts

@@ -1,6 +1,26 @@
+import { data as allRules } from '../../_data/catalog.data'
+
+export function getRules(filter: Filter): Rule[] {
+  const {
+    selectedLanguages,
+    selectedRuleFilters,
+    selectedFeatures,
+  } = filter
+  return allRules.filter(rule => {
+    return !selectedLanguages.length || selectedLanguages.map(s => s.toLowerCase()).includes(rule.language)
+  })
+}
+
+export type Filter = {
+  selectedLanguages: string[],
+  selectedRuleFilters: string[],
+  selectedFeatures: string[],
+  selectedTypes: string[],
+}
+
 export const languages = [
   'C',
-  'C++',
+  'Cpp',
   'Go',
   'HTML',
   'Java',

website/src/catalog/index.vue

@@ -1,12 +1,19 @@
 <script setup lang="ts">
-// TODO: add rule filter
-// import RuleFilter from './RuleFilter.vue'
+import { ref } from 'vue'
+const filter = ref({
+  selectedLanguages: [] as string[],
+  selectedRuleFilters: [] as string[],
+  selectedFeatures: [] as string[],
+  selectedTypes: [] as string[],
+})
+import RuleFilter from './RuleFilter.vue'
 import RuleList from './RuleList.vue'
 </script>
 
 <template>
   <div class="catalog-filter">
-    <RuleList/>
+    <RuleFilter v-model="filter" />
+    <RuleList :filter="filter"/>
   </div>
 </template>