Use label finder util from arches-vue-utils

arches_references/src/arches_references/components/ControlledListsMain.vue

@@ -7,8 +7,10 @@ import ConfirmDialog from "primevue/confirmdialog";
 import Toast from "primevue/toast";
 
 import {
+    ENGLISH,
     displayedRowKey,
     selectedLanguageKey,
+    systemLanguageKey,
 } from "@/arches_references/constants.ts";
 import { routeNames } from "@/arches_references/routes.ts";
 import { dataIsList } from "@/arches_references/utils.ts";
@@ -47,6 +49,8 @@ const selectedLanguage: Ref<Language> = ref(
     ) as Language,
 );
 provide(selectedLanguageKey, selectedLanguage);
+const systemLanguage = ENGLISH; // TODO: get from settings
+provide(systemLanguageKey, systemLanguage);
 </script>
 
 <template>

arches_references/src/arches_references/components/editor/AddValue.vue

@@ -5,12 +5,11 @@ import { useGettext } from "vue3-gettext";
 
 import Button from "primevue/button";
 
+import { ALT_LABEL, PREF_LABEL } from "@/arches_vue_utils/constants.ts";
 import {
     itemKey,
-    ALT_LABEL,
     CONTRAST,
     NOTE_CHOICES,
-    PREF_LABEL,
     PRIMARY,
 } from "@/arches_references/constants.ts";
 import { dataIsNew, shouldUseContrast } from "@/arches_references/utils.ts";

arches_references/src/arches_references/components/editor/ImageEditor.vue

@@ -2,17 +2,24 @@
 import arches from "arches";
 import { computed, inject } from "vue";
 
-import { itemKey, METADATA_CHOICES } from "@/arches_references/constants.ts";
-import { bestLabel } from "@/arches_references/utils.ts";
+import { getItemLabel } from "@/arches_vue_utils/utils.ts";
+import {
+    itemKey,
+    METADATA_CHOICES,
+    systemLanguageKey,
+} from "@/arches_references/constants.ts";
 import ImageMetadata from "@/arches_references/components/editor/ImageMetadata.vue";
 
 import type { Ref } from "vue";
+import type { Language } from "@/arches_vue_utils/types";
 import type {
     ControlledListItem,
     ControlledListItemImage,
 } from "@/arches_references/types";
 
 const item = inject(itemKey) as Ref<ControlledListItem>;
+const systemLanguage = inject(systemLanguageKey) as Language;
+
 const { image } = defineProps<{ image: ControlledListItemImage }>();
 
 const bestTitle = computed(() => {
@@ -34,7 +41,12 @@ const bestAlternativeText = computed(() => {
                     METADATA_CHOICES.alternativeText,
             )
             .find((altText) => altText.language_id === arches.activeLanguage)
-            ?.value || bestLabel(item.value, arches.activeLanguage).value
+            ?.value ||
+        getItemLabel(
+            item.value,
+            arches.activeLanguage.code,
+            systemLanguage.code,
+        ).value
     );
 });
 </script>

arches_references/src/arches_references/components/editor/ImageMetadata.vue

@@ -32,7 +32,7 @@ import AddMetadata from "@/arches_references/components/editor/AddMetadata.vue";
 
 import type { Ref } from "vue";
 import type { DataTableRowEditInitEvent } from "primevue/datatable";
-import type { Language } from "arches/arches/app/src/arches/types";
+import type { Language } from "@/arches_vue_utils/types";
 import type {
     ControlledListItem,
     ControlledListItemImage,

arches_references/src/arches_references/components/editor/ItemEditor.vue

@@ -7,12 +7,11 @@ import ItemType from "@/arches_references/components/editor/ItemType.vue";
 import ItemURI from "@/arches_references/components/editor/ItemURI.vue";
 import ValueEditor from "@/arches_references/components/editor/ValueEditor.vue";
 
+import { ALT_LABEL, PREF_LABEL } from "@/arches_vue_utils/constants.ts";
 import {
     displayedRowKey,
     itemKey,
-    ALT_LABEL,
     NOTE,
-    PREF_LABEL,
 } from "@/arches_references/constants.ts";
 
 import type { Ref } from "vue";

arches_references/src/arches_references/components/editor/ItemHeader.vue

@@ -2,15 +2,20 @@
 import { inject } from "vue";
 import { useGettext } from "vue3-gettext";
 
-import { itemKey, selectedLanguageKey } from "@/arches_references/constants.ts";
-import { bestLabel } from "@/arches_references/utils.ts";
+import { getItemLabel } from "@/arches_vue_utils/utils.ts";
+import {
+    itemKey,
+    selectedLanguageKey,
+    systemLanguageKey,
+} from "@/arches_references/constants.ts";
 import LetterCircle from "@/arches_references/components/misc/LetterCircle.vue";
 
 import type { Ref } from "vue";
 import type { Language } from "@/arches_vue_utils/types";
 import type { ControlledListItem } from "@/arches_references/types";
 
 const selectedLanguage = inject(selectedLanguageKey) as Ref<Language>;
+const systemLanguage = inject(systemLanguageKey) as Language;
 const item = inject(
     itemKey,
 ) as Ref<ControlledListItem> as Ref<ControlledListItem>;
@@ -25,7 +30,12 @@ const iconLabel = (item: ControlledListItem) => {
 <template>
     <span class="item-header">
         <LetterCircle :labelled="item" />
-        <h3>{{ bestLabel(item, selectedLanguage.code).value }}</h3>
+        <h3>
+            {{
+                getItemLabel(item, selectedLanguage.code, systemLanguage.code)
+                    .value
+            }}
+        </h3>
         <span class="item-type">{{ iconLabel(item) }}</span>
         <a
             v-if="item.uri"

arches_references/src/arches_references/components/editor/ItemImages.vue

@@ -61,6 +61,7 @@ const showError = (event?: FileUploadErrorEvent | FileUploadUploadEvent) => {
         severity: ERROR,
         life: DEFAULT_ERROR_TOAST_LIFE,
         summary: event?.xhr?.statusText || $gettext("Image upload failed"),
+        detail: JSON.parse(event?.xhr?.responseText ?? "{}").message,
     });
 };
 </script>

arches_references/src/arches_references/components/editor/ValueEditor.vue

@@ -10,22 +10,21 @@ import Select from "primevue/select";
 import Textarea from "primevue/textarea";
 import { useToast } from "primevue/usetoast";
 
+import { ALT_LABEL, PREF_LABEL } from "@/arches_vue_utils/constants.ts";
 import { deleteValue, upsertValue } from "@/arches_references/api.ts";
 import {
-    ALT_LABEL,
     DEFAULT_ERROR_TOAST_LIFE,
     ERROR,
     NOTE,
     NOTE_CHOICES,
-    PREF_LABEL,
     itemKey,
 } from "@/arches_references/constants.ts";
 import { dataIsNew, languageNameFromCode } from "@/arches_references/utils.ts";
 import AddValue from "@/arches_references/components/editor/AddValue.vue";
 
 import type { Ref } from "vue";
 import type { DataTableRowEditInitEvent } from "primevue/datatable";
-import type { Language } from "arches/arches/app/src/arches/types";
+import type { Language } from "@/arches_vue_utils/types";
 import type {
     ControlledListItem,
     Value,

arches_references/src/arches_references/components/misc/ListHeader.vue

@@ -2,11 +2,13 @@
 import { computed, inject } from "vue";
 import { useGettext } from "vue3-gettext";
 
+import { getItemLabel } from "@/arches_vue_utils/utils.ts";
 import {
     displayedRowKey,
     selectedLanguageKey,
+    systemLanguageKey,
 } from "@/arches_references/constants.ts";
-import { bestLabel, dataIsList } from "@/arches_references/utils.ts";
+import { dataIsList } from "@/arches_references/utils.ts";
 
 import type { Ref } from "vue";
 import type { Language } from "@/arches_vue_utils/types";
@@ -22,6 +24,7 @@ const { displayedRow } = inject(displayedRowKey) as unknown as {
     displayedRow: Ref<Selectable>;
 };
 const selectedLanguage = inject(selectedLanguageKey) as Ref<Language>;
+const systemLanguage = inject(systemLanguageKey) as Language;
 
 const heading = computed(() => {
     if (!displayedRow.value) {
@@ -35,11 +38,12 @@ const heading = computed(() => {
         );
     }
     return $gettext(
-        "Item Editor > %{bestLabel}",
+        "Item Editor > %{itemLabel}",
         {
-            bestLabel: bestLabel(
+            itemLabel: getItemLabel(
                 displayedRow.value as ControlledListItem,
                 selectedLanguage.value.code,
+                systemLanguage.code,
             ).value,
         },
         true, // turn off escaping: vue template sanitizes

arches_references/src/arches_references/components/tree/ActionBanner.vue

@@ -4,12 +4,14 @@ import { useGettext } from "vue3-gettext";
 
 import Button from "primevue/button";
 
+import { getItemLabel } from "@/arches_vue_utils/utils.ts";
 import {
     selectedLanguageKey,
+    systemLanguageKey,
     CONTRAST,
     SECONDARY,
 } from "@/arches_references/constants.ts";
-import { bestLabel, shouldUseContrast } from "@/arches_references/utils.ts";
+import { shouldUseContrast } from "@/arches_references/utils.ts";
 
 import type { Ref } from "vue";
 import type { TreeSelectionKeys } from "primevue/tree";
@@ -26,6 +28,7 @@ const selectedKeys = defineModel<TreeSelectionKeys>("selectedKeys", {
 });
 
 const selectedLanguage = inject(selectedLanguageKey) as Ref<Language>;
+const systemLanguage = inject(systemLanguageKey) as Language;
 
 const { $gettext } = useGettext();
 
@@ -46,8 +49,11 @@ const abandonMove = () => {
             $gettext(
                 "Selecting new parent for: %{item}",
                 {
-                    item: bestLabel(movingItem.data, selectedLanguage.code)
-                        .value,
+                    item: getItemLabel(
+                        movingItem.data,
+                        selectedLanguage.code,
+                        systemLanguage.code,
+                    ).value,
                 },
                 true,
             )

arches_references/src/arches_references/components/tree/ListTree.vue

@@ -5,16 +5,14 @@ import { useGettext } from "vue3-gettext";
 
 import Tree from "primevue/tree";
 
+import { getItemLabel } from "@/arches_vue_utils/utils.ts";
 import {
     displayedRowKey,
     selectedLanguageKey,
+    systemLanguageKey,
 } from "@/arches_references/constants.ts";
 import { routeNames } from "@/arches_references/routes.ts";
-import {
-    bestLabel,
-    findNodeInTree,
-    nodeIsList,
-} from "@/arches_references/utils.ts";
+import { findNodeInTree, nodeIsList } from "@/arches_references/utils.ts";
 import LetterCircle from "@/arches_references/components/misc/LetterCircle.vue";
 import ListTreeControls from "@/arches_references/components/tree/ListTreeControls.vue";
 import TreeRow from "@/arches_references/components/tree/TreeRow.vue";
@@ -60,6 +58,7 @@ const nextFilterChangeNeedsExpandAll = ref(false);
 const expandedKeysSnapshotBeforeSearch = ref<TreeExpandedKeys>({});
 
 const selectedLanguage = inject(selectedLanguageKey) as Ref<Language>;
+const systemLanguage = inject(systemLanguageKey) as Language;
 const { setDisplayedRow } = inject(displayedRowKey) as unknown as {
     setDisplayedRow: RowSetter;
 };
@@ -232,8 +231,11 @@ const filterCallbackWrapped = computed(() => {
                     if (nodeIsList(node)) {
                         return node.data.name;
                     }
-                    return bestLabel(node.data, selectedLanguage.value.code)
-                        .value;
+                    return getItemLabel(
+                        node.data,
+                        selectedLanguage.value.code,
+                        systemLanguage.code,
+                    ).value;
                 },
             ];
         },

arches_references/src/arches_references/components/tree/MoveRow.vue

@@ -5,13 +5,13 @@ import { useGettext } from "vue3-gettext";
 import Button from "primevue/button";
 import { useToast } from "primevue/usetoast";
 
+import { PREF_LABEL } from "@/arches_vue_utils/constants.ts";
 import { patchList } from "@/arches_references/api.ts";
 import {
     CONTRAST,
     DEFAULT_ERROR_TOAST_LIFE,
     ERROR,
     PRIMARY,
-    PREF_LABEL,
     displayedRowKey,
     selectedLanguageKey,
 } from "@/arches_references/constants.ts";

arches_references/src/arches_references/components/tree/TreeRow.vue

@@ -7,6 +7,7 @@ import InputText from "primevue/inputtext";
 import ProgressSpinner from "primevue/progressspinner";
 import { useToast } from "primevue/usetoast";
 
+import { getItemLabel } from "@/arches_vue_utils/utils.ts";
 import {
     createItem,
     createList,
@@ -20,9 +21,9 @@ import {
     SECONDARY,
     displayedRowKey,
     selectedLanguageKey,
+    systemLanguageKey,
 } from "@/arches_references/constants.ts";
 import {
-    bestLabel,
     dataIsNew,
     findNodeInTree,
     itemAsNode,
@@ -50,6 +51,7 @@ const toast = useToast();
 const { $gettext } = useGettext();
 
 const selectedLanguage = inject(selectedLanguageKey) as Ref<Language>;
+const systemLanguage = inject(systemLanguageKey) as Language;
 
 const tree = defineModel<TreeNode[]>("tree", { required: true });
 const expandedKeys = defineModel<TreeExpandedKeys>("expandedKeys", {
@@ -101,7 +103,11 @@ const rowLabel = computed(() => {
     }
     const unstyledLabel =
         node.data.name ??
-        bestLabel(node.data, selectedLanguage.value.code).value;
+        getItemLabel(
+            node.data,
+            selectedLanguage.value.code,
+            systemLanguage.code,
+        ).value;
     if (!filterValue.value) {
         return unstyledLabel;
     }
@@ -316,9 +322,10 @@ const acceptNewListShortcutEntry = async () => {
                     $gettext(
                         'Move %{item} here',
                         {
-                            item: bestLabel(
+                            item: getItemLabel(
                                 movingItem.data,
                                 selectedLanguage.code,
+                                systemLanguage.code,
                             ).value,
                         },
                         true,

arches_references/src/arches_references/constants.ts

@@ -12,10 +12,9 @@ type ItemRef = Ref<ControlledListItem>;
 export const itemKey = Symbol() as InjectionKey<ItemRef>;
 type LanguageRef = Ref<Language>;
 export const selectedLanguageKey = Symbol() as InjectionKey<LanguageRef>;
+export const systemLanguageKey = Symbol() as InjectionKey<Language>;
 
 // Constants
-export const PREF_LABEL = "prefLabel";
-export const ALT_LABEL = "altLabel";
 export const NOTE = "note";
 export const URI = "URI";
 export const CONTRAST = "contrast";
@@ -44,3 +43,13 @@ export const NOTE_CHOICES = {
     note: "note",
     description: "description",
 };
+
+// Temporary workaround until received from backend
+export const ENGLISH = {
+    code: "en",
+    default_direction: "ltr" as const,
+    id: 1,
+    isdefault: true,
+    name: "English",
+    scope: "system",
+};