Working on displaying the requests with custom element request-grid.

3 files changed, 123 insertions, 30 deletions

diff --git a/src/actions/firebase.js b/src/actions/firebase.js
index 610a60f..8dea81b 100644
--- a/src/actions/firebase.js
+++ b/src/actions/firebase.js
@@ -216,14 +216,16 @@ export const FETCH_ADMIN_REQUESTS   = 'FETCH_ADMIN_REQUESTS';
 export const UPDATE_ADMIN_REQUESTS  = 'UPDATE_ADMIN_REQUESTS';
 
 export const requestHours = (_time, _trainee, _date) => (dispatch, getState) => {
-  var docRef  = firestore.collection('requests');
-  var _uid    = getState().firebase.uid;
+  var docRef    = firestore.collection('requests');
+  const _uid    = getState().firebase.uid;
+  const _email  = getState().firebase.email;
 
   docRef.add({
     time:     _time,
     trainee:  _trainee,
     date:     _date,
-    uid:      _uid
+    uid:      _uid,
+    email:    _email
   });
 
   docRef  = firestore.collection('users').doc(_uid);
@@ -246,7 +248,7 @@ export const fetchAdminRequests = () => (dispatch) => {
     query.forEach((doc) => {
       requests.push(doc.data());
     });
-    console.log(requests);
+    
     dispatch(fetchAdminRequests(requests));
   });
 }
diff --git a/src/components/mao-admin.js b/src/components/mao-admin.js
index 3bcc4c9..c63f952 100644
--- a/src/components/mao-admin.js
+++ b/src/components/mao-admin.js
@@ -16,7 +16,7 @@ import { connect } from 'pwa-helpers/connect-mixin.js';
 import { store } from '../store.js';
 
 //These are the actions needed by this element.
-import {} from '../actions/firebase.js';
+import { approveHours } from '../actions/firebase.js';
 
 // We are lazy loading its reducer.
 import firebase from '../reducers/firebase.js';
@@ -35,6 +35,9 @@ import '@polymer/paper-card/paper-card.js';
 import '@polymer/paper-slider/paper-slider.js';
 import '@polymer/paper-button/paper-button.js';
 
+// Import custom elements
+import './request-element.js';
+
 class MaoAdmin extends connect(store)(PageViewElement) {
   _render(props) {
     return html`
@@ -121,35 +124,30 @@ class MaoAdmin extends connect(store)(PageViewElement) {
 
   updateInformation() {
     if(this.shadowRoot) {
-      /*
-      var requestsGrid       = this.shadowRoot.getElementById('requests-grid');
-      postsGrid.innerHTML = "";
-
-      for(var i = 0; i < this.requests.length; i++) {
-        var paperCard     = document.createElement('paper-card');
-        var cardContent   = document.createElement('div');
-        var fourmAuthor   = document.createElement('h4');
-        var fourmSubject  = document.createElement('h3');
-        var fourmContent  = document.createElement('p');
-
-        fourmAuthor.innerHTML   = this.fourmPosts[i].email  .replace('@communityschoolnaples.org', '');
-        fourmSubject.innerHTML  = this.fourmPosts[i].subject;
-        fourmContent.innerHTML  = this.fourmPosts[i].content;
-
-        cardContent.classList.add('card-content');
-        cardContent.appendChild(  fourmAuthor);
-        cardContent.appendChild(  fourmSubject);
-        cardContent.appendChild(  fourmContent);
-
-        paperCard.elevation     = 0;
-        paperCard.appendChild(  cardContent);
-
-        postsGrid.appendChild(paperCard);
-        */
+      //update requests
+      var requestGrid       = this.shadowRoot.getElementById('request-grid');
+      requestGrid.innerHTML = "";
+
+      for(var i = 0; i<this.requests.length; i++) {
+        var requestElement  = document.createElement('request-element');
+
+        requestElement.email    = this.requests[i].email
+                                .replace('@communityschoolnaples.org', '');
+        requestElement.time     = this.requests[i].time;
+        requestElement.trainee  = this.requests[i].trainee;
+        requestElement.uid      = this.requests[i].uid;
+
+        requestElement.on-approve-hours = "${() => this.approveHours()}"
+
+        requestGrid.appendChild(requestElement);
       }
     }
   }
 
+  approveHours() {
+    alert("Approve hours")
+  }
+
 
 }
 
diff --git a/src/components/request-element.js b/src/components/request-element.js
new file mode 100644
index 0000000..d5aca82
--- /dev/null
+++ b/src/components/request-element.js
@@ -0,0 +1,93 @@
+/**
+@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 button styles
+import { ButtonSharedStyles } from './button-shared-styles.js';
+
+// Import paper elements
+import '@polymer/paper-card/paper-card.js';
+
+class RequestElement extends LitElement {
+  _render(props) {
+    return html`
+      ${ButtonSharedStyles}
+
+      <style>
+
+        paper-card {
+            --paper-card-background-color: #ffffff;
+            width:      100%;
+            text-align: center;
+        }
+
+        .info-tab > p {
+          word-break: break-all;
+        }
+
+      </style>
+      <paper-card
+      onmouseover   ="${() => this.toggleTab()}"
+      onmouseout    ="${() => this.toggleTab()}">
+        <div class="card-content">
+            <h3>From: ${'\t' + props.email.replace('@communityschoolnaples.org', '')}</h3>
+            <h4>Date: ${'\t' + props.date}</h4>
+            <div class="info-tab" hidden="${!props.infoTabOpen}">
+              <p>Time:    ${'\t' + this.time}</p>
+              <p>Trainee: ${'\t' + this.trainee}</p>
+            </div>
+        </div>
+        <div hidden="${!props.infoTabOpen}" class="card-actions">
+          <paper-button
+          class="info"
+          raised
+          on-tap=   "${() => this.approveHours()}">
+          </paper-button>
+        </div>
+      </paper-card>
+    `;
+  }
+
+  static get properties() { return {
+    email:    String,
+    time:     Number,
+    trainee:  String,
+    uid:      String,
+
+    infoTabOpen:  Boolean
+  }};
+
+  constructor() {
+    super();
+
+    this.email    = "Unknown email";
+    this.time     = -1;
+    this.trainee  = "Unknown trainee";
+    this.uid      = "Unknown uid";
+
+    this.infoTabOpen  = false;
+  }
+
+  toggleTab() {
+    this.infoTabOpen  = !this.infoTabOpen;
+  }
+
+  approveHours() {
+    if(confirm('Are you sure you want to approve' + this.time + 'hours for + ' + this.email +'?')) {
+      this.dispatchEvent(new CustomEvent('approve-hours'));
+    }
+
+  }
+
+
+}
+
+window.customElements.define('request-element', RequestElement);