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

tg app fix sizes

Browse Source
This commit is contained in:
xds
2025-10-28 00:25:54 +03:00
parent ab8855a246
commit 4ea0324d4e
11 changed files with 275 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/App.vue
View File

@@ -1,16 +1,19 @@
<script setup lang="ts">
import SpaceList from "@/components/space-list/SpaceList.vue";
import Toolbar from "@/components/Toolbar.vue";
import Toast from "primevue/toast";
import { useSpaceStore } from "@/stores/spaceStore";
import { useToolbarStore } from "@/stores/toolbar-store";
import router from "@/router";
import { useRoute, onBeforeRouteUpdate } from "vue-router";
import { computed, onMounted, onBeforeUnmount, ref, watch } from "vue";
import {useToast} from "primevue/usetoast";
const spaceStore = useSpaceStore();
const toolbarStore = useToolbarStore();
const route = useRoute();
const platform = ref<string>("unknown")
const toast = useToast();
const tgApp = (window as any)?.Telegram?.WebApp;
const isTelegram = computed(() => !!tgApp);
@@ -34,7 +37,7 @@ function spaceSelected() {
let backHandler: (() => void) | null = null;
function setupBackButton() {
if (!tgApp) return;
if (!tgApp.initData) return;
if (route.path !== "/") {
tgApp.BackButton.show();
@@ -61,7 +64,7 @@ onMounted(() => {
isSpaceSelectorVisible.value = true;
});
if (tgApp) {
if (tgApp.initData) {
try {
tgApp.expand?.();
platform.value = tgApp.platform
@@ -93,6 +96,8 @@ onBeforeUnmount(() => {
</script>
<template>
<Toast/>
{{tgApp.initData}}
<!-- {{platform}}-->
<!-- {{['ios', 'android'].includes(platform) }}-->
<div class="flex flex-col tg " :class="['ios', 'android'].includes(platform) ? '!pt-10' : ''">

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

@@ -5,24 +5,25 @@ import {useToast} from "primevue/usetoast";
import {Divider} from "primevue";
import {onMounted, ref} from "vue";
import {Category} from "@/models/category";
import {categoriesService} from "@/services/categories-service";
import {useToolbarStore} from "@/stores/toolbar-store";
import {useRouter} from "vue-router";
import {useCategoriesStore} from "@/stores/categories-store";
const toast = useToast()
const spaceStore = useSpaceStore()
const categoryStore = useCategoriesStore()
const toolbar = useToolbarStore()
const router = useRouter()
const categories = ref<Category[]>([])
const fetchData = async () => {
try {
if (spaceStore.selectedSpaceId !== null) {
let spaceId = spaceStore.selectedSpaceId!!
categories.value = await categoriesService.fetchCategories(spaceId)
await categoryStore.fetchCategories(spaceId)
categories.value = categoryStore.categories
}
} catch (error: Error) {
toast.add({
@@ -39,8 +40,7 @@ const toCreation = () => {
onMounted(async () => {
await fetchData()
toolbar.registerHandler('createCategory', () => {
console.log("create cateogiry")
toolbar.registerHandler('openCategoryCreation', () => {
toCreation()
})
})
@@ -52,12 +52,15 @@ onMounted(async () => {
<div class="card">
<div v-for="key in categories.keys()" :key="categories[key].id" @click="router.push(`/categories/${categories[key].id}/edit`)"
<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-col items-start">
<div class="flex-row"> {{ categories[key].icon }} {{ categories[key].name }}</div>
<div class="flex flex-row text-sm">{{ categories[key].description }}</div>
<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>
</div>
</div>
<i class="pi pi-angle-right !font-extralight"/>
</div>

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

@@ -1,5 +1,5 @@
<script setup lang="ts">
import {useRoute} from "vue-router";
import {useRoute, useRouter} from "vue-router";
import {computed, onMounted, ref} from "vue";
import {useToolbarStore} from "@/stores/toolbar-store";
import {useToast} from "primevue/usetoast";
@@ -8,11 +8,15 @@ import {categoriesService} from "@/services/categories-service";
import {useSpaceStore} from "@/stores/spaceStore";
import {CategoryType, CategoryTypeName} from "@/models/enums";
import emojiRegex from 'emoji-regex'
import {useCategoriesStore} from "@/stores/categories-store";
const route = useRoute()
const router = useRouter()
const toolbar = useToolbarStore();
const toast = useToast();
const spaceStore = useSpaceStore();
const categoriesStore = useCategoriesStore();
const categoryId = ref<string | undefined>(route.params.id)
const mode = computed(() => {
return categoryId.value ? "edit" : "create"
@@ -31,9 +35,7 @@ const options = Object.values(CategoryType).map(type => ({
const fetchCategory = async () => {
try {
console.log('here')
if (spaceStore.selectedSpaceId && categoryId.value) {
console.log('here2')
let category = await categoriesService.fetchCategory(spaceStore.selectedSpaceId, Number(categoryId.value))
categoryType.value = category.type
categoryName.value = category.name
@@ -84,14 +86,20 @@ onMounted(async () => {
if (mode.value === "edit") {
await fetchCategory()
toolbar.registerHandler('deleteCategory', () => {
console.log("delete category")
})
toolbar.registerHandler('updateCategory', () => {
console.log("update category")
toolbar.registerHandler('updateCategory', async () => {
if (spaceStore.selectedSpaceId) {
// await categoriesStore.fetchCategories(spaceStore.selectedSpaceId)
router.back()
}
})
} else {
toolbar.registerHandler('createCategory', () => {
console.log("create category")
toolbar.registerHandler('createCategory', async () => {
if (spaceStore.selectedSpaceId) {
// await categoriesStore.fetchCategories(spaceStore.selectedSpaceId)
router.back()
}
})
}
})
@@ -103,7 +111,7 @@ onMounted(async () => {
<div class="flex flex-col w-full ">
<div class=" flex-col " v-tooltip.focus.bottom="'Only emoji supported'">
<input class=" !justify-items-center !justify-center font-extralight text-9xl w-full focus:outline-0"
<input class="!flex !justify-items-center !justify-center font-extralight text-9xl w-full focus:outline-0"
placeholder="Icon" v-model="categoryIcon" @input="handleInput" @paste="handlePaste"
@compositionend="handleCompositionEnd" inputmode="text"
autocomplete="off"

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

@@ -3,16 +3,17 @@
import {RecurrentOperation} from "@/models/recurrent-operation";
import {onMounted, ref} from "vue";
import {recurrentsService} from "@/services/recurrents-service";
import {useSpaceStore} from "@/stores/spaceStore";
import {useToast} from "primevue/usetoast";
import {Divider} from "primevue";
import {Category} from "@/models/category";
import {useRouter} from "vue-router";
import {useToolbarStore} from "@/stores/toolbar-store";
import {useRecurrentsStore} from "@/stores/recurrent-store";
const toolbar = useToolbarStore()
const spaceStore = useSpaceStore();
const recurrentsStore = useRecurrentsStore();
const toast = useToast();
const router = useRouter();
@@ -23,10 +24,8 @@ const recurrents = ref<RecurrentOperation[]>([])
const fetchData = async () => {
try {
if (spaceStore.selectedSpaceId) {
console.log('hereeee')
let recurrentsResponse = await recurrentsService.fetchRecurrents(spaceStore.selectedSpaceId)
recurrents.value = recurrentsResponse
console.log(recurrentsResponse)
await recurrentsStore.fetchRecurrents(spaceStore.selectedSpaceId)
recurrents.value = recurrentsStore.recurrents
}
} catch (e) {
@@ -34,7 +33,7 @@ const fetchData = async () => {
toast.add({
severity: 'error',
summary: 'Failed to fetch recurrents.',
detail: error.message
detail: e.message
})
}
}
@@ -53,19 +52,22 @@ onMounted(async () => {
<div class="card">
<div v-for="key in recurrents.keys()" :key="recurrents[key].id"
@click="router.push(`/recurrents/${recurrents[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-4xl">{{ recurrents[key].category.icon }}</span>
<div class="flex-col items-start">
<div class="flex-row"> {{ recurrents[key].name }}</div>
<div class="flex flex-row text-sm">{{ recurrents[key].category.name }}</div>
</div>
class="flex flex-col w-full gap- 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 ">
<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-row text-sm">{{ recurrents[key].category.name }}</div>
</div>
</div>
</div>
<div class="items-center flex-col">
<span class="text-lg !font-semibold">{{recurrents[key].amount}}₽ </span>
<span class="text-sm">каждое {{ recurrents[key].date }} число </span>
<div class="items-end flex-col">
<span class="text-lg !font-semibold">{{ recurrents[key].amount }}₽ </span>
<span class="text-sm">каждое {{ recurrents[key].date }} число </span>
</div>
</div>
<i class="pi pi-angle-right !font-extralight"/>
</div>

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

@@ -8,33 +8,39 @@ import {categoriesService} from "@/services/categories-service";
import {useSpaceStore} from "@/stores/spaceStore";
import {recurrentsService} from "@/services/recurrents-service";
import {Category} from "@/models/category";
import router from "@/router";
import {useRecurrentsStore} from "@/stores/recurrent-store";
import {CreateRecurrentOperationDTO, UpdateRecurrentOperationDTO} from "@/models/recurrent-operation";
const route = useRoute()
const toolbar = useToolbarStore();
const toast = useToast();
const spaceStore = useSpaceStore();
const recurrentsStore = useRecurrentsStore();
const isCategorySelectorOpened = ref(false);
const categories = ref<Category[]>([]);
const recurrentId = ref<string | undefined>(route.params.id)
const recurrentId = ref<number | undefined>(route.params.id)
const mode = computed(() => {
return recurrentId.value ? "edit" : "create"
})
const recurrentCategory = ref<Category>({})
const recurrentName = ref<string>()
const recurrentCategory = ref<Category>({} as Category)
const isCategoryError = ref(false)
const recurrentName = ref<string>('')
const isNameError = ref(false)
const recurrentAmount = ref<number>(0)
const recurrentDate = ref<number>(Math.floor(Math.random() * 31) )
const isAmountError = ref(false)
const recurrentDate = ref<number>(Math.floor(Math.random() * 31))
const isDateError = ref(false)
const fetchData = async () => {
try {
console.log('here')
if (spaceStore.selectedSpaceId) {
categories.value = await categoriesService.fetchCategories(spaceStore.selectedSpaceId)
if (categories.value.length > 0) {
if (mode.value === "edit") {
console.log('here2')
let recurrent = await recurrentsService.fetchRecurrent(spaceStore.selectedSpaceId, Number(recurrentId.value))
recurrentCategory.value = recurrent.category
recurrentName.value = recurrent.name
@@ -83,8 +89,81 @@ function handlePaste(e: ClipboardEvent) {
const num = Number(text)
recurrentAmount.value = isNaN(num) ? 0 : num
}
const tgApp = (window as any)?.Telegram?.WebApp;
const insetTop = ref(54)
const resetForm = () => {
isAmountError.value = false
isCategoryError.value = false
isNameError.value = false
isDateError.value = false
}
const validateForm = (): boolean => {
if (!recurrentCategory.value) {
isCategoryError.value = true
return false
}
if (recurrentAmount.value <= 0) {
isAmountError.value = true
return false
}
if (recurrentName.value.length == 0) {
isNameError.value = true
return false
}
if (recurrentDate.value < 1 && recurrentDate.value > 31) {
isDateError.value = true
return false
}
return true
}
const buildUpdate = (): UpdateRecurrentOperationDTO => {
if (validateForm()) {
if (mode.value === "edit") {
return {
categoryId: recurrentCategory.value.id,
name: recurrentName.value,
amount: recurrentAmount.value,
date: recurrentDate.value,
} as UpdateRecurrentOperationDTO
} else {
toast.add({
severity: "warn",
summary: "You cannot create while edit",
detail: "Editing only available when recurrent id is provided.",
})
throw new Error("Editing only available when recurrent id is provided.")
}
} else {
throw new Error("Form is not valid")
}
}
const buildCreate = (): CreateRecurrentOperationDTO => {
if (validateForm()) {
if (mode.value === "create") {
return {
categoryId: recurrentCategory.value.id,
name: recurrentName.value,
amount: recurrentAmount.value,
date: recurrentDate.value,
} as CreateRecurrentOperationDTO
} else {
toast.add({
severity: "warn",
summary: "You cannot edit while creating",
detail: "Creating only available when no recurrent id is provided.",
})
throw new Error("Creating only available when creating")
}
} else {
throw new Error("Form is not valid")
}
}
onMounted(async () => {
if (tgApp && ['ios', 'android'].includes(tgApp.platform)) {
@@ -94,15 +173,37 @@ onMounted(async () => {
await fetchData()
if (mode.value === "edit") {
toolbar.registerHandler('deleteRecurrent', () => {
console.log("delete recurrent")
toolbar.registerHandler('deleteRecurrent', async () => {
if (spaceStore.selectedSpaceId && recurrentId.value) {
await recurrentsService.deleteRecurrent(spaceStore.selectedSpaceId, recurrentId.value)
await recurrentsStore.fetchRecurrents(spaceStore.selectedSpaceId)
router.back()
}
})
toolbar.registerHandler('updateRecurrent', () => {
console.log("update Recurrent")
toolbar.registerHandler('updateRecurrent', async () => {
if (spaceStore.selectedSpaceId) {
try {
await recurrentsService.updateRecurrent(spaceStore.selectedSpaceId, buildUpdate())
await recurrentsStore.fetchRecurrents(spaceStore.selectedSpaceId)
router.back()
} catch (error) {
toast.add({
severity: "error",
summary: "Error while updating recurrent",
detail: error.message,
life: 3000,
})
}
}
})
} else {
toolbar.registerHandler('createRecurrent', () => {
console.log("create Recurrent")
toolbar.registerHandler('createRecurrent', async () => {
if (spaceStore.selectedSpaceId) {
await recurrentsService.createRecurrent(spaceStore.selectedSpaceId, buildCreate())
await recurrentsStore.fetchRecurrents(spaceStore.selectedSpaceId)
router.back()
}
})
}
})
@@ -141,10 +242,9 @@ onMounted(async () => {
<div class="flex flex-col w-full ">
<div class="flex-col w-full">
<InputNumber
v-model="recurrentAmount"
@input="handleInput"
@input=" isAmountError = false"
@paste="handlePaste"
type="text"
inputmode="numeric"
@@ -153,6 +253,7 @@ onMounted(async () => {
class="text-7xl font-bold w-full text-center focus:outline-none !p-0 !m-0"
/>
<span v-if="isAmountError" class="text-sm !text-red-500 font-extralight">Amount couldn't be less then 1</span>
<!-- <span class="absolute right-2 top-1/2 -translate-y-1/2 text-7xl font-bold">₽</span>-->
<label class="!justify-items-center !justify-center !font-extralight text-gray-600 text-center">Amount</label>
@@ -162,7 +263,8 @@ 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" @click="isCategorySelectorOpened = true">
<div class="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">
<span class="!text-3xl ">{{ recurrentCategory.icon }}</span>
@@ -174,12 +276,16 @@ onMounted(async () => {
<i class="pi pi-angle-right !font-extralight"/>
</div>
</div>
<span v-if="isCategoryError" class="text-sm text-red-500 font-extralight">Category should be selected</span>
</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 ">
<input class="font-extralight w-full focus:outline-0" placeholder="Name" v-model="recurrentName"/>
<input class="font-extralight w-full focus:outline-0" placeholder="Name"
@input="recurrentName?.length ==0 ? isNameError = true : isNameError=false" v-model="recurrentName"/>
</div>
<span v-if="isNameError" class="text-sm !text-red-500 font-extralight">Name couldn't be empty.</span>
</div>
<div class="flex flex-col w-full justify-items-start">
<label class="!font-semibold text-gray-600 !pl-2">Recurrent date</label>
@@ -188,11 +294,12 @@ onMounted(async () => {
<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'"
@click="recurrentDate=i">
@click="recurrentDate=i; isDateError=false">
{{ i }}
</div>
</div>
</div>
<span v-if="isDateError" class="text-sm text-red-500 font-extralight">Date couldn't be empty or less than 1 and greater than 31.</span>
<label class="!font-extralight text-gray-600 !pl-2">recurrent every N day of month</label>
</div>

1
src/components/space-list/SpaceList.vue
View File

@@ -56,7 +56,6 @@ onMounted(fetchData);
:options="{ color: '#111', bgColor: '#fff' }"
@onrefresh="
() => {
console.log('refreshed');
}
"
/>

2
src/router/index.ts
View File

@@ -118,7 +118,7 @@ const routes: RouteRecordRaw[] = [
icon: '',
onClickId: 'openSpacePicker',
},
{id: 'createRecurrent', text: '', icon: 'pi pi-save', onClickId: 'createCategory'},
{id: 'createRecurrent', text: '', icon: 'pi pi-save', onClickId: 'createRecurrent'},
],
navStack: 'settings',
}

56
src/services/recurrents-service.ts
View File

@@ -1,14 +1,17 @@
import {User} from "@/models/user";
import {RecurrentOperation} from "@/models/recurrent-operation";
import {
CreateRecurrentOperationDTO,
RecurrentOperation,
UpdateRecurrentOperationDTO
} from "@/models/recurrent-operation";
import {categoriesService} from "@/services/categories-service";
async function fetchRecurrents(spaceId: number): Promise<RecurrentOperation[]> {
let recurrents : RecurrentOperation[] = []
let recurrents: RecurrentOperation[] = []
for (let i = 0; i < 10; i++) {
recurrents.push({
id: i,
category: await categoriesService.fetchCategory(1,1),
category: await categoriesService.fetchCategory(1, 1),
name: `Recurrent ${i}`,
amount: Math.floor(Math.random() * 1000000),
date: Math.floor(Math.random() * 31),
@@ -17,28 +20,41 @@ async function fetchRecurrents(spaceId: number): Promise<RecurrentOperation[]> {
username: `username_${i}`,
firstName: `firstName ${i}`,
} as User,
createdAt: Date.now(),
createdAt: new Date(),
} as RecurrentOperation)
}
return recurrents;
}
async function fetchRecurrent(spaceId: number, categoryId: number): Promise<RecurrentOperation> {
return {
id: 1,
category: await categoriesService.fetchCategory(1,1),
name: `Recurrent ${1}`,
amount: Math.floor(Math.random() * 1000000),
date: Math.floor(Math.random() * 31),
createdBy: {
id: 1,
username: `username_${1}`,
firstName: `firstName ${1}`,
} as User,
createdAt: Date.now(),
} as RecurrentOperation
return {
id: 1,
category: await categoriesService.fetchCategory(1, 1),
name: `Recurrent ${1}`,
amount: Math.floor(Math.random() * 1000000),
date: Math.floor(Math.random() * 31),
createdBy: {
id: 1,
username: `username_${1}`,
firstName: `firstName ${1}`,
} as User,
createdAt: new Date(),
} as RecurrentOperation
}
export const recurrentsService = {
fetchRecurrents, fetchRecurrent
async function createRecurrent(spaceId:number, recurrent: CreateRecurrentOperationDTO): Promise<number> {
return 1
}
async function updateRecurrent(spaceId:number, recurrent: UpdateRecurrentOperationDTO): Promise<number> {
return 1
}
async function deleteRecurrent(spaceId: number,recurrentId: number): Promise<void> {
}
export const recurrentsService = {
fetchRecurrents, fetchRecurrent, createRecurrent, updateRecurrent, deleteRecurrent,
}

29
src/stores/categories-store.ts Normal file
View File

@@ -0,0 +1,29 @@
import { defineStore } from 'pinia'
import { ref } from 'vue'
import { categoriesService } from '@/services/categories-service'
import { Category } from '@/models/category'
export const useCategoriesStore = defineStore('categories', () => {
const categories = ref<Category[]>([])
const isLoading = ref(false)
const fetchCategories = async (spaceId: number) => {
isLoading.value = true
try {
categories.value = await categoriesService.fetchCategories(spaceId)
} finally {
isLoading.value = false
}
}
const addCategory = (category: Category) => {
categories.value.push(category)
}
return {
categories,
isLoading,
fetchCategories,
addCategory
}
})

29
src/stores/recurrent-store.ts Normal file
View File

@@ -0,0 +1,29 @@
import { defineStore } from 'pinia'
import { ref } from 'vue'
import {RecurrentOperation} from "@/models/recurrent-operation";
import {recurrentsService} from "@/services/recurrents-service";
export const useRecurrentsStore = defineStore('recurrents', () => {
const recurrents = ref<RecurrentOperation[]>([])
const isLoading = ref(false)
const fetchRecurrents = async (spaceId: number) => {
isLoading.value = true
try {
recurrents.value = await recurrentsService.fetchRecurrents(spaceId)
} finally {
isLoading.value = false
}
}
const addRecurrent = (recurrent: RecurrentOperation) => {
recurrents.value.push(recurrent)
}
return {
recurrents,
isLoading,
fetchRecurrents,
addRecurrent
}
})

1
vite.config.js
View File

@@ -4,7 +4,6 @@ import { fileURLToPath, URL } from 'node:url'
export default defineConfig(async ({mode}) => {
const env = loadEnv(mode, process.cwd(), '')
console.log('🚀 Running Vite in mode:', mode)
return {
plugins: [