From efd8ac2ab9f2011df9e8b4b776b600f8cc644a02 Mon Sep 17 00:00:00 2001
From: Baer <jeobeardy@proton.me>
Date: Sat, 24 Aug 2024 16:26:06 +0200
Subject: [PATCH] WIP CreatePage implementation

---
 src/main/webapp/.example_env                  |   2 +
 src/main/webapp/package-lock.json             | 114 ++++++++------
 src/main/webapp/package.json                  |   1 +
 src/main/webapp/src/assets/css/main.css       |   4 +
 .../src/assets/scss/customized_bootstrap.scss |  30 ++++
 .../src/components/blocks/BoardView.vue       |  51 +++++--
 .../src/components/blocks/CreatePanel.vue     |  55 +++++--
 .../components/blocks/EditBoardEntryPanel.vue | 135 +++++++++++++++++
 .../src/components/blocks/EditBoardPanel.vue  | 135 +++++++++++++++++
 .../components/blocks/EditCategoryPanel.vue   | 142 ++++++++++++++++++
 .../src/components/pages/CreatePage.vue       |  27 +++-
 src/main/webapp/src/locales/en.json           |  10 ++
 src/main/webapp/src/main.ts                   |   6 +-
 src/main/webapp/src/models/board/Answer.ts    |   4 +-
 src/main/webapp/src/models/board/Category.ts  |   2 +-
 15 files changed, 639 insertions(+), 79 deletions(-)
 create mode 100644 src/main/webapp/.example_env
 create mode 100644 src/main/webapp/src/components/blocks/EditBoardEntryPanel.vue
 create mode 100644 src/main/webapp/src/components/blocks/EditBoardPanel.vue
 create mode 100644 src/main/webapp/src/components/blocks/EditCategoryPanel.vue

diff --git a/src/main/webapp/.example_env b/src/main/webapp/.example_env
new file mode 100644
index 0000000..36ed11e
--- /dev/null
+++ b/src/main/webapp/.example_env
@@ -0,0 +1,2 @@
+VITE_API_BASE_URL=/api
+#VITE_API_BASE_URL=http://localhost:8008/api
\ No newline at end of file
diff --git a/src/main/webapp/package-lock.json b/src/main/webapp/package-lock.json
index 64c4bdd..8558be2 100644
--- a/src/main/webapp/package-lock.json
+++ b/src/main/webapp/package-lock.json
@@ -18,6 +18,7 @@
         "bootstrap": "^5.3.3",
         "pinia": "^2.1.7",
         "vue": "^3.4.21",
+        "vue-draggable-plus": "^0.5.3",
         "vue-i18n": "^9.13.1",
         "vue-router": "^4.3.0"
       },
@@ -1847,6 +1848,12 @@
         "undici-types": "~5.26.4"
       }
     },
+    "node_modules/@types/sortablejs": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.15.8.tgz",
+      "integrity": "sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==",
+      "license": "MIT"
+    },
     "node_modules/@types/tough-cookie": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
@@ -1855,17 +1862,17 @@
       "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.13.0.tgz",
-      "integrity": "sha512-FX1X6AF0w8MdVFLSdqwqN/me2hyhuQg4ykN6ZpVhh1ij/80pTvDKclX1sZB9iqex8SjQfVhwMKs3JtnnMLzG9w==",
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.18.0.tgz",
+      "integrity": "sha512-94EQTWZ40mzBc42ATNIBimBEDltSJ9RQHCC8vc/PDbxi4k8dVwUAv4o98dk50M1zB+JGFxp43FP7f8+FP8R6Sw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "7.13.0",
-        "@typescript-eslint/type-utils": "7.13.0",
-        "@typescript-eslint/utils": "7.13.0",
-        "@typescript-eslint/visitor-keys": "7.13.0",
+        "@typescript-eslint/scope-manager": "7.18.0",
+        "@typescript-eslint/type-utils": "7.18.0",
+        "@typescript-eslint/utils": "7.18.0",
+        "@typescript-eslint/visitor-keys": "7.18.0",
         "graphemer": "^1.4.0",
         "ignore": "^5.3.1",
         "natural-compare": "^1.4.0",
@@ -1889,16 +1896,16 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.13.0.tgz",
-      "integrity": "sha512-EjMfl69KOS9awXXe83iRN7oIEXy9yYdqWfqdrFAYAAr6syP8eLEFI7ZE4939antx2mNgPRW/o1ybm2SFYkbTVA==",
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.18.0.tgz",
+      "integrity": "sha512-4Z+L8I2OqhZV8qA132M4wNL30ypZGYOQVBfMgxDH/K5UX0PNqTu1c6za9ST5r9+tavvHiTWmBnKzpCJ/GlVFtg==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "7.13.0",
-        "@typescript-eslint/types": "7.13.0",
-        "@typescript-eslint/typescript-estree": "7.13.0",
-        "@typescript-eslint/visitor-keys": "7.13.0",
+        "@typescript-eslint/scope-manager": "7.18.0",
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/typescript-estree": "7.18.0",
+        "@typescript-eslint/visitor-keys": "7.18.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -1918,14 +1925,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.13.0.tgz",
-      "integrity": "sha512-ZrMCe1R6a01T94ilV13egvcnvVJ1pxShkE0+NDjDzH4nvG1wXpwsVI5bZCvE7AEDH1mXEx5tJSVR68bLgG7Dng==",
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.18.0.tgz",
+      "integrity": "sha512-jjhdIE/FPF2B7Z1uzc6i3oWKbGcHb87Qw7AWj6jmEqNOfDFbJWtjt/XfwCpvNkpGWlcJaog5vTR+VV8+w9JflA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "7.13.0",
-        "@typescript-eslint/visitor-keys": "7.13.0"
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/visitor-keys": "7.18.0"
       },
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
@@ -1936,14 +1943,14 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.13.0.tgz",
-      "integrity": "sha512-xMEtMzxq9eRkZy48XuxlBFzpVMDurUAfDu5Rz16GouAtXm0TaAoTFzqWUFPPuQYXI/CDaH/Bgx/fk/84t/Bc9A==",
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.18.0.tgz",
+      "integrity": "sha512-XL0FJXuCLaDuX2sYqZUUSOJ2sG5/i1AAze+axqmLnSkNEVMVYLF+cbwlB2w8D1tinFuSikHmFta+P+HOofrLeA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "7.13.0",
-        "@typescript-eslint/utils": "7.13.0",
+        "@typescript-eslint/typescript-estree": "7.18.0",
+        "@typescript-eslint/utils": "7.18.0",
         "debug": "^4.3.4",
         "ts-api-utils": "^1.3.0"
       },
@@ -1964,9 +1971,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.13.0.tgz",
-      "integrity": "sha512-QWuwm9wcGMAuTsxP+qz6LBBd3Uq8I5Nv8xb0mk54jmNoCyDspnMvVsOxI6IsMmway5d1S9Su2+sCKv1st2l6eA==",
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.18.0.tgz",
+      "integrity": "sha512-iZqi+Ds1y4EDYUtlOOC+aUmxnE9xS/yCigkjA7XpTKV6nCBd3Hp/PRGGmdwnfkV2ThMyYldP1wRpm/id99spTQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1978,14 +1985,14 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.13.0.tgz",
-      "integrity": "sha512-cAvBvUoobaoIcoqox1YatXOnSl3gx92rCZoMRPzMNisDiM12siGilSM4+dJAekuuHTibI2hVC2fYK79iSFvWjw==",
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.18.0.tgz",
+      "integrity": "sha512-aP1v/BSPnnyhMHts8cf1qQ6Q1IFwwRvAQGRvBFkWlo3/lH29OXA3Pts+c10nxRxIBrDnoMqzhgdwVe5f2D6OzA==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
-        "@typescript-eslint/types": "7.13.0",
-        "@typescript-eslint/visitor-keys": "7.13.0",
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/visitor-keys": "7.18.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -2007,16 +2014,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.13.0.tgz",
-      "integrity": "sha512-jceD8RgdKORVnB4Y6BqasfIkFhl4pajB1wVxrF4akxD2QPM8GNYjgGwEzYS+437ewlqqrg7Dw+6dhdpjMpeBFQ==",
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.18.0.tgz",
+      "integrity": "sha512-kK0/rNa2j74XuHVcoCZxdFBMF+aq/vH83CXAOHieC+2Gis4mF8jJXT5eAfyD3K0sAxtPuwxaIOIOvhwzVDt/kw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "7.13.0",
-        "@typescript-eslint/types": "7.13.0",
-        "@typescript-eslint/typescript-estree": "7.13.0"
+        "@typescript-eslint/scope-manager": "7.18.0",
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/typescript-estree": "7.18.0"
       },
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
@@ -2030,13 +2037,13 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.13.0.tgz",
-      "integrity": "sha512-nxn+dozQx+MK61nn/JP+M4eCkHDSxSLDpgE3WcQo0+fkjEolnaB5jswvIKC4K56By8MMgIho7f1PVxERHEo8rw==",
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.18.0.tgz",
+      "integrity": "sha512-cDF0/Gf81QpY3xYyJKDV14Zwdmid5+uuENhjH2EqFaF0ni+yAyq/LzMaIJdhNJXZI7uLzwIlA+V7oWoyn6Curg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "7.13.0",
+        "@typescript-eslint/types": "7.18.0",
         "eslint-visitor-keys": "^3.4.3"
       },
       "engines": {
@@ -2753,9 +2760,9 @@
       "license": "MIT"
     },
     "node_modules/axios": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.3.tgz",
-      "integrity": "sha512-Ar7ND9pU99eJ9GpoGQKhKf58GpUOgnzuaB7ueNQ5BMi0p+LZ5oaEnfF999fAArcTIBwXTCHAmGcHOZJaWPq9Nw==",
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.5.tgz",
+      "integrity": "sha512-fZu86yCo+svH3uqJ/yTdQ0QHpQu5oL+/QE+QPSv6BZSkDAoky9vytxp7u5qk83OJFS3kEBcesWni9WTZAv3tSw==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
@@ -6445,6 +6452,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vue-draggable-plus": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/vue-draggable-plus/-/vue-draggable-plus-0.5.3.tgz",
+      "integrity": "sha512-dwKDzZ8io3y7k2iuIwVwiGrdiq5C0S7Et7nt5Gz5KjpBS9MtZGFP+L4FJPWGSLYleOT8HmVuCXTZYjGet7wC0g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/sortablejs": "^1.15.8"
+      },
+      "peerDependencies": {
+        "@types/sortablejs": "^1.15.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "9.4.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz",
diff --git a/src/main/webapp/package.json b/src/main/webapp/package.json
index 3cefde6..c0f78d4 100644
--- a/src/main/webapp/package.json
+++ b/src/main/webapp/package.json
@@ -23,6 +23,7 @@
     "bootstrap": "^5.3.3",
     "pinia": "^2.1.7",
     "vue": "^3.4.21",
+    "vue-draggable-plus": "^0.5.3",
     "vue-i18n": "^9.13.1",
     "vue-router": "^4.3.0"
   },
diff --git a/src/main/webapp/src/assets/css/main.css b/src/main/webapp/src/assets/css/main.css
index f004288..dbed91f 100644
--- a/src/main/webapp/src/assets/css/main.css
+++ b/src/main/webapp/src/assets/css/main.css
@@ -4,4 +4,8 @@
 
 .pointer {
   cursor: pointer;
+}
+
+.cursor-move{
+  cursor: move;
 }
\ No newline at end of file
diff --git a/src/main/webapp/src/assets/scss/customized_bootstrap.scss b/src/main/webapp/src/assets/scss/customized_bootstrap.scss
index 4c2d340..27eb08b 100644
--- a/src/main/webapp/src/assets/scss/customized_bootstrap.scss
+++ b/src/main/webapp/src/assets/scss/customized_bootstrap.scss
@@ -89,6 +89,36 @@ $utilities: map-merge(
         ),
       ),
     ),
+    "rounded-bottom-end": (
+      property: border-bottom-right-radius,
+      class: rounded-bottom-end,
+      values: (
+        null: var(--#{$prefix}border-radius),
+        0: 0,
+        1: var(--#{$prefix}border-radius-sm),
+        2: var(--#{$prefix}border-radius),
+        3: var(--#{$prefix}border-radius-lg),
+        4: var(--#{$prefix}border-radius-xl),
+        5: var(--#{$prefix}border-radius-xxl),
+        circle: 50%,
+        pill: var(--#{$prefix}border-radius-pill)
+      )
+    ),
+    "rounded-top-end": (
+      property: border-top-right-radius,
+      class: rounded-top-end,
+      values: (
+        null: var(--#{$prefix}border-radius),
+        0: 0,
+        1: var(--#{$prefix}border-radius-sm),
+        2: var(--#{$prefix}border-radius),
+        3: var(--#{$prefix}border-radius-lg),
+        4: var(--#{$prefix}border-radius-xl),
+        5: var(--#{$prefix}border-radius-xxl),
+        circle: 50%,
+        pill: var(--#{$prefix}border-radius-pill)
+      )
+    ),
   ),
 );
 
diff --git a/src/main/webapp/src/components/blocks/BoardView.vue b/src/main/webapp/src/components/blocks/BoardView.vue
index d70c227..1dbb8aa 100644
--- a/src/main/webapp/src/components/blocks/BoardView.vue
+++ b/src/main/webapp/src/components/blocks/BoardView.vue
@@ -8,31 +8,54 @@ const props = defineProps<{
   board: Board,
 }>();
 
+const emit = defineEmits<{
+  categorySelected: [index: number],
+  boardEntrySelected: [cIndex: number, bEIndex: number],
+}>();
+
+function categorySelected(cIndex: number){
+  emit("categorySelected", cIndex);
+}
+function boardEntrySelected(cIndex: number, bEIndex: number){
+  emit("boardEntrySelected", cIndex, bEIndex);
+}
+
 </script>
 
 <template>
-  <div>
+  <div class="mx-3 h-100">
     <div class="row">
-      <div class="col">
-        {{ board.name }}
+      <div class="col text-center p-3">
+        <h2>
+          {{ board.name }}
+        </h2>
       </div>
     </div>
-    <div class="row">
-      <template v-for="category in props.board.categories" :key="category.name">
+    <div class="row h-100">
+      <template v-for="(category, categoryIndex) 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 class="d-flex flex-column g-1 h-100">
+            <button class="flex-fill board-card-max-height card bg-primary w-100" @click="categorySelected(categoryIndex)">
+              <div class="card-body d-flex align-items-center justify-content-center">
+                {{ category.name }}
               </div>
+            </button>
+            <template v-for=" (boardEntry, boardEntryIndex) in category.boardEntries " :key="boardEntry.name">
+              <button class="flex-fill board-card-max-height card bg-body-secondary w-100" @click="boardEntrySelected(categoryIndex, boardEntryIndex)">
+                <div class="card-body d-flex align-items-center justify-content-center">
+                  {{ boardEntry.name }}
+                </div>
+              </button>
             </template>
           </div>
         </div>
       </template>
     </div>
-    Board View
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<style lang="css" scoped>
+.board-card-max-height{
+  max-height: 20%;
+}
+</style>
\ 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
index 9fcf0df..18a4eb7 100644
--- a/src/main/webapp/src/components/blocks/CreatePanel.vue
+++ b/src/main/webapp/src/components/blocks/CreatePanel.vue
@@ -1,23 +1,54 @@
 <script setup lang="ts">
 import type { Board } from '@/models/board/Board';
-import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
+import EditCategoryPanel from '@/components/blocks/EditCategoryPanel.vue';
+import EditBoardPanel from '@/components/blocks/EditBoardPanel.vue';
+import EditBoardEntryPanel from '@/components/blocks/EditBoardEntryPanel.vue';
+
+const props = defineProps<{
+  categoryIndex: number | null,
+  boardEntryIndex: number | null,
+}>()
+
+const emit = defineEmits<{
+  editBoard: [],
+  editCategory: [cIndex: number],
+  editBoardEntry: [cIndex: number, bEIndex: number],
+}>()
 
 const board = defineModel<Board>( { required: true } );
 
+function editBoard(){
+  emit("editBoard");
+}
+function editCategory(cIndex: number){
+  emit("editCategory", cIndex);
+}
+function editBoardEntry(cIndex: number, bEIndex: number){
+  emit("editBoardEntry", cIndex, bEIndex);
+}
 </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 class="d-flex flex-column h-100">
+    <div class="flex-grow-1 overflow-y-auto p-2">
+      <EditBoardPanel v-model="board" v-if="props.categoryIndex === null && props.boardEntryIndex === null" @editCategory="editCategory" />
+      <EditCategoryPanel v-model="board" :categoryIndex="props.categoryIndex" v-else-if="props.categoryIndex !== null && props.boardEntryIndex === null" @editBoard="editBoard" @editBoardEntry="editBoardEntry"/>
+      <EditBoardEntryPanel v-model="board" :categoryIndex="props.categoryIndex" :boardEntryIndex="props.boardEntryIndex" v-else-if="props.categoryIndex !== null && props.boardEntryIndex !== null" @editCategory="editCategory" @editBoard="editBoard" />
+    </div>
+    <div class="border-top border-2 border-primary p-2 d-flex justify-content-evenly align-items-center g-3">
+      <button class="btn btn-primary">
+        Save
+      </button>
+      <button class="btn btn-danger">
+        Abort and Exit
+      </button>
     </div>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<style lang="css" scoped>
+.draggable-ghost {
+  opacity: .75;
+}
+</style>
\ No newline at end of file
diff --git a/src/main/webapp/src/components/blocks/EditBoardEntryPanel.vue b/src/main/webapp/src/components/blocks/EditBoardEntryPanel.vue
new file mode 100644
index 0000000..031fec0
--- /dev/null
+++ b/src/main/webapp/src/components/blocks/EditBoardEntryPanel.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import type { Board } from '@/models/board/Board';
+import { Category } from '@/models/board/Category';
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { VueDraggable } from 'vue-draggable-plus';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+const { t } = useI18n();
+
+const emit = defineEmits<{
+  categorySelected: [index: number],
+}>()
+
+const board = defineModel<Board>( { required: true } );
+
+const newCategoryName = ref( '' );
+function addCategory() {
+  if( board.value.categories.length >= 12 ) {
+    return;
+  }
+  const newCategory = new Category( newCategoryName.value, '', board.value );
+  board.value.categories.push( newCategory );
+}
+
+function deleteCategory( index: number ) {
+  board.value.categories.splice( index, 1 );
+}
+
+function moveCategoryUp( index: number ) {
+  if( index === 0 || board.value.categories.length <= 1 ) {
+    return;
+  }
+  const tmp = board.value.categories[index];
+  board.value.categories[index] = board.value.categories[index - 1];
+  board.value.categories[index - 1] = tmp;
+}
+
+function moveCategoryDown( index: number ) {
+  if( index === board.value.categories.length - 1 || board.value.categories.length <= 1 ) {
+    return;
+  }
+  const tmp = board.value.categories[index];
+  board.value.categories[index] = board.value.categories[index + 1];
+  board.value.categories[index + 1] = tmp;
+}
+
+function openCategory( index: number ) {
+  emit("categorySelected", index);
+}
+</script>
+
+<template>
+  <div class="d-flex flex-column h-100">
+    <div class="flex-grow-1 overflow-y-auto p-2">
+      <div class="row me-0">
+        <div class="col">
+          <h2 class="border-bottom border-3 border-primary">{{ t( "board.infos" ) }}</h2>
+          <label for="board-name">{{ t( 'board.name' ) }}</label>
+          <input type="text" id="board-name" class="form-control" v-model="board.name" :placeholder="t( 'board.name' )">
+        </div>
+      </div>
+      <div class="row me-0 mt-3">
+        <div class="col">
+          <h4>{{ t( "board.category.label", 2 ) }}</h4>
+          <template v-if=" board.categories.length === 0 ">
+            {{ t( "board.category.label", 0 ) }}
+          </template>
+          <template v-else>
+            <VueDraggable v-model="board.categories" item-key="id" :animation="150" ghost-class="draggable-ghost"
+              tag="ul" class="list-group" handle=".drag-handle">
+              <template v-for="(  category, categoryIndex) of board.categories" :key="category.id">
+                <li class="list-group-item bg-body-secondary p-0">
+                  <div class="d-flex justify-content-between w-100">
+                    <div class="flex-grow-1 d-flex align-items-center g-3 justify-content-start">
+                      <div
+                        class="drag-handle h-100 d-flex justify-content-center align-items-center cursor-move border-end border-1 bg-primary bg-opacity-10">
+                        <FontAwesomeIcon :icon="['fas', 'grip-lines']" class="px-2" />
+                      </div>
+                      <input type="text" :id="`category-name-${categoryIndex}`" v-model="category.name"
+                        class="form-control rounded-0 h-100">
+                    </div>
+                    <div class="d-flex">
+                      <button class="btn btn-primary rounded-0" @click="openCategory( categoryIndex )">
+                        <FontAwesomeIcon :icon="['fas', 'edit']" size="sm" />
+                      </button>
+                      <div class="d-flex flex-column justify-content-center align-items-center h-100" role="group"
+                        aria-label="Vertical button group">
+                        <button class="btn btn-primary rounded-0 py-0 lh-sm" @click="moveCategoryUp( categoryIndex )"
+                          :disabled="categoryIndex === 0">
+                          <FontAwesomeIcon :icon="['fas', 'angle-up']" size="xs" />
+                        </button>
+                        <button class="btn btn-primary rounded-0 py-0 lh-sm" @click="moveCategoryDown( categoryIndex )"
+                          :disabled="categoryIndex === board.categories.length - 1">
+                          <FontAwesomeIcon :icon="['fas', 'angle-down']" size="xs" />
+                        </button>
+                      </div>
+                      <button class="btn btn-danger rounded-start-0 rounded-0"
+                        :class="[{ 'rounded-bottom-end': categoryIndex === board.categories.length - 1 }, { 'rounded-top-end': categoryIndex === 0 }]"
+                        @click="deleteCategory( categoryIndex )">
+                        <FontAwesomeIcon :icon="['fas', 'trash']" size="sm" />
+                      </button>
+                    </div>
+                  </div>
+                </li>
+              </template>
+            </VueDraggable>
+          </template>
+          <label class="mt-2" for="new-category-name">{{ t( "board.category.add" ) }}</label>
+          <div class="input-group mb-3">
+            <input type="text" id="new-category-name" class="form-control" v-model="newCategoryName"
+              :placeholder="t( 'board.category.name' )" @keyup.enter="addCategory">
+            <button class="btn btn-primary" @click="addCategory">
+              <FontAwesomeIcon :icon="['fas', 'plus']" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="border-top border-2 border-primary p-2 d-flex justify-content-evenly align-items-center g-3">
+      <button class="btn btn-primary">
+        Save
+      </button>
+      <button class="btn btn-danger">
+        Abort and Exit
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="css" scoped>
+.draggable-ghost {
+  opacity: .75;
+}
+</style>
\ No newline at end of file
diff --git a/src/main/webapp/src/components/blocks/EditBoardPanel.vue b/src/main/webapp/src/components/blocks/EditBoardPanel.vue
new file mode 100644
index 0000000..9089ba8
--- /dev/null
+++ b/src/main/webapp/src/components/blocks/EditBoardPanel.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import type { Board } from '@/models/board/Board';
+import { Category } from '@/models/board/Category';
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { VueDraggable } from 'vue-draggable-plus';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+const { t } = useI18n();
+
+const emit = defineEmits<{
+  editCategory: [index: number],
+}>()
+
+const board = defineModel<Board>( { required: true } );
+
+const newCategoryName = ref( '' );
+function addCategory() {
+  if( board.value.categories.length >= 12 ) {
+    return;
+  }
+  const newCategory = new Category( newCategoryName.value, '', board.value );
+  board.value.categories.push( newCategory );
+}
+
+function deleteCategory( index: number ) {
+  board.value.categories.splice( index, 1 );
+}
+
+function moveCategoryUp( index: number ) {
+  if( index === 0 || board.value.categories.length <= 1 ) {
+    return;
+  }
+  const tmp = board.value.categories[index];
+  board.value.categories[index] = board.value.categories[index - 1];
+  board.value.categories[index - 1] = tmp;
+}
+
+function moveCategoryDown( index: number ) {
+  if( index === board.value.categories.length - 1 || board.value.categories.length <= 1 ) {
+    return;
+  }
+  const tmp = board.value.categories[index];
+  board.value.categories[index] = board.value.categories[index + 1];
+  board.value.categories[index + 1] = tmp;
+}
+
+function openCategory( index: number ) {
+  emit("editCategory", index);
+}
+</script>
+
+<template>
+  <div class="d-flex flex-column h-100">
+    <div class="flex-grow-1 overflow-y-auto p-2">
+      <div class="row me-0">
+        <div class="col">
+          <h2 class="border-bottom border-3 border-primary">{{ t( "board.infos" ) }}</h2>
+          <label for="board-name">{{ t( 'board.name' ) }}</label>
+          <input type="text" id="board-name" class="form-control" v-model="board.name" :placeholder="t( 'board.name' )">
+        </div>
+      </div>
+      <div class="row me-0 mt-3">
+        <div class="col">
+          <h4>{{ t( "board.category.label", 2 ) }}</h4>
+          <template v-if=" board.categories.length === 0 ">
+            {{ t( "board.category.label", 0 ) }}
+          </template>
+          <template v-else>
+            <VueDraggable v-model="board.categories" item-key="id" :animation="150" ghost-class="draggable-ghost"
+              tag="ul" class="list-group" handle=".drag-handle">
+              <template v-for="(  category, categoryIndex) of board.categories" :key="category.id">
+                <li class="list-group-item bg-body-secondary p-0">
+                  <div class="d-flex justify-content-between w-100">
+                    <div class="flex-grow-1 d-flex align-items-center g-3 justify-content-start">
+                      <div
+                        class="drag-handle h-100 d-flex justify-content-center align-items-center cursor-move border-end border-1 bg-primary bg-opacity-10">
+                        <FontAwesomeIcon :icon="['fas', 'grip-lines']" class="px-2" />
+                      </div>
+                      <input type="text" :id="`category-name-${categoryIndex}`" v-model="category.name"
+                        class="form-control rounded-0 h-100">
+                    </div>
+                    <div class="d-flex">
+                      <button class="btn btn-primary rounded-0" @click="openCategory( categoryIndex )">
+                        <FontAwesomeIcon :icon="['fas', 'edit']" size="sm" />
+                      </button>
+                      <div class="d-flex flex-column justify-content-center align-items-center h-100" role="group"
+                        aria-label="Vertical button group">
+                        <button class="btn btn-primary rounded-0 py-0 lh-sm" @click="moveCategoryUp( categoryIndex )"
+                          :disabled="categoryIndex === 0">
+                          <FontAwesomeIcon :icon="['fas', 'angle-up']" size="xs" />
+                        </button>
+                        <button class="btn btn-primary rounded-0 py-0 lh-sm" @click="moveCategoryDown( categoryIndex )"
+                          :disabled="categoryIndex === board.categories.length - 1">
+                          <FontAwesomeIcon :icon="['fas', 'angle-down']" size="xs" />
+                        </button>
+                      </div>
+                      <button class="btn btn-danger rounded-start-0 rounded-0"
+                        :class="[{ 'rounded-bottom-end': categoryIndex === board.categories.length - 1 }, { 'rounded-top-end': categoryIndex === 0 }]"
+                        @click="deleteCategory( categoryIndex )">
+                        <FontAwesomeIcon :icon="['fas', 'trash']" size="sm" />
+                      </button>
+                    </div>
+                  </div>
+                </li>
+              </template>
+            </VueDraggable>
+          </template>
+          <label class="mt-2" for="new-category-name">{{ t( "board.category.add" ) }}</label>
+          <div class="input-group mb-3">
+            <input type="text" id="new-category-name" class="form-control" v-model="newCategoryName"
+              :placeholder="t( 'board.category.name' )" @keyup.enter="addCategory">
+            <button class="btn btn-primary" @click="addCategory">
+              <FontAwesomeIcon :icon="['fas', 'plus']" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="border-top border-2 border-primary p-2 d-flex justify-content-evenly align-items-center g-3">
+      <button class="btn btn-primary">
+        Save
+      </button>
+      <button class="btn btn-danger">
+        Abort and Exit
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="css" scoped>
+.draggable-ghost {
+  opacity: .75;
+}
+</style>
\ No newline at end of file
diff --git a/src/main/webapp/src/components/blocks/EditCategoryPanel.vue b/src/main/webapp/src/components/blocks/EditCategoryPanel.vue
new file mode 100644
index 0000000..5f1f972
--- /dev/null
+++ b/src/main/webapp/src/components/blocks/EditCategoryPanel.vue
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import type { Board } from '@/models/board/Board';
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { VueDraggable } from 'vue-draggable-plus';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { BoardEntry } from '@/models/board/BoardEntry';
+import { Answer } from '@/models/board/Answer';
+
+const { t } = useI18n();
+
+const board = defineModel<Board>( { required: true } );
+
+const props = defineProps<{
+  categoryIndex: number,
+}>();
+
+const emit = defineEmits<{
+  boardEntrySelected: [categoryIndex: number, boardEntryIndex: number],
+}>()
+
+
+const newBoardEntryName = ref( '' );
+function addBoardEntry() {
+  if( board.value.categories.length >= 12 ) {
+    return;
+  }
+  const answer = new Answer('', undefined);
+  const newBoardEntry = new BoardEntry( newBoardEntryName.value, board.value.categories[props.categoryIndex], answer, [] );
+  board.value.categories[props.categoryIndex].boardEntries.push( newBoardEntry );
+}
+
+function deleteCategory( index: number ) {
+  board.value.categories.splice( index, 1 );
+}
+
+function moveBoardEntryUp( index: number ) {
+  if( index === 0 || board.value.categories[props.categoryIndex].boardEntries.length <= 1 ) {
+    return;
+  }
+  const tmp = board.value.categories[props.categoryIndex].boardEntries[index];
+  board.value.categories[props.categoryIndex].boardEntries[index] = board.value.categories[props.categoryIndex].boardEntries[index - 1];
+  board.value.categories[props.categoryIndex].boardEntries[index - 1] = tmp;
+}
+
+function moveBoardEntryDown( index: number ) {
+  if( index === board.value.categories[props.categoryIndex].boardEntries.length - 1 || board.value.categories[props.categoryIndex].boardEntries.length <= 1 ) {
+    return;
+  }
+  const tmp = board.value.categories[props.categoryIndex].boardEntries[index];
+  board.value.categories[props.categoryIndex].boardEntries[index] = board.value.categories[props.categoryIndex].boardEntries[index + 1];
+  board.value.categories[props.categoryIndex].boardEntries[index + 1] = tmp;
+}
+
+function openBoardEntry( index: number ) {
+  emit("boardEntrySelected", props.categoryIndex, index);
+}
+</script>
+
+<template>
+  <div class="d-flex flex-column h-100">
+    <div class="flex-grow-1 overflow-y-auto p-2">
+      <div class="row me-0">
+        <div class="col">
+          <h2 class="border-bottom border-3 border-primary">{{ t( "board.category.infos" ) }}</h2>
+          <label for="board-name">{{ t( 'board.category.name' ) }}</label>
+          <input type="text" id="board-name" class="form-control" v-model="board.name" :placeholder="t( 'board.name' )">
+        </div>
+      </div>
+      <div class="row me-0 mt-3">
+        <div class="col">
+          <h4>{{ t( "board.boardentry.label", 2 ) }}</h4>
+          <template v-if=" board.categories[props.categoryIndex].boardEntries.length === 0 ">
+            {{ t( "board.boardentry.label", 0 ) }}
+          </template>
+          <template v-else>
+            <VueDraggable v-model="board.categories[props.categoryIndex].boardEntries" item-key="id" :animation="150" ghost-class="draggable-ghost"
+              tag="ul" class="list-group" handle=".drag-handle">
+              <template v-for="(boardEntry, boardEntryIndex) of board.categories[props.categoryIndex].boardEntries" :key="boardEntry.id">
+                <li class="list-group-item bg-body-secondary p-0">
+                  <div class="d-flex justify-content-between w-100">
+                    <div class="flex-grow-1 d-flex align-items-center g-3 justify-content-start">
+                      <div
+                        class="drag-handle h-100 d-flex justify-content-center align-items-center cursor-move border-end border-1 bg-primary bg-opacity-10">
+                        <FontAwesomeIcon :icon="['fas', 'grip-lines']" class="px-2" />
+                      </div>
+                      <input type="text" :id="`category-name-${boardEntryIndex}`" v-model="boardEntry.name"
+                        class="form-control rounded-0 h-100">
+                    </div>
+                    <div class="d-flex">
+                      <button class="btn btn-primary rounded-0" @click="openBoardEntry( boardEntryIndex )">
+                        <FontAwesomeIcon :icon="['fas', 'edit']" size="sm" />
+                      </button>
+                      <div class="d-flex flex-column justify-content-center align-items-center h-100" role="group"
+                        aria-label="Vertical button group">
+                        <button class="btn btn-primary rounded-0 py-0 lh-sm" @click="moveBoardEntryUp( boardEntryIndex )"
+                          :disabled="boardEntryIndex === 0">
+                          <FontAwesomeIcon :icon="['fas', 'angle-up']" size="xs" />
+                        </button>
+                        <button class="btn btn-primary rounded-0 py-0 lh-sm" @click="moveBoardEntryDown( boardEntryIndex )"
+                          :disabled="boardEntryIndex === board.categories[props.categoryIndex].boardEntries.length - 1">
+                          <FontAwesomeIcon :icon="['fas', 'angle-down']" size="xs" />
+                        </button>
+                      </div>
+                      <button class="btn btn-danger rounded-start-0 rounded-0"
+                        :class="[{ 'rounded-bottom-end': categoryIndex === board.categories[props.categoryIndex].boardEntries.length - 1 }, { 'rounded-top-end': categoryIndex === 0 }]"
+                        @click="deleteCategory( categoryIndex )">
+                        <FontAwesomeIcon :icon="['fas', 'trash']" size="sm" />
+                      </button>
+                    </div>
+                  </div>
+                </li>
+              </template>
+            </VueDraggable>
+          </template>
+          <label class="mt-2" for="new-category-name">{{ t( "board.boardentry.add" ) }}</label>
+          <div class="input-group mb-3">
+            <input type="text" id="new-category-name" class="form-control" v-model="newBoardEntryName"
+              :placeholder="t( 'board.boardentry.name' )" @keyup.enter="addBoardEntry">
+            <button class="btn btn-primary" @click="addBoardEntry">
+              <FontAwesomeIcon :icon="['fas', 'plus']" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="border-top border-2 border-primary p-2 d-flex justify-content-evenly align-items-center g-3">
+      <button class="btn btn-primary">
+        Save
+      </button>
+      <button class="btn btn-danger">
+        Abort and Exit
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="css" scoped>
+.draggable-ghost {
+  opacity: .75;
+}
+</style>
\ 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 a7ccb6b..d38b4fc 100644
--- a/src/main/webapp/src/components/pages/CreatePage.vue
+++ b/src/main/webapp/src/components/pages/CreatePage.vue
@@ -8,6 +8,7 @@ import type NavBar from '@/components/blocks/NavBar.vue';
 
 import BoardView from '@/components/blocks/BoardView.vue';
 import CreatePanel from '@/components/blocks/CreatePanel.vue';
+import { Category } from '@/models/board/Category';
 
 const { t } = useI18n();
 
@@ -20,17 +21,35 @@ const restHeight = computed( () => {
 })
 
 const board = ref<Board>(new Board("New Board"));
+const board1 = ref<Board>(new Board("New Board", [new Category("Test1", "", board.value as Board),new Category("Test2", "", board.value as Board)]));
 
+const categoryIndex = ref<number | null>(null);
+const boardEntryIndex = ref<number | null>(null);
+
+function showBoardEntry(cIndex: number, bEIndex: number){
+  categoryIndex.value = cIndex;
+  boardEntryIndex.value = bEIndex;
+}
+
+function showCategory(cIndex: number){
+  categoryIndex.value = cIndex;
+  boardEntryIndex.value = null;
+}
+
+function showBoard(){
+  categoryIndex.value = null;
+  boardEntryIndex.value = null;
+}
 </script>
 
 <template>
   <div :style="restHeight">
     <div class="row h-100">
-      <div class="col-9 px-0 bg-primary">
-				<BoardView :board="(board as Board)" />
+      <div class="col-9  overflow-y-auto pe-0">
+				<BoardView :board="(board1 as Board)" />
       </div>
-      <div class="col-3 px-0 bg-secondary">
-        <CreatePanel v-model="(board as Board)" />
+      <div class="col-3 px-0 h-100 overflow-auto border-start border-3 border-primary">
+        <CreatePanel v-model="(board1 as Board)" :categoryIndex="categoryIndex" :boardEntryIndex="boardEntryIndex" @editBoard="showBoard" @editCategory="showCategory" @editBoardEntry="showBoardEntry"/>
       </div>
     </div>
   </div>
diff --git a/src/main/webapp/src/locales/en.json b/src/main/webapp/src/locales/en.json
index d84d862..ee033ba 100644
--- a/src/main/webapp/src/locales/en.json
+++ b/src/main/webapp/src/locales/en.json
@@ -68,6 +68,16 @@
     "alreadyHostedGome": "Wanna create a board and host a game yourself?",
     "textCode": "Wanna create a board and host a game yourself?"
   },
+  "board": {
+    "name": "Board Name",
+    "infos": "Board Infos",
+    "category": {
+      "label": "No Category | Category | Categories | {count} Categories",
+      "name": "Category name",
+      "description": "Category description",
+      "add": "Add Category"
+    }
+  },
   "theme": {
     "dark": {
       "name": "Dark"
diff --git a/src/main/webapp/src/main.ts b/src/main/webapp/src/main.ts
index aa609b9..3d68f23 100644
--- a/src/main/webapp/src/main.ts
+++ b/src/main/webapp/src/main.ts
@@ -9,7 +9,7 @@ import '@/assets/scss/customized_bootstrap.scss';
 
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faSun, faMoon, faCircleHalfStroke, faEdit, faPlay, faSpinner, faLanguage, faGlobe, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { faSun, faMoon, faCircleHalfStroke, faEdit, faPlay, faSpinner, faLanguage, faGlobe, faPlus, faTrash, faGripLines, faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
 
 import enMessages from './locales/en.json';
 import deMessages from './locales/de.json';
@@ -34,6 +34,10 @@ library.add(
   faLanguage,
   faGlobe,
   faPlus,
+  faTrash,
+  faGripLines,
+  faAngleUp,
+  faAngleDown,
 )
 
 const app = createApp( App );
diff --git a/src/main/webapp/src/models/board/Answer.ts b/src/main/webapp/src/models/board/Answer.ts
index cf8abe9..9216f62 100644
--- a/src/main/webapp/src/models/board/Answer.ts
+++ b/src/main/webapp/src/models/board/Answer.ts
@@ -3,8 +3,8 @@ import type { BoardEntry } from './BoardEntry';
 export class Answer{
   constructor(
     public text: string,
-    public image: URL | undefined,
-    public boardEntry: BoardEntry,
+    public boardEntry: BoardEntry | undefined,
+    public image: URL | undefined = undefined,
     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
index 67538f7..2ca6a5f 100644
--- a/src/main/webapp/src/models/board/Category.ts
+++ b/src/main/webapp/src/models/board/Category.ts
@@ -7,6 +7,6 @@ export class Category{
     public description: string,
     public board: Board,
     public boardEntries: Array<BoardEntry> = [],
-    id: number | undefined,
+    id: number | undefined = undefined,
   ){}
 }
\ No newline at end of file