From 2aa1743e6c0b3d23c41c654fb7ba91906f029591 Mon Sep 17 00:00:00 2001
From: Yangguang Li <yangguang@google.com>
Date: Mon, 1 Jul 2019 11:49:46 -0700
Subject: [PATCH] Admin users page. And some css fix

---
 static/elements/chromedash-userlist.js        | 90 +++++++++++++++++++
 static/js-src/schedule-page.js                | 10 +--
 static/sass/elements/chromedash-schedule.scss | 19 +---
 static/sass/elements/chromedash-userlist.scss |  4 -
 static/sass/features/features.scss            |  6 --
 static/sass/samples.scss                      |  6 --
 templates/_base.html                          |  2 +-
 templates/admin/blink.html                    | 14 +--
 templates/admin/features/edit.html            |  4 -
 templates/admin/features/launch.html          |  4 -
 templates/admin/features/new.html             |  4 -
 templates/admin/notifications/list.html       |  2 +-
 templates/admin/subscribers.html              | 12 +--
 templates/admin/users/new.html                | 15 ++--
 templates/feature.html                        |  2 +-
 15 files changed, 120 insertions(+), 74 deletions(-)

diff --git a/static/elements/chromedash-userlist.js b/static/elements/chromedash-userlist.js
index e69de29b..c0975c78 100644
--- a/static/elements/chromedash-userlist.js
+++ b/static/elements/chromedash-userlist.js
@@ -0,0 +1,90 @@
+import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';
+
+class ChromedashUserlist extends LitElement {
+  static get properties() {
+    return {
+      actionPath: {type: String},
+      users: {type: Array},
+    };
+  }
+
+  constructor() {
+    super();
+    this.users = [];
+  }
+
+  addUser(user) {
+    this.users.splice(0, 0, user);
+    this.users = this.users.slice(0); // Refresh the list
+  }
+
+  removeUser(idx) {
+    this.users.splice(idx, 1);
+    this.users = this.users.slice(0); // Refresh the list
+  }
+
+  ajaxSubmit(e) {
+    e.preventDefault();
+    const formEl = this.shadowRoot.querySelector('form');
+
+    if (formEl.checkValidity()) {
+      const email = formEl.querySelector('input[name="email"]').value;
+      const formData = new FormData();
+      formData.append('email', email);
+
+      fetch(this.actionPath, {
+        method: 'POST',
+        body: formData,
+        credentials: 'same-origin', // Needed for admin permissions to be sent.
+      }).then((resp) => {
+        if (resp.status === 200) {
+          alert('Thanks. But that user already exists');
+          throw new Error('User already added');
+        } else if (resp.status !== 201) {
+          throw new Error('Sever error adding new user');
+        }
+        return resp.json();
+      }).then((json) => {
+        this.addUser(json);
+        formEl.reset();
+      });
+    }
+  }
+
+  ajaxDelete(e) {
+    e.preventDefault();
+    if (!confirm('Remove user?')) {
+      return;
+    }
+
+    const idx = e.target.dataset.index;
+
+    fetch(e.currentTarget.href, {
+      method: 'POST',
+      credentials: 'same-origin',
+    }).then(() => {
+       this.removeUser(idx);
+    });
+  }
+
+  render() {
+    return html`  
+      <link rel="stylesheet" href="/static/css/elements/chromedash-userlist.css">
+
+      <form id="form" name="user_form" method="post" action="${this.actionPath}" onsubmit="return false;">
+        <input type="email" placeholder="Email address" name="email" id="id_email" required>
+        <td><input type="submit" @click="${this.ajaxSubmit}">
+      </form>
+      <ul id="user-list">
+        ${this.users.map((user, index) => html`
+          <li>
+            <a href="${this.actionPath}/${user.id}" data-index="${index}" @click="${this.ajaxDelete}">delete</a>
+            <span>${user.email}</span>
+          </li>
+          `)}
+      </ul>
+    `;
+  }
+}
+
+customElements.define('chromedash-userlist', ChromedashUserlist);
diff --git a/static/js-src/schedule-page.js b/static/js-src/schedule-page.js
index 5cef51b7..1786dcab 100644
--- a/static/js-src/schedule-page.js
+++ b/static/js-src/schedule-page.js
@@ -8,12 +8,10 @@ document.querySelector('paper-toggle-button').addEventListener('change', e => {
   document.querySelector('chromedash-schedule').hideBlink = e.target.checked;
 });
 
-document.addEventListener('WebComponentsReady', function() {
-  const header = document.querySelector('app-header-layout app-header');
-  if (header) {
-    header.fixed = false;
-  }
-});
+const header = document.querySelector('app-header-layout app-header');
+if (header) {
+  header.fixed = false;
+}
 
 async function init() {
   document.body.classList.remove('loading');
diff --git a/static/sass/elements/chromedash-schedule.scss b/static/sass/elements/chromedash-schedule.scss
index d23bd3f3..4b3d61e7 100644
--- a/static/sass/elements/chromedash-schedule.scss
+++ b/static/sass/elements/chromedash-schedule.scss
@@ -4,7 +4,8 @@
 :host {
   display: flex;
   flex-wrap: wrap;
-  padding-bottom: $content-padding * 5;
+  padding: 0 1em $content-padding * 5;
+  margin-right: $content-padding * -1;
 }
 
 iron-icon {
@@ -76,15 +77,11 @@ iron-icon {
   padding: $content-padding;
   margin-bottom: $content-padding;
   border-radius: $default-border-radius;
-  flex: 1 0 calc(33.33% - 16px);
-  max-width: 33.33%;
+  flex: 1 0 0;
   min-width: 300px;
+  margin-right: $content-padding;
   counter-reset: featurecount;
 
-  &:not(:last-child) {
-    margin-right: $content-padding;
-  }
-
   &.no-components {
     .feature_components {
       display: none;
@@ -194,11 +191,3 @@ iron-icon {
     }
   }
 }
-
-@media only screen and (max-width: 700px) {
-  :host {
-    .release {
-      min-width: 100%;
-    }
-  }
-}
diff --git a/static/sass/elements/chromedash-userlist.scss b/static/sass/elements/chromedash-userlist.scss
index dd6a9f46..d33c7e26 100644
--- a/static/sass/elements/chromedash-userlist.scss
+++ b/static/sass/elements/chromedash-userlist.scss
@@ -1,9 +1,5 @@
 @import "element";
 
-:host {
-  display: block;
-}
-
 ul {
   margin-top: 10px;
 
diff --git a/static/sass/features/features.scss b/static/sass/features/features.scss
index 16fb86d9..fefc43e2 100644
--- a/static/sass/features/features.scss
+++ b/static/sass/features/features.scss
@@ -1,11 +1,5 @@
 @import "../vars";
 
-/* Fix a bug. Left align the right side list and the header.
- * TODO: Find out why it happens, and fix the root cause. */
-app-drawer-layout:not([narrow]) app-header-layout {
-  margin-left: -60px;
-}
-
 #content {
   // &.ready {
   //   #spinner {
diff --git a/static/sass/samples.scss b/static/sass/samples.scss
index 37f41561..11f2961a 100644
--- a/static/sass/samples.scss
+++ b/static/sass/samples.scss
@@ -1,11 +1,5 @@
 @import "vars";
 
-/* Fix a bug. Left align the right side list and the header.
- * TODO: Find out why it happens, and fix the root cause. */
-app-drawer-layout:not([narrow]) app-header-layout {
-  margin-left: -60px;
-}
-
 paper-item {
   display: block;
   padding: 12px 16px;
diff --git a/templates/_base.html b/templates/_base.html
index d123a426..391185f4 100644
--- a/templates/_base.html
+++ b/templates/_base.html
@@ -42,7 +42,7 @@ limitations under the License.
 
   <style>
     {% inline_file "/static/css/main.css" %}
-    app-drawer {
+    :root {
       --app-drawer-width: 200px; /* Used by the component. */
     }
 
diff --git a/templates/admin/blink.html b/templates/admin/blink.html
index 1c7cf36c..a4e1cc91 100644
--- a/templates/admin/blink.html
+++ b/templates/admin/blink.html
@@ -3,11 +3,13 @@
 {% load inline_file %}
 
 {% block preload %}
-<script type="module" src="/static/elements/admin-imports.js"></script>
+  <script type="module">
+    import 'https://unpkg.com/@polymer/paper-toggle-button/paper-toggle-button.js?module';
+  </script>
 {% endblock %}
 
 {% block css %}
-<style>{% inline_file "/static/css/blink.css" %}</style>
+  <style>{% inline_file "/static/css/blink.css" %}</style>
 {% endblock %}
 
 {% block drawer %}
@@ -100,12 +102,12 @@
 (function() {
 'use strict';
 
-$('paper-toggle-button').addEventListener('change', e => {
+document.querySelector('paper-toggle-button').addEventListener('change', e => {
   e.stopPropagation();
-  $('#components_list').classList.toggle('editing', e.target.checked);
+  document.querySelector('#components_list').classList.toggle('editing', e.target.checked);
 });
 
-$('#components_list').addEventListener('click', function(e) {
+document.querySelector('#components_list').addEventListener('click', function(e) {
   const addUser = e.target.classList.contains('add_owner_button');
   const removeUser = e.target.classList.contains('remove_owner_button');
 
@@ -178,7 +180,7 @@ window.addEventListener('DOMContentLoaded', function(e) {
   if (location.hash) {
     setTimeout(function() {
       const el = document.getElementById(location.hash.slice(1));
-      $('app-header').scroll(0, el.offsetTop);
+      document.querySelector('app-header').scroll(0, el.offsetTop);
     }, 500);
   }
 });
diff --git a/templates/admin/features/edit.html b/templates/admin/features/edit.html
index 01bee93c..b3eed221 100644
--- a/templates/admin/features/edit.html
+++ b/templates/admin/features/edit.html
@@ -1,9 +1,5 @@
 {% extends "_base.html" %}
 
-{% block preload %}
-<script type="module" src="/static/elements/admin-imports.js"></script>
-{% endblock %}
-
 {% block css %}
 <link rel="stylesheet" href="/static/css/forms.css">
 <style>
diff --git a/templates/admin/features/launch.html b/templates/admin/features/launch.html
index 57ef5dfa..cc00ffb0 100644
--- a/templates/admin/features/launch.html
+++ b/templates/admin/features/launch.html
@@ -1,10 +1,6 @@
 {% extends "_base.html" %}
 {% load inline_file %}
 
-{% block preload %}
-<script type="module" src="/static/elements/feature-imports.js"></script>
-{% endblock %}
-
 {% block css %}
 <!-- <link rel="stylesheet" href="/static/css/forms.css"> -->
 <!-- <link rel="stylesheet" href="/static/css/features/launch.css"> -->
diff --git a/templates/admin/features/new.html b/templates/admin/features/new.html
index cb71b072..a0629fed 100644
--- a/templates/admin/features/new.html
+++ b/templates/admin/features/new.html
@@ -1,9 +1,5 @@
 {% extends "_base.html" %}
 
-{% block preload %}
-<script type="module" src="/static/elements/admin-imports.js"></script>
-{% endblock %}
-
 {% block css %}
 <link rel="stylesheet" href="/static/css/forms.css">
 {% endblock %}
diff --git a/templates/admin/notifications/list.html b/templates/admin/notifications/list.html
index 600537a1..a881e6f6 100644
--- a/templates/admin/notifications/list.html
+++ b/templates/admin/notifications/list.html
@@ -90,7 +90,7 @@
     }
 
     async function init() {
-      $('#num_push_tokens').textContent = SUBSCRIPTIONS.length;
+      document.querySelector('#num_push_tokens').textContent = SUBSCRIPTIONS.length;
       document.querySelectorAll('.push-notifications').forEach(el => {
         el.removeAttribute('hidden');
         el.disabled = false;
diff --git a/templates/admin/subscribers.html b/templates/admin/subscribers.html
index 84107d5d..4a9d06aa 100644
--- a/templates/admin/subscribers.html
+++ b/templates/admin/subscribers.html
@@ -2,15 +2,11 @@
 {% load verbatim %}
 {% load inline_file %}
 
-{% block preload %}
-<script type="module" src="/static/elements/admin-imports.js"></script>
-{% endblock %}
-
 {% block css %}
-<style>
-{% inline_file "/static/css/schedule.css" %}
-{% inline_file "/static/css/subscribers.css" %}
-</style>
+  <style>
+    {% inline_file "/static/css/schedule.css" %}
+    {% inline_file "/static/css/subscribers.css" %}
+  </style>
 {% endblock %}
 
 {% block drawer %}
diff --git a/templates/admin/users/new.html b/templates/admin/users/new.html
index 227399ea..ff6bfca2 100644
--- a/templates/admin/users/new.html
+++ b/templates/admin/users/new.html
@@ -1,12 +1,13 @@
 {% extends "_base.html" %}
 
 {% block css %}
-<!-- <link rel="stylesheet" href="/static/css/users/users.css"> -->
-<link rel="stylesheet" href="/static/css/forms.css">
+  <link rel="stylesheet" href="/static/css/forms.css">
 {% endblock %}
 
 {% block preload %}
-<script type="module" src="/static/elements/admin-imports.js"></script>
+  <script type="module">
+    import '/static/elements/chromedash-userlist.js';
+  </script>
 {% endblock %}
 
 {% block subheader %}
@@ -25,11 +26,9 @@
 
 {% block js %}
 <script>
-document.addEventListener('WebComponentsReady', () => {
-  document.body.classList.remove('loading');
-
   const el = document.querySelector('chromedash-userlist');
-  el.users = {{users|safe}}; // Filled from server.
-});
+  el.users = {{users|safe}};
+
+  document.body.classList.remove('loading');
 </script>
 {% endblock %}
diff --git a/templates/feature.html b/templates/feature.html
index 6e745237..e1eb994e 100644
--- a/templates/feature.html
+++ b/templates/feature.html
@@ -19,7 +19,7 @@
 
 {% block preload %}
   <script type="module">
-    
+    import 'https://unpkg.com/@polymer/iron-icon/iron-icon.js?module';
   </script>
 {% endblock %}