From a269e146872d6cf700f6ff9ee9b32da55b999318 Mon Sep 17 00:00:00 2001 From: tomori-k <108829509+tomori-k@users.noreply.github.com> Date: Fri, 9 Feb 2024 17:51:19 +0900 Subject: [PATCH 01/17] =?UTF-8?q?Router=20=E3=81=AE=E8=A8=AD=E5=AE=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.component.html | 337 +----------------- src/app/app.component.ts | 1 - src/app/app.routes.ts | 17 +- src/app/pages/home/home.component.html | 1 + src/app/pages/home/home.component.scss | 0 src/app/pages/home/home.component.spec.ts | 23 ++ src/app/pages/home/home.component.ts | 12 + .../pages/todo-page/todo-page.component.html | 1 + .../pages/todo-page/todo-page.component.scss | 0 .../todo-page/todo-page.component.spec.ts | 23 ++ .../pages/todo-page/todo-page.component.ts | 12 + 11 files changed, 88 insertions(+), 339 deletions(-) create mode 100644 src/app/pages/home/home.component.html create mode 100644 src/app/pages/home/home.component.scss create mode 100644 src/app/pages/home/home.component.spec.ts create mode 100644 src/app/pages/home/home.component.ts create mode 100644 src/app/pages/todo-page/todo-page.component.html create mode 100644 src/app/pages/todo-page/todo-page.component.scss create mode 100644 src/app/pages/todo-page/todo-page.component.spec.ts create mode 100644 src/app/pages/todo-page/todo-page.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 36093e1..12b5d24 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,336 +1 @@ - - - - - - - - - - - -
-
-
- -

Hello, {{ title }}

-

Congratulations! Your app is running. 🎉

-
- -
-
- @for (item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; track item.title) { - - {{ item.title }} - - - - - } -
- -
-
-
- - - - - - - - - - - + \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 9d39c38..9292758 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -9,5 +9,4 @@ import { RouterOutlet } from '@angular/router'; styleUrl: './app.component.scss' }) export class AppComponent { - title = 'todo-app-angular'; } diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index dc39edb..bf42616 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,3 +1,16 @@ -import { Routes } from '@angular/router'; +import { Routes } from '@angular/router' +import { HomeComponent } from './pages/home/home.component' +import { TodoPageComponent } from './pages/todo-page/todo-page.component' -export const routes: Routes = []; +export const routes: Routes = [ + { + path: '', + component: HomeComponent, + title: 'Home', + }, + { + path: 'list', + component: TodoPageComponent, + title: 'TODO', + }, +] diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html new file mode 100644 index 0000000..5f2c53f --- /dev/null +++ b/src/app/pages/home/home.component.html @@ -0,0 +1 @@ +

home works!

diff --git a/src/app/pages/home/home.component.scss b/src/app/pages/home/home.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/home/home.component.spec.ts b/src/app/pages/home/home.component.spec.ts new file mode 100644 index 0000000..60c47c4 --- /dev/null +++ b/src/app/pages/home/home.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HomeComponent } from './home.component'; + +describe('HomeComponent', () => { + let component: HomeComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [HomeComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(HomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts new file mode 100644 index 0000000..deb69c4 --- /dev/null +++ b/src/app/pages/home/home.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-home', + standalone: true, + imports: [], + templateUrl: './home.component.html', + styleUrl: './home.component.scss' +}) +export class HomeComponent { + +} diff --git a/src/app/pages/todo-page/todo-page.component.html b/src/app/pages/todo-page/todo-page.component.html new file mode 100644 index 0000000..04200d3 --- /dev/null +++ b/src/app/pages/todo-page/todo-page.component.html @@ -0,0 +1 @@ +

todo-page works!

diff --git a/src/app/pages/todo-page/todo-page.component.scss b/src/app/pages/todo-page/todo-page.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/todo-page/todo-page.component.spec.ts b/src/app/pages/todo-page/todo-page.component.spec.ts new file mode 100644 index 0000000..31a9f10 --- /dev/null +++ b/src/app/pages/todo-page/todo-page.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TodoPageComponent } from './todo-page.component'; + +describe('TodoPageComponent', () => { + let component: TodoPageComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [TodoPageComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(TodoPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/todo-page/todo-page.component.ts b/src/app/pages/todo-page/todo-page.component.ts new file mode 100644 index 0000000..8f76989 --- /dev/null +++ b/src/app/pages/todo-page/todo-page.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-todo-page', + standalone: true, + imports: [], + templateUrl: './todo-page.component.html', + styleUrl: './todo-page.component.scss' +}) +export class TodoPageComponent { + +} From b9ec840565d155f1d3a280fa0ea884ffd5995979 Mon Sep 17 00:00:00 2001 From: tomori-k <108829509+tomori-k@users.noreply.github.com> Date: Fri, 9 Feb 2024 17:52:41 +0900 Subject: [PATCH 02/17] =?UTF-8?q?=E3=83=88=E3=83=83=E3=83=97=E3=81=8B?= =?UTF-8?q?=E3=82=89=E3=81=AE=E9=81=B7=E7=A7=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/pages/home/home.component.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index 5f2c53f..216679e 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -1 +1,3 @@ -

home works!

+ From ba9af5048be3e8a174d002863b22d10f9cf3623e Mon Sep 17 00:00:00 2001 From: tomori-k <108829509+tomori-k@users.noreply.github.com> Date: Fri, 9 Feb 2024 18:08:29 +0900 Subject: [PATCH 03/17] =?UTF-8?q?todo=E4=B8=80=E8=A6=A7=E8=A1=A8=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../todo/todo-item/todo-item.component.html | 1 + .../todo/todo-item/todo-item.component.scss | 0 .../todo-item/todo-item.component.spec.ts | 23 +++++++++++ .../todo/todo-item/todo-item.component.ts | 14 +++++++ .../todo/todo-list/todo-list.component.html | 3 ++ .../todo/todo-list/todo-list.component.scss | 0 .../todo-list/todo-list.component.spec.ts | 23 +++++++++++ .../todo/todo-list/todo-list.component.ts | 16 ++++++++ src/app/models.ts | 19 +++++++++ .../pages/todo-page/todo-page.component.html | 2 +- .../pages/todo-page/todo-page.component.ts | 39 +++++++++++++++++-- 11 files changed, 135 insertions(+), 5 deletions(-) create mode 100644 src/app/components/todo/todo-item/todo-item.component.html create mode 100644 src/app/components/todo/todo-item/todo-item.component.scss create mode 100644 src/app/components/todo/todo-item/todo-item.component.spec.ts create mode 100644 src/app/components/todo/todo-item/todo-item.component.ts create mode 100644 src/app/components/todo/todo-list/todo-list.component.html create mode 100644 src/app/components/todo/todo-list/todo-list.component.scss create mode 100644 src/app/components/todo/todo-list/todo-list.component.spec.ts create mode 100644 src/app/components/todo/todo-list/todo-list.component.ts create mode 100644 src/app/models.ts diff --git a/src/app/components/todo/todo-item/todo-item.component.html b/src/app/components/todo/todo-item/todo-item.component.html new file mode 100644 index 0000000..7c33ca8 --- /dev/null +++ b/src/app/components/todo/todo-item/todo-item.component.html @@ -0,0 +1 @@ +
  • {{ todo.title }}
    • diff --git a/src/app/components/todo/todo-item/todo-item.component.scss b/src/app/components/todo/todo-item/todo-item.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/todo/todo-item/todo-item.component.spec.ts b/src/app/components/todo/todo-item/todo-item.component.spec.ts new file mode 100644 index 0000000..5521c5e --- /dev/null +++ b/src/app/components/todo/todo-item/todo-item.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TodoItemComponent } from './todo-item.component'; + +describe('TodoItemComponent', () => { + let component: TodoItemComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [TodoItemComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(TodoItemComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/todo/todo-item/todo-item.component.ts b/src/app/components/todo/todo-item/todo-item.component.ts new file mode 100644 index 0000000..50ccde9 --- /dev/null +++ b/src/app/components/todo/todo-item/todo-item.component.ts @@ -0,0 +1,14 @@ +import { Component, Input } from '@angular/core' +import { Todo } from '../../../models' + +@Component({ + selector: 'app-todo-item', + standalone: true, + imports: [], + templateUrl: './todo-item.component.html', + styleUrl: './todo-item.component.scss', +}) +export class TodoItemComponent { + @Input() + todo!: Todo +} diff --git a/src/app/components/todo/todo-list/todo-list.component.html b/src/app/components/todo/todo-list/todo-list.component.html new file mode 100644 index 0000000..33e5835 --- /dev/null +++ b/src/app/components/todo/todo-list/todo-list.component.html @@ -0,0 +1,3 @@ +
      + +
    diff --git a/src/app/components/todo/todo-list/todo-list.component.scss b/src/app/components/todo/todo-list/todo-list.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/todo/todo-list/todo-list.component.spec.ts b/src/app/components/todo/todo-list/todo-list.component.spec.ts new file mode 100644 index 0000000..6ca0ced --- /dev/null +++ b/src/app/components/todo/todo-list/todo-list.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TodoListComponent } from './todo-list.component'; + +describe('TodoListComponent', () => { + let component: TodoListComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [TodoListComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(TodoListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/todo/todo-list/todo-list.component.ts b/src/app/components/todo/todo-list/todo-list.component.ts new file mode 100644 index 0000000..7c41221 --- /dev/null +++ b/src/app/components/todo/todo-list/todo-list.component.ts @@ -0,0 +1,16 @@ +import { Component, Input } from '@angular/core' +import { Todo } from '../../../models' +import { TodoItemComponent } from '../todo-item/todo-item.component' +import { CommonModule } from '@angular/common' + +@Component({ + selector: 'app-todo-list', + standalone: true, + imports: [TodoItemComponent, CommonModule], + templateUrl: './todo-list.component.html', + styleUrl: './todo-list.component.scss', +}) +export class TodoListComponent { + @Input() + todoList!: Todo[] +} diff --git a/src/app/models.ts b/src/app/models.ts new file mode 100644 index 0000000..b6e24ef --- /dev/null +++ b/src/app/models.ts @@ -0,0 +1,19 @@ +export type TodoState = 0 | 1 | 2 + +export type Todo = { + id: number + categoryId: number + title: string + body: string + state: TodoState + updatedAt: Date + createdAt: Date +} + +export type TodoCategory = { + id: number + name: string + color: string + updatedAt: Date + createdAt: Date +} diff --git a/src/app/pages/todo-page/todo-page.component.html b/src/app/pages/todo-page/todo-page.component.html index 04200d3..2f14ce3 100644 --- a/src/app/pages/todo-page/todo-page.component.html +++ b/src/app/pages/todo-page/todo-page.component.html @@ -1 +1 @@ -

    todo-page works!

    + diff --git a/src/app/pages/todo-page/todo-page.component.ts b/src/app/pages/todo-page/todo-page.component.ts index 8f76989..9b4fc80 100644 --- a/src/app/pages/todo-page/todo-page.component.ts +++ b/src/app/pages/todo-page/todo-page.component.ts @@ -1,12 +1,43 @@ -import { Component } from '@angular/core'; +import { Component } from '@angular/core' +import { Todo } from '../../models' +import { TodoListComponent } from '../../components/todo/todo-list/todo-list.component' @Component({ selector: 'app-todo-page', standalone: true, - imports: [], + imports: [TodoListComponent], templateUrl: './todo-page.component.html', - styleUrl: './todo-page.component.scss' + styleUrl: './todo-page.component.scss', }) export class TodoPageComponent { - + // テストデータ + public readonly todoList: Todo[] = [ + { + id: 1, + categoryId: 1, + title: 'Improve design', + body: 'improve the design of the header', + state: 0, + updatedAt: new Date(2000, 5, 14, 12, 31, 59), + createdAt: new Date(2000, 5, 14, 12, 31, 59), + }, + { + id: 2, + categoryId: 2, + title: 'fix Controller', + body: 'fix Controller name', + state: 1, + updatedAt: new Date(2020, 7, 19, 8, 25, 34), + createdAt: new Date(2012, 6, 3, 3, 3, 3), + }, + { + id: 3, + categoryId: 3, + title: 'Create new DB', + body: 'Create new DB', + state: 2, + updatedAt: new Date(2024, 2, 9, 18, 5, 36), + createdAt: new Date(2012, 2, 29, 7, 6, 45), + }, + ] } From 5d96142ac55e0e9e61aab7a0e9450a228e60e9b8 Mon Sep 17 00:00:00 2001 From: tomori-k <108829509+tomori-k@users.noreply.github.com> Date: Fri, 9 Feb 2024 18:55:21 +0900 Subject: [PATCH 04/17] =?UTF-8?q?=E4=BD=9C=E6=88=90=E3=83=9A=E3=83=BC?= =?UTF-8?q?=E3=82=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.routes.ts | 6 ++ .../todo-create/todo-create.component.html | 24 +++++++ .../todo-create/todo-create.component.scss | 0 .../todo-create/todo-create.component.spec.ts | 23 +++++++ .../todo-create/todo-create.component.ts | 62 +++++++++++++++++++ .../pages/todo-page/todo-page.component.html | 1 + 6 files changed, 116 insertions(+) create mode 100644 src/app/pages/todo-create/todo-create.component.html create mode 100644 src/app/pages/todo-create/todo-create.component.scss create mode 100644 src/app/pages/todo-create/todo-create.component.spec.ts create mode 100644 src/app/pages/todo-create/todo-create.component.ts diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index bf42616..0a00c12 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,6 +1,7 @@ import { Routes } from '@angular/router' import { HomeComponent } from './pages/home/home.component' import { TodoPageComponent } from './pages/todo-page/todo-page.component' +import { TodoCreateComponent } from './pages/todo-create/todo-create.component' export const routes: Routes = [ { @@ -13,4 +14,9 @@ export const routes: Routes = [ component: TodoPageComponent, title: 'TODO', }, + { + path: 'create', + component: TodoCreateComponent, + title: 'Add TODO', + }, ] diff --git a/src/app/pages/todo-create/todo-create.component.html b/src/app/pages/todo-create/todo-create.component.html new file mode 100644 index 0000000..6fbd250 --- /dev/null +++ b/src/app/pages/todo-create/todo-create.component.html @@ -0,0 +1,24 @@ +
    + + +
    +

    + title is required. +

    +
    + + + +
    +

    + TODO body is required. +

    +
    + + + +
    diff --git a/src/app/pages/todo-create/todo-create.component.scss b/src/app/pages/todo-create/todo-create.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/todo-create/todo-create.component.spec.ts b/src/app/pages/todo-create/todo-create.component.spec.ts new file mode 100644 index 0000000..93210df --- /dev/null +++ b/src/app/pages/todo-create/todo-create.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TodoCreateComponent } from './todo-create.component'; + +describe('TodoCreateComponent', () => { + let component: TodoCreateComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [TodoCreateComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(TodoCreateComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/todo-create/todo-create.component.ts b/src/app/pages/todo-create/todo-create.component.ts new file mode 100644 index 0000000..b3f4d37 --- /dev/null +++ b/src/app/pages/todo-create/todo-create.component.ts @@ -0,0 +1,62 @@ +import { Component } from '@angular/core' +import { TodoCategory } from '../../models' +import { CommonModule } from '@angular/common' +import { + FormControl, + FormGroup, + ReactiveFormsModule, + Validators, +} from '@angular/forms' + +@Component({ + selector: 'app-todo-create', + standalone: true, + imports: [CommonModule, ReactiveFormsModule], + templateUrl: './todo-create.component.html', + styleUrl: './todo-create.component.scss', +}) +export class TodoCreateComponent { + public readonly formGroup = new FormGroup({ + title: new FormControl('', Validators.required), + body: new FormControl('', Validators.required), + category: new FormControl(0), + }) + + public readonly categories: TodoCategory[] = [ + { + id: 1, + name: 'frontend', + color: '1', + updatedAt: new Date(2021, 3, 9, 7, 48, 56), + createdAt: new Date(2021, 3, 9, 4, 8, 57), + }, + { + id: 2, + name: 'backend', + color: '2', + updatedAt: new Date(2021, 3, 9, 7, 48, 56), + createdAt: new Date(2021, 3, 9, 4, 8, 57), + }, + { + id: 3, + name: 'infra', + color: '3', + updatedAt: new Date(2021, 3, 9, 7, 48, 56), + createdAt: new Date(2021, 3, 9, 4, 8, 57), + }, + ] + + // form getters + + get titleForm() { + return this.formGroup.controls.title + } + + get bodyForm() { + return this.formGroup.controls.body + } + + get categoryForm() { + return this.formGroup.controls.category + } +} diff --git a/src/app/pages/todo-page/todo-page.component.html b/src/app/pages/todo-page/todo-page.component.html index 2f14ce3..647ae19 100644 --- a/src/app/pages/todo-page/todo-page.component.html +++ b/src/app/pages/todo-page/todo-page.component.html @@ -1 +1,2 @@ +追加 From 6270b215fc3382bbec0d1a7fbcf6c531fa0341c1 Mon Sep 17 00:00:00 2001 From: tomori-k <108829509+tomori-k@users.noreply.github.com> Date: Tue, 20 Feb 2024 15:27:08 +0900 Subject: [PATCH 05/17] =?UTF-8?q?=E7=B7=A8=E9=9B=86=E3=83=9A=E3=83=BC?= =?UTF-8?q?=E3=82=B8=E3=81=A8404=E3=83=9A=E3=83=BC=E3=82=B8=E3=81=AE?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.config.ts | 10 +- src/app/app.routes.ts | 11 +++ .../page-not-found.component.html | 1 + .../page-not-found.component.scss | 0 .../page-not-found.component.spec.ts | 23 +++++ .../page-not-found.component.ts | 12 +++ .../pages/todo-edit/todo-edit.component.html | 32 +++++++ .../pages/todo-edit/todo-edit.component.scss | 0 .../todo-edit/todo-edit.component.spec.ts | 23 +++++ .../pages/todo-edit/todo-edit.component.ts | 93 +++++++++++++++++++ 10 files changed, 200 insertions(+), 5 deletions(-) create mode 100644 src/app/pages/page-not-found/page-not-found.component.html create mode 100644 src/app/pages/page-not-found/page-not-found.component.scss create mode 100644 src/app/pages/page-not-found/page-not-found.component.spec.ts create mode 100644 src/app/pages/page-not-found/page-not-found.component.ts create mode 100644 src/app/pages/todo-edit/todo-edit.component.html create mode 100644 src/app/pages/todo-edit/todo-edit.component.scss create mode 100644 src/app/pages/todo-edit/todo-edit.component.spec.ts create mode 100644 src/app/pages/todo-edit/todo-edit.component.ts diff --git a/src/app/app.config.ts b/src/app/app.config.ts index 6c6ef60..91081fa 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -1,8 +1,8 @@ -import { ApplicationConfig } from '@angular/core'; -import { provideRouter } from '@angular/router'; +import { ApplicationConfig } from '@angular/core' +import { provideRouter, withComponentInputBinding } from '@angular/router' -import { routes } from './app.routes'; +import { routes } from './app.routes' export const appConfig: ApplicationConfig = { - providers: [provideRouter(routes)] -}; + providers: [provideRouter(routes, withComponentInputBinding())], +} diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 0a00c12..d4802fe 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -2,6 +2,8 @@ import { Routes } from '@angular/router' import { HomeComponent } from './pages/home/home.component' import { TodoPageComponent } from './pages/todo-page/todo-page.component' import { TodoCreateComponent } from './pages/todo-create/todo-create.component' +import { TodoEditComponent } from './pages/todo-edit/todo-edit.component' +import { PageNotFoundComponent } from './pages/page-not-found/page-not-found.component' export const routes: Routes = [ { @@ -19,4 +21,13 @@ export const routes: Routes = [ component: TodoCreateComponent, title: 'Add TODO', }, + { + path: 'edit/:id', + component: TodoEditComponent, + title: 'Edit TODO', + }, + { + path: '**', + component: PageNotFoundComponent, + }, ] diff --git a/src/app/pages/page-not-found/page-not-found.component.html b/src/app/pages/page-not-found/page-not-found.component.html new file mode 100644 index 0000000..a50502a --- /dev/null +++ b/src/app/pages/page-not-found/page-not-found.component.html @@ -0,0 +1 @@ +

    Page Not Found.

    diff --git a/src/app/pages/page-not-found/page-not-found.component.scss b/src/app/pages/page-not-found/page-not-found.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/page-not-found/page-not-found.component.spec.ts b/src/app/pages/page-not-found/page-not-found.component.spec.ts new file mode 100644 index 0000000..19ef971 --- /dev/null +++ b/src/app/pages/page-not-found/page-not-found.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PageNotFoundComponent } from './page-not-found.component'; + +describe('PageNotFoundComponent', () => { + let component: PageNotFoundComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [PageNotFoundComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(PageNotFoundComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/page-not-found/page-not-found.component.ts b/src/app/pages/page-not-found/page-not-found.component.ts new file mode 100644 index 0000000..11ff605 --- /dev/null +++ b/src/app/pages/page-not-found/page-not-found.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-page-not-found', + standalone: true, + imports: [], + templateUrl: './page-not-found.component.html', + styleUrl: './page-not-found.component.scss' +}) +export class PageNotFoundComponent { + +} diff --git a/src/app/pages/todo-edit/todo-edit.component.html b/src/app/pages/todo-edit/todo-edit.component.html new file mode 100644 index 0000000..6991c96 --- /dev/null +++ b/src/app/pages/todo-edit/todo-edit.component.html @@ -0,0 +1,32 @@ +
    + + +
    +

    + title is required. +

    +
    + + + +
    +

    + TODO body is required. +

    +
    + + + + + + + +
    diff --git a/src/app/pages/todo-edit/todo-edit.component.scss b/src/app/pages/todo-edit/todo-edit.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/todo-edit/todo-edit.component.spec.ts b/src/app/pages/todo-edit/todo-edit.component.spec.ts new file mode 100644 index 0000000..24fdfe4 --- /dev/null +++ b/src/app/pages/todo-edit/todo-edit.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TodoEditComponent } from './todo-edit.component'; + +describe('TodoEditComponent', () => { + let component: TodoEditComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [TodoEditComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(TodoEditComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/todo-edit/todo-edit.component.ts b/src/app/pages/todo-edit/todo-edit.component.ts new file mode 100644 index 0000000..2f6db1c --- /dev/null +++ b/src/app/pages/todo-edit/todo-edit.component.ts @@ -0,0 +1,93 @@ +import { Component, Input } from '@angular/core' +import { + FormControl, + FormGroup, + ReactiveFormsModule, + Validators, +} from '@angular/forms' +import { Todo, TodoCategory } from '../../models' +import { CommonModule } from '@angular/common' + +function getTodo(id: number): Todo { + // 一旦ダミーデータを返す + return { + id: id, + categoryId: 1, + title: 'Improve design', + body: 'improve the design of the header', + state: 0, + updatedAt: new Date(2000, 5, 14, 12, 31, 59), + createdAt: new Date(2000, 5, 14, 12, 31, 59), + } +} + +@Component({ + selector: 'app-todo-edit', + standalone: true, + imports: [CommonModule, ReactiveFormsModule], + templateUrl: './todo-edit.component.html', + styleUrl: './todo-edit.component.scss', +}) +export class TodoEditComponent { + public readonly formGroup = new FormGroup({ + title: new FormControl('', Validators.required), + body: new FormControl('', Validators.required), + category: new FormControl(0), + state: new FormControl(0), + }) + + // ダミーデータ + public readonly categories: TodoCategory[] = [ + { + id: 1, + name: 'frontend', + color: '1', + updatedAt: new Date(2021, 3, 9, 7, 48, 56), + createdAt: new Date(2021, 3, 9, 4, 8, 57), + }, + { + id: 2, + name: 'backend', + color: '2', + updatedAt: new Date(2021, 3, 9, 7, 48, 56), + createdAt: new Date(2021, 3, 9, 4, 8, 57), + }, + { + id: 3, + name: 'infra', + color: '3', + updatedAt: new Date(2021, 3, 9, 7, 48, 56), + createdAt: new Date(2021, 3, 9, 4, 8, 57), + }, + ] + + // path parameters + + @Input() + set id(todoId: number) { + const todo = getTodo(todoId) + + this.formTitle.setValue(todo.title) + this.formBody.setValue(todo.body) + this.formCategory.setValue(todo.categoryId) + this.formState.setValue(todo.state) + } + + // form controls + + get formTitle() { + return this.formGroup.controls.title + } + + get formBody() { + return this.formGroup.controls.body + } + + get formCategory() { + return this.formGroup.controls.category + } + + get formState() { + return this.formGroup.controls.state + } +} From 030b07c385245306fe1cf13e39c054de490011f4 Mon Sep 17 00:00:00 2001 From: tomori-k <108829509+tomori-k@users.noreply.github.com> Date: Tue, 20 Feb 2024 15:36:55 +0900 Subject: [PATCH 06/17] =?UTF-8?q?RouterLink=20=E3=82=92=E4=BD=BF=E7=94=A8?= =?UTF-8?q?=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/pages/todo-page/todo-page.component.html | 2 +- src/app/pages/todo-page/todo-page.component.ts | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/app/pages/todo-page/todo-page.component.html b/src/app/pages/todo-page/todo-page.component.html index 647ae19..aa2c63c 100644 --- a/src/app/pages/todo-page/todo-page.component.html +++ b/src/app/pages/todo-page/todo-page.component.html @@ -1,2 +1,2 @@ -追加 +追加 diff --git a/src/app/pages/todo-page/todo-page.component.ts b/src/app/pages/todo-page/todo-page.component.ts index 9b4fc80..6fac8cc 100644 --- a/src/app/pages/todo-page/todo-page.component.ts +++ b/src/app/pages/todo-page/todo-page.component.ts @@ -1,11 +1,12 @@ import { Component } from '@angular/core' import { Todo } from '../../models' import { TodoListComponent } from '../../components/todo/todo-list/todo-list.component' +import { RouterLink } from '@angular/router' @Component({ selector: 'app-todo-page', standalone: true, - imports: [TodoListComponent], + imports: [TodoListComponent, RouterLink], templateUrl: './todo-page.component.html', styleUrl: './todo-page.component.scss', }) From 9cd85c1f2c687cce70c44b224b9330ffad2d84e9 Mon Sep 17 00:00:00 2001 From: tomori-k <108829509+tomori-k@users.noreply.github.com> Date: Tue, 20 Feb 2024 15:56:17 +0900 Subject: [PATCH 07/17] =?UTF-8?q?TODO=20=E3=81=AE=E8=A9=B3=E7=B4=B0?= =?UTF-8?q?=E7=94=BB=E9=9D=A2=E3=81=A8=E3=80=81=E5=90=84=E3=83=9A=E3=83=BC?= =?UTF-8?q?=E3=82=B8=E3=81=B8=E3=81=AE=E7=94=BB=E9=9D=A2=E9=81=B7=E7=A7=BB?= =?UTF-8?q?=E3=82=92=E8=A8=AD=E5=AE=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.routes.ts | 6 ++++ .../todo/todo-item/todo-item.component.html | 4 ++- .../todo/todo-item/todo-item.component.ts | 3 +- .../todo-detail/todo-detail.component.html | 11 +++++++ .../todo-detail/todo-detail.component.scss | 0 .../todo-detail/todo-detail.component.spec.ts | 23 +++++++++++++ .../todo-detail/todo-detail.component.ts | 32 +++++++++++++++++++ 7 files changed, 77 insertions(+), 2 deletions(-) create mode 100644 src/app/pages/todo-detail/todo-detail.component.html create mode 100644 src/app/pages/todo-detail/todo-detail.component.scss create mode 100644 src/app/pages/todo-detail/todo-detail.component.spec.ts create mode 100644 src/app/pages/todo-detail/todo-detail.component.ts diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index d4802fe..2306edb 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -4,6 +4,7 @@ import { TodoPageComponent } from './pages/todo-page/todo-page.component' import { TodoCreateComponent } from './pages/todo-create/todo-create.component' import { TodoEditComponent } from './pages/todo-edit/todo-edit.component' import { PageNotFoundComponent } from './pages/page-not-found/page-not-found.component' +import { TodoDetailComponent } from './pages/todo-detail/todo-detail.component' export const routes: Routes = [ { @@ -16,6 +17,11 @@ export const routes: Routes = [ component: TodoPageComponent, title: 'TODO', }, + { + path: 'todo/:id', + component: TodoDetailComponent, + title: 'TODO Detail', + }, { path: 'create', component: TodoCreateComponent, diff --git a/src/app/components/todo/todo-item/todo-item.component.html b/src/app/components/todo/todo-item/todo-item.component.html index 7c33ca8..d5a699b 100644 --- a/src/app/components/todo/todo-item/todo-item.component.html +++ b/src/app/components/todo/todo-item/todo-item.component.html @@ -1 +1,3 @@ -
  • {{ todo.title }}
    • +
  • + {{ todo.title }} +
    • diff --git a/src/app/components/todo/todo-item/todo-item.component.ts b/src/app/components/todo/todo-item/todo-item.component.ts index 50ccde9..2ff5cc5 100644 --- a/src/app/components/todo/todo-item/todo-item.component.ts +++ b/src/app/components/todo/todo-item/todo-item.component.ts @@ -1,10 +1,11 @@ import { Component, Input } from '@angular/core' import { Todo } from '../../../models' +import { RouterLink } from '@angular/router' @Component({ selector: 'app-todo-item', standalone: true, - imports: [], + imports: [RouterLink], templateUrl: './todo-item.component.html', styleUrl: './todo-item.component.scss', }) diff --git a/src/app/pages/todo-detail/todo-detail.component.html b/src/app/pages/todo-detail/todo-detail.component.html new file mode 100644 index 0000000..c9480b8 --- /dev/null +++ b/src/app/pages/todo-detail/todo-detail.component.html @@ -0,0 +1,11 @@ +

    {{ todo?.title }}

    +

    {{ todo?.body }}

    +

    カテゴリ

    +

    {{ todo?.categoryId }}

    +

    ステータス

    +

    {{ todo?.state }}

    +

    操作

    + diff --git a/src/app/pages/todo-detail/todo-detail.component.scss b/src/app/pages/todo-detail/todo-detail.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/todo-detail/todo-detail.component.spec.ts b/src/app/pages/todo-detail/todo-detail.component.spec.ts new file mode 100644 index 0000000..87a420a --- /dev/null +++ b/src/app/pages/todo-detail/todo-detail.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TodoDetailComponent } from './todo-detail.component'; + +describe('TodoDetailComponent', () => { + let component: TodoDetailComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [TodoDetailComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(TodoDetailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/todo-detail/todo-detail.component.ts b/src/app/pages/todo-detail/todo-detail.component.ts new file mode 100644 index 0000000..2eab2c4 --- /dev/null +++ b/src/app/pages/todo-detail/todo-detail.component.ts @@ -0,0 +1,32 @@ +import { Component, Input } from '@angular/core' +import { Todo } from '../../models' +import { RouterLink } from '@angular/router' + +function getTodo(id: number): Todo { + // 一旦ダミーデータを返す + return { + id: id, + categoryId: 1, + title: 'Improve design', + body: 'improve the design of the header', + state: 0, + updatedAt: new Date(2000, 5, 14, 12, 31, 59), + createdAt: new Date(2000, 5, 14, 12, 31, 59), + } +} + +@Component({ + selector: 'app-todo-detail', + standalone: true, + imports: [RouterLink], + templateUrl: './todo-detail.component.html', + styleUrl: './todo-detail.component.scss', +}) +export class TodoDetailComponent { + public todo: Todo | null = null + + @Input() + set id(todoId: number) { + this.todo = getTodo(todoId) + } +} From 43f782b4a7b41bd3e5d4a53964c34a8956e15337 Mon Sep 17 00:00:00 2001 From: tomori-k <108829509+tomori-k@users.noreply.github.com> Date: Tue, 20 Feb 2024 16:29:56 +0900 Subject: [PATCH 08/17] =?UTF-8?q?=E9=9D=9E=E5=90=8C=E6=9C=9F=E5=AF=BE?= =?UTF-8?q?=E5=BF=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../todo-detail/todo-detail.component.html | 24 ++++++++++--------- .../todo-detail/todo-detail.component.ts | 9 +++---- .../pages/todo-edit/todo-edit.component.ts | 18 ++++++++------ 3 files changed, 29 insertions(+), 22 deletions(-) diff --git a/src/app/pages/todo-detail/todo-detail.component.html b/src/app/pages/todo-detail/todo-detail.component.html index c9480b8..9a719f5 100644 --- a/src/app/pages/todo-detail/todo-detail.component.html +++ b/src/app/pages/todo-detail/todo-detail.component.html @@ -1,11 +1,13 @@ -

    {{ todo?.title }}

    -

    {{ todo?.body }}

    -

    カテゴリ

    -

    {{ todo?.categoryId }}

    -

    ステータス

    -

    {{ todo?.state }}

    -

    操作

    - + +

    {{ todo.title }}

    +

    {{ todo.body }}

    +

    カテゴリ

    +

    {{ todo.categoryId }}

    +

    ステータス

    +

    {{ todo.state }}

    +

    操作

    + +     diff --git a/src/app/pages/todo-detail/todo-detail.component.ts b/src/app/pages/todo-detail/todo-detail.component.ts index 2eab2c4..61e8bb8 100644 --- a/src/app/pages/todo-detail/todo-detail.component.ts +++ b/src/app/pages/todo-detail/todo-detail.component.ts @@ -1,8 +1,9 @@ import { Component, Input } from '@angular/core' import { Todo } from '../../models' import { RouterLink } from '@angular/router' +import { CommonModule } from '@angular/common' -function getTodo(id: number): Todo { +async function getTodo(id: number): Promise { // 一旦ダミーデータを返す return { id: id, @@ -18,15 +19,15 @@ function getTodo(id: number): Todo { @Component({ selector: 'app-todo-detail', standalone: true, - imports: [RouterLink], + imports: [RouterLink, CommonModule], templateUrl: './todo-detail.component.html', styleUrl: './todo-detail.component.scss', }) export class TodoDetailComponent { - public todo: Todo | null = null + public todoPromise: Promise | null = null @Input() set id(todoId: number) { - this.todo = getTodo(todoId) + this.todoPromise = getTodo(todoId) } } diff --git a/src/app/pages/todo-edit/todo-edit.component.ts b/src/app/pages/todo-edit/todo-edit.component.ts index 2f6db1c..a2933e8 100644 --- a/src/app/pages/todo-edit/todo-edit.component.ts +++ b/src/app/pages/todo-edit/todo-edit.component.ts @@ -8,7 +8,7 @@ import { import { Todo, TodoCategory } from '../../models' import { CommonModule } from '@angular/common' -function getTodo(id: number): Todo { +async function getTodo(id: number): Promise { // 一旦ダミーデータを返す return { id: id, @@ -65,12 +65,7 @@ export class TodoEditComponent { @Input() set id(todoId: number) { - const todo = getTodo(todoId) - - this.formTitle.setValue(todo.title) - this.formBody.setValue(todo.body) - this.formCategory.setValue(todo.categoryId) - this.formState.setValue(todo.state) + this._loadTodo(todoId) } // form controls @@ -90,4 +85,13 @@ export class TodoEditComponent { get formState() { return this.formGroup.controls.state } + + private async _loadTodo(todoId: number) { + const todo = await getTodo(todoId) + + this.formTitle.setValue(todo.title) + this.formBody.setValue(todo.body) + this.formCategory.setValue(todo.categoryId) + this.formState.setValue(todo.state) + } } From aa0bd98a1423fd60d5d7f5c571833c087ef55a16 Mon Sep 17 00:00:00 2001 From: tomori-k <108829509+tomori-k@users.noreply.github.com> Date: Tue, 20 Feb 2024 16:59:57 +0900 Subject: [PATCH 09/17] =?UTF-8?q?TodoService=20=E5=B0=8E=E5=85=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../todo-detail/todo-detail.component.ts | 21 +++----- .../pages/todo-edit/todo-edit.component.ts | 23 +++------ .../pages/todo-page/todo-page.component.html | 2 +- .../pages/todo-page/todo-page.component.ts | 41 ++++------------ src/app/services/todo-service.ts | 48 +++++++++++++++++++ src/app/utils/converter.ts | 5 ++ 6 files changed, 77 insertions(+), 63 deletions(-) create mode 100644 src/app/services/todo-service.ts create mode 100644 src/app/utils/converter.ts diff --git a/src/app/pages/todo-detail/todo-detail.component.ts b/src/app/pages/todo-detail/todo-detail.component.ts index 61e8bb8..6a86ccc 100644 --- a/src/app/pages/todo-detail/todo-detail.component.ts +++ b/src/app/pages/todo-detail/todo-detail.component.ts @@ -2,19 +2,8 @@ import { Component, Input } from '@angular/core' import { Todo } from '../../models' import { RouterLink } from '@angular/router' import { CommonModule } from '@angular/common' - -async function getTodo(id: number): Promise { - // 一旦ダミーデータを返す - return { - id: id, - categoryId: 1, - title: 'Improve design', - body: 'improve the design of the header', - state: 0, - updatedAt: new Date(2000, 5, 14, 12, 31, 59), - createdAt: new Date(2000, 5, 14, 12, 31, 59), - } -} +import { TodoService } from '../../services/todo-service' +import { toInt } from '../../utils/converter' @Component({ selector: 'app-todo-detail', @@ -26,8 +15,10 @@ async function getTodo(id: number): Promise { export class TodoDetailComponent { public todoPromise: Promise | null = null + constructor(private readonly todoService: TodoService) {} + @Input() - set id(todoId: number) { - this.todoPromise = getTodo(todoId) + set id(todoId: string) { + this.todoPromise = this.todoService.getTodo(toInt(todoId)) } } diff --git a/src/app/pages/todo-edit/todo-edit.component.ts b/src/app/pages/todo-edit/todo-edit.component.ts index a2933e8..3bcaefd 100644 --- a/src/app/pages/todo-edit/todo-edit.component.ts +++ b/src/app/pages/todo-edit/todo-edit.component.ts @@ -7,19 +7,8 @@ import { } from '@angular/forms' import { Todo, TodoCategory } from '../../models' import { CommonModule } from '@angular/common' - -async function getTodo(id: number): Promise { - // 一旦ダミーデータを返す - return { - id: id, - categoryId: 1, - title: 'Improve design', - body: 'improve the design of the header', - state: 0, - updatedAt: new Date(2000, 5, 14, 12, 31, 59), - createdAt: new Date(2000, 5, 14, 12, 31, 59), - } -} +import { TodoService } from '../../services/todo-service' +import { toInt } from '../../utils/converter' @Component({ selector: 'app-todo-edit', @@ -61,11 +50,13 @@ export class TodoEditComponent { }, ] + constructor(private readonly todoService: TodoService) {} + // path parameters @Input() - set id(todoId: number) { - this._loadTodo(todoId) + set id(todoId: string) { + this._loadTodo(toInt(todoId)) } // form controls @@ -87,7 +78,7 @@ export class TodoEditComponent { } private async _loadTodo(todoId: number) { - const todo = await getTodo(todoId) + const todo = await this.todoService.getTodo(todoId) this.formTitle.setValue(todo.title) this.formBody.setValue(todo.body) diff --git a/src/app/pages/todo-page/todo-page.component.html b/src/app/pages/todo-page/todo-page.component.html index aa2c63c..9cd890c 100644 --- a/src/app/pages/todo-page/todo-page.component.html +++ b/src/app/pages/todo-page/todo-page.component.html @@ -1,2 +1,2 @@ - + 追加 diff --git a/src/app/pages/todo-page/todo-page.component.ts b/src/app/pages/todo-page/todo-page.component.ts index 6fac8cc..72f7981 100644 --- a/src/app/pages/todo-page/todo-page.component.ts +++ b/src/app/pages/todo-page/todo-page.component.ts @@ -2,43 +2,22 @@ import { Component } from '@angular/core' import { Todo } from '../../models' import { TodoListComponent } from '../../components/todo/todo-list/todo-list.component' import { RouterLink } from '@angular/router' +import { TodoService } from '../../services/todo-service' +import { CommonModule } from '@angular/common' @Component({ selector: 'app-todo-page', standalone: true, - imports: [TodoListComponent, RouterLink], + imports: [TodoListComponent, RouterLink, CommonModule], templateUrl: './todo-page.component.html', styleUrl: './todo-page.component.scss', }) export class TodoPageComponent { - // テストデータ - public readonly todoList: Todo[] = [ - { - id: 1, - categoryId: 1, - title: 'Improve design', - body: 'improve the design of the header', - state: 0, - updatedAt: new Date(2000, 5, 14, 12, 31, 59), - createdAt: new Date(2000, 5, 14, 12, 31, 59), - }, - { - id: 2, - categoryId: 2, - title: 'fix Controller', - body: 'fix Controller name', - state: 1, - updatedAt: new Date(2020, 7, 19, 8, 25, 34), - createdAt: new Date(2012, 6, 3, 3, 3, 3), - }, - { - id: 3, - categoryId: 3, - title: 'Create new DB', - body: 'Create new DB', - state: 2, - updatedAt: new Date(2024, 2, 9, 18, 5, 36), - createdAt: new Date(2012, 2, 29, 7, 6, 45), - }, - ] + public todoListPromise: Promise | null = null + + public constructor(private readonly todoService: TodoService) {} + + public ngOnInit() { + this.todoListPromise = this.todoService.getAll() + } } diff --git a/src/app/services/todo-service.ts b/src/app/services/todo-service.ts new file mode 100644 index 0000000..7c6ed59 --- /dev/null +++ b/src/app/services/todo-service.ts @@ -0,0 +1,48 @@ +import { Injectable } from '@angular/core' +import { Todo } from '../models' + +@Injectable({ + providedIn: 'root', +}) +export class TodoService { + // テストデータ + public readonly todoList: Todo[] = [ + { + id: 1, + categoryId: 1, + title: 'Improve design', + body: 'improve the design of the header', + state: 0, + updatedAt: new Date(2000, 5, 14, 12, 31, 59), + createdAt: new Date(2000, 5, 14, 12, 31, 59), + }, + { + id: 2, + categoryId: 2, + title: 'fix Controller', + body: 'fix Controller name', + state: 1, + updatedAt: new Date(2020, 7, 19, 8, 25, 34), + createdAt: new Date(2012, 6, 3, 3, 3, 3), + }, + { + id: 3, + categoryId: 3, + title: 'Create new DB', + body: 'Create new DB', + state: 2, + updatedAt: new Date(2024, 2, 9, 18, 5, 36), + createdAt: new Date(2012, 2, 29, 7, 6, 45), + }, + ] + + public async getTodo(todoId: number): Promise { + const todo = this.todoList.find((todo) => todo.id === todoId) + if (todo == null) throw new Error('Todo not found') + return todo + } + + public async getAll(): Promise { + return this.todoList + } +} diff --git a/src/app/utils/converter.ts b/src/app/utils/converter.ts new file mode 100644 index 0000000..28a18f0 --- /dev/null +++ b/src/app/utils/converter.ts @@ -0,0 +1,5 @@ +export function toInt(s: string): number { + const v = parseInt(s, 10) + if (Number.isNaN(v)) throw new Error(`Invalid value: ${s}`) + return v +} From f45cbd71bcadf079cb28b32c3ef6fa22acbe85a5 Mon Sep 17 00:00:00 2001 From: tomori-k <108829509+tomori-k@users.noreply.github.com> Date: Tue, 20 Feb 2024 17:17:18 +0900 Subject: [PATCH 10/17] =?UTF-8?q?=E8=BF=BD=E5=8A=A0=E6=A9=9F=E8=83=BD?= =?UTF-8?q?=E3=81=AE=E5=AE=9F=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/models.ts | 6 ++++ .../todo-create/todo-create.component.html | 2 +- .../todo-create/todo-create.component.ts | 35 ++++++++++++++++++- src/app/services/todo-service.ts | 13 ++++++- 4 files changed, 53 insertions(+), 3 deletions(-) diff --git a/src/app/models.ts b/src/app/models.ts index b6e24ef..e95ac65 100644 --- a/src/app/models.ts +++ b/src/app/models.ts @@ -10,6 +10,12 @@ export type Todo = { createdAt: Date } +export type TodoCreate = { + categoryId: number + title: string + body: string +} + export type TodoCategory = { id: number name: string diff --git a/src/app/pages/todo-create/todo-create.component.html b/src/app/pages/todo-create/todo-create.component.html index 6fbd250..0f0692a 100644 --- a/src/app/pages/todo-create/todo-create.component.html +++ b/src/app/pages/todo-create/todo-create.component.html @@ -20,5 +20,5 @@ {{ category.name }} - + diff --git a/src/app/pages/todo-create/todo-create.component.ts b/src/app/pages/todo-create/todo-create.component.ts index b3f4d37..e38b086 100644 --- a/src/app/pages/todo-create/todo-create.component.ts +++ b/src/app/pages/todo-create/todo-create.component.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core' -import { TodoCategory } from '../../models' +import { TodoCategory, TodoCreate } from '../../models' import { CommonModule } from '@angular/common' import { FormControl, @@ -7,6 +7,8 @@ import { ReactiveFormsModule, Validators, } from '@angular/forms' +import { TodoService } from '../../services/todo-service' +import { Router } from '@angular/router' @Component({ selector: 'app-todo-create', @@ -46,6 +48,11 @@ export class TodoCreateComponent { }, ] + public constructor( + private readonly router: Router, + private readonly todoService: TodoService + ) {} + // form getters get titleForm() { @@ -59,4 +66,30 @@ export class TodoCreateComponent { get categoryForm() { return this.formGroup.controls.category } + + // event handlers + + public async onCreateClicked() { + const formData = this.getFormData() + + if (formData == null) { + return + } + + await this.todoService.create(formData) + + this.router.navigate(['/list']) + } + + private getFormData(): TodoCreate | null { + if (this.formGroup.invalid) { + return null + } + + return { + categoryId: this.formGroup.value.category!, + title: this.formGroup.value.title!, + body: this.formGroup.value.body!, + } + } } diff --git a/src/app/services/todo-service.ts b/src/app/services/todo-service.ts index 7c6ed59..81f0e70 100644 --- a/src/app/services/todo-service.ts +++ b/src/app/services/todo-service.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core' -import { Todo } from '../models' +import { Todo, TodoCreate } from '../models' @Injectable({ providedIn: 'root', @@ -45,4 +45,15 @@ export class TodoService { public async getAll(): Promise { return this.todoList } + + public async create(todo: TodoCreate) { + const timestamp = new Date() + this.todoList.push({ + ...todo, + id: this.todoList.length + 1, + state: 0, + updatedAt: timestamp, + createdAt: timestamp, + }) + } } From c9e0c732529b26671895ecbb7964663288a97785 Mon Sep 17 00:00:00 2001 From: tomori-k <108829509+tomori-k@users.noreply.github.com> Date: Tue, 20 Feb 2024 17:30:44 +0900 Subject: [PATCH 11/17] TodoCategoryService --- .../todo-create/todo-create.component.html | 13 ++++--- .../todo-create/todo-create.component.ts | 32 +++++------------ .../pages/todo-edit/todo-edit.component.html | 12 ++++--- .../pages/todo-edit/todo-edit.component.ts | 35 ++++++------------- src/app/services/todo-category-service.ts | 35 +++++++++++++++++++ 5 files changed, 68 insertions(+), 59 deletions(-) create mode 100644 src/app/services/todo-category-service.ts diff --git a/src/app/pages/todo-create/todo-create.component.html b/src/app/pages/todo-create/todo-create.component.html index 0f0692a..9d16359 100644 --- a/src/app/pages/todo-create/todo-create.component.html +++ b/src/app/pages/todo-create/todo-create.component.html @@ -15,10 +15,13 @@

    - + + + + diff --git a/src/app/pages/todo-create/todo-create.component.ts b/src/app/pages/todo-create/todo-create.component.ts index e38b086..44a00e8 100644 --- a/src/app/pages/todo-create/todo-create.component.ts +++ b/src/app/pages/todo-create/todo-create.component.ts @@ -8,6 +8,7 @@ import { Validators, } from '@angular/forms' import { TodoService } from '../../services/todo-service' +import { TodoCategoryService } from '../../services/todo-category-service' import { Router } from '@angular/router' @Component({ @@ -24,35 +25,18 @@ export class TodoCreateComponent { category: new FormControl(0), }) - public readonly categories: TodoCategory[] = [ - { - id: 1, - name: 'frontend', - color: '1', - updatedAt: new Date(2021, 3, 9, 7, 48, 56), - createdAt: new Date(2021, 3, 9, 4, 8, 57), - }, - { - id: 2, - name: 'backend', - color: '2', - updatedAt: new Date(2021, 3, 9, 7, 48, 56), - createdAt: new Date(2021, 3, 9, 4, 8, 57), - }, - { - id: 3, - name: 'infra', - color: '3', - updatedAt: new Date(2021, 3, 9, 7, 48, 56), - createdAt: new Date(2021, 3, 9, 4, 8, 57), - }, - ] + public categoryListPromise: Promise | null = null public constructor( private readonly router: Router, - private readonly todoService: TodoService + private readonly todoService: TodoService, + private readonly todoCategoryService: TodoCategoryService ) {} + public ngOnInit() { + this.categoryListPromise = this.todoCategoryService.getAll() + } + // form getters get titleForm() { diff --git a/src/app/pages/todo-edit/todo-edit.component.html b/src/app/pages/todo-edit/todo-edit.component.html index 6991c96..b582ee1 100644 --- a/src/app/pages/todo-edit/todo-edit.component.html +++ b/src/app/pages/todo-edit/todo-edit.component.html @@ -16,11 +16,13 @@ - + + + - + diff --git a/src/app/pages/todo-edit/todo-edit.component.ts b/src/app/pages/todo-edit/todo-edit.component.ts index 260cdb2..74fd862 100644 --- a/src/app/pages/todo-edit/todo-edit.component.ts +++ b/src/app/pages/todo-edit/todo-edit.component.ts @@ -5,11 +5,12 @@ import { ReactiveFormsModule, Validators, } from '@angular/forms' -import { Todo, TodoCategory } from '../../models' +import { Todo, TodoCategory, TodoState, TodoUpdate } from '../../models' import { CommonModule } from '@angular/common' import { TodoService } from '../../services/todo-service' import { toInt } from '../../utils/converter' import { TodoCategoryService } from '../../services/todo-category-service' +import { Router } from '@angular/router' @Component({ selector: 'app-todo-edit', @@ -20,15 +21,17 @@ import { TodoCategoryService } from '../../services/todo-category-service' }) export class TodoEditComponent { public readonly formGroup = new FormGroup({ + id: new FormControl(null, Validators.required), title: new FormControl('', Validators.required), body: new FormControl('', Validators.required), category: new FormControl(0), - state: new FormControl(0), + state: new FormControl(0), }) public categoryListPromise: Promise | null = null constructor( + private readonly router: Router, private readonly todoService: TodoService, private readonly todoCategoryService: TodoCategoryService ) {} @@ -46,6 +49,10 @@ export class TodoEditComponent { // form controls + private get formId() { + return this.formGroup.controls.id + } + get formTitle() { return this.formGroup.controls.title } @@ -65,9 +72,38 @@ export class TodoEditComponent { private async _loadTodo(todoId: number) { const todo = await this.todoService.getTodo(todoId) + this.formId.setValue(todo.id) this.formTitle.setValue(todo.title) this.formBody.setValue(todo.body) this.formCategory.setValue(todo.categoryId) this.formState.setValue(todo.state) } + + private getFormData(): TodoUpdate | null { + if (this.formGroup.invalid) { + return null + } + + return { + id: this.formId.value!, + categoryId: this.formCategory.value!, + title: this.formTitle.value!, + body: this.formBody.value!, + state: this.formState.value!, + } + } + + // event handlers + + public async onEditClicked() { + const formData = this.getFormData() + + if (formData == null) { + return + } + + await this.todoService.update(formData) + + this.router.navigate(['/list']) + } } diff --git a/src/app/services/todo-service.ts b/src/app/services/todo-service.ts index 81f0e70..5bf7360 100644 --- a/src/app/services/todo-service.ts +++ b/src/app/services/todo-service.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core' -import { Todo, TodoCreate } from '../models' +import { Todo, TodoCreate, TodoUpdate } from '../models' @Injectable({ providedIn: 'root', @@ -56,4 +56,12 @@ export class TodoService { createdAt: timestamp, }) } + + public async update(todo: TodoUpdate) { + const idx = this.todoList.findIndex((t) => t.id === todo.id) + this.todoList[idx] = { + ...this.todoList[idx], + ...todo, + } + } } From de4d08455511b5b395a62106d7dadf4d2170c871 Mon Sep 17 00:00:00 2001 From: tomori-k <108829509+tomori-k@users.noreply.github.com> Date: Tue, 20 Feb 2024 17:44:55 +0900 Subject: [PATCH 13/17] =?UTF-8?q?=E5=89=8A=E9=99=A4=E3=81=AE=E5=AE=9F?= =?UTF-8?q?=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/pages/todo-detail/todo-detail.component.html | 4 +++- src/app/pages/todo-detail/todo-detail.component.ts | 12 ++++++++++-- src/app/services/todo-service.ts | 5 +++++ 3 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/app/pages/todo-detail/todo-detail.component.html b/src/app/pages/todo-detail/todo-detail.component.html index 9a719f5..be6c566 100644 --- a/src/app/pages/todo-detail/todo-detail.component.html +++ b/src/app/pages/todo-detail/todo-detail.component.html @@ -8,6 +8,8 @@

    ステータス

    操作

    • 編集
      • -
    • 削除
      • +
    • + +
    diff --git a/src/app/pages/todo-detail/todo-detail.component.ts b/src/app/pages/todo-detail/todo-detail.component.ts index 6a86ccc..7bcdba4 100644 --- a/src/app/pages/todo-detail/todo-detail.component.ts +++ b/src/app/pages/todo-detail/todo-detail.component.ts @@ -1,6 +1,6 @@ import { Component, Input } from '@angular/core' import { Todo } from '../../models' -import { RouterLink } from '@angular/router' +import { Router, RouterLink } from '@angular/router' import { CommonModule } from '@angular/common' import { TodoService } from '../../services/todo-service' import { toInt } from '../../utils/converter' @@ -15,10 +15,18 @@ import { toInt } from '../../utils/converter' export class TodoDetailComponent { public todoPromise: Promise | null = null - constructor(private readonly todoService: TodoService) {} + constructor( + private readonly router: Router, + private readonly todoService: TodoService + ) {} @Input() set id(todoId: string) { this.todoPromise = this.todoService.getTodo(toInt(todoId)) } + + public async onRemoveClicked(id: number) { + await this.todoService.remove(id) + this.router.navigate(['/list']) + } } diff --git a/src/app/services/todo-service.ts b/src/app/services/todo-service.ts index 5bf7360..61a9e80 100644 --- a/src/app/services/todo-service.ts +++ b/src/app/services/todo-service.ts @@ -64,4 +64,9 @@ export class TodoService { ...todo, } } + + public async remove(id: number) { + const idx = this.todoList.findIndex((t) => t.id === id) + this.todoList.splice(idx, 1) + } } From 44526948abde9d102f3c7f4b89b4a9987d92da90 Mon Sep 17 00:00:00 2001 From: tomori-k <108829509+tomori-k@users.noreply.github.com> Date: Tue, 27 Feb 2024 16:15:29 +0900 Subject: [PATCH 14/17] =?UTF-8?q?API=20=E5=91=BC=E3=81=B3=E5=87=BA?= =?UTF-8?q?=E3=81=97=E9=83=A8=E5=88=86=E3=81=AE=E5=AE=9F=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../todo-create/todo-create.component.ts | 5 +- .../pages/todo-edit/todo-edit.component.ts | 14 ++-- src/app/services/todo-service.ts | 73 +++++++------------ 3 files changed, 36 insertions(+), 56 deletions(-) diff --git a/src/app/pages/todo-create/todo-create.component.ts b/src/app/pages/todo-create/todo-create.component.ts index 44a00e8..78961b2 100644 --- a/src/app/pages/todo-create/todo-create.component.ts +++ b/src/app/pages/todo-create/todo-create.component.ts @@ -10,6 +10,7 @@ import { import { TodoService } from '../../services/todo-service' import { TodoCategoryService } from '../../services/todo-category-service' import { Router } from '@angular/router' +import { toInt } from '../../utils/converter' @Component({ selector: 'app-todo-create', @@ -22,7 +23,7 @@ export class TodoCreateComponent { public readonly formGroup = new FormGroup({ title: new FormControl('', Validators.required), body: new FormControl('', Validators.required), - category: new FormControl(0), + category: new FormControl(''), }) public categoryListPromise: Promise | null = null @@ -71,7 +72,7 @@ export class TodoCreateComponent { } return { - categoryId: this.formGroup.value.category!, + categoryId: toInt(this.formGroup.value.category!), title: this.formGroup.value.title!, body: this.formGroup.value.body!, } diff --git a/src/app/pages/todo-edit/todo-edit.component.ts b/src/app/pages/todo-edit/todo-edit.component.ts index 74fd862..1d7d8db 100644 --- a/src/app/pages/todo-edit/todo-edit.component.ts +++ b/src/app/pages/todo-edit/todo-edit.component.ts @@ -24,8 +24,8 @@ export class TodoEditComponent { id: new FormControl(null, Validators.required), title: new FormControl('', Validators.required), body: new FormControl('', Validators.required), - category: new FormControl(0), - state: new FormControl(0), + category: new FormControl(''), + state: new FormControl('', [Validators.min(0), Validators.max(2)]), }) public categoryListPromise: Promise | null = null @@ -75,8 +75,8 @@ export class TodoEditComponent { this.formId.setValue(todo.id) this.formTitle.setValue(todo.title) this.formBody.setValue(todo.body) - this.formCategory.setValue(todo.categoryId) - this.formState.setValue(todo.state) + this.formCategory.setValue(todo.categoryId.toString()) + this.formState.setValue(todo.state.toString()) } private getFormData(): TodoUpdate | null { @@ -86,10 +86,12 @@ export class TodoEditComponent { return { id: this.formId.value!, - categoryId: this.formCategory.value!, + categoryId: toInt(this.formCategory.value!), title: this.formTitle.value!, body: this.formBody.value!, - state: this.formState.value!, + state: toInt( + this.formState.value! + ) as TodoState /* Validator を通ってるなら 0-2 の数値であることが確定している */, } } diff --git a/src/app/services/todo-service.ts b/src/app/services/todo-service.ts index 61a9e80..bc89cee 100644 --- a/src/app/services/todo-service.ts +++ b/src/app/services/todo-service.ts @@ -5,68 +5,45 @@ import { Todo, TodoCreate, TodoUpdate } from '../models' providedIn: 'root', }) export class TodoService { - // テストデータ - public readonly todoList: Todo[] = [ - { - id: 1, - categoryId: 1, - title: 'Improve design', - body: 'improve the design of the header', - state: 0, - updatedAt: new Date(2000, 5, 14, 12, 31, 59), - createdAt: new Date(2000, 5, 14, 12, 31, 59), - }, - { - id: 2, - categoryId: 2, - title: 'fix Controller', - body: 'fix Controller name', - state: 1, - updatedAt: new Date(2020, 7, 19, 8, 25, 34), - createdAt: new Date(2012, 6, 3, 3, 3, 3), - }, - { - id: 3, - categoryId: 3, - title: 'Create new DB', - body: 'Create new DB', - state: 2, - updatedAt: new Date(2024, 2, 9, 18, 5, 36), - createdAt: new Date(2012, 2, 29, 7, 6, 45), - }, - ] - public async getTodo(todoId: number): Promise { - const todo = this.todoList.find((todo) => todo.id === todoId) - if (todo == null) throw new Error('Todo not found') + const response = await fetch(`http://localhost:9000/todo/${todoId}`, { + method: 'GET', + }) + const todo = await response.json() return todo } public async getAll(): Promise { - return this.todoList + const response = await fetch('http://localhost:9000/todo/list', { + method: 'GET', + }) + const todoList = await response.json() + return todoList } public async create(todo: TodoCreate) { - const timestamp = new Date() - this.todoList.push({ - ...todo, - id: this.todoList.length + 1, - state: 0, - updatedAt: timestamp, - createdAt: timestamp, + await fetch('http://localhost:9000/todo', { + method: 'POST', + body: JSON.stringify(todo), + headers: { + 'Content-Type': 'application/json', + }, }) } public async update(todo: TodoUpdate) { - const idx = this.todoList.findIndex((t) => t.id === todo.id) - this.todoList[idx] = { - ...this.todoList[idx], - ...todo, - } + await fetch('http://localhost:9000/todo', { + method: 'PUT', + body: JSON.stringify(todo), + headers: { + 'Content-Type': 'application/json', + }, + }) } public async remove(id: number) { - const idx = this.todoList.findIndex((t) => t.id === id) - this.todoList.splice(idx, 1) + await fetch(`http://localhost:9000/todo/${id}`, { + method: 'DELETE', + }) } } From 520c74c49f7c631bca5a44380373b58501d684c4 Mon Sep 17 00:00:00 2001 From: tomori-k <108829509+tomori-k@users.noreply.github.com> Date: Tue, 27 Feb 2024 16:29:27 +0900 Subject: [PATCH 15/17] =?UTF-8?q?API=20=E3=81=AE=E8=BF=94=E5=8D=B4?= =?UTF-8?q?=E5=80=A4=E3=81=A8=E5=9E=8B=E3=81=8C=E7=95=B0=E3=81=AA=E3=81=A3?= =?UTF-8?q?=E3=81=A6=E3=81=84=E3=82=8B=E3=81=AE=E3=82=92=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/models.ts | 6 +----- src/app/pages/todo-detail/todo-detail.component.html | 2 +- src/app/pages/todo-edit/todo-edit.component.ts | 4 ++-- 3 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/app/models.ts b/src/app/models.ts index 9b6f14e..289af12 100644 --- a/src/app/models.ts +++ b/src/app/models.ts @@ -2,12 +2,10 @@ export type TodoState = 0 | 1 | 2 export type Todo = { id: number - categoryId: number + category: TodoCategory | null title: string body: string state: TodoState - updatedAt: Date - createdAt: Date } export type TodoCreate = { @@ -28,6 +26,4 @@ export type TodoCategory = { id: number name: string color: string - updatedAt: Date - createdAt: Date } diff --git a/src/app/pages/todo-detail/todo-detail.component.html b/src/app/pages/todo-detail/todo-detail.component.html index be6c566..520a58b 100644 --- a/src/app/pages/todo-detail/todo-detail.component.html +++ b/src/app/pages/todo-detail/todo-detail.component.html @@ -2,7 +2,7 @@

    {{ todo.title }}

    {{ todo.body }}

    カテゴリ

    -

    {{ todo.categoryId }}

    +

    {{ todo.category?.name }}

    ステータス

    {{ todo.state }}

    操作

    diff --git a/src/app/pages/todo-edit/todo-edit.component.ts b/src/app/pages/todo-edit/todo-edit.component.ts index 1d7d8db..b3d06ae 100644 --- a/src/app/pages/todo-edit/todo-edit.component.ts +++ b/src/app/pages/todo-edit/todo-edit.component.ts @@ -5,7 +5,7 @@ import { ReactiveFormsModule, Validators, } from '@angular/forms' -import { Todo, TodoCategory, TodoState, TodoUpdate } from '../../models' +import { TodoCategory, TodoState, TodoUpdate } from '../../models' import { CommonModule } from '@angular/common' import { TodoService } from '../../services/todo-service' import { toInt } from '../../utils/converter' @@ -75,7 +75,7 @@ export class TodoEditComponent { this.formId.setValue(todo.id) this.formTitle.setValue(todo.title) this.formBody.setValue(todo.body) - this.formCategory.setValue(todo.categoryId.toString()) + this.formCategory.setValue(todo.category?.id.toString() ?? '') this.formState.setValue(todo.state.toString()) } From f74e57034a725bdd7f7b4e4daa887f065ced5a61 Mon Sep 17 00:00:00 2001 From: tomori-k <108829509+tomori-k@users.noreply.github.com> Date: Tue, 27 Feb 2024 16:44:05 +0900 Subject: [PATCH 16/17] =?UTF-8?q?TodoCategoryService=E3=81=AE=E5=AE=9F?= =?UTF-8?q?=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/services/todo-category-service.ts | 30 ++++------------------- 1 file changed, 5 insertions(+), 25 deletions(-) diff --git a/src/app/services/todo-category-service.ts b/src/app/services/todo-category-service.ts index d222b81..97455b6 100644 --- a/src/app/services/todo-category-service.ts +++ b/src/app/services/todo-category-service.ts @@ -5,31 +5,11 @@ import { TodoCategory } from '../models' providedIn: 'root', }) export class TodoCategoryService { - private readonly categories: TodoCategory[] = [ - { - id: 1, - name: 'frontend', - color: '1', - updatedAt: new Date(2021, 3, 9, 7, 48, 56), - createdAt: new Date(2021, 3, 9, 4, 8, 57), - }, - { - id: 2, - name: 'backend', - color: '2', - updatedAt: new Date(2021, 3, 9, 7, 48, 56), - createdAt: new Date(2021, 3, 9, 4, 8, 57), - }, - { - id: 3, - name: 'infra', - color: '3', - updatedAt: new Date(2021, 3, 9, 7, 48, 56), - createdAt: new Date(2021, 3, 9, 4, 8, 57), - }, - ] - public async getAll(): Promise { - return this.categories + const response = await fetch('http://localhost:9000/todo-category/list', { + method: 'GET', + }) + const todoCategoryList = await response.json() + return todoCategoryList } } From c077d157b61175cf922d85a8d38d1def7637c203 Mon Sep 17 00:00:00 2001 From: tomori-k <108829509+tomori-k@users.noreply.github.com> Date: Fri, 1 Mar 2024 17:27:02 +0900 Subject: [PATCH 17/17] =?UTF-8?q?=E7=92=B0=E5=A2=83=E5=A4=89=E6=95=B0?= =?UTF-8?q?=E3=82=92=E4=BD=BF=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- angular.json | 8 +++++++- src/app/services/todo-category-service.ts | 3 ++- src/app/services/todo-service.ts | 11 ++++++----- src/environments/environment.development.ts | 3 +++ src/environments/environment.ts | 3 +++ 5 files changed, 21 insertions(+), 7 deletions(-) create mode 100644 src/environments/environment.development.ts create mode 100644 src/environments/environment.ts diff --git a/angular.json b/angular.json index 93b2559..f730ce7 100644 --- a/angular.json +++ b/angular.json @@ -53,7 +53,13 @@ "development": { "optimization": false, "extractLicenses": false, - "sourceMap": true + "sourceMap": true, + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.development.ts" + } + ] } }, "defaultConfiguration": "production" diff --git a/src/app/services/todo-category-service.ts b/src/app/services/todo-category-service.ts index 97455b6..cd42b1f 100644 --- a/src/app/services/todo-category-service.ts +++ b/src/app/services/todo-category-service.ts @@ -1,12 +1,13 @@ import { Injectable } from '@angular/core' import { TodoCategory } from '../models' +import { environment } from '../../environments/environment' @Injectable({ providedIn: 'root', }) export class TodoCategoryService { public async getAll(): Promise { - const response = await fetch('http://localhost:9000/todo-category/list', { + const response = await fetch(`${environment.apiUrl}/todo-category/list`, { method: 'GET', }) const todoCategoryList = await response.json() diff --git a/src/app/services/todo-service.ts b/src/app/services/todo-service.ts index bc89cee..a513bb9 100644 --- a/src/app/services/todo-service.ts +++ b/src/app/services/todo-service.ts @@ -1,12 +1,13 @@ import { Injectable } from '@angular/core' import { Todo, TodoCreate, TodoUpdate } from '../models' +import { environment } from '../../environments/environment' @Injectable({ providedIn: 'root', }) export class TodoService { public async getTodo(todoId: number): Promise { - const response = await fetch(`http://localhost:9000/todo/${todoId}`, { + const response = await fetch(`${environment.apiUrl}/todo/${todoId}`, { method: 'GET', }) const todo = await response.json() @@ -14,7 +15,7 @@ export class TodoService { } public async getAll(): Promise { - const response = await fetch('http://localhost:9000/todo/list', { + const response = await fetch(`${environment.apiUrl}/todo/list`, { method: 'GET', }) const todoList = await response.json() @@ -22,7 +23,7 @@ export class TodoService { } public async create(todo: TodoCreate) { - await fetch('http://localhost:9000/todo', { + await fetch(`${environment.apiUrl}/todo`, { method: 'POST', body: JSON.stringify(todo), headers: { @@ -32,7 +33,7 @@ export class TodoService { } public async update(todo: TodoUpdate) { - await fetch('http://localhost:9000/todo', { + await fetch(`${environment.apiUrl}/todo`, { method: 'PUT', body: JSON.stringify(todo), headers: { @@ -42,7 +43,7 @@ export class TodoService { } public async remove(id: number) { - await fetch(`http://localhost:9000/todo/${id}`, { + await fetch(`${environment.apiUrl}/todo/${id}`, { method: 'DELETE', }) } diff --git a/src/environments/environment.development.ts b/src/environments/environment.development.ts new file mode 100644 index 0000000..3c5b84e --- /dev/null +++ b/src/environments/environment.development.ts @@ -0,0 +1,3 @@ +export const environment = { + apiUrl: 'http://localhost:9000', +} diff --git a/src/environments/environment.ts b/src/environments/environment.ts new file mode 100644 index 0000000..ce513b5 --- /dev/null +++ b/src/environments/environment.ts @@ -0,0 +1,3 @@ +export const environment = { + apiUrl: 'https://api.todo-app', +}