WIP: Implement one Vue component

dev/webpack.base.config.js

@@ -25,6 +25,7 @@ exports['default'] = new Config().merge({
         publicPath: '/'
     },
     resolve: {
+        extensions: ['.js', '.vue'],
         modules: [
             'node_modules',
             join(ROOT, 'http'),
@@ -36,6 +37,7 @@ exports['default'] = new Config().merge({
         alias: {
             '/template': 'template',
             '/images': 'iznik-client/images',
+            'vue': 'vue/dist/vue.runtime.common',
             ...shims.aliases
         }
     },
@@ -51,6 +53,11 @@ exports['default'] = new Config().merge({
                 exclude: /(node_modules|js(\/|\\)lib)/,
                 use: 'babel-loader'
             },
+            {
+                test: /\.vue$/,
+                exclude: /(node_modules|js\/lib)/,
+                loader: 'vue-loader'
+            },
             {
                 test: /\.(png|jpeg|jpg|gif|woff|woff2|ttf|eot|svg)$/,
                 use: [{loader: 'url-loader', options: {limit: 8192}}]

http/js/iznik/base.js

@@ -13,6 +13,7 @@ define([
     'backbone',
     'underscore',
     'moment',
+    'vue',
     'backbone.collectionView',
     'dateshim',
     'bootstrap',
@@ -25,7 +26,7 @@ define([
     'iznik/events',
     'iznik/timeago',
     'iznik/majax'
-], function ($, Backbone, _, moment) {
+], function ($, Backbone, _, moment, Vue) {
     // Promise polyfill for older browsers or IE11 which has less excuse.
     if (typeof window.Promise !== 'function') {
         require('es6-promise').polyfill();
@@ -1003,6 +1004,36 @@ define([
         }
     });
 
+    Iznik.VueView = Iznik.View.extend({
+        render: function(){
+            var self = this;
+            var vueEl = document.createElement('span');
+            self.$el.append(vueEl);
+            var on = _.mapObject(self.vueEvents, function(methodName){
+                return self[methodName].bind(self);
+            });
+            return Promise.resolve(self.component).then(function(Component){
+                if (Component.default) Component = Component.default;
+                new Vue({
+                    el: vueEl,
+                    data: self.model.toJSON(),
+                    created: function () {
+                        var vm = this;
+                        self.model.on('change', function() {
+                            Object.assign(vm, self.model.toJSON());
+                        });
+                    },
+                    render: function(h) {
+                        return h(Component, {
+                            props: this.$data,
+                            on: on
+                        })
+                    }
+                });
+            });
+        }
+    });
+
     // Save as global as it's useful for debugging.
     window.Iznik = Iznik;
 

http/js/iznik/views/group/volunteering.js

@@ -8,14 +8,15 @@ define([
     'underscore',
     'backbone',
     'iznik/base',
+    '/template/volunteering/one',
     'moment',
     'combodate',
     'jquery.validate.min',
     'jquery.validate.additional-methods',
     'iznik/models/volunteering',
     'iznik/views/group/select',
     'iznik/customvalidate'
-], function($, _, Backbone, Iznik, moment) {
+], function($, _, Backbone, Iznik, VolunteeringOne, moment) {
     Iznik.Views.User.VolunteeringSidebar = Iznik.View.extend({
         template: "volunteering_list",
 
@@ -96,14 +97,14 @@ define([
         }
     });
 
-    Iznik.Views.User.Volunteering  = Iznik.View.extend({
+    Iznik.Views.User.Volunteering = Iznik.VueView.extend({
         tagName: 'li',
 
-        template: "volunteering_one",
-        className: 'padleftsm',
+        component: VolunteeringOne,
+        className: 'padleftsm completefull',
 
-        events: {
-            'click .js-info': 'info'
+        vueEvents: {
+            info: 'info'
         },
 
         info: function() {
@@ -123,22 +124,6 @@ define([
                 v.render();
             });
         },
-
-        render: function() {
-            var self = this;
-
-            var desc = self.model.get('description');
-            if (desc && desc.length > 100) {
-                self.model.set('description', desc.substring(0, 100) + '...');
-            }
-
-            var p = Iznik.View.prototype.render.call(this).then(function() {
-                self.$el.closest('li').addClass('completefull');
-                self.model.on('change', self.render, self);
-            });
-
-            return(p);
-        }
     });
 
     Iznik.Views.User.Volunteering.Details  = Iznik.Views.Modal.extend({

http/template/volunteering/one.vue

@@ -0,0 +1,60 @@
+<template>
+    <div class="panel panel-info">
+        <div class="panel-heading">
+            {{title}}
+        </div>
+        <div class="panel-body nopadtop">
+            <div class="row">
+                <div class="col-xs-12">
+                    <div class="glyphicons glyphicons-info-sign inline" /><div class="inline padleft js-description">{{cappedDescription}}</div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-xs-12">
+                    <div class="glyphicons glyphicons-map-marker inline" /><div class="inline padleft">{{location}}</div>
+                </div>
+                <hr class="nomargin"/>
+            </div>
+            <div class="row text-center">
+                <div class="col-xs-12">
+                    <button @click="$emit('info')" class="js-info btn btn-white"><div class="glyphicon glyphicon-info-sign inline" /><div class="inline padleft">More info</div></button>
+                </div>
+            </div>
+            <div class="row">
+                <div v-if="groups.length > 0" class="topspace text-muted small text-center">Posted on {{groups[0].namedisplay}}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        title: {
+            required: true,
+            type: String
+        },
+        description: {
+            required: true,
+            type: String
+        },
+        location: {
+            required: true,
+            type: String
+        },
+        groups: {
+            default: () => [],
+            type: Array,
+        }
+    },
+    computed: {
+        cappedDescription () {
+            if (this.description && this.description.length > 100) {
+                return this.description.substring(0, 100) + '...';
+            } else {
+                return this.description;
+            }
+        }
+    }
+};
+</script>

package.json

@@ -94,6 +94,7 @@
     "url-loader": "^0.6.2",
     "viewport-units-buggyfill": "^0.6.2",
     "visible": "^0.3.5",
+    "vue": "^2.5.13",
     "waypoints": "^4.0.1",
     "webpack-dev-server": "^2.11.1",
     "webpack-manifest-plugin": "^1.3.2",
@@ -130,6 +131,8 @@
     "testcafe": "^0.18.6",
     "text-loader": "^0.0.1",
     "transformer-proxy": "^0.3.4",
+    "vue-loader": "^14.1.1",
+    "vue-template-compiler": "^2.5.13",
     "webpack": "^3.10.0",
     "webpack-bundle-analyzer": "^2.9.2",
     "webpack-config": "^7.5.0",