rough out plugin-standalone logic #10672

archesproject · Mar 13, 2024 · 4c3c156 · 4c3c156
1 parent a70f149
commit 4c3c156
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 2 deletions.
diff --git a/arches/app/media/js/utils/create-vue-application.js b/arches/app/media/js/utils/create-vue-application.js
@@ -10,7 +10,7 @@ import Tooltip from 'primevue/tooltip';
 import { createApp } from 'vue';
 import { createGettext } from "vue3-gettext";
 
-export default async function createVueApp(vueComponent){
+export default async function createVueApplication(vueComponent){
     /**
      * This wrapper allows us to maintain a level of control inside arches-core
      * over Vue apps. For instance this allows us to abstract i18n setup/config

diff --git a/arches/app/media/js/views/plugin-standalone.js b/arches/app/media/js/views/plugin-standalone.js
@@ -0,0 +1,15 @@
+import { defineAsyncComponent } from 'vue';
+import createVueApplication from 'utils/create-vue-application';
+
+const pluginData = require('views/plugin-data');
+
+// workaround for webpack failures surrounding dynamic imports
+const vuePluginPath = pluginData['component'].replace('src/', '').replace('.vue', '');
+const AsyncComponent = defineAsyncComponent(() => import(`@/${vuePluginPath}.vue`));
+
+const pluginMountingPoint = document.querySelector('#plugin-mounting-point');
+pluginMountingPoint.setAttribute("id", pluginData['slug']);
+
+createVueApplication(AsyncComponent).then(vueApp => {
+    vueApp.mount(`#${pluginData['slug']}`);
+});
diff --git a/arches/app/templates/views/plugin-standalone.htm b/arches/app/templates/views/plugin-standalone.htm
@@ -0,0 +1,85 @@
+<!--
+ARCHES - a program developed to inventory and manage immovable cultural heritage.
+Copyright (C) 2013 J. Paul Getty Trust and World Monuments Fund
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+{% load static %}
+{% load webpack_static from webpack_loader %}
+
+
+<!DOCTYPE html>
+<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
+<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
+<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
+
+<head>
+    <title>
+        {% block title %} {{ app_settings.APP_NAME }} - {{ plugin.name }} {% endblock title %}
+    </title>
+
+        <!-- Meta -->
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content="">
+        <meta name="author" content="">
+
+        <link rel="shortcut icon" href="{% webpack_static 'favicons/favicon.ico' %}" type="image/x-icon" />
+        <link rel="apple-touch-icon" href="{% webpack_static 'favicons/apple-touch-icon.png' %}" />
+        <link rel="apple-touch-icon" sizes="76x76" href="{% webpack_static 'favicons/apple-touch-icon-76x76.png' %}" />
+        <link rel="apple-touch-icon" sizes="120x120" href="{% webpack_static 'favicons/apple-touch-icon-120x120.png' %}" />
+        <link rel="apple-touch-icon" sizes="152x152" href="{% webpack_static 'favicons/apple-touch-icon-152x152.png' %}" />
+        <link rel="apple-touch-icon" sizes="180x180" href="{% webpack_static 'favicons/apple-touch-icon-180x180.png' %}" />
+
+        {% block css %}
+            <!-- POC rough out of PrimeVue theme switcher -->
+            <link rel="stylesheet" href="{% webpack_static 'node_modules/primevue/resources/themes/mdc-light-indigo/theme.css' %}" />
+        {% endblock css %}
+</head>
+
+<body>
+    {% block main_content %}
+        <div id="plugin-mounting-point"></div>
+    {% endblock main_content %}
+</body>
+
+{% block javascript %}
+    <script src="{% webpack_static 'node_modules/requirejs/require.js' %}"></script>
+
+    {% block pre_require_js %}
+        <div
+            id="pluginData"
+            style="display: none;"
+            pluginData='{{ plugin_json }}'
+        ></div>
+    {% endblock pre_require_js %}
+
+    {% if main_script %}
+        <script src="{% webpack_static '' %}build/js/{{main_script}}.js"></script>
+    {% endif %}
+
+    {% if app_settings.GOOGLE_ANALYTICS_TRACKING_ID != None %}
+        <script>
+            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+            ga('create', '{{app_settings.GOOGLE_ANALYTICS_TRACKING_ID}}', 'auto');
+            ga('send', 'pageview');
+        </script>
+    {% endif %}
+{% endblock javascript %}
+
+</html>
diff --git a/arches/app/views/plugin.py b/arches/app/views/plugin.py
@@ -33,13 +33,25 @@ def get(self, request, pluginid=None, slug=None):
             plugin = models.Plugin.objects.get(slug=slug)
         else:
             plugin = models.Plugin.objects.get(pk=pluginid)
+
         if not request.user.has_perm("view_plugin", plugin):
             if slug is not None:
                 return redirect("/auth?next=/plugins/{}".format(slug))
             if slug is not None:
                 return redirect("/auth?next=/plugins/{}".format(pluginid))
-        if request.GET.get("json", False):
+
+        if request.GET.get("json"):
             return JSONResponse(plugin)
+
+        if plugin.config.get('is_standalone'):
+            context = self.get_context_data(
+                plugin=plugin,
+                plugin_json=JSONSerializer().serialize(plugin),
+                main_script="views/plugin-standalone",
+            )
+
+            return render(request, "views/plugin-standalone.htm", context)
+
         resource_graphs = (
             models.GraphModel.objects.exclude(pk=settings.SYSTEM_SETTINGS_RESOURCE_MODEL_ID)
             .exclude(isresource=False)