edit items and update

pamescan · pamescan · commit ad4fe613a20a · 2017-02-22T00:23:48.000+01:00
diff --git a/.firebaserc b/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "pamescan-d3c14"
+  }
+}
diff --git a/database.rules.json b/database.rules.json
@@ -0,0 +1,7 @@
+{
+  "rules": {
+    //".read": "auth != null",
+    ".read": true,
+    ".write": "auth != null"
+  }
+}
diff --git a/firebase.json b/firebase.json
@@ -0,0 +1,14 @@
+{
+  "database": {
+    "rules": "database.rules.json"
+  },
+  "hosting": {
+    "public": "build/web",
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}
diff --git a/lib/app_header.html b/lib/app_header.html
@@ -6,7 +6,7 @@
         <nav class="mdl-navigation">
             <ul>
                 <li id="profile" >
-                    <img [hidden]="!showProfile"src="{{firebaseService.user?.photoURL}}" width="40"   height="40" ) >
+                    <img [hidden]="!showProfile"src="{{firebaseService.user?.photoURL}}" width="40"   height="40"  >
                     <p [hidden]="!showProfile"> {{firebaseService.user?.displayName}} ({{firebaseService.user?.email}})</p>
                     <a [hidden]="!showProfile" href="#" class="mdl-button mdl-button--raised mdl-button--accent" (click)="onLogOut()">Sign Out</a>
                 </li>
diff --git a/lib/app_main.html b/lib/app_main.html
@@ -1,6 +1,6 @@
 <app-header></app-header>
 
-<main class="mdl-layout__content">
+<main class="center">
     <div id="container">
         <nav>
             <a [routerLink]="['Index']">Index</a>
diff --git a/lib/components/cards/card_simple_post.dart b/lib/components/cards/card_simple_post.dart
@@ -0,0 +1,27 @@
+import 'package:angular2/core.dart';
+import 'package:pamescan/items/SimplePost.dart';
+import 'package:angular2_components/angular2_components.dart';
+
+@Component(
+  selector: 'card-simple-post',
+  styleUrls: const ['card_simple_post.css'],
+  templateUrl: 'card_simple_post.html',
+  directives: const [materialDirectives],
+  providers: const [],
+  )
+class CardSimplePost {
+  @Input() SimplePost post;
+  @Output()  EventEmitter<String> delete=new EventEmitter<String>();
+  @Output()  EventEmitter<String> edit=new EventEmitter<String>();
+
+  onClickDelete(){
+
+    this.delete.emit(post.key);
+  }
+
+  onClickEdit(){
+    this.edit.emit(post.key);
+
+  }
+
+}
diff --git a/lib/components/cards/card_simple_post.html b/lib/components/cards/card_simple_post.html
@@ -0,0 +1,20 @@
+<div class="card" id="post-{{post.key}}">
+    <div class="card-image">
+        <img class="img-responsive" src="{{post.imageUrl}}">
+        <span class="card-title">{{post.title}}</span>
+    </div>
+
+    <div class="card-content">
+        <p>{{post.text}}</p>
+    </div>
+
+    <div class="card-action">
+        <!--<a >Link</a>
+        <a >Link</a>
+        <a >Link</a>-->
+        <material-button  (click)="onClickEdit()"><glyph icon="edit"></glyph></material-button>
+        <material-button  (click)="onClickDelete()"><glyph icon="delete"></glyph></material-button>
+        <!--<a ><glyph icon="delete"></glyph></a>
+        <a><i class="material-icons">delete</i></a>-->
+    </div>
+</div>
diff --git a/lib/components/cards/card_simple_post_edit.dart b/lib/components/cards/card_simple_post_edit.dart
@@ -0,0 +1,29 @@
+import 'package:angular2/core.dart';
+import 'package:pamescan/items/SimplePost.dart';
+import 'package:angular2_components/angular2_components.dart';
+
+@Component(
+  selector: 'card-simple-post-edit',
+  styleUrls: const ['card_simple_post.css'],
+  templateUrl: 'card_simple_post_edit.html',
+  directives: const [materialDirectives],
+  providers: const [],
+  )
+class CardSimplePostEdit {
+  @Input() SimplePost post;
+  @Input() bool isVisible;
+  @Output() EventEmitter<SimplePost> onUpdate=new EventEmitter<SimplePost>();
+  @Output() EventEmitter isVisibleChange=new EventEmitter();
+
+
+
+  onClickUpdate() {
+    this.onUpdate.emit(post);
+
+  }
+
+  onClickCancel() {
+    this.isVisibleChange.emit(false);
+  }
+
+}
diff --git a/lib/components/cards/card_simple_post_edit.html b/lib/components/cards/card_simple_post_edit.html
@@ -0,0 +1,36 @@
+<modal [visible]="isVisible">
+    <material-dialog class="max-height-dialog">
+
+        <!--<h3 header>Edit post</h3>-->
+
+
+        <div class="mdl-grid">
+            <h2 class="mdl-cell mdl-cell--12-col">Add new awesome note</h2>
+            <div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-phone mdl-cell--12-col-tablet">
+                <material-input floatingLabel label="Title" [(ngModel)]="post.title"></material-input><br>
+                <material-input floatingLabel multiline rows="5" label="Content" [(ngModel)]="post.text"></material-input>
+            </div>
+            <div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-phone mdl-cell--12-col-tablet" id="note-image">
+                <label for="upload-image">Attach image</label><br>
+                <material-input floatingLabel leadingGlyph="link" label="Link" [(ngModel)]="post.imageUrl"></material-input><br>
+                <label>OR</label><br>
+                <input type="file" id="upload-image" accept="image/*" disabled>
+            </div>
+
+        </div>
+
+
+        <div footer>
+
+            <material-button class="white" (click)="onClickUpdate()">
+                <glyph icon="update"></glyph>
+                Update
+            </material-button>
+            <material-button autoFocus (click)="onClickCancel()" class="white">
+                <glyph icon="cancel"></glyph>
+                Cancel
+            </material-button>
+        </div>
+
+    </material-dialog>
+</modal>
diff --git a/lib/pages/gallery/page_gallery.css b/lib/pages/gallery/page_gallery.css
@@ -0,0 +1,52 @@
+
+
+body {
+
+    font-size: 18px
+}
+
+
+
+
+
+.cards-row {
+    padding-top: 40px;
+    padding-bottom: 20px;
+    background: #eee
+}
+
+.thumbnail {
+    padding: 0;
+    border-radius: 0;
+    border: none;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12)
+}
+
+.thumbnail>img {
+    width: 100%;
+    display: block
+}
+
+.thumbnail h3 {
+    font-size: 26px
+}
+
+.thumbnail h3,
+.card-description {
+    margin: 0;
+    padding: 8px 0;
+    border-bottom: solid 1px #eee;
+    text-align: justify
+}
+
+.thumbnail p {
+    padding-top: 8px;
+    font-size: 20px
+}
+
+.thumbnail .btn {
+    border-radius: 0;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
+    font-size: 20px
+}
+
diff --git a/lib/pages/gallery/page_gallery.dart b/lib/pages/gallery/page_gallery.dart
@@ -1,33 +1,54 @@
 // Copyright (c) 2017, pablo.mestre. All rights reserved. Use of this source code
+
 // is governed by a BSD-style license that can be found in the LICENSE file.
 
 import 'package:angular2/core.dart';
 import 'package:angular2_components/angular2_components.dart';
-import 'package:pamescan/services/service_firebase.dart' ;
+import 'package:pamescan/services/service_firebase.dart';
 
 import 'package:pamescan/items/SimplePost.dart';
-
-
+import 'package:pamescan/components/cards/card_simple_post_edit.dart';
+import 'package:pamescan/components/cards/card_simple_post.dart';
 
 
 @Component(
   selector: 'page-gallery',
   styleUrls: const ['page_gallery.css'],
   templateUrl: 'page_gallery.html',
-  directives: const [materialDirectives],
+  directives: const [materialDirectives, CardSimplePost, CardSimplePostEdit],
   providers: const [FirebaseService],
   )
-
 class PageGallery {
   final FirebaseService fbs;
-  PageGallery(this.fbs);
 
-  onAddItemClick(){
-    SimplePost simplePost= new SimplePost("a","b","c");
+  bool showDialog = false;
+  SimplePost selectedPost;
+
+
+  PageGallery(this.fbs) {
+    selectedPost = new SimplePost("");
+  }
+
+  onAddItemClick() {
+    SimplePost simplePost = new SimplePost("a", "b", "https://dummyimage.com/317x211/000/fff&text=example");
     fbs.postItem(simplePost);
   }
-  onDeleteItem(String key){
+
+  onDeleteItem(key) {
     fbs.delItem(key);
   }
 
+  onEditItem(key) {
+    selectedPost = fbs.getItem(key);
+    showDialog = true;
+  }
+
+  updateItem(event) {
+    showDialog = false;
+    fbs.updateItem(event);
+  }
+
+  test(key) {
+    print(key.toString());
+  }
 }
diff --git a/lib/pages/gallery/page_gallery.html b/lib/pages/gallery/page_gallery.html
@@ -1,14 +1,18 @@
-<h1>Page Gallery</h1>
-<material-button (click)="onAddItemClick()"> Incrementa</material-button>
-
-    <div id="notes" class="mdl-grid">
-        <div *ngFor="let post of fbs.postList" id="card-template-{{post.key}}" class="mdl-card mdl-cell mdl-cell--4-col section--center mdl-shadow--2dp" style="display: block">
-            <h3>{{post.title}}</h3>
-            <div class="mdl-card__supporting-text note-text">
-                <p>{{post.text}}</p>
-            </div>
-            <div class="mdl-card__actions note-actions">
-                <a  title="Remove note" class="note-remove"><i class="material-icons" (click)="onDeleteItem(post.key)">delete</i></a>
+<!--<material-button (trigger)="showDialog = true"                 raised                 class="blue">
+    Open Max Height
+</material-button>-->
+<div class="container-fluid">
+    <div class="container">
+        <button (click)="onAddItemClick()" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
+            <i class="material-icons">add</i>
+        </button>
+        <div class="row">
+            <div class="col-sm-6 col-md-4" *ngFor="let post of fbs.postList ">
+                <card-simple-post [post]="post" (delete)="onDeleteItem($event)" (edit)="onEditItem($event)"></card-simple-post>
             </div>
         </div>
     </div>
+    <card-simple-post-edit [post]="selectedPost" [(isVisible)]="showDialog" (onUpdate)="updateItem($event)" ></card-simple-post-edit>
+
+</div>
+
diff --git a/lib/services/service_firebase.dart b/lib/services/service_firebase.dart
@@ -1,11 +1,13 @@
 import 'dart:async';
 import 'package:angular2/core.dart';
 import 'package:firebase/firebase.dart' as fb;
-
+import 'package:pamescan/services/service_simple_post.dart';
 import 'package:pamescan/items/SimplePost.dart';
 
 @Injectable()
 class FirebaseService {
+
+  //final SimplePostService sps;
   final fb.Auth auth;
   final fb.DatabaseReference databaseRef;
   final fb.StorageReference storageRef;
@@ -42,6 +44,18 @@ class FirebaseService {
   }
 
   _setStorageListener() {
+    //sps.setStorageListener(databaseRef);
+
+    // Setups listening on the child_changed event on the database ref
+    databaseRef.onChildChanged.listen((e) {
+      // Snapshot of the data.
+      fb.DataSnapshot data = e.snapshot;
+      // Value of data from snapshot.
+      var val = data.val();
+      var item = new SimplePost(
+          val[jsonTagText], val[jsonTagTitle], val[jsonTagImgUrl], data.key);
+      _updateItem(item);
+    });
     // Setups listening on the child_added event on the database ref.
     databaseRef.onChildAdded.listen((e) {
       // Snapshot of the data.
@@ -102,12 +116,29 @@ class FirebaseService {
       print("Error in deleting $key: $e");
     }
   }
+  updateItem(SimplePost item)async{
+    try {
+      await databaseRef.child(item.key)
+          .update(SimplePost.toMap(item));
+    } catch (e) {
+      print("Error in writing to database: $e");
+    }
+  }
+
+  SimplePost getItem(String key){
+    return postList.firstWhere((post) => post.key == key);
+  }
 
   // Removes item with a key from local list
   _removeItem(String key) {
     postList.remove(postList.firstWhere((post) => post.key == key));
   }
 
+  _updateItem(SimplePost post) {
+    int position = postList.indexOf(postList.firstWhere((e) => e.key == post.key));
+    postList[position] = post;
+  }
+
   logOut() {
     auth.signOut();
     postList = [];
diff --git a/lib/services/service_simple_post.dart b/lib/services/service_simple_post.dart
@@ -0,0 +1,18 @@
+import 'dart:async';
+import 'package:angular2/core.dart';
+
+import 'package:firebase/firebase.dart' as fb;
+import 'package:pamescan/services/service_firebase.dart';
+
+import 'package:pamescan/items/SimplePost.dart';
+
+@Injectable()
+class SimplePostService {
+  //final FirebaseService fbs;
+
+  SimplePostService();
+  setStorageListener(fb.DatabaseReference dbr){
+
+  }
+
+}
diff --git a/web/index.html b/web/index.html

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +{
 +  "projects": {
 +    "default": "pamescan-d3c14"
 +  }
 +}