Change filters to apply immediately and use checkboxes for languages

frontend/src/components/ReviewersListSidebar.vue

@@ -10,19 +10,36 @@
   >
     <i class="fas fa-plus-square me-1"></i> Add a Reviewer
   </button>
-  <form @submit="handleSubmit">
-    <CheckboxField name="includeInactive" label="Include Inactive" />
-    <TextField class="mb-3" name="name" label="Name" placeholder="Name or Username" />
-    <MultiSelectField
-      class="mb-3"
-      name="programmingLanguages"
-      label="Programming Languages"
-      multiple
-      :options="programmingLanguages"
-      :custom-label="option => option"
+  <div class="form-check">
+    <input
+      type="checkbox"
+      id="include-inactive"
+      class="form-check-input"
+      v-model="includeInactive"
     />
-    <button type="submit" class="btn btn-primary">Filter</button>
-  </form>
+    <FieldLabel label="Include Inactive" id-for="include-inactive" />
+  </div>
+  <FieldLabel label="Name" id-for="name" />
+  <input
+    type="text"
+    id="name"
+    placeholder="Name or Username"
+    class="mb-3 form-control"
+    v-model="name"
+  />
+  <label class="form-label">Programming Languages</label>
+  <div style="max-height: 300px; overflow-y: scroll;">
+    <div v-for="language of programmingLanguages" class="form-check">
+      <input
+        type="checkbox"
+        :id="'lang-' + language"
+        class="form-check-input"
+        :value="language"
+        v-model="languages"
+      />
+      <FieldLabel :label="language" :id-for="'lang-' + language" />
+    </div>
+  </div>
   <BootstrapModal id="add-modal" title="Add Reviewer" ref="addModal" size="lg" centered>
     <template #content>
       <ReviewerEditForm
@@ -41,14 +58,10 @@
 </template>
 
 <script setup lang="ts">
-import * as yup from "yup";
-import { defineEmits, ref } from "vue";
-import CheckboxField from "./form/CheckboxField.vue";
-import TextField from "./form/TextField.vue";
-import MultiSelectField from "./form/MultiSelectField.vue";
+import { defineEmits, ref, watch } from "vue";
+import FieldLabel from "./form/FieldLabel.vue";
 import BootstrapModal from "@/components/BootstrapModal.vue";
 import ReviewerEditForm from "@/components/ReviewerEditForm.vue";
-import { useForm } from "@/composables/form";
 import type { ReviewerFilterParams } from "@/types";
 
 const props = withDefaults(defineProps<{ programmingLanguages: string[] }>(), {});
@@ -60,20 +73,18 @@ const emit = defineEmits<{
 
 const addForm = ref<InstanceType<typeof ReviewerEditForm> | null>(null);
 const addModal = ref<InstanceType<typeof BootstrapModal> | null>(null);
+const includeInactive = ref(false);
+const name = ref("");
+const languages = ref<string[]>([]);
 
-const schema = yup.object<ReviewerFilterParams>({
-  includeInactive: yup.boolean().default(false),
-  name: yup.string().default(""),
-  programmingLanguages: yup.array().of(yup.string()).default([]),
-});
-
-const { handleSubmit, values } = useForm<ReviewerFilterParams>({
-  schema,
-  initialValues: {
-    includeInactive: false,
-  },
-  onSubmit: () => {
-    emit("filter", values);
-  },
-});
+watch(
+  () => ({
+    includeInactive: includeInactive.value,
+    name: name.value,
+    programmingLanguages: languages.value,
+  }),
+  filters => {
+    emit("filter", filters);
+  }
+);
 </script>