Güncelleme işlemi tamamlandı.

PratikForumClient/angular.json

@@ -46,6 +46,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css",
               "src/main-style.scss",
               "./node_modules/@fortawesome/fontawesome-free/css/all.min.css"
@@ -113,6 +114,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -144,6 +146,7 @@
           }
         }
       }
-    }},
+    }
+  },
   "defaultProject": "PratikForumClient"
 }

PratikForumClient/package.json

@@ -11,18 +11,19 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^8.2.14",
-    "@angular/cdk": "^10.1.0",
+    "@angular/animations": "~8.2.8",
+    "@angular/cdk": "~8.2.3",
     "@angular/common": "~8.2.8",
     "@angular/compiler": "~8.2.8",
     "@angular/core": "~8.2.8",
     "@angular/forms": "~8.2.8",
-    "@angular/material": "^10.1.0",
+    "@angular/material": "^8.2.3",
     "@angular/platform-browser": "~8.2.8",
     "@angular/platform-browser-dynamic": "~8.2.8",
     "@angular/router": "~8.2.8",
     "@fortawesome/fontawesome-free": "^5.14.0",
     "bulma": "^0.9.0",
+    "hammerjs": "^2.0.8",
     "rxjs": "~6.4.0",
     "tslib": "^1.10.0",
     "zone.js": "~0.9.1"

PratikForumClient/src/app/app.module.ts

@@ -1,6 +1,9 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {MatDialogModule} from '@angular/material/dialog';
+
 import { AppComponent } from './app.component';
 import { BankAccountComponent } from './bank-account/bank-account.component';
 import { HttpClientModule } from '@angular/common/http';
@@ -24,6 +27,7 @@ import { BudgetItemCardComponent } from './budget-main/budget-item-list/budget-i
 import { EditItemModalComponent } from './budget-main/edit-item-modal/edit-item-modal.component';
 
 
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -51,9 +55,12 @@ import { EditItemModalComponent } from './budget-main/edit-item-modal/edit-item-
     FormsModule,
     ReactiveFormsModule,
     HttpClientModule,
-    AppRoutingModule
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    MatDialogModule
   ],
   providers: [],
+  entryComponents:[EditItemModalComponent],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

PratikForumClient/src/app/budget-main/add-item-form/add-item-form.component.html

@@ -27,7 +27,8 @@
         </p>
       </div>
       <div class="field is-narrow">
-        <button type="submit" [disabled]="!budgetForm.valid" class="button is-primary">
+        <button type="submit" [disabled]="!budgetForm.valid"
+        class="button is-primary">
           Ekle
         </button>
       </div>

PratikForumClient/src/app/budget-main/budget-item-list/budget-item-card/budget-item-card.component.html

@@ -1,5 +1,7 @@
 <div class="root">
-    <div class="budget-item" [ngClass]="{'income':item.amount>=0,'expense':item.amount<0}">
+    <div class="budget-item"
+    (click)="onCardclick(item)"
+    [ngClass]="{'income':item.amount>=0,'expense':item.amount<0}">
         <div class="description">
             <p>{{item.description}}</p>
         </div>

PratikForumClient/src/app/budget-main/budget-item-list/budget-item-card/budget-item-card.component.ts

@@ -9,6 +9,7 @@ import { BudgetItem } from 'src/app/models/budget-item.model';
 export class BudgetItemCardComponent implements OnInit {
   @Input() item: BudgetItem;
   @Output() removeItem: EventEmitter<BudgetItem> = new EventEmitter();
+  @Output() selectItem: EventEmitter<BudgetItem> = new EventEmitter();
   constructor() { }
 
   ngOnInit() {
@@ -17,4 +18,8 @@ export class BudgetItemCardComponent implements OnInit {
     // emit etmeli parentine
     this.removeItem.emit(rItem);
   }
+  onCardclick(sItem: BudgetItem) {
+    // emit etmeli parentine
+    this.selectItem.emit(sItem);
+  }
 }

PratikForumClient/src/app/budget-main/budget-item-list/budget-item-list.component.html

@@ -9,6 +9,7 @@ <h1>GELİR</h1>
           [item]="item"
           style="display: block; margin-bottom: 20px;"
           (removeItem)="deleteBudgetItem(item)"
+          (selectItem)="editBudgetItem(item)"
         ></app-budget-item-card>
     </div>
       </div>
@@ -22,6 +23,7 @@ <h1>GİDER</h1>
           [item]="item"
             style="display: block; margin-bottom: 20px;"
             (removeItem)="deleteBudgetItem(item)"
+            (selectItem)="editBudgetItem(item)"
           ></app-budget-item-card>
       </div>
         </div>

PratikForumClient/src/app/budget-main/budget-item-list/budget-item-list.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { BudgetItem } from 'src/app/models/budget-item.model';
+import { MatDialog } from '@angular/material/dialog';
+import { EditItemModalComponent } from '../edit-item-modal/edit-item-modal.component';
 
 
 @Component({
@@ -11,12 +13,27 @@ export class BudgetItemListComponent implements OnInit {
   @Input() budgetItems: BudgetItem[];
   // tslint:disable-next-line: no-output-on-prefix
   @Output() onDeleteBudgetItem: EventEmitter<BudgetItem> = new EventEmitter();
-  constructor() { }
+  constructor(private dialog: MatDialog) { }
 
   ngOnInit() {
   }
+
   deleteBudgetItem(delBudgetItem: BudgetItem) {
     // burada da parentine emit etmeli
     this.onDeleteBudgetItem.emit(delBudgetItem);
   }
+  editBudgetItem(edBudgetItem: BudgetItem) {
+    console.log(edBudgetItem);
+    const dialogRef = this.dialog.open(EditItemModalComponent, {
+      width: '500px',
+      data: edBudgetItem
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        // güncelleme
+        this.budgetItems[this.budgetItems.indexOf(edBudgetItem)] = result;
+      }
+    });
+  }
 }

PratikForumClient/src/app/budget-main/budget-main.component.ts

@@ -17,7 +17,6 @@ export class BudgetMainComponent implements OnInit {
     this.budgetItems.push(newItem);
   }
   deleteItem(delItem: BudgetItem) {
-    console.log('budgetMain', delItem);
     const index = this.budgetItems.indexOf(delItem);
     this.budgetItems.splice(index, 1);
   }

PratikForumClient/src/app/budget-main/edit-item-modal/edit-item-modal.component.html

@@ -1,2 +1,3 @@
 <h1 class="title">Düzenle</h1>
-<app-add-item-form [item]="item" onsubmit="onsubmitted($event)"></app-add-item-form>
+<app-add-item-form [item]="item"
+(submitForm)="onSubmitted($event)"></app-add-item-form>

PratikForumClient/src/app/budget-main/edit-item-modal/edit-item-modal.component.ts

@@ -1,18 +1,20 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Inject } from '@angular/core';
 import { BudgetItem } from 'src/app/models/budget-item.model';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-edit-item-modal',
   templateUrl: './edit-item-modal.component.html',
   styleUrls: ['./edit-item-modal.component.css']
 })
 export class EditItemModalComponent implements OnInit {
-  @Input() item: BudgetItem;
-  constructor() { }
+  constructor(public dialogRef: MatDialogRef<EditItemModalComponent>,
+              @Inject(MAT_DIALOG_DATA) public item: BudgetItem
+  ) { }
 
   ngOnInit() {
   }
-  onsubmitted(updatedItem: BudgetItem) {
-
+  onSubmitted(updatedItem: BudgetItem) {
+    this.dialogRef.close(updatedItem);
   }
 }

PratikForumClient/src/index.html

@@ -7,6 +7,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>

PratikForumClient/src/main.ts

@@ -1,3 +1,4 @@
+import 'hammerjs';
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 

PratikForumClient/src/styles.css

@@ -1,3 +1,4 @@
+
 .grid-table
 {
 	display:table;
@@ -47,4 +48,6 @@ input.ng-invalid.ng-touched,select.ng-invalid.ng-touched{
 
 @keyframes fadeinout {
   50% { opacity: 1; }
-}
+}
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }