BC-5557: create a chip title prepare function

src/components/organisms/NewDataFilter/composables/filter.composable.ts

@@ -8,9 +8,12 @@ import {
 	SelectOptionsType,
 	UserType,
 	UserBasedRegistrationOptions,
+	ChipTitle,
+	FilterItem,
 } from "../types/filterTypes";
 import { useI18n } from "vue-i18n";
 import { useFilterLocalStorage } from "./localStorage.composable";
+import { printDate } from "@/plugins/datetime";
 
 const dataTableFilter = (userType: string) => {
 	const { t } = useI18n();
@@ -90,7 +93,7 @@ const dataTableFilter = (userType: string) => {
 
 	const filterMenuItems = ref<SelectOptionsType[]>([]);
 
-	const filterChipTitles = ref<Array<string>>([]);
+	const filterChipTitles = ref<Array<ChipTitle>>();
 
 	const updateFilter = (value: FilterOptions) => {
 		if (selectedFilterType.value)
@@ -129,8 +132,58 @@ const dataTableFilter = (userType: string) => {
 		);
 	};
 
+	const prepareTitles = (chipItem: FilterItem) => {
+		if (chipItem[0] == FilterOptions.REGISTRATION) {
+			const statusKeyMap = {
+				[RegistrationTypes.COMPLETE]: t(
+					"pages.administration.students.legend.icon.success"
+				),
+				[RegistrationTypes.MISSING]: t(
+					"utils.adminFilter.consent.label.missing"
+				),
+				[RegistrationTypes.PARENT_AGREED]: t(
+					"utils.adminFilter.consent.label.parentsAgreementMissing"
+				),
+			};
+			const status = chipItem[1].map((val) => {
+				return statusKeyMap[val as RegistrationTypes];
+			});
+
+			return status.join(` ${t("common.words.and")} `);
+		}
+
+		if (chipItem[0] == FilterOptions.CLASSES)
+			return `${t("utils.adminFilter.class.title")} = ${chipItem[1].join(
+				", "
+			)}`;
+
+		if (chipItem[0] == FilterOptions.CREATION_DATE)
+			return `${t("utils.adminFilter.date.created")} ${printDate(
+				chipItem[1].$gte
+			)} ${t("common.words.and")} ${printDate(chipItem[1].$lte)}`;
+
+		if (chipItem[0] == FilterOptions.LAST_MIGRATION_ON)
+			return `${t("utils.adminFilter.lastMigration.title")} ${printDate(
+				chipItem[1].$gte
+			)} ${t("common.words.and")} ${printDate(chipItem[1].$lte)}`;
+
+		if (chipItem[0] == FilterOptions.OBSOLOTE_SINCE)
+			return `${t("utils.adminFilter.outdatedSince.title")} ${printDate(
+				chipItem[1].$gte
+			)} ${t("common.words.and")} ${printDate(chipItem[1].$lte)}`;
+	};
+
 	const setFilterChipTitles = () => {
-		filterChipTitles.value = Object.keys(filterQuery.value);
+		const items = Object.entries(filterQuery.value).reduce(
+			(acc: Array<object>, item) => {
+				return acc.concat({
+					item: item[0],
+					title: prepareTitles(item as FilterItem),
+				});
+			},
+			[]
+		);
+		filterChipTitles.value = (items as ChipTitle[]) || [];
 	};
 
 	onMounted(() => {

src/components/organisms/NewDataFilter/filterComponents/FilterChips.vue

@@ -5,22 +5,23 @@
 				:border="true"
 				closable
 				variant="text"
-				class="mx-1 filter-chip"
+				class="ma-1"
 				:close-icon="mdiCloseCircle"
-				@click:close="onChipClose(item)"
-				@click="onClick(item)"
+				@click:close="onChipClose(item.item)"
+				@click="onClick(item.item)"
 			>
-				{{ item }}
+				{{ item.title }}
 			</v-chip>
 		</template>
 	</div>
 </template>
 <script setup lang="ts">
 import { mdiCloseCircle } from "@mdi/js";
+import { ChipTitle } from "@/components/organisms/NewDataFilter/types/filterTypes";
 
 defineProps({
 	filter: {
-		type: Array<string>,
+		type: Array<ChipTitle>,
 		required: true,
 	},
 	title: {
@@ -31,11 +32,11 @@ defineProps({
 
 const emit = defineEmits(["remove:filter", "click:filter"]);
 
-const onChipClose = (item: string) => {
-	emit("remove:filter", item);
+const onChipClose = (val: string) => {
+	emit("remove:filter", val);
 };
 
-const onClick = (item: string) => {
-	emit("click:filter", item);
+const onClick = (val: string) => {
+	emit("click:filter", val);
 };
 </script>

src/components/organisms/NewDataFilter/filterComponents/TimeBetween.vue

@@ -38,7 +38,7 @@ const dateSelection = ref<DateSelection>({
 
 const props = defineProps({
 	selectedDate: {
-		type: (Object as PropType<DateSelection>) || undefined,
+		type: Object as PropType<DateSelection>,
 		required: true,
 	},
 });

src/components/organisms/NewDataFilter/types/filterTypes.ts

@@ -24,6 +24,13 @@ enum RegistrationTypes {
 	MISSING = "missing",
 }
 
+type ChipTitle = {
+	item: string;
+	title: string;
+};
+
+type FilterItem = [string, string[] & DateSelection];
+
 type SelectOptionsType = {
 	label: string;
 	value: FilterOptions | string;
@@ -35,11 +42,11 @@ type UserBasedRegistrationOptions = {
 };
 
 type FilterQuery = {
-	lastLoginSystemChange?: DateSelection | object;
+	lastLoginSystemChange?: DateSelection;
 	classes?: string[];
-	consentStatus?: RegistrationTypes | string[];
-	createdAt?: DateSelection | object;
-	outdatedSince?: DateSelection | object;
+	consentStatus?: string[];
+	createdAt?: DateSelection;
+	outdatedSince?: DateSelection;
 };
 
 type Query = {
@@ -64,7 +71,9 @@ type DateSelection = {
 };
 
 export {
+	ChipTitle,
 	DateSelection,
+	FilterItem,
 	FilterOptions,
 	FilterOptionsType,
 	FilterQuery,