Vue Comments: Comments ported to Vue + DnD fileupload

* Drag and drop files to comment editor to add a file attachment
* Using Vue to render comments

Since comments now has attachments we need to update the schemas
./manage.py maintenance replace_pillar_node_type_schemas

src/scripts/js/es6/common/utils/__tests__/utils.test.js

@@ -0,0 +1,67 @@
+import { prettyDate } from '../init'
+
+describe('prettydate', () => {
+    beforeEach(() => {
+        Date.now = jest.fn(() => new Date(Date.UTC(2016,
+            10, //November! zero based month!
+            8, 11, 46, 30)).valueOf()); // A Tuesday
+    });
+
+    test('bad input', () => {
+        expect(prettyDate(undefined)).toBeUndefined();
+        expect(prettyDate(null)).toBeUndefined();
+        expect(prettyDate('my birthday')).toBeUndefined();
+    });
+
+    test('past dates',() => {
+        expect(pd({seconds: -5})).toBe('just now');
+        expect(pd({minutes: -5})).toBe('5m ago')
+        expect(pd({days: -7})).toBe('last Tuesday')
+        expect(pd({days: -8})).toBe('1 week ago')
+        expect(pd({days: -14})).toBe('2 weeks ago')
+        expect(pd({days: -31})).toBe('8 Oct')
+        expect(pd({days: -(31 + 366)})).toBe('8 Oct 2015')
+    });
+
+    test('past dates with time',() => {
+        expect(pd({seconds: -5, detailed: true})).toBe('just now');
+        expect(pd({minutes: -5, detailed: true})).toBe('5m ago')
+        expect(pd({days: -7, detailed: true})).toBe('last Tuesday at 11:46')
+        expect(pd({days: -8, detailed: true})).toBe('1 week ago at 11:46')
+        // summer time below
+        expect(pd({days: -14, detailed: true})).toBe('2 weeks ago at 10:46')
+        expect(pd({days: -31, detailed: true})).toBe('8 Oct at 10:46')
+        expect(pd({days: -(31 + 366), detailed: true})).toBe('8 Oct 2015 at 10:46')
+    });
+
+    test('future dates',() => {
+        expect(pd({seconds: 5})).toBe('just now')
+        expect(pd({minutes: 5})).toBe('in 5m')
+        expect(pd({days: 7})).toBe('next Tuesday')
+        expect(pd({days: 8})).toBe('in 1 week')
+        expect(pd({days: 14})).toBe('in 2 weeks')
+        expect(pd({days: 30})).toBe('8 Dec')
+        expect(pd({days: 30 + 365})).toBe('8 Dec 2017')
+    });
+
+    test('future dates',() => {
+        expect(pd({seconds: 5, detailed: true})).toBe('just now')
+        expect(pd({minutes: 5, detailed: true})).toBe('in 5m')
+        expect(pd({days: 7, detailed: true})).toBe('next Tuesday at 11:46')
+        expect(pd({days: 8, detailed: true})).toBe('in 1 week at 11:46')
+        expect(pd({days: 14, detailed: true})).toBe('in 2 weeks at 11:46')
+        expect(pd({days: 30, detailed: true})).toBe('8 Dec at 11:46')
+        expect(pd({days: 30 + 365, detailed: true})).toBe('8 Dec 2017 at 11:46')
+    });
+
+    function pd(params) {
+        let theDate = new Date(Date.now());
+        theDate.setFullYear(theDate.getFullYear() + (params['years'] || 0));
+        theDate.setMonth(theDate.getMonth() + (params['months'] || 0));
+        theDate.setDate(theDate.getDate() + (params['days'] || 0));
+        theDate.setHours(theDate.getHours() + (params['hours'] || 0));
+        theDate.setMinutes(theDate.getMinutes() + (params['minutes'] || 0));
+        theDate.setSeconds(theDate.getSeconds() + (params['seconds'] || 0));
+        return prettyDate(theDate, (params['detailed'] || false))
+    }
+});

src/scripts/js/es6/common/utils/currentuser.js

@@ -0,0 +1,34 @@
+class User{
+    constructor(kwargs) {
+        this.user_id = kwargs['user_id'] || '';
+        this.username = kwargs['username'] || '';
+        this.full_name = kwargs['full_name'] || '';
+        this.gravatar = kwargs['gravatar'] || '';
+        this.email = kwargs['email'] || '';
+        this.capabilities = kwargs['capabilities'] || [];
+        this.badges_html = kwargs['badges_html'] || '';
+        this.is_authenticated = kwargs['is_authenticated'] || false;
+    }
+
+    /**
+     * """Returns True iff the user has one or more of the given capabilities."""
+     * @param  {...String} args 
+     */
+    hasCap(...args) {
+        for(let cap of args) {
+            if (this.capabilities.indexOf(cap) != -1) return true;
+        }
+        return false;
+    }
+}
+
+let currentUser;
+function initCurrentUser(kwargs){
+    currentUser = new User(kwargs);
+}
+
+function getCurrentUser() {
+    return currentUser;
+}
+
+export { getCurrentUser, initCurrentUser }

src/scripts/js/es6/common/utils/init.js

@@ -1 +1,35 @@
-export { transformPlaceholder } from './placeholder'
+export { transformPlaceholder } from './placeholder'
+export { prettyDate } from './prettydate'
+export { getCurrentUser, initCurrentUser } from './currentuser'
+
+
+export function debounced(fn, delay=1000) {
+    let timerId;
+    return function (...args) {
+      if (timerId) {
+        clearTimeout(timerId);
+      }
+      timerId = setTimeout(() => {
+        fn(...args);
+        timerId = null;
+      }, delay);
+    }
+  }
+
+/**
+ * Extracts error message from error of type String, Error or xhrError
+ * @param {*} err 
+ * @returns {String}
+ */
+export function messageFromError(err){
+  if (typeof err === "string") {
+    // type String
+    return err;
+  } else if(typeof err.message === "string") {
+    // type Error
+    return err.message;
+  } else {
+    // type xhr probably
+    return xhrErrorResponseMessage(err);
+  }
+}

src/scripts/js/es6/common/utils/prettydate.js

@@ -0,0 +1,97 @@
+export function prettyDate(time, detail=false) {
+    /**
+     * time is anything Date can parse, and we return a
+    pretty string like 'an hour ago', 'Yesterday', '3 months ago',
+    'just now', etc
+     */
+    let theDate = new Date(time);
+    if (!time || isNaN(theDate)) {
+        return
+    }
+    let pretty = '';
+    let now = new Date(Date.now()); // Easier to mock Date.now() in tests
+    let second_diff = Math.round((now - theDate) / 1000);
+    
+    let day_diff = Math.round(second_diff / 86400); // seconds per day (60*60*24)
+
+    if ((day_diff < 0) && (theDate.getFullYear() !== now.getFullYear())) {
+        // "Jul 16, 2018"
+        pretty = theDate.toLocaleDateString('en-NL',{day: 'numeric', month: 'short', year: 'numeric'});
+    }
+    else if ((day_diff < -21) && (theDate.getFullYear() == now.getFullYear())) {
+        // "Jul 16"
+        pretty = theDate.toLocaleDateString('en-NL',{day: 'numeric', month: 'short'});
+    }
+    else if (day_diff < -7){
+        let week_count = Math.round(-day_diff / 7);
+        if (week_count == 1)
+            pretty = "in 1 week";
+        else
+            pretty = "in " + week_count +" weeks";
+    }
+    else if (day_diff < -1)
+        // "next Tuesday"
+        pretty = 'next ' + theDate.toLocaleDateString('en-NL',{weekday: 'long'});
+    else if (day_diff === 0) {
+        if (second_diff < 0) {
+            let seconds = Math.abs(second_diff);
+            if (seconds < 10)
+                return 'just now';
+            if (seconds < 60)
+                return 'in ' + seconds +'s';
+            if (seconds < 120)
+                return 'in a minute';
+            if (seconds < 3600)
+                return 'in ' + Math.round(seconds / 60) + 'm';
+            if (seconds < 7200)
+                return 'in an hour';
+            if (seconds < 86400)
+                return 'in ' + Math.round(seconds / 3600) + 'h';
+        } else {
+            let seconds = second_diff;
+            if (seconds < 10)
+                return "just now";
+            if (seconds < 60)
+                return seconds + "s ago";
+            if (seconds < 120)
+                return "a minute ago";
+            if (seconds < 3600)
+                return Math.round(seconds / 60) + "m ago";
+            if (seconds < 7200)
+                return "an hour ago";
+            if (seconds < 86400)
+                return Math.round(seconds / 3600) + "h ago";
+        }
+        
+    }
+    else if (day_diff == 1)
+        pretty = "yesterday";
+
+    else if (day_diff <= 7)
+        // "last Tuesday"
+        pretty = 'last ' + theDate.toLocaleDateString('en-NL',{weekday: 'long'});
+
+    else if (day_diff <= 22) {
+        let week_count = Math.round(day_diff / 7);
+        if (week_count == 1)
+            pretty = "1 week ago";
+        else
+            pretty = week_count + " weeks ago";
+    }
+    else if (theDate.getFullYear() === now.getFullYear())
+        // "Jul 16"
+        pretty = theDate.toLocaleDateString('en-NL',{day: 'numeric', month: 'short'});
+
+    else
+        // "Jul 16", 2009
+        pretty = theDate.toLocaleDateString('en-NL',{day: 'numeric', month: 'short', year: 'numeric'});
+
+    if (detail){
+        // "Tuesday at 04:20"
+        let paddedHour = ('00' + theDate.getUTCHours()).substr(-2);
+        let paddedMin = ('00' + theDate.getUTCMinutes()).substr(-2);
+        return pretty + ' at '  + paddedHour + ':' + paddedMin;
+    }
+
+    return pretty;
+}