Initial Commit

backend/.gitignore

@@ -0,0 +1 @@
+node_modules

backend/api/controllers/tasks.ts

@@ -0,0 +1,83 @@
+import { Request, Response, Router } from 'express';
+import { DeleteResult, getManager, UpdateResult } from 'typeorm';
+import { Task } from '../entities/Task';
+
+const router = Router();
+
+router.get('/tasks', async (_req: Request, res: Response) => {
+    try {
+        const taskRepository = getManager().getRepository(Task);
+        await taskRepository.find({
+            order: { id: 'DESC' },
+        }).then((tasks: Task[]) => {
+            res.status(200).send(tasks);
+        }).catch((error) => {
+            res.status(400).send(error);
+        });
+    } catch (error) {
+        res.status(400).send(error);
+    }
+});
+
+router.post('/tasks', async (req: Request, res: Response) => {
+    try {
+        const taskRepository = getManager().getRepository(Task);
+        const task: Task = new Task();
+        task.title = req.body.title;
+        task.done = req.body.done;
+        task.dueDate = req.body.dueDate;
+
+        await taskRepository.save(task).then((result: Task) => {
+            return res.status(200).send({
+                message: `Task successfully created`,
+                response: result,
+            });
+        }).catch((error) => {
+            res.status(400).send(error);
+        });
+    } catch (error) {
+        res.status(400).send(error);
+    }
+});
+
+router.put('/tasks/:id', (req: Request, res: Response) => {
+    try {
+        const taskRepository = getManager().getRepository(Task);
+        const task: Task = new Task();
+        task.title = req.body.title;
+        task.done = req.body.done;
+        task.dueDate = req.body.dueDate;
+        taskRepository.update(
+            req.params.id,
+            task,
+        ).then((updatedTask: UpdateResult) => {
+            res.status(200).send({
+                message: `Task successfully updated`,
+                response: updatedTask,
+            });
+        }).catch((error) => {
+            res.status(400).send(error);
+        });
+    } catch (error) {
+        res.status(400).send(error);
+    }
+});
+
+router.delete('/tasks/:id', async (req: Request, res: Response) => {
+    try {
+        const taskRepository = getManager().getRepository(Task);
+        const taskEntity = await taskRepository.findOne(req.params.id);
+        if (taskEntity) {
+            taskRepository.delete(req.params.id).then((result: DeleteResult) => {
+                res.status(200).send({
+                    message: `Task successfully deleted`,
+                    response: result,
+                });
+            });
+        }
+    } catch (error) {
+        res.status(400).send(error);
+    }
+});
+
+export default router;

backend/api/entities/Task.ts

@@ -0,0 +1,36 @@
+import {
+    Column,
+    CreateDateColumn,
+    Entity, PrimaryGeneratedColumn,
+    UpdateDateColumn,
+} from 'typeorm';
+
+@Entity()
+export class Task {
+
+    @PrimaryGeneratedColumn()
+    id: number;
+
+    @Column()
+    title: string;
+
+    @Column({
+        default: false,
+    })
+    done: boolean;
+
+    @Column()
+    dueDate: Date;
+
+    @CreateDateColumn()
+    createdAt: Date;
+
+    @UpdateDateColumn()
+    updatedAt: Date;
+
+    columns: {
+        updatedAt: {
+            updateDate: true,
+        },
+    };
+}

backend/api/migrations/1548630212872-MigrationTask.ts

@@ -0,0 +1,37 @@
+import { MigrationInterface, QueryRunner, Table } from 'typeorm';
+
+export class MigrationTask1548630212872 implements MigrationInterface {
+
+    public async up(queryRunner: QueryRunner): Promise<any> {
+        await queryRunner.createTable(new Table({
+            name: 'task',
+            columns: [
+                {
+                    name: 'id',
+                    type: 'int',
+                    isPrimary: true,
+                }, {
+                    name: 'title',
+                    type: 'varchar',
+                }, {
+                    name: 'done',
+                    type: 'boolean',
+                }, {
+                    name: 'dueDate',
+                    type: 'datetime',
+                }, {
+                    name: 'createdAt',
+                    type: 'datetime',
+                }, {
+                    name: 'updatedAt',
+                    type: 'datetime',
+                },
+            ],
+        }), true);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<any> {
+        console.log(queryRunner);
+    }
+
+}

backend/api/router.ts

@@ -0,0 +1,8 @@
+import { Router } from 'express';
+import taskRouter from './controllers/tasks';
+
+const router = Router();
+
+router.use(taskRouter);
+
+export default router;

backend/api/server.ts

@@ -0,0 +1,29 @@
+import * as bodyParser from 'body-parser';
+import * as express from 'express';
+import * as cors from 'cors';
+import 'reflect-metadata';
+import { Connection, createConnection } from 'typeorm';
+import router from './router';
+
+const app = express();
+
+app.use(cors());
+app.use(bodyParser.json());
+app.use((_req: express.Request, res: express.Response, next: express.NextFunction) => {
+    res.header('Access-Control-Allow-Origin', '*');
+    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+    res.header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type');
+    next();
+});
+app.use('/api', router);
+app.set('port', 2000);
+
+createConnection().then(async (connection: Connection) => {
+    app.listen(app.get('port'), () => {
+        console.log(`Node API is running at http://localhost:${app.get('port')} in ${app.get('env')} mode`);
+        console.log(`Connected to your ${connection.options.type} database`);
+        console.log('Press CTRL-C to stop\n');
+    });
+}).catch((error) => console.error(`TypeORM connection ${error}`));
+
+export default app;

backend/nodemon.json

@@ -0,0 +1,11 @@
+{
+    "ignore": [
+        "**/*.test.ts",
+        "node_modules"
+    ],
+    "watch": [
+        "api"
+    ],
+    "exec": "npm start",
+    "ext": "ts"
+}

backend/ormconfig.json

@@ -0,0 +1,23 @@
+{
+    "type": "postgres",
+    "host": "localhost",
+    "port": 5432,
+    "username": "db",
+    "password": "db",
+    "database": "db",
+    "synchronize": true,
+    "entities": [
+        "api/entities/*.ts"
+    ],
+    "subscribers": [
+        "api/subscribers/*.ts"
+    ],
+    "migrations": [
+        "api/migrations/*.ts"
+    ],
+    "cli": {
+        "entitiesDir": "api/entities",
+        "migrationsDir": "api/migrations",
+        "subscribersDir": "api/subscribers"
+    }
+}

backend/package.json

@@ -0,0 +1,49 @@
+{
+    "name": "microfrontend-api",
+    "author": "Billy Lando <billy_lando@yahoo.com>",
+    "version": "0.0.1",
+    "description": "ExpressJS, NodeJS microfrontend API",
+    "scripts": {
+        "dev": "nodemon",
+        "start": "ts-node --inspect=5858 -r tsconfig-paths/register api/server.ts",
+        "test": "npx jest --watchAll",
+        "migration:generate": "ts-node ./node_modules/typeorm/cli.js migration:generate -n",
+        "migration:run": "ts-node ./node_modules/typeorm/cli.js migration:run",
+        "migration:revert": "ts-node ./node_modules/typeorm/cli.js migration:revert"
+    },
+    "jest": {
+        "transform": {
+            ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
+        },
+        "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)",
+        "moduleFileExtensions": [
+            "ts",
+            "tsx",
+            "js",
+            "json"
+        ]
+    },
+    "license": "MIT",
+    "dependencies": {
+        "body-parser": "^1.18.3",
+        "cors": "^2.8.5",
+        "express": "^4.16.4",
+        "mysql": "^2.16.0",
+        "pg": "^8.16.0",
+        "typeorm": "^0.2.25"
+    },
+    "devDependencies": {
+        "@types/body-parser": "^1.17.0",
+        "@types/cors": "^2.8.18",
+        "@types/express": "^4.16.0",
+        "@types/jest": "^23.3.13",
+        "@types/supertest": "^2.0.7",
+        "jest": "^24.5.0",
+        "nodemon": "^1.18.9",
+        "supertest": "^3.4.2",
+        "ts-jest": "^23.10.5",
+        "ts-node": "^7.0.1",
+        "tsconfig-paths": "^3.7.0",
+        "typescript": "^3.2.2"
+    }
+}

backend/test/api/controllers/tasks.test.ts

@@ -0,0 +1,69 @@
+
+import supertest = require('supertest');
+import { Task } from '../../../api/entities/Task';
+import app from '../../../api/server';
+import { initConnection, stopConnection } from '../../helper';
+
+describe('/api/tasks', () => {
+    let task: Task;
+    beforeAll(async () => {
+        task = {
+            id: 1,
+            title: 'Buy a new NodeJS book',
+            dueDate: new Date('Januar 29, 2019 00:00:00'),
+            done: false,
+        } as Task;
+        await initConnection();
+    });
+
+    it('should return a 200 response for /api/tasks', () => {
+        return supertest(app).get('/api/tasks')
+            .set('Content-Type', 'application/json')
+            .set('Accept', 'application/json')
+            .expect(200);
+    });
+
+    it('should return a 404 response for /api/lorem', () => {
+        return supertest(app).get('/api/lorem').then((response) => {
+            expect(response.status).toBe(404);
+        });
+    });
+
+    it('should return a 200 response for POST /api/tasks and delete the entry', (done) => {
+        return supertest(app)
+            .post('/api/tasks')
+            .send(task)
+            .set('Content-Type', 'application/json')
+            .set('Accept', 'application/json')
+            .expect(200)
+            .end((err, res) => {
+                if (err) {
+                    throw err;
+                }
+                expect(res.body.message).toBe('Task successfully created');
+                done();
+            });
+    });
+
+    it('should UPDATE /api/tasks/1 correctly', (done) => {
+        return supertest(app)
+            .put('/api/tasks/1')
+            .send({
+                dueDate: new Date('Februar 1, 2019 00:00:00'),
+            })
+            .set('Content-Type', 'application/json')
+            .set('Accept', 'application/json')
+            .expect(200)
+            .end((err, res) => {
+                if (err) {
+                    throw err;
+                }
+                expect(res.body.message).toBe('Task successfully updated');
+                done();
+            });
+    });
+
+    afterAll(async () => {
+        await stopConnection();
+    });
+});

backend/test/helper.ts

@@ -0,0 +1,31 @@
+import { Connection, ConnectionOptions, createConnection } from 'typeorm';
+
+let connection: Connection;
+let initPromise: Promise<void>;
+
+const dbConfig = {
+    type: 'mysql',
+    host: 'localhost',
+    port: 3306,
+    username: 'root',
+    password: '',
+    database: '',
+    synchronise: false,
+    entities: [''],
+} as ConnectionOptions;
+
+export function initConnection() {
+    if (initPromise) {
+        return initPromise;
+    }
+
+    initPromise = createConnection(dbConfig).then((con) => {
+        connection = con;
+    }).catch((error) => { throw error; });
+
+    return initPromise;
+}
+
+export function stopConnection(): Promise<void> {
+    return connection.close();
+}

backend/test/index.test.ts

@@ -0,0 +1,8 @@
+
+import 'jest';
+
+describe('Jest Tests', () => {
+    test('Verify Tests Works', () => {
+        expect(true).toBeTruthy();
+    });
+});

backend/tsconfig.json

@@ -0,0 +1,30 @@
+{
+    "compilerOptions": {
+        "baseUrl": "./",
+        "sourceMap": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noImplicitAny": true,
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "module": "commonjs",
+        "moduleResolution": "node",
+        "target": "es6",
+        "lib": [
+            "es5",
+            "es6"
+        ],
+        "paths": {
+            "*": [
+                "node_modules/*",
+                "./types/*"
+            ]
+        }
+    },
+    "exclude": [
+        "node_modules"
+    ],
+    "include": [
+        "./**/*"
+    ]
+}

backend/tslint.json

@@ -0,0 +1,121 @@
+{
+    "defaultSeverity": "error",
+    "extends": [
+        "tslint:recommended"
+    ],
+    "jsRules": {},
+    "rules": {
+        "arrow-return-shorthand": true,
+        "callable-types": true,
+        "class-name": true,
+        "comment-format": [
+            true,
+            "check-space"
+        ],
+        "curly": true,
+        "deprecation": {
+            "severity": "warn"
+        },
+        "eofline": true,
+        "forin": true,
+        "import-spacing": true,
+        "indent": [
+            true,
+            "spaces"
+        ],
+        "interface-over-type-literal": true,
+        "label-position": true,
+        "max-line-length": [
+            true,
+            140
+        ],
+        "member-access": false,
+        "member-ordering": [
+            true,
+            {
+                "order": [
+                    "static-field",
+                    "instance-field",
+                    "static-method",
+                    "instance-method"
+                ]
+            }
+        ],
+        "no-arg": true,
+        "no-bitwise": true,
+        "no-console": [
+            true,
+            "debug",
+            "info",
+            "time",
+            "timeEnd",
+            "trace"
+        ],
+        "no-construct": true,
+        "no-debugger": true,
+        "no-duplicate-super": true,
+        "no-empty": false,
+        "no-empty-interface": true,
+        "no-eval": true,
+        "no-inferrable-types": [
+            true,
+            "ignore-params"
+        ],
+        "no-misused-new": true,
+        "no-non-null-assertion": true,
+        "no-redundant-jsdoc": true,
+        "no-shadowed-variable": true,
+        "no-string-literal": false,
+        "no-string-throw": true,
+        "no-switch-case-fall-through": true,
+        "no-trailing-whitespace": true,
+        "no-unnecessary-initializer": true,
+        "no-unused-expression": true,
+        "no-use-before-declare": true,
+        "no-var-keyword": true,
+        "object-literal-sort-keys": false,
+        "one-line": [
+            true,
+            "check-open-brace",
+            "check-catch",
+            "check-else",
+            "check-whitespace"
+        ],
+        "prefer-const": true,
+        "quotemark": [
+            true,
+            "single"
+        ],
+        "radix": true,
+        "semicolon": [
+            true,
+            "always"
+        ],
+        "triple-equals": [
+            true,
+            "allow-null-check"
+        ],
+        "typedef-whitespace": [
+            true,
+            {
+                "call-signature": "nospace",
+                "index-signature": "nospace",
+                "parameter": "nospace",
+                "property-declaration": "nospace",
+                "variable-declaration": "nospace"
+            }
+        ],
+        "unified-signatures": true,
+        "variable-name": false,
+        "whitespace": [
+            true,
+            "check-branch",
+            "check-decl",
+            "check-operator",
+            "check-separator",
+            "check-type"
+        ],
+        "no-output-on-prefix": true
+    },
+    "rulesDirectory": []
+}

compose.yml

@@ -0,0 +1,16 @@
+services:
+  db:
+    image: postgres
+    container_name: todo-db
+    restart: unless-stopped
+    ports:
+      - '5432:5432'
+    volumes:
+      - 'todo-data:/var/lib/postgresql/data'
+    environment:
+      - POSTGRES_PASSWORD=db
+      - POSTGRES_USER=db
+      - POSTGRES_DB=db
+
+volumes:
+  todo-data:

frontend/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

frontend/.gitignore

@@ -0,0 +1,42 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

frontend/README.md

@@ -0,0 +1,27 @@
+# Todo
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.1.4.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

frontend/angular.json

@@ -0,0 +1,125 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "todo": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "outputPath": "dist/todo",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kB",
+                  "maximumError": "4kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "todo:build:production"
+            },
+            "development": {
+              "buildTarget": "todo:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular/build:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular/build:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": "4b15b216-5855-4376-b6a8-53304c9e623a"
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
+  }
+}

frontend/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "todo",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^20.0.2",
+    "@angular/common": "^20.0.2",
+    "@angular/compiler": "^20.0.2",
+    "@angular/core": "^20.0.2",
+    "@angular/forms": "^20.0.2",
+    "@angular/platform-browser": "^20.0.2",
+    "@angular/platform-browser-dynamic": "^20.0.2",
+    "@angular/router": "^20.0.2",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.1"
+  },
+  "devDependencies": {
+    "@angular/build": "^20.0.1",
+    "@angular/cli": "^20.0.1",
+    "@angular/compiler-cli": "^20.0.2",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.1.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.8.3"
+  }
+}

frontend/src/app/app.component.html

@@ -0,0 +1,5 @@
+<app-create />
+
+<app-table />
+
+<router-outlet />

frontend/src/app/app.component.spec.ts

@@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have the 'todo' title`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('todo');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, todo');
+  });
+});

frontend/src/app/app.component.ts

@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+import {RouterOutlet} from '@angular/router';
+import {TableComponent} from "./table/table.component";
+import {CreateComponent} from "./create/create.component";
+
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet, TableComponent, CreateComponent],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css',
+  standalone: true,
+})
+export class AppComponent {
+  title = 'todo';
+}

frontend/src/app/app.config.ts

@@ -0,0 +1,13 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+import {provideHttpClient} from "@angular/common/http";
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideHttpClient(),
+  ]
+};

frontend/src/app/app.routes.ts

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];

frontend/src/app/create/create.component.html

@@ -0,0 +1,6 @@
+<form [formGroup]="this.form">
+  <input type="text" formControlName="title">
+  <input type="date" formControlName="dueDate">
+  <button type="submit" (click)="create()">Save </button>
+</form>
+

frontend/src/app/create/create.component.ts

@@ -0,0 +1,30 @@
+import {Component, inject, OnInit} from '@angular/core';
+import {TodoService} from "../service/todo.service";
+import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+
+@Component({
+  selector: 'app-create',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule
+  ],
+  templateUrl: './create.component.html',
+  styleUrl: './create.component.css'
+})
+export class CreateComponent implements OnInit {
+  todoService: TodoService = inject(TodoService);
+  formBuilder: FormBuilder = inject(FormBuilder);
+  form!: FormGroup;
+
+  ngOnInit(): void {
+    this.form = this.formBuilder.group({
+      title: ['', Validators.required],
+      dueDate: ['', Validators.required],
+    })
+  }
+
+  public create(): void {
+    console.log(this.form.value);
+    this.todoService.create(this.form.value).subscribe(() => {this.todoService.todos.reload()})
+  }
+}

frontend/src/app/dto/models.ts

@@ -0,0 +1,16 @@
+interface GetTask {
+  id: number;
+  title: string;
+  done: boolean;
+  dueDate: Date
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+interface PutTask {
+  title: string;
+  dueDate: Date;
+  done: boolean;
+}
+
+export { GetTask, PutTask };

frontend/src/app/service/todo.service.ts

@@ -0,0 +1,43 @@
+import {inject, Injectable} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+import {Observable} from "rxjs";
+import {GetTask, PutTask} from "../dto/models";
+import {rxResource} from "@angular/core/rxjs-interop";
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TodoService {
+  http: HttpClient = inject(HttpClient);
+
+  _todos = rxResource({
+    stream: () => this.getTodos(),
+  })
+
+  public get todos() {
+    return this._todos;
+  }
+
+  public getTodos(): Observable<GetTask[]> {
+    return this.http.get<GetTask[]>('http://localhost:2000/api/tasks');
+  }
+
+  public create(todo: {title: string, dueDate: Date}) {
+    return this.http.post('http://localhost:2000/api/tasks', todo);
+  }
+
+  public markAsDone(todo: GetTask) {
+    const putTask: PutTask = {
+      title: todo.title,
+      dueDate: todo.dueDate,
+      done: true,
+    }
+
+    return this.http.put(`http://localhost:2000/api/tasks/${todo.id}`, putTask);
+  }
+
+  public delete(id: number) {
+    return this.http.delete(`http://localhost:2000/api/tasks/${id}`);
+  }
+}

frontend/src/app/table/table.component.html

@@ -0,0 +1,27 @@
+<table>
+  <thead>
+    <tr>
+      <th>Title</th>
+      <th>Due Date</th>
+      <th>Actions</th>
+    </tr>
+  </thead>
+  <tbody>
+  @for (todo of todos.value(); track todo.id) {
+    <tr>
+      <td>
+        {{todo.title}}
+        @if (todo.done) {
+          &checkmark;
+        }
+      </td>
+      <td>{{todo.dueDate | date}}</td>
+      <td>
+        <button (click)="markAsDone(todo)">Done</button>
+        <button>Edit</button>
+        <button (click)="delete(todo.id)">Delete</button>
+      </td>
+    </tr>
+  }
+  </tbody>
+</table>

frontend/src/app/table/table.component.ts

@@ -0,0 +1,27 @@
+import {Component, inject, Signal} from '@angular/core';
+import {TodoService} from "../service/todo.service";
+import {DatePipe} from "@angular/common";
+import {GetTask} from "../dto/models";
+import {toSignal} from "@angular/core/rxjs-interop";
+
+@Component({
+  selector: 'app-table',
+  standalone: true,
+  imports: [
+    DatePipe
+  ],
+  templateUrl: './table.component.html',
+  styleUrl: './table.component.css'
+})
+export class TableComponent {
+  todoService: TodoService = inject(TodoService);
+  todos = this.todoService.todos;
+
+  markAsDone(todo: GetTask) {
+    this.todoService.markAsDone(todo).subscribe(() => {this.todos.reload()});
+  }
+
+  delete(id: number) {
+    this.todoService.delete(id).subscribe(() => {this.todos.reload()});
+  }
+}

frontend/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Todo</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

frontend/src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));

frontend/src/styles.css

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

frontend/tsconfig.app.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

frontend/tsconfig.json

@@ -0,0 +1,32 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

frontend/tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}