Adds scheme names/labels section

arches_lingo/serializers.py

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

arches_lingo/src/arches_lingo/api.ts

@@ -59,6 +59,27 @@ 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 deleteSchemeLabelTile = async (tileId: string) => {
+    const response = await fetch(arches.urls.api_scheme_label_tile(tileId), {
+        method: "DELETE",
+        headers: { "X-CSRFTOKEN": getToken() },
+    });
+
+    if (!response.ok) {
+        const parsed = await response.json();
+        throw new Error(parsed.message || response.statusText);
+    } else {
+        return true;
+    }
+};
+
 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,160 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import DataTable from "primevue/datatable";
+import Column from "primevue/column";
+import Button from "primevue/button";
+import ConfirmDialog from "primevue/confirmdialog";
+import { useConfirm } from "primevue/useconfirm";
+
+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 confirm = useConfirm();
+
+const props = defineProps<{
+    value?: AppellativeStatus[];
+}>();
+
+const emits = defineEmits(["editLabel", "deleteLabel"]);
+
+function confirmDelete(tileId: string) {
+    confirm.require({
+        header: "Confirmation",
+        message: "Are you sure you want to delete this label?",
+        accept: () => {
+            emits("deleteLabel", tileId);
+        },
+        rejectProps: {
+            label: "Cancel",
+            severity: "secondary",
+            outlined: true,
+        },
+        acceptProps: {
+            label: "Delete",
+            severity: "danger",
+        },
+    });
+}
+</script>
+<template>
+    <ConfirmDialog
+        :pt="{ root: { style: { fontFamily: 'sans-serif' } } }"
+    ></ConfirmDialog>
+    <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"
+                        severity="danger"
+                        outlined
+                        @click="
+                            () =>
+                                confirmDelete(
+                                    (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 }"
                         />