updated task-service and task-model

albindavidc · Dec 28, 2024 · 98d6fe5 · 98d6fe5
1 parent f80e9c2
commit 98d6fe5
Show file tree

Hide file tree

Showing 17 changed files with 128 additions and 3 deletions.
diff --git a/angular.json b/angular.json
@@ -27,6 +27,7 @@
               }
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
               "src/styles.css"
             ],
             "scripts": [],
@@ -90,6 +91,7 @@
               }
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
               "src/styles.css"
             ],
             "scripts": []

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,10 +12,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^19.0.0",
+    "@angular/cdk": "^19.0.4",
     "@angular/common": "^19.0.0",
     "@angular/compiler": "^19.0.0",
     "@angular/core": "^19.0.0",
     "@angular/forms": "^19.0.0",
+    "@angular/material": "^19.0.4",
     "@angular/platform-browser": "^19.0.0",
     "@angular/platform-browser-dynamic": "^19.0.0",
     "@angular/platform-server": "^19.0.0",

diff --git a/src/app/tasks/task-form/task-form.component.css b/src/app/tasks/task-form/task-form.component.css
diff --git a/src/app/tasks/task-form/task-form.component.html b/src/app/tasks/task-form/task-form.component.html
@@ -0,0 +1 @@
+<p>task-form works!</p>
diff --git a/src/app/tasks/task-form/task-form.component.ts b/src/app/tasks/task-form/task-form.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-task-form',
+  imports: [],
+  templateUrl: './task-form.component.html',
+  styleUrl: './task-form.component.css'
+})
+export class TaskFormComponent {
+
+}
diff --git a/src/app/tasks/task-item/task-item.component.css b/src/app/tasks/task-item/task-item.component.css
diff --git a/src/app/tasks/task-item/task-item.component.html b/src/app/tasks/task-item/task-item.component.html
@@ -0,0 +1 @@
+<p>task-item works!</p>
diff --git a/src/app/tasks/task-item/task-item.component.ts b/src/app/tasks/task-item/task-item.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-task-item',
+  imports: [],
+  templateUrl: './task-item.component.html',
+  styleUrl: './task-item.component.css'
+})
+export class TaskItemComponent {
+
+}
diff --git a/src/app/tasks/task-list/task-list.component.css b/src/app/tasks/task-list/task-list.component.css
diff --git a/src/app/tasks/task-list/task-list.component.html b/src/app/tasks/task-list/task-list.component.html
@@ -0,0 +1 @@
+<p>task-list works!</p>
diff --git a/src/app/tasks/task-list/task-list.component.ts b/src/app/tasks/task-list/task-list.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-task-list',
+  imports: [],
+  templateUrl: './task-list.component.html',
+  styleUrl: './task-list.component.css'
+})
+export class TaskListComponent {
+
+}
diff --git a/src/app/tasks/task.model.ts b/src/app/tasks/task.model.ts
@@ -0,0 +1,6 @@
+export interface Task {
+  id: string;
+  title: string;
+  description: string;
+  completed: boolean;
+}
diff --git a/src/app/tasks/task.service.ts b/src/app/tasks/task.service.ts
@@ -0,0 +1,36 @@
+import { Injectable } from '@angular/core';
+import { Task } from './task.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TasksService {
+  private storageKey = 'taskManager';
+
+  getTasks(): Task[] {
+    const tasks = localStorage.getItem(this.storageKey);
+    return tasks ? JSON.parse(tasks) : [];
+  }
+
+  saveTasks(tasks: Task[]): void {
+    localStorage.setItem(this.storageKey, JSON.stringify(tasks));
+  }
+
+  addTasks(task: Task): void {
+    const tasks = this.getTasks();
+    tasks.push(task);
+    this.saveTasks(tasks);
+  }
+
+  updateTasks(updateTask: Task): void {
+    const tasks = this.getTasks().map((task) =>
+      task.id === updateTask.id ? updateTask : task
+    );
+    this.saveTasks(tasks);
+  }
+
+  deleteTasks(taskId: string):void{
+    const tasks = this.getTasks().filter((task) => task.id !== taskId)
+    this.saveTasks(tasks);
+  }
+}
diff --git a/src/index.html b/src/index.html
@@ -6,6 +6,8 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>

diff --git a/src/main.ts b/src/main.ts
@@ -2,8 +2,9 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
 import { LocationStrategy, HashLocationStrategy } from '@angular/common';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 
 bootstrapApplication(AppComponent, {
   ...appConfig,
-  providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }],
+  providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }, provideAnimationsAsync()],
 }).catch((err) => console.error(err));
diff --git a/src/styles.css b/src/styles.css
@@ -1 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }