Elizhium/litlyx
1
0
Fork 0
mirror of https://github.com/Litlyx/litlyx synced 2025-12-10 15:58:38 +01:00
Code Issues Packages Projects Releases Wiki Activity

testing events flow

Browse Source
This commit is contained in:
Emily
2024-06-12 17:00:07 +02:00
parent 6a7143c8d4
commit c89a14d58a
4 changed files with 139 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
dashboard/pages/test.vue
View File

@@ -19,27 +19,48 @@ watch(selectedEventName, () => {
getMetadataFields();
});
watch(selectedMetadataField, () => {
getMetadataFieldGrouped();
});
async function getMetadataFields() {
metadataFields.value = await $fetch<string[]>(`/api/metrics/${activeProject.value?._id.toString()}/events/metadata_fields?name=${selectedEventName.value}`, signHeaders());
selectedMetadataField.value = undefined;
currentSearchText.value = "";
}
async function getMetadataFieldGrouped() {
if (!selectedMetadataField.value) return;
metadataFieldGrouped.value = await $fetch<string[]>(`/api/metrics/${activeProject.value?._id.toString()}/events/metadata_field_group?name=${selectedEventName.value}&field=${selectedMetadataField.value}`, signHeaders());
}
const metadataFieldGroupedFiltered = computed(() => {
if (currentSearchText.value.length == 0) return metadataFieldGrouped.value;
return metadataFieldGrouped.value.filter(e => {
const currentId: string = e._id || '';
const idToMatch = currentId.toLowerCase();
return idToMatch.includes(currentSearchText.value.toLowerCase());
});
});
const currentSearchText = ref<string>("");
const canSearch = computed(() => {
return selectedMetadataField.value != undefined;
});
</script>
<template>
<div class="w-full h-full p-8 flex">
<div class="w-full h-full p-8 flex flex-col">
<CardTitled title="Event tracker" sub="Track users from you marketing links to inner events" class="w-full">
<CardTitled title="Event metadata analyzer" sub="Filter events metadata fields to analyze them" class="w-full p-4">
<div class="p-8">
<div class="p-2 flex flex-col">
<div class="flex flex-col gap-2">
<USelectMenu searchable searchable-placeholder="Search an event..." class="w-full"
@@ -52,17 +73,34 @@ async function getMetadataFieldGrouped() {
</USelectMenu>
</div>
<div @click="getMetadataFieldGrouped()"
class="bg-black/70 p-2 px-8 w-fit rounded-lg mt-4 hover:bg-black/40 cursor-pointer">
Find
</div>
<div v-if="canSearch" class="flex gap-4 mt-4 items-center">
<div> Filter by name: </div>
<div class="h-full flex items-center text-[1.2rem]">
<input v-model="currentSearchText"
class="bg-black/70 hover:bg-black/40 rounded-lg px-4 py-1 focus:outline-none" type="text">
</div>
<div>
{{ metadataFieldGrouped }}
</div>
</div>
</CardTitled>
<div class="mt-8 overflow-y-auto px-4 flex flex-col gap-3">
<div class="text-accent poppins font-semibold">
Search results: {{ metadataFieldGroupedFiltered.length }}
</div>
<div class="flex flex-col">
<div v-for="item of metadataFieldGroupedFiltered">
<div class="flex gap-2">
<div> {{ item._id || 'OLD_EVENTS' }} </div>
<div> {{ item.count }} </div>
</div>
</div>
</div>
</div>
</div>
</template>