pr feedback & readability improvements #147

arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue

@@ -39,7 +39,15 @@ const props = withDefaults(
         value: () => ({}) as AppellativeStatus,
     },
 );
-const appellative_status = ref(props.value);
+const value = ref(props.value);
+
+const languageOptions = ref<ControlledListItem[]>([]);
+const typeOptions = ref<ControlledListItem[]>([]);
+const statusOptions = ref<ControlledListItem[]>([]);
+const metatypeOptions = ref<ControlledListItem[]>([]);
+const eventTypeOptions = ref<ControlledListItem[]>([]);
+const groupAndPersonOptions = ref<ResourceInstanceReference[]>();
+const textualWorkOptions = ref<ResourceInstanceReference[]>();
 
 function onUpdate(newValue: string) {
     console.log(newValue);
@@ -75,14 +83,6 @@ async function getResourceInstanceOptions(
     return results;
 }
 
-const languageOptions = ref<ControlledListItem[]>([]);
-const typeOptions = ref<ControlledListItem[]>([]);
-const statusOptions = ref<ControlledListItem[]>([]);
-const metatypeOptions = ref<ControlledListItem[]>([]);
-const eventTypeOptions = ref<ControlledListItem[]>([]);
-const groupAndPersonOptions = ref<ResourceInstanceReference[]>();
-const textualWorkOptions = ref<ResourceInstanceReference[]>();
-
 onMounted(async () => {
     const [languageOpts, typeOpts, statusOpts, metatypeOpts, eventTypeOpts] =
         await Promise.all([
@@ -115,16 +115,14 @@ onMounted(async () => {
     <!-- Label: string -->
     <label for="">{{ $gettext("Label") }}</label>
     <NonLocalizedString
-        :value="
-            appellative_status?.appellative_status_ascribed_name_content ?? ''
-        "
+        :value="value?.appellative_status_ascribed_name_content ?? ''"
         :mode="EDIT"
         @update="onUpdate"
     />
     <!-- Label Language: reference datatype -->
     <label for="">{{ $gettext("Label Language") }}</label>
     <ReferenceDatatype
-        :value="appellative_status?.appellative_status_ascribed_name_language"
+        :value="value?.appellative_status_ascribed_name_language"
         :mode="EDIT"
         :multi-value="false"
         :options="languageOptions"
@@ -133,7 +131,7 @@ onMounted(async () => {
     <!-- Label Type: reference datatype -->
     <label for="">{{ $gettext("Label Type") }}</label>
     <ReferenceDatatype
-        :value="appellative_status?.appellative_status_ascribed_relation"
+        :value="value?.appellative_status_ascribed_relation"
         :mode="EDIT"
         :multi-value="false"
         :options="typeOptions"
@@ -142,7 +140,7 @@ onMounted(async () => {
     <!-- Label Status: reference datatype -->
     <label for="">{{ $gettext("Label Status") }}</label>
     <ReferenceDatatype
-        :value="appellative_status?.appellative_status_status"
+        :value="value?.appellative_status_status"
         :mode="EDIT"
         :multi-value="false"
         :options="statusOptions"
@@ -151,7 +149,7 @@ onMounted(async () => {
     <!-- Label Status Metatype: reference datatype -->
     <label for="">{{ $gettext("Label Metatype") }}</label>
     <ReferenceDatatype
-        :value="appellative_status?.appellative_status_status_metatype"
+        :value="value?.appellative_status_status_metatype"
         :mode="EDIT"
         :multi-value="false"
         :options="metatypeOptions"
@@ -166,25 +164,23 @@ onMounted(async () => {
     <!-- Contributor: resource instance -->
     <label for="">{{ $gettext("Contributor") }}</label>
     <ResourceInstanceRelationships
-        :value="appellative_status?.appellative_status_data_assignment_actor"
+        :value="value?.appellative_status_data_assignment_actor"
         :mode="EDIT"
         :options="groupAndPersonOptions"
         @update="onUpdate"
     />
     <!-- Sources: resource instance -->
     <label for="">{{ $gettext("Sources") }}</label>
     <ResourceInstanceRelationships
-        :value="
-            appellative_status?.appellative_status_data_assignment_object_used
-        "
+        :value="value?.appellative_status_data_assignment_object_used"
         :mode="EDIT"
         :options="textualWorkOptions"
         @update="onUpdate"
     />
     <!-- Warrant Type: reference datatype -->
     <label for="">{{ $gettext("Warrant Type") }}</label>
     <ReferenceDatatype
-        :value="appellative_status?.appellative_status_data_assignment_type"
+        :value="value?.appellative_status_data_assignment_type"
         :mode="EDIT"
         :multi-value="false"
         :options="eventTypeOptions"

arches_lingo/src/arches_lingo/components/generic/ReferenceDatatype.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
+import { EDIT, VIEW } from "@/arches_lingo/constants.ts";
+import ReferenceDatatypeViewer from "@/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeViewer.vue";
+import ReferenceDatatypeEditor from "@/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeEditor.vue";
+
 import type {
     ControlledListItem,
     DataComponentMode,
 } from "@/arches_lingo/types";
-import ReferenceDatatypeViewer from "@/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeViewer.vue";
-import ReferenceDatatypeEditor from "@/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeEditor.vue";
-import { EDIT, VIEW } from "@/arches_lingo/constants.ts";
 
 defineProps<{
     mode?: DataComponentMode;

arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeEditor.vue

@@ -10,6 +10,7 @@ import type { ControlledListItem } from "@/arches_lingo/types";
 import type { Language } from "@/arches_vue_utils/types.ts";
 
 const systemLanguage = inject(systemLanguageKey) as Language;
+const emit = defineEmits(["update"]);
 const props = withDefaults(
     defineProps<{
         value?: ControlledListItem[];
@@ -22,12 +23,7 @@ const props = withDefaults(
     },
 );
 
-const emit = defineEmits(["update"]);
-const uriRef = ref(
-    props?.value && !props.multiValue
-        ? props?.value[0].uri
-        : props?.value?.map((item) => item.uri) || [],
-);
+const uriRef = ref(extractURI(props.value));
 const val = computed({
     get() {
         return uriRef.value;
@@ -46,24 +42,35 @@ const val = computed({
     },
 });
 
-const optionLabels = (item: ControlledListItem): string => {
-    const preferredLabel =
-        item.labels.find(
-            (label) =>
-                label.language_id === systemLanguage?.code &&
-                label.valuetype_id === PREF_LABEL,
-        ) || item.labels.find((label) => label.valuetype_id === PREF_LABEL);
-    return preferredLabel?.value ?? "";
-};
+function extractURI(item: ControlledListItem[]): string | string[] {
+    if (item && !props.multiValue) {
+        return item[0].uri;
+    } else if (item && props.multiValue) {
+        return item.map((item) => item.uri);
+    } else {
+        return [];
+    }
+}
+
+function getOptionLabels(item: ControlledListItem): string {
+    const prefLabels = item.labels.filter(
+        (label) => label.valuetype_id === PREF_LABEL,
+    );
+    const optionLabel =
+        prefLabels.find(
+            (label) => label.language_id === systemLanguage?.code,
+        ) || prefLabels[0];
+    return optionLabel?.value ?? "";
+}
 </script>
 
 <template>
     <Select
         v-model="val"
         v-if:="!props.multiValue"
-        :show-toggle-all="!!options?.length"
+        :show-toggle-all="options?.length"
         :options
-        :option-label="optionLabels"
+        :option-label="getOptionLabels"
         option-value="uri"
         :pt="{
             emptyMessage: { style: { fontFamily: 'sans-serif' } },
@@ -74,9 +81,9 @@ const optionLabels = (item: ControlledListItem): string => {
     <MultiSelect
         v-if="props.multiValue"
         v-model="val"
-        :show-toggle-all="!!options?.length"
+        :show-toggle-all="options?.length"
         :options
-        :option-label="optionLabels"
+        :option-label="getOptionLabels"
         option-value="uri"
         :pt="{
             emptyMessage: { style: { fontFamily: 'sans-serif' } },