Added Board models; WIP CreatePage implementation

src/main/webapp/src/components/blocks/BoardView.vue

@@ -1,12 +1,38 @@
 <script setup lang="ts">
+import type { Board } from '@/models/board/Board';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
 
+const props = defineProps<{
+  board: Board,
+}>();
+
 </script>
 
 <template>
   <div>
+    <div class="row">
+      <div class="col">
+        {{ board.name }}
+      </div>
+    </div>
+    <div class="row">
+      <template v-for="category in props.board.categories" :key="category.name">
+        <div class="col">
+          <div class="d-flex">
+            <div>
+              {{ category.name }}
+            </div>
+            <template v-for="boardEntry in category.boardEntries" :key="boardEntry.name">
+              <div>
+                {{ boardEntry.name }}
+              </div>
+            </template>
+          </div>
+        </div>
+      </template>
+    </div>
     Board View
   </div>
 </template>

src/main/webapp/src/components/blocks/CreatePanel.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { Board } from '@/models/board/Board';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const board = defineModel<Board>( { required: true } );
+
+</script>
+
+<template>
+  <div>
+    Create Panel
+    <div class="row">
+      <div class="col">
+        <div class="form-floating mb-3">
+          <input type="text" id="board-name" class="form-control" v-model="board.name" :placeholder="t('board.name')">
+          <label for="board-name">{{ t( 'board.name' ) }}</label>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

src/main/webapp/src/components/pages/CreatePage.vue

@@ -1,36 +1,37 @@
 <script setup lang="ts">
+import { computed, inject, ref, type Ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import BoardView from '../blocks/BoardView.vue';
-import { computed, inject, onMounted, type Ref } from 'vue';
+
 import { navbarKey } from '@/services/UtilService';
-import type NavBar from '../blocks/NavBar.vue';
+import { Board } from '@/models/board/Board';
+import type NavBar from '@/components/blocks/NavBar.vue';
+
+import BoardView from '@/components/blocks/BoardView.vue';
+import CreatePanel from '@/components/blocks/CreatePanel.vue';
 
 const { t } = useI18n();
 
 const navbar = inject<Ref<InstanceType<typeof NavBar> | null>>(navbarKey);
-onMounted( () => {
-  console.log(navbar);
-  console.log(navbar?.value?.navElement);
-})
-
-function test() {
-  console.log(navbar);
-  console.log(navbar?.value?.navElement);
-}
-
 const navbarHeight = computed( () => {
   return navbar?.value?.navElement?.clientHeight;
 });
-
 const restHeight = computed( () => {
   return { height: `calc(100vh - ${navbarHeight.value}px)`};
 })
 
+const board = ref<Board>(new Board("New Board"));
+
 </script>
 
 <template>
   <div :style="restHeight">
-    <BoardView />
-    Create Page
+    <div class="row h-100">
+      <div class="col-9 px-0 bg-primary">
+				<BoardView :board="(board as Board)" />
+      </div>
+      <div class="col-3 px-0 bg-secondary">
+        <CreatePanel v-model="(board as Board)" />
+      </div>
+    </div>
   </div>
 </template>

src/main/webapp/src/models/board/Answer.ts

@@ -0,0 +1,10 @@
+import type { BoardEntry } from './BoardEntry';
+
+export class Answer{
+  constructor(
+    public text: string,
+    public image: URL | undefined,
+    public boardEntry: BoardEntry,
+    id: number | undefined = undefined,
+  ){}
+}

src/main/webapp/src/models/board/Board.ts

@@ -0,0 +1,11 @@
+import type { User } from '../user/User';
+import type { Category } from './Category';
+
+export class Board{
+  constructor(
+    public name: string,
+    public categories: Array<Category> = [],
+    public owner: User | undefined = undefined,
+    private id: number | undefined = undefined,
+  ){}
+}

src/main/webapp/src/models/board/BoardEntry.ts

@@ -0,0 +1,13 @@
+import type { Answer } from './Answer';
+import type { Category } from './Category';
+import type { Question } from './Question';
+
+export class BoardEntry{
+  constructor(
+    public name: string,
+    public category: Category,
+    public answer: Answer,
+    public questions: Array<Question>,
+    id: number | undefined = undefined,
+  ){}
+}

src/main/webapp/src/models/board/Category.ts

@@ -0,0 +1,12 @@
+import type { Board } from './Board';
+import type { BoardEntry } from './BoardEntry';
+
+export class Category{
+  constructor(
+    public name: string,
+    public description: string,
+    public board: Board,
+    public boardEntries: Array<BoardEntry> = [],
+    id: number | undefined,
+  ){}
+}

src/main/webapp/src/models/board/Question.ts

@@ -0,0 +1,12 @@
+import type { BoardEntry } from './BoardEntry';
+import type { QuestionType } from './QuestionType';
+
+export class Question{
+  constructor(
+    public text: string,
+    public questionType: QuestionType,
+    public boardEntry: BoardEntry,
+    public image: URL | undefined,
+    id: number | undefined = undefined,
+  ) {}
+}

src/main/webapp/src/models/board/QuestionType.ts

@@ -0,0 +1,8 @@
+export class QuestionType {
+  constructor(
+    public title: string,
+    public description: string,
+    public active: boolean,
+    id: number | undefined = undefined,
+  ){}
+}

src/main/webapp/src/models/user/User.ts

@@ -1,4 +1,5 @@
 export type User = {
   username: string,
   profilePictureFilename: string | undefined,
+  id: number | undefined,
 }

src/main/webapp/src/stores/UserStore.ts

@@ -5,25 +5,22 @@ import { authService } from '@/services/AuthService';
 import { AxiosError } from 'axios';
 
 export const useUserStore = defineStore( 'user', () => {
-  const username = ref( '' );
-  const profilePicture = ref<null | string>( null );
-  const loggedIn = ref( false );
+  const loggedIn = computed( () => {
+    return user.value !== null;
+  })
+  const user = ref<User | null>(null);
 
-  const getUserOutput = computed( () => `${username.value}` );
+  const getUserOutput = computed( () => `${user.value?.username}` );
   const pfpSource = computed( () => {
-    return profilePicture.value ?? "/src/assets/images/PFP_BearHead.svg"
+    return user.value?.profilePictureFilename ?? "/src/assets/images/PFP_BearHead.svg"
   })
 
-  function loginUser( user: User ) {
-    username.value = user.username;
-    profilePicture.value = user.profilePictureFilename ?? null;
-    loggedIn.value = true;
+  function loginUser( userParam: User ) {
+    user.value = userParam;
   }
 
   function logoutUser() {
-    username.value = '';
-    profilePicture.value = null;
-    loggedIn.value = false;
+    user.value = null;
   }
 
   function getCheckUser(): Promise<User> {
@@ -43,8 +40,9 @@ export const useUserStore = defineStore( 'user', () => {
 
   return {
     //Refs
-    username,
-    profilePicture,
+    // username,
+    // profilePicture,
+    user,
     loggedIn,
     userCheckPromise,