From 84d3668dcfb244e5723dc98b3fd667cbd261759f Mon Sep 17 00:00:00 2001
From: "J.-S. Caux" <J.S.Caux@uva.nl>
Date: Mon, 9 Dec 2019 21:51:04 +0100
Subject: [PATCH] Use single-file component
---
apimail/templates/apimail/message_list.html | 4 +--
scipost/static/scipost/assets/js/main.js | 17 ------------
.../vue/components/MessageHeaderListItem.vue | 17 ++++++++++++
.../static/scipost/assets/vue/message_list.js | 26 +++++++++++++++++++
webpack.dev.config.js | 5 ++--
5 files changed, 47 insertions(+), 22 deletions(-)
delete mode 100644 scipost/static/scipost/assets/js/main.js
create mode 100644 scipost/static/scipost/assets/vue/components/MessageHeaderListItem.vue
create mode 100644 scipost/static/scipost/assets/vue/message_list.js
diff --git a/apimail/templates/apimail/message_list.html b/apimail/templates/apimail/message_list.html
index c44bf9e72..4f0cbf965 100644
--- a/apimail/templates/apimail/message_list.html
+++ b/apimail/templates/apimail/message_list.html
@@ -10,11 +10,11 @@
{% block content %}
<b-list-group id="message-header-list">
- <message-header
+ <message-header-list-item
v-for="message in apidata.results"
v-bind:message="message"
v-bind:key="message.id"
- ></message-header>
+ ></message-header-list-item>
</b-list-group>
{% endblock content %}
diff --git a/scipost/static/scipost/assets/js/main.js b/scipost/static/scipost/assets/js/main.js
deleted file mode 100644
index 4c2ae63eb..000000000
--- a/scipost/static/scipost/assets/js/main.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import Vue from 'vue';
-import BootstrapVue from 'bootstrap-vue';
-
-Vue.use(BootstrapVue);
-
-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/scipost/static/scipost/assets/vue/components/MessageHeaderListItem.vue b/scipost/static/scipost/assets/vue/components/MessageHeaderListItem.vue
new file mode 100644
index 000000000..86e21af6a
--- /dev/null
+++ b/scipost/static/scipost/assets/vue/components/MessageHeaderListItem.vue
@@ -0,0 +1,17 @@
+<template>
+ <b-list-group-item :id="'item' + [[ message.uuid ]]">
+ On {{ message.data.Date }}, from {{ message.data.from }}
+ </b-list-group-item>
+</template>
+
+<script>
+export default {
+ name: "message-header-list-item",
+ props: {
+ message: {
+ type: Object,
+ required: true
+ }
+ }
+}
+</script>
diff --git a/scipost/static/scipost/assets/vue/message_list.js b/scipost/static/scipost/assets/vue/message_list.js
new file mode 100644
index 000000000..3d47456d1
--- /dev/null
+++ b/scipost/static/scipost/assets/vue/message_list.js
@@ -0,0 +1,26 @@
+import Vue from 'vue';
+
+import BootstrapVue from 'bootstrap-vue';
+Vue.use(BootstrapVue);
+
+import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap-vue/dist/bootstrap-vue.css';
+
+
+import MessageHeaderListItem from './components/MessageHeaderListItem.vue'
+Vue.component('message-header-list-item', MessageHeaderListItem);
+
+
+var messageList = new Vue({
+ el: '#message-header-list',
+ data: {
+ apidata: [],
+ results: [],
+ },
+ created: function () {
+ fetch('/mail/api/stored_messages')
+ .then(stream => stream.json())
+ .then(data => this.apidata = data)
+ .catch(error => console.error(error))
+ }
+})
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
index 6efb60091..a485a453d 100644
--- a/webpack.dev.config.js
+++ b/webpack.dev.config.js
@@ -20,7 +20,6 @@ module.exports = {
"./scipost/static/scipost/assets/js/newsticker.js",
],
vue: [
- // "./scipost/static/scipost/assets/js/main.js",
"./scipost/static/scipost/assets/vue/message_list.js",
],
},
@@ -104,9 +103,9 @@ module.exports = {
resolve: {
alias: {
// If using the runtime only build
- // 'vue$': 'vue/dist/vue.runtime.esm.js'
+ 'vue$': 'vue/dist/vue.runtime.esm.js'
// Or if using full build of Vue (runtime + compiler)
- 'vue$': 'vue/dist/vue.esm.js'
+ // 'vue$': 'vue/dist/vue.esm.js'
}
},
}
--
GitLab