Type- and javascript for notifications

app/assets/javascripts/notification.ts

@@ -0,0 +1,56 @@
+/**
+ * Model for a notification in the navbar.
+ */
+export class Notification {
+    readonly element: Element;
+    read: boolean;
+
+    constructor(readonly id: number, readonly url: string, readonly _read: boolean) {
+        this.element = document.querySelector(`.notification[data-id="${id}"]`);
+        this.read = _read;
+
+        this.element.querySelector(".notification-link").addEventListener("click", event => {
+            const goto = (event.target as HTMLLinkElement).href;
+            fetch(url, {
+                method: "PATCH",
+                headers: {
+                    "x-csrf-token": (document.querySelector("meta[name=\"csrf-token\"]") as HTMLMetaElement).content,
+                    "x-requested-with": "XMLHttpRequest",
+                    "content-type": "application/json"
+                },
+                body: "{ \"notification\": { \"read\": true } }"
+            }).then(() => {
+                window.location.href = goto;
+            });
+            return false;
+        });
+
+        this.element.querySelector(".read-indicator").addEventListener("click", event => {
+            const indicator = event.target as Element;
+            fetch(url, {
+                method: "PATCH",
+                headers: {
+                    "x-csrf-token": (document.querySelector("meta[name=\"csrf-token\"]") as HTMLMetaElement).content,
+                    "x-requested-with": "XMLHttpRequest",
+                    "content-type": "application/json"
+                },
+                body: `{ "notification": { "read": ${!this.read} } }`
+            }).then(resp => {
+                return Promise.all([resp.ok, resp.json()]);
+            }).then(([ok, body]) => {
+                if (!ok) {
+                    return Promise.reject(body);
+                }
+                this.read = body.read;
+                if (!this.read) {
+                    indicator.classList.remove("mdi-circle-medium");
+                    indicator.classList.add("mdi-check");
+                } else {
+                    indicator.classList.remove("mdi-check");
+                    indicator.classList.add("mdi-circle-medium");
+                }
+            });
+            event.stopPropagation();
+        });
+    }
+}

app/controllers/exports_controller.rb

@@ -4,6 +4,7 @@ class ExportsController < ApplicationController
 
   def index
     authorize Export
+    @title = I18n.t('exports.index.title')
     @exports = policy_scope(Export)
   end
 

app/controllers/notifications_controller.rb

@@ -7,11 +7,9 @@ def index
 
   def update
     respond_to do |format|
-      if @notification.update(notification_params)
-        format.html { redirect_to @notification, notice: 'Notification was successfully updated.' }
+      if @notification.update(permitted_attributes(@notification))
         format.json { render :show, status: :ok, location: @notification }
       else
-        format.html { render :edit }
         format.json { render json: @notification.errors, status: :unprocessable_entity }
       end
     end
@@ -20,8 +18,8 @@ def update
   def destroy
     @notification.destroy
     respond_to do |format|
-      format.html { redirect_to notifications_url, notice: 'Notification was successfully destroyed.' }
       format.json { head :no_content }
+      format.js
     end
   end
 

app/javascript/packs/application.js

@@ -22,6 +22,7 @@ window.$ = jQuery;
 import "polyfills.js";
 import { Drawer } from "drawer";
 import { Toast } from "toast";
+import { Notification } from "notification";
 import { checkTimeZone, initClipboard, initCSRF, initTooltips } from "util.js";
 
 
@@ -55,5 +56,6 @@ $(initTooltips);
 const dodona = window.dodona || {};
 dodona.checkTimeZone = checkTimeZone;
 dodona.Toast = Toast;
+dodona.Notification = Notification;
 dodona.initTooltips = initTooltips;
 window.dodona = dodona;

app/policies/notification_policy.rb

@@ -16,4 +16,8 @@ def update?
   def destroy?
     record.user == user
   end
+
+  def permitted_attributes
+    %i[read]
+  end
 end

app/views/notifications/_notification.json.jbuilder

@@ -1,2 +1,3 @@
-json.extract! notification, :id, :created_at, :updated_at
+json.extract! notification, :id, :message, :read, :created_at, :updated_at
 json.url notification_url(notification, format: :json)
+json.notifiable_url notifiable_url(notification)

app/views/notifications/_notifications_table.html.erb

@@ -1,9 +1,9 @@
 <table class="table table-index table-resource">
   <tbody>
   <% notifications.each do |n| %>
-    <tr class="notification" data-url="<%= notification_path(n) %>">
+    <tr class="notification" data-id="<%= n.id %>">
       <td>
-        <a href="<%= notifiable_url n %>"><%= t n.message %></a>
+        <a class="notification-link" href="<%= notifiable_url n %>"><%= t n.message %></a>
         <div class="text-muted">
           <small>
             <span><%= "#{time_ago_in_words n.created_at} #{t 'series.deadline.ago'}" %></span>
@@ -13,9 +13,9 @@
       <td class="actions">
         <span class="btn-icon">
           <% if n.read %>
-            <i class="mdi mdi-circle-medium mdi-18 mark-as-unread" ></i>
+            <i class="mdi mdi-circle-medium mdi-18 read-indicator" ></i>
           <% else %>
-            <i class="mdi mdi-check mdi-18 mark-as-read"></i>
+            <i class="mdi mdi-check mdi-18 read-indicator"></i>
           <% end %>
         </span>
         <%= link_to notification_path(n), method: :delete, remote: true, class: "btn-icon" do %>
@@ -24,5 +24,12 @@
       </td>
     </tr>
   <% end %>
+  <script>
+    $(() => {
+      <% notifications.each do |n| %>
+        new dodona.Notification(<%= n.id %>, "<%= notification_path(n, format: :json) %>", <%= n.read %>);
+      <% end %>
+    })
+  </script>
   </tbody>
-</table>
+</table>

app/views/notifications/destroy.js.erb

@@ -0,0 +1 @@
+$(".notification[data-id=\"<%= @notification.id %>\"]").remove();

app/views/notifications/show.json.jbuilder

@@ -0,0 +1 @@
+json.partial! 'notifications/notification', notification: @notification

config/routes.rb

@@ -149,7 +149,7 @@
 
     resources :institutions, only: %i[index show edit update]
     resources :events, only: [:index]
-    resources :notifications, only: %i[index destroy]
+    resources :notifications, only: %i[index update destroy]
 
 
     scope 'stats', controller: 'statistics' do