From e4ddace787f13740106f9edca48ab1ee5c56bf1a Mon Sep 17 00:00:00 2001
From: Christopher Byrd <chrabyrd@gmail.com>
Date: Fri, 3 Jan 2025 11:14:59 -0800
Subject: [PATCH] adds date datatype #147

---
 .../components/generic/DateDatatype.vue       | 33 +++++++++++++++++++
 .../components/generic/LabelEditor.vue        | 12 +++++++
 .../date-datatype/DateDatatypeEditor.vue      | 30 +++++++++++++++++
 .../date-datatype/DateDatatypeViewer.vue      | 26 +++++++++++++++
 arches_lingo/src/arches_lingo/types.ts        |  2 ++
 5 files changed, 103 insertions(+)
 create mode 100644 arches_lingo/src/arches_lingo/components/generic/DateDatatype.vue
 create mode 100644 arches_lingo/src/arches_lingo/components/generic/date-datatype/DateDatatypeEditor.vue
 create mode 100644 arches_lingo/src/arches_lingo/components/generic/date-datatype/DateDatatypeViewer.vue

diff --git a/arches_lingo/src/arches_lingo/components/generic/DateDatatype.vue b/arches_lingo/src/arches_lingo/components/generic/DateDatatype.vue
new file mode 100644
index 00000000..95e0910c
--- /dev/null
+++ b/arches_lingo/src/arches_lingo/components/generic/DateDatatype.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import DateDatatypeViewer from "@/arches_lingo/components/generic/date-datatype/DateDatatypeViewer.vue";
+import DateDatatypeEditor from "@/arches_lingo/components/generic/date-datatype/DateDatatypeEditor.vue";
+
+import { EDIT, VIEW } from "@/arches_lingo/constants.ts";
+
+import type { DataComponentMode } from "@/arches_lingo/types.ts";
+
+const { mode = VIEW } = defineProps<{
+    mode?: DataComponentMode;
+    value?: string;
+}>();
+
+const emits = defineEmits(["update"]);
+
+const onUpdate = (val: string) => {
+    emits("update", val);
+};
+</script>
+
+<template>
+    <div>
+        <div v-if="mode === VIEW">
+            <DateDatatypeViewer :value="value" />
+        </div>
+        <div v-if="mode === EDIT">
+            <DateDatatypeEditor
+                :value="value"
+                @update="onUpdate"
+            />
+        </div>
+    </div>
+</template>
diff --git a/arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue b/arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue
index ba6f6061..5f856e7a 100644
--- a/arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue
+++ b/arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue
@@ -7,6 +7,7 @@ import {
     fetchTextualWorkRdmSystemList,
 } from "@/arches_lingo/api.ts";
 
+import DateDatatype from "@/arches_lingo/components/generic/DateDatatype.vue";
 import NonLocalizedString from "@/arches_lingo/components/generic/NonLocalizedString.vue";
 import ReferenceDatatype from "@/arches_lingo/components/generic/ReferenceDatatype.vue";
 import ResourceInstanceRelationships from "@/arches_lingo/components/generic/ResourceInstanceRelationships.vue";
@@ -155,11 +156,22 @@ onMounted(async () => {
         :options="metatypeOptions"
         @update="onUpdate"
     />
+
     <!-- Label Temporal Validity Start: date -->
     <label for="">{{ $gettext("Label Temporal Validity Start") }}</label>
+    <DateDatatype
+        :value="value?.appellative_status_timespan_begin_of_the_begin"
+        :mode="EDIT"
+        @update="onUpdate"
+    />
 
     <!-- Label Temporal Validity End: date -->
     <label for="">{{ $gettext("Label Temporal Validity End") }}</label>
+    <DateDatatype
+        :value="value?.appellative_status_timespan_end_of_the_end"
+        :mode="EDIT"
+        @update="onUpdate"
+    />
 
     <!-- Contributor: resource instance -->
     <label for="">{{ $gettext("Contributor") }}</label>
diff --git a/arches_lingo/src/arches_lingo/components/generic/date-datatype/DateDatatypeEditor.vue b/arches_lingo/src/arches_lingo/components/generic/date-datatype/DateDatatypeEditor.vue
new file mode 100644
index 00000000..4f21ffdd
--- /dev/null
+++ b/arches_lingo/src/arches_lingo/components/generic/date-datatype/DateDatatypeEditor.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { toRef, watch } from "vue";
+
+import DatePicker from "primevue/datepicker";
+
+const props = defineProps<{
+    value: string | undefined;
+}>();
+
+const emit = defineEmits(["update"]);
+
+const modelValue = toRef(props.value);
+
+watch(
+    () => props.value,
+    (newValue) => {
+        modelValue.value = newValue;
+    },
+);
+</script>
+
+<template>
+    <DatePicker
+        v-model="modelValue"
+        show-icon
+        icon-display="input"
+        date-format="yy-mm-dd"
+        @update:model-value="() => emit('update', modelValue)"
+    />
+</template>
diff --git a/arches_lingo/src/arches_lingo/components/generic/date-datatype/DateDatatypeViewer.vue b/arches_lingo/src/arches_lingo/components/generic/date-datatype/DateDatatypeViewer.vue
new file mode 100644
index 00000000..53339598
--- /dev/null
+++ b/arches_lingo/src/arches_lingo/components/generic/date-datatype/DateDatatypeViewer.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { toRef, watch } from "vue";
+
+import DatePicker from "primevue/datepicker";
+
+const props = defineProps<{
+    value: string | undefined;
+}>();
+
+const modelValue = toRef(props.value);
+
+watch(
+    () => props.value,
+    (newValue) => {
+        modelValue.value = newValue;
+    },
+);
+</script>
+
+<template>
+    <DatePicker
+        v-model="modelValue"
+        disabled
+        date-format="yy-mm-dd"
+    />
+</template>
diff --git a/arches_lingo/src/arches_lingo/types.ts b/arches_lingo/src/arches_lingo/types.ts
index c886c885..25e9d802 100644
--- a/arches_lingo/src/arches_lingo/types.ts
+++ b/arches_lingo/src/arches_lingo/types.ts
@@ -106,6 +106,8 @@ export interface AppellativeStatus {
     appellative_status_data_assignment_object_used: ResourceInstanceReference[];
     appellative_status_data_assignment_actor: ResourceInstanceReference[];
     appellative_status_data_assignment_type: ControlledListItem[];
+    appellative_status_timespan_begin_of_the_begin: string;
+    appellative_status_timespan_end_of_the_end: string;
 }
 
 export interface SchemeInstance {