From 86abfe153ae3b7adca44219a7099029d1ea3268e Mon Sep 17 00:00:00 2001
From: Baer <jeobeardy@proton.me>
Date: Wed, 21 Aug 2024 18:58:57 +0200
Subject: [PATCH] Added Board models; WIP CreatePage implementation

---
 .../src/components/blocks/BoardView.vue       | 26 +++++++++++++++
 .../src/components/blocks/CreatePanel.vue     | 23 +++++++++++++
 .../src/components/pages/CreatePage.vue       | 33 ++++++++++---------
 src/main/webapp/src/models/board/Answer.ts    | 10 ++++++
 src/main/webapp/src/models/board/Board.ts     | 11 +++++++
 .../webapp/src/models/board/BoardEntry.ts     | 13 ++++++++
 src/main/webapp/src/models/board/Category.ts  | 12 +++++++
 src/main/webapp/src/models/board/Question.ts  | 12 +++++++
 .../webapp/src/models/board/QuestionType.ts   |  8 +++++
 src/main/webapp/src/models/user/User.ts       |  1 +
 src/main/webapp/src/stores/UserStore.ts       | 26 +++++++--------
 11 files changed, 145 insertions(+), 30 deletions(-)
 create mode 100644 src/main/webapp/src/components/blocks/CreatePanel.vue
 create mode 100644 src/main/webapp/src/models/board/Answer.ts
 create mode 100644 src/main/webapp/src/models/board/Board.ts
 create mode 100644 src/main/webapp/src/models/board/BoardEntry.ts
 create mode 100644 src/main/webapp/src/models/board/Category.ts
 create mode 100644 src/main/webapp/src/models/board/Question.ts
 create mode 100644 src/main/webapp/src/models/board/QuestionType.ts

diff --git a/src/main/webapp/src/components/blocks/BoardView.vue b/src/main/webapp/src/components/blocks/BoardView.vue
index 75846e7..d70c227 100644
--- a/src/main/webapp/src/components/blocks/BoardView.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/main/webapp/src/components/blocks/CreatePanel.vue b/src/main/webapp/src/components/blocks/CreatePanel.vue
new file mode 100644
index 0000000..9fcf0df
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/main/webapp/src/components/pages/CreatePage.vue b/src/main/webapp/src/components/pages/CreatePage.vue
index bcf4e02..a7ccb6b 100644
--- a/src/main/webapp/src/components/pages/CreatePage.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/main/webapp/src/models/board/Answer.ts b/src/main/webapp/src/models/board/Answer.ts
new file mode 100644
index 0000000..cf8abe9
--- /dev/null
+++ b/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,
+  ){}
+}
\ No newline at end of file
diff --git a/src/main/webapp/src/models/board/Board.ts b/src/main/webapp/src/models/board/Board.ts
new file mode 100644
index 0000000..0793ed6
--- /dev/null
+++ b/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,
+  ){}
+}
\ No newline at end of file
diff --git a/src/main/webapp/src/models/board/BoardEntry.ts b/src/main/webapp/src/models/board/BoardEntry.ts
new file mode 100644
index 0000000..dd796a8
--- /dev/null
+++ b/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,
+  ){}
+}
\ No newline at end of file
diff --git a/src/main/webapp/src/models/board/Category.ts b/src/main/webapp/src/models/board/Category.ts
new file mode 100644
index 0000000..67538f7
--- /dev/null
+++ b/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,
+  ){}
+}
\ No newline at end of file
diff --git a/src/main/webapp/src/models/board/Question.ts b/src/main/webapp/src/models/board/Question.ts
new file mode 100644
index 0000000..7b7bad3
--- /dev/null
+++ b/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,
+  ) {}
+}
\ No newline at end of file
diff --git a/src/main/webapp/src/models/board/QuestionType.ts b/src/main/webapp/src/models/board/QuestionType.ts
new file mode 100644
index 0000000..89747e4
--- /dev/null
+++ b/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,
+  ){}
+}
\ No newline at end of file
diff --git a/src/main/webapp/src/models/user/User.ts b/src/main/webapp/src/models/user/User.ts
index 630cb53..e2fd23a 100644
--- a/src/main/webapp/src/models/user/User.ts
+++ b/src/main/webapp/src/models/user/User.ts
@@ -1,4 +1,5 @@
 export type User = {
   username: string,
   profilePictureFilename: string | undefined,
+  id: number | undefined,
 }
\ No newline at end of file
diff --git a/src/main/webapp/src/stores/UserStore.ts b/src/main/webapp/src/stores/UserStore.ts
index dd06f01..05c148b 100644
--- a/src/main/webapp/src/stores/UserStore.ts
+++ b/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,