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

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>