RxJS

connect to #53
jwdevelop · Oct 27, 2017 · f8b5a53 · f8b5a53
1 parent 7bdfcb9
commit f8b5a53
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 20 deletions.
diff --git a/src/app/house.component.html b/src/app/house.component.html
@@ -16,7 +16,7 @@
         </tr>
       </thead>
       <tbody>
-        <tr *ngFor="let house of houses | orderBy:'order'">
+        <tr *ngFor="let house of houses | async">
           <td>
             <span *ngIf="selectedHouse !== house">{{house.order}}</span>
             <span *ngIf="selectedHouse === house">
@@ -36,8 +36,7 @@
               </button>
             </span>
             <span *ngIf="selectedHouse === house">
-              <button class="btn btn-success btn-sm btn-icon no-margin" [disabled]="editingHouse.name.length < 1"
-                (click)="save()">
+              <button class="btn btn-success btn-sm btn-icon no-margin" [disabled]="editingHouse.name.length < 1" (click)="save()">
                 <clr-icon shape="check"></clr-icon>
               </button>
             </span>
@@ -54,8 +53,30 @@
           </td>
         </tr>
 
+        <tr *ngIf="selectedHouse === newHouse">
+          <td>
+            <input type="number" [(ngModel)]="editingHouse.order" min="1" placeholder="순서를 입력">
+          </td>
+          <td>
+            <input type="text" [(ngModel)]="editingHouse.name" placeholder="번지수 혹은 호수">
+          </td>
+          <td>
+            <button class="btn btn-success btn-sm btn-icon no-margin" [disabled]="editingHouse.name.length < 1" (click)="save()">
+              <clr-icon shape="check"></clr-icon>
+            </button>
+            <button class="btn btn-warning btn-sm btn-icon no-margin" (click)="cancel()">
+              <clr-icon shape="times"></clr-icon>
+            </button>
+          </td>
+          <td>
+            <button class="btn btn-danger btn-sm btn-icon no-margin" disabled>
+              <clr-icon shape="trash"></clr-icon>
+            </button>
+          </td>
+        </tr>
+
         <tr>
-          <td colspan="4" *ngIf="houses.length === 0">집을 추가해 주세요.</td>
+          <td colspan="4" *ngIf="(houses | async)?.length === 0">집을 추가해 주세요.</td>
         </tr>
       </tbody>
     </table>

diff --git a/src/app/house.component.ts b/src/app/house.component.ts
@@ -2,38 +2,39 @@ import { Component, OnInit } from '@angular/core';
 import { TerritoryService } from 'app/services/territory.service';
 import { House } from 'app/classes/house';
 import { ActivatedRoute, ParamMap } from '@angular/router';
-
+import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/switchMap';
 
+
 @Component({
   templateUrl: './house.component.html'
 })
 export class HouseComponent implements OnInit {
 
-  houses: House[] = [];
+  houses: Observable<House[]>;
   territoryKey: string;
   selectedHouse: House;
   editingHouse: House;
+  newHouse: House = {
+    order: 1,
+    name: ''
+  };
 
   constructor(
     private territoryService: TerritoryService,
     private route: ActivatedRoute
   ) {}
 
   ngOnInit() {
-    this.route.paramMap.switchMap((params: ParamMap) => {
+    this.houses = this.route.paramMap.switchMap((params: ParamMap) => {
       this.territoryKey = params.get('key');
       return this.territoryService.getHouses(this.territoryKey);
-    }).subscribe(houses => this.houses = houses);
+    });
   }
 
   addRow() {
-    this.houses.push({
-      name: '',
-      order: 1
-    });
-    this.selectedHouse = this.houses[this.houses.length - 1];
-    this.editingHouse = Object.assign({}, this.houses[this.houses.length - 1]);
+    this.selectedHouse = this.newHouse;
+    this.editingHouse = Object.assign({}, this.newHouse);
   }
 
   save() {
@@ -45,7 +46,6 @@ export class HouseComponent implements OnInit {
     } else {
       this.territoryService.createHouse(this.territoryKey, this.editingHouse).then(() => {
         this.selectedHouse = null;
-        this.houses = this.houses.filter(house => house.$key);
       });
     }
   }
@@ -57,11 +57,10 @@ export class HouseComponent implements OnInit {
 
   cancel() {
     this.selectedHouse = null;
-    this.houses = this.houses.filter(house => house.$key);
   }
 
   delete(house: House) {
-    this.territoryService.deleteHouse(this.territoryKey, house);
+    this.territoryService.deleteHouse(this.territoryKey, house.$key);
   }
 
 }
diff --git a/src/app/services/territory.service.ts b/src/app/services/territory.service.ts
@@ -128,9 +128,8 @@ export class TerritoryService {
    * @returns
    * @memberof TerritoryService
    */
-  deleteHouse(territoryKey: string, house: House) {
+  deleteHouse(territoryKey: string, houseKey: string) {
     const congregation = this.authService.getCongregation();
-    const houseKey = house.$key;
     return this.db.object(`${congregation}/houses/${territoryKey}/${houseKey}`).remove();
   }
 
@@ -143,7 +142,9 @@ export class TerritoryService {
    */
   getHouses(territoryKey: string) {
     const congregation = this.authService.getCongregation();
-    return this.db.list(`${congregation}/houses/${territoryKey}`);
+    return this.db.list(`${congregation}/houses/${territoryKey}`).map(houses => {
+      return houses.sort((a, b) => +a.order < +b.order ? -1 : 1);
+    });
   }
 
   /**