Elizhium/litlyx
1
0
Fork 0
mirror of https://github.com/Litlyx/litlyx synced 2025-12-09 23:48:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

better drawer

Browse Source
This commit is contained in:
Emily
2024-12-19 16:46:03 +01:00
parent 3f26f1ab68
commit 7009a0ad02
17 changed files with 108 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
dashboard/app.vue
View File

@@ -10,7 +10,7 @@ const { alerts, closeAlert } = useAlert();
const { showDialog, closeDialog, dialogComponent, dialogParams, dialogStyle, dialogClosable } = useCustomDialog();
const { visible } = usePricingDrawer();
const { drawerVisible, hideDrawer, drawerClasses } = useDrawer();
</script>
@@ -18,10 +18,10 @@ const { visible } = usePricingDrawer();
<div class="w-dvw h-dvh bg-lyx-background-light relative">
<Transition name="pdrawer">
<LazyPricingDrawer @onCloseClick="visible = false"
class="bg-black fixed right-0 top-0 w-full xl:w-[60vw] xl:min-w-[65rem] h-full z-[20]" v-if="visible">
</LazyPricingDrawer>
<Transition name="drawer">
<LazyDrawerGeneric @onCloseClick="hideDrawer()" :class="drawerClasses"
class="bg-black fixed right-0 top-0 w-full xl:w-[60vw] xl:min-w-[65rem] h-full z-[20]" v-if="drawerVisible">
</LazyDrawerGeneric>
</Transition>
@@ -78,18 +78,18 @@ const { visible } = usePricingDrawer();
</template>
<style scoped lang="scss">
.pdrawer-enter-active,
.pdrawer-leave-active {
.drawer-enter-active,
.drawer-leave-active {
transition: all .5s ease-in-out;
}
.pdrawer-enter-from,
.pdrawer-leave-to {
.drawer-enter-from,
.drawer-leave-to {
transform: translateX(100%)
}
.pdrawer-enter-to,
.pdrawer-leave-from {
.drawer-enter-to,
.drawer-leave-from {
transform: translateX(0)
}
</style>

2
dashboard/components/CVerticalNavigation.vue
View File

@@ -105,8 +105,6 @@ const { data: maxProjects } = useFetch("/api/user/max_projects", {
});
const pricingDrawer = usePricingDrawer();
</script>
<template>

4
dashboard/components/banner/LimitsInfo.vue
View File

@@ -5,10 +5,10 @@ const limitsInfo = await useFetch("/api/project/limits_info", {
lazy: true, headers: useComputedHeaders({ useSnapshotDates: false })
});
const pricingDrawer = usePricingDrawer();
const { showDrawer } = useDrawer();
function goToUpgrade() {
pricingDrawer.visible.value = true;
showDrawer('PRICING');
}
</script>

7
dashboard/components/banner/Offer.vue
View File

@@ -1,10 +1,10 @@
<script lang="ts" setup>
const pricingDrawer = usePricingDrawer();
const { showDrawer } = useDrawer();
function goToUpgrade() {
pricingDrawer.visible.value = true;
showDrawer('PRICING');
}
const { project } = useProject()
@@ -20,7 +20,8 @@ const isPremium = computed(() => {
<div v-if="!isPremium" class="w-full bg-[#5680f822] p-4 rounded-lg text-[.9rem] flex items-center">
<div class="flex flex-col grow">
<div class="poppins font-semibold text-lyx-primary">
Launch offer: 25% off forever with code <span class="text-white font-bold text-[1rem]">LIT25</span> at checkout
Launch offer: 25% off forever with code <span class="text-white font-bold text-[1rem]">LIT25</span> at
checkout
from Acceleration Plan and beyond.
</div>
<!-- <div class="poppins text-lyx-primary">

13
dashboard/components/drawer/Docs.vue Normal file
View File

@@ -0,0 +1,13 @@
<script lang="ts" setup>
const emits = defineEmits<{
(evt: 'onCloseClick'): void
}>();
</script>
<template>
<div class="w-full h-full">
<iframe class="w-full h-full" src="https://docs.litlyx.com/introduction" frameborder="0"></iframe>
</div>
</template>

20
dashboard/components/drawer/Generic.vue Normal file
View File

@@ -0,0 +1,20 @@
<script lang="ts" setup>
const emits = defineEmits<{ (evt: 'onCloseClick'): void }>();
const { drawerComponent } = useDrawer();
</script>
<template>
<div class="p-8 overflow-y-auto">
<div @click="$emit('onCloseClick')"
class="cursor-pointer fixed top-4 right-4 rounded-full bg-menu drop-shadow-[0_0_2px_#CCCCCCCC] w-9 h-9 flex items-center justify-center">
<i class="fas fa-close text-[1.6rem]"></i>
</div>
<Component v-if="drawerComponent" :is="drawerComponent"></Component>
</div>
</template>

75
dashboard/components/pricing/PricingDrawer.vue → dashboard/components/drawer/Pricing.vue
View File

@@ -1,6 +1,5 @@
<script lang="ts" setup>
import type { PricingCardProp } from './PricingCardGeneric.vue';
import type { PricingCardProp } from '../pricing/PricingCardGeneric.vue';
const { data: planData, refresh: refreshPlanData } = useFetch('/api/project/plan', {
@@ -182,35 +181,11 @@ function getPricingsData() {
return { freePricing, customPricing, slidePricings }
}
const { projectId } = useProject();
const emits = defineEmits<{
(evt: 'onCloseClick'): void
}>();
async function onLifetimeUpgradeClick() {
const res = await $fetch<string>(`/api/pay/create-onetime`, {
...signHeaders({
'content-type': 'application/json',
'x-pid': projectId.value ?? ''
}),
method: 'POST',
body: JSON.stringify({ planId: 2001 })
})
if (!res) alert('Something went wrong');
window.open(res);
}
</script>
<template>
<div class="p-8 overflow-y-auto">
<div @click="$emit('onCloseClick')"
class="cursor-pointer fixed top-4 right-4 rounded-full bg-menu drop-shadow-[0_0_2px_#CCCCCCCC] w-9 h-9 flex items-center justify-center">
<i class="fas fa-close text-[1.6rem]"></i>
</div>
<div class="flex gap-8 mt-10 h-max xl:flex-row flex-col">
<PricingCardGeneric class="flex-1" :datas="getPricingsData().freePricing"></PricingCardGeneric>
<PricingCardGeneric class="flex-1" :datas="getPricingsData().slidePricings" :default-index="2">
@@ -218,52 +193,6 @@ async function onLifetimeUpgradeClick() {
<PricingCardGeneric class="flex-1" :datas="getPricingsData().customPricing"></PricingCardGeneric>
</div>
<!-- <LyxUiCard class="w-full mt-6">
<div class="flex">
<div class="flex flex-col gap-3">
<div>
<span class="text-lyx-primary font-semibold text-[1.4rem]">
LIFETIME DEAL
</span>
<span class="text-lyx-text-dark text-[.8rem]"> (Growth plan) </span>
</div>
<div class="text-[2rem]"> € 2.399,00 </div>
<div> Up to 500.000 visits/events per month </div>
<LyxUiButton type="primary" @click="onLifetimeUpgradeClick()"> Purchase </LyxUiButton>
</div>
<div class="flex justify-evenly grow">
<div class="flex flex-col justify-evenly">
<div class="flex items-center gap-2">
<img class="h-6" :src="'/check.png'" alt="Check">
<div> Slack support </div>
</div>
<div class="flex items-center gap-2">
<img class="h-6" :src="'/check.png'" alt="Check">
<div> Unlimited domanis </div>
</div>
<div class="flex items-center gap-2">
<img class="h-6" :src="'/check.png'" alt="Check">
<div> Unlimited reports </div>
</div>
</div>
<div class="flex flex-col justify-evenly">
<div class="flex items-center gap-2">
<img class="h-6" :src="'/check.png'" alt="Check">
<div> AI Tokens: 3.000 / month </div>
</div>
<div class="flex items-center gap-2">
<img class="h-6" :src="'/check.png'" alt="Check">
<div> Server type: SHARED </div>
</div>
<div class="flex items-center gap-2">
<img class="h-6" :src="'/check.png'" alt="Check">
<div> Data retention: 5 Years </div>
</div>
</div>
</div>
</div>
</LyxUiCard> -->
<div class="flex justify-between items-center mt-10 flex-col xl:flex-row">
<div class="flex flex-col gap-2">
<div class="poppins text-[2rem] font-semibold">
@@ -282,7 +211,5 @@ async function onLifetimeUpgradeClick() {
</div>
</div>
</div>
</template>

2
dashboard/components/pricing/PricingCardGeneric.vue
View File

@@ -15,8 +15,6 @@ export type PricingCardProp = {
const props = defineProps<{ datas: PricingCardProp[], defaultIndex?: number }>();
const { project } = useProject();
const currentIndex = ref<number>(props.defaultIndex || 0);
const data = computed(() => {

17
dashboard/components/settings/billing.vue
View File

@@ -111,8 +111,7 @@ async function saveBillingInfo() {
}
const { visible } = usePricingDrawer();
const { showDrawer } = useDrawer();
</script>
@@ -128,9 +127,11 @@ const { visible } = usePricingDrawer();
<template #info>
<div v-if="!isGuest">
<div class="flex flex-col gap-4">
<LyxUiInput class="px-2 py-2 !bg-[#161616]" placeholder="Address line 1" v-model="currentBillingInfo.line1">
<LyxUiInput class="px-2 py-2 !bg-[#161616]" placeholder="Address line 1"
v-model="currentBillingInfo.line1">
</LyxUiInput>
<LyxUiInput class="px-2 py-2 !bg-[#161616]" placeholder="Address line 2" v-model="currentBillingInfo.line2">
<LyxUiInput class="px-2 py-2 !bg-[#161616]" placeholder="Address line 2"
v-model="currentBillingInfo.line2">
</LyxUiInput>
<div class="flex gap-4 w-full">
<LyxUiInput class="px-2 py-2 w-full !bg-[#161616]" placeholder="Country"
@@ -141,9 +142,11 @@ const { visible } = usePricingDrawer();
</LyxUiInput>
</div>
<div class="flex gap-4 w-full">
<LyxUiInput class="px-2 py-2 w-full !bg-[#161616]" placeholder="City" v-model="currentBillingInfo.city">
<LyxUiInput class="px-2 py-2 w-full !bg-[#161616]" placeholder="City"
v-model="currentBillingInfo.city">
</LyxUiInput>
<LyxUiInput class="px-2 py-2 w-full !bg-[#161616]" placeholder="State" v-model="currentBillingInfo.state">
<LyxUiInput class="px-2 py-2 w-full !bg-[#161616]" placeholder="State"
v-model="currentBillingInfo.state">
</LyxUiInput>
</div>
</div>
@@ -195,7 +198,7 @@ const { visible } = usePricingDrawer();
<div class="poppins"> Expire date:</div>
<div> {{ prettyExpireDate }}</div>
</div>
<LyxUiButton v-if="!isGuest" @click="visible = true" type="primary">
<LyxUiButton v-if="!isGuest" @click="showDrawer('PRICING')" type="primary">
Upgrade plan
</LyxUiButton>
</div>

34
dashboard/composables/useDrawer.ts Normal file
View File

@@ -0,0 +1,34 @@
const drawerVisible = ref<boolean>(false);
const drawerComponent = ref<Component>();
const drawerClasses = ref<string>('')
type ComponentType = "DOCS" | "PRICING";
async function loadComponent(component: ComponentType): Promise<Component> {
switch (component) {
case "DOCS":
const DrawerDocs = await import("../components/drawer/Docs.vue");
return DrawerDocs.default;
case "PRICING":
const DrawerPricing = await import("../components/drawer/Pricing.vue");
return DrawerPricing.default;
default:
throw new Error("Unknown component type");
}
}
async function showDrawer(component: ComponentType, classes: string = "") {
drawerComponent.value = await loadComponent(component);
drawerVisible.value = true;
drawerClasses.value = classes;
}
function hideDrawer() {
drawerVisible.value = false;
}
export function useDrawer() {
return { drawerClasses, drawerVisible, drawerComponent, showDrawer, hideDrawer };
}

9
dashboard/composables/usePricingDrawer.ts
View File

@@ -1,9 +0,0 @@
const pricingDrawerVisible = ref<boolean>(false);
export function usePricingDrawer() {
return { visible: pricingDrawerVisible };
}

2
dashboard/layouts/dashboard.vue
View File

@@ -7,8 +7,6 @@ import { Lit } from 'litlyx-js';
const { userRoles, isLogged } = useLoggedUser();
const { project } = useProject();
const pricingDrawer = usePricingDrawer();
const selfhosted = useSelfhosted();
const sections: Section[] = [

6
dashboard/layouts/header.vue
View File

@@ -23,12 +23,6 @@ const entries = [
const loggedUser = useLoggedUser();
const { setToken } = useAccessToken();
function logout() {
loggedUser.value = { logged: false }
setToken('');
location.reload();
}
</script>

4
dashboard/pages/analyst.vue
View File

@@ -222,7 +222,7 @@ async function deleteChat(chat_id: string) {
await reloadChatsList();
}
const { visible: pricingDrawerVisible } = usePricingDrawer()
const { showDrawer } = useDrawer();
async function clearAllChats() {
@@ -386,7 +386,7 @@ async function clearAllChats() {
<div class="manrope font-semibold text-text-dirty"> {{ chatsRemaining }} remaining requests
</div>
</div>
<LyxUiButton type="primary" class="text-[.9rem] text-center " @click="pricingDrawerVisible = true">
<LyxUiButton type="primary" class="text-[.9rem] text-center " @click="showDrawer('PRICING')">
Upgrade
</LyxUiButton>
</div>

4
dashboard/pages/dashboard/events.vue
View File

@@ -70,10 +70,10 @@ const showWarning = computed(() => {
})
const pricingDrawer = usePricingDrawer();
const { showDrawer } = useDrawer();
function goToUpgrade() {
pricingDrawer.visible.value = true;
showDrawer('PRICING');
}
</script>

4
dashboard/pages/dashboard/visits.vue
View File

@@ -77,10 +77,10 @@ const showWarning = computed(() => {
return options.indexOf(selectedTimeFrom.value) > 1
})
const pricingDrawer = usePricingDrawer();
const { showDrawer } = useDrawer();
function goToUpgrade() {
pricingDrawer.visible.value = true;
showDrawer('PRICING');
}
</script>

8
dashboard/pages/index.vue
View File

@@ -32,12 +32,18 @@ const firstInteraction = useFetch<boolean>('/api/project/first_interaction', {
const showDashboard = computed(() => project.value && firstInteraction.data.value);
const selfhosted = useSelfhosted();
const { showDrawer } = useDrawer();
</script>
<template>
<div class="dashboard w-full h-full overflow-y-auto overflow-x-hidden pb-[7rem] md:pt-4 lg:pt-0">
<div @click="showDrawer('DOCS','!w-[30vw] !min-w-[30vw]')">
test
</div>
<div v-if="showDashboard">
<div class="w-full px-4 py-2 gap-2 flex flex-col">
@@ -85,7 +91,7 @@ const selfhosted = useSelfhosted();
<BarCardOperatingSystems :key="refreshKey"></BarCardOperatingSystems>
</div>
</div>
</div>
</div>
</div>