Vue3 form components

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

@@ -38,5 +38,5 @@
 
 {% block js %}
     {{ render_bundle('codebase_list', attrs='defer') }}
-    {{ vite_asset('apps/codebaselist.ts') }}
+    {{ vite_asset('apps/codebase_list.ts') }}
 {% endblock %}

frontend-vue3/src/components/CodebaseListSidebar.vue

@@ -8,8 +8,8 @@
     <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" />
-        <FormDatePicker class="mb-3" name="endDate" label="Published Before" />
+        <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"

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

@@ -1,16 +1,16 @@
 import { mount } from "@vue/test-utils";
-import CodebaseSearch from "@/components/CodebaseSearch.vue";
-import BaseSearch from "@/components/BaseSearch.vue";
+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("CodebaseSearch.vue", () => {
+describe("CodebaseListSidebar.vue", () => {
   it("renders the form field components", async () => {
-    const wrapper = mount(CodebaseSearch);
+    const wrapper = mount(CodebaseListSidebar);
 
-    const baseSearch = wrapper.findComponent(BaseSearch);
+    const baseSearch = wrapper.findComponent(ListSidebar);
     expect(baseSearch.exists()).toBe(true);
 
     const formTextInput = wrapper.findComponent(FormTextInput);
@@ -28,14 +28,14 @@ describe("CodebaseSearch.vue", () => {
   });
 
   it("updates the query computed value based on form inputs", async () => {
-    const wrapper = mount(CodebaseSearch);
+    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(BaseSearch);
+    const baseSearch = wrapper.findComponent(ListSidebar);
     const searchUrl = baseSearch.props("searchUrl");
     expect(searchUrl).toContain("query=test%20keyword");
   });

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

@@ -5,10 +5,11 @@
     </slot>
     <VueDatePicker
       v-model="value"
-      model-type="yyyy-MM-dd"
+      :model-type="string ? 'yyyy-MM-dd' : undefined"
       format="yyyy-MM-dd"
       :id="id"
       v-bind="attrs"
+      :placeholder="placeholder"
       :class="{ 'is-invalid': error }"
       input-class-name="custom-dp__input"
       menu-class-name="custom-dp__menu"
@@ -32,17 +33,18 @@ import FormLabel from "@/components/form/FormLabel.vue";
 import FormHelp from "@/components/form/FormHelp.vue";
 import FormError from "@/components/form/FormError.vue";
 
-export type SelectOptions = { value: any; label: string }[];
-
 export interface DatePickerProps {
   name: string;
   label?: string;
   help?: string;
   placeholder?: string;
   required?: boolean;
+  string?: boolean; // whether to use string or date for the model value
 }
 
-const props = defineProps<DatePickerProps>();
+const props = withDefaults(defineProps<DatePickerProps>(), {
+  string: false,
+});
 
-const { id, value, attrs, error } = useField<string>(props, "name");
+const { id, value, attrs, error } = useField<Date | string>(props, "name");
 </script>

frontend-vue3/src/composables/api/axios.ts

@@ -25,6 +25,7 @@ export function useAxios(baseUrl?: string, config?: AxiosRequestConfig) {
     ...config,
   });
 
+  // add CSRF token to all requests
   instance.interceptors.request.use(
     config => {
       const csrfToken = getCookie("csrftoken");
@@ -36,6 +37,17 @@ export function useAxios(baseUrl?: string, config?: AxiosRequestConfig) {
     error => Promise.reject(error)
   );
 
+  // convert date strings to Date objects in response data
+  instance.interceptors.response.use(
+    response => {
+      if (response.data) {
+        convertDates(response.data);
+      }
+      return response;
+    },
+    error => Promise.reject(error)
+  );
+
   const state = reactive<AxiosRequestState>({
     response: null,
     data: undefined,
@@ -119,12 +131,32 @@ export function useAxios(baseUrl?: string, config?: AxiosRequestConfig) {
   };
 }
 
+/**
+ * Utility functions
+ */
 function getCookie(name: string) {
-  /**
-   * utility function for getting a cookie's value by name
-   */
   return document.cookie.split("; ").reduce((r, v) => {
     const [n, ...val] = v.split("=");
     return n === name ? decodeURIComponent(val.join("=")) : r;
   }, "");
 }
+
+const ISODateFormat = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d*)?(?:[-+]\d{2}:?\d{2}|Z)?$/;
+
+function isISODateString(value: any) {
+  return value && typeof value === "string" && ISODateFormat.test(value);
+}
+
+function convertDates(body: any) {
+  if (body === null || body === undefined || typeof body !== "object") {
+    return body;
+  }
+  for (const key of Object.keys(body)) {
+    const value = body[key];
+    if (isISODateString(value)) {
+      body[key] = new Date(value);
+    } else if (typeof value === "object") {
+      convertDates(value);
+    }
+  }
+}

frontend-vue3/vite.config.ts

@@ -36,7 +36,8 @@ export default defineConfig({
       input: {
         main: resolvePath("./src/apps/main.ts"),
         formdemo: resolvePath("./src/apps/formdemo.ts"),
-        codebaselist: resolvePath("./src/apps/codebaselist.ts"),
+        codebase_list: resolvePath("./src/apps/codebase_list.ts"),
+        event_edit: resolvePath("./src/apps/event_edit.ts"),
         // add more entry points here
       },
     },