Add (partially-) working categoryManager.

- Added Body-Parser.

package-lock.json

@@ -11,6 +11,7 @@
       "dependencies": {
         "@popperjs/core": "^2.11.7",
         "@prisma/client": "^4.13.0",
+        "body-parser": "^1.20.2",
         "bootstrap": "^5.3.0-alpha3",
         "bootstrap-icons": "^1.10.5",
         "csv": "^6.2.11",
@@ -1108,12 +1109,12 @@
       }
     },
     "node_modules/body-parser": {
-      "version": "1.20.1",
+      "version": "1.20.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
-      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
+      "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
       "dependencies": {
         "bytes": "3.1.2",
-        "content-type": "~1.0.4",
+        "content-type": "~1.0.5",
         "debug": "2.6.9",
         "depd": "2.0.0",
         "destroy": "1.2.0",
@@ -1121,7 +1122,7 @@
         "iconv-lite": "0.4.24",
         "on-finished": "2.4.1",
         "qs": "6.11.0",
-        "raw-body": "2.5.1",
+        "raw-body": "2.5.2",
         "type-is": "~1.6.18",
         "unpipe": "1.0.0"
       },
@@ -2052,6 +2053,43 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/express/node_modules/body-parser": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
+      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "on-finished": "2.4.1",
+        "qs": "6.11.0",
+        "raw-body": "2.5.1",
+        "type-is": "~1.6.18",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/express/node_modules/raw-body": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
+      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -4409,9 +4447,9 @@
       }
     },
     "node_modules/raw-body": {
-      "version": "2.5.1",
+      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
-      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
+      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
       "dependencies": {
         "bytes": "3.1.2",
         "http-errors": "2.0.0",

package.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.7",
     "@prisma/client": "^4.13.0",
+    "body-parser": "^1.20.2",
     "bootstrap": "^5.3.0-alpha3",
     "bootstrap-icons": "^1.10.5",
     "csv": "^6.2.11",

src/frontend/categoryManager.eta.html

@@ -5,7 +5,38 @@
 	<!-- Create new category button -->
 	<div class="row">
 		<div class="col-12">
-			<a href="/settings/category/new" class="btn btn-primary">Create new category</a>
+			<a href="/settings/category/new" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createNewCategoryModal">Create new category</a>
+		</div>
+	</div>
+
+	<!-- Modal -->
+	<div class="modal fade" id="createNewCategoryModal" tabindex="-1" aria-labelledby="createNewCategoryModal" aria-hidden="true">
+		<div class="modal-dialog">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h1 class="modal-title fs-5" id="createNewCategoryModalLabel">Create a new category</h1>
+					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+				</div>
+				<div class="modal-body">
+					<form method="post">
+						<div class="mb-3">
+							<label for="createNewCategoryModalName" class="form-label">Name</label>
+							<input type="text" class="form-control" id="createNewCategoryModalName" name="name" required />
+							<div id="createNewCategoryModalNameText" class="form-text">This name should be unqiue.</div>
+						</div>
+						<div class="mb-3">
+							<label for="createNewCategoryModalDescription" class="form-label">Description</label>
+							<input type="text" class="form-control" id="createNewCategoryModalDescription" name="description" />
+							<div id="createNewCategoryModalDescText" class="form-text">Optional</div>
+						</div>
+					
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+					<button type="submit" class="btn btn-primary">Save changes</button>
+				</div>
+			</form>
+			</div>
 		</div>
 	</div>
 
@@ -23,7 +54,8 @@
 			<tr>
 				<th scope="row"><%= user.id %></th>
 				<td><%= user.name %></td>
-				<td><%= user.description %></td>			</tr>
+				<td><%= user.description %></td>
+			</tr>
 			<% }) %>
 		</tbody>
 	</table>

src/index.ts

@@ -5,6 +5,7 @@ import fileUpload from 'express-fileupload';
 import { PrismaClient } from '@prisma/client';
 import { Status, Category } from '@prisma/client';
 import * as eta from 'eta';
+import bodyParser from 'body-parser';
 
 import routes from './routes/index.js';
 
@@ -46,6 +47,13 @@ export const app = express();
 app.set('x-powered-by', false);
 app.set('strict routing', true);
 app.engine('html', eta.renderFile);
+
+// app.use(cors());
+app.use(bodyParser.urlencoded({ extended: false }));
+
+// Using bodyParser to parse JSON bodies into JS objects
+app.use(bodyParser.json());
+
 app.use(fileUpload());
 // Configure static https://expressjs.com/de/starter/static-files.html
 // app.use('/static', express.static('public'));

src/routes/frontend/categoryManager.ts

@@ -2,6 +2,9 @@ import express, { Request, Response } from 'express';
 import { prisma, __path } from '../../index.js';
 
 export default (req: Request, res: Response) => {
+	// If method is get, render the page
+	if (req.method === 'GET') {
+		// Render the page
 		prisma.category
 		.findMany({})
 		.then((items) => {
@@ -12,4 +15,28 @@ export default (req: Request, res: Response) => {
 			console.error(err);
 			res.status(500).render(__path + '/src/frontend/errors/dbError.eta.html', { error: err });
 		});
+	} else {
+		console.log(req.body);
+		// Check if required fields are filled in
+		if (!req.body.name || !req.body.description) {
+			res.status(400).render(__path + '/src/frontend/errors/400.eta.html');
+			return;
+		}
+		// Save data to category table
+		prisma.category.create({
+			data: {
+				name: req.body.name,
+				description: req.body.description,
+			},
+		})
+		.then(() => {
+			res.redirect('/allCategories');
+		})
+		.catch((err) => {
+			// TODO Catch if is a duplicate error and show a message to the user
+			// TODO Fix this as it throws an error on the error page
+			res.status(500).render(__path + '/src/frontend/errors/dbError.eta.html', { error: err });
+		});
+	}
+	
 };