Skip to content

Commit 8a040b1

Browse files
maxime-urbanskimaxime-urbanski
committed
wip
1 parent 6db3745 commit 8a040b1

26 files changed

+272
-104
lines changed

‎src/app/app.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {HttpClientModule} from "@angular/common/http";
66
@Component({
77
selector: 'app-root',
88
standalone: true,
9-
imports: [RouterOutlet, AsyncPipe, HttpClientModule, CommonModule],
9+
imports: [RouterOutlet, AsyncPipe, HttpClientModule],
1010
templateUrl: './app.component.html',
1111
styleUrl: './app.component.css'
1212
})

‎src/app/app.config.ts

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@ import {provideRouter} from '@angular/router';
33
import reducer from "./store/reducer/index";
44
import {routes} from './app.routes';
55
import {provideClientHydration} from '@angular/platform-browser';
6-
import { provideStore} from '@ngrx/store';
6+
import {provideState, provideStore} from '@ngrx/store';
77
import {provideStoreDevtools} from '@ngrx/store-devtools';
88
import {provideHttpClient, withFetch} from "@angular/common/http";
9+
import {updateReducer} from "./store/reducer/update.reducer";
10+
import {showReducer} from "./store/reducer/show.reducer";
911

1012
export const appConfig: ApplicationConfig = {
1113
providers: [
@@ -15,9 +17,6 @@ export const appConfig: ApplicationConfig = {
1517
provideStore(
1618
reducer
1719
),
18-
provideStoreDevtools({
19-
maxAge: 25,
20-
logOnly: !isDevMode()
21-
})
20+
provideStoreDevtools()
2221
]
2322
};

‎src/app/app.routes.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const routes: Routes = [
1414
component: ShowComponent,
1515
},
1616
{
17-
path: 'heroes/edit/:id',
17+
path: 'heroes/:id/edit',
1818
component: EditComponent
1919
},
2020
{

‎src/app/components/common/delete/delete.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<button
22
(click)="delete()"
3-
class="px-6 py-2 bg-red-600 text-white text-xs rounded shadow-md hover:bg-red-700">
3+
class="px-6 py-2 bg-red-600 text-white text-xs rounded shadow-md hover:bg-red-700" [disabled]="!id">
44
Delete
55
</button>

‎src/app/components/common/delete/delete.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {Location} from "@angular/common";
99
templateUrl: './delete.component.html',
1010
})
1111
export class DeleteComponent {
12-
@Input() id: string = '';
12+
@Input() id: string | undefined;
1313

1414
constructor(
1515
private heroService: HeroService,
@@ -18,7 +18,7 @@ export class DeleteComponent {
1818
}
1919

2020
delete() {
21-
console.log('delete component id',this.id)
21+
this.id &&
2222
this.heroService.delete(this.id).subscribe(() => this.location.back())
2323
}
2424
}

‎src/app/components/common/table/table.component.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
<th [colSpan]="2"></th>
1010
</tr>
1111
</thead>
12-
<tbody>
13-
@for (item of items?.items; track item) {
12+
<tbody>
13+
@for (item of items; track item) {
1414
<tr>
1515
<td>{{ item['id'] }}</td>
1616
<td>{{ item['name'] }}</td>
@@ -33,7 +33,7 @@
3333
</a>
3434
</td>
3535
<td class="w-8">
36-
<a [routerLink]="['edit', item['id']]" class="text-cyan-500">
36+
<a [routerLink]="[item['id'], 'edit']" class="text-cyan-500">
3737
Edit
3838
<svg
3939
xmlns="http://www.w3.org/2000/svg"

‎src/app/components/common/table/table.component.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import {Component, Input} from '@angular/core';
1+
import {Component, Input, WritableSignal} from '@angular/core';
22
import {NgForOf} from "@angular/common";
33
import {RouterLink} from "@angular/router";
44
import {List} from "../../../interface/list.model";
5+
import {Hero} from "../../../interface/hero.model";
6+
import {Observable} from "rxjs";
57

68
@Component({
79
selector: 'app-table',
@@ -12,5 +14,5 @@ import {List} from "../../../interface/list.model";
1214
templateUrl: './table.component.html',
1315
})
1416
export class TableComponent {
15-
@Input() items: List | undefined
17+
@Input() items: Hero[] = [];
1618
}

‎src/app/components/foo/edit/edit.component.html

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,36 @@
1-
<p>edit works!</p>
1+
<div class="container mx-auto px-4 max-w-2xl mt-4">
2+
3+
<div class="flex items-center justify-between">
4+
<a [routerLink]="['/heroes']"
5+
class="text-blue-600 hover:text-blue-800">
6+
Back to list
7+
</a>
8+
9+
</div>
10+
@if (isLoading()) {
11+
<div class="bg-blue-100 rounded py-4 px-4 text-blue-700 text-sm">Loading ...</div>
12+
} @else {
13+
<h1 class="text-3xl my-4">Edit {{ item()?.["@id"] }}</h1>
14+
15+
<button type="button" (click)="getValueItem()">ITEM VALUE</button>
16+
<form (ngSubmit)="onChangeInput($event)">
17+
<div class="mb-3">
18+
<label for="name"> name</label>
19+
<input id="name"
20+
class="mt-1 w-full px-3 py-2 border rounded"
21+
[ngModel]="item()?.name"
22+
(ngModelChange)="onChangeInput($event)"
23+
name="name">
24+
</div>
25+
26+
<button
27+
type="submit"
28+
class="px-6 py-2 bg-green-500 text-white font-medium rounded shadow-md hover:bg-green-600"
29+
>
30+
Submit
31+
</button>
32+
</form>
33+
}
34+
35+
36+
</div>

‎src/app/components/foo/edit/edit.component.ts

Lines changed: 45 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,53 @@
1-
import { Component } from '@angular/core';
1+
import {Component, OnInit, signal, WritableSignal} from '@angular/core';
2+
import {DeleteComponent} from "../../common/delete/delete.component";
3+
import {Router, RouterLink} from "@angular/router";
4+
import {HeroService} from "../../../service/hero.service";
5+
import {CommonModule} from "@angular/common";
6+
import {ApiShow} from "../../../interface/api";
7+
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
8+
29

310
@Component({
411
selector: 'app-edit',
512
standalone: true,
6-
imports: [],
13+
imports: [
14+
CommonModule,
15+
DeleteComponent,
16+
RouterLink,
17+
FormsModule,
18+
ReactiveFormsModule,
19+
],
720
templateUrl: './edit.component.html',
821
})
9-
export class EditComponent {
22+
export class EditComponent implements OnInit {
23+
public isLoading = signal(false)
24+
public item: WritableSignal<ApiShow | null> = signal(null)
25+
26+
constructor(
27+
private router: Router,
28+
private heroService: HeroService
29+
) {
30+
}
31+
32+
ngOnInit() {
33+
this.isLoading.set(true)
34+
const splitUrl = this.router.url.split('/edit')[0]
35+
this.heroService
36+
.getHero(splitUrl)
37+
.subscribe(item => {
38+
this.item.update(state => ({
39+
...item
40+
}))
41+
this.isLoading.set(false)
42+
})
43+
}
44+
45+
getValueItem() {
46+
console.log(this.item())
47+
}
48+
49+
onChangeInput(event: Event) {
50+
console.log(event)
1051

52+
}
1153
}

‎src/app/components/foo/list/list.component.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@ <h1 class="text-3xl mb-2">Heroes List</h1>
77
Create
88
</a>
99
</div>
10-
<p *ngIf="(isLoading | async) else tableHeroes">Loading ... </p>
11-
<ng-template #tableHeroes>
12-
<app-table [items]="(heroes$ | async)!"></app-table>
13-
</ng-template>
10+
@if (isLoading()) {
11+
<div class="bg-blue-100 rounded py-4 px-4 text-blue-700 text-sm">Loading ... </div>
12+
} @else {
13+
<app-table [items]="heroes()"></app-table>
14+
}
1415
</div>

‎src/app/components/foo/list/list.component.ts

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
1-
import {Component, OnInit} from '@angular/core';
1+
import {Component, OnInit, signal, WritableSignal} from '@angular/core';
22
import {RouterLink} from "@angular/router";
33
import {AsyncPipe, NgFor, NgIf} from "@angular/common";
44
import {TableComponent} from "../../common/table/table.component";
5-
import {List} from "../../../interface/list.model";
6-
import {Store} from "@ngrx/store";
7-
import {HeroesActions} from "../../../store/action/heroes.actions";
85
import {HeroService} from "../../../service/hero.service";
9-
import {selectorHeroesLoading} from "../../../store/selector/hero.selectors";
6+
import {Hero} from "../../../interface/hero.model";
107

118
@Component({
129
selector: 'app-list',
@@ -21,21 +18,23 @@ import {selectorHeroesLoading} from "../../../store/selector/hero.selectors";
2118
templateUrl: './list.component.html',
2219
})
2320
export class ListComponent implements OnInit {
24-
heroes$ = this.store.select('heroes')
25-
isLoading = this.store.select(selectorHeroesLoading)
21+
heroes: WritableSignal<Hero[] | []> = signal([])
22+
isLoading = signal(false)
23+
error = signal(undefined)
2624

27-
constructor(private store: Store<{ heroes: List }>, private heroService: HeroService) {
25+
constructor(
26+
private heroService: HeroService,
27+
) {
2828
}
2929

3030
ngOnInit() {
31+
this.isLoading.set(true)
3132
this.heroService
3233
.getHeroes('/heroes')
3334
.subscribe(
34-
(items) =>
35-
this.store.dispatch(HeroesActions.getHeroes({
36-
items: items['hydra:member'],
37-
isLoading: false
38-
}))
39-
)
35+
(items) => {
36+
this.heroes.set(items['hydra:member'])
37+
this.isLoading.set(false)
38+
})
4039
}
4140
}

‎src/app/components/foo/show/show.component.html

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
<div class="container mx-auto px-4 max-w-2xl mt-4">
2-
<p *ngIf="(isLoading | async) else elseData">Loading ... </p>
3-
<ng-template #elseData>
2+
@if (isLoading()) {
3+
<div class="bg-blue-100 rounded py-4 px-4 text-blue-700 text-sm">Loading ...</div>
4+
} @else {
45
<div class="flex items-center justify-between">
56
<a [routerLink]="['/heroes']"
67
class="text-blue-600 hover:text-blue-800">
78
Back to list
89
</a>
910
<div>
10-
<a [routerLink]="['/heroes/edit', (item|async)?.id]"
11+
<a [routerLink]="[item()?.['@id'], 'edit']"
1112
class="px-6 py-2 mr-2 bg-green-600 text-white text-xs rounded shadow-md hover:bg-green-700">
1213
Edit
1314
</a>
14-
<app-delete [id]="(item|async)?.['@id']!"></app-delete>
15+
<app-delete [id]="item()?.['@id']"></app-delete>
1516
</div>
1617
</div>
1718

18-
<h1 class="text-3xl my-4">Show {{ (item|async)?.["@id"] }}</h1>
19+
<h1 class="text-3xl my-4">Show {{ item()?.['@id'] }}</h1>
1920

2021
<div class="overflow-x-auto">
2122
<table class="min-w-full">
@@ -30,19 +31,21 @@ <h1 class="text-3xl my-4">Show {{ (item|async)?.["@id"] }}</h1>
3031
</tr>
3132
</thead>
3233
<tbody>
33-
<tr *ngIf="(item | async)" class="border-b">
34-
<th
35-
class="text-sm font-medium px-6 py-4 text-left capitalize"
36-
scope="row"
37-
>
38-
name
39-
</th>
40-
<td class="px-6 py-4 whitespace-nowrap text-sm">
41-
{{ (item|async)?.name }}
42-
</td>
43-
</tr>
34+
@if (item()) {
35+
<tr class="border-b">
36+
<th
37+
class="text-sm font-medium px-6 py-4 text-left capitalize"
38+
scope="row"
39+
>
40+
name
41+
</th>
42+
<td class="px-6 py-4 whitespace-nowrap text-sm">
43+
{{ item()?.name }}
44+
</td>
45+
</tr>
46+
}
4447
</tbody>
4548
</table>
4649
</div>
47-
</ng-template>
50+
}
4851
</div>

‎src/app/components/foo/show/show.component.ts

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,39 @@
1-
import {Component, OnInit} from '@angular/core';
2-
import {ActivatedRoute, Router, RouterLink} from "@angular/router";
3-
import {CommonModule, NgIf} from "@angular/common";
4-
import {Store} from "@ngrx/store";
1+
import {Component, OnInit, signal, WritableSignal} from '@angular/core';
2+
import {Router, RouterLink} from "@angular/router";
3+
import {CommonModule} from "@angular/common";
54
import {HeroService} from "../../../service/hero.service";
6-
import {Show} from "../../../interface/show.model";
7-
import {selectorShowItem, selectorShowLoading} from "../../../store/selector/show.selectors";
8-
import {HeroesActions} from "../../../store/action/heroes.actions";
95
import {DeleteComponent} from "../../common/delete/delete.component";
6+
import {ApiShow} from "../../../interface/api";
107

118
@Component({
129
selector: 'app-show',
1310
standalone: true,
1411
imports: [
1512
CommonModule,
1613
RouterLink,
17-
NgIf,
1814
DeleteComponent
1915
],
2016
templateUrl: './show.component.html',
2117
})
2218
export class ShowComponent implements OnInit {
23-
public isLoading = this.store.select(selectorShowLoading)
24-
public item = this.store.select(selectorShowItem)
19+
public item: WritableSignal<ApiShow|null> = signal(null)
20+
public isLoading = signal(false)
21+
public error = signal(undefined)
2522

2623
constructor(
27-
private store: Store<{ show: Show }>,
2824
private heroService: HeroService,
2925
private router: Router
3026
) {
3127
}
3228

3329
ngOnInit() {
30+
this.isLoading.set(true)
3431
const id = this.router.url
3532
this.heroService
3633
.getHero(id)
37-
.subscribe((item) =>
38-
this.store.dispatch(HeroesActions.getHero({item, isLoading: false})))
34+
.subscribe(item => {
35+
this.item.set(item)
36+
this.isLoading.set(false)
37+
})
3938
}
4039
}

‎src/app/interface/list.model.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {Hero} from "./hero.model";
22

33
export interface List {
4-
isLoading: Boolean | undefined | null,
4+
isLoading?: Boolean | undefined | null,
55
items?: Hero[],
66
error?: string,
77
}

‎src/app/interface/update.model.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import {Hero} from "./hero.model";
2+
3+
export interface Update {
4+
isLoading?: Boolean,
5+
item?: Hero,
6+
error?: string,
7+
}

0 commit comments

Comments
 (0)