Fix geomatcher frontend setup/vue3

okfde · Aug 1, 2023 · 0640aac · 0640aac
1 parent e472f39
commit 0640aac
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 14 deletions.
diff --git a/froide/publicbody/templates/publicbody/admin/match_georegions.html b/froide/publicbody/templates/publicbody/admin/match_georegions.html
@@ -1,7 +1,7 @@
 {% extends "helper/admin_base_action.html" %}
 
 {% load i18n l10n %}
-{% load static %}
+{% load frontendbuild %}
 
 {% block action_title %}{% trans 'Match Georegions' %}{% endblock %}
 
@@ -11,10 +11,8 @@
 
 {% block extrahead %}
   {{ block.super }}
-  <link rel="stylesheet" href="{% static 'css/geomatch.css' %}">
-  <link rel="stylesheet" href="{% static 'css/common.css' %}"/>
-  <script src="{% static 'js/common.js' %}" charset="utf-8"></script>
-  <script src="{% static 'js/geomatch.js' %}" charset="utf-8"></script>
+  {% getfrontendbuild "geomatch.js" as assets %}
+  {% for block, output_list in assets %}{% for output in output_list %}{{ output|safe }}{% endfor %}{% endfor %}
 {% endblock %}
 
 {% block action_content %}

diff --git a/frontend/javascript/components/geomatch/geo-matcher-row.vue b/frontend/javascript/components/geomatch/geo-matcher-row.vue
@@ -58,9 +58,12 @@ export default {
   name: 'GeoMatcherRow',
   props: {
     georegion: {
-      type: Object
+      type: Object,
+      required: true
     }
   },
+  inject: ['config'],
+  emits: ['connectpublicbody'],
   data() {
     return {}
   },

diff --git a/frontend/javascript/components/geomatch/geo-matcher.vue b/frontend/javascript/components/geomatch/geo-matcher.vue
@@ -57,7 +57,12 @@ export default {
   components: {
     GeoMatcherRow
   },
-  props: ['config'],
+  props: {
+    config: {
+      type: Object,
+      required: true
+    }
+  },
   data() {
     return {
       georegions: [],
@@ -68,7 +73,14 @@ export default {
       jurisdictionName: '',
       category: '',
       categoryName: '',
-      searchHint: ''
+      searchHint: '',
+      csrfToken: document.querySelector('input[name="csrfmiddlewaretoken"]')
+        .value
+    }
+  },
+  provide() {
+    return {
+      config: this.config
     }
   },
   computed: {
@@ -98,11 +110,6 @@ export default {
     }
   },
   mounted() {
-    this.$root.config = this.config
-    this.$root.csrfToken = document.querySelector(
-      'input[name="csrfmiddlewaretoken"]'
-    ).value
-
     const entries = new URLSearchParams(window.location.search)
 
     this.ancestor = entries.get('ancestor') || ''
@@ -270,7 +277,7 @@ export default {
         georegion: payload.georegionId,
         publicbody: payload.publicbodyId
       }
-      postData('', data, this.$root.csrfToken).then(() => {
+      postData('', data, this.csrfToken).then(() => {
         const gr = this.georegions[this.georegionMapping[payload.georegionUrl]]
         gr.links = [...(gr.links || []), payload.publicbody]
         gr.matches = []