[MPA][m] React publisher page - convert to mpa (#226)

* [MPA][m] Publisher page - convert * [MPA][m] Modified dataset method in snippets.html to work with publisher and package name * [fix][s]: Replace test_client with method call
openknowledge-archive · Feb 6, 2017 · aa3168d · aa3168d
1 parent ca5daa4
commit aa3168d
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 66 deletions.
diff --git a/app/site/controllers.py b/app/site/controllers.py
@@ -9,10 +9,10 @@
 import jwt
 from app.site.models import Catalog
 from app.package.models import BitStore
-from app.profile.models import User
+from app.profile.models import User, Publisher
+from app.search.models import DataPackageQuery
 from app.utils import get_s3_cdn_prefix
 
-
 site_blueprint = Blueprint('site', __name__)
 
 
@@ -111,9 +111,16 @@ def datapackage_show(publisher, package):
                            datapackageUrl=datapackage_json_url_in_s3,
                            showDataApi=True, jsonDataPackage=dataset,
                            dataViews=dataViews,
+                           publisherName=publisher,
+                           packageName=package,
                            s3_cdn=get_s3_cdn_prefix()), 200
 
 
 @site_blueprint.route("/<publisher>", methods=["GET"])
 def publisher_dashboard(publisher):
-    return render_template("publisher.html")
+    datapackage_list = DataPackageQuery(query_string="* publisher:{publisher}"
+                                        .format(publisher=publisher)).get_data()
+    publisher = Publisher.get_publisher_info(publisher)
+
+    return render_template("publisher.html", publisher=publisher,
+                           datapackage_list=datapackage_list), 200
diff --git a/app/templates/_snippets.html b/app/templates/_snippets.html
@@ -28,7 +28,7 @@ <h3><a href="/{{dataset.owner}}/{{dataset.id}}">{{dataset.title}}</a></h3>
   {% endfor %}
 {%- endmacro %}
 
-{% macro dataset_show(dataset, jsonDataPackage, dataViews, showDataApi, datapackageUrl) -%}
+{% macro dataset_show(dataset, jsonDataPackage, dataViews, showDataApi, datapackageUrl, publisherName, packageName) -%}
 <div class="dataset show">
   <div class="row">
     <div class="col-md-8">
@@ -71,33 +71,9 @@ <h5>Sources</h5>
   <button>Switch View</button>
   <input id="search" placeholder="Search" type="search" style="float:right; display: none">
   <div class="viewer" style="display: none"></div>
-  <div class="vis" id="root"></div>
+  <div id="vis"></div>
   <div class="resources" id="data">
     <h2>Data Files</h2>
-    <div class="resource-listing">
-      <table class="table resource-listing">
-        <thead></thead>
-        <tbody>
-          {% for resource in dataset.resources %}
-          <tr>
-            <td><i class="icon-file-text-alt"></i> <a href="#resource-{{resource.name}}">{{resource.name}}</a></td>
-            <td>{{resource.title}}</td>
-            <td>{{resource.format}}</td>
-            <td class="download truncate"><a href="{{resource.localurl}}"><i class="icon-download-alt"></i> Download</a></td>
-            {% if showDataApi %}
-            <td class="">
-              [Local:
-              <a href="/api/dataproxy/{{dataset.owner}}/{{dataset.name}}/r/{{resource.name}}.csv"><i class="icon-download-alt"></i> CSV</a>
-              &ndash;
-              <a href="/api/dataproxy/{{dataset.owner}}/{{dataset.name}}/r/{{resource.name}}.json"><i class="icon-download-alt"></i> JSON</a>
-              ]
-            </td>
-            {% endif %}
-          </tr>
-          {% endfor %}
-        </tbody>
-      </table>
-    </div>
 
     {% for resource in dataset.resources %}
     <div class="resource-info">
@@ -146,9 +122,38 @@ <h2 id="readme">README</h2>
   </div>
 
   <script type="text/javascript">
-    var DataPackageData = {{ jsonDataPackage|tojson }};
-    var DataViews = {{ dataViews|tojson }};
-    var DataPackageJsonUrl = "{{ datapackageUrl }}";
+{#    var DataPackageData = {{ jsonDataPackage|tojson }};#}
+{#    var DataViews = {{ dataViews|tojson }};#}
+{#    var DataPackageJsonUrl = "{{ datapackageUrl }}";#}
+    var packageName = "{{ packageName }}";
+    var publisherName = "{{ publisherName }}";
   </script>
 </div><!-- / dataset show -->
+{%- endmacro %}
+
+{% macro package_list_show(publisher, packages) -%}
+  {%- for package in packages  %}
+    <div class="card mb-2">
+      <div class="card-block">
+        <h5 class="card-title"><span class="fa fa-files-o"></span> {{package.descriptor.title}}</h5>
+        <h6>[{{ package.name }}]</h6>
+        <div class="panel-body">
+            <p>
+            {{ package.readme|truncate(50) }}
+            </p>
+        </div>
+        <div class="row show-grid clearfix">
+            <div class="col-sm-2">
+              <img src="https://avatars3.githubusercontent.com/u/22451011?v=3&s=200" class="img-fluid rounded-circle" />
+            </div>
+            <div class="col-sm-6 align-self-center">
+                <small><a href="/{{ publisher }} ">by {{ publisher }}</a></small>
+            </div>
+            <div class="col-sm-4 pull-right align-self-center">
+                <a class="btn btn-secondary" href="/{{ publisher }}/{{ package.name }}">Explore >></a>
+            </div>
+        </div>
+      </div>
+    </div>
+  {%- endfor %}
 {%- endmacro %}
diff --git a/app/templates/base.html b/app/templates/base.html
@@ -18,10 +18,10 @@
 </head>
   <body>
     <div class="header clearfix">
-    <nav class="navbar navbar-toggleable-lg bg-faded" style="background-color: #f7f7f7;">
+      <nav class="navbar navbar-toggleable-lg bg-faded" style="background-color: #f7f7f7;">
       <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon"></span>
-  </button>
+        <span class="navbar-toggler-icon"></span>
+      </button>
       <a class="navbar-brand" href="/" style="font-size:35px;color:#31dac6;font-weight:bold;">DPR</a>
         <div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
           <ul class="nav nav-pills">
@@ -52,6 +52,7 @@
         </div>
       </nav>
     </div>
+
     {% block content %}{{content}}{% endblock %}
 
     <footer>
@@ -100,14 +101,6 @@
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
     <script src="https://cdn.auth0.com/js/lock/10.9.1/lock.min.js"></script>
     <script type="text/javascript" src="{{ s3_cdn }}/static/js/dashboard.js"></script>
-    <script type="text/javascript" src="{{ s3_cdn }}/static/dpr-js/vendor/handsontable/handsontable.full.js"></script>
-    <link rel="stylesheet" media="screen" href="{{ s3_cdn }}/static/dpr-js/vendor/handsontable/handsontable.full.css">
-    <script type="text/javascript" src="{{ s3_cdn }}/static/dpr-js/vendor/d3/d3.min.js"></script>
-    <script type="text/javascript" src="{{ s3_cdn }}/static/dpr-js/vendor/vega/vega.min.js"></script>
-    <script type="text/javascript" src="{{ s3_cdn }}/static/dpr-js/vendor/vega-embed/vega-embed.js"></script>
-    <script type="text/javascript" src="{{ s3_cdn }}/static/dpr-js/vendor/vega-lite/vega-lite.min.js"></script>
-    <script type="text/javascript" src="{{ s3_cdn }}/static/dpr-js/vendor/plotly/plotly.min.js"></script>
-    <script type="text/javascript" src="{{ s3_cdn }}/static/dpr-js/bundle.js"></script>
 
     {% block scripts %}{% endblock %}
     <script type="text/javascript">

diff --git a/app/templates/dataset.html b/app/templates/dataset.html
@@ -12,6 +12,7 @@ <h1>
       {{ dataset.title }}
     </h1>
   </div>
-  {{snippets.dataset_show(dataset, jsonDataPackage, dataViews, showDataApi, datapackageUrl)}}
+  {{snippets.dataset_show(dataset, jsonDataPackage, dataViews, showDataApi, datapackageUrl, publisherName, packageName)}}
+  <script type="text/javascript" src="/static/react/bundle.js"></script>
 </div>
 {% endblock %}
diff --git a/app/templates/index.html b/app/templates/index.html
@@ -1,7 +1,6 @@
 {% extends "base.html" %}		
 {% block scripts %}		
 <script>
-  debugger;
   var jwt = localStorage.getItem('encoded_token');
 
   if (jwt != null){
@@ -45,8 +44,9 @@ <h2>Publish, find and install data packages quickly and easily</h2>
               </div>		
             </div>		
           </div>		
-      </div>		
-    </div>		
-  </div>		
-</div>		
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 {% endblock %}
diff --git a/app/templates/publisher.html b/app/templates/publisher.html
@@ -0,0 +1,57 @@
+{% extends "base.html" %}
+{% import '_snippets.html' as snippets %}
+
+{% block content %}
+<div class="container">
+  <div class="show-grid row">
+    <div class="col-sm-3">
+      <img src="https://avatars3.githubusercontent.com/u/22451011?v=3&s=200" class="img-thumbnail img-fluid">
+      <h1>{{ publisher.name }}</h1>
+      {% if publisher.title %}
+        <h4>{{ publisher.title }}</h4>
+      {% endif %}
+      <p><span class="fa fa-calendar"></span> {{ publisher.joined }}</p>
+    </div>
+  <div class="offset-sm-2 col-sm-5">
+    <div class="card mb-2">
+      <div class="card-block">
+        <div class="show-grid row">
+          <div class="col-sm-6">
+            <h3>Data packages</h3>
+            </div>
+              <div class="col-sm-6">
+                <div class="input-group">
+                  <input id="publisher-package-input" type="text" class="form-control"
+                         onkeyup="dpFilterFunction()" placeholder="Search for..." />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      <div id="publisher-package-list">
+      {{ snippets.package_list_show(publisher.name, datapackage_list) }}
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+function dpFilterFunction() {
+  var packages = document.getElementById("publisher-package-list")
+       .getElementsByClassName("card");
+  var input = document.getElementById('publisher-package-input');
+  var filter = input.value.toLowerCase();
+  for (var i=0; i < packages.length; i++){
+    var pack = packages[i];
+    var a = pack.getElementsByClassName("card-title")[0].innerText.toLowerCase();
+    if (a.indexOf(filter) > -1){
+      pack.style.display = "";
+    } else {
+      pack.style.display = "none";
+    }
+  }
+}
+</script>
+{% endblock %}
diff --git a/tests/site/test_controller.py b/tests/site/test_controller.py
@@ -193,17 +193,9 @@ def test_data_package_page(self):
                                     package=self.package))
         self.assertNotEqual(404, rv.status_code)
         self.assertIn('Data Files', rv.data.decode("utf8"))
-        # cheks handsontable load
-        self.assertIn('handsontable', rv.data.decode("utf8"))
-        # cheks Vega graph load
-        self.assertIn('vega', rv.data.decode("utf8"))
 
         rv = self.client.get('/non-existing/demo-package')
         self.assertEqual(404, rv.status_code)
-        # cheks handsontable not loaded
-        self.assertNotIn('handsontable', rv.data)
-        # cheks graph not loaded
-        self.assertNotIn('vega', rv.data)
 
     def test_data_package_page_load_without_views(self):
         descriptor = {"data": [], "resources": []}
@@ -219,18 +211,9 @@ def test_data_package_page_load_without_views(self):
                                     package=self.package))
         self.assertNotEqual(404, rv.status_code)
         self.assertIn('Data Files', rv.data.decode("utf8"))
-        # cheks handsontable load
-        self.assertIn('handsontable', rv.data.decode("utf8"))
-        # cheks Vega graph load
-        self.assertIn('vega', rv.data.decode("utf8"))
-
 
         rv = self.client.get('/non-existing/demo-package')
         self.assertEqual(404, rv.status_code)
-        # cheks handsontable not loaded
-        self.assertNotIn('handsontable', rv.data)
-        # cheks graph not loaded
-        self.assertNotIn('vega', rv.data)
 
     def tearDown(self):
         with self.app.app_context():