Working on abstraction of forum page to allow comments on forums.

2 files changed, 145 insertions, 45 deletions

diff --git a/src/components/forum-element.js b/src/components/forum-element.js
new file mode 100644
index 0000000..138cc6a
--- /dev/null
+++ b/src/components/forum-element.js
@@ -0,0 +1,137 @@
+/**
+@license
+Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+
+import { LitElement, html } from '@polymer/lit-element';
+import { connect } from 'pwa-helpers/connect-mixin.js';
+
+// This element is connected to the Redux store.
+import { store } from '../store.js';
+
+//These are the actions needed by this element.
+import { adminApproveHours, adminRejectHours } from '../actions/firebaseAdmin.js';
+
+// Import button styles
+import { ButtonSharedStyles } from './button-shared-styles.js';
+
+class ForumElement extends connect(store)(LitElement) {
+  _render(props) {
+    return html`
+      ${ButtonSharedStyles}
+
+      <style>
+
+      paper-card {
+        display: block;
+        padding-bottom: 3px;
+      }
+
+      .button-grid {
+        display: grid;
+        grid-template-rows: 1fr;
+      }
+
+      .card-content > h4 {
+        text-align:   right;
+        font-weight:  lighter;
+        font-style:   italic;
+        word-break:   break-all;
+      }
+
+      .card-content > h3 {
+        word-break: break-all;
+      }
+
+      .card-content > h3, p {
+        text-align: center;
+      }
+
+      .success {
+          width:        100%;
+          margin-top:   5px;
+      }
+
+      @media (min-width: 460px) {
+        .button-grid {
+          grid-template-columns: 1fr 1fr;
+        }
+
+        #comment-subject-field {
+            margin-left:    auto;
+            margin-right:   auto;
+            text-align:     center;
+            width:          50%;
+        }
+      }
+
+
+      </style>
+
+      <paper-card
+      elevation="0">
+        <div class="card-content">
+            <h4>${props.author}</h4>
+            <h3>${props.subject}</h3>
+            <p>${props.content}</p>
+        </div>
+        <div class="card-actions">
+            <div class="button-grid">
+                <paper-button class="info" raised onclick="${() => this.showComments = !this.showComments}">Show Comments</paper-button>
+                <paper-button raised onclick="${() => this.postComment  = !this.postComment}">${this.postComment? "Hide Draft" : "Post Comment"}</paper-button>
+            </div>
+
+            <div hidden="${!props.postComment}">
+                <hr>
+                <paper-input label="Comment Subject" id="comment-subject-field"></paper-input>
+                <paper-textarea label="Comment Content" id="comment-content-field"></paper-textarea>
+                <paper-button class="success">Submit Comment</paper-comment>
+            </div>
+
+            <div hidden="${!props.showComments}">
+                <hr hidden="${!props.showComments && !props.postComment}">
+                <h4>Comments</h4>
+                
+                </div>  
+            </div>
+        </div>
+      </paper-card>
+    `;
+  }
+
+  static get properties() { return {
+    signedIn:   Boolean,
+
+    author:     String,
+    subject:    String,
+    content:    String,
+
+    showComments:   Boolean,
+    postComment:    Boolean
+  }};
+
+  _stateChanged(state) {
+    this.signedIn = state.firebaseAuth.signedIn;
+  }
+
+  constructor() {
+    super();
+
+    this.signedIn   = false;
+
+    this.author     = "";
+    this.subject    = "";
+    this.content    = "";
+
+    this.showComments   = false;
+    this.postComment    = false;
+  }
+
+}
+
+window.customElements.define('forum-element', ForumElement);
diff --git a/src/components/mao-forums.js b/src/components/mao-forums.js
index 0b2a4af..b85fa26 100644
--- a/src/components/mao-forums.js
+++ b/src/components/mao-forums.js
@@ -33,6 +33,9 @@ import '@polymer/paper-button/paper-button.js';
 // Import other customElements
 import '@vaadin/vaadin-date-picker/vaadin-date-picker.js';
 
+//import local customElements
+import './forum-element.js'
+
 class MaoForums extends connect(store)(PageViewElement) {
   _render(props) {
     return html`
@@ -41,33 +44,6 @@ class MaoForums extends connect(store)(PageViewElement) {
 
       <style>
 
-      paper-card {
-        display: block;
-      }
-
-      .card-actions > paper-button {
-        margin-left:  auto;
-        margin-right: auto;
-        display: block;
-        width: 50%;
-      }
-
-      .card-content > h4 {
-        text-align:   right;
-        font-weight:  lighter;
-        font-style:   italic;
-        word-break:   break-all;
-      }
-
-      .card-content > h3 {
-        word-break: break-all;
-      }
-
-      .card-content > h3, p {
-        text-align: center;
-      }
-
-
       .post-grid {
         display:  grid;
         grid-gap: 10px;
@@ -107,7 +83,6 @@ class MaoForums extends connect(store)(PageViewElement) {
       </section>
 
       <section>
-
         <h2 class="underline">Recent Posts</h2>
 
         <div hidden="${!props.onceOnline}" class="post-grid" id="posts-grid"></div>
@@ -173,25 +148,13 @@ class MaoForums extends connect(store)(PageViewElement) {
       postsGrid.innerHTML = "";
 
       for(var i = this.forumPosts.length-1; i >=0; i--) {
-        var paperCard     = document.createElement('paper-card');
-        var cardContent   = document.createElement('div');
-        var forumAuthor   = document.createElement('h4');
-        var forumSubject  = document.createElement('h3');
-        var forumContent  = document.createElement('p');
-
-        forumAuthor.innerHTML   = this.forumPosts[i].email  .replace('@communityschoolnaples.org', '');
-        forumSubject.innerHTML  = this.forumPosts[i].subject;
-        forumContent.innerHTML  = this.forumPosts[i].content;
-
-        cardContent.classList.add('card-content');
-        cardContent.appendChild(  forumAuthor);
-        cardContent.appendChild(  forumSubject);
-        cardContent.appendChild(  forumContent);
+        var forumElement  = document.createElement('forum-element');
 
-        paperCard.elevation     = 0;
-        paperCard.appendChild(  cardContent);
+        forumElement.author   = this.forumPosts[i].email  .replace('@communityschoolnaples.org', '');
+        forumElement.subject  = this.forumPosts[i].subject;
+        forumElement.content  = this.forumPosts[i].content;
 
-        postsGrid.appendChild(paperCard);
+        postsGrid.appendChild(forumElement);
       }
     }
   }