Feat/angular client

.gitignore

@@ -0,0 +1,3 @@
+.angular
+node_modules
+dist

angular.json

@@ -19,6 +19,9 @@
             "polyfills": [
               "zone.js"
             ],
+            "allowedCommonJsDependencies": [
+              "dayjs"
+            ],
             "tsConfig": "tsconfig.app.json",
             "assets": [
               "src/favicon.ico",

package.json

@@ -21,7 +21,7 @@
     "@angular/platform-server": "^17.2.0",
     "@angular/router": "^17.2.0",
     "@angular/ssr": "^17.2.2",
-    "@ngrx/store": "^17.1.1",
+    "dayjs": "^1.11.11",
     "express": "^4.18.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
@@ -45,4 +45,4 @@
     "tailwindcss": "^3.4.1",
     "typescript": "~5.3.2"
   }
-}
+}

src/app/app.component.ts

@@ -1,13 +1,15 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import {Component} from '@angular/core';
+import {RouterOutlet} from '@angular/router';
+import {AsyncPipe} from "@angular/common";
+import {LayoutComponent} from "@components/common/layout/layout.component";
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, AsyncPipe,  LayoutComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
 export class AppComponent {
-  title = 'my-app';
+  title = 'Api Platform Angular Admin';
 }

src/app/app.config.ts

@@ -1,10 +1,14 @@
-import { ApplicationConfig } from '@angular/core';
-import { provideRouter } from '@angular/router';
-
-import { routes } from './app.routes';
-import { provideClientHydration } from '@angular/platform-browser';
-import { provideStore } from '@ngrx/store';
+import {ApplicationConfig,provideZoneChangeDetection} from '@angular/core';
+import {provideRouter} from '@angular/router';
+import {routes} from './app.routes';
+import {provideClientHydration} from '@angular/platform-browser';
+import {provideHttpClient, withFetch} from "@angular/common/http";
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes), provideClientHydration(), provideStore()]
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideHttpClient(withFetch()),
+    provideClientHydration(),
+  ]
 };

src/app/app.routes.ts

@@ -1,25 +1,11 @@
 import {Routes} from '@angular/router';
-import {ListComponent} from "./components/foo/list/list.component";
-import {ShowComponent} from "./components/foo/show/show.component";
-import {EditComponent} from "./components/foo/edit/edit.component";
-import {CreateComponent} from "./components/foo/create/create.component";
+import {LayoutComponent} from "@components/common/layout/layout.component";
+import {allRoutes} from "@router/index";
 
 export const routes: Routes = [
   {
-    path: 'heroes',
-    component: ListComponent
-  },
-  {
-    path:'heroes/:id',
-    component: ShowComponent,
-
-  },
-  {
-    path: 'heroes/edit/:id',
-    component: EditComponent
-  },
-  {
-    path: 'heroes/add',
-    component: CreateComponent
+    path: '',
+    component: LayoutComponent,
+    children: allRoutes
   }
 ];

src/app/components/book/create/create.component.html

@@ -0,0 +1,13 @@
+<div class=" w-full px-4 mt-4">
+  <div class="flex items-center justify-between">
+    <app-back-to-list url="/books" />
+  </div>
+  @if (isLoading()) {
+    <app-alert type="loading"/>
+  }
+  @if (error()) {
+  <app-alert type="error" [error]="error"/>
+  }
+  <h1 class="text-3xl my-4">Create Book</h1>
+  <app-form-book [item]="item()" (submit)="onSubmit($event)"/>
+</div>

src/app/components/book/create/create.component.ts

@@ -0,0 +1,42 @@
+import { Location } from "@angular/common";
+import { Component, inject, signal, WritableSignal } from "@angular/core";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { RouterLink } from "@angular/router";
+import { AlertComponent } from "@components/common/alert/alert.component";
+import { BackToListComponent } from "@components/common/back-to-list/back-to-list.component";
+import { DeleteComponent } from "@components/common/delete/delete.component";
+import { FormComponent } from "@components/book/form/form.component";
+import { ApiItem, SubmissionErrors } from "@interface/api";
+import { ApiService } from "@service/api.service";
+
+@Component({
+  selector: "app-create-book",
+  standalone: true,
+  imports: [
+    AlertComponent,
+    BackToListComponent,
+    DeleteComponent,
+    RouterLink,
+    FormsModule,
+    ReactiveFormsModule,
+    FormComponent,
+  ],
+  templateUrl: "./create.component.html",
+})
+export class CreateComponent {
+  private apiService: ApiService = inject(ApiService);
+  private location: Location = inject(Location);
+  public item: WritableSignal<ApiItem> = signal({} as ApiItem);
+  public isLoading: WritableSignal<boolean> = signal(false);
+  public error: WritableSignal<SubmissionErrors | null> = signal(null);
+
+  onSubmit(data: any) {
+    return this.apiService.add("/books", this.item()).subscribe({
+      next: () => {
+        this.isLoading.set(true);
+        this.location.back();
+      },
+      error: (err: SubmissionErrors) => this.error.set(err),
+    });
+  }
+}

src/app/components/book/edit/edit.component.html

@@ -0,0 +1,20 @@
+<div class="px-4 mt-4">
+  <div class="flex items-center justify-end">
+    <app-back-to-list url="/books"/>
+  </div>
+  @if (isLoading()) {
+  <app-alert type="loading"/>
+  }
+  @if (error()) {
+  <app-alert type="error" [error]="error"/>
+  }
+  <h1 class="text-3xl my-4">
+    Edit {{ item()['name'] }}
+    <span class="text-xl">{{ item()["@id"] }}</span>
+  </h1>
+  <app-form-book
+    [item]="item()"
+    (submit)="onSubmit($event)"
+    (delete)="delete()"
+  />
+</div>

src/app/components/book/edit/edit.component.ts

@@ -0,0 +1,80 @@
+import { CommonModule, Location } from "@angular/common";
+import {
+  Component,
+  DestroyRef,
+  inject,
+  OnInit,
+  signal,
+  WritableSignal,
+} from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { Router, RouterLink } from "@angular/router";
+import { AlertComponent } from "@components/common/alert/alert.component";
+import { BackToListComponent } from "@components/common/back-to-list/back-to-list.component";
+import { DeleteComponent } from "@components/common/delete/delete.component";
+import { FormComponent } from "@components/book/form/form.component";
+import { ApiItem, SubmissionErrors } from "@interface/api";
+import { ApiService } from "@service/api.service";
+
+@Component({
+  selector: "app-edit-book",
+  standalone: true,
+  imports: [
+    AlertComponent,
+    BackToListComponent,
+    CommonModule,
+    DeleteComponent,
+    RouterLink,
+    FormsModule,
+    ReactiveFormsModule,
+    FormComponent,
+  ],
+  templateUrl: "./edit.component.html",
+})
+export class EditComponent implements OnInit {
+  public item: WritableSignal<ApiItem> = signal({} as ApiItem);
+  public isLoading: WritableSignal<Boolean> = signal(false);
+  public error: WritableSignal<SubmissionErrors | null> = signal(null);
+  private destroy: DestroyRef = inject(DestroyRef);
+  private apiService: ApiService = inject(ApiService);
+  private router: Router = inject(Router);
+  private location: Location = inject(Location);
+
+  ngOnInit() {
+    this.fetchData();
+  }
+
+  public fetchData() {
+    const uri = this.router.url.split("/edit")[0];
+    this.toggleIsLoading();
+    this.apiService
+      .fetchData(uri)
+      .pipe(takeUntilDestroyed(this.destroy))
+      .subscribe({
+        next: (value) => {
+          this.item.set(value);
+        },
+        error: (err) => this.error.set(err),
+      });
+    this.toggleIsLoading();
+  }
+
+  public onSubmit(data: any) {
+    return this.apiService.put(this.item()["@id"]!, this.item()).subscribe({
+      next: () => this.location.back(),
+      error: (err) => this.error.set(err),
+    });
+  }
+
+  public delete() {
+    return this.apiService.delete(this.item()["@id"]!).subscribe({
+      next: () => this.location.back(),
+      error: (err) => this.error.set(err),
+    });
+  }
+
+  private toggleIsLoading() {
+    return this.isLoading.update((value) => !value);
+  }
+}

src/app/components/book/form/form.component.html

@@ -0,0 +1,67 @@
+<form (ngSubmit)="handleSubmit()">
+  <div class="bg-white px-6 py-8">
+    <div class="mb-2">
+      <label for="book" class="text-gray-700 block text-sm font-bold capitalize">book</label>
+      <input id="book"
+             name="book"
+             class="mt-1 w-full px-3 py-2 border rounded"
+             [(ngModel)]="item['book']"
+              type="text"
+              required
+              placeholder=""
+      />
+    </div>
+    <div class="mb-2">
+      <label for="condition" class="text-gray-700 block text-sm font-bold capitalize">condition</label>
+      <input id="condition"
+             name="condition"
+             class="mt-1 w-full px-3 py-2 border rounded"
+             [(ngModel)]="item['condition']"
+              type="text"
+              required
+              placeholder=""
+      />
+    </div>
+    <div class="mb-2">
+      <label for="title" class="text-gray-700 block text-sm font-bold capitalize">title</label>
+      <input id="title"
+             name="title"
+             class="mt-1 w-full px-3 py-2 border rounded"
+             [(ngModel)]="item['title']"
+              type="text"
+              placeholder=""
+      />
+    </div>
+    <div class="mb-2">
+      <label for="author" class="text-gray-700 block text-sm font-bold capitalize">author</label>
+      <input id="author"
+             name="author"
+             class="mt-1 w-full px-3 py-2 border rounded"
+             [(ngModel)]="item['author']"
+              type="text"
+              placeholder=""
+      />
+    </div>
+    <div class="mb-2">
+      <label for="rating" class="text-gray-700 block text-sm font-bold capitalize">rating</label>
+      <input id="rating"
+             name="rating"
+             class="mt-1 w-full px-3 py-2 border rounded"
+             [(ngModel)]="item['rating']"
+              type="number"
+              placeholder=""
+      />
+    </div>
+  </div>
+  <div class="bg-neutral-100 px-4 py-6 flex justify-between">
+    <button
+      type="submit"
+      class="px-6 py-2 bg-green-500 text-white font-medium rounded shadow-md hover:bg-green-600"
+    >
+      Submit
+    </button>
+    @if (this.delete) {
+    <app-delete (click)="handleDelete()"/>
+    }
+  </div>
+</form>

src/app/components/book/form/form.component.ts

@@ -0,0 +1,25 @@
+import { AsyncPipe, NgIf } from "@angular/common";
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { DeleteComponent } from "@components/common/delete/delete.component";
+import { ApiItem } from "@interface/api";
+
+@Component({
+  selector: "app-form-book",
+  standalone: true,
+  imports: [AsyncPipe, DeleteComponent, FormsModule, NgIf, ReactiveFormsModule],
+  templateUrl: "./form.component.html",
+})
+export class FormComponent {
+  @Input() item!: ApiItem;
+  @Output() submit = new EventEmitter();
+  @Output() delete = new EventEmitter();
+
+  handleSubmit() {
+    this.submit.emit();
+  }
+
+  handleDelete() {
+    this.delete.emit(this.item?.["@id"]);
+  }
+}