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

updating ui

Browse Source
This commit is contained in:
Emily
2024-08-03 16:14:02 +02:00
parent 93f22dfc54
commit cc39043a68
14 changed files with 379 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
dashboard/components/CVerticalNavigation.vue
View File

@@ -120,7 +120,14 @@ watch(selected, () => {
<!-- <div class="font-bold text-[1.4rem] text-gray-300"> Litlyx </div> -->
<USelectMenu class="w-full" v-if="projects" v-model="selected" :options="projects">
<USelectMenu :uiMenu="{
select: '!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter !ring-lyx-widget-lighter',
base: '!bg-lyx-widget',
option: {
base: 'hover:!bg-lyx-widget-lighter cursor-pointer',
active: '!bg-lyx-widget-lighter'
}
}" class="w-full" v-if="projects" v-model="selected" :options="projects">
<template #option="{ option, active, selected }">
<div class="flex items-center gap-2">
@@ -152,7 +159,7 @@ watch(selected, () => {
</div>
<div class="px-4 w-full flex-col">
<div class="px-2 w-full flex-col">
<div class="flex mb-2 px-2 items-center justify-between">
<div class="poppins text-[.8rem]">
@@ -165,7 +172,14 @@ watch(selected, () => {
</div>
</div>
<USelectMenu class="w-full" v-model="snapshot" :options="snapshotsItems">
<USelectMenu :uiMenu="{
select: '!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter !ring-lyx-widget-lighter',
base: '!bg-lyx-widget',
option: {
base: 'hover:!bg-lyx-widget-lighter cursor-pointer',
active: '!bg-lyx-widget-lighter'
}
}" class="w-full" v-model="snapshot" :options="snapshotsItems">
<template #label>
<div class="flex items-center gap-2">
<div :style="'background-color:' + snapshot?.color" class="w-2 h-2 rounded-full">
@@ -194,7 +208,7 @@ watch(selected, () => {
</div>
</div>
<LyxUiButton @click="generatePDF()" type="primary" class="w-full text-center mt-4">
<LyxUiButton @click="generatePDF()" type="secondary" class="w-full text-center mt-4">
Download report
</LyxUiButton>
@@ -236,7 +250,7 @@ watch(selected, () => {
}">
<NuxtLink @click="close() && entry.action?.()" :target="entry.external ? '_blank' : ''"
tag="div" class="flex items-center" :to="entry.to || '/'">
tag="div" class="w-full flex items-center" :to="entry.to || '/'">
<div class="flex items-center w-[1.4rem] mr-2 text-[1.1rem] justify-center">
<i :class="entry.icon"></i>
</div>
@@ -267,6 +281,18 @@ watch(selected, () => {
class="cursor-pointer hover:text-lyx-text text-lyx-text-dark">
<i class="fab fa-discord"></i>
</NuxtLink>
<NuxtLink to="https://x.com/litlyx" target="_blank"
class="cursor-pointer hover:text-lyx-text text-lyx-text-dark">
<i class="fab fa-x-twitter"></i>
</NuxtLink>
<NuxtLink to="https://dev.to/litlyx-org" target="_blank"
class="cursor-pointer hover:text-lyx-text text-lyx-text-dark">
<i class="fab fa-dev"></i>
</NuxtLink>
<NuxtLink to="/admin" v-if="isAdmin"
class="cursor-pointer hover:text-lyx-text text-lyx-text-dark">
<i class="fas fa-cat"></i>
</NuxtLink>
</div>
<UTooltip text="Logout" :popper="{ arrow: true, placement: 'top' }">

28
dashboard/components/CustomTab.vue Normal file
View File

@@ -0,0 +1,28 @@
<script lang="ts" setup>
type CItem = { label: string, slot: string }
const props = defineProps<{ items: CItem[] }>();
const activeTabIndex = ref<number>(0);
</script>
<template>
<div>
<div class="flex">
<div v-for="(tab, index) of items" @click="activeTabIndex = index"
class="px-6 pb-3 poppins font-medium text-lyx-text-darker border-b-[1px] border-lyx-text-darker" :class="{
'!border-[#88A7FF] text-[#88A7FF]': activeTabIndex === index,
'hover:border-lyx-text-dark hover:text-lyx-text-dark cursor-pointer': activeTabIndex !== index
}">
{{ tab.label }}
</div>
<div class="border-b-[1px] border-lyx-text-darker w-full">
</div>
</div>
<div>
<slot :name="props.items[activeTabIndex].slot"></slot>
</div>
</div>
</template>

19
dashboard/components/lyx-ui/Button.vue
View File

@@ -1,19 +0,0 @@
<script lang="ts" setup>
export type ButtonType = 'primary' | 'secondary' | 'outline' | 'danger';
const props = defineProps<{ type: ButtonType, disabled?: boolean }>();
</script>
<template>
<div class="poppins w-fit cursor-pointer px-4 py-1 rounded-md outline outline-[1px] text-text" :class="{
'bg-lyx-primary-dark outline-lyx-primary hover:bg-lyx-primary-hover': type === 'primary',
'bg-lyx-widget-lighter outline-lyx-widget-lighter hover:bg-lyx-widget-light': type === 'secondary',
'bg-lyx-transparent outline-lyx-widget-lighter hover:bg-lyx-widget-light': type === 'outline',
'bg-lyx-danger-dark outline-lyx-danger hover:bg-lyx-danger': type === 'danger',
'bg-lyx-widget-lighter outline-lyx-widget-lighter hover:bg-lyx-widget-lighter !cursor-not-allowed !text-lyx-text-darker': disabled === true
}">
<slot></slot>
</div>
</template>

10
dashboard/components/lyx-ui/Card.vue
View File

@@ -1,10 +0,0 @@
<script lang="ts" setup>
</script>
<template>
<div class="w-fit h-fit rounded-md bg-lyx-widget p-4 outline outline-[1px] outline-lyx-background-lighter">
<slot></slot>
</div>
</template>

11
dashboard/components/lyx-ui/Icon.vue
View File

@@ -1,11 +0,0 @@
<script lang="ts" setup>
const props = defineProps<{ icon: string }>();
</script>
<template>
<span class="material-symbols-outlined">
{{ props.icon }}
</span>
</template>

26
dashboard/components/lyx-ui/ProjectSelector.vue
View File

@@ -1,26 +0,0 @@
<script lang="ts" setup>
</script>
<template>
<LyxUiCard>
<div class="flex items-center">
<div class="grow">
PROJECT_NAME
</div>
<div>
Active
</div>
<LyxUiIcon icon="drag_indicator"></LyxUiIcon>
</div>
<div class="flex items-center">
<LyxUiButton type="primary">
CURRENT_SUBSCRIPTION
</LyxUiButton>
<div class="poppins font-light text-lyx-text-dark">
next billing: NEXT_BILLING_DATE
</div>
</div>
</LyxUiCard>
</template>

39
dashboard/components/settings/Account.vue Normal file
View File

@@ -0,0 +1,39 @@
<script lang="ts" setup>
import type { SettingsTemplateEntry } from './Template.vue';
const entries: SettingsTemplateEntry[] = [
{ id: 'delete', title: 'Delete account', text: 'Delete your account' },
]
const { setToken } = useAccessToken();
async function deleteAccount() {
const sure = confirm("Are you sure you want to delete this account ?");
if (!sure) return;
await $fetch("/api/user/delete_account", {
...signHeaders(),
method: "DELETE"
})
setToken('');
location.href = "/login"
}
</script>
<template>
<SettingsTemplate :entries="entries">
<template #delete>
<div
class="outline rounded-lg w-full px-8 py-4 flex flex-col gap-4 outline-[1px] outline-[#541c15] bg-[#1e1412]">
<div class="poppins font-semibold"> Deleting this account will also remove its projects </div>
<div @click="deleteAccount()"
class="text-[#e95b61] poppins font-semibold cursor-pointer hover:text-black hover:bg-red-700 outline rounded-lg w-fit px-8 py-2 outline-[1px] outline-[#532b26] bg-[#291415]">
Delete account
</div>
</div>
</template>
</SettingsTemplate>
</template>

57
dashboard/components/settings/General.vue Normal file
View File

@@ -0,0 +1,57 @@
<script lang="ts" setup>
import type { SettingsTemplateEntry } from './Template.vue';
const entries: SettingsTemplateEntry[] = [
{ id: 'pname', title: 'Name', text: 'Project name' },
{ id: 'pid', title: 'Id', text: 'Project id' },
{ id: 'pscript', title: 'Script', text: 'Universal javascript integration' },
{ id: 'pdelete', title: 'Delete', text: 'Delete current project' },
]
const activeProject = useActiveProject();
const projectNameInputVal = ref<string>(activeProject.value?.name || '');
const canChange = computed(() => {
if (activeProject.value?.name == projectNameInputVal.value) return false;
if (projectNameInputVal.value.length === 0) return false;
return true;
});
</script>
<template>
<SettingsTemplate :entries="entries">
<template #pname>
<div class="flex items-center gap-4">
<LyxUiInput class="w-full px-4 py-2" v-model="projectNameInputVal"></LyxUiInput>
<LyxUiButton :disabled="!canChange" type="primary"> Change </LyxUiButton>
</div>
</template>
<template #pid>
<LyxUiCard class="w-full flex items-center">
<div class="grow">{{ activeProject?._id.toString() }}</div>
<div><i class="far fa-copy"></i></div>
</LyxUiCard>
</template>
<template #pscript>
<LyxUiCard class="w-full flex items-center">
<div class="grow">
{{ `
<script defer data-project="${activeProject?._id}"
src="https://cdn.jsdelivr.net/gh/litlyx/litlyx-js/browser/litlyx.js"></script>` }}
</div>
<div><i class="far fa-copy"></i></div>
</LyxUiCard>
</template>
<template #pdelete>
<div class="flex justify-end">
<LyxUiButton type="danger">
Delete project
</LyxUiButton>
</div>
</template>
</SettingsTemplate>
</template>

37
dashboard/components/settings/Template.vue Normal file
View File

@@ -0,0 +1,37 @@
<script lang="ts" setup>
export type SettingsTemplateEntry = {
title: string,
text: string,
id: string
}
type SettingsTemplateProp = {
entries: SettingsTemplateEntry[]
}
const props = defineProps<SettingsTemplateProp>();
</script>
<template>
<div class="mt-10 px-4">
<div v-for="(entry, index) of props.entries" class="flex flex-col">
<div class="flex">
<div class="flex-[2]">
<div class="poppins font-medium text-lyx-text">
{{ entry.title }}
</div>
<div class="poppins font-regular text-lyx-text-dark">
{{ entry.text }}
</div>
</div>
<div class="flex-[3]">
<slot :name="entry.id"></slot>
</div>
</div>
<div v-if="index < props.entries.length - 1" class="h-[2px] bg-lyx-widget-lighter w-full my-10"></div>
</div>
</div>
</template>

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

@@ -1,5 +1,6 @@
<script lang="ts" setup>
import dayjs from 'dayjs';
import type { SettingsTemplateEntry } from './Template.vue';
const activeProject = useActiveProject();
@@ -56,11 +57,18 @@ function getPremiumName(type: number) {
}
const entries: SettingsTemplateEntry[] = [
{ id: 'plan', title: 'Current plan', text: 'Manage current plat for this project' },
{ id: 'usage', title: 'Usage', text: 'Show usage of current project' },
{ id: 'invoices', title: 'Invoices', text: 'Manage invoices of current project' },
]
</script>
<template>
<div class="w-full h-full p-8 overflow-y-auto pb-40 lg:pb-0 relative overflow-x-hidden">
<div class="relative">
<Transition name="pdrawer">
<PricingDrawer @onCloseClick="showPricingDrawer = false" :currentSub="planData?.premium_type || 0"
@@ -69,136 +77,123 @@ function getPremiumName(type: number) {
</PricingDrawer>
</Transition>
<div @click="showPricingDrawer = false" v-if="showPricingDrawer"
class="barrier absolute left-0 top-0 w-full h-full z-[19] bg-black/40 backdrop-blur-[1px]">
</div>
<div class="poppins font-semibold text-[1.8rem]">
Billing
</div>
<div class="poppins text-[1.3rem] text-text-sub">
Manage your billing cycle for the project
<span class="font-bold">
{{ activeProject?.name || '' }}
</span>
</div>
<div class="my-4 mb-10 w-full bg-gray-400/30 h-[1px]">
</div>
<div class="flex flex-wrap justify-start gap-8">
<Card v-if="planData" class="px-0 pt-6 pb-4 w-[35rem] flex flex-col">
<div class="flex flex-col gap-6 px-8 grow">
<div class="flex justify-between flex-col sm:flex-row">
<SettingsTemplate :entries="entries">
<template #plan>
<LyxUiCard v-if="planData" class="flex flex-col w-full">
<div class="flex flex-col gap-6 px-8 grow">
<div class="flex justify-between flex-col sm:flex-row">
<div class="flex flex-col">
<div class="flex gap-3 items-center">
<div class="poppins font-semibold text-[1.1rem]">
{{ planData.premium ? 'Premium plan' : 'Basic plan' }}
</div>
<div
class="flex lato text-[.7rem] bg-accent/25 border-accent/40 border-[1px] px-[.6rem] rounded-lg">
{{ planData.premium ? getPremiumName(planData.premium_type) : 'FREE' }}
</div>
</div>
<div class="poppins text-text-sub text-[.9rem]">
Our free plan for testing the product.
</div>
</div>
<div class="flex items-center gap-1">
<div class="poppins font-semibold text-[2rem]"> $0 </div>
<div class="poppins text-text-sub mt-2"> per month </div>
</div>
</div>
<div class="flex flex-col">
<div class="flex gap-3 items-center">
<div class="poppins"> Billing period:</div>
<div class="flex items-center gap-2 md:gap-4 flex-col pt-4 md:pt-0 md:flex-row">
<div class="grow w-full md:w-auto">
<UProgress color="green" :min="0" :max="100" :value="leftPercent"></UProgress>
</div>
<div class="poppins"> {{ daysLeft }} days left </div>
</div>
<div class="flex justify-center">
Subscription: {{ planData.subscription_status }}
</div>
</div>
</div>
<div class="my-4 w-full bg-gray-400/30 h-[1px]">
</div>
<div class="flex justify-between px-8 flex-col sm:flex-row">
<div class="flex gap-2 text-text-sub text-[.9rem]">
<div class="poppins"> Expire date:</div>
<div> {{ prettyExpireDate }}</div>
</div>
<div v-if="!isGuest" @click="onPlanUpgradeClick()"
class="cursor-pointer flex items-center gap-2 text-[.9rem] text-white font-semibold bg-accent px-4 py-1 rounded-lg drop-shadow-[0_0_8px_#000000]">
<div class="poppins"> Upgrade plan </div>
<i class="fas fa-arrow-up-right"></i>
</div>
</div>
</LyxUiCard>
</template>
<template #usage>
<LyxUiCard v-if="planData" class="flex flex-col w-full">
<div class="flex flex-col gap-6 px-8">
<div class="flex justify-between">
<div class="flex flex-col">
<div class="poppins font-semibold text-[1.1rem]">
{{ planData.premium ? 'Premium plan' : 'Basic plan' }}
Usage
</div>
<div
class="flex lato text-[.7rem] bg-accent/25 border-accent/40 border-[1px] px-[.6rem] rounded-lg">
{{ planData.premium ? getPremiumName(planData.premium_type) : 'FREE' }}
<div class="poppins text-text-sub text-[.9rem]">
Check the usage limits of your project.
</div>
</div>
<div class="poppins text-text-sub text-[.9rem]">
Our free plan for testing the product.
</div>
</div>
<div class="flex items-center gap-1">
<div class="poppins font-semibold text-[2rem]"> $0 </div>
<div class="poppins text-text-sub mt-2"> per month </div>
</div>
</div>
<div class="flex flex-col">
<div class="poppins"> Billing period:</div>
<div class="flex items-center gap-2 md:gap-4 flex-col pt-4 md:pt-0 md:flex-row">
<div class="grow w-full md:w-auto">
<UProgress color="green" :min="0" :max="100" :value="leftPercent"></UProgress>
</div>
<div class="poppins"> {{ daysLeft }} days left </div>
</div>
<div class="flex justify-center">
Subscription: {{ planData.subscription_status }}
</div>
</div>
</div>
<div class="my-4 w-full bg-gray-400/30 h-[1px]">
</div>
<div class="flex justify-between px-8 flex-col sm:flex-row">
<div class="flex gap-2 text-text-sub text-[.9rem]">
<div class="poppins"> Expire date:</div>
<div> {{ prettyExpireDate }}</div>
</div>
<div v-if="!isGuest" @click="onPlanUpgradeClick()"
class="cursor-pointer flex items-center gap-2 text-[.9rem] text-white font-semibold bg-accent px-4 py-1 rounded-lg drop-shadow-[0_0_8px_#000000]">
<div class="poppins"> Upgrade plan </div>
<i class="fas fa-arrow-up-right"></i>
</div>
</div>
</Card>
<Card v-if="planData" class="px-0 pt-6 pb-4 w-[35rem] flex flex-col">
<div class="flex flex-col gap-6 px-8">
<div class="flex justify-between">
<div class="flex flex-col">
<div class="poppins font-semibold text-[1.1rem]">
Usage
<div class="poppins"> Usage:</div>
<div class="flex items-center gap-2 md:gap-4 flex-col pt-4 md:pt-0 md:flex-row">
<div class="grow w-full md:w-auto">
<UProgress :color="color" :min="0" :max="planData.limit" :value="planData.count">
</UProgress>
</div>
<div class="poppins"> {{ percent }}</div>
</div>
<div class="poppins text-text-sub text-[.9rem]">
Check the usage limits of your project.
<div class="flex justify-center">
{{ formatNumberK(planData.count) }} / {{ formatNumberK(planData.limit) }}
</div>
</div>
</div>
<div class="flex flex-col">
<div class="poppins"> Usage:</div>
<div class="flex items-center gap-2 md:gap-4 flex-col pt-4 md:pt-0 md:flex-row">
<div class="grow w-full md:w-auto">
<UProgress :color="color" :min="0" :max="planData.limit" :value="planData.count">
</UProgress>
</LyxUiCard>
</template>
<template #invoices>
<CardTitled v-if="!isGuest" title="Invoices"
:sub="(invoices && invoices.length == 0) ? 'No invoices yet' : ''" class="p-4 mt-8 w-full">
<div class="flex flex-col gap-2">
<div class="flex justify-between items-center bg-[#161616] p-4 rounded-lg"
v-for="invoice of invoices">
<div> <i class="fal fa-file-invoice"></i> </div>
<div class="flex flex-col md:flex-row md:justify-around md:grow items-center gap-2">
<div> {{ new Date(invoice.date).toLocaleString() }} </div>
<div> € {{ invoice.cost / 100 }} </div>
<div> {{ invoice.id }} </div>
<div
class="flex items-center lato text-[.8rem] bg-accent/25 border-accent/40 border-[1px] px-[.6rem] rounded-lg">
{{ invoice.status }}
</div>
</div>
<div>
<i @click="openInvoice(invoice.link)"
class="far fa-download cursor-pointer hover:text-white/80"></i>
</div>
<div class="poppins"> {{ percent }}</div>
</div>
<div class="flex justify-center">
{{ formatNumberK(planData.count) }} / {{ formatNumberK(planData.limit) }}
</div>
</div>
</div>
</Card>
</div>
<CardTitled v-if="!isGuest" title="Invoices" :sub="(invoices && invoices.length == 0) ? 'No invoices yet' : ''"
class="p-4 mt-8 max-w-[72rem]">
<div class="flex flex-col gap-2">
<div class="flex justify-between items-center bg-[#161616] p-4 rounded-lg" v-for="invoice of invoices">
<div> <i class="fal fa-file-invoice"></i> </div>
<div class="flex flex-col md:flex-row md:justify-around md:grow items-center gap-2">
<div> {{ new Date(invoice.date).toLocaleString() }} </div>
<div> € {{ invoice.cost / 100 }} </div>
<div> {{ invoice.id }} </div>
<div
class="flex items-center lato text-[.8rem] bg-accent/25 border-accent/40 border-[1px] px-[.6rem] rounded-lg">
{{ invoice.status }}
</div>
</div>
<div>
<i @click="openInvoice(invoice.link)"
class="far fa-download cursor-pointer hover:text-white/80"></i>
</div>
</div>
</div>
</CardTitled>
</CardTitled>
</template>
</SettingsTemplate>
</div>
</template>
<style scoped lang="scss">

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

@@ -1,8 +1,9 @@
<script setup lang="ts">
import type { SettingsTemplateEntry } from './Template.vue';
definePageMeta({ layout: 'dashboard' });
const activeProject = useActiveProject();
const columns = [
{ key: 'me', label: '' },
@@ -67,32 +68,31 @@ async function addMember() {
} 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>
<div class="home w-full h-full px-10 lg:px-6 overflow-y-auto pb-[12rem] md:pb-0 py-2">
<div class="flex flex-col gap-4">
<div v-if="!isGuest" @click="showAddMember = !showAddMember;"
class="flex items-center gap-2 bg-menu w-fit px-3 py-2 rounded-lg hover:bg-menu/80 cursor-pointer">
<i class="fas fa-plus"></i>
<div> Add member </div>
</div>
<div v-if="showAddMember" class="flex gap-4 items-center">
<input v-model="addMemberEmail" class="focus:outline-none bg-menu px-4 py-1 rounded-lg" type="text"
placeholder="user email">
<div @click="addMember" class="bg-menu w-fit py-1 px-4 rounded-lg hover:bg-menu/80 cursor-pointer">
Add
<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>
</template>
<template #members>
<UTable :rows="members || []" :columns="columns">
<template #me-data="e">
@@ -108,9 +108,7 @@ async function addMember() {
</template>
</UTable>
</div>
</div>
</template>
</SettingsTemplate>
</template>