feat: add sort filter

Author: HerringtonDarkholme

website/src/catalog/RuleList.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import NumberFlow, { continuous } from '@number-flow/vue'
-import { type Filter, getRuleMetaData } from './data'
-import { computed, type PropType } from 'vue'
+import { type Filter, getRuleMetaData } from './data.js'
+import { computed, ref, type PropType } from 'vue'
 import RuleItem from './RuleItem.vue'
 import IconDown from '../components/utils/IconDown.vue'
 
+const sortBy = ref('name')
 const props = defineProps({
   filter: {
     type: Object as PropType<Filter>,
@@ -15,7 +16,7 @@ const emit = defineEmits<{
   reset: []
 }>()
 
-const ruleMetaData = computed(() => getRuleMetaData(props.filter))
+const ruleMetaData = computed(() => getRuleMetaData(props.filter, sortBy.value))
 </script>
 
 <template>
@@ -30,9 +31,9 @@ const ruleMetaData = computed(() => getRuleMetaData(props.filter))
       />
       <label class="sort-by">
         Sort by:
-        <select>
-          <option>Name</option>
-          <option>Lang</option>
+        <select v-model="sortBy">
+          <option value="name">Name</option>
+          <option value="lang">Lang</option>
         </select>
         <IconDown/>
       </label>

website/src/catalog/data.ts

@@ -5,16 +5,23 @@ export function intersect(a: string[], b: string[]) {
   return a.some(x => b.includes(x))
 }
 
-export function getRuleMetaData(filter: Filter) {
+export function getRuleMetaData(filter: Filter, sortBy = 'name') {
   const {
     selectedLanguages,
+    selectedRules,
   } = filter
   return allRules.filter(meta => {
     const langFilter = !selectedLanguages.length || selectedLanguages.includes(meta.language)
-    const ruleFilter = !filter.selectedRules.length || intersect(filter.selectedRules, meta.rules)
+    const ruleFilter = !selectedRules.length || intersect(selectedRules, meta.rules)
     const featureFilter = !filter.selectedFeatures.length || intersect(filter.selectedFeatures, meta.features)
     const typeFilter = !filter.selectedTypes.length || filter.selectedTypes.includes(meta.type)
     return langFilter && ruleFilter && featureFilter && typeFilter
+  }).toSorted((a, b) => {
+    if (sortBy === 'name') {
+      return a.name.localeCompare(b.name)
+    } else {
+      return a.language.localeCompare(b.language)
+    }
   })
 }