initial work on making plugin out of vue app, re #6

afrc/media/js/views/afrc-search.js

@@ -0,0 +1,26 @@
+import createVueApplication from 'arches/arches/app/media/js/utils/create-vue-application';
+
+import { definePreset } from '@primevue/themes';
+import Aura from '@primevue/themes/aura';
+
+import Search from '@/afrc/Search/SearchPage.vue';
+
+export function createAFRCApp() {
+    const EditableReportPreset = definePreset(Aura, {
+        components: {
+            toast: {
+                summary: { fontSize: '1.5rem' },
+                detail: { fontSize: '1.25rem' },
+            },
+        },
+    });
+
+    const EditableReportTheme = {
+        theme: {
+            preset: EditableReportPreset,
+        },
+    };
+    createVueApplication(Search, EditableReportTheme).then(vueApp => {
+        vueApp.mount('#search-mounting-point');
+    });
+}

afrc/media/js/views/components/plugins/afrc-search-plugin.js

@@ -0,0 +1,12 @@
+define([
+    'knockout',
+    'views/afrc-search',
+    'templates/views/components/plugins/afrc-search-plugin.htm',
+], function(ko, AFRCSEarchComponent, AFRCSEarchTemplate) {
+    return ko.components.register('afrc-search-plugin', {
+        viewModel: function() {
+            AFRCSEarchComponent.createAFRCApp();
+        },
+        template: AFRCSEarchTemplate,
+    });
+});

afrc/migrations/0002_plugin.py

@@ -0,0 +1,30 @@
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("models", "11499_add_editlog_resourceinstance_idx"),
+    ]
+
+    forward_sql = """
+        INSERT INTO public.plugins(
+            pluginid, name, icon, component, componentname, config, slug, sortorder, helptemplate)
+            VALUES ('929e1b9b-a9dc-4603-ae0a-f129d89d8b66', 
+            '{"en": "Search Reference Collections"}', 
+            'fa fa-search', 
+            'views/components/plugins/afrc-search-plugin', 
+            'afrc-search-plugin', 
+            '{"show": true, "description": {"en": null}, "i18n_properties": ["description"]}', 
+            'afrc-search', 
+            1, 
+            ''
+        );
+    """
+    reverse_sql = """
+        DELETE FROM public.plugins WHERE pluginid = '929e1b9b-a9dc-4603-ae0a-f129d89d8b66';
+    """
+
+    operations = [
+        migrations.RunPython(forward_sql, reverse_sql),
+    ]

afrc/src/afrc/Search/SearchPage.vue

@@ -6,21 +6,16 @@ import { useGettext } from "vue3-gettext";
 import Toast from "primevue/toast";
 import { useToast } from "primevue/usetoast";
 import Button from "primevue/button";
-import {
-    DEFAULT_ERROR_TOAST_LIFE,
-    ERROR,
-} from "@/afrc/Search/constants.ts";
+import { DEFAULT_ERROR_TOAST_LIFE, ERROR } from "@/afrc/Search/constants.ts";
+
+import arches from "arches";
 
 import SimpleSearchFilter from "@/afrc/Search/components/SimpleSearchFilter.vue";
 import SearchResultItem from "@/afrc/Search/components/SearchResultItem.vue";
 import InteractiveMap from "@/afrc/Search/components/InteractiveMap/InteractiveMap.vue";
 import { fetchMapData } from "@/afrc/Search/api.ts";
 import type { GenericObject } from "@/afrc/Search/types";
-import type {
-    Basemap,
-    MapLayer,
-    MapSource,
-} from "@/afrc/Search/types.ts";
+import type { Basemap, MapLayer, MapSource } from "@/afrc/Search/types.ts";
 
 let query = getQueryObject(null);
 let queryString = ref(JSON.stringify(query));
@@ -94,7 +89,7 @@ const doQuery = function () {
 
     const qs = new URLSearchParams(queryObj);
 
-    fetch("search/resources" + "?" + qs.toString())
+    fetch(arches.urls.search_results + "?" + qs.toString())
         .then((response) => response.json())
         .then((data) => {
             console.log(data);
@@ -153,18 +148,19 @@ async function fetchSystemMapData() {
                 layer.maplayerid !== "6b9d3c6a-60a4-4630-b4f8-4c5159b68cec",
         );
 
-        layers.filter((layer: MapLayer) => !layer.isoverlay).forEach((layer: MapLayer) => {
-            basemaps.value.push({
-                name: layer.name, 
-                active: layer.addtomap, 
-                value: layer.name, 
-                id: layer.name,
-                url: "https://tiles.openfreemap.org/styles/positron"
+        layers
+            .filter((layer: MapLayer) => !layer.isoverlay)
+            .forEach((layer: MapLayer) => {
+                basemaps.value.push({
+                    name: layer.name,
+                    active: layer.addtomap,
+                    value: layer.name,
+                    id: layer.name,
+                    url: "https://tiles.openfreemap.org/styles/positron",
+                });
             });
-        });
 
         sources.value = mapData.map_sources;
-
     } catch (error) {
         toast.add({
             severity: ERROR,
@@ -175,7 +171,7 @@ async function fetchSystemMapData() {
     }
 }
 
-onMounted(async () =>{
+onMounted(async () => {
     doQuery();
     await fetchSystemMapData();
     dataLoaded.value = true;

afrc/src/afrc/Search/api.ts

@@ -62,5 +62,3 @@ export const createRequest = (url: string) => {
 
 export const fetchSettings = createRequest(arches.urls["api-settings"]);
 export const fetchMapData = createRequest(arches.urls["api-map-data"]);
-
-

afrc/src/afrc/Search/components/InteractiveMap/InteractiveMap.vue

@@ -12,10 +12,7 @@ import BasemapControls from "@/afrc/Search/components/InteractiveMap/components/
 
 import { fetchSettings } from "@/afrc/Search/api.ts";
 
-import {
-    DEFAULT_ERROR_TOAST_LIFE,
-    ERROR,
-} from "@/afrc/Search/constants.ts";
+import { DEFAULT_ERROR_TOAST_LIFE, ERROR } from "@/afrc/Search/constants.ts";
 
 import type { Ref } from "vue";
 import type { Feature, Map } from "maplibre-gl";
@@ -72,7 +69,6 @@ provide("overlays", props.overlays);
 provide("basemaps", props.basemaps);
 provide("selectedDrawnFeature", selectedDrawnFeature);
 
-
 watch(
     () => props.basemaps,
     (updatedBasemaps) => {

afrc/src/afrc/Search/components/InteractiveMap/components/InteractionsDrawer.vue

@@ -11,10 +11,7 @@ import {
 
 import type { Component, Ref } from "vue";
 import type { Map } from "maplibre-gl";
-import type {
-    MapInteractionItem,
-    Settings,
-} from "@/afrc/Search/types.ts";
+import type { MapInteractionItem, Settings } from "@/afrc/Search/types.ts";
 
 const props = defineProps<{
     map: Map;

afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue

@@ -132,7 +132,8 @@ watch(
         if (selected) {
             updateFeatureSelection(selected as Ref<string[]>);
         }
-    }, {deep: true}
+    },
+    { deep: true },
 );
 
 watch(
@@ -199,25 +200,28 @@ async function fitBoundsOfFeatures(features: FeatureCollection) {
 function updateFeatureSelection(selected: Ref<string[]>) {
     const layers: Array<string> = [];
     overlays.forEach((overlay) => {
-        layers.push(...overlay.layerdefinitions.map(
-            (layerDefinition) => layerDefinition.id,
-        ));
+        layers.push(
+            ...overlay.layerdefinitions.map(
+                (layerDefinition) => layerDefinition.id,
+            ),
+        );
     });
-    const features = map.value!.queryRenderedFeatures({layers:layers});
-    features.forEach(feature => {
-        const featureSelected = selected.value.includes(feature.properties?.resourceinstanceid);
+    const features = map.value!.queryRenderedFeatures({ layers: layers });
+    features.forEach((feature) => {
+        const featureSelected = selected.value.includes(
+            feature.properties?.resourceinstanceid,
+        );
         map.value!.setFeatureState(
             {
                 source: "referencecollections",
                 sourceLayer: "referencecollections",
                 id: feature.id,
             },
-            { selected: featureSelected }
+            { selected: featureSelected },
         );
     });
 }
 
-
 function addBufferLayer() {
     map.value!.addSource(BUFFER_LAYER_ID, {
         type: "geojson",
@@ -290,9 +294,7 @@ function createMap() {
 }
 
 function updateBasemap(basemap: Basemap) {
-    map.value!.setStyle(
-        basemap.url,
-    );
+    map.value!.setStyle(basemap.url);
 
     map.value!.once(IDLE, () => {
         updateMapOverlays(overlays);
@@ -384,7 +386,12 @@ function addOverlayToMap(overlay: MapLayer) {
                 clickedCoordinates.value = [e.lngLat.lng, e.lngLat.lat];
                 clickedFeatures.value = features;
                 resultsSelected.value = [];
-                const uniqueResourceIds = new Set(features.map((feature) => feature.properties?.resourceinstanceid as string));
+                const uniqueResourceIds = new Set(
+                    features.map(
+                        (feature) =>
+                            feature.properties?.resourceinstanceid as string,
+                    ),
+                );
                 resultsSelected.value = Array.from(uniqueResourceIds);
             } else {
                 resultsSelected.value = [];

afrc/src/afrc/Search/components/InteractiveMap/components/MapFilter/components/BufferControls.vue

@@ -6,10 +6,7 @@ import MapboxDraw from "@mapbox/mapbox-gl-draw";
 
 import type { Feature, Map } from "maplibre-gl";
 import type { PropType, Ref } from "vue";
-import {
-    DRAW_UPDATE_EVENT,
-    METERS,
-} from "@/afrc/Search/constants.ts";
+import { DRAW_UPDATE_EVENT, METERS } from "@/afrc/Search/constants.ts";
 
 const { $gettext } = useGettext();
 

afrc/src/afrc/Search/components/SearchResultItem.vue

@@ -19,16 +19,17 @@ function selectResult(resourceid: string) {
 function clearResult() {
     resultsSelected.value = [];
 }
-
 </script>
 
 <template>
-    <section 
-        class="result" 
-        :class="{ 
-            hovered: resultsSelected.includes(searchResult._source.resourceinstanceid)
+    <section
+        class="result"
+        :class="{
+            hovered: resultsSelected.includes(
+                searchResult._source.resourceinstanceid,
+            ),
         }"
-        @mouseenter="selectResult(searchResult._source.resourceinstanceid)" 
+        @mouseenter="selectResult(searchResult._source.resourceinstanceid)"
         @mouseleave="clearResult"
     >
         <div class="image-placeholder">
@@ -51,6 +52,8 @@ function clearResult() {
                 <Button
                     label="edit"
                     variant="link"
+                    as="a"
+                    :href="searchResult._id"
                 />
             </div>
         </div>

afrc/src/afrc/Search/components/SimpleSearchFilter.vue

@@ -4,6 +4,8 @@ import { ref, watch } from "vue";
 import AutoComplete from "primevue/autocomplete";
 import type { AutoCompleteCompleteEvent } from "primevue/autocomplete";
 
+import arches from "arches";
+
 import type { GenericObject } from "@/afrc/Search/types";
 
 const componentName = "term-filter";
@@ -36,7 +38,7 @@ function search(event: AutoCompleteCompleteEvent) {
     var queryString = new URLSearchParams();
     queryString.set("q", event.query);
     queryString.set("lang", "*");
-    fetch("search/terms" + "?" + queryString.toString())
+    fetch(arches.urls.search_terms + "?" + queryString.toString())
         .then((response) => response.json())
         .then((data) => {
             Object.keys(data).forEach((key) => {

afrc/templates/views/components/plugins/afrc-search-plugin.htm

@@ -0,0 +1 @@
+<div id="search-mounting-point"></div>