Adds scheme names/labels section

arches_lingo/serializers.py

@@ -34,6 +34,38 @@ 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 SchemeNoteSerializer(ArchesModelSerializer):
+    class Meta:
+        model = ResourceInstance
+        graph_slug = "scheme"
+        nodegroups = ["statement"]
+        fields = "__all__"
+
+
+class SchemeNoteTileSerializer(ArchesTileSerializer):
+    class Meta:
+        model = TileModel
+        graph_slug = "scheme"
+        root_node = "statement"
+        fields = "__all__"
+
+
 class TextualWorkRdmSystemSerializer(ArchesModelSerializer):
     class Meta:
         model = ResourceInstance

arches_lingo/src/arches_lingo/api.ts

@@ -59,6 +59,60 @@ 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 (
+    schemeId: string,
+    tileId: string,
+) => {
+    const response = await fetch(
+        arches.urls.api_scheme_label_tile(schemeId, 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 fetchSchemeNotes = async (schemeId: string) => {
+    const response = await fetch(arches.urls.api_scheme_note(schemeId));
+    const parsed = await response.json();
+    if (!response.ok) throw new Error(parsed.message || response.statusText);
+    return parsed;
+};
+
+export const deleteSchemeNoteTile = async (
+    schemeId: string,
+    tileId: string,
+) => {
+    const response = await fetch(
+        arches.urls.api_scheme_note_tile(schemeId, 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/ControlledListItem.vue

@@ -3,12 +3,12 @@ import type {
     ControlledListItem,
     DataComponentMode,
 } from "@/arches_lingo/types";
-import ControlledListItemViewer from "@/arches_lingo/components/generic/ControlledListItemViewer.vue";
+import ControlledListItemViewer from "@/arches_lingo/components/generic/controlled-list-item/ControlledListItemViewer.vue";
 import { EDIT, VIEW } from "@/arches_lingo/constants.ts";
 
-const { mode = EDIT } = defineProps<{
+const { mode = VIEW } = defineProps<{
     mode?: DataComponentMode;
-    value?: ControlledListItem;
+    value?: ControlledListItem | ControlledListItem[];
 }>();
 defineEmits(["update"]);
 </script>

arches_lingo/src/arches_lingo/components/generic/MetaStringViewer.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useGettext } from "vue3-gettext";
+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 { MetaString, MetaStringText } from "@/arches_lingo/types.ts";
+import { SECONDARY } from "@/arches_lingo/constants.ts";
+import { DANGER } from "@/arches_references/constants.ts";
+
+const { $gettext } = useGettext();
+const expandedRows = ref([]);
+const confirm = useConfirm();
+
+const props = defineProps<{
+    metaStringText: MetaStringText;
+    metaStrings?: object[];
+}>();
+
+const emits = defineEmits(["editString", "deleteString"]);
+
+function confirmDelete(tileId: string) {
+    confirm.require({
+        header: $gettext("Confirmation"),
+        message: props.metaStringText.deleteConfirm,
+        group: props.metaStringText.name,
+        accept: () => {
+            emits("deleteString", tileId);
+        },
+        rejectProps: {
+            label: $gettext("Cancel"),
+            severity: SECONDARY,
+            outlined: true,
+        },
+        acceptProps: {
+            label: $gettext("Delete"),
+            severity: DANGER,
+        },
+    });
+}
+</script>
+
+<template>
+    <ConfirmDialog
+        :pt="{ root: { style: { fontFamily: 'sans-serif' } } }"
+        :group="metaStringText.name"
+    ></ConfirmDialog>
+    <div v-if="props.metaStrings?.length">
+        <DataTable
+            v-model:expanded-rows="expandedRows"
+            :value="props.metaStrings"
+        >
+            <Column
+                expander
+                style="width: 3rem"
+            />
+            <Column
+                :header="props.metaStringText.name"
+                sortable
+            >
+                <template #body="slotProps">
+                    <slot
+                        name="name"
+                        :row-data="slotProps.data"
+                    ></slot>
+                </template>
+            </Column>
+            <Column
+                :header="props.metaStringText.type"
+                sortable
+            >
+                <template #body="slotProps">
+                    <slot
+                        name="type"
+                        :row-data="slotProps.data"
+                    ></slot>
+                </template>
+            </Column>
+            <Column
+                :header="props.metaStringText.language"
+                sortable
+            >
+                <template #body="slotProps">
+                    <slot
+                        name="language"
+                        :row-data="slotProps.data"
+                    ></slot>
+                </template>
+            </Column>
+            <Column>
+                <template #body="slotProps">
+                    <div class="controls">
+                        <Button
+                            icon="pi pi-file-edit"
+                            :aria-label="$gettext('edit')"
+                            @click="
+                                () =>
+                                    emits(
+                                        'editString',
+                                        (slotProps.data as MetaString).tileid,
+                                    )
+                            "
+                        />
+                        <Button
+                            icon="pi pi-trash"
+                            :aria-label="$gettext('delete')"
+                            severity="danger"
+                            outlined
+                            @click="
+                                () =>
+                                    confirmDelete(
+                                        (slotProps.data as MetaString).tileid,
+                                    )
+                            "
+                        />
+                    </div>
+                </template>
+            </Column>
+            <template #expansion="slotProps">
+                <div class="drawer">
+                    <slot
+                        name="drawer"
+                        :row-data="slotProps.data"
+                    ></slot>
+                </div>
+            </template>
+        </DataTable>
+    </div>
+    <div v-else>{{ props.metaStringText.noRecords }}</div>
+</template>
+<style scoped>
+.controls {
+    display: flex;
+    flex-direction: row;
+}
+.controls button {
+    margin: 0 0.5rem;
+}
+</style>

arches_lingo/src/arches_lingo/components/generic/NonLocalizedString.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import NonLocalizedStringViewer from "@/arches_lingo/components/generic/NonLocalizedStringViewer.vue";
-import NonLocalizedStringEditor from "@/arches_lingo/components/generic/NonLocalizedStringEditor.vue";
+import NonLocalizedStringViewer from "@/arches_lingo/components/generic/non-localized-string/NonLocalizedStringViewer.vue";
+import NonLocalizedStringEditor from "@/arches_lingo/components/generic/non-localized-string/NonLocalizedStringEditor.vue";
 import type { DataComponentMode } from "@/arches_lingo/types.ts";
 import { EDIT, VIEW } from "@/arches_lingo/constants.ts";
 
-const { mode = EDIT } = defineProps<{
+const { mode = VIEW } = defineProps<{
     mode?: DataComponentMode;
     value?: string;
 }>();

arches_lingo/src/arches_lingo/components/generic/ResourceInstanceRelationships.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import ResourceInstanceRelationshipsViewer from "@/arches_lingo/components/generic/ResourceInstanceRelationshipsViewer.vue";
-import ResourceInstanceRelationshipsEditor from "@/arches_lingo/components/generic/ResourceInstanceRelationshipsEditor.vue";
+import ResourceInstanceRelationshipsViewer from "@/arches_lingo/components/generic/resource-instance-relationships/ResourceInstanceRelationshipsViewer.vue";
+import ResourceInstanceRelationshipsEditor from "@/arches_lingo/components/generic/resource-instance-relationships/ResourceInstanceRelationshipsEditor.vue";
 import { EDIT, VIEW } from "@/arches_lingo/constants.ts";
 import type {
     DataComponentMode,
     ResourceInstanceReference,
 } from "@/arches_lingo/types";
 
-const { mode = EDIT } = defineProps<{
+const { mode = VIEW } = defineProps<{
     mode?: DataComponentMode;
     value?: ResourceInstanceReference[];
     options?: ResourceInstanceReference[];
@@ -26,7 +26,9 @@ function onUpdate(val: string[]) {
     <div v-if="mode === EDIT">
         <ResourceInstanceRelationshipsEditor
             :options="options"
-            :val="value?.map((x) => x.resourceId) ?? []"
+            :val="
+                value?.map((referenceValue) => referenceValue.resourceId) ?? []
+            "
             @update="onUpdate"
         />
     </div>

arches_lingo/src/arches_lingo/components/generic/controlled-list-item/ControlledListItemViewer.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { ControlledListItem } from "@/arches_lingo/types";
+
+withDefaults(
+    defineProps<{
+        value?: ControlledListItem[] | ControlledListItem;
+    }>(),
+    {
+        value: () => [],
+    },
+);
+</script>
+<template>
+    <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/resource-instance-relationships/ResourceInstanceRelationshipsViewer.vue

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