Rewrite notifications page in Vue components

.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
     'plugin:vue/strongly-recommended',
   ],
   rules: {
-    // override/add rules settings here, such as:
-    // 'vue/no-unused-vars': 'error'
+    'vue/no-unused-vars': 'off',
+    'vue/multi-word-component-names': 'off'
   }
 }

aleksis/core/templates/core/notifications.html

@@ -4,42 +4,6 @@
 {% block browser_title %}{% blocktrans %}Notifications{% endblocktrans %}{% endblock %}
 {% block page_title %}{% blocktrans %}Notifications{% endblocktrans %}{% endblock %}
 
-
 {% block content %}
-  {% if object_list %}
-    <v-list two-line>
-      {% for notification in object_list %}
-        <v-list-item>
-          <v-list-item-content>
-            <v-list-item-title>{{ notification.title }}</v-list-item-title>
-
-            <v-list-item-subtitle>
-              <v-icon>mdi-clock-outline</v-icon>
-              {{ notification.created }}
-            </v-list-item-subtitle>
-
-            <v-list-item-subtitle>
-              {{ notification.description|linebreaks }}
-            </v-list-item-subtitle>
-          </v-list-item-content>
-
-          {% if notification.link %}
-            <v-list-item-action>
-              <v-btn text href="{{ notification.link }}">
-                {% blocktrans %}More information →{% endblocktrans %}
-              </v-btn>
-            </v-list-item-action>
-          {% endif %}
-
-          <v-list-item-icon>
-            <v-chip color="primary">{{ notification.sender }}</v-chip>
-          </v-list-item-icon>
-
-        </v-list-item>
-        <v-divider inset></v-divider>
-      {% endfor %}
-    </v-list>
-  {% else %}
-    <p>{% blocktrans %}No notifications available yet.{% endblocktrans %}</p>
-  {% endif %}
+  <notification-list/>
 {% endblock %}

assets/app.js

@@ -55,6 +55,7 @@ const apolloClient = new ApolloClient({
 import CacheNotification from "./components/CacheNotification.vue";
 import LanguageForm from "./components/LanguageForm.vue";
 import MessageBox from "./components/MessageBox.vue";
+import NotificationList from "./components/notifications/NotificationList.vue";
 import SidenavSearch from "./components/SidenavSearch.vue";
 
 Vue.component(MessageBox.name, MessageBox); // Load MessageBox globally as other components depend on it
@@ -82,6 +83,7 @@ const app = new Vue({
     components: {
         "cache-notification": CacheNotification,
         "language-form": LanguageForm,
+        "notification-list": NotificationList,
         "sidenav-search": SidenavSearch,
     },
 })

assets/components/notifications/NotificationItem.vue

+<template>
+  <v-list-item>
+    <v-list-item-content>
+      <v-list-item-title>{{ notification.title }}</v-list-item-title>
+
+      <v-list-item-subtitle>
+        <v-icon>mdi-clock-outline</v-icon>
+        {{ notification.created }}
+      </v-list-item-subtitle>
+
+      <v-list-item-subtitle>
+        {{ notification.description }}
+      </v-list-item-subtitle>
+    </v-list-item-content>
+
+    <v-list-item-action v-if="notification.link">
+      <v-btn text :href="notification.link">
+        {{ this.$root.django.gettext('More information →') }}
+      </v-btn>
+    </v-list-item-action>
+
+    <v-list-item-icon>
+      <v-chip color="primary">{{ notification.sender }}</v-chip>
+    </v-list-item-icon>
+  </v-list-item>
+</template>
+
+<script>
+  export default {
+    props: {
+      notification: Object,
+    },
+  }
+</script>

assets/components/notifications/NotificationList.vue

+<template>
+  <ApolloQuery
+    :query="gql => gql`{
+      myNotifications: whoAmI {
+        notifications {
+          id
+          title
+          description
+          link
+          created
+          sender
+        }
+      }
+    }`"
+    :pollInterval="1000"
+  >
+    <template v-slot="{ result: { error, data }, isLoading }">
+      <v-list two-line v-if="data && data.myNotifications.notifications">
+        <NotificationItem
+          v-for="notification in data.myNotifications.notifications"
+          :key="notification.id"
+          :notification="notification"
+        />
+      </v-list>
+      <p v-else>{{ this.$root.django.gettext('No notifications available yet.') }}</p>
+    </template>
+  </ApolloQuery>
+</template>
+
+<script>
+  import NotificationItem from "./NotificationItem.vue";
+
+  export default {
+    components: {
+      NotificationItem,
+    },
+  }
+</script>

webpack.config.js

@@ -32,7 +32,16 @@ module.exports = {
     rules: [
       {
         test: /\.vue$/,
-        loader: 'vue-loader'
+        use: {
+          loader: 'vue-loader',
+          options: {
+            transpileOptions: {
+              transforms: {
+                dangerousTaggedTemplateString: true
+              }
+            }
+          }
+        },
       },
       {
         test: /\.(css)$/,