eliaskohout/teilweise
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add list of board for logged in user, allow adding new user to board, minor other changes

Browse Source
This commit is contained in:
Elias Kohout
2026-02-11 21:15:51 +01:00
parent 191960da2d
commit d1793be3e1
11 changed files with 135 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/components/AddSpendingModal.vue
View File

@@ -2,6 +2,7 @@
import IconX from '@/components/icons/IconX.vue'
import IconPlus from '@/components/icons/IconPlusCircle.vue'
import { useBoardStore } from '@/stores/boardStore'
import { Spending } from '@/services/Spending'
import { computed, ref } from 'vue'
import InputField from './InputField.vue'
@@ -31,13 +32,11 @@ const forceValidate = ref(false)
function submit() {
forceValidate.value = true
if (spendingAmountError.value == '' && spendingNameError.value == '') {
store
.getCurrentBoard()
.addSpendingByUserName(
props.userName ?? '',
spendingNameInput.value,
spendingAmount.value * 100,
)
const user = store.getCurrentBoard()?.getUsers().find(u => u.name === props.userName)
if (user) {
const spending = new Spending(spendingNameInput.value, spendingAmount.value * 100)
store.getCurrentBoard()?.addSpending(user, spending)
}
spendingNameInput.value = ''
spendingAmountInput.value = ''
isOpen.value = false

8
frontend/src/components/CreateNewList.vue
View File

@@ -1,11 +1,13 @@
<script setup lang="ts">
import InputField from './InputField.vue'
import { useBoardStore } from '@/stores/boardStore'
import { useUserStore } from '@/stores/userStore'
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
const route = useRouter()
const store = useBoardStore()
const boardStore = useBoardStore()
const userStore = useUserStore()
const boardNameInput = ref('')
const boardNameError = computed(() => {
@@ -17,14 +19,14 @@ const forceValidate = ref(false)
function submit() {
forceValidate.value = true
if (boardNameError.value == '') {
const newBoard = store.createBoard(boardNameInput.value)
const newBoard = boardStore.createBoard(userStore.getLogedInUser()!, boardNameInput.value)
route.push('/boards/' + newBoard.guid)
}
}
</script>
<template>
<form class="bg-base-200 border-base-300 rounded-box w-xs border p-4" @submit.prevent="submit">
<form class="bg-base-100 border border-base-200 rounded-box shadow-md w-xs p-4" @submit.prevent="submit">
<div class="flex flex-col gap-2">
<h3 class="font-bold">Neue Liste Erstellen</h3>

30
frontend/src/services/Board.ts
View File

@@ -4,23 +4,41 @@ import { v4 as uuidv4 } from 'uuid'
export class Board {
name: string
users: Array<User>
users: Set<User>
spendings: Array<Spending>
creationDate: Date
guid: string
constructor(name: string) {
this.name = name
this.users = Array<User>()
this.users = new Set<User>()
this.spendings = new Array<Spending>()
this.creationDate = new Date()
this.guid = uuidv4()
}
addUser(user: User): void {
this.users.push(user)
this.users.add(user)
}
addSpendingByUserName(userName: string, spendingName: string, amountCt: number) {
const user = this.users.filter((u) => u.name === userName)[0]
user?.addSpending(new Spending(spendingName, amountCt))
addSpending(user: User, spending: Spending): void {
spending.setSpender(user)
this.users.add(user)
this.spendings.push(spending)
}
getUsers(): User[] {
return Array.from(this.users)
}
getUserSpendingTotals(): Map<string, number> {
const totals = new Map<string, number>()
for (const spending of this.spendings) {
if (spending.spender) {
const current = totals.get(spending.spender.name) || 0
totals.set(spending.spender.name, current + spending.amountCt)
}
}
return totals
}
}

13
frontend/src/services/User.ts
View File

@@ -1,21 +1,8 @@
import type { Spending } from './Spending'
export class User {
name: string
spendings: Array<Spending>
constructor(name: string) {
this.name = name
this.spendings = Array<Spending>()
}
addSpending(spending: Spending): void {
spending.setSpender(this)
this.spendings.push(spending)
}
getTotalSpending(): number {
return this.spendings.map((w) => w.amountCt).reduce((acc, num) => acc + num, 0)
}
getInitials(): string {

38
frontend/src/stores/boardStore.ts
View File

@@ -2,43 +2,23 @@ import { defineStore } from 'pinia'
import { useRoute } from 'vue-router'
import { Board } from '@/services/Board'
import { User } from '@/services/User'
import { Spending } from '@/services/Spending'
import { useUserStore } from './userStore'
export const useBoardStore = defineStore('boardStore', () => {
const route = useRoute()
const boards = new Map<string, Board>()
let testBoard: Board | undefined
const userStore = useUserStore()
function createBoard(name: string): Board {
function createBoard(owner: User, name: string): Board {
const newBoard = new Board(name)
newBoard.addUser(owner)
boards.set(newBoard.guid, newBoard)
return newBoard
}
function getBoard(guid: string): Board {
const board = boards.get(guid)
if (board != undefined) {
return board
} else {
if (testBoard === undefined) {
testBoard = new Board('Grill and Chill')
const elias = userStore.getUser('Elias') || new User('Elias')
elias.addSpending(new Spending('Burger', 1230))
elias.addSpending(new Spending('Kaffee', 510))
testBoard.addUser(elias)
const max = userStore.getUser('Max') || new User('Max')
max.addSpending(new Spending('Omlett', 1822))
max.addSpending(new Spending('Kaffee', 3073))
testBoard.addUser(max)
return testBoard
}
return testBoard
}
function getBoard(guid: string): Board | undefined {
return boards.get(guid)
}
function getCurrentBoard(): Board {
function getCurrentBoard(): Board | undefined {
if (typeof route.params.boardId === 'string') {
return getBoard(route.params.boardId)
} else {
@@ -46,5 +26,11 @@ export const useBoardStore = defineStore('boardStore', () => {
}
}
return { createBoard, getBoard, getCurrentBoard }
function getBoardsForUser(user: User): Board[] {
return Array.from(boards.values()).filter(board =>
board.getUsers().some(u => u.name === user.name)
)
}
return { createBoard, getBoard, getCurrentBoard, getBoardsForUser }
})

20
frontend/src/stores/userStore.ts
View File

@@ -4,6 +4,7 @@ import { User } from '@/services/User'
export const useUserStore = defineStore('userStore', () => {
const users = ref<Array<User>>([])
const useSampleUsers = ref(true)
function addUser(user: User) {
users.value.push(user)
@@ -14,12 +15,27 @@ export const useUserStore = defineStore('userStore', () => {
}
function getUser(userName: string) {
return users.value.find((user: User) => user.name === userName)
return getAllUsers().find((user: User) => user.name === userName)
}
function getLoggedInUser() {
return getAllUsers().find((user: User) => user.name === "Elias")
}
function getAllUsers() {
if (useSampleUsers.value) {
// Return sample users
return [
new User('Elias'),
new User('Daniel'),
new User('Max'),
new User('Alice Example'),
new User('Bob Demo'),
new User('Charlie Test')
]
}
return users.value
}
return { addUser, removeUser, getUser, getAllUsers }
return { addUser, removeUser, getUser, getAllUsers, useSampleUsers, getLogedInUser: getLoggedInUser }
})

6
frontend/src/views/BoardInfoView.vue
View File

@@ -11,12 +11,12 @@ const board = ref(store.getCurrentBoard())
<template>
<ItemList title="Informationen">
<ItemListElement title="Name" :subtitle="board.name" />
<ItemListElement title="Guid" :subtitle="board.guid" />
<ItemListElement title="Name" :subtitle="board?.name" />
<ItemListElement title="Guid" :subtitle="board?.guid" />
<ItemListElement
title="Erstellt am"
:subtitle="
board.creationDate.toLocaleDateString('de-DE', {
board?.creationDate.toLocaleDateString('de-DE', {
day: 'numeric',
month: '2-digit',
year: 'numeric',

39
frontend/src/views/BoardSettingsView.vue
View File

@@ -1,9 +1,44 @@
<script setup lang="ts">
import ItemList from '@/components/ItemList.vue'
import ItemListElement from '@/components/ItemListElement.vue'
import { useBoardStore } from '@/stores/boardStore'
import { useUserStore } from '@/stores/userStore'
import { computed, ref } from 'vue'
const boardStore = useBoardStore()
const userStore = useUserStore()
const selectedUserName = ref('')
const availableUsers = computed(() => {
const allUsers = userStore.getAllUsers()
const boardUsers = boardStore.getCurrentBoard()?.getUsers()
const boardUserNames = new Set(boardUsers?.map(u => u.name))
return allUsers.filter(u => !boardUserNames.has(u.name))
})
function addUser() {
if (selectedUserName.value) {
const user = userStore.getAllUsers().find(u => u.name === selectedUserName.value)
if (user) {
boardStore.getCurrentBoard()?.addUser(user)
selectedUserName.value = '' // reset
}
}
}
</script>
<template>
<ItemList title="Einstellungen"> </ItemList>
<ItemList title="Einstellungen">
<ItemListElement title="Benutzer hinzufügen">
<div class="flex gap-2">
<select v-model="selectedUserName" class="select select-bordered">
<option value="">Benutzer auswählen</option>
<option v-for="user in availableUsers" :key="user.name" :value="user.name">
{{ user.name }}
</option>
</select>
<button class="btn btn-primary" @click="addUser" :disabled="!selectedUserName">Hinzufügen</button>
</div>
</ItemListElement>
</ItemList>
</template>

2
frontend/src/views/BoardSpendingsView.vue
View File

@@ -6,7 +6,7 @@ import { useBoardStore } from '@/stores/boardStore'
import { ref } from 'vue'
const store = useBoardStore()
const spendings = ref(store.getCurrentBoard().users.flatMap((u) => u.spendings))
const spendings = ref(store.getCurrentBoard()?.spendings)
</script>
<template>

5
frontend/src/views/BoardUsersView.vue
View File

@@ -7,7 +7,8 @@ import { useBoardStore } from '@/stores/boardStore'
import { ref } from 'vue'
const store = useBoardStore()
const users = ref(store.getCurrentBoard().users)
const users = ref(store.getCurrentBoard()?.getUsers())
const totals = ref(store.getCurrentBoard()?.getUserSpendingTotals())
</script>
<template>
@@ -17,7 +18,7 @@ const users = ref(store.getCurrentBoard().users)
:key="user.name"
:icon="user.getInitials()"
:title="user.name"
:subtitle="(user.getTotalSpending() / 100).toFixed(2) + '€'"
:subtitle="((totals?.get(user.name) || 0) / 100).toFixed(2) + '€'"
subtitle-class="text-green-700"
>
<AddSpendingModal :user-name="user.name" />

26
frontend/src/views/HomeView.vue
View File

@@ -1,9 +1,33 @@
<script setup lang="ts">
import CreateNewList from '../components/CreateNewList.vue'
import ItemList from '@/components/ItemList.vue'
import ItemListElement from '@/components/ItemListElement.vue'
import { useUserStore } from '@/stores/userStore'
import { useBoardStore } from '@/stores/boardStore'
import { computed } from 'vue'
const userStore = useUserStore()
const boardStore = useBoardStore()
const loggedInUser = computed(() => userStore.getLogedInUser())
const userBoards = computed(() => {
const user = loggedInUser.value
return user ? boardStore.getBoardsForUser(user) : []
})
</script>
<template>
<div class="grid h-full place-content-center">
<div class="grid h-full justify-center pt-4">
<div class="flex flex-col gap-4">
<ItemList v-if="userBoards.length > 0" title="Meine Listen">
<router-link v-for="board in userBoards" :key="board.guid" :to="'/boards/' + board.guid">
<ItemListElement
:title="board.name"
:subtitle="board.getUsers().length + ' Mitglieder'"
/>
</router-link>
</ItemList>
<CreateNewList></CreateNewList>
</div>
</div>
</template>