Rough out scheme list

arches_lingo/src/arches_lingo/api.ts

@@ -61,3 +61,10 @@ export const fetchConcepts = async () => {
     if (!response.ok) throw new Error(parsed.message || response.statusText);
     return parsed;
 };
+
+export const fetchSchemes = async () => {
+    const response = await fetch(arches.urls.api_schemes);
+    const parsed = await response.json();
+    if (!response.ok) throw new Error(parsed.message || response.statusText);
+    return parsed;
+};

arches_lingo/src/arches_lingo/components/schemes/SchemeBox.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { routeNames } from "@/arches_lingo/routes.ts";
+
+// TODO: Shift into types.ts
+interface Scheme {
+    resourceinstanceid: string;
+    descriptors: {
+        [key: string]: {
+            name: string;
+            description: string;
+        };
+    };
+}
+
+const { scheme } = defineProps<{ scheme: Scheme }>();
+const schemeURL = {
+    name: routeNames.scheme,
+    params: { id: scheme.resourceinstanceid },
+};
+</script>
+
+<template>
+    <div>
+        <RouterLink :to="schemeURL">
+            <p>{{ scheme.descriptors.en.name }}</p>
+        </RouterLink>
+        <p>{{ scheme.descriptors.en.description }}</p>
+    </div>
+</template>

arches_lingo/src/arches_lingo/components/schemes/SchemeBoxes.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import SchemeBox from "@/arches_lingo/components/schemes/SchemeBox.vue";
+import { fetchSchemes } from "@/arches_lingo/api.ts";
+
+const schemes = await fetchSchemes();
+</script>
+
+<template>
+    <div>
+        <ul
+            style="
+                display: flex;
+                flex-wrap: wrap;
+                list-style-type: none;
+                padding: 0;
+            "
+        >
+            <!-- Create New Scheme -->
+            <li class="scheme-card">Placeholder for creating new scheme</li>
+            <!-- Existing Schemes -->
+            <li
+                v-for="scheme in schemes"
+                :key="scheme.resourceinstanceid"
+                class="scheme-card"
+            >
+                <SchemeBox :scheme="scheme" />
+            </li>
+        </ul>
+    </div>
+</template>
+
+<style scoped>
+.scheme-card {
+    margin: 1rem;
+    padding: 1rem;
+    border: 1px solid var(--p-menubar-border-color);
+    min-width: 300px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    background-color: var(--p-primary-400);
+}
+</style>

arches_lingo/src/arches_lingo/pages/SchemeList.vue

@@ -1 +1,13 @@
-<template>Schemes list placeholder</template>
+<script setup lang="ts">
+import ProgressSpinner from "primevue/progressspinner";
+import SchemeBoxes from "@/arches_lingo/components/schemes/SchemeBoxes.vue";
+</script>
+
+<template>
+    <Suspense>
+        <SchemeBoxes />
+        <template #fallback>
+            <ProgressSpinner />
+        </template>
+    </Suspense>
+</template>

arches_lingo/templates/arches_urls.htm

@@ -9,5 +9,6 @@
 <div class="arches-urls"
     api_concepts="{% url 'api-concepts' %}"
     api_search="{% url 'api-search' %}"
+    api_schemes="{% url 'schemes-list-create' %}"
 ></div>
 {% endblock arches_urls %}