Merge pull request #9 from archesproject/tree-as-plugin

Move frontend to standalone plugin

README.md

@@ -38,19 +38,3 @@ urlpatterns = [
     path('', include("arches_rdm.urls")),
 ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
 ```
-
-7. This project currently uses a frontend outside of Arches. To allow it to communicate with Django, add this to your project `settings.py`:
-
-```
-CORS_ALLOW_CREDENTIALS = True
-CORS_ORIGIN_ALLOW_ALL = False
-CORS_ORIGIN_WHITELIST = ["http://localhost:8080"]  # vue frontend
-CSRF_TRUSTED_ORIGINS = ["http://localhost:8080"]  # vue frontend
-```
-
-NOTE: This rough draft currently assumes the Django backend is served at `https://127.0.0.1:8029/`.
-
-Run the frontend with:
-```
-npm run serve
-```

arches_rdm/migrations/0001_initial.py

@@ -1,7 +1,5 @@
-from arches.app.models import models
-
-
-from django.db import migrations, models
+from django.db import migrations
+from django.utils.translation import gettext as _
 
 
 class Migration(migrations.Migration):
@@ -15,23 +13,21 @@ class Migration(migrations.Migration):
     def add_plugins(apps, schema_editor):
         Plugin = apps.get_model("models", "Plugin")
 
-        Plugin.objects.update_or_create(
+        Plugin(
             pluginid="29321ce0-bd95-4357-a2a5-822e9cb06f70",
-            name="Reference Data Manager (RDM)",
+            name=_("Lingo"),
             icon="fa fa-code-fork",
-            component="views/components/plugins/reference-data-manager",
-            componentname="reference-data-manager",
-            config={},
-            slug="reference-data-manager",
-            sortorder=0
-        )
+            component="App.vue",
+            componentname="lingo",
+            config={"show": True, "is_standalone": True},
+            slug="lingo",
+            sortorder=0,
+        ).save()
 
     def remove_plugin(apps, schema_editor):
         Plugin = apps.get_model("models", "Plugin")
-
-        for plugin in Plugin.objects.filter(pluginid__in=["29321ce0-bd95-4357-a2a5-822e9cb06f70"]):
-            plugin.delete()
+        Plugin.objects.filter(slug="lingo").delete()
 
     operations = [
         migrations.RunPython(add_plugins, remove_plugin),
-    ]
+    ]

arches_rdm/src/App.vue

@@ -8,16 +8,6 @@ const isAuthenticated = ref(false);
 </script>
 
 <template>
-    <link
-        rel="stylesheet"
-        type="text/css"
-        href="https://unpkg.com/primevue/resources/themes/mdc-light-indigo/theme.css"
-    >
-    <link
-        rel="stylesheet"
-        type="text/css"
-        href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"
-    >
     <component
         :is="isAuthenticated ? HomePage : LoginPage"
         v-model="isAuthenticated"
@@ -31,4 +21,4 @@ body {
 #app {
     height: 100vh;
 }
-</style>
+</style>

arches_rdm/src/components/ConceptTree.vue

@@ -10,7 +10,7 @@ import Tree from "primevue/tree";
 
 import LetterCircle from "@/components/LetterCircle.vue";
 
-import { bestLabel } from "@/utils";
+import { bestLabel } from "@/utils.ts";
 
 import type { Ref } from "vue";
 import type {
@@ -52,8 +52,6 @@ const CONCEPT_LABEL = $gettext("Concept");
 const FOCUS = $gettext("Focus");
 const UNFOCUS = $gettext("Unfocus");
 
-import { DJANGO_HOST } from "@/main";
-
 const onSelect = (node: TreeNode) => {
     selectedNode.value = node;
 };
@@ -177,9 +175,8 @@ const toggleFocus = (node: TreeNode) => {
 
 const fetchSchemes = async () => {
     let errorText;
-    const url = new URL("concept_trees/", DJANGO_HOST);
     try {
-        const response = await fetch(url, { credentials: "include" });
+        const response = await fetch("/concept_trees/", { credentials: "include" });
         if (!response.ok) {
             errorText = response.statusText;
             const body = await response.json();
@@ -256,7 +253,6 @@ await fetchSchemes();
                     background: context.selected ? lightGray : '',
                     height: '2rem',
                 },
-                tabindex: '0',
             }),
             nodeicon: { style: { display: 'none' } },
             label: { style: { textWrap: 'nowrap', display: 'flex' } },

arches_rdm/src/components/LoginPage.vue

@@ -6,16 +6,14 @@ import Cookies from "js-cookie";
 import InputText from "primevue/inputtext";
 import Button from "primevue/button";
 
-import { DJANGO_HOST } from "@/main.ts";
-
 const { $gettext } = useGettext();
 
 const isAuthenticated = defineModel();
 const username = ref();
 const password = ref();
 
 const setCsrfToken = async () => {
-    await fetch(new URL("/csrf/", DJANGO_HOST)).then(
+    await fetch("/csrf/").then(
         async (response) => {
             const data = await response.json();
             Cookies.set("csrftoken", data.csrftoken);
@@ -28,7 +26,6 @@ const submit = async () => {
         await setCsrfToken();
     }
 
-    const url = new URL("/login/", DJANGO_HOST);
     const requestOptions = {
         method: "POST",
         credentials: "include",
@@ -44,7 +41,7 @@ const submit = async () => {
 
     let errorText;
     try {
-        const response = await fetch(url, requestOptions);
+        const response = await fetch("/login/", requestOptions);
         if (response.ok) {
             // const data = await response.json();
             isAuthenticated.value = true;

arches_rdm/views.py

@@ -54,7 +54,7 @@ class JsonbArrayElements(Func):
 
 
 @method_decorator(
-    group_required("RDM Administrator", raise_exception=True), name="dispatch"
+    group_required("RDM Administrator"), name="dispatch"
 )
 class ConceptTreeView(View):
     def __init__(self):