Quick-Search: Added Quick-search in the topbar

Changed how and what we store in elastic to unify it with how we store
things in mongodb so we can have more generic javascript code
to render the data.

Elastic changes:
  Added:
  Node.project.url

  Altered to store id instead of url
  Node.picture

  Made Post searchable

./manage.py elastic reset_index
./manage.py elastic reindex

Thanks to Pablo and Sybren

src/scripts/js/es6/common/templates/nodes/Assets.js

@@ -0,0 +1,45 @@
+import { NodesBase } from "./NodesBase";
+import { thenLoadVideoProgress } from '../utils';
+
+export class Assets extends NodesBase{
+    static create$listItem(node) {
+        var markIfPublic = true;
+        let $card = super.create$listItem(node);
+        $card.addClass('asset');
+
+        if (node.properties && node.properties.duration){
+            let $thumbnailContainer = $card.find('.js-thumbnail-container')
+            let $cardDuration = $('<div class="card-label right">' + node.properties.duration + '</div>');
+            $thumbnailContainer.append($cardDuration);
+
+            /* Video progress and 'watched' label. */
+            $(window).trigger('pillar:workStart');
+            thenLoadVideoProgress(node._id)
+                .fail(console.log)
+                .then((view_progress)=>{
+                    if (!view_progress) return
+
+                    let $cardProgress = $('<div class="progress rounded-0">');
+                    let $cardProgressBar = $('<div class="progress-bar">');
+                    $cardProgressBar.css('width', view_progress.progress_in_percent + '%');
+                    $cardProgress.append($cardProgressBar);
+                    $thumbnailContainer.append($cardProgress);
+
+                    if (view_progress.done){
+                        let card_progress_done = $('<div class="card-label">WATCHED</div>');
+                        $thumbnailContainer.append(card_progress_done);
+                    }
+                })
+                .always(function() {
+                    $(window).trigger('pillar:workStop');
+                });
+        }
+
+        /* 'Free' ribbon for public assets. */
+        if (markIfPublic && node.permissions && node.permissions.world){
+            $card.addClass('free');
+        }
+
+        return $card;
+    }
+}

src/scripts/js/es6/common/templates/nodes/Nodes.js

@@ -0,0 +1,63 @@
+import { NodesBase } from './NodesBase';
+import { ComponentCreatorInterface } from '../component/ComponentCreatorInterface'
+
+let CREATE_NODE_ITEM_MAP = {}
+
+export class Nodes extends ComponentCreatorInterface {
+    /**
+     * Creates a small list item out of a node document
+     * @param {NodeDoc} node mongodb or elastic node document
+     */
+    static create$listItem(node) {
+        let factory = CREATE_NODE_ITEM_MAP[node.node_type] || NodesBase;
+        return factory.create$listItem(node);
+    }
+
+    /**
+     * Creates a full view out of a node document
+     * @param {NodeDoc} node mongodb or elastic node document
+     */
+    static create$item(node) {
+        let factory = CREATE_NODE_ITEM_MAP[node.node_type] || NodesBase;
+        return factory.create$item(node);
+    }
+
+    /**
+     * Creates a list of items and a 'Load More' button
+     * @param {List} nodes A list of nodes to be created
+     * @param {Int} initial Number of nodes to show initially
+     * @param {Int} loadNext Number of nodes to show when clicking 'Load More'. If 0, no load more button will be shown
+     */
+    static createListOf$nodeItems(nodes, initial=8, loadNext=8) {
+        let nodesLeftToRender = nodes.slice();
+        let nodesToCreate = nodesLeftToRender.splice(0, initial);
+        let listOf$items = nodesToCreate.map(Nodes.create$listItem);
+
+        if (loadNext > 0 && nodesLeftToRender.length) {
+            let $link = $('<a>')
+                .addClass('btn btn-outline-primary px-5 mb-auto btn-block js-load-next')
+                .attr('href', 'javascript:void(0);')
+                .click((e)=> { 
+                    let $target = $(e.target);
+                    $target.replaceWith(Nodes.createListOf$nodeItems(nodesLeftToRender, loadNext, loadNext));
+                 })
+                .text('Load More');
+
+            listOf$items.push($link);
+        }
+        return listOf$items;
+    }
+
+    static canCreate(candidate) {
+        return !!candidate.node_type;
+    }
+
+    /**
+     * Register template classes to handle the cunstruction of diffrent node types
+     * @param { String } node_type The node type whose template that is registered
+     * @param { NodesBase } klass The class to handle the creation of jQuery objects
+     */
+    static registerTemplate(node_type, klass) {
+        CREATE_NODE_ITEM_MAP[node_type] = klass;
+    }
+}

src/scripts/js/es6/common/templates/nodes/NodesBase.js

@@ -0,0 +1,58 @@
+import { thenLoadImage, prettyDate } from '../utils';
+import { ComponentCreatorInterface } from '../component/ComponentCreatorInterface'
+
+export class NodesBase extends ComponentCreatorInterface {
+    static create$listItem(node) {
+        let nid = (node._id || node.objectID); // To support both mongo and elastic nodes
+        let $card = $('<a class="card node card-image-fade asset">')
+            .attr('data-node-id', nid)
+            .attr('href', '/nodes/' + nid + '/redir')
+            .attr('title', node.name);
+        let $thumbnailContainer = $('<div class="card-thumbnail js-thumbnail-container">');
+        function warnNoPicture() {
+            let $cardIcon = $('<div class="card-img-top card-icon">');
+            $cardIcon.html('<i class="pi-' + node.node_type + '">');
+            $thumbnailContainer.append($cardIcon);
+        }
+        if (!node.picture) {
+            warnNoPicture();
+        }
+        else {
+            $(window).trigger('pillar:workStart');
+            thenLoadImage(node.picture)
+                .fail(warnNoPicture)
+                .then((imgVariation) => {
+                    let img = $('<img class="card-img-top">')
+                        .attr('alt', node.name)
+                        .attr('src', imgVariation.link)
+                        .attr('width', imgVariation.width)
+                        .attr('height', imgVariation.height);
+                    $thumbnailContainer.append(img);
+                })
+                .always(function () {
+                    $(window).trigger('pillar:workStop');
+                });
+        }
+        $card.append($thumbnailContainer);
+        /* Card body for title and meta info. */
+        let $cardBody = $('<div class="card-body p-2 d-flex flex-column">');
+        let $cardTitle = $('<div class="card-title px-2 mb-2 font-weight-bold">');
+        $cardTitle.text(node.name);
+        $cardBody.append($cardTitle);
+        let $cardMeta = $('<ul class="card-text px-2 list-unstyled d-flex text-black-50 mt-auto">');
+        let $cardProject = $('<a class="font-weight-bold pr-2">')
+            .attr('href', '/p/' + node.project.url)
+            .attr('title', node.project.name)
+            .text(node.project.name);
+        $cardMeta.append($cardProject);
+        let created = node._created || node.created_at; // mongodb + elastic
+        $cardMeta.append('<li>' + prettyDate(created) + '</li>');
+        $cardBody.append($cardMeta);
+        $card.append($cardBody);
+        return $card;
+    }
+
+    static canCreate(candidate) {
+        return !!candidate.node_type;
+    }
+}

src/scripts/js/es6/common/templates/nodes/Posts.js

@@ -0,0 +1,21 @@
+import { NodesBase } from "./NodesBase";
+
+export class Posts extends NodesBase {
+    static create$item(post) {
+        let content = [];
+        let $title = $('<div>')
+            .addClass('display-4 text-uppercase font-weight-bold')
+            .text(post.name);
+        content.push($title);
+        let $post = $('<div>')
+                .addClass('expand-image-links imgs-fluid')
+                .append(
+                    content,
+                    $('<div>')
+                        .addClass('node-details-description mx-auto')
+                        .html(post['properties']['pretty_content'])
+                );
+
+        return $post;
+    }
+}