Stub out label viewer #147

archesproject · Jan 17, 2025 · 9fce804 · 9fce804
1 parent ec29437
commit 9fce804
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 16 deletions.
diff --git a/arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue b/arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { defineProps, ref } from "vue";
+
+import NonLocalizedString from "@/arches_lingo/components/generic/NonLocalizedString.vue";
+
+// import ResourceInstanceRelationships from "@/arches_lingo/components/generic/ResourceInstanceRelationships.vue";
+
+import { EDIT } from "@/arches_lingo/constants.ts";
+
+import type { AppellativeStatus } from "@/arches_lingo/types.ts";
+
+const props = withDefaults(
+    defineProps<{
+        value?: AppellativeStatus;
+    }>(),
+    {
+        value: () => ({}) as AppellativeStatus,
+    },
+);
+
+const appellative_status = ref(props.value);
+
+function onUpdate(newValue: string) {
+    // handle the update
+    console.log("Update new value here!" + newValue);
+}
+</script>
+
+<template>
+    <!-- Label: string -->
+    <label for="">{{ $gettext("Label") }}</label>
+    <NonLocalizedString
+        :value="
+            appellative_status?.appellative_status_ascribed_name_content ?? ''
+        "
+        :mode="EDIT"
+        @update="onUpdate"
+    />
+    <!-- Label Language: reference datatype -->
+    <label for="">{{ $gettext("Label Language") }}</label>
+
+    <!-- Label Type: reference datatype -->
+    <label for="">{{ $gettext("Label Type") }}</label>
+
+    <!-- Label Status: reference datatype -->
+    <label for="">{{ $gettext("Label Status") }}</label>
+
+    <!-- Label Status Metatype: reference datatype -->
+    <label for="">{{ $gettext("Label Metatype") }}</label>
+
+    <!-- Label Temporal Validity Start: date -->
+    <label for="">{{ $gettext("Label Temporal Validity Start") }}</label>
+
+    <!-- Label Temporal Validity End: date -->
+    <label for="">{{ $gettext("Label Temporal Validity End") }}</label>
+
+    <!-- Contributor: resource instance -->
+    <label for="">{{ $gettext("Contributor") }}</label>
+
+    <!-- Sources: resource instance -->
+    <label for="">{{ $gettext("Sources") }}</label>
+
+    <!-- Warrant Type: reference datatype -->
+    <label for="">{{ $gettext("Warrant Type") }}</label>
+</template>
diff --git a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLabel.vue b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLabel.vue
@@ -2,6 +2,7 @@
 import { useGettext } from "vue3-gettext";
 import { onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
+import { useToast } from "primevue/usetoast";
 
 import {
     EDIT,
@@ -10,20 +11,18 @@ import {
     NEW,
     VIEW,
 } from "@/arches_lingo/constants.ts";
+import { deleteSchemeLabelTile, fetchSchemeLabel } from "@/arches_lingo/api.ts";
+import SchemeReportSection from "@/arches_lingo/components/scheme/report/SchemeSection.vue";
+import MetaStringViewer from "@/arches_lingo/components/generic/MetaStringViewer.vue";
+import ResourceInstanceRelationships from "@/arches_lingo/components/generic/ResourceInstanceRelationships.vue";
+import ReferenceDatatype from "@/arches_lingo/components/generic/ReferenceDatatype.vue";
+
 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 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";
-
-const schemeInstance = ref<SchemeInstance>({});
 const { $gettext } = useGettext();
 const toast = useToast();
 const route = useRoute();
@@ -39,12 +38,16 @@ withDefaults(
     defineProps<{
         mode?: DataComponentMode;
         tileId?: string | null;
+        args?: Array<object>;
+        // todo for Johnathan - if obj empty, create new tile
+        // if obj has values, load those values into the form
     }>(),
     {
         mode: VIEW,
         tileId: null, // editor arg specifying what tile to operate on.
     },
 );
+const schemeInstance = ref<SchemeInstance>();
 
 defineExpose({ getSectionValue });
 
@@ -141,22 +144,22 @@ function editSectionValue(tileId: string) {
                     </span>
                 </template>
                 <template #type="{ rowData }">
-                    <ControlledListItem
+                    <ReferenceDatatype
                         :value="
                             (rowData as AppellativeStatus)
                                 .appellative_status_ascribed_relation
                         "
                     >
-                    </ControlledListItem>
+                    </ReferenceDatatype>
                 </template>
                 <template #language="{ rowData }">
-                    <ControlledListItem
+                    <ReferenceDatatype
                         :value="
                             (rowData as AppellativeStatus)
                                 .appellative_status_ascribed_name_language
                         "
                     >
-                    </ControlledListItem>
+                    </ReferenceDatatype>
                 </template>
                 <template #drawer="{ rowData }">
                     <div>
@@ -181,7 +184,14 @@ function editSectionValue(tileId: string) {
             </MetaStringViewer>
         </SchemeReportSection>
     </div>
-    <div v-if="mode === EDIT"><!-- todo for Johnathan-->abc</div>
+    <div v-if="mode === EDIT">
+        <div
+            v-for="appellative_status in schemeInstance?.appellative_status"
+            :key="appellative_status.tileid"
+        >
+            <LabelEditor :value="appellative_status"></LabelEditor>
+        </div>
+    </div>
 </template>
 <style scoped>
 :deep(.drawer) {

diff --git a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNote.vue b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeNote.vue
@@ -20,7 +20,7 @@ import type {
     SchemeStatement,
 } from "@/arches_lingo/types.ts";
 import ResourceInstanceRelationships from "@/arches_lingo/components/generic/ResourceInstanceRelationships.vue";
-import ControlledListItem from "@/arches_lingo/components/generic/ControlledListItem.vue";
+import ReferenceDatatype from "@/arches_lingo/components/generic/ReferenceDatatype.vue";
 
 const { $gettext } = useGettext();
 const schemeInstance = ref<SchemeInstance>();
@@ -129,12 +129,12 @@ function editSectionValue(tileId: string) {
                     </span>
                 </template>
                 <template #type="{ rowData }">
-                    <ControlledListItem
+                    <ReferenceDatatype
                         :value="(rowData as SchemeStatement).statement_type_n1"
                     />
                 </template>
                 <template #language="{ rowData }">
-                    <ControlledListItem
+                    <ReferenceDatatype
                         :value="
                             (rowData as SchemeStatement).statement_language_n1
                         "