From 9b9293281a2c6f2b3bb638b8d402e70752bf7697 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 24 Jul 2023 18:08:09 +1000
Subject: [PATCH 1/3] create GDateTime component

Co-authored-by: Laila Los <44241786+electronicblueberry@users.noreply.github.com>
---
 client/src/components/GDateTime.vue | 69 +++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 client/src/components/GDateTime.vue

diff --git a/client/src/components/GDateTime.vue b/client/src/components/GDateTime.vue
new file mode 100644
index 000000000000..9f149c456b88
--- /dev/null
+++ b/client/src/components/GDateTime.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { Tuple } from "types/utilityTypes";
+import { computed } from "vue";
+
+const props = defineProps<{
+    value: Date;
+}>();
+
+const emit = defineEmits<{
+    (e: "input", value: Date): void;
+}>();
+
+const date = computed(() => {
+    const year = props.value.getFullYear().toString().padStart(4, "0");
+    const month = (props.value.getMonth() + 1).toString().padStart(2, "0");
+    const day = props.value.getDate().toString().padStart(2, "0");
+
+    return `${year}-${month}-${day}`;
+});
+
+const time = computed(() => {
+    const hours = props.value.getHours().toString().padStart(2, "0");
+    const minutes = props.value.getMinutes().toString().padStart(2, "0");
+
+    return `${hours}:${minutes}`;
+});
+function updateDate(newDate: string) {
+    const matches = newDate.match(/(\d{4})-(\d{2})-(\d{2})/);
+
+    if (matches?.length && matches.length >= 4) {
+        const [_, year, month, day] = matches as Tuple<4, string>;
+
+        const date = new Date(props.value);
+
+        try {
+            date.setFullYear(parseInt(year));
+            date.setDate(1);
+            date.setMonth(0);
+            date.setMonth(parseInt(month) - 1);
+            date.setDate(parseInt(day));
+        } finally {
+            emit("input", date);
+        }
+    }
+}
+
+function updateTime(newTime: string) {
+    const matches = newTime.match(/(\d{2}):(\d{2})/);
+
+    if (matches?.length && matches.length >= 3) {
+        const [_, hours, minutes] = matches as Tuple<3, string>;
+
+        const date = new Date(props.value);
+
+        try {
+            date.setHours(parseInt(hours), parseInt(minutes));
+        } finally {
+            emit("input", date);
+        }
+    }
+}
+</script>
+
+<template>
+    <BInputGroup>
+        <BFormInput :value="date" type="date" @input="updateDate" />
+        <BFormInput :value="time" type="time" @change="updateTime" />
+    </BInputGroup>
+</template>

From 46fe8e83414177e355531adb0f70b428cd7267fe Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 29 Aug 2023 18:05:59 +1000
Subject: [PATCH 2/3] fix GDateTime eslint error

---
 client/src/components/GDateTime.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/GDateTime.vue b/client/src/components/GDateTime.vue
index 9f149c456b88..a67f169086be 100644
--- a/client/src/components/GDateTime.vue
+++ b/client/src/components/GDateTime.vue
@@ -28,7 +28,7 @@ function updateDate(newDate: string) {
     const matches = newDate.match(/(\d{4})-(\d{2})-(\d{2})/);
 
     if (matches?.length && matches.length >= 4) {
-        const [_, year, month, day] = matches as Tuple<4, string>;
+        const [_v, year, month, day] = matches as Tuple<4, string>;
 
         const date = new Date(props.value);
 
@@ -48,7 +48,7 @@ function updateTime(newTime: string) {
     const matches = newTime.match(/(\d{2}):(\d{2})/);
 
     if (matches?.length && matches.length >= 3) {
-        const [_, hours, minutes] = matches as Tuple<3, string>;
+        const [_v, hours, minutes] = matches as Tuple<3, string>;
 
         const date = new Date(props.value);
 

From 1b671cd9d0f76699cf56c76bb4562b750a6a1147 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 30 Aug 2023 15:19:22 +1000
Subject: [PATCH 3/3] add unit tests for GDateTime

---
 client/src/components/GDateTime.test.ts | 43 +++++++++++++++++++++++++
 client/src/components/GDateTime.vue     |  4 ++-
 2 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/GDateTime.test.ts

diff --git a/client/src/components/GDateTime.test.ts b/client/src/components/GDateTime.test.ts
new file mode 100644
index 000000000000..e1303991b752
--- /dev/null
+++ b/client/src/components/GDateTime.test.ts
@@ -0,0 +1,43 @@
+import { getLocalVue } from "@tests/jest/helpers";
+import { mount } from "@vue/test-utils";
+
+import GDateTime from "./GDateTime.vue";
+
+const localVue = getLocalVue(true);
+
+async function mountGDateTime(props: object) {
+    const wrapper = mount(GDateTime as object, {
+        propsData: {
+            ...props,
+        },
+        localVue,
+    });
+
+    return wrapper;
+}
+
+describe("GDateTime.vue", () => {
+    it("emits updated date when input changes", async () => {
+        const wrapper = await mountGDateTime({
+            value: new Date("1970-01-01T00:00:00"),
+        });
+
+        const dateInput = wrapper.find('input[type="date"]');
+        await dateInput.setValue("2023-08-30");
+
+        expect(wrapper.emitted()).toHaveProperty("input");
+        expect(wrapper.emitted()?.["input"]?.[0]?.[0]).toEqual(new Date("2023-08-30T00:00:00"));
+    });
+
+    it("emits updated time when input changes", async () => {
+        const wrapper = await mountGDateTime({
+            value: new Date("1970-01-01T00:00:00"),
+        });
+
+        const timeInput = wrapper.find('input[type="time"]');
+        await timeInput.setValue("12:30");
+
+        expect(wrapper.emitted()).toHaveProperty("input");
+        expect(wrapper.emitted()?.["input"]?.[0]?.[0]).toEqual(new Date("1970-01-01T12:30:00"));
+    });
+});
diff --git a/client/src/components/GDateTime.vue b/client/src/components/GDateTime.vue
index a67f169086be..616bc8322684 100644
--- a/client/src/components/GDateTime.vue
+++ b/client/src/components/GDateTime.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { BFormInput, BInputGroup } from "bootstrap-vue";
 import { Tuple } from "types/utilityTypes";
 import { computed } from "vue";
 
@@ -24,6 +25,7 @@ const time = computed(() => {
 
     return `${hours}:${minutes}`;
 });
+
 function updateDate(newDate: string) {
     const matches = newDate.match(/(\d{4})-(\d{2})-(\d{2})/);
 
@@ -64,6 +66,6 @@ function updateTime(newTime: string) {
 <template>
     <BInputGroup>
         <BFormInput :value="date" type="date" @input="updateDate" />
-        <BFormInput :value="time" type="time" @change="updateTime" />
+        <BFormInput :value="time" type="time" @input="updateTime" />
     </BInputGroup>
 </template>