Vue3 form components

django/library/jinja2/library/codebases/list.jinja

@@ -17,9 +17,6 @@
     {% include "library/includes/archive_model_help.jinja" %}
     {{ pagination_block }}
     <div id='sortby'></div>
-    {# django vite test #}
-    <div id="app"></div>
-    {{ vite_asset('apps/helloworld.ts') }}
 {% endblock %}
 
 {% block content %}
@@ -36,9 +33,10 @@
 {% endblock %}
 
 {% block sidebar %}
-    <div id="sidebar"></div>
+    <div id="search"></div>
 {% endblock %}
 
 {% block js %}
     {{ render_bundle('codebase_list', attrs='defer') }}
+    {{ vite_asset('apps/codebase_list.ts') }}
 {% endblock %}

frontend-vue3/.eslintrc.cjs

@@ -9,6 +9,12 @@ module.exports = {
     '@vue/eslint-config-typescript',
     '@vue/eslint-config-prettier/skip-formatting'
   ],
+  rules: {
+    '@typescript-eslint/no-unused-vars': [
+      'warn',
+      { 'varsIgnorePattern': "props" }
+    ],
+  },
   parserOptions: {
     ecmaVersion: 'latest'
   }

frontend-vue3/package.json

@@ -18,17 +18,25 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.12.0",
     "@popperjs/core": "^2.11.6",
+    "@vorms/core": "^1.1.0",
+    "@vorms/resolvers": "^1.1.0",
+    "@vuepic/vue-datepicker": "^4.2.3",
+    "@vueuse/core": "^9.13.0",
+    "axios": "^1.3.5",
     "bootstrap": "5.0.2",
     "pinia": "^2.0.32",
+    "query-string": "^8.1.0",
     "sass": "^1.58.3",
     "vue": "^3.2.47",
     "vue-multiselect": "^3.0.0-beta.1",
-    "vue-router": "^4.1.6"
+    "vue-router": "^4.1.6",
+    "yup": "^1.0.2"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",
     "@types/jsdom": "^21.1.0",
     "@types/node": "^18.14.2",
+    "@types/yup": "^0.32.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^11.0.2",

frontend-vue3/src/apps/codebase_list.ts

@@ -0,0 +1,6 @@
+import "vite/modulepreload-polyfill";
+
+import { createApp } from "vue";
+import CodebaseListSidebar from "@/components/CodebaseListSidebar.vue";
+
+createApp(CodebaseListSidebar).mount("#search");

frontend-vue3/src/apps/formdemo.ts

@@ -0,0 +1,6 @@
+import "vite/modulepreload-polyfill";
+
+import { createApp } from "vue";
+import FormDemo from "@/components/FormDemo.vue";
+
+createApp(FormDemo).mount("#app");

frontend-vue3/src/apps/helloworld.ts

@@ -1,6 +1,6 @@
 import "vite/modulepreload-polyfill";
 
 import { createApp } from "vue";
-import HelloWorld from "@/components/HelloWorld.vue";
+import FormDemo from "@/components/FormDemo.vue";
 
-createApp(HelloWorld).mount("#app");
+createApp(FormDemo).mount("#app");

frontend-vue3/src/components/CodebaseListSidebar.vue

@@ -0,0 +1,74 @@
+<template>
+  <ListSidebar
+    create-label="Archive a model"
+    create-url="/codebases/add/"
+    search-label="Search"
+    :search-url="query"
+  >
+    <template #form>
+      <form @submit="handleSubmit">
+        <FormTextInput class="mb-3" name="keywords" label="Keywords" @keyup.enter="search" />
+        <FormDatePicker class="mb-3" name="startDate" label="Published After" string />
+        <FormDatePicker class="mb-3" name="endDate" label="Published Before" string />
+        <FormTagger class="mb-3" name="tags" label="Tags" type="Codebase" />
+        <FormSelect
+          class="mb-3"
+          name="peerReviewStatus"
+          label="Peer Review Status"
+          :options="peerReviewOptions"
+        />
+      </form>
+    </template>
+  </ListSidebar>
+</template>
+
+<script setup lang="ts">
+import * as yup from "yup";
+import { computed } from "vue";
+import ListSidebar from "@/components/ListSidebar.vue";
+import FormTextInput from "@/components/form/FormTextInput.vue";
+import FormSelect from "@/components/form/FormSelect.vue";
+import FormDatePicker from "@/components/form/FormDatePicker.vue";
+import FormTagger from "@/components/form/FormTagger.vue";
+import { useForm } from "@/composables/form";
+import { useCodebaseAPI } from "@/composables/api/codebase";
+
+const peerReviewOptions = [
+  { value: "reviewed", label: "Reviewed" },
+  { value: "not_reviewed", label: "Not Reviewed" },
+  { value: "", label: "Any" },
+];
+
+const schema = yup.object({
+  keywords: yup.string(),
+  startDate: yup.string(),
+  endDate: yup.string(),
+  tags: yup.array().of(yup.object().shape({ name: yup.string().required() })),
+  peerReviewStatus: yup.string(),
+});
+type SearchFields = yup.InferType<typeof schema>;
+
+const { handleSubmit, values } = useForm<SearchFields>({
+  schema,
+  initialValues: { peerReviewStatus: "" },
+  onSubmit: () => {
+    window.location.href = query.value;
+  },
+});
+
+const { searchUrl } = useCodebaseAPI();
+
+const query = computed(() => {
+  return searchUrl({
+    query: values.keywords,
+    published_after: values.startDate,
+    published_before: values.endDate,
+    tags: values.tags?.map(tag => tag.name),
+    peer_review_status: values.peerReviewStatus,
+  });
+});
+
+function search() {
+  window.location.href = query.value;
+}
+</script>

frontend-vue3/src/components/FormDemo.vue

@@ -0,0 +1,46 @@
+<template>
+  <form @submit="handleSubmit">
+    <FormTextInput class="mb-3" name="text" label="Text Input" />
+    <FormTextInput class="mb-3" name="email" label="Email" />
+    <FormCheckbox class="mb-3" name="terms" label="Terms and Conditions" />
+    <FormSelect class="mb-3" name="number" label="Your Number" :options="numberOptions" />
+    <FormDatePicker class="mb-3" name="date" label="Date" />
+    <FormTagger class="mb-3" name="tags" label="Tags" />
+    <button type="submit" class="mb-3 btn btn-primary">Submit</button>
+  </form>
+</template>
+
+<script setup lang="ts">
+import * as yup from "yup";
+import { useForm } from "@/composables/form";
+import FormTextInput from "@/components/form/FormTextInput.vue";
+import FormSelect from "@/components/form/FormSelect.vue";
+import FormCheckbox from "@/components/form/FormCheckbox.vue";
+import FormDatePicker from "@/components/form/FormDatePicker.vue";
+import FormTagger from "@/components/form/FormTagger.vue";
+
+const numberOptions = [
+  { value: 1, label: "One" },
+  { value: 2, label: "Two" },
+  { value: 3, label: "Three" },
+  { value: 4, label: "Four" },
+];
+
+const schema = yup.object({
+  text: yup.string().required(),
+  email: yup.string().email(),
+  terms: yup.boolean().oneOf([true], "You must accept"),
+  date: yup.date(),
+  number: yup.number().required().oneOf([2, 3], "Must be 2 or 3").label("Number"),
+  tags: yup.array().of(yup.object().shape({ name: yup.string().required() })),
+});
+type DemoFields = yup.InferType<typeof schema>;
+
+const { handleSubmit } = useForm<DemoFields>({
+  initialValues: { terms: false },
+  schema,
+  onSubmit: values => {
+    console.log(values);
+  },
+});
+</script>

frontend-vue3/src/components/ListSidebar.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <a v-if="createUrl && createLabel" class="text-white" :href="createUrl">
+      <div class="btn btn-secondary w-100" tabindex="0">
+        {{ createLabel }}
+      </div>
+    </a>
+    <div class="card-metadata">
+      <h2 class="title">Search</h2>
+      <div class="card-body">
+        <slot name="form" />
+      </div>
+    </div>
+    <a class="text-white" :href="searchUrl">
+      <div class="btn btn-primary w-100" tabindex="0">
+        {{ searchLabel }}
+      </div>
+    </a>
+  </div>
+</template>
+<script setup lang="ts">
+export interface SearchProps {
+  createLabel?: string;
+  createUrl?: string;
+  searchLabel: string;
+  searchUrl: string;
+}
+
+const props = defineProps<SearchProps>();
+</script>

frontend-vue3/src/components/__tests__/CodebaseSearch.test.ts

@@ -0,0 +1,42 @@
+import { mount } from "@vue/test-utils";
+import CodebaseListSidebar from "@/components/CodebaseListSidebar.vue";
+import ListSidebar from "@/components/ListSidebar.vue";
+import FormTextInput from "@/components/form/FormTextInput.vue";
+import FormDatePicker from "@/components/form/FormDatePicker.vue";
+import FormTagger from "@/components/form/FormTagger.vue";
+import FormSelect from "@/components/form/FormSelect.vue";
+
+describe("CodebaseListSidebar.vue", () => {
+  it("renders the form field components", async () => {
+    const wrapper = mount(CodebaseListSidebar);
+
+    const baseSearch = wrapper.findComponent(ListSidebar);
+    expect(baseSearch.exists()).toBe(true);
+
+    const formTextInput = wrapper.findComponent(FormTextInput);
+    expect(formTextInput.exists()).toBe(true);
+
+    const anyDatePicker = wrapper.findComponent(FormDatePicker);
+    expect(anyDatePicker.exists()).toBe(true);
+
+    const formTagger = wrapper.findComponent(FormTagger);
+    expect(formTagger.exists()).toBe(true);
+
+    const formSelect = wrapper.findComponent(FormSelect);
+    expect(formSelect.exists()).toBe(true);
+    expect(formSelect.props("options").length).toEqual(3);
+  });
+
+  it("updates the query computed value based on form inputs", async () => {
+    const wrapper = mount(CodebaseListSidebar);
+
+    const formTextInput = wrapper.findComponent(FormTextInput);
+    const formTextInputElement = formTextInput.find("input");
+    formTextInputElement.element.value = "test keyword";
+    await formTextInputElement.trigger("input");
+    await wrapper.vm.$nextTick();
+    const baseSearch = wrapper.findComponent(ListSidebar);
+    const searchUrl = baseSearch.props("searchUrl");
+    expect(searchUrl).toContain("query=test%20keyword");
+  });
+});

frontend-vue3/src/components/form/FormCheckbox.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <div class="form-check">
+      <input
+        v-model="value"
+        type="checkbox"
+        :id="id"
+        v-bind="attrs"
+        :class="{ 'form-check-input': true, 'is-invalid': error }"
+      />
+      <FormLabel v-if="label" :label="label" :id-for="id" :required="required" />
+    </div>
+    <slot name="help">
+      <FormHelp v-if="help" :help="help" :id-for="id" />
+    </slot>
+    <slot name="error">
+      <FormError v-if="error" :error="error" :id-for="id" />
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useField } from "@/composables/form";
+import FormLabel from "@/components/form/FormLabel.vue";
+import FormHelp from "@/components/form/FormHelp.vue";
+import FormError from "@/components/form/FormError.vue";
+
+export interface CheckboxProps {
+  name: string;
+  label?: string;
+  help?: string;
+  placeholder?: string;
+  required?: boolean;
+}
+
+const props = withDefaults(defineProps<CheckboxProps>(), {
+  help: "",
+});
+
+const { id, value, attrs, error } = useField<boolean>(props, "name");
+</script>