genericizes label viewer

archesproject · Dec 23, 2024 · 7b2737d · 7b2737d
1 parent b4ee6b7
commit 7b2737d
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 56 deletions.
diff --git a/arches_lingo/src/arches_lingo/components/generic/ControlledListItem.vue b/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>

diff --git a/arches_lingo/src/arches_lingo/components/generic/LabelViewer.vue b/arches_lingo/src/arches_lingo/components/generic/LabelViewer.vue
@@ -7,17 +7,14 @@ import Button from "primevue/button";
 import ConfirmDialog from "primevue/confirmdialog";
 import { useConfirm } from "primevue/useconfirm";
 
-import ControlledListItem from "@/arches_lingo/components/generic/ControlledListItemViewer.vue";
-import ResourceInstanceRelationships from "@/arches_lingo/components/generic/ResourceInstanceRelationships.vue";
-
 import type { AppellativeStatus } from "@/arches_lingo/types";
 
 const { $gettext } = useGettext();
 const expandedRows = ref([]);
 const confirm = useConfirm();
 
 const props = defineProps<{
-    value?: AppellativeStatus[];
+    labels?: object[];
 }>();
 
 const emits = defineEmits(["editLabel", "deleteLabel"]);
@@ -30,12 +27,12 @@ function confirmDelete(tileId: string) {
             emits("deleteLabel", tileId);
         },
         rejectProps: {
-            label: "Cancel",
+            label: $gettext("Cancel"),
             severity: "secondary",
             outlined: true,
         },
         acceptProps: {
-            label: "Delete",
+            label: $gettext("Delete"),
             severity: "danger",
         },
     });
@@ -48,53 +45,44 @@ function confirmDelete(tileId: string) {
     ></ConfirmDialog>
     <DataTable
         v-model:expanded-rows="expandedRows"
-        :value="props.value"
+        :value="props.labels"
         table-style="min-width: 50rem"
     >
         <Column
             expander
             style="width: 3rem"
         />
         <Column
-            field="appellative_status_ascribed_name_content"
             :header="$gettext('Label')"
             sortable
         >
             <template #body="slotProps">
-                {{
-                    (slotProps.data as AppellativeStatus)
-                        .appellative_status_ascribed_name_content
-                }}
+                <slot
+                    name="name"
+                    :row-data="slotProps.data"
+                ></slot>
             </template>
         </Column>
         <Column
-            field="appellative_status_ascribed_relation"
             :header="$gettext('Label Type')"
             sortable
         >
             <template #body="slotProps">
-                <ControlledListItem
-                    :value="
-                        (slotProps.data as AppellativeStatus)
-                            .appellative_status_ascribed_relation
-                    "
-                >
-                </ControlledListItem>
+                <slot
+                    name="type"
+                    :row-data="slotProps.data"
+                ></slot>
             </template>
         </Column>
         <Column
-            field="appellative_status_ascribed_name_language"
             :header="$gettext('Label Language')"
             sortable
         >
             <template #body="slotProps">
-                <ControlledListItem
-                    :value="
-                        (slotProps.data as AppellativeStatus)
-                            .appellative_status_ascribed_name_language
-                    "
-                >
-                </ControlledListItem>
+                <slot
+                    name="language"
+                    :row-data="slotProps.data"
+                ></slot>
             </template>
         </Column>
         <Column>
@@ -130,24 +118,10 @@ function confirmDelete(tileId: string) {
         </Column>
         <template #expansion="slotProps">
             <div class="drawer">
-                <div>
-                    {{ $gettext("Bibliographic Sources") }}:
-                    <ResourceInstanceRelationships
-                        :value="
-                            (slotProps.data as AppellativeStatus)
-                                .appellative_status_data_assignment_object_used
-                        "
-                    ></ResourceInstanceRelationships>
-                </div>
-                <div>
-                    {{ $gettext("Contributors") }}:
-                    <ResourceInstanceRelationships
-                        :value="
-                            (slotProps.data as AppellativeStatus)
-                                .appellative_status_data_assignment_actor
-                        "
-                    ></ResourceInstanceRelationships>
-                </div>
+                <slot
+                    name="drawer"
+                    :row-data="slotProps.data"
+                ></slot>
             </div>
         </template>
     </DataTable>

diff --git a/arches_lingo/src/arches_lingo/components/generic/NonLocalizedString.vue b/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 NonLocalizedStringViewer from "@/arches_lingo/components/generic/non-localized-string/NonLocalizedStringViewer.vue";
 import NonLocalizedStringEditor from "@/arches_lingo/components/generic/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;
 }>();

diff --git a/arches_lingo/src/arches_lingo/components/generic/ResourceInstanceRelationships.vue b/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[];

diff --git a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLabel.vue b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLabel.vue
@@ -5,12 +5,15 @@ import { useRoute } from "vue-router";
 
 import { VIEW, EDIT, OPEN_EDITOR, ERROR } from "@/arches_lingo/constants.ts";
 import type {
+    AppellativeStatus,
     DataComponentMode,
     SchemeInstance,
 } from "@/arches_lingo/types.ts";
 import { deleteSchemeLabelTile, 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";
+import ResourceInstanceRelationships from "@/arches_lingo/components/generic/ResourceInstanceRelationships.vue";
+import ControlledListItem from "@/arches_lingo/components/generic/ControlledListItem.vue";
 import { useToast } from "primevue/usetoast";
 
 const schemeInstance = ref<SchemeInstance>();
@@ -106,10 +109,55 @@ async function save() {
             @open-editor="emits(OPEN_EDITOR)"
         >
             <LabelViewer
-                :value="schemeInstance?.appellative_status"
+                :labels="schemeInstance?.appellative_status"
                 @edit-label="editSectionValue"
                 @delete-label="deleteSectionValue"
-            ></LabelViewer>
+            >
+                <template #name="{ rowData }">
+                    {{
+                        (rowData as AppellativeStatus)
+                            .appellative_status_ascribed_name_content
+                    }}
+                </template>
+                <template #type="{ rowData }">
+                    <ControlledListItem
+                        :value="
+                            (rowData as AppellativeStatus)
+                                .appellative_status_ascribed_relation
+                        "
+                    >
+                    </ControlledListItem>
+                </template>
+                <template #language="{ rowData }">
+                    <ControlledListItem
+                        :value="
+                            (rowData as AppellativeStatus)
+                                .appellative_status_ascribed_name_language
+                        "
+                    >
+                    </ControlledListItem>
+                </template>
+                <template #drawer="{ rowData }">
+                    <div>
+                        {{ $gettext("Bibliographic Sources") }}:
+                        <ResourceInstanceRelationships
+                            :value="
+                                (rowData as AppellativeStatus)
+                                    .appellative_status_data_assignment_object_used
+                            "
+                        ></ResourceInstanceRelationships>
+                    </div>
+                    <div>
+                        {{ $gettext("Contributors") }}:
+                        <ResourceInstanceRelationships
+                            :value="
+                                (rowData as AppellativeStatus)
+                                    .appellative_status_data_assignment_actor
+                            "
+                        ></ResourceInstanceRelationships>
+                    </div>
+                </template>
+            </LabelViewer>
         </SchemeReportSection>
     </div>
     <div v-if="mode === EDIT"><!-- todo for Johnathan-->abc</div>