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

refactoring

Browse Source
This commit is contained in:
Emily
2025-03-03 19:31:35 +01:00
parent 76e5e07f79
commit 63fa3995c5
70 changed files with 2928 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
dashboard/components/FirstInteraction.vue
View File

@@ -79,13 +79,13 @@ function reloadPage() {
</div>
<div class="flex items-center justify-center mt-10">
<div class="flex items-center justify-center mt-10 w-full px-10">
<div class="flex flex-col gap-6">
<div class="flex gap-6 xl:flex-row flex-col">
<div class="h-full w-full">
<CardTitled class="h-full w-full xl:min-w-[500px] xl:h-[35rem]" title="Quick setup tutorial"
<CardTitled class="h-full w-full xl:min-w-[400px] xl:h-[35rem]" title="Quick setup tutorial"
sub="Quickly Set Up Litlyx in 30 Seconds!">
<div class="flex items-center justify-center h-full w-full">
@@ -133,6 +133,28 @@ function reloadPage() {
</div>
</div>
<div>
<div>
<CardTitled class="w-full h-full" title="Wordpress + Elementor"
sub="Our WordPress plugin is coming soon!.">
<template #header>
<LyxUiButton @click="Lit.event('no_visit_goto_docs')" type="secondary"
to="https://docs.litlyx.com">
Visit documentation
</LyxUiButton>
</template>
<div class="flex flex-col items-end">
<div class="justify-center w-full hidden xl:flex gap-3">
<a href="#">
<img class="cursor-pointer" :src="'tech-icons/wpel.png'" alt="Litlyx-Wordpress-Elementor">
</a>
</div>
</div>
</CardTitled>
</div>
</div>
<div>
<div>
<CardTitled class="w-full h-full" title="Modules"

26
dashboard/components/admin/Overview.vue
View File

@@ -88,12 +88,15 @@ onMounted(() => {
const filter = ref<string>('{}');
const { data: projectsInfo, pending: pendingProjects } = await useFetch<{ count: number, projects: TAdminProject[] }>(
const { data: projectsInfo, pending: pendingProjects } = useFetch<{ count: number, projects: TAdminProject[] }>(
() => `/api/admin/projects?page=${page.value - 1}&limit=${limit.value}&sortQuery=${order.value}&filterQuery=${filter.value}&filterFrom=${selected.value.start.toISOString()}&filterTo=${selected.value.end.toISOString()}`,
signHeaders()
);
const { data: metrics, pending: pendingMetrics } = useFetch(
() => `/api/admin/metrics?filterFrom=${selected.value.start.toISOString()}&filterTo=${selected.value.end.toISOString()}`,
signHeaders()
);
const { uiMenu } = useSelectMenuStyle();
@@ -136,7 +139,7 @@ const { uiMenu } = useSelectMenuStyle();
<div class="flex gap-2 items-center shrink-0">
<div>Page {{ page }} </div>
<div> {{ Math.min(limit, projectsInfo?.count || 0) }} of {{ projectsInfo?.count || 0
}}</div>
}}</div>
</div>
<div>
@@ -165,6 +168,23 @@ const { uiMenu } = useSelectMenuStyle();
</UPopover>
</div>
<div class="w-[80%]">
<div v-if="pendingMetrics"> Loading... </div>
<div class="flex gap-10 flex-wrap" v-if="!pendingMetrics && metrics">
<div> Projects: {{ metrics.totalProjects }} ({{ metrics.premiumProjects }} premium) </div>
<div>
Total visits: {{ formatNumberK(metrics.totalVisits) }}
</div>
<div>
Active: {{ metrics.totalProjects - metrics.deadProjects }} |
Dead: {{ metrics.deadProjects }}
</div>
<div>
Total events: {{ formatNumberK(metrics.totalEvents) }}
</div>
</div>
</div>
</div>

5
dashboard/components/dashboard/ActionableChart.vue
View File

@@ -198,11 +198,16 @@ const selectLabelsAvailable = computed<{ label: string, value: Slice, disabled:
})
const selectedSlice = computed<Slice>(() => {
console.log({ available: selectLabelsAvailable.value })
const targetValue = selectLabelsAvailable.value[selectedLabelIndex.value];
if (!targetValue) return 'day';
if (targetValue.disabled) {
selectedLabelIndex.value = selectLabelsAvailable.value.findIndex(e => !e.disabled);
}
if (selectedLabelIndex.value === -1) {
console.error('ERROR CANNOT FIND CORRECT SLICE')
return 'day';
}
return selectLabelsAvailable.value[selectedLabelIndex.value].value
});

2
dashboard/components/dashboard/TopCards.vue
View File

@@ -8,7 +8,7 @@ const { snapshot, safeSnapshotDates, snapshotDuration } = useSnapshot()
const chartSlice = computed(() => {
if (snapshotDuration.value <= 3) return 'hour' as Slice;
if (snapshotDuration.value <= 32) return 'day' as Slice;
if (snapshotDuration.value <= 31 * 3) return 'day' as Slice;
return 'month' as Slice;
});

56
dashboard/components/dialog/InviteManager.vue Normal file
View File

@@ -0,0 +1,56 @@
<script lang="ts" setup>
import Accept_invite from '~/pages/accept_invite.vue';
const { createAlert } = useAlert();
const { close } = useModal()
const emit = defineEmits(['success', 'cancel'])
const props = defineProps<{
invites: {
project_name: string, project_id: string
}[]
}>();
function acceptInvite(project_id: string) {
}
function declineInvite(project_id: string) {
}
</script>
<template>
<UModal :ui="{
strategy: 'override',
overlay: {
background: 'bg-lyx-background/85'
},
background: 'dark:bg-lyx-widget bg-lyx-lightmode-widget-light',
ring: 'border-solid border-[1px] border-[#262626]'
}">
<div class="h-full flex flex-col gap-8 p-4">
<div class="flex flex-col gap-2" v-for="invite of [...invites, ...invites, ...invites]">
<div class="dark:text-lyx-text text-lyx-lightmode-text">
You are invited to join
<span class="font-semibold">{{ invite.project_name }}</span>.
Do you accept this invitation?
</div>
<div class="flex gap-4">
<LyxUiButton @click="acceptInvite(invite.project_id)" type="primary"> Accept </LyxUiButton>
<LyxUiButton @click="declineInvite(invite.project_id)" type="danger"> Decline </LyxUiButton>
</div>
</div>
</div>
</UModal>
</template>

110
dashboard/components/dialog/PermissionManager.vue Normal file
View File

@@ -0,0 +1,110 @@
<script lang="ts" setup>
import { useSelectMenuStyle } from '~/composables/ui/useSelectMenuStyle';
import type { TTeamMember } from '~/shared/schema/TeamMemberSchema';
const emit = defineEmits(['success', 'cancel'])
const props = defineProps<{ member_id: string }>();
const { domainList, domain, setActiveDomain, refreshDomains, refreshingDomains } = useDomain();
const { data: member } = useFetch<TTeamMember>(`/api/project/members/get?member_id=${props.member_id}`, {
headers: useComputedHeaders({})
})
const { createAlert } = useAlert()
async function save(member_id: string) {
if (!member.value) return;
const res = await $fetch('/api/project/members/edit', {
method: 'POST',
headers: useComputedHeaders({ custom: { 'Content-Type': 'application/json' } }).value,
body: JSON.stringify({
member_id,
webAnalytics: member.value.permission.webAnalytics,
events: member.value.permission.events,
ai: member.value.permission.ai,
domains: member.value.permission.domains
})
});
createAlert('Saved', 'Permission saved successfully', 'fas fa-check', 2500);
emit('success')
}
</script>
<template>
<UModal :ui="{
strategy: 'override',
overlay: {
background: 'bg-lyx-background/85'
},
background: 'bg-lyx-lightmode-widget dark:bg-lyx-widget',
ring: 'border-solid border-[1px] border-[#262626]'
}">
<div class="p-8">
<div v-if="member" class="manage flex flex-col gap-4">
<div class="flex flex-col gap-1">
<div>
<div class="mb-1"> Allowed domains </div>
<div class="mb-1">
<USelectMenu v-model="member.permission.domains" :options="domainList" multiple
value-attribute="_id">
<template #option="{ option, active, selected }">
<div class="flex items-center gap-2">
<div>
<img class="h-5 bg-black rounded-full" :src="'/logo_32.png'"
alt="Litlyx logo">
</div>
<div> {{ option._id }} </div>
</div>
</template>
<template #label="e">
<div class="flex items-center gap-2">
<div>
<img class="h-5 bg-black rounded-full" :src="'/logo_32.png'"
alt="Litlyx logo">
</div>
<div>
{{
member.permission.domains.length > 2 ?
`${member.permission.domains.length} domains` :
(member.permission.domains.map(e => e).join(' & ') || 'No domains')
}}
</div>
</div>
</template>
</USelectMenu>
</div>
</div>
<div class="flex items-center gap-2">
<UCheckbox v-model="member.permission.webAnalytics"></UCheckbox>
<div> Allow web analytics page </div>
</div>
<div class="flex items-center gap-2">
<UCheckbox v-model="member.permission.events"></UCheckbox>
<div> Allow events page </div>
</div>
<div class="flex items-center gap-2">
<UCheckbox v-model="member.permission.ai"></UCheckbox>
<div> Allow AI page </div>
</div>
</div>
</div>
<div class="flex gap-2 justify-end mt-8">
<LyxUiButton v-if="member?.permission" @click="save(member._id.toString())" type="primary">
Save
</LyxUiButton>
<LyxUiButton type="secondary" @click="emit('cancel')"> Cancel </LyxUiButton>
</div>
</div>
</UModal>
</template>

66
dashboard/components/layout/TopNavigation.vue
View File

@@ -5,6 +5,7 @@ import { DialogFeedback, DialogHelp } from '#components';
const modal = useModal();
const selfhosted = useSelfhosted();
const { domain } = useDomain();
const colorMode = useColorMode()
const isDark = computed({
@@ -16,47 +17,50 @@ const isDark = computed({
}
})
const {safeSnapshotDates} = useSnapshot();
const { safeSnapshotDates } = useSnapshot();
</script>
<template>
<div
class="w-full overflow-y-auto hide-scrollbars h-[4rem] border-solid border-[#D9D9E0] dark:border-[#202020] border-b-[1px] bg-lyx-lightmode-background dark:bg-lyx-background flex dark:shadow-[1px_0_10px_#000000]">
class="w-full hide-scrollbars relative h-[4rem] border-solid border-[#D9D9E0] dark:border-[#202020] border-b-[1px] bg-lyx-lightmode-background dark:bg-lyx-background dark:shadow-[1px_0_10px_#000000]">
<div class="flex items-center px-6">
<SelectorDomainSelector></SelectorDomainSelector>
</div>
<div class="hidden lg:flex pl-[12rem] items-center popping text-[.9rem] dark:text-lyx-text-dark">
Timeframe:
{{new Date(safeSnapshotDates.from).toLocaleDateString()}}
to
{{new Date(safeSnapshotDates.to).toLocaleDateString()}}
</div>
<div class="grow"></div>
<div class="flex items-center gap-6 mr-10">
<div v-if="!selfhosted" @click="modal.open(DialogFeedback, {});"
class="flex gap-2 items-center cursor-pointer outline-[1px] outline-lyx-widget-lighter p-1 px-3 rounded-md outline">
<i class="far fa-message"></i>
Feedback
<div class="absolute flex h-full w-full">
<div class="flex items-center px-6">
<SelectorDomainSelector></SelectorDomainSelector>
</div>
<div @click="modal.open(DialogHelp, {});" class="cursor-pointer"> Help </div>
<NuxtLink to="https://docs.litlyx.com" target="_blank" class="cursor-pointer">
Docs
</NuxtLink>
<div class="hidden lg:flex items-center popping text-[.9rem] dark:text-lyx-text-dark">
Timeframe:
{{ new Date(safeSnapshotDates.from).toLocaleDateString() }}
to
{{ new Date(safeSnapshotDates.to).toLocaleDateString() }}
</div>
<div>
<UTooltip :text="isDark ? 'Toggle light mode' : 'Toggle dark mode'">
<i @click="isDark = !isDark"
class="cursor-pointer hover:text-lyx-lightmode-text text-lyx-lightmode-text-dark dark:hover:text-lyx-text dark:text-lyx-text-dark"
:class="isDark ? 'far fa-moon' : 'far fa-sun'"></i>
</UTooltip>
<div class="grow"></div>
<div class="flex items-center gap-6 mr-10">
<div v-if="!selfhosted" @click="modal.open(DialogFeedback, {});"
class="flex gap-2 items-center cursor-pointer outline-[1px] outline-lyx-widget-lighter p-1 px-3 rounded-md outline">
<i class="far fa-message"></i>
Feedback
</div>
<div @click="modal.open(DialogHelp, {});" class="cursor-pointer"> Help </div>
<NuxtLink to="https://docs.litlyx.com" target="_blank" class="cursor-pointer">
Docs
</NuxtLink>
<div>
<UTooltip :text="isDark ? 'Toggle light mode' : 'Toggle dark mode'">
<i @click="isDark = !isDark"
class="cursor-pointer hover:text-lyx-lightmode-text text-lyx-lightmode-text-dark dark:hover:text-lyx-text dark:text-lyx-text-dark"
:class="isDark ? 'far fa-moon' : 'far fa-sun'"></i>
</UTooltip>
</div>
</div>
</div>

43
dashboard/components/layout/VerticalNavigation.vue
View File

@@ -1,5 +1,6 @@
<script lang="ts" setup>
import { DialogInviteManager } from '#components';
import CreateSnapshot from '../dialog/CreateSnapshot.vue';
export type Entry = {
@@ -27,6 +28,10 @@ type Props = {
const route = useRoute();
const props = defineProps<Props>();
const { data: pendingInvites, refresh: refreshInvites } = useFetch('/api/project/members/pending', {
headers: useComputedHeaders({})
});
const { userRoles, setLoggedUser } = useLoggedUser();
const { projectList } = useProject();
@@ -106,6 +111,28 @@ const { data: maxProjects } = useFetch("/api/user/max_projects", {
});
const modal = useModal();
function openPendingInvites() {
if (!pendingInvites.value) return;
if (pendingInvites.value.length == 0) return;
console.log(pendingInvites);
modal.open(DialogInviteManager, {
invites: pendingInvites.value.map(e => {
return { project_id: e._id, project_name: e.project_name }
}),
onSuccess: () => {
modal.close();
refreshInvites();
},
onCancel: () => {
modal.close();
refreshInvites();
},
});
}
</script>
<template>
@@ -249,7 +276,6 @@ const { data: maxProjects } = useFetch("/api/user/max_projects", {
<div class="bg-lyx-lightmode-widget dark:bg-[#202020] h-[1px] w-full"></div>
<div class="flex flex-col h-full">
<div v-for="section of sections" class="flex flex-col gap-1 h-full pb-6">
<div v-for="entry of section.entries" :class="{ 'grow flex items-end': entry.grow }">
@@ -283,6 +309,18 @@ const { data: maxProjects } = useFetch("/api/user/max_projects", {
<div class="grow"></div>
<div v-if="pendingInvites && pendingInvites.length > 0" @click="openPendingInvites()"
class="w-full bg-[#fbbf2422] p-4 rounded-lg text-[.9rem] flex flex-col justify-center cursor-pointer">
<div class="poppins font-medium dark:text-lyx-text text-lyx-lightmode-text">
Pending invitation
</div>
<div class="poppins dark:text-lyx-text-dark text-lyx-lightmode-text-dark">
You have {{ pendingInvites.length }}
pending invitation{{ pendingInvites.length != 1 ? 's' : '' }}
awaiting your response
</div>
</div>
<div class="bg-lyx-lightmode-widget dark:bg-[#202020] h-[1px] w-full px-4 mb-3"></div>
<div class="flex justify-end px-2">
@@ -296,7 +334,8 @@ const { data: maxProjects } = useFetch("/api/user/max_projects", {
</div>
<UTooltip text="Logout" :popper="{ arrow: true, placement: 'top' }">
<div @click="onLogout()" class="cursor-pointer hover:text-lyx-lightmode-text text-lyx-lightmode-text-dark dark:hover:text-lyx-text dark:text-lyx-text-dark">
<div @click="onLogout()"
class="cursor-pointer hover:text-lyx-lightmode-text text-lyx-lightmode-text-dark dark:hover:text-lyx-text dark:text-lyx-text-dark">
<i class="far fa-arrow-right-from-bracket scale-x-[-100%]"></i>
</div>
</UTooltip>

6
dashboard/components/selector/DomainSelector.vue
View File

@@ -8,7 +8,7 @@ function onChange(e: string) {
</script>
<template>
<div class="flex gap-2 absolute">
<div class="flex gap-2">
<USelectMenu :uiMenu="{
select: 'bg-lyx-lightmode-widget-light !ring-lyx-lightmode-widget dark:!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter dark:!ring-lyx-widget-lighter',
base: '!bg-lyx-lightmode-widget dark:!bg-lyx-widget w-max',
@@ -18,7 +18,7 @@ function onChange(e: string) {
},
input: 'z-[999] !bg-lyx-lightmode-widget dark:!bg-lyx-widget-light'
}" class="w-full" searchable searchable-placeholder="Search domain..." v-if="domainList" @change="onChange"
:value="domain" value-attribute="_id" :options="domainList">
:value="domain" :loading="refreshingDomains" value-attribute="_id" :options="domainList">
<template #option="{ option, active, selected }">
<div class="flex items-center gap-2">
@@ -35,7 +35,7 @@ function onChange(e: string) {
<img class="h-5 bg-black rounded-full" :src="'/logo_32.png'" alt="Litlyx logo">
</div>
<div>
{{ domain || '-' }}
{{ refreshingDomains ? 'Loading...' : (domain || '-') }}
</div>
</div>
</template>

1
dashboard/components/selector/ProjectSelector.vue
View File

@@ -16,7 +16,6 @@ function isProjectMine(owner?: string) {
function onChange(e: TProject) {
actions.setActiveProject(e._id.toString());
setActiveDomain('All domains');
}
</script>

123
dashboard/components/settings/members.vue
View File

@@ -1,123 +0,0 @@
<script setup lang="ts">
import type { SettingsTemplateEntry } from './Template.vue';
const { projectId, isGuest } = useProject();
definePageMeta({ layout: 'dashboard' });
const columns = [
{ key: 'me', label: '' },
{ key: 'email', label: 'Email' },
{ key: 'name', label: 'Name' },
{ key: 'role', label: 'Role' },
{ key: 'action', label: 'Actions' },
// { key: 'pending', label: 'Pending' },
]
const { data: members, refresh: refreshMembers } = useFetch('/api/project/members/list', {
headers: useComputedHeaders({ useSnapshotDates: false })
});
const showAddMember = ref<boolean>(false);
const addMemberEmail = ref<string>("");
async function kickMember(email: string) {
const sure = confirm('Are you sure to kick ' + email + ' ?');
if (!sure) return;
try {
await $fetch('/api/project/members/kick', {
method: 'POST',
...signHeaders({
'Content-Type': 'application/json',
'x-pid': projectId.value ?? ''
}),
body: JSON.stringify({ email }),
onResponseError({ request, response, options }) {
alert(response.statusText);
}
});
refreshMembers();
} catch (ex: any) { }
}
async function addMember() {
if (addMemberEmail.value.length === 0) return;
try {
showAddMember.value = false;
await $fetch('/api/project/members/add', {
method: 'POST',
...signHeaders({
'Content-Type': 'application/json',
'x-pid': projectId.value ?? ''
}),
body: JSON.stringify({ email: addMemberEmail.value }),
onResponseError({ request, response, options }) {
alert(response.statusText);
}
});
addMemberEmail.value = '';
refreshMembers();
} catch (ex: any) { }
}
const entries: SettingsTemplateEntry[] = [
{ id: 'add', title: 'Add member', text: 'Add new member to project' },
{ id: 'members', title: 'Members', text: 'Manage members of current project' },
]
</script>
<template>
<SettingsTemplate :entries="entries">
<template #add>
<div v-if="!isGuest" class="flex flex-col">
<div class="flex gap-4 items-center">
<LyxUiInput class="px-4 py-1 w-full" placeholder="User email" v-model="addMemberEmail"></LyxUiInput>
<LyxUiButton @click="addMember" type="secondary"> Add </LyxUiButton>
</div>
<div class="poppins text-[.8rem] mt-2 text-lyx-text-darker">
User should have been registered to Litlyx
</div>
</div>
<div v-if="isGuest" class="text-lyx-text-darker"> Guests cannot add members</div>
</template>
<template #members>
<UTable :rows="members || []" :columns="columns">
<template #me-data="e">
<i v-if="e.row.me" class="far fa-user"></i>
<i v-if="!e.row.me"></i>
</template>
<template #action-data="e" v-if="!isGuest">
<div @click="kickMember(e.row.email)" v-if="e.row.role != 'OWNER'"
class="text-red-500 hover:bg-black/20 cursor-pointer outline outline-[1px] outline-red-500 px-3 py-1 rounded-lg text-center">
Kick
</div>
</template>
</UTable>
</template>
</SettingsTemplate>
</template>