Rough out scheme list

arches_lingo/src/arches_lingo/api.ts

@@ -86,3 +86,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/scheme/SchemeCard.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { inject } from "vue";
+import { systemLanguageKey } from "@/arches_lingo/constants.ts";
+import { routeNames } from "@/arches_lingo/routes.ts";
+
+import type { Language } from "@/arches_vue_utils/types";
+import type { SchemeResource, ResourceDescriptor } from "@/arches_lingo/types";
+
+const systemLanguage = inject(systemLanguageKey) as Language;
+
+const { scheme } = defineProps<{ scheme: SchemeResource }>();
+const schemeURL = {
+    name: routeNames.scheme,
+    params: { id: scheme.resourceinstanceid },
+};
+
+const descriptors = scheme.descriptors;
+let schemeDescriptor: ResourceDescriptor = {
+    name: "",
+    description: "",
+};
+if (descriptors) {
+    const descriptor =
+        descriptors[systemLanguage.code] ?? Object.values(descriptors)[0];
+    schemeDescriptor.name = descriptor.name ?? "";
+    schemeDescriptor.description = descriptor.description ?? "";
+}
+</script>
+
+<template>
+    <RouterLink
+        :to="schemeURL"
+        class="scheme-card"
+    >
+        <p>{{ schemeDescriptor.name }}</p>
+        <p>{{ schemeDescriptor.description }}</p>
+    </RouterLink>
+</template>
+
+<style scoped>
+p {
+    text-align: center;
+}
+.scheme-card {
+    text-decoration: none;
+    color: var(--p-text-color);
+    width: 15rem;
+    height: 15rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 0.5rem;
+    border: 1px solid var(--p-menubar-border-color);
+    background-color: var(--p-primary-400);
+}
+.scheme-card:hover {
+    background-color: var(--p-button-primary-hover-background);
+    cursor: pointer;
+}
+</style>

arches_lingo/src/arches_lingo/pages/SchemeList.vue

@@ -1 +1,64 @@
-<template>Schemes list placeholder</template>
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useGettext } from "vue3-gettext";
+
+import { useToast } from "primevue/usetoast";
+import {
+    DEFAULT_ERROR_TOAST_LIFE,
+    ERROR,
+} from "@/arches_references/constants.ts";
+
+import SchemeCard from "@/arches_lingo/components/scheme/SchemeCard.vue";
+import { fetchSchemes } from "@/arches_lingo/api.ts";
+
+import type { SchemeResource } from "@/arches_lingo/types";
+
+const toast = useToast();
+const { $gettext } = useGettext();
+
+const schemes = ref<SchemeResource[]>([]);
+
+onMounted(async () => {
+    try {
+        schemes.value = await fetchSchemes();
+    } catch (error) {
+        toast.add({
+            severity: ERROR,
+            life: DEFAULT_ERROR_TOAST_LIFE,
+            summary: $gettext("Unable to fetch schemes"),
+            detail: error instanceof Error ? error.message : undefined,
+        });
+    }
+    schemes.value.unshift({
+        resourceinstanceid: "placeholder-id",
+        descriptors: {
+            en: {
+                name: "Create a new scheme",
+                description: "This is a placeholder to create a new scheme",
+            },
+        },
+    });
+});
+</script>
+
+<template>
+    <div>
+        <ul class="scheme-cards">
+            <li
+                v-for="scheme in schemes"
+                :key="scheme.resourceinstanceid"
+            >
+                <SchemeCard :scheme="scheme" />
+            </li>
+        </ul>
+    </div>
+</template>
+
+<style scoped>
+.scheme-cards {
+    display: flex;
+    flex-wrap: wrap;
+    list-style-type: none;
+    padding: 0;
+}
+</style>

arches_lingo/src/arches_lingo/types.ts

@@ -66,6 +66,21 @@ export interface SchemeNamespace {
 
 export type DataComponentMode = "edit" | "view";
 
+export interface SchemeResource {
+    resourceinstanceid: string;
+    descriptors: {
+        [key: string]: {
+            name: string;
+            description: string;
+        };
+    };
+}
+
+export interface ResourceDescriptor {
+    name: string;
+    description: string;
+}
+
 export interface NodeAndParentInstruction {
     node: TreeNode;
     shouldHideSiblings: boolean;

arches_lingo/templates/arches_urls.htm

@@ -10,5 +10,6 @@
     api_concepts="{% url 'api-concepts' %}"
     api_search="{% url 'api-search' %}"
     api_uri_namespace='(pluginid)=>{return "{% url "api-uri-components" "aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa" %}".replace("aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa", pluginid)}'
+    api_schemes="{% url 'schemes-list-create' %}"
 ></div>
 {% endblock arches_urls %}

arches_lingo/urls.py

@@ -23,6 +23,7 @@
     path("login", LingoRootView.as_view(), name="login"),
     path("advanced-search", LingoRootView.as_view(), name="advanced-search"),
     path("schemes", LingoRootView.as_view(), name="schemes"),
+    path("scheme/<uuid:id>", LingoRootView.as_view(), name="scheme"),
     path("concept/<uuid:id>", LingoRootView.as_view(), name="concept"),
     path("api/concept-tree", ConceptTreeView.as_view(), name="api-concepts"),
     path("api/search", ValueSearchView.as_view(), name="api-search"),

arches_lingo/views/api/pythonic_models.py

@@ -15,6 +15,7 @@
 class SchemeListCreateView(ArchesModelAPIMixin, ListCreateAPIView):
     permission_classes = [RDMAdministrator]
     serializer_class = SchemeSerializer
+    pagination_class = None
 
 
 class SchemeDetailView(ArchesModelAPIMixin, RetrieveUpdateDestroyAPIView):