This commit is contained in:
24
04_typescript/projects/typescript-task-manager-template/.gitignore
vendored
Normal file
24
04_typescript/projects/typescript-task-manager-template/.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,17 @@
|
||||
## License and terms of use
|
||||
|
||||
© Web Professional Institute Inc. All rights reserved.
|
||||
|
||||
This material is provided solely for students enrolled in courses offered by Web Professional Institute Inc. By accessing or using this code, you acknowledge that it is strictly for educational use within the context of Web Professional Institute Inc. programs.
|
||||
|
||||
**Usage Restrictions:**
|
||||
|
||||
- Redistribution, sharing, or copying of this material outside the course environment is strictly prohibited.
|
||||
- The content is designed to support your learning objectives and is not authorized for commercial projects, public repositories, or applications beyond the course scope.
|
||||
- Unauthorized commercial use or open-source distribution is strictly prohibited and may result in expulsion from the program and legal action.
|
||||
|
||||
**Agreement & Rights:**
|
||||
|
||||
As a student, you have agreed to these terms as part of your enrollment agreement, which includes additional details on permitted uses, restrictions, and policies. The author and Web Professional Institute Inc. retain all rights to this material, including the code base and instructional content.
|
||||
|
||||
For any questions regarding these terms, please contact Web Professional Institute Inc. for clarification.
|
||||
@@ -0,0 +1,84 @@
|
||||
## Projektarbeit 1: Aufgaben-Management-System
|
||||
|
||||
In dieser Projektarbeit entwickelst du ein Aufgabenmanagementsystem, mit dem Studierende der Informatik ihre Teamprojekte effizient verwalten können. Ein Team benötigt ein System, mit dem es Aufgaben wie das Design der Benutzeroberfläche, die Programmierung des Backends oder die Erstellung der Dokumentation nachverfolgen und Deadlines und Prioritäten im Auge behalten kann.
|
||||
|
||||
Du erstellst mit Hilfe von TypeScript ein vereinfachtes Aufgabenverwaltungssystem, mit dem die Teammitglieder Aufgaben hinzufügen, aktualisieren, löschen, filtern und überfällige Aufgaben finden können.
|
||||
|
||||
In dieser Projektarbeit wirst du zeigen, dass du das Typsystem von TypeScript verstehst, einschließlich Union Types, Type Annotations, Type Assertions, Interfaces und Literal Types. Du wirst auch mit Funktionen, Objekten und Arrays arbeiten, um die benötigten Funktionen zu implementieren.
|
||||
|
||||
root/
|
||||
│
|
||||
├── assets/
|
||||
│ ├── js/
|
||||
│ │ └── bundle.js // Bundled JavaScript file after running "npm run ts"
|
||||
│ └── index.html // Main HTML file to view your JavaScript code
|
||||
│
|
||||
├── src/
|
||||
│ ├── tests/
|
||||
│ │ └── taskManager.test.ts // Test file to check your code (DO NOT MODIFY)
|
||||
│ └── taskManager.ts // Solve the task in this file only (ADD YOUR CODE HERE)
|
||||
│
|
||||
├── .gitignore // Ignore files for git
|
||||
│
|
||||
└── package.json // Project metadata and dependencies
|
||||
|
||||
**Anforderungen**
|
||||
|
||||
1. Definiere ein Task Interface:
|
||||
|
||||
- id: Ein eindeutiger Identifikator (Nummer).
|
||||
- title: Ein String, der den Titel der Aufgabe darstellt.
|
||||
- description: Ein optionaler String mit der Aufgabenbeschreibung.
|
||||
- status: Ein Union Type, der aus den folgenden String Literals bestehen kann: 'not-started', 'in-progress', 'completed'.
|
||||
- priority: Ein Union Type, der die Priorität der Aufgabe darstellt. Er sollte 'low', 'medium', oder 'high' akzeptieren.
|
||||
- dueDate: Ein Datum, das als String im Format YYYY-MM-DD dargestellt wird.
|
||||
|
||||
2. Tasks hinzufügen: Erstelle eine Funktion, um dem System eine neue Aufgabe hinzuzufügen.
|
||||
|
||||
- Akzeptiere ein task Objekt (mit title, priority, dueDate und optional description).
|
||||
- Erstelle automatisch eine eindeutige id für jede Aufgabe.
|
||||
- Setze den Standardstatus auf 'not-started'.
|
||||
- Füge die neue Aufgabe zu einer internen Aufgabenliste hinzu (z. B. einem Array).
|
||||
- Gib das erstellte Task-Objekt mit der generierten id zurück.
|
||||
|
||||
3. Tasks aktualisieren: Erstelle eine Funktion, um den Status und die Priorität einer bestehenden Aufgabe zu aktualisieren. Verwende bei Bedarf Type Assertions, um sicherzustellen, dass nur gültige Werte aktualisiert werden.
|
||||
|
||||
- Die Funktion sollte ein Objekt als Parameter akzeptieren, das mindestens eine `id` (number) enthält und optional `status` und/oder `priority` Eigenschaften.
|
||||
- Verwende Union Types für `status` und `priority`, um nur gültige Werte zu akzeptieren.
|
||||
- Finde die Aufgabe über ihre id.
|
||||
- Aktualisiere die status und/oder priority der Aufgabe, wenn gültige Werte angegeben sind.
|
||||
- Gib die aktualisierte Aufgabe zurück oder undefined, wenn die Aufgabe nicht gefunden wird.
|
||||
|
||||
4. Tasks löschen: Erstelle eine Funktion, die es Teammitgliedern ermöglicht, eine Aufgabe über ihre id zu löschen.
|
||||
|
||||
- Die Funktion sollte true zurückgeben, wenn die Aufgabe erfolgreich gelöscht wurde, oder false, wenn die Aufgabe nicht gefunden werden konnte.
|
||||
|
||||
5. Tasks abrufen und filtern: Erstelle eine Funktion, mit der du alle Aufgaben abrufen oder nach ihrem Status filtern kannst (z. B. nur Aufgaben in Bearbeitung anzeigen).
|
||||
|
||||
- Wenn ein bestimmter Status (z. B. 'in-progress') angegeben wird, sollte die Funktion nur Aufgaben mit diesem Status zurückgeben.
|
||||
- Wenn kein Status angegeben wird, werden alle Aufgaben zurückgegeben.
|
||||
|
||||
6. Überfällige Tasks finden: Erstelle eine Funktion, um Aufgaben zu finden, die überfällig sind.
|
||||
|
||||
- Eine Aufgabe gilt als überfällig, wenn ihr dueDate früher als das aktuelle Datum ist und ihr Status nicht 'completed' lautet.
|
||||
|
||||
7. Static Type-Checking: Implementiere Static Type-Checking, um sicherzustellen, dass hinzugefügte oder aktualisierte Tasks mit der Task-Interface/dem Task-Typ übereinstimmen. Stelle sicher, dass falsche oder fehlende Eigenschaften bereits beim Kompilieren erkannt werden, um zu verhindern, dass ungültige Daten verarbeitet werden.
|
||||
|
||||
8. Export des tasks Arrays: Exportiere das interne tasks Array, damit es in den Tests verwendet werden kann. Das Array sollte direkt exportiert werden (nicht als Funktion), da die Tests `tasks.map()` verwenden.
|
||||
|
||||
**Wichtige Hinweise**
|
||||
|
||||
Du erhältst Zugang zu einer vorgefertigten **Testdatei**, mit der du die Kernfunktionen deines taskManager.ts Moduls testen kannst.
|
||||
|
||||
Die Testdatei wird:
|
||||
|
||||
- Aufgaben hinzufügen.
|
||||
- Aktualisiere den Status und die Prioritäten der Aufgaben.
|
||||
- Aufgaben löschen.
|
||||
- Aufgaben basierend auf ihrem Status abrufen.
|
||||
- Überfällige Aufgaben finden.
|
||||
- Edge Cases testen, z. B. das Aktualisieren oder Löschen nicht existierender Aufgaben.
|
||||
|
||||
**Du solltest die Testdatei nicht verändern**. Du kannst sie öffnen und dir den Code ansehen, um dir ein Bild von den Parametern der Funktionen zu machen. Die Datei dient dazu, deinen Code während der Entwicklung zu testen, aber du musst alle angebotenen Tests bestehen, indem du nur deine Implementierung in `taskManager.ts` verwendest. Du kannst die Namen der Funktionen in `taskManager.ts` ändern, aber es ist deine Aufgabe, die Exportfunktionen so beizubehalten, wie du sie in der Datei findest.
|
||||
|
||||
Du kannst die Testfälle mit verschiedenen Befehlen ausführen. Der empfohlene Befehl ist `npm run test`, der die Tests in Node.js ausführt. Alternativ kannst du mit `npm run ts-build` ein Bundle für den Browser erstellen und dann die Datei `assets/index.html` im Browser öffnen. Für eine kontinuierliche Entwicklung bietet sich `npm run test:watch` an, der Tests automatisch bei Änderungen ausführt. Die Ergebnisse der Testfälle werden in der Konsole ausgegeben.
|
||||
@@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Assignment 01: Task Manager</title>
|
||||
<script src="./js/bundle.js" defer></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Task Manager</h1>
|
||||
<p>Open the console to see the output</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,2 @@
|
||||
(() => {
|
||||
})();
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "ts-assignment-task-manager",
|
||||
"version": "1.1.0",
|
||||
"main": "src/taskManager.ts",
|
||||
"scripts": {
|
||||
"ts": "npx esbuild src/taskManager.ts --watch --bundle --outfile=assets/js/bundle.js --loader:.ts=ts",
|
||||
"ts-build": "npx esbuild src/tests/taskManager.test.ts --bundle --outfile=assets/js/test-bundle.js --loader:.ts=ts",
|
||||
"build:test": "npx esbuild src/tests/taskManager.test.ts --bundle --platform=node --outfile=dist/test-bundle.js",
|
||||
"run:test": "node dist/test-bundle.js",
|
||||
"test": "npm run build:test && npm run run:test",
|
||||
"test:watch": "npx nodemon --watch src --ext ts --exec \"npm run test\""
|
||||
},
|
||||
"author": "",
|
||||
"license": "SEE LICENSE IN README.md",
|
||||
"description": "",
|
||||
"dependencies": {
|
||||
"esbuild": "^0.25.12"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
let nextTaskId = 1; // Initialize the task ID counter (it has to be a number)
|
||||
|
||||
const tasks = () => {};
|
||||
|
||||
const addTask = () => {};
|
||||
|
||||
const updateTask = () => {};
|
||||
|
||||
const deleteTask = () => {};
|
||||
|
||||
const getTasks = () => {};
|
||||
|
||||
const findOverdueTasks = () => {};
|
||||
|
||||
// Uncomment the following code. Otherwise, the tests will fail. Make sure that the names of your functions are the same as in the commented code.
|
||||
export { tasks, addTask, updateTask, deleteTask, getTasks, findOverdueTasks };
|
||||
@@ -0,0 +1,160 @@
|
||||
/*
|
||||
This is a test file for the `taskManager` module. It is designed to test the core functionality that you have implemented in the `taskManager.ts` module.
|
||||
|
||||
IMPORTANT:
|
||||
- DO NOT MODIFY this file.
|
||||
- After implementing the `taskManager` module, you should be able to run this file by using the command `npm run test` or `npm run ts-build`.
|
||||
- Once the project is built, open the `index.html` file located in the `assets` folder in your browser to see the output of the test cases in the browser's console.
|
||||
|
||||
The test file will:
|
||||
- Add tasks.
|
||||
- Update task statuses and priorities.
|
||||
- Delete tasks.
|
||||
- Fetch tasks based on their status.
|
||||
- Find overdue tasks.
|
||||
- Test edge cases, such as updating or deleting non-existing tasks.
|
||||
|
||||
EXPECTED BEHAVIOR:
|
||||
- This file should run successfully without any modifications.
|
||||
- Ensure that your implementation in the `taskManager.ts` module meets the requirements of these tests.
|
||||
|
||||
DO NOT MODIFY this file. You should aim to pass all the tests provided here by only working on the `taskManager.ts` module.
|
||||
*/
|
||||
|
||||
import {
|
||||
tasks,
|
||||
addTask,
|
||||
updateTask,
|
||||
deleteTask,
|
||||
getTasks,
|
||||
findOverdueTasks,
|
||||
} from '../taskManager';
|
||||
|
||||
// ===== 1. Adding tasks =====
|
||||
console.warn('=== Adding Tasks ===');
|
||||
const task1 = addTask({
|
||||
title: 'Task 1',
|
||||
priority: 'high',
|
||||
dueDate: '2024-10-10',
|
||||
description: 'This is a high priority task.',
|
||||
});
|
||||
console.log('Added Task 1 (ID should be 1):');
|
||||
console.log(task1);
|
||||
|
||||
const task2 = addTask({
|
||||
title: 'Task 2',
|
||||
priority: 'medium',
|
||||
dueDate: '2024-10-15',
|
||||
});
|
||||
console.log('Added Task 2 (ID should be 2):');
|
||||
console.log(task2);
|
||||
|
||||
const task3 = addTask({
|
||||
title: 'Task 3',
|
||||
priority: 'low',
|
||||
dueDate: '2024-09-30',
|
||||
description: 'Low priority task, overdue.',
|
||||
});
|
||||
console.log('Added Task 3 (ID should be 3):');
|
||||
console.log(task3);
|
||||
|
||||
const task4 = addTask({
|
||||
title: 'Task 4',
|
||||
priority: 'high',
|
||||
dueDate: '2024-12-01',
|
||||
description: 'Upcoming high priority task.',
|
||||
});
|
||||
console.log('Added Task 4 (ID should be 4):');
|
||||
console.log(task4);
|
||||
|
||||
const task5 = addTask({
|
||||
title: 'Task 5',
|
||||
priority: 'medium',
|
||||
dueDate: '2024-09-25',
|
||||
description: 'Overdue medium task.',
|
||||
});
|
||||
console.log('Added Task 5 (ID should be 5):');
|
||||
console.log(task5);
|
||||
|
||||
// ===== 2. Fetching all tasks =====
|
||||
console.warn('=== Fetching All Tasks ===');
|
||||
console.log('Expecting 5 tasks:');
|
||||
console.log(getTasks());
|
||||
|
||||
// ===== 3. Updating a task's status and priority =====
|
||||
console.warn('=== Updating Task 1 Status and Priority ===');
|
||||
const updatedTask1 = updateTask({
|
||||
id: task1.id,
|
||||
status: 'in-progress',
|
||||
priority: 'medium',
|
||||
});
|
||||
console.log(
|
||||
'Updated Task 1 (status should be "in-progress", priority should be "medium"):'
|
||||
);
|
||||
console.log(updatedTask1);
|
||||
|
||||
console.warn('=== Updating Task 3 to Completed ===');
|
||||
const updatedTask3 = updateTask({
|
||||
id: task3.id,
|
||||
status: 'completed',
|
||||
});
|
||||
console.log('Updated Task 3 (status should be "completed"):');
|
||||
console.log(updatedTask3);
|
||||
|
||||
// ===== 4. Deleting a task =====
|
||||
console.warn('=== Deleting Task 2 ===');
|
||||
const isDeleted = deleteTask(task2.id);
|
||||
console.log('Task 2 deleted (should return true):');
|
||||
console.log(isDeleted);
|
||||
console.log(
|
||||
'Fetching all tasks after deletion (Task 2 should no longer be in the list):'
|
||||
);
|
||||
console.log(getTasks());
|
||||
|
||||
// ===== 5. Fetching tasks with a specific status =====
|
||||
console.warn('=== Fetching In-progress Tasks ===');
|
||||
console.log('Expecting 1 in-progress task (Task 1):');
|
||||
console.log(getTasks('in-progress'));
|
||||
|
||||
// ===== 6. Fetching overdue tasks =====
|
||||
console.warn('=== Fetching Overdue Tasks ===');
|
||||
console.log(
|
||||
'Expecting 3 overdue tasks (Task 1, Task 4, and Task 5, Task 3 is completed):'
|
||||
);
|
||||
console.log(findOverdueTasks());
|
||||
|
||||
// ===== 7. Edge Case: Updating a task that doesn't exist =====
|
||||
console.warn('=== Attempting to Update a Non-existing Task ===');
|
||||
const updateNonExistingTask = updateTask({
|
||||
id: 999,
|
||||
status: 'completed',
|
||||
});
|
||||
console.log('Trying to update non-existing task (should return undefined):');
|
||||
console.log(updateNonExistingTask);
|
||||
|
||||
// ===== 8. Edge Case: Deleting a task that doesn't exist =====
|
||||
console.warn('=== Attempting to Delete a Non-existing Task ===');
|
||||
const deleteNonExistingTask = deleteTask(999);
|
||||
console.log('Trying to delete non-existing task (should return false):');
|
||||
console.log(deleteNonExistingTask);
|
||||
|
||||
// ===== 9. Adding and Fetching Tasks After Deletion =====
|
||||
console.warn('=== Adding a New Task After Deletion ===');
|
||||
const task6 = addTask({
|
||||
title: 'Task 6',
|
||||
priority: 'low',
|
||||
dueDate: '2024-11-05',
|
||||
});
|
||||
console.log('Added Task 6 (ID should be 6):');
|
||||
console.log(task6);
|
||||
|
||||
console.warn('=== Fetching All Tasks After Adding Task 6 ===');
|
||||
console.log('Expecting 5 tasks (Task 6 should be added):');
|
||||
console.log(getTasks());
|
||||
|
||||
// ===== 10. Verifying if Task IDs are auto-incremented correctly =====
|
||||
console.warn('=== Verifying Task ID Continuity ===');
|
||||
console.log('Task 6 ID (should be 6):');
|
||||
console.log(task6.id);
|
||||
console.log('All Task IDs (should be [1, 3, 4, 5, 6]):');
|
||||
console.log(tasks.map((t) => t.id));
|
||||
Reference in New Issue
Block a user