Adds scheme names/labels section

arches_lingo/serializers.py

@@ -34,6 +34,14 @@ class Meta:
         fields = "__all__"
 
 
+class SchemeLabelSerializer(ArchesModelSerializer):
+    class Meta:
+        model = ResourceInstance
+        graph_slug = "scheme"
+        nodegroups = ["appellative_status"]
+        fields = "__all__"
+
+
 class TextualWorkRdmSystemSerializer(ArchesModelSerializer):
     class Meta:
         model = ResourceInstance

arches_lingo/src/arches_lingo/api.ts

@@ -59,6 +59,13 @@ export const fetchSchemeCreation = async (schemeId: string) => {
     return parsed;
 };
 
+export const fetchSchemeLabel = async (schemeId: string) => {
+    const response = await fetch(arches.urls.api_scheme_label(schemeId));
+    const parsed = await response.json();
+    if (!response.ok) throw new Error(parsed.message || response.statusText);
+    return parsed;
+};
+
 export const updateSchemeCreation = async (
     schemeId: string,
     schemeInstance: SchemeInstance,

arches_lingo/src/arches_lingo/components/generic/ControlledListItemViewer.vue

@@ -1,8 +1,28 @@
 <script setup lang="ts">
 import type { ControlledListItem } from "@/arches_lingo/types";
 
-const props = defineProps<{ value?: ControlledListItem }>();
+withDefaults(
+    defineProps<{
+        value?: ControlledListItem[] | ControlledListItem;
+    }>(),
+    {
+        value: () => [],
+    },
+);
 </script>
 <template>
-    <p>{{ props.value?.labels }}</p>
+    <span v-if="value instanceof Array">
+        <span
+            v-for="val in value"
+            :key="val.list_id"
+        >
+            <span>{{ val.labels[0].value }}</span>
+        </span>
+    </span>
+    <span v-else-if="value">
+        <span>{{ (value as ControlledListItem).labels[0].value }}</span>
+    </span>
+    <span v-else>
+        <span>{{ $gettext("None") }}</span>
+    </span>
 </template>

arches_lingo/src/arches_lingo/components/generic/LabelViewer.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import DataTable from "primevue/datatable";
+import Column from "primevue/column";
+import Button from "primevue/button";
+
+import type { AppellativeStatus } from "@/arches_lingo/types";
+import ControlledListItemViewer from "@/arches_lingo/components/generic/ControlledListItemViewer.vue";
+import ResourceInstanceRelationshipsViewer from "@/arches_lingo/components/generic/ResourceInstanceRelationshipsViewer.vue";
+
+const expandedRows = ref([]);
+
+const props = defineProps<{
+    value?: AppellativeStatus[];
+}>();
+
+const emits = defineEmits(["editLabel", "deleteLabel"]);
+</script>
+<template>
+    <DataTable
+        v-model:expanded-rows="expandedRows"
+        :value="props.value"
+        onrowexp
+        table-style="min-width: 50rem"
+    >
+        <Column
+            expander
+            style="width: 3rem"
+        />
+        <Column
+            field="appellative_status_ascribed_name_content"
+            header="Label"
+            sortable
+        >
+            <template #body="slotProps">
+                {{
+                    (slotProps.data as AppellativeStatus)
+                        .appellative_status_ascribed_name_content
+                }}
+            </template>
+        </Column>
+        <Column
+            field="appellative_status_ascribed_relation"
+            header="Label Type"
+            sortable
+        >
+            <template #body="slotProps">
+                <ControlledListItemViewer
+                    :value="
+                        (slotProps.data as AppellativeStatus)
+                            .appellative_status_ascribed_relation
+                    "
+                >
+                </ControlledListItemViewer>
+            </template>
+        </Column>
+        <Column
+            field="appellative_status_ascribed_name_language"
+            header="Label Language"
+            sortable
+        >
+            <template #body="slotProps">
+                <ControlledListItemViewer
+                    :value="
+                        (slotProps.data as AppellativeStatus)
+                            .appellative_status_ascribed_name_language
+                    "
+                >
+                </ControlledListItemViewer>
+            </template>
+        </Column>
+        <Column>
+            <template #body="slotProps">
+                <div class="controls">
+                    <Button
+                        icon="pi pi-file-edit"
+                        aria-label="edit"
+                        @click="
+                            () =>
+                                emits(
+                                    'editLabel',
+                                    (slotProps.data as AppellativeStatus)
+                                        .tileid,
+                                )
+                        "
+                    />
+                    <Button
+                        icon="pi pi-trash"
+                        aria-label="delete"
+                        @click="
+                            () =>
+                                emits(
+                                    'deleteLabel',
+                                    (slotProps.data as AppellativeStatus)
+                                        .tileid,
+                                )
+                        "
+                    />
+                </div>
+            </template>
+        </Column>
+        <template #expansion="slotProps">
+            <div class="drawer">
+                <div>
+                    Bibliographic Sources:
+                    <ResourceInstanceRelationshipsViewer
+                        :value="
+                            (slotProps.data as AppellativeStatus)
+                                .appellative_status_data_assignment_object_used
+                        "
+                    ></ResourceInstanceRelationshipsViewer>
+                </div>
+                <div>
+                    Contributors:
+                    <ResourceInstanceRelationshipsViewer
+                        :value="
+                            (slotProps.data as AppellativeStatus)
+                                .appellative_status_data_assignment_actor
+                        "
+                    ></ResourceInstanceRelationshipsViewer>
+                </div>
+            </div>
+        </template>
+    </DataTable>
+</template>
+<style scoped>
+.controls {
+    display: flex;
+    flex-direction: row;
+}
+.controls button {
+    margin: 0 0.5rem;
+}
+</style>

arches_lingo/src/arches_lingo/components/generic/ResourceInstanceRelationshipsViewer.vue

@@ -1,15 +1,25 @@
 <script setup lang="ts">
+import { useGettext } from "vue3-gettext";
 import type { ResourceInstanceReference } from "@/arches_lingo/types";
+import arches from "arches";
 
-const props = defineProps<{ value?: ResourceInstanceReference[] }>();
+const { $gettext } = useGettext();
+
+withDefaults(defineProps<{ value?: ResourceInstanceReference[] }>(), {
+    value: (): ResourceInstanceReference[] => [],
+});
 </script>
 <template>
-    <div v-if="props.value">
-        <div
-            v-for="val in props.value"
+    <span v-if="value">
+        <span
+            v-for="val in value"
             :key="val.resourceXresourceId"
+            class="resource-instance-relationship-view"
         >
-            {{ val.display_value }}
-        </div>
-    </div>
+            <a :href="`${arches.urls.resource_editor}${val.resourceId}`">
+                {{ val.display_value }}
+            </a>
+        </span>
+    </span>
+    <span v-else>{{ $gettext("None") }}</span>
 </template>

arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { onBeforeUpdate, onUpdated, ref } from "vue";
 import { useGettext } from "vue3-gettext";
 import Button from "primevue/button";
 
@@ -7,19 +8,25 @@ import TabList from "primevue/tablist";
 import Tab from "primevue/tab";
 import TabPanels from "primevue/tabpanels";
 import TabPanel from "primevue/tabpanel";
-import SchemeNamespace from "../report/SchemeNamespace.vue";
-import { onBeforeUpdate, onUpdated, ref } from "vue";
-import SchemeStandard from "../report/SchemeStandard.vue";
+import SchemeNamespace from "@/arches_lingo/components/scheme/report/SchemeNamespace.vue";
+import SchemeStandard from "@/arches_lingo/components/scheme/report/SchemeStandard.vue";
+import SchemeLabel from "@/arches_lingo/components/scheme/report/SchemeLabel.vue";
 type sectionTypes = typeof SchemeNamespace;
 
 const { $gettext } = useGettext();
 const EDIT = "edit";
 const props = defineProps<{
     editorMax: boolean;
     activeTab: string;
+    activeArgs: Array<object>;
 }>();
 const childRefs = ref<Array<sectionTypes>>([]);
 const schemeComponents = [
+    {
+        component: SchemeLabel,
+        id: "label",
+        editorTabName: $gettext("Scheme Label"),
+    },
     {
         component: SchemeNamespace,
         id: "namespace",
@@ -111,7 +118,7 @@ async function updateScheme() {
                     <TabPanel :value="component.id">
                         <component
                             :is="component.component"
-                            v-bind="{ mode: EDIT }"
+                            v-bind="{ mode: EDIT, args: props.activeArgs }"
                             :ref="(el) => getRef(el, index)"
                             v-on="{ updated: onUpdated }"
                         />

arches_lingo/src/arches_lingo/components/scheme/report/SchemeLabel.vue

@@ -1,54 +1,83 @@
 <script setup lang="ts">
 import { useGettext } from "vue3-gettext";
+import { onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
+
+import { VIEW, EDIT, OPEN_EDITOR } from "@/arches_lingo/constants.ts";
+import type {
+    DataComponentMode,
+    SchemeInstance,
+} from "@/arches_lingo/types.ts";
+import { fetchSchemeLabel } from "@/arches_lingo/api.ts";
 import SchemeReportSection from "@/arches_lingo/components/scheme/report/SchemeSection.vue";
-import { ref } from "vue";
-import DataTable from "primevue/datatable";
-import Column from "primevue/column";
-const labels = ref([
-    {
-        code: "1",
-        name: "label 1",
-        category: "category 1",
-        quantity: "1",
-    },
-    {
-        code: "2",
-        name: "label 2",
-        category: "category 2",
-        quantity: "2",
-    },
+import LabelViewer from "@/arches_lingo/components/generic/LabelViewer.vue";
+
+const schemeInstance = ref<SchemeInstance>();
+const { $gettext } = useGettext();
+const route = useRoute();
+
+const props = withDefaults(
+    defineProps<{
+        mode?: DataComponentMode;
+        args?: Array<object>;
+    }>(),
     {
-        code: "3",
-        name: "label 3",
-        category: "category 3",
-        quantity: "3",
+        mode: VIEW,
+        args: () => [],
     },
-]);
-const { $gettext } = useGettext();
+);
+
+defineExpose({ save, getSectionValue });
+
+const emits = defineEmits([OPEN_EDITOR]);
+
+onMounted(async () => {
+    getSectionValue();
+});
+
+async function deleteLabel() {
+    // deletes label
+    console.log("deleted");
+}
+
+async function getSectionValue() {
+    console.log(props);
+    const result = await fetchSchemeLabel(route.params.id as string);
+    schemeInstance.value = {
+        appellative_status: result.appellative_status,
+    };
+}
+
+async function save() {
+    // todo for Johnathan.  This function will save the values of the form back to arches.
+}
+
+// async function update() {
+//     // todo for Johnathan.  This function will handle the update emit when the user changes values in your form - you store those values in this section.
+// }
 </script>
 
 <template>
-    <SchemeReportSection :title-text="$gettext('Scheme Labels')">
-        <DataTable
-            :value="labels"
-            table-style="min-width: 50rem"
+    <div v-if="!mode || mode === VIEW">
+        <SchemeReportSection
+            :title-text="$gettext('Scheme Labels')"
+            @open-editor="emits(OPEN_EDITOR)"
         >
-            <Column
-                field="code"
-                header="Code"
-            ></Column>
-            <Column
-                field="name"
-                header="Name"
-            ></Column>
-            <Column
-                field="category"
-                header="Category"
-            ></Column>
-            <Column
-                field="quantity"
-                header="Quantity"
-            ></Column>
-        </DataTable>
-    </SchemeReportSection>
+            <LabelViewer
+                :value="schemeInstance?.appellative_status"
+                @edit-label="(...args) => emits(OPEN_EDITOR, ...args)"
+                @delete-label="deleteLabel"
+            ></LabelViewer>
+        </SchemeReportSection>
+    </div>
+    <div v-if="mode === EDIT"><!-- todo for Johnathan-->abc</div>
 </template>
+<style scoped>
+:deep(.drawer) {
+    padding: 1rem 2rem;
+}
+
+:deep(.resource-instance-relationship-view) {
+    padding: 0 0.25rem;
+}
+</style>