make scheme card compoent more atomic re. pr feedback #16

arches_lingo/src/arches_lingo/components/scheme/SchemeCard.vue

@@ -1,43 +1,65 @@
 <script setup lang="ts">
 import { inject } from "vue";
-import { getDescriptors } from "@/arches_vue_utils/utils.ts";
 import { systemLanguageKey } from "@/arches_lingo/constants.ts";
 import { routeNames } from "@/arches_lingo/routes.ts";
 
 import type { Language } from "@/arches_vue_utils/types";
-import type { SchemeDescriptor } from "@/arches_lingo/types";
+import type { SchemeResource, ResourceDescriptor } from "@/arches_lingo/types";
 
 const systemLanguage = inject(systemLanguageKey) as Language;
 
-const { scheme } = defineProps<{ scheme: SchemeDescriptor }>();
+const { scheme } = defineProps<{ scheme: SchemeResource }>();
 const schemeURL = {
     name: routeNames.scheme,
     params: { id: scheme.resourceinstanceid },
 };
-const [schemeName, schemeDescription] = getDescriptors(
-    scheme.descriptors,
-    systemLanguage.code,
-);
+const schemeDescriptor: ResourceDescriptor = (() => {
+    const descriptors = scheme.descriptors;
+    if (!scheme) {
+        return {
+            name: "",
+            description: "",
+        };
+    }
+    const descriptor =
+        descriptors[systemLanguage.code] ??
+        descriptors[Object.keys(descriptors)[0]];
+    return {
+        name: descriptor.name ?? "",
+        description: descriptor.description ?? "",
+    };
+})();
 </script>
 
 <template>
     <RouterLink
         :to="schemeURL"
-        class="existing-scheme-card {"
+        class="scheme-card"
     >
-        <p>{{ schemeName }}</p>
-        <p>{{ schemeDescription }}</p>
+        <p>{{ schemeDescriptor.name }}</p>
+        <p>{{ schemeDescriptor.description }}</p>
     </RouterLink>
 </template>
 
 <style scoped>
-.existing-scheme-card {
+p {
+    text-align: center;
+}
+.scheme-card {
     text-decoration: none;
     color: var(--p-text-color);
-    width: inherit;
+    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

@@ -3,34 +3,30 @@ import { onMounted, ref } from "vue";
 import SchemeCard from "@/arches_lingo/components/scheme/SchemeCard.vue";
 import { fetchSchemes } from "@/arches_lingo/api.ts";
 
-import type { SchemeDescriptor } from "@/arches_lingo/types";
+import type { SchemeResource } from "@/arches_lingo/types";
 
-const schemes = ref<SchemeDescriptor[]>([]);
+const schemes = ref<SchemeResource[]>([]);
 
 onMounted(async () => {
     schemes.value = await fetchSchemes();
+    schemes.value.unshift({
+        resourceinstanceid: "placeholder-id",
+        descriptors: {
+            en: {
+                name: "Create a new scheme",
+                description: "This is a placeholder to create a new scheme",
+            },
+        },
+    } as SchemeResource);
 });
 </script>
 
 <template>
     <div>
-        <ul
-            style="
-                display: flex;
-                flex-wrap: wrap;
-                list-style-type: none;
-                padding: 0;
-            "
-        >
-            <!-- Create New Scheme -->
-            <li class="scheme-card new-scheme-card">
-                Placeholder for creating new scheme
-            </li>
-            <!-- Existing Schemes -->
+        <ul class="scheme-cards">
             <li
                 v-for="scheme in schemes"
                 :key="scheme.resourceinstanceid"
-                class="scheme-card"
             >
                 <SchemeCard :scheme="scheme" />
             </li>
@@ -39,20 +35,10 @@ onMounted(async () => {
 </template>
 
 <style scoped>
-.scheme-card {
-    margin: 0.5rem;
-    padding: 1rem;
-    border: 0.0625rem solid var(--p-menubar-border-color);
-    background-color: var(--p-primary-400);
-    width: 15rem;
-    height: 15rem;
+.scheme-cards {
     display: flex;
-}
-.scheme-card:hover {
-    background-color: var(--p-button-primary-hover-background);
-    cursor: pointer;
-}
-.new-scheme-card {
-    text-align: center;
+    flex-wrap: wrap;
+    list-style-type: none;
+    padding: 0;
 }
 </style>

arches_lingo/src/arches_lingo/types.ts

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