creates date datatype after rebase #147

arches_lingo/src/arches_lingo/components/generic/DateDatatype.vue

@@ -0,0 +1,44 @@
+<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";
+
+interface Props {
+    dateFormat?: string;
+    mode?: DataComponentMode;
+    value?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+    dateFormat: "yy-mm-dd",
+    mode: VIEW,
+    value: "",
+});
+
+const emits = defineEmits(["update"]);
+
+const onUpdate = (val: string) => {
+    emits("update", val);
+};
+</script>
+
+<template>
+    <div>
+        <div v-if="mode === VIEW">
+            <DateDatatypeViewer
+                :date-format="dateFormat"
+                :value="value"
+            />
+        </div>
+        <div v-if="mode === EDIT">
+            <DateDatatypeEditor
+                :date-format="dateFormat"
+                :value="value"
+                @update="onUpdate"
+            />
+        </div>
+    </div>
+</template>

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

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { defineProps, inject, onMounted, ref, type Ref } from "vue";
+import { inject, onMounted, ref, type Ref } from "vue";
 import {
     fetchControlledListOptions,
     fetchGroupRdmSystemList,
     fetchPersonRdmSystemList,
     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>

arches_lingo/src/arches_lingo/components/generic/date-datatype/DateDatatypeEditor.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { toRef, watch } from "vue";
+
+import DatePicker from "primevue/datepicker";
+
+const props = defineProps<{
+    value: string | undefined;
+    dateFormat: string;
+}>();
+
+const emit = defineEmits(["update"]);
+
+const modelValue = toRef(props.value);
+
+watch(
+    () => props.value,
+    (newValue) => {
+        modelValue.value = newValue;
+    },
+);
+</script>
+
+<template>
+    <DatePicker
+        v-model="modelValue"
+        icon-display="input"
+        :date-format="dateFormat"
+        show-icon
+        @update:model-value="() => emit('update', modelValue)"
+    />
+</template>

arches_lingo/src/arches_lingo/components/generic/date-datatype/DateDatatypeViewer.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { toRef, watch } from "vue";
+
+import DatePicker from "primevue/datepicker";
+
+const props = defineProps<{
+    value: string | undefined;
+    dateFormat: string;
+}>();
+
+const modelValue = toRef(props.value);
+
+watch(
+    () => props.value,
+    (newValue) => {
+        modelValue.value = newValue;
+    },
+);
+</script>
+
+<template>
+    <DatePicker
+        v-model="modelValue"
+        :date-format="dateFormat"
+        disabled
+    />
+</template>

arches_lingo/src/arches_lingo/types.ts

@@ -118,6 +118,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 SchemeStatement {