From 9be28f1c7db9cea8a6bcecc1e460e98a731e4808 Mon Sep 17 00:00:00 2001
From: "J.-S. Caux" <J.S.Caux@uva.nl>
Date: Mon, 9 Dec 2019 08:14:31 +0100
Subject: [PATCH] Total waste of time with Vue.js
---
apimail/templates/apimail/message_list.html | 61 ++--------------
package.json | 2 +
scipost/static/scipost/assets/js/main.js | 20 +++--
webpack.dev.config.js | 81 +++++++++++++++------
4 files changed, 81 insertions(+), 83 deletions(-)
diff --git a/apimail/templates/apimail/message_list.html b/apimail/templates/apimail/message_list.html
index 1c9c0a7df..9770d409f 100644
--- a/apimail/templates/apimail/message_list.html
+++ b/apimail/templates/apimail/message_list.html
@@ -1,68 +1,19 @@
{% extends 'scipost/base.html' %}
+{% load render_bundle from webpack_loader %}
{% load staticfiles %}
+{% block headsup %}
+{% endblock headsup %}
+
{% block content %}
- <div class="accordion" id="messageAccordion">
- <messagedisplay
- v-for="message in apidata.results"
- v-bind:message="message"
- v-bind:key="message.id"
- ></messagedisplay>
- </div>
+ <div id="message-list"></div>
{% endblock content %}
{% block footer_script %}
- <script nonce="{{ request.csp_nonce }}" src="{% static 'scipost/assets/js/vue.js' %}"></script>
-
-
- <script nonce="{{ request.csp_nonce }}">
-
- Vue.component('messagedisplay', {
- delimiters: ['[[', ']]'],
- props: ['message'],
- template: `
- <div class="card">
- <div class="card-header" :id="'heading' + [[ message.uuid ]]">
- <h3>
- <button class="btn btn-link" type="button" data-toggle="collapse" :data-target="'#collapse' + [[ message.uuid ]]">
- On [[ message.data.Date ]], from [[ message.data.from ]]
- </button>
- </h3>
- </div>
- <div :id="'collapse' + [[ message.uuid ]]" class="collapse" data-parent="#messageAccordion">
- <div class="card-body">
- [[ message ]]
- </div>
- </div>
- </div>
- `
- })
+ {% render_bundle 'vue' %}
- var msglist = new Vue({
- delimiters: ['[[', ']]'],
- el: '#messageAccordion',
- data: {
- apidata: [],
- results: [],
- },
- /* data: {
- { results: [
- { title: 'title1' },
- { title: 'title2' }
- ]
- }
- * },*/
- created: function () {
- fetch('/mail/api/stored_messages')
- .then(stream => stream.json())
- /* .then(data => this.results = data.results)*/
- .then(data => this.apidata = data)
- .catch(error => console.error(error))
- }
- })
- </script>
{% endblock footer_script %}
diff --git a/package.json b/package.json
index 21360bfd5..8b251bc44 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,8 @@
"tapable": "^1.1.3",
"tether": "^1.4.7",
"url-loader": "^2.3.0",
+ "vue-loader": "^15.7.2",
+ "vue-template-compiler": "^2.6.10",
"webpack": "^4.41.2",
"webpack-bundle-tracker": "^0.4.3",
"webpack-cli": "^3.3.10",
diff --git a/scipost/static/scipost/assets/js/main.js b/scipost/static/scipost/assets/js/main.js
index 549424328..4c2ae63eb 100644
--- a/scipost/static/scipost/assets/js/main.js
+++ b/scipost/static/scipost/assets/js/main.js
@@ -1,7 +1,17 @@
-import Vue from 'vue'
-import BootstrapVue from 'bootstrap-vue'
+import Vue from 'vue';
+import BootstrapVue from 'bootstrap-vue';
-Vue.use(BootstrapVue)
+Vue.use(BootstrapVue);
-// import 'bootstrap/dist/css/bootstrap.css'
-import 'bootstrap-vue/dist/bootstrap-vue.css'
+import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap-vue/dist/bootstrap-vue.css';
+
+import MessageHeaderList from '../vue/components/MessageHeaderList.vue';
+
+export default {
+ components: {
+ MessageHeaderList,
+ },
+}
+
+window.Vue = Vue;
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
index 3958f440b..6efb60091 100644
--- a/webpack.dev.config.js
+++ b/webpack.dev.config.js
@@ -1,6 +1,7 @@
var webpack = require("webpack");
var BundleTracker = require('webpack-bundle-tracker');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
var path_bundles = __dirname + '/static_bundles/bundles';
module.exports = {
@@ -11,7 +12,6 @@ module.exports = {
main: [
"tether",
"bootstrap-loader",
- "./scipost/static/scipost/assets/js/main.js",
"./scipost/static/scipost/assets/js/dynamic_loading.js",
"./scipost/static/scipost/assets/js/scripts.js",
],
@@ -19,12 +19,60 @@ module.exports = {
"./scipost/static/scipost/assets/js/fader.js",
"./scipost/static/scipost/assets/js/newsticker.js",
],
+ vue: [
+ // "./scipost/static/scipost/assets/js/main.js",
+ "./scipost/static/scipost/assets/vue/message_list.js",
+ ],
},
output: {
path: path_bundles,
publicPath: '/static/bundles/',
filename: "js/[name]-[hash].js",
},
+ module: {
+ rules: [
+ {
+ test: require.resolve('jquery'),
+ use: [
+ {
+ loader: 'expose-loader',
+ options: 'jQuery'
+ },
+ {
+ loader: 'expose-loader',
+ options: '$'
+ }
+ ]
+ },
+ {
+ test: /\.css$/,
+ use: [
+ 'vue-style-loader',
+ 'style-loader',
+ 'css-loader',
+ 'postcss-loader'
+ ],
+ },
+ {
+ test: /\.scss$/,
+ use: [
+ 'vue-style-loader',
+ 'style-loader',
+ 'css-loader',
+ 'postcss-loader',
+ 'sass-loader'
+ ],
+ },
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader'
+ },
+ // {
+ // test: /\.js$/,
+ // loader: 'babel-loader'
+ // },
+ ]
+ },
plugins: [
new BundleTracker({
filename: './webpack-stats.json'
@@ -50,28 +98,15 @@ module.exports = {
}),
new CleanWebpackPlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
- new webpack.optimize.AggressiveMergingPlugin()
+ new webpack.optimize.AggressiveMergingPlugin(),
+ new VueLoaderPlugin()
],
- module: {
- rules: [
- {
- test: require.resolve('jquery'),
- use: [{
- loader: 'expose-loader',
- options: 'jQuery'
- },{
- loader: 'expose-loader',
- options: '$'
- }]
- },
- {
- test: /\.css$/,
- use: ['style-loader', 'css-loader', 'postcss-loader'],
- },
- {
- test: /\.scss$/,
- use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
- }
- ]
+ resolve: {
+ alias: {
+ // If using the runtime only build
+ // 'vue$': 'vue/dist/vue.runtime.esm.js'
+ // Or if using full build of Vue (runtime + compiler)
+ 'vue$': 'vue/dist/vue.esm.js'
+ }
},
}
--
GitLab