Updates for viewers, extraction to scheme label

archesproject · Dec 13, 2024 · c57a9f4 · c57a9f4
1 parent 152d5a8
commit c57a9f4
Show file tree

Hide file tree

Showing 10 changed files with 233 additions and 49 deletions.
diff --git a/arches_lingo/src/arches_lingo/components/generic/ControlledListItemViewer.vue b/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>
diff --git a/arches_lingo/src/arches_lingo/components/generic/LabelViewer.vue b/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>
diff --git a/arches_lingo/src/arches_lingo/components/generic/ResourceInstanceRelationshipsViewer.vue b/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>
diff --git a/arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue b/arches_lingo/src/arches_lingo/components/scheme/editor/SchemeEditor.vue
@@ -18,6 +18,7 @@ const EDIT = "edit";
 const props = defineProps<{
     editorMax: boolean;
     activeTab: string;
+    activeArgs: Array<object>;
 }>();
 const childRefs = ref<Array<sectionTypes>>([]);
 const schemeComponents = [
@@ -117,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 }"
                         />

diff --git a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLabel.vue b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLabel.vue
@@ -3,24 +3,29 @@ import { useGettext } from "vue3-gettext";
 import { onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
 
-import DataTable from "primevue/datatable";
-import Column from "primevue/column";
-
 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 LabelViewer from "@/arches_lingo/components/generic/LabelViewer.vue";
 
 const schemeInstance = ref<SchemeInstance>();
 const { $gettext } = useGettext();
 const route = useRoute();
 
-defineProps<{
-    mode?: DataComponentMode;
-}>();
+const props = withDefaults(
+    defineProps<{
+        mode?: DataComponentMode;
+        args?: Array<object>;
+    }>(),
+    {
+        mode: VIEW,
+        args: () => [],
+    },
+);
 
 defineExpose({ save, getSectionValue });
 
@@ -30,13 +35,17 @@ 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,
     };
-
-    //schemeAsLabelTable(scheme)
 }
 
 async function save() {
@@ -54,24 +63,21 @@ async function save() {
             :title-text="$gettext('Scheme Labels')"
             @open-editor="emits(OPEN_EDITOR)"
         >
-            <DataTable
+            <LabelViewer
                 :value="schemeInstance?.appellative_status"
-                table-style="min-width: 50rem"
-            >
-                <Column
-                    field="appellative_status_ascribed_name_content"
-                    header="Label"
-                ></Column>
-                <Column
-                    field="type"
-                    header="Label Type"
-                ></Column>
-                <Column
-                    field="language"
-                    header="Label Language"
-                ></Column>
-            </DataTable>
+                @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>
diff --git a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNamespace.vue b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNamespace.vue
@@ -14,7 +14,7 @@ import type {
     SchemeNamespaceUpdate,
     SchemeInstance,
 } from "@/arches_lingo/types";
-import { VIEW, EDIT } from "@/arches_lingo/constants.ts";
+import { VIEW, EDIT, OPEN_EDITOR } from "@/arches_lingo/constants.ts";
 
 const { $gettext } = useGettext();
 const schemeNamespace = ref<SchemeInstance>();
@@ -24,7 +24,7 @@ defineProps<{
     mode?: DataComponentMode;
 }>();
 
-defineEmits(["openEditor"]);
+defineEmits([OPEN_EDITOR]);
 
 defineExpose({ save, getSectionValue });
 
@@ -63,7 +63,7 @@ function onNamespaceNameUpdate(val: string) {
         <div v-if="!mode || mode === VIEW">
             <SchemeReportSection
                 :title-text="$gettext('Scheme Namespace')"
-                @open-editor="$emit('openEditor')"
+                @open-editor="$emit(OPEN_EDITOR)"
             >
                 <NonLocalizedString
                     :value="schemeNamespace?.namespace?.namespace_name"

diff --git a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeSection.vue b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeSection.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { useGettext } from "vue3-gettext";
 import Button from "primevue/button";
+import { OPEN_EDITOR } from "@/arches_lingo/constants.ts";
 
-defineEmits(["openEditor"]);
+defineEmits([OPEN_EDITOR]);
 
 const { $gettext } = useGettext();
 const props = defineProps<{
@@ -17,7 +18,7 @@ const props = defineProps<{
             <div>
                 <Button
                     :label="$gettext(`Add ${props.titleText}`)"
-                    @click="$emit('openEditor')"
+                    @click="$emit(OPEN_EDITOR)"
                 ></Button>
             </div>
         </div>

diff --git a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeStandard.vue b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeStandard.vue
@@ -29,7 +29,7 @@ const route = useRoute();
 const selectedLanguage = inject(selectedLanguageKey) as Ref<Language>;
 const { $gettext } = useGettext();
 
-defineProps<{
+const { mode = VIEW } = defineProps<{
     mode?: DataComponentMode;
 }>();