BC-5444 - add due date by typing

__mocks__/maska.ts

@@ -0,0 +1,8 @@
+/**
+ * This is a mock for the vMaska directive exported by maska package.
+ */
+
+// eslint-disable-next-line no-undef
+const vMaska = jest.fn();
+
+export { vMaska };

package.json

@@ -27,6 +27,7 @@
 		"flush-promises": "^1.0.2",
 		"katex": "^0.12.0",
 		"kjua": "^0.9.0",
+		"maska": "^2.1.10",
 		"mobile-drag-drop": "^3.0.0-rc.0",
 		"object-hash": "^3.0.0",
 		"tiptap": "^1.32.2",

src/components/feature-board-submission-element/components/SubmissionContentElementEdit.unit.ts

@@ -5,7 +5,7 @@ import { shallowMount, MountOptions } from "@vue/test-utils";
 import SubmissionContentElementEdit from "./SubmissionContentElementEdit.vue";
 import SubmissionItemsTeacherDisplay from "./SubmissionItemsTeacherDisplay.vue";
 import { i18nMock, submissionsResponseFactory } from "@@/tests/test-utils";
-import { DateTimePicker } from "@feature-date-time-picker";
+import { DateTimePicker } from "@ui-date-time-picker";
 
 const mockedSubmissions = submissionsResponseFactory.build();
 

src/components/feature-board-submission-element/components/SubmissionContentElementEdit.vue

@@ -26,7 +26,7 @@ import { defineComponent, PropType } from "vue";
 import { useI18n } from "@/composables/i18n.composable";
 import { TeacherSubmission } from "../types/submission";
 import SubmissionContentElementTitle from "./SubmissionContentElementTitle.vue";
-import { DateTimePicker } from "@feature-date-time-picker";
+import { DateTimePicker } from "@ui-date-time-picker";
 import SubmissionItemsTeacherDisplay from "./SubmissionItemsTeacherDisplay.vue";
 
 export default defineComponent({

src/components/feature-board-submission-element/components/SubmissionItemsTeacherDisplay.vue

@@ -91,10 +91,20 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, computed, ref, watch, unref } from "vue";
+import {
+	defineComponent,
+	PropType,
+	computed,
+	ref,
+	watch,
+	toRef,
+	Ref,
+	unref,
+} from "vue";
 import { TeacherSubmission, Status } from "../types/submission";
 import { DataTableHeader } from "vuetify";
 import { useI18n } from "@/composables/i18n.composable";
+import { MaybeRef } from "@vueuse/core";
 
 type StatusFilter = "all" | Status;
 
@@ -132,27 +142,51 @@ export default defineComponent({
 			},
 		];
 
-		const allSubmissions = computed<Array<TeacherSubmission>>(() => {
-			return props.submissions;
-		});
+		const panel = ref<number | undefined>(undefined);
+		const allSubmissions = toRef(props, "submissions");
+		const activeFilter = ref<StatusFilter>("all");
 
-		const openCount = computed<number>(() => {
-			return allSubmissions.value.filter((item) => {
-				return item.status === "open";
-			}).length;
-		});
+		const filteredSubmissions = computed(() =>
+			filterByStatus(allSubmissions, activeFilter)
+		);
 
-		const completedCount = computed<number>(() => {
-			return allSubmissions.value.filter((item) => {
-				return item.status === "completed";
-			}).length;
-		});
+		const filterByStatus = (
+			submissions: Ref<TeacherSubmission[]>,
+			statusFilter: MaybeRef<StatusFilter>
+		) => {
+			const status = unref(statusFilter);
+			return submissions.value.filter(
+				(item) => status === "all" || item.status === status
+			);
+		};
 
-		const overdueCount = computed<number>(() => {
-			return allSubmissions.value.filter((item) => {
-				return item.status === "expired";
-			}).length;
-		});
+		const setFilter = (filter: StatusFilter) => {
+			if (filter === activeFilter.value) {
+				activeFilter.value = "all";
+			} else {
+				activeFilter.value = filter;
+			}
+		};
+
+		const openCount = computed<number>(
+			() => filterByStatus(allSubmissions, "open").length
+		);
+
+		const completedCount = computed<number>(
+			() => filterByStatus(allSubmissions, "completed").length
+		);
+
+		const overdueCount = computed<number>(
+			() => filterByStatus(allSubmissions, "expired").length
+		);
+
+		const isDisabled = (count: number) => {
+			return count === 0;
+		};
+
+		const getTabIndex = (isDisabled: boolean) => {
+			return isDisabled ? -1 : 0;
+		};
 
 		const getStatusIcon = (item: TeacherSubmission) => {
 			if (item.status === "open") {
@@ -175,48 +209,7 @@ export default defineComponent({
 				: "filter-chip";
 		};
 
-		const isDisabled = (count: number) => {
-			return count === 0;
-		};
-
-		const getTabIndex = (isDisabled: boolean) => {
-			return isDisabled ? -1 : 0;
-		};
-
-		//	Filter Functionality
-		const filteredSubmissions = ref<Array<TeacherSubmission>>(
-			unref(allSubmissions)
-		);
-		const activeFilter = ref<StatusFilter>("all");
-		const panel = ref<number | undefined>(undefined);
-
-		watch(allSubmissions, (newValue) => {
-			filteredSubmissions.value = newValue;
-		});
-
-		const filterByStatus = (statusFilter: StatusFilter) => {
-			if (statusFilter === "all") {
-				filteredSubmissions.value = allSubmissions.value;
-				return;
-			}
-
-			filteredSubmissions.value = allSubmissions.value.filter(
-				(item: TeacherSubmission) => {
-					return item.status === statusFilter;
-				}
-			);
-		};
-
-		const setFilter = (filter: StatusFilter) => {
-			if (filter === activeFilter.value) {
-				activeFilter.value = "all";
-			} else {
-				activeFilter.value = filter;
-			}
-		};
-
-		watch(activeFilter, (newFilter) => {
-			filterByStatus(newFilter);
+		watch(activeFilter, () => {
 			openPanel();
 		});
 

src/components/feature-date-time-picker/DatePicker.unit.ts → src/components/ui-date-time-picker/DatePicker.unit.ts

@@ -62,8 +62,8 @@ describe("DatePicker", () => {
 		expect(wrapper.emitted("update:date")).toHaveLength(1);
 	});
 
-	describe("when date is required", () => {
-		it("should not emit update:date event on empty input", async () => {
+	describe("when date is invalid", () => {
+		it("should emit error event", async () => {
 			setup({
 				date: new Date().toISOString(),
 				required: true,
@@ -76,6 +76,22 @@ describe("DatePicker", () => {
 			await wrapper.vm.$nextTick();
 
 			expect(wrapper.emitted("update:date")).toBeUndefined();
+			expect(wrapper.emitted("error")).toHaveLength(1);
+		});
+
+		it("should emit error event", async () => {
+			setup({
+				date: "55.55.5555",
+			});
+
+			const textField = wrapper.findComponent({ name: "v-text-field" });
+			const input = textField.find("input");
+
+			await input.setValue("");
+			await wrapper.vm.$nextTick();
+
+			expect(wrapper.emitted("update:date")).toBeUndefined();
+			expect(wrapper.emitted("error")).toHaveLength(1);
 		});
 	});
 });