Elizhium/litlyx
1
0
Fork 0
mirror of https://github.com/Litlyx/litlyx synced 2025-12-10 07:48:37 +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>

43
dashboard/pages/test2.vue Normal file
View File

@@ -0,0 +1,43 @@
<script lang="ts" setup>
definePageMeta({ layout: 'dashboard' });
const activeProject = useActiveProject();
const eventNames = ref<string[]>([]);
onMounted(async () => {
eventNames.value = await $fetch<string[]>(`/api/metrics/${activeProject.value?._id.toString()}/events/names`, signHeaders());
});
function test() {
const res = $fetch(`/api/metrics/${activeProject.value?._id.toString()}/events/flow_from_name?name=docs_clicked`)
console.log(res);
}
</script>
<template>
<div class="w-full h-full p-8 flex flex-col">
<CardTitled title="FLOW" sub="owo" class="w-full p-4">
<div class="p-2 flex flex-col">
<button @click="test">
TEST
</button>
</div>
</CardTitled>
<div class="mt-8 overflow-y-auto px-4 flex flex-col gap-3">
</div>
</div>
</template>