6 make plugin

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

@@ -0,0 +1,31 @@
+import ko from 'knockout';
+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';
+import AFRCSEarchTemplate from 'templates/views/components/plugins/afrc-search.htm';
+
+ko.components.register('afrc-search', {
+    viewModel: function() {
+        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');
+        });
+    },
+    template: AFRCSEarchTemplate,
+});

afrc/migrations/0002_plugin.py

@@ -0,0 +1,30 @@
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("afrc", "0001_initial"),
+    ]
+
+    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', 
+            'afrc-search', 
+            '{"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.RunSQL(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,15 +171,15 @@ async function fetchSystemMapData() {
     }
 }
 
-onMounted(async () =>{
+onMounted(async () => {
     doQuery();
     await fetchSystemMapData();
     dataLoaded.value = true;
 });
 </script>
 
 <template>
-    <div class="container">
+    <div class="afrc-container">
         <!-- Main Content Section -->
         <header>
             <SimpleSearchFilter
@@ -193,25 +189,27 @@ onMounted(async () =>{
             <div class="view-buttons">
                 <Button
                     :class="{ active: !showMap }"
-                    variant="outlined"
                     label="terms"
+                    severity="secondary"
                     icon="pi pi-file"
                     icon-pos="top"
+                    :outlined="!showMap"
                     @click="showMap = false"
                 />
                 <Button
                     :class="{ active: showMap }"
-                    variant="outlined"
                     label="map"
+                    severity="secondary"
                     icon="pi pi-map"
                     icon-pos="top"
+                    :outlined="showMap"
                     @click="showMap = true"
                 />
             </div>
         </header>
 
         <main>
-            <section class="search-results-panel">
+            <section class="afrc-search-results-panel">
                 <div class="result-count">{{ resultsCount }} Results</div>
                 <div class="search-result-list">
                     <SearchResultItem
@@ -270,12 +268,13 @@ onMounted(async () =>{
 :root {
     font-size: 16px;
 }
-.container {
+.afrc-container {
     font-family: Arial, sans-serif;
     background-color: #f8f8f8;
     line-height: 1.6;
     display: flex;
     flex-direction: column;
+    flex-grow: 1;
 }
 main {
     display: flex;
@@ -293,7 +292,7 @@ header {
     gap: 5px;
     margin-left: 20px;
 }
-.search-results-panel {
+section.afrc-search-results-panel {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
@@ -306,7 +305,7 @@ header {
     gap: 20px;
 }
 .result-count {
-    font-size: 1rem;
+    font-size: 1.6rem;
     margin: 0px;
     margin-bottom: 15px;
 }

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();