Merge pull request #42 from isdi-coders-2023/feature/editcard2

Finish Edit Card View

db.json

@@ -1,3 +1,20 @@
 {
-  "cards": []
+  "cards": [
+    {
+      "id": "8a884bf7-52b6-4474-baa6-c8262ecbf68c",
+      "name": null,
+      "manaCost": null,
+      "cmc": null,
+      "colors": null,
+      "rarity": null,
+      "setName": null,
+      "text": null,
+      "artist": null,
+      "imageUrl": "../../../assets/img/cardtemplate.png",
+      "types": null,
+      "flavor": null,
+      "number": "8a884bf7-52b6-4474-baa6-c8262ecbf68c",
+      "isFavorite": true
+    }
+  ]
 }

src/app/core/store/store.service.ts

@@ -12,6 +12,8 @@ export class StoreService {
   public state$ = this.state.asObservable();
   private detailCard = new BehaviorSubject<MagicCard>({} as MagicCard);
   public detailCard$ = this.detailCard.asObservable();
+  private editCard = new BehaviorSubject<MagicCard>({} as MagicCard);
+  public editCard$ = this.editCard.asObservable();
   currentPage = 1;
   currentColor = '';
   currentType = '';
@@ -49,6 +51,14 @@ export class StoreService {
     return this.detailCard$;
   }
 
+  getEditCard(card: MagicCard) {
+    this.editCard.next(card);
+  }
+
+  shareEditCard(): Observable<MagicCard> {
+    return this.editCard$;
+  }
+
   getUsername(username: string) {
     this.usernameForm.next(username);
     this.isAuthenticated.next(true);

src/app/feature/buttons/buttons.component.html

@@ -11,6 +11,9 @@
     height="36px"
   />} @if(card){<img
     class="corazonPartio"
+    (click)="sendEditCard()"
+    (keydown)="keydownEdit($event)"
+    tabindex="0"
     src="../../../assets/icons/editar.png"
     alt="editar"
     width="36px"

src/app/feature/buttons/buttons.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input } from '@angular/core';
 import { MagicCard } from '../../core/model/model';
 import { LocalRepoService } from '../../core/local-repo/local-repo.service';
+import { StoreService } from '../../core/store/store.service';
 
 @Component({
   selector: 'app-buttons',
@@ -10,7 +11,7 @@ import { LocalRepoService } from '../../core/local-repo/local-repo.service';
   styleUrl: './buttons.component.css',
 })
 export class ButtonsComponent {
-  constructor(private rep: LocalRepoService) {}
+  constructor(private rep: LocalRepoService, private store: StoreService) {}
   @Input() card!: MagicCard;
   sendFavorite() {
     this.card.isFavorite = !this.card.isFavorite;
@@ -33,4 +34,12 @@ export class ButtonsComponent {
       this.deleteCard();
     }
   }
+  sendEditCard() {
+    this.store.getEditCard(this.card);
+  }
+  keydownEdit(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      this.sendEditCard();
+    }
+  }
 }

src/app/feature/createcard/createcard.component.html

@@ -1,4 +1,11 @@
 <app-header>
   <app-menu></app-menu>
 </app-header>
-<app-cu-form></app-cu-form>
+<div class="image">
+  <img
+    src="../../../assets/img/cardtemplate.png"
+    alt="card-template"
+    width="300"
+  />
+</div>
+<app-cu-form></app-cu-form>

src/app/feature/cu-form/cu-form.component.html

@@ -1,21 +1,23 @@
 <section>
-  <div class="image">
-    <img src="../../../assets/img/cardtemplate.png" alt="card-template" width="300">
-  </div>
-
   <form [formGroup]="cuForm" (ngSubmit)="sendNewCard()">
-
-    <label for=""></label>
-    <input type="text">
-
     <label for="name"><span>Card Name:</span></label>
-    <input type="text" id="name" placeholder="Name" formControlName="name">
+    <input type="text" id="name" placeholder="Name" formControlName="name" />
 
     <label for="manaCost"><span>Mana Cost:</span></label>
-    <input type="text" id="manaCost" placeholder="Mana Cost" formControlName="manaCost">
+    <input
+      type="text"
+      id="manaCost"
+      placeholder="Mana Cost"
+      formControlName="manaCost"
+    />
 
     <label for="cmc"><span>Mana Value:</span></label>
-    <input type="text" id="cmc" placeholder="Mana Value" formControlName="cmc">
+    <input
+      type="text"
+      id="cmc"
+      placeholder="Mana Value"
+      formControlName="cmc"
+    />
 
     <label for="colors"><span>Color:</span></label>
     <select name="colors" id="colors" formControlName="colors">
@@ -38,14 +40,30 @@
     </select>
 
     <label for="text"><span>Card Text:</span></label>
-    <input class="textbox" type="text" id="text" placeholder="Text, max. length: 300" formControlName="text"
-      maxlength="300">
+    <input
+      class="textbox"
+      type="text"
+      id="text"
+      placeholder="Text, max. length: 300"
+      formControlName="text"
+      maxlength="300"
+    />
 
     <label for="flavor"><span>Flavor Text:</span></label>
-    <input type="text" id="flavor" placeholder="Motto" formControlName="flavor">
+    <input
+      type="text"
+      id="flavor"
+      placeholder="Motto"
+      formControlName="flavor"
+    />
 
     <label for="setName"><span>Expansion:</span></label>
-    <input type="text" id="setName" placeholder="Expansion" formControlName="setName">
+    <input
+      type="text"
+      id="setName"
+      placeholder="Expansion"
+      formControlName="setName"
+    />
 
     <label for="rarity"><span>Rarity:</span></label>
     <select name="rarity" id="rarity" formControlName="rarity">
@@ -56,8 +74,13 @@
     </select>
 
     <label for="artist"><span>Artist:</span></label>
-    <input type="text" id="artist" placeholder="Your name" formControlName="artist">
+    <input
+      type="text"
+      id="artist"
+      placeholder="Your name"
+      formControlName="artist"
+    />
 
     <button type="submit">Create</button>
   </form>
-</section>
+</section>

src/app/feature/editcard/editcard/editcard.component.html

@@ -1,4 +1,7 @@
 <app-header>
   <app-menu></app-menu>
 </app-header>
+<div>
+  <img [src]="this.card.imageUrl" alt="Selected card image" width="300" />
+</div>
 <app-cu-form></app-cu-form>

src/app/feature/editcard/editcard/editcard.component.ts

@@ -2,6 +2,8 @@ import { Component } from '@angular/core';
 import { CuFormComponent } from '../../cu-form/cu-form.component';
 import { MenuComponent } from '../../../shared/menu/menu.component';
 import { HeaderComponent } from '../../../shared/header/header.component';
+import { StoreService } from '../../../core/store/store.service';
+import { MagicCard } from '../../../core/model/model';
 
 @Component({
   selector: 'app-editcard',
@@ -10,4 +12,9 @@ import { HeaderComponent } from '../../../shared/header/header.component';
   styleUrl: './editcard.component.css',
   imports: [CuFormComponent, MenuComponent, HeaderComponent],
 })
-export default class EditcardComponent {}
+export default class EditcardComponent {
+  card: MagicCard = {} as MagicCard;
+  constructor(private store: StoreService) {
+    this.store.shareEditCard().subscribe((data) => (this.card = data));
+  }
+}

src/app/feature/homebutton/homebutton/homebutton.component.html

@@ -1,6 +1,9 @@
 <div class="homeButton">
   @if(card){<img
     class="corazonPartio"
+    (click)="sendEdit()"
+    (keydown)="handleKeydownEdit($event)"
+    tabindex="0"
     src="../../../assets/icons/editar.png"
     alt="editar"
     width="36px"

src/app/feature/homebutton/homebutton/homebutton.component.ts

@@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core';
 import { LocalRepoService } from '../../../core/local-repo/local-repo.service';
 import { MagicCard } from '../../../core/model/model';
 import { RouterLink } from '@angular/router';
+import { StoreService } from '../../../core/store/store.service';
 
 @Component({
   selector: 'app-homebutton',
@@ -11,7 +12,7 @@ import { RouterLink } from '@angular/router';
   styleUrl: './homebutton.component.css',
 })
 export class HomebuttonComponent {
-  constructor(private rep: LocalRepoService) {}
+  constructor(private rep: LocalRepoService, private store: StoreService) {}
   @Input() card!: MagicCard;
   sendFavorite() {
     this.card.isFavorite = !this.card.isFavorite;
@@ -26,4 +27,12 @@ export class HomebuttonComponent {
       this.sendFavorite();
     }
   }
+  sendEdit() {
+    this.store.getEditCard(this.card);
+  }
+  handleKeydownEdit(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      this.sendEdit();
+    }
+  }
 }