From 00a7688ef9bc86f0cc707343123a62d8c7db1181 Mon Sep 17 00:00:00 2001
From: Jan Klattenhoff <jan@kjan.de>
Date: Mon, 20 Jan 2025 15:11:46 +0100
Subject: [PATCH] feat(create-link): add create link component and routing

---
 src/app/app.routes.ts                         |  6 +++
 src/app/create-link/create-link.component.css |  0
 .../create-link/create-link.component.html    | 29 +++++++++++++++
 .../create-link/create-link.component.spec.ts | 23 ++++++++++++
 src/app/create-link/create-link.component.ts  | 37 +++++++++++++++++++
 src/app/dashboard/dashboard.component.html    |  5 +++
 src/app/dashboard/dashboard.component.ts      | 14 ++++++-
 src/app/service/link.service.ts               | 12 ++++++
 8 files changed, 125 insertions(+), 1 deletion(-)
 create mode 100644 src/app/create-link/create-link.component.css
 create mode 100644 src/app/create-link/create-link.component.html
 create mode 100644 src/app/create-link/create-link.component.spec.ts
 create mode 100644 src/app/create-link/create-link.component.ts

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index b66a2af..f710735 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -2,6 +2,7 @@ import { Routes } from '@angular/router';
 import { LoginComponent } from './login/login.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { AuthGuard } from './service/auth.service';
+import { CreateLinkComponent } from './create-link/create-link.component';
 
 export const routes: Routes = [
   {
@@ -13,6 +14,11 @@ export const routes: Routes = [
     component: DashboardComponent,
     canActivate: [AuthGuard],
   },
+  {
+    path: 'create-link',
+    component: CreateLinkComponent,
+    canActivate: [AuthGuard],
+  },
   {
     path: "**",
     redirectTo: "",
diff --git a/src/app/create-link/create-link.component.css b/src/app/create-link/create-link.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/create-link/create-link.component.html b/src/app/create-link/create-link.component.html
new file mode 100644
index 0000000..73a1d3f
--- /dev/null
+++ b/src/app/create-link/create-link.component.html
@@ -0,0 +1,29 @@
+<div class="h-full mx-auto container">
+  <app-navbar></app-navbar>
+  <div class="h-full overflow-x-auto pt-10">
+
+    <div class="mx-auto card bg-base-100 w-96 shadow-xl">
+      <div class="card-body">
+        <h2 class="card-title">Create link</h2>
+        @if (requestFailed) {
+        <div role="alert" class="alert alert-error">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none"
+            viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          <span>Something went wrong</span>
+        </div>
+        }
+        <form [formGroup]="createLinkForm">
+          <input formControlName="name" type="text" placeholder="Name"
+            class="mb-3 input input-bordered w-full max-w-xs" />
+          <input formControlName="link" type="url" placeholder="Link" class="input input-bordered w-full max-w-xs" />
+        </form>
+        <div class="card-actions justify-end">
+          <button class="btn btn-primary" (click)="submit()">Create</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/create-link/create-link.component.spec.ts b/src/app/create-link/create-link.component.spec.ts
new file mode 100644
index 0000000..b706423
--- /dev/null
+++ b/src/app/create-link/create-link.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateLinkComponent } from './create-link.component';
+
+describe('CreateLinkComponent', () => {
+  let component: CreateLinkComponent;
+  let fixture: ComponentFixture<CreateLinkComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CreateLinkComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CreateLinkComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/create-link/create-link.component.ts b/src/app/create-link/create-link.component.ts
new file mode 100644
index 0000000..7ba3c72
--- /dev/null
+++ b/src/app/create-link/create-link.component.ts
@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+import { NavbarComponent } from '../navbar/navbar.component';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { LinkService } from '../service/link.service';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-create-link',
+  imports: [NavbarComponent, ReactiveFormsModule],
+  templateUrl: './create-link.component.html',
+  styleUrl: './create-link.component.css'
+})
+export class CreateLinkComponent {
+  public createLinkForm!: FormGroup;
+  public requestFailed: boolean = false;
+
+  constructor(private linkService: LinkService, private router: Router) { }
+
+  ngOnInit(): void {
+    this.createLinkForm = new FormGroup({
+      name: new FormControl(''),
+      link: new FormControl(''),
+    });
+  }
+
+  submit() {
+    this.requestFailed = false;
+    this.linkService.createLink({
+      name: this.createLinkForm.get('name')?.value,
+      link: this.createLinkForm.get('link')?.value,
+    }).catch(() => this.requestFailed = true).finally(() => {
+      if (!this.requestFailed) {
+        this.router.navigate(['dashboard']);
+      }
+    });
+  }
+}
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index d6c8733..2caa0c5 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -1,6 +1,7 @@
 <div class="mx-auto container">
   <app-navbar></app-navbar>
   <div class="overflow-x-auto">
+    <button class="btn btn-primary" (click)="createLink()">Create new Link</button>
     <table class="table">
       <!-- head -->
       <thead>
@@ -9,6 +10,7 @@
           <th>Name</th>
           <th>Url</th>
           <th>Short Url</th>
+          <th>Actions</th>
         </tr>
       </thead>
       <tbody>
@@ -19,6 +21,9 @@
           <td>{{link.name}}</td>
           <td><a href="{{link.link}}">{{link.link}}</a></td>
           <td>ndy</td>
+          <td>
+            <button class="btn btn-error" (click)="deleteLink(link.id)">Delete</button>
+          </td>
         </tr>
         }
       </tbody>
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index 09f1a42..ab639a2 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { LinkService } from '../service/link.service';
 import { RecordModel } from 'pocketbase';
 import { NavbarComponent } from '../navbar/navbar.component';
+import { Router, RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-dashboard',
@@ -12,11 +13,22 @@ import { NavbarComponent } from '../navbar/navbar.component';
 export class DashboardComponent {
   public links: any[] = [];
 
-  constructor(private linkService: LinkService) { };
+  constructor(private linkService: LinkService, private router: Router) { };
 
   ngOnInit(): void {
     this.linkService.getLinks().then(links => {
       this.links = links;
     });
   }
+
+  createLink() {
+    this.router.navigate(['create-link']);
+  }
+
+  deleteLink(id: string) {
+    this.linkService.deleteLink(id); // TODO Check if something went wrong
+    this.links = this.links.filter(link => {
+      return link.id != id;
+    });
+  }
 }
diff --git a/src/app/service/link.service.ts b/src/app/service/link.service.ts
index 51eb8d8..fa08a5a 100644
--- a/src/app/service/link.service.ts
+++ b/src/app/service/link.service.ts
@@ -12,4 +12,16 @@ export class LinkService {
   getLinks(): Promise<RecordModel[]> {
     return this.pb.collection('links').getFullList();
   }
+
+  deleteLink(id: string) {
+    this.pb.collection('links').delete(id);
+  }
+
+  createLink(link: any): Promise<RecordModel> {
+    return this.pb.collection('links').create({
+      'name': link.name,
+      'link': link.link,
+      'owner': this.pb.authStore.record?.id,
+    });
+  }
 }