From 7b2737df312ea8e1dc53662fe3b4902ecbbcf78b Mon Sep 17 00:00:00 2001
From: Aaron Gundel <aaron.gundel@gmail.com>
Date: Mon, 23 Dec 2024 16:48:16 -0700
Subject: [PATCH 1/2] genericizes label viewer

---
 .../components/generic/ControlledListItem.vue |  6 +-
 .../components/generic/LabelViewer.vue        | 66 ++++++-------------
 .../components/generic/NonLocalizedString.vue |  4 +-
 .../generic/ResourceInstanceRelationships.vue |  6 +-
 .../components/scheme/report/SchemeLabel.vue  | 52 ++++++++++++++-
 5 files changed, 78 insertions(+), 56 deletions(-)

diff --git a/arches_lingo/src/arches_lingo/components/generic/ControlledListItem.vue b/arches_lingo/src/arches_lingo/components/generic/ControlledListItem.vue
index 695c039..c650fb3 100644
--- 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
index 20a3d38..68c573a 100644
--- a/arches_lingo/src/arches_lingo/components/generic/LabelViewer.vue
+++ b/arches_lingo/src/arches_lingo/components/generic/LabelViewer.vue
@@ -7,9 +7,6 @@ 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();
@@ -17,7 +14,7 @@ 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,7 +45,7 @@ function confirmDelete(tileId: string) {
     ></ConfirmDialog>
     <DataTable
         v-model:expanded-rows="expandedRows"
-        :value="props.value"
+        :value="props.labels"
         table-style="min-width: 50rem"
     >
         <Column
@@ -56,45 +53,36 @@ function confirmDelete(tileId: string) {
             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
index cf2ae83..e48ae27 100644
--- 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
index 8d53ec0..036310d 100644
--- 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
index d7366ff..c95dc02 100644
--- 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>

From 832365b57a2087b5ccbfd769f5aae7b6c2652ac6 Mon Sep 17 00:00:00 2001
From: Aaron Gundel <aaron.gundel@gmail.com>
Date: Thu, 26 Dec 2024 11:32:08 -0700
Subject: [PATCH 2/2] rename label viewer to metastring viewer

---
 .../{LabelViewer.vue => MetaStringViewer.vue} | 27 +++++++++----------
 .../components/scheme/report/SchemeLabel.vue  | 20 +++++++++-----
 arches_lingo/src/arches_lingo/types.ts        | 11 ++++++++
 3 files changed, 38 insertions(+), 20 deletions(-)
 rename arches_lingo/src/arches_lingo/components/generic/{LabelViewer.vue => MetaStringViewer.vue} (81%)

diff --git a/arches_lingo/src/arches_lingo/components/generic/LabelViewer.vue b/arches_lingo/src/arches_lingo/components/generic/MetaStringViewer.vue
similarity index 81%
rename from arches_lingo/src/arches_lingo/components/generic/LabelViewer.vue
rename to arches_lingo/src/arches_lingo/components/generic/MetaStringViewer.vue
index 68c573a..63d4e00 100644
--- a/arches_lingo/src/arches_lingo/components/generic/LabelViewer.vue
+++ b/arches_lingo/src/arches_lingo/components/generic/MetaStringViewer.vue
@@ -7,24 +7,25 @@ import Button from "primevue/button";
 import ConfirmDialog from "primevue/confirmdialog";
 import { useConfirm } from "primevue/useconfirm";
 
-import type { AppellativeStatus } from "@/arches_lingo/types";
+import type { MetaString, MetaStringText } from "@/arches_lingo/types.ts";
 
 const { $gettext } = useGettext();
 const expandedRows = ref([]);
 const confirm = useConfirm();
 
 const props = defineProps<{
-    labels?: object[];
+    metaStringText: MetaStringText;
+    metaStrings?: object[];
 }>();
 
-const emits = defineEmits(["editLabel", "deleteLabel"]);
+const emits = defineEmits(["editString", "deleteString"]);
 
 function confirmDelete(tileId: string) {
     confirm.require({
         header: $gettext("Confirmation"),
-        message: $gettext("Are you sure you want to delete this label?"),
+        message: props.metaStringText.deleteConfirm,
         accept: () => {
-            emits("deleteLabel", tileId);
+            emits("deleteString", tileId);
         },
         rejectProps: {
             label: $gettext("Cancel"),
@@ -45,7 +46,7 @@ function confirmDelete(tileId: string) {
     ></ConfirmDialog>
     <DataTable
         v-model:expanded-rows="expandedRows"
-        :value="props.labels"
+        :value="props.metaStrings"
         table-style="min-width: 50rem"
     >
         <Column
@@ -53,7 +54,7 @@ function confirmDelete(tileId: string) {
             style="width: 3rem"
         />
         <Column
-            :header="$gettext('Label')"
+            :header="props.metaStringText.name"
             sortable
         >
             <template #body="slotProps">
@@ -64,7 +65,7 @@ function confirmDelete(tileId: string) {
             </template>
         </Column>
         <Column
-            :header="$gettext('Label Type')"
+            :header="props.metaStringText.type"
             sortable
         >
             <template #body="slotProps">
@@ -75,7 +76,7 @@ function confirmDelete(tileId: string) {
             </template>
         </Column>
         <Column
-            :header="$gettext('Label Language')"
+            :header="props.metaStringText.language"
             sortable
         >
             <template #body="slotProps">
@@ -94,9 +95,8 @@ function confirmDelete(tileId: string) {
                         @click="
                             () =>
                                 emits(
-                                    'editLabel',
-                                    (slotProps.data as AppellativeStatus)
-                                        .tileid,
+                                    'editString',
+                                    (slotProps.data as MetaString).tileid,
                                 )
                         "
                     />
@@ -108,8 +108,7 @@ function confirmDelete(tileId: string) {
                         @click="
                             () =>
                                 confirmDelete(
-                                    (slotProps.data as AppellativeStatus)
-                                        .tileid,
+                                    (slotProps.data as MetaString).tileid,
                                 )
                         "
                     />
diff --git a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLabel.vue b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLabel.vue
index c95dc02..f634244 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLabel.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLabel.vue
@@ -7,11 +7,12 @@ import { VIEW, EDIT, OPEN_EDITOR, ERROR } from "@/arches_lingo/constants.ts";
 import type {
     AppellativeStatus,
     DataComponentMode,
+    MetaStringText,
     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 MetaStringViewer from "@/arches_lingo/components/generic/MetaStringViewer.vue";
 import ResourceInstanceRelationships from "@/arches_lingo/components/generic/ResourceInstanceRelationships.vue";
 import ControlledListItem from "@/arches_lingo/components/generic/ControlledListItem.vue";
 import { useToast } from "primevue/usetoast";
@@ -20,6 +21,12 @@ const schemeInstance = ref<SchemeInstance>();
 const { $gettext } = useGettext();
 const toast = useToast();
 const route = useRoute();
+const metaStringLabel: MetaStringText = {
+    deleteConfirm: $gettext("Are you sure you want to delete this label?"),
+    language: $gettext("Label Language"),
+    name: $gettext("Label Name"),
+    type: $gettext("Label Type"),
+};
 
 withDefaults(
     defineProps<{
@@ -108,10 +115,11 @@ async function save() {
             :title-text="$gettext('Scheme Labels')"
             @open-editor="emits(OPEN_EDITOR)"
         >
-            <LabelViewer
-                :labels="schemeInstance?.appellative_status"
-                @edit-label="editSectionValue"
-                @delete-label="deleteSectionValue"
+            <MetaStringViewer
+                :meta-strings="schemeInstance?.appellative_status"
+                :meta-string-text="metaStringLabel"
+                @edit-string="editSectionValue"
+                @delete-string="deleteSectionValue"
             >
                 <template #name="{ rowData }">
                     {{
@@ -157,7 +165,7 @@ async function save() {
                         ></ResourceInstanceRelationships>
                     </div>
                 </template>
-            </LabelViewer>
+            </MetaStringViewer>
         </SchemeReportSection>
     </div>
     <div v-if="mode === EDIT"><!-- todo for Johnathan-->abc</div>
diff --git a/arches_lingo/src/arches_lingo/types.ts b/arches_lingo/src/arches_lingo/types.ts
index 088f5a0..c9a4b97 100644
--- a/arches_lingo/src/arches_lingo/types.ts
+++ b/arches_lingo/src/arches_lingo/types.ts
@@ -72,6 +72,17 @@ export interface SchemeNamespaceUpdate {
     };
 }
 
+export interface MetaString {
+    tileid: string;
+}
+
+export interface MetaStringText {
+    name: string;
+    type: string;
+    language: string;
+    deleteConfirm: string;
+}
+
 export interface AppellativeStatus {
     tileid: string;
     appellative_status_ascribed_name_content: string;