documents update

src/client/api/APIDocument.js

@@ -1,8 +1,13 @@
 import EndPoint from './EndPoint';
 
 export default class APIDocument extends EndPoint {
+    documents(){
+        let url = '/documents/type/document';
+        return this.request.get(url, {cache: true});
+    }
+
     awards() {
-        let url = '/documents/awards';
+        let url = '/documents/type/award';
         return this.request.get(url, {cache: true});
     }
 }

src/client/components/Document.js

@@ -3,10 +3,12 @@ import template from '../../templates/components/document.html';
 export default function (app) {
     app.component('document', {
         bindings: {
-            document: '='
+            document: '<'
         },
+        controllerAs: '$',
         controller: function () {
-            //this.testing = 123;
+            this.previewUrl = this.document.preview.data.medium.url;
+            this.file = this.document.file;
         },
         template: template
     });

src/client/components/PageDocuments.js

@@ -1,5 +1,4 @@
 import template from '../../templates/components/page-documents.html';
-import {docs} from '../../models/document';
 
 export default function (app) {
     app.component('pageDocuments', {
@@ -7,7 +6,10 @@ export default function (app) {
         controller: function (api) {
             this.pageClass = 'page-documents';
 
-            this.documents = docs;
+            api.document.documents()
+                .success(data => {
+                    this.documents = data;
+                });
 
             api.document.awards()
                 .success(data => {

src/routes/documents.js

@@ -1,7 +1,7 @@
 import co from 'co';
 import route from 'koa-route';
 import {index, json} from './';
-import db from '../core/db';
+import {c} from '../core/db';
 
 export default function (app) {
     [
@@ -9,25 +9,41 @@ export default function (app) {
             '/documents',
             json(function *() {
                 let query = {};
-                this.body = yield db.c('documents')
+                this.body = yield c('documents')
                     .find(query)
                     .toArray();
             })
         ],
         [
-            '/documents/:type',
-            json(function *(type) {
-                this.body = yield db.c(type)
-                    .find()
+            '/documents/type/:type',
+            function *(type) {
+                let types = {
+                    'document': ['documents', {type: 'document'}, populateDocPreview],
+                    'award': ['awards', {}]
+                };
+
+                if (type in types) {
+                    let [collection, query, mapFn] = types[type];
+
+                    let docs = yield c(collection)
+                        .find(query)
                         .toArray();
-            })
-        ],
-        [
-            '/document/:doc',
-            index('../templates/document.html')
+
+                    if (mapFn) docs = yield docs.map(mapFn);
+
+                    this.body = docs;
+                } else {
+                    this.status = 404;
+                }
+            }
         ]
     ].forEach(item => {
         let [path, fn] = item;
         app.use(route.get(path, fn));
     });
 };
+
+function* populateDocPreview(doc) {
+    doc.preview = yield c('images').findOne({_id: doc.preview});
+    return doc;
+}

src/style/components/document.scss

@@ -1,13 +1,23 @@
 @import "../variables";
 
 .document {
-  margin: 0 1.2em $single-margin;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0;
+  margin: 0 $single-margin $double-margin;
 
   p {
     text-align: center;
   }
+}
+
+.document__image{
+  max-width: 7.5em;
+
   img {
-    max-width: 100%;
+    width: 100%;
+    box-shadow: $white-shadow;
   }
 }
 

src/style/documents.scss

@@ -1,7 +1,7 @@
 .documents-container {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-around;
+  justify-content: center;
   align-items: baseline;
 }
 

src/templates/components/document.html

@@ -1,8 +1,13 @@
 <div class="document">
-    <a href="{{$ctrl.document.url}}" target="_blank" class="invisible">
-        <img ng-src="{{$ctrl.document.preview}}">
+    <div class="document__image">
+        <a href="{{$.document.url}}" target="_blank" class="invisible">
+            <img ng-src="{{$.previewUrl}}">
         </a>
-    <p>
-        <a href="{{$ctrl.document.url}}" target="_blank">{{$ctrl.document.title | uppercaseFirst}}</a>
+    </div>
+
+    <p class="document__file">{{$.document.title | uppercaseFirst}}</p>
+    <!--<a href="{{$.document.url}}" target="_blank">{{$.document.title | uppercaseFirst}}</a>-->
+    <p class="document__file-info">
+        <a href="{{$.document.url}}" target="_blank">{{$.file.name | ext}} ({{$.file.size | bytes}})</a>
     </p>
 </div>