luminic-space/app-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add network

Browse Source
This commit is contained in:
xds
2025-10-31 15:22:44 +03:00
parent 6ab7a490c9
commit 5b56eb17fd
33 changed files with 1435 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/settings/CategoriesList.vue
View File

@@ -8,6 +8,7 @@ import {Category} from "@/models/category";
import {useToolbarStore} from "@/stores/toolbar-store";
import {useRouter} from "vue-router";
import {useCategoriesStore} from "@/stores/categories-store";
import {CategoryType, CategoryTypeName} from "@/models/enums";
const toast = useToast()
const spaceStore = useSpaceStore()
@@ -20,7 +21,7 @@ const categories = ref<Category[]>([])
const fetchData = async () => {
try {
if (spaceStore.selectedSpaceId !== null) {
if (spaceStore.selectedSpaceId !== undefined) {
let spaceId = spaceStore.selectedSpaceId!!
await categoryStore.fetchCategories(spaceId)
categories.value = categoryStore.categories
@@ -50,21 +51,56 @@ onMounted(async () => {
<template>
<div class="flex flex-col w-full !pb-10 gap-6">
<div class="flex flex-col">
<span>Income categories</span>
<div class="flex card flex-col ">
<div class="card">
<div v-for="key in categories.keys()" :key="categories[key].id"
@click="router.push(`/categories/${categories[key].id}/edit`)"
class="flex flex-col w-full gap-0 pl-5 items-start justify-items-center font-bold ">
<div class="flex-row w-full items-center justify-between">
<div class="flex-row items-center gap-2 ">
<span class="text-3xl"> {{ categories[key].icon }}</span>
<div class="flex-col !font-bold "> {{ categories[key].name }}
<div class="flex flex-row text-sm">{{ categories[key].description }}</div>
<span v-if="categories.filter(i => i.type == CategoryType.INCOME).length ==0 ">It looks like you haven't create any income category yet. <router-link
to="/categories/create" class="!text-blue-400">Try to create some first.</router-link></span>
<div v-else v-for="key in categories.filter(i => i.type == CategoryType.INCOME).keys()"
:key="categories[key].id"
@click="router.push(`/categories/${categories[key].id}/edit`)"
class="flex flex-col w-full gap-0 pl-5 items-start justify-items-center font-bold ">
<div class="flex flex-row w-full items-center justify-between">
<div class="flex flex-row items-center gap-2 ">
<span class="text-3xl"> {{ categories[key].icon }}</span>
<div class="flex flex-col !font-bold "> {{ categories[key].name }}
<div class="flex flex-row text-sm">{{ categories[key].description }} |
{{ CategoryTypeName[categories[key].type] }}
</div>
</div>
</div>
<i class="pi pi-angle-right !font-extralight"/>
</div>
<Divider v-if="key+1 !== categories.length" class="!m-0 !py-3"/>
</div>
</div>
</div>
<div class="flex flex-col">
<span>Expense categories</span>
<div class="flex card ">
<span v-if="categories.filter(i => i.type == CategoryType.EXPENSE).length ==0 ">It looks like you haven't create any expense category yet. <router-link
to="/categories/create" class="!text-blue-400">Try to create some first.</router-link></span>
<div v-else v-for="key in categories.filter(i => i.type == CategoryType.EXPENSE).keys()"
:key="categories[key].id"
@click="router.push(`/categories/${categories[key].id}/edit`)"
class="flex flex-col w-full gap-0 pl-5 items-start justify-items-center font-bold ">
<div class="flex flex-row w-full items-center justify-between">
<div class="flex flex-row items-center gap-2 ">
<span class="text-3xl"> {{ categories[key].icon }}</span>
<div class="flex flex-col !font-bold "> {{ categories[key].name }}
<div class="flex flex-row text-sm">{{ categories[key].description }} |
{{ CategoryTypeName[categories[key].type] }}
</div>
</div>
</div>
<i class="pi pi-angle-right !font-extralight"/>
</div>
<Divider v-if="key+1 !== categories.length" class="!m-0 !py-3"/>
</div>
<i class="pi pi-angle-right !font-extralight"/>
</div>
<Divider v-if="key+1 !== categories.length" class="!m-0 !py-3"/>
</div>
</div>
</template>

16
src/components/settings/CategoryCreateUpdate.vue
View File

@@ -178,7 +178,7 @@ onMounted(async () => {
// await categoriesStore.fetchCategories(spaceStore.selectedSpaceId)
try {
let updateDTO = buildUpdate()
await categoriesService.updateCategory(spaceStore.selectedSpaceId, updateDTO)
await categoriesService.updateCategory(spaceStore.selectedSpaceId, Number(categoryId.value), updateDTO)
console.log(updateDTO)
await moveUser()
} catch (e) {
@@ -224,7 +224,7 @@ onMounted(async () => {
:callback="(confirmed: boolean) => { if (confirmed) deleteCategory(); isDeleteAlertVisible = false; }"
/>
<div class="flex flex-col w-full ">
<div class=" flex-col " v-tooltip.focus.bottom="'Only emoji supported'">
<div class="flex flex-col " v-tooltip.focus.bottom="'Only emoji supported'">
<input
class="
block w-full
@@ -249,30 +249,30 @@ onMounted(async () => {
class="text-sm !text-red-500 font-extralight">Icon cannot be empty or non-emoji</span>
</div>
<div class="w-full !items-center !justify-center">
<div class="flex w-full !items-center !justify-center">
<SelectButton
v-model="categoryType"
:options="options"
optionLabel="label"
optionValue="value"
class="!w-full !items-center !justify-center "
class="!w-full !items-center !justify-center !border-none "
/>
<span v-if="isCategoryTypeError"
class="text-sm !text-red-500 font-extralight">Category type cannot be empty</span>
</div>
</div>
<div class="flex flex-col w-full justify-items-start">
<div class="flex flex-col w-full justify-items-start">
<label class="!font-semibold text-gray-600 pl-2">Category name</label>
<div class="card !rounded-3xl !justify-start !items-start !p-4 !pl-5 ">
<div class="flex card !rounded-3xl !justify-start !items-start !p-4 !pl-5 ">
<input class="font-extralight w-full focus:outline-0" placeholder="Name" v-model="categoryName"
@input="categoryName.length !== 0 ? isCategoryNameError = false : true"/>
</div>
<span v-if="isCategoryNameError" class="text-sm !text-red-500 font-extralight">Name cannot be empty</span>
</div>
<div class="flex flex-col w-full justify-items-start">
<div class="flex flex-col w-full justify-items-start">
<label class="!font-semibold text-gray-600 !pl-2">Category description</label>
<div class="card !justify-start !items-start !pl-2">
<div class="flex card !justify-start !items-start !pl-2">
<textarea
class="!font-extralight !text-start !pl-2 w-full focus:outline-0 !focus:border-0 !@focus:shadow-none !bg-white !border-0 min-h-36"
style="box-shadow: none !important;"

2
src/components/settings/NotificationSettings.vue
View File

@@ -3,7 +3,7 @@
</script>
<template>
<div class="card">
<div class="flex card">
Not implemented
</div>
</template>

19
src/components/settings/RecurrentsList.vue
View File

@@ -49,23 +49,24 @@ onMounted(async () => {
</script>
<template>
<div class="!pb-10">
<div class="card">
<div v-for="key in recurrents.keys()" :key="recurrents[key].id"
<div class="flex !pb-10">
<div class="flex card">
<span v-if="recurrents.length==0">Looks like that you haven't create any recurrent yet. <router-link to="/recurrents/create" class="!text-blue-400">Try to create some first.</router-link></span>
<div v-else v-for="key in recurrents.keys()" :key="recurrents[key].id"
@click="router.push(`/recurrents/${recurrents[key].id}/edit`)"
class="flex flex-col w-full pl-5 items-start justify-items-center font-bold ">
<div class="flex-row gap-2 w-full items-center justify-between">
<div class="w-full flex items-center justify-between">
<div class="flex-row items-center gap-2 ">
<div class="flex flex-row gap-2 w-full items-center justify-between">
<div class="flex w-full flex items-center justify-between">
<div class="flex flex-row items-center gap-2 ">
<span class="text-4xl">{{ recurrents[key].category.icon }}</span>
<div class="flex-col items-start">
<div class="flex-row !font-bold "> {{ recurrents[key].name }}</div>
<div class="flex flex-col items-start">
<div class="flex flex-row !font-bold "> {{ recurrents[key].name }}</div>
<div class="flex flex-row text-sm">{{ recurrents[key].category.name }}</div>
</div>
</div>
<div class="items-end flex-col">
<div class="flex items-end flex-col">
<span class="text-lg !font-semibold">{{ recurrents[key].amount }}₽ </span>
<span class="text-sm">каждое {{ recurrents[key].date }} число </span>
</div>

38
src/components/settings/RecurrentyCreateUpdate.vue
View File

@@ -170,7 +170,7 @@ const isDeleteAlertVisible = ref(false)
const deleteAlertMessage = ref('Do you want to delete recurrent?')
const deleteRecurrent = async () => {
await recurrentsService.deleteRecurrent(spaceStore.selectedSpaceId, recurrentId.value)
await recurrentsStore.fetchRecurrents(spaceStore.selectedSpaceId)
// await recurrentsStore.fetchRecurrents(spaceStore.selectedSpaceId)
if (window.history.length > 1) {
router.back()
} else {
@@ -208,8 +208,8 @@ onMounted(async () => {
toolbar.registerHandler('updateRecurrent', async () => {
if (spaceStore.selectedSpaceId) {
try {
await recurrentsService.updateRecurrent(spaceStore.selectedSpaceId, buildUpdate())
await recurrentsStore.fetchRecurrents(spaceStore.selectedSpaceId)
await recurrentsService.updateRecurrent(spaceStore.selectedSpaceId, Number(recurrentId.value), buildUpdate())
// await recurrentsStore.fetchRecurrents(spaceStore.selectedSpaceId)
router.back()
} catch (error) {
toast.add({
@@ -226,7 +226,7 @@ onMounted(async () => {
toolbar.registerHandler('createRecurrent', async () => {
if (spaceStore.selectedSpaceId) {
await recurrentsService.createRecurrent(spaceStore.selectedSpaceId, buildCreate())
await recurrentsStore.fetchRecurrents(spaceStore.selectedSpaceId)
// await recurrentsStore.fetchRecurrents(spaceStore.selectedSpaceId)
router.back()
}
})
@@ -235,7 +235,6 @@ onMounted(async () => {
</script>
<template>
<div v-if="categories.length===0" class="card !gap-4 !p-10">
<span class="">No categories available.</span>
<span class="text-center">Maybe you want to <router-link to="/categories" class="!text-blue-700">create a new category</router-link> first?</span>
@@ -250,16 +249,17 @@ onMounted(async () => {
<div v-if="isCategorySelectorOpened" class="fixed inset-0 z-50 flex items-start justify-center p-4 overflow-y-auto"
style="background-color: var(--primary-color); "
:style="tgApp ? `padding-top: ${insetTop}px !important` : 'padding-top: 2rem !important'">
<div class="w-full max-w-md">
<div class="card justify-items-start justify-start">
<div class="flex w-full max-w-md">
<div class="flex card justify-items-start justify-start">
<div v-for="(cat, idx) in categories" :key="cat.id"
@click="recurrentCategory = cat; isCategorySelectorOpened = false"
class="flex flex-col w-full gap-0 pl-5 items-start justify-items-center font-bold cursor-pointer hover:bg-gray-50 transition-colors">
<div class="flex-row w-full items-center justify-between py-3">
<div class="flex-row items-center gap-2">
<div class="flex flex-row w-full items-center justify-between py-3">
<div class="flex flex-row items-center gap-2">
<span class="text-3xl">{{ cat.icon }} </span>
<div class="flex-col justify-between">
<div class="flex-row"> {{ cat.name }}</div>
<div class="flex flex-col justify-between">
<div class="flex flex-row"> {{ cat.name }}</div>
<div class="flex flex-row text-sm text-gray-600">{{ cat.description }}</div>
</div>
</div>
@@ -272,7 +272,7 @@ onMounted(async () => {
</div>
<div class="flex flex-col w-full ">
<div class="flex-col w-full">
<div class="flex flex-col w-full">
<InputNumber
v-model="recurrentAmount"
@input=" isAmountError = false"
@@ -294,12 +294,12 @@ onMounted(async () => {
</div>
<div class="flex flex-col w-full justify-items-start">
<label class="!font-semibold text-gray-600 pl-2">Recurrent category</label>
<div class="card !justify-start !items-start !p-4 !pl-5 cursor-pointer"
<div class="flex card !justify-start !items-start !p-4 !pl-5 cursor-pointer"
@click="isCategorySelectorOpened = true; isCategoryError=false;">
<div class="flex-row w-full gap-2 items-center justify-between">
<div class="flex-row gap-2 items-center">
<div class="flex flex-row w-full gap-2 items-center justify-between">
<div class="flex flex-row gap-2 items-center">
<span class="!text-3xl ">{{ recurrentCategory.icon }}</span>
<div class="flex-col ">
<div class="flex flex-col ">
<span class=" !">{{ recurrentCategory.name }}
</span>
</div>
@@ -311,7 +311,7 @@ onMounted(async () => {
</div>
<div class="flex flex-col w-full justify-items-start">
<label class="!font-semibold text-gray-600 pl-2">Recurrent name</label>
<div class="card !justify-start !items-start !p-4 !pl-5 ">
<div class="flex card !justify-start !items-start !p-4 !pl-5 ">
<input class="font-extralight w-full focus:outline-0" placeholder="Name"
@input="recurrentName?.length ==0 ? isNameError = true : isNameError=false" v-model="recurrentName"/>
</div>
@@ -320,8 +320,8 @@ onMounted(async () => {
</div>
<div class="flex flex-col w-full justify-items-start">
<label class="!font-semibold text-gray-600 !pl-2">Recurrent date</label>
<div class="card !justify-start !items-start !pl-2">
<div class="!grid !grid-cols-7 gap-2">
<div class="flex card !justify-start !items-start !pl-2">
<div class="flex !grid !grid-cols-7 gap-2">
<div v-for="i in 31"
class="!w-12 !h-12 !items-center !justify-items-center !justify-center rounded-full cursor-pointer flex"
:class="recurrentDate == i ? 'bg-green-200' : 'bg-gray-100'"

9
src/components/settings/SettingsList.vue
View File

@@ -3,16 +3,17 @@ import {Divider} from "primevue";
const items = [
{name: "Space settings", link: '/space-settings'},
{name: "Notification settings", link: '/notification-settings'},
// {name: "Notification settings", link: '/notification-settings'},
{name: "Categories", link: '/categories'},
{name: "Recurrent Operations", link: '/recurrents'},
]
</script>
<template>
<div class="overflow-y-auto">
<div class="card">
<router-link :to="items[item].link" v-for="item in items.keys()"
<div class="flex overflow-y-auto">
<div class="flex card">
<router-link :to="items[item].link" v-for="item in items.keys()"
class="flex flex-col w-full gap-0 pl-5 items-start justify-items-center">
<div class="flex flex-row justify-between items-center w-full pe-2 p-2">

143
src/components/settings/SpaceSettings.vue
View File

@@ -1,10 +1,149 @@
<script setup lang="ts">
import {onMounted, ref} from "vue";
import {Divider, ToggleSwitch} from "primevue";
import {spaceService} from "@/services/space-service";
import {SettingType} from "@/models/enums";
const spacePeriodStarts = ref(10)
const spaceSubPeriodStarts = ref(25)
const isNotificationsEnabled = ref(true)
const days = ref([
{key: 'Mon', isSelected: false},
{key: 'Tue', isSelected: false},
{key: 'Wed', isSelected: false},
{key: 'Thu', isSelected: false},
{key: 'Fri', isSelected: false},
{key: 'Sat', isSelected: false},
{key: 'Sun', isSelected: false}
]);
const selectDay = (day: string) => {
let dayValue = days.value.find(i => i.key === day)
if (dayValue) {
dayValue.isSelected = !dayValue.isSelected
settingChanged(SettingType.NOTIFICATIONS_DAYS)
}
}
const selectAllDay = () => {
if (days.value.filter(i => i.isSelected).length < 7) {
days.value.forEach(i => i.isSelected = true)
} else {
days.value.forEach(i => i.isSelected = false)
}
}
const fetchData = async () => {
let settings: Record<string, string>[] = await spaceService.getSettings()
let periodStartsSetting = settings.find((i) => i.key === "period-start")
spacePeriodStarts.value = periodStartsSetting ? Number(periodStartsSetting.value) : 5
let subPeriodStartsSetting = settings.find((i) => i.key === "sub-period-start")
spaceSubPeriodStarts.value = subPeriodStartsSetting ? Number(subPeriodStartsSetting.value) : 20
let notificationEnabledSetting = settings.find((i) => i.key === 'notifications-enabled')
isNotificationsEnabled.value = notificationEnabledSetting ? notificationEnabledSetting.value == '1' : false
let notificationsDaysSettings = settings.find((i) => i.key === 'notifications-days')
if (notificationsDaysSettings) {
notificationsDaysSettings.value.split(',').forEach((element) => {
days.value.forEach((day) => {
if (day.key == element) {
day.isSelected = true
}
})
})
}
}
const settingChanged = async (setting: SettingType) => {
let newValue;
switch (setting) {
case SettingType.PERIOD_START:
newValue = spacePeriodStarts.value
await spaceService.setSetting(SettingType.PERIOD_START, newValue)
break
case SettingType.SUB_PERIOD_START:
newValue = spaceSubPeriodStarts.value
await spaceService.setSetting(SettingType.SUB_PERIOD_START, newValue)
break
case SettingType.NOTIFICATIONS_ENABLED:
newValue = isNotificationsEnabled.value ? '1' : '0'
await spaceService.setSetting(SettingType.NOTIFICATIONS_ENABLED, newValue)
break;
case SettingType.NOTIFICATIONS_DAYS:
newValue = Array.isArray(days.value)
? days.value.filter(day => day.isSelected).map(day => day.key).join(',')
: '';
await spaceService.setSetting(SettingType.NOTIFICATIONS_DAYS, newValue)
break;
case SettingType.NOTIFICATIONS_TIME:
newValue = '19:30'
await spaceService.setSetting(SettingType.NOTIFICATIONS_TIME, newValue)
}
}
onMounted(async () => {
await fetchData()
})
</script>
<template>
<div class="card">
Not implemented
<div class="flex !pb-4 !w-full">
<div class="flex flex-col w-full gap-4">
<div class="flex periods flex-col !w-full">
<span class="text-sm !pl-2">Space period dates</span>
<div class="flex card flex-col !w-full justify-between">
<div class="flex flex-row !w-full justify-between pl-2 pt-2">
<span>Space period start</span>
<select class="custom-select" v-model="spacePeriodStarts"
@change="settingChanged(SettingType.PERIOD_START)">
<option v-for="i in 31">{{ i }}</option>
</select>
</div>
<Divider/>
<div class="flex flex-row !w-full justify-between pl-2 pb-2">
<span>Space sub-period start</span>
<select class="custom-select" v-model="spaceSubPeriodStarts"
@change="settingChanged(SettingType.SUB_PERIOD_START)">
<option v-for="i in 31">{{ i }}</option>
</select>
</div>
</div>
</div>
<div class="flex notifications flex-col !w-full">
<span class="text-sm !pl-2">Space notifications</span>
<div class="flex card flex-col !w-full justify-between">
<div class="flex flex-row !w-full justify-between px-2 pt-2">
<span>Notification enabled</span>
<ToggleSwitch v-model="isNotificationsEnabled" @change="settingChanged(SettingType.NOTIFICATIONS_ENABLED)"/>
</div>
<Divider/>
<div class="flex flex-row !w-full justify-between px-2 pb-2 items-center">
<span>Days reminders</span>
<div class="flex flex-row items-center gap-2">
<button
@click="isNotificationsEnabled ? selectAllDay() : ''">
All
</button>
<div class="flex gap-1">
<button v-for="day in days" class="border border-gray-200 rounded-md shadow-sm p-1"
@click="isNotificationsEnabled ? selectDay(day.key): ''"
:class="isNotificationsEnabled ? day.isSelected ? 'bg-green-100' : '' : 'bg-gray-100'">
{{ day.key.substring(0, 1) }}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>