Todo List Application using MEAN Stack

// index.js

import express from 'express';
import bodyParser from 'body-parser';
import employeeRouters from './controllers/employeeRouters.js';
import cors from 'cors';

const app = express();
const port = 3001;

// CORS configuration
app.use(function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header(
        'Access-Control-Allow-Methods',
        'GET, POST, HEAD, OPTIONS, PUT, PATCH, DELETE'
    );
    res.header(
        'Access-Control-Allow-Headers',
        'Origin, X-Requested-With, Content-Type, Accept, x-access-token, x-refresh-token, _id'
    );

    res.header(
        'Access-Control-Expose-Headers',
        'x-access-token, x-refresh-token'
    );

    next();
});

app.use(bodyParser.json());

// Routes
app.use('/tasks', employeeRouters);

app.on('error', (err) => {
    console.error(`Error during startup: ${err.message}`);
});

app.listen(port, () => {
    console.log(`App has started on port ${port}`);
});

// controllers/employeeRouters.js

import express from "express";
import { TaskModel } from "../models.js";
import { connect } from "../dbConfig.js";

connect();
const router = express.Router();

router.get("/", async (req, res) => {
    try {
        const tasks = await TaskModel.find();
        res.send(tasks);
    } catch (err) {
        console.log("Error while getting tasks");
        res.status(400).send("Error while fetching tasks");
    }
});

router.post("/", async (req, res) => {
    try {
        const name = req.body.name;
        const createdAt = Date.now();
        const desc = req.body.desc;
        const deadline = req.body.deadline;
        const completed = req.body.completed;

        const newTask = new TaskModel({
            name: name,
            createdAt: createdAt,
            desc: desc,
            deadline: deadline,
            completed: completed
        })

        console.log(newTask);
        const result = await newTask.save();
        console.log("Task Saved");
        res.send(result);
    } catch (err) {
        console.log(err);
        res.status(400).send("Task not saved");
    }
})

router.put("/:id", async (req, res) => {
    try {
        const id = req.params.id;
        const name = req.body.name;
        const desc = req.body.desc;
        const deadline = req.body.deadline;
        const completed = req.body.completed;

        console.log(name + " " + id);
        const createdAt = Date.now();
        const emp = {
            name: name,
            createdAt: createdAt,
            desc: desc,
            deadline: deadline,
            completed: completed
        }
        const updated = await TaskModel.findByIdAndUpdate(id, 
            { $set: emp }, { new: true });
        if (!updated) {
            console.log("Task not found");
            return res.status(404).json({ error: "Task not found" });
        }
        return res.status(200)
            .json({ message: "Task Updated Successfully" });

    } catch (err) {
        console.log(err);
        return res.status(500)
            .json({ error: "Internal Server Error" });
    }
})

router.delete("/:id", async (req, res) => {
    try {
        const id = req.params.id;
        const deletedTask = await TaskModel.findByIdAndDelete(id);
        if (!deletedTask) {
            console.log("Task not found");
            return res.status(404)
                .json({ error: "Task not found" });
        }
        console.log("Task deleted Successfully");
        return res.status(200)
            .json({ message: "Task deleted Successfully" });
    } catch (err) {
        console.log(err);
        return res.status(500)
            .json({ error: "Internal Server Error" });
    }
});


export default router;

// dbConfig.js

import mongoose from 'mongoose';

export async function connect() {
    try {
        const res = await mongoose.connect("Your MongoDB string");
        console.log("DB Connected >>>");
    } catch (err) {
        console.log(err);
    }
}

connect();

// models.js

import mongoose from "mongoose";

const TaskSchema = new mongoose.Schema({
    name: { type: String, default: 'Task1' },
    createdAt: { type: Date, default: Date.now },
    desc: { type: String, default: 'Sample Desc1' },
    deadline: { type: String, default: new Date().toDateString() },
    completed: { type: Boolean, default: false }
});

export const TaskModel = mongoose.model("Task", TaskSchema);

// src/app/app.component.ts

import { Component, OnInit } from '@angular/core';
import { TodoAddComponent } from './MyComponents/todo-add/todo-add.component';
import { WebrequestService } from './service/webrequest.service';
import { CommonModule } from '@angular/common';
import { NgIf } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [TodoAddComponent, CommonModule, NgIf, FormsModule],
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
    title = 'Your App Title';
    tasks: any[] = [];
    edit: boolean = false;
    editTask: any = {};

    constructor(private webrequest: WebrequestService) { }

    ngOnInit(): void {
        this.getTasks();
    }

    getTasks(): void {
        this.webrequest.get('tasks').subscribe(
            (res: any) => {
                this.tasks = res;
                console.log(this.tasks);
            },
            (error: any) => {
                console.error('Error fetching tasks:', error);
            }
        );
    }

    addTask(task: any): void {
        this.webrequest.post('tasks', task).subscribe(
            (res: any) => {
                console.log('Task added:', res);
                this.getTasks();
            },
            (error: any) => {
                console.error('Error adding task:', error);
            }
        );
    }

    handleDelete(task: any): void {
        this.webrequest.delete('tasks/' + task._id, {}).subscribe(
            (res: any) => {
                console.log('Task Deleted:', res);
                this.getTasks();
            },
            (error: any) => {
                console.log(error);
                console.error('Error Deleting task:', error);
            }
        );
    }

    handleEdit(task: any): void {
        this.edit = true;
        console.log(task);
        this.editTask = task;
        console.log(task);
    }

    handleComplete(task: any): void {
        this.webrequest
            .put('tasks/' + task._id, {
                name: task.name,
                desc: task.desc,
                deadline: task.deadline,
                completed: true,
            })
            .subscribe(
                (res: any) => {
                    console.log('Task Updated:', res);
                    this.getTasks();
                },
                (error: any) => {
                    console.error('Error Updating task:', error);
                }
            );
    }

    handleUpdate(task: any): void {
        console.log(task.name);
        console.log(task);
        this.edit = false;
        this.webrequest
            .put('tasks/' + task._id, {
                name: task.name,
                desc: task.desc,
                deadline: task.deadline,
            })
            .subscribe(
                (res: any) => {
                    console.log('Task Updated:', res);
                    this.getTasks();
                },
                (error: any) => {
                    console.error('Error Updating task:', error);
                }
            );
    }
}

// src/app/service/webrequest.service.ts:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root'
})
export class WebrequestService {
    readonly Root_URL;
    constructor(private http: HttpClient) {
        this.Root_URL = "http://localhost:3001/";
    }

    get(uri: string) {
        return this.http.get(this.Root_URL + uri);
    }

    post(uri: string, payload: object) {
        return this.http.post(this.Root_URL + uri, payload)
    }

    delete(uri: string, payload: object) {
        console.log(uri);
        console.log(this.Root_URL + uri);
        return this.http.delete(this.Root_URL + uri)
    }

    put(uri: string, payload: object) {
        return this.http.put(this.Root_URL + uri, payload)
    }
}

// src\app\MyComponents\todo-add\todo-add.component.ts

import { Component, EventEmitter, Inject, OnInit, Output } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { WebrequestService } from '../../service/webrequest.service';
import { NgIf } from '@angular/common';


export @Component({
    selector: 'app-todo-add',
    standalone: true,
    imports: [FormsModule, NgIf],
    templateUrl: './todo-add.component.html',
    styleUrls: ['./todo-add.component.css']
})

class TodoAddComponent implements OnInit {
    task: any;
    constructor(private webrequest: WebrequestService) {
    }

    ngOnInit(): void {
        this.handleChange();
    }

    name: string = 'Sample';
    desc: string = "Sample description";
    deadline: string = new Date().toDateString();
    disable: boolean = true;
    @Output() todoAdd: EventEmitter<any> = new EventEmitter();

    handleChange() {
        if (this.name.length > 0 && this.desc.length > 0) {
            this.disable = false;
        } else {
            this.disable = true;
        }
    }

    handleSubmit() {
        console.log(this.name);
        console.log(this.desc);

        this.todoAdd.emit({
            name: this.name,
            desc: this.desc,
            deadline: this.deadline
        } as any)
        this.name = "";
        this.desc = "";
        this.deadline = new Date().toDateString();
        this.handleChange();
    }

}