Vue3 form components

django/core/jinja2/core/events/edit.jinja

@@ -3,9 +3,9 @@
 {% block introduction %}<h1>Submit an Event</h1>{% endblock %}
 
 {% block content %}
-<div id="app"></div>
+<div id="event-form"></div>
 {% endblock %}
 
 {% block js %}
-{{ render_bundle('events', attrs='defer') }}
-{% endblock %}
+{{ vite_asset('apps/event_edit.ts') }}
+{% endblock %}

django/core/jinja2/core/member_profiles/edit.jinja

@@ -3,7 +3,8 @@
 {% block introduction %}<h1>Edit Profile</h1>{% endblock %}
 
 {% block content %}
-    <div class="modal" tabindex="-1" role="dialog" id="rightsAndResponsibilities">
+<div class="modal" tabindex="-1" role="dialog" id="membership-modal">
+    <div class="modal-dialog modal-xl modal-dialog-centered">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">CoMSES Net Membership</h5>
@@ -15,9 +16,11 @@
             </div>
         </div>
     </div>
-    <div id="app" data-user-pk="{{ object.user.id }}" data-connections-url="{{ url('socialaccount_connections') }}"></div>
+</div>
+<div id="profile-form" data-user-id="{{ object.user.id }}"
+    data-connections-url="{{ url('socialaccount_connections') }}"></div>
 {% endblock %}
 
 {% block js %}
-{{ render_bundle('profiles', attrs='defer') }}
-{% endblock %}
+{{ vite_asset('apps/profile_edit.ts') }}
+{% endblock %}

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,28 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.12.0",
     "@popperjs/core": "^2.11.6",
-    "bootstrap": "5.0.2",
+    "@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.2.3",
     "pinia": "^2.0.32",
+    "query-string": "^8.1.0",
     "sass": "^1.58.3",
+    "sortablejs": "^1.15.0",
+    "sortablejs-vue3": "^1.2.9",
     "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/sortablejs": "^1.15.1",
+    "@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/event_edit.ts

@@ -0,0 +1,8 @@
+import "vite/modulepreload-polyfill";
+
+import { createApp } from "vue";
+import EventEditForm from "@/components/EventEditForm.vue";
+import { extractIdFromPath } from "./util";
+
+const props = { eventId: extractIdFromPath(window.location.pathname, "events") };
+createApp(EventEditForm, props).mount("#event-form");

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/apps/profile_edit.ts

@@ -0,0 +1,8 @@
+import "vite/modulepreload-polyfill";
+
+import { createApp } from "vue";
+import ProfileEditForm from "@/components/ProfileEditForm.vue";
+import { extractDataParams } from "./util";
+
+const props = extractDataParams("profile-form", ["userId", "connectionsUrl"]);
+createApp(ProfileEditForm, props).mount("#profile-form");

frontend-vue3/src/apps/util.ts

@@ -0,0 +1,49 @@
+type ExtractedAttributes = {
+  [key: string]: string | object;
+};
+
+export function extractDataParams(elementId: string, names: string[]): ExtractedAttributes {
+  /**
+   * Extract parameters from data attributes
+   *
+   * @param elementId The id of the element
+   * @param names The names of the attributes to extract and return (camelCase)
+   */
+  const el = document.getElementById(elementId);
+  if (el) {
+    const attributes = names.reduce<ExtractedAttributes>((acc, name) => {
+      const hyphenatedName = name.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`);
+      const attrValue = el.getAttribute(`data-${hyphenatedName}`);
+
+      if (attrValue) {
+        try {
+          const parsedValue = JSON.parse(attrValue);
+          acc[name] = parsedValue;
+        } catch (error) {
+          acc[name] = attrValue;
+        }
+      }
+      return acc;
+    }, {});
+    return attributes;
+  } else {
+    return {};
+  }
+}
+
+export function extractIdFromPath(
+  path: string,
+  prefix: string,
+  suffix: string = "edit"
+): number | undefined {
+  /**
+   * Extract resource id from path
+   *
+   * @param path The path to extract the id (usually window.location.pathname)
+   * @param prefix The prefix of the path (e.g. "codebases", "events")
+   * @param suffix="edit" The suffix of the path (e.g. "edit")
+   */
+  const re = new RegExp(`/${prefix}/([0-9]+)/${suffix}/`);
+  const match = path.match(re);
+  return match ? parseInt(match[1]) : undefined;
+}

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">
+        <TextField class="mb-3" name="keywords" label="Keywords" @keyup.enter="search" />
+        <DatepickerField class="mb-3" name="startDate" label="Published After" />
+        <DatepickerField class="mb-3" name="endDate" label="Published Before" />
+        <TaggerField class="mb-3" name="tags" label="Tags" type="Codebase" />
+        <SelectField
+          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 TextField from "@/components/form/TextField.vue";
+import SelectField from "@/components/form/SelectField.vue";
+import DatepickerField from "@/components/form/DatepickerField.vue";
+import TaggerField from "@/components/form/TaggerField.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.date(),
+  endDate: yup.date(),
+  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?.toISOString(),
+    published_before: values.endDate?.toISOString(),
+    tags: values.tags?.map(tag => tag.name),
+    peer_review_status: values.peerReviewStatus,
+  });
+});
+
+function search() {
+  window.location.href = query.value;
+}
+</script>