diff --git a/angular.json b/angular.json index f64f8e0..5f256f2 100644 --- a/angular.json +++ b/angular.json @@ -24,9 +24,7 @@ "input": "public" } ], - "styles": [ - "src/styles.css" - ] + "styles": ["src/material-theme.scss", "src/styles.css"] }, "configurations": { "production": { diff --git a/package-lock.json b/package-lock.json index 9182cec..e641af5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,10 +8,12 @@ "name": "do-it-earlier", "version": "0.0.0", "dependencies": { + "@angular/cdk": "^22.2.0", "@angular/common": "^22.0.0", "@angular/compiler": "^22.0.0", "@angular/core": "^22.0.0", "@angular/forms": "^22.0.0", + "@angular/material": "^22.2.0", "@angular/platform-browser": "^22.0.0", "@angular/router": "^22.0.0", "rxjs": "~7.8.0", @@ -221,6 +223,23 @@ } } }, + "node_modules/@angular/cdk": { + "version": "22.2.0", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-22.2.0.tgz", + "integrity": "sha512-Vxiqo03yKxzmON+hfa0UkUSC+TrWdtRgc1MtkE5l3NJQ5euF9Os4kOqDfW1nDt3/AjCplE64HX3h0gOK5m3zjw==", + "license": "MIT", + "dependencies": { + "parse5": "^8.0.0", + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/common": "^22.0.0 || ^23.0.0", + "@angular/core": "^22.0.0 || ^23.0.0", + "@angular/forms": "^22.0.0 || ^23.0.0", + "@angular/platform-browser": "^22.0.0 || ^23.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, "node_modules/@angular/cli": { "version": "22.1.7", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-22.1.7.tgz", @@ -358,6 +377,23 @@ "rxjs": "^6.5.3 || ^7.4.0" } }, + "node_modules/@angular/material": { + "version": "22.2.0", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-22.2.0.tgz", + "integrity": "sha512-upeJyTUwiq3oMxGsLtTmddTjdqN8xgO0M2Rs3GaLSPqcXp/n7ScrDdN6sFHYLZtIs1KHmMEYnSBHm5F1ofVZow==", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/cdk": "22.2.0", + "@angular/common": "^22.0.0 || ^23.0.0", + "@angular/core": "^22.0.0 || ^23.0.0", + "@angular/forms": "^22.0.0 || ^23.0.0", + "@angular/platform-browser": "^22.0.0 || ^23.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, "node_modules/@angular/platform-browser": { "version": "22.1.5", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-22.1.5.tgz", @@ -6282,7 +6318,6 @@ "version": "8.0.1", "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.1.tgz", "integrity": "sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==", - "dev": true, "license": "MIT", "dependencies": { "entities": "^8.0.0" @@ -6336,7 +6371,6 @@ "version": "8.1.0", "resolved": "https://registry.npmjs.org/entities/-/entities-8.1.0.tgz", "integrity": "sha512-kxL7msIffSuh9aaFAMD7rxAIuTRMAHMeBtgHW2yUdWw732ZNh4MehkF2gdjvtdmikkaIP9bFDDJOPlsvm7avrA==", - "dev": true, "license": "BSD-2-Clause", "engines": { "node": ">=20.19.0" diff --git a/package.json b/package.json index 4bfda8a..03a9449 100644 --- a/package.json +++ b/package.json @@ -11,10 +11,12 @@ "private": true, "packageManager": "npm@11.16.0", "dependencies": { + "@angular/cdk": "^22.2.0", "@angular/common": "^22.0.0", "@angular/compiler": "^22.0.0", "@angular/core": "^22.0.0", "@angular/forms": "^22.0.0", + "@angular/material": "^22.2.0", "@angular/platform-browser": "^22.0.0", "@angular/router": "^22.0.0", "rxjs": "~7.8.0", @@ -29,4 +31,4 @@ "typescript": "~6.0.2", "vitest": "^4.0.8" } -} \ No newline at end of file +} diff --git a/src/index.html b/src/index.html index 5a593ed..6216e77 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,34 @@ - - - DoItEarlier - - - - - - - + + + DoItEarlier + + + + + + + + + + + + + diff --git a/src/material-theme.scss b/src/material-theme.scss new file mode 100644 index 0000000..8c3e9dd --- /dev/null +++ b/src/material-theme.scss @@ -0,0 +1,38 @@ +// Include theming for Angular Material with `mat.theme()`. +// This Sass mixin will define CSS variables that are used for styling Angular Material +// components according to the Material 3 design spec. +// Learn more about theming and how to use it for your application's +// custom components at https://material.angular.dev/guide/theming +@use '@angular/material' as mat; + +html { + height: 100%; + @include mat.theme( + ( + color: ( + primary: mat.$magenta-palette, + tertiary: mat.$violet-palette, + ), + typography: Roboto, + density: 0, + ) + ); +} + +body { + // Default the application to a light color theme. This can be changed to + // `dark` to enable the dark color theme, or to `light dark` to defer to the + // user's system settings. + color-scheme: light; + + // Set a default background, font and text colors for the application using + // Angular Material's system-level CSS variables. Learn more about these + // variables at https://material.angular.dev/guide/system-variables + background-color: var(--mat-sys-surface); + color: var(--mat-sys-on-surface); + font: var(--mat-sys-body-medium); + + // Reset the user agent margin. + margin: 0; + height: 100%; +} diff --git a/src/services/group.service.ts b/src/services/group.service.ts index be86359..6971e86 100644 --- a/src/services/group.service.ts +++ b/src/services/group.service.ts @@ -8,16 +8,16 @@ export class GroupService extends BaseService { return this.get("group"); } - public addGroup(name:string):Observable{ - let body:Group = { - id_group:0, - name_group:name, + public addGroup(name: string): Observable { + let body: Group = { + id_group: 0, + name_group: name, }; - return this.post("group/add",body); + return this.post("group/add", body); } - public deleteGroup(id_group:number):Observable{ + public deleteGroup(id_group: number): Observable { return this.delete(`group/delete?id=${id_group}`); } } diff --git a/src/services/project.service.ts b/src/services/project.service.ts index 505ae54..7e6796d 100644 --- a/src/services/project.service.ts +++ b/src/services/project.service.ts @@ -17,4 +17,8 @@ export class ProjectService extends BaseService { return this.post("project/add", body); } + + public deleteProject(id_project: number): Observable { + return this.delete(`project/delete?id=${id_project}`); + } } diff --git a/src/view/pages/home/home.component.html b/src/view/pages/home/home.component.html index 8ab3feb..aaa5fb7 100644 --- a/src/view/pages/home/home.component.html +++ b/src/view/pages/home/home.component.html @@ -12,7 +12,10 @@ {{ task.name_task }}

- + + }
@@ -49,7 +52,9 @@ {{ group.name_group }}

- + } @@ -72,12 +77,19 @@ Section projets
- @for (project of projects(); track project.id_project){ -

- {{ project.name_project }} -

- } +
+ @for (project of projects(); track project.id_project){ +

+ {{ project.name_project }} +

+ + } +
+ +
@if (showProjectForm){ @@ -85,7 +97,9 @@ - + }
diff --git a/src/view/pages/home/home.component.ts b/src/view/pages/home/home.component.ts index 2d68048..dc1e612 100644 --- a/src/view/pages/home/home.component.ts +++ b/src/view/pages/home/home.component.ts @@ -8,9 +8,10 @@ import { ProjectService } from '../../../services/project.service'; import { Project } from '../../../model/Project'; import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; import { Observable } from 'rxjs'; +import { MatIconModule } from '@angular/material/icon'; @Component({ - imports: [RouterOutlet, ReactiveFormsModule], + imports: [RouterOutlet, ReactiveFormsModule, MatIconModule], selector: 'app-root', styleUrl: './home.component.css', templateUrl: './home.component.html', @@ -85,10 +86,12 @@ export class Home { * submitTask */ public submitTask(): void { - let response: Observable = this.taskService.addTask(this.newTaskForm.controls.name.value!, + let response: Observable = this.taskService.addTask( + this.newTaskForm.controls.name.value!, this.newTaskForm.controls.dueDate.value, this.newTaskForm.controls.priority.value, - this.newTaskForm.controls.status.value); + this.newTaskForm.controls.status.value + ); response.subscribe({ next: (response) => { @@ -128,7 +131,9 @@ export class Home { * submitGroup */ public submitGroup() { - let response: Observable = this.groupService.addGroup(this.newGroupForm.controls.name.value!); + let response: Observable = this.groupService.addGroup( + this.newGroupForm.controls.name.value! + ); response.subscribe({ next: (response) => { @@ -145,8 +150,8 @@ export class Home { /** * deleteGroup */ - public deleteGroup(id_group:number) { - let response:Observable = this.groupService.deleteGroup(id_group); + public deleteGroup(id_group: number) { + let response: Observable = this.groupService.deleteGroup(id_group); response.subscribe({ next: () => { @@ -168,7 +173,9 @@ export class Home { * submitProject */ public submitProject() { - let response: Observable = this.projectService.addProject(this.newProjectForm.controls.name.value!); + let response: Observable = this.projectService.addProject( + this.newProjectForm.controls.name.value! + ); response.subscribe({ next: (response) => { @@ -181,4 +188,22 @@ export class Home { } }); } + + /** + * deleteProject + */ + public deleteProject(id_project: number) { + let response: Observable = this.projectService.deleteProject(id_project); + + response.subscribe({ + next: () => { + this.projects.update((projects) => { + return projects.filter((project) => project.id_project != id_project); + }); + }, + error: (error) => { + console.error(`Suppression du projet impossible\nErreur:${error.error.message}`); + } + }); + } }