Improve mails template

Gemfile

@@ -10,8 +10,6 @@ gem 'mini_racer', '~> 0.4'
 gem 'uglifier', '~> 2.7'
 gem 'sanitize', '~> 6.0'
 
-gem 'mumuki-domain', github: 'mumuki/mumuki-domain', branch: 'feature-time-left-for-exam'
-
 group :test do
   gem 'rspec-rails', '~> 3.6'
   gem 'factory_bot_rails', '~> 5.0'
@@ -37,3 +35,7 @@ group :development, :test do
   gem 'pry-stack_explorer'
   gem 'binding_of_caller'
 end
+#
+gem 'mumuki-domain', github: 'mumuki/mumuki-domain', branch: 'feature-async-massive-notifications'
+#
+gem 'mumukit-nuntius', github: 'mumuki/mumukit-nuntius', branch: 'feature-async-massive-notifications'

app/assets/stylesheets/mumuki_laboratory/application/_modules.scss

@@ -30,3 +30,4 @@
 @import "modules/upload";
 @import "modules/user_menu";
 @import "modules/user_profile";
+@import "modules/notifications";

app/assets/stylesheets/mumuki_laboratory/application/modules/_notifications.scss

@@ -0,0 +1,58 @@
+.notifications-dropdown {
+  min-width: 18rem;
+
+  .mu-see-all-notifications {
+    text-align: center;
+    width: 100%;
+
+    a {
+      text-decoration: none;
+      width: 100%;
+    }
+  }
+}
+
+.mu-notifications-content {
+  position: relative;
+
+  .mu-notifications-title {
+    font-weight: bold;
+  }
+
+  .mu-notifications-body {
+    min-height: 2rem;
+    height: 2rem;
+    overflow: hidden;
+  }
+
+  .mu-notifications-arrow {
+    position: absolute;
+    border: none;
+    background: none;
+    top: 5px;
+    right: 0;
+    i {
+      @extend .fa-angle-down;
+    }
+  }
+
+  &.opened {
+    .mu-notifications-body {
+      height: auto;
+      overflow: hidden;
+    }
+    .mu-notifications-arrow {
+      i {
+        @extend .fa-angle-up;
+      }
+    }
+  }
+}
+
+.mu-readable-item-icon {
+  width: 3.5em;
+  text-align: center;
+  a {
+    color: unset;
+  }
+}

app/controllers/application_controller.rb

@@ -37,6 +37,7 @@ class ApplicationController < ActionController::Base
                 :login_button,
                 :notifications_count,
                 :has_notifications?,
+                :has_many_notifications?,
                 :user_notifications,
                 :subject,
                 :should_choose_organization?,

app/controllers/users_controller.rb

@@ -59,7 +59,7 @@ def permissible_params
   end
 
   def notifications
-    @notifications = @user.notifications_in_organization.order(created_at: :desc).page(params[:page])
+    @notifications = @user.notifications_in_organization.order(:read, created_at: :desc).page(params[:page]).per(10)
   end
 
   def toggle_read

app/helpers/user_notifications_helper.rb

@@ -0,0 +1,23 @@
+module UserNotificationsHelper
+  def notification_toggle_read(notification)
+    link_to icon_for_read(notification.read?),
+            "notifications/#{notification.id}/toggle_read",
+            tooltip_options(:toggle_read).merge(method: :post, role: :button)
+  end
+
+  def notification_content(notification)
+    <<~HTML.html_safe
+      <div class="mu-notifications-title">
+        #{ render partial: "notifications/titles/#{notification.subject}", locals: { notification: notification } }
+      </div>
+      <div class="mu-notifications-body">
+        <div class="mu-notifications-body-content">
+          #{ render partial: "notifications/#{notification.subject}", locals: { notification: notification } }
+        </div>
+      </div>
+      <button class="mu-notifications-arrow" onclick="$(this).parent().toggleClass('opened')">
+        <i class="fas fa-fw fa-angle-down"></i>
+      </button>
+    HTML
+  end
+end

app/helpers/user_readable_items_table_helper.rb

@@ -0,0 +1,40 @@
+module UserReadableItemsTableHelper
+
+  def user_notifications_table_header
+    <<~HTML.html_safe
+      <tr class="fw-bold">
+        <td></td>
+        <td>#{ t :notification }</td>
+        <td>#{ t :created_at }</td>
+      </tr>
+    HTML
+  end
+
+  def user_notifications_table_item(notification)
+    <<~HTML.html_safe
+      <tr>
+        <td class="mu-readable-item-icon">
+          #{ link_to icon_for_read(notification.read?),
+                     "notifications/#{notification.id}/toggle_read",
+                     tooltip_options(:toggle_read).merge(method: :post, role: :button) }
+        </td>
+        <td class="text-break mu-notifications-content">
+          <div class="mu-notifications-title">
+            #{ render partial: "notifications/titles/#{notification.subject}", locals: { notification: notification } }
+          </div>
+          <div class="mu-notifications-body">
+            <div class="mu-notifications-body-content">
+              #{ render partial: "notifications/#{notification.subject}", locals: { notification: notification } }
+            </div>
+          </div>
+          <button class="mu-notifications-arrow" onclick="$(this).parent().toggleClass('opened')">
+            <i class="fas fa-fw fa-angle-down"></i>
+          </button>
+        </td>
+        <td class="col-md-3">
+          #{ friendly_time(notification.created_at, :time_since) }
+        </td>
+      </tr>
+    HTML
+  end
+end

app/mailers/user_mailer.rb

@@ -6,7 +6,7 @@ class UserMailer < ApplicationMailer
   def welcome_email(user, organization)
     with_locale(user, organization) do
       organization_name = organization.display_name || t(:your_new_organization)
-      build_email t(:welcome, name: organization_name), { inline: organization.welcome_email_template }, from: organization.welcome_email_sender
+      build_email t(:welcome, name: organization_name), 'welcome', from: organization.welcome_email_sender
     end
   end
 

app/views/layouts/_user_readable_table.html.erb

@@ -0,0 +1,42 @@
+<div class="col-md-9 mu-tab-body">
+  <div class="mu-user-header">
+    <h1><%= title %></h1>
+  </div>
+  <% if readable_items.empty? %>
+    <div class="mu-tab-body">
+      <%= empty_legend %>
+    </div>
+  <% else %>
+    <div class="table-responsive mb-3">
+      <table class="table">
+        <% readable_items.group_by(&group_by).each_with_index do |(is_read, grouped_readable_items), index| %>
+          <tr></tr>
+          <thead>
+            <tr>
+              <td class="<%= index.zero? ? '' : 'pt-5' %>" colspan="100%">
+                <strong><%= is_read ? t(:discussions_read) : t(:discussions_unread) %></strong>
+              </td>
+            </tr>
+          </thead>
+          <tr class="fw-bold">
+            <% table.keys.each do |header| %>
+              <td><%= header %></td>
+            <% end %>
+          </tr>
+          <% grouped_readable_items.each_with_index do |it| %>
+            <tr>
+              <% table.values.each do |transformation| %>
+                <td class="<%= transformation[:class] %>"><%= transformation[:proc].call it %></td>
+              <% end %>
+            </tr>
+          <% end %>
+        <% end %>
+      </table>
+    </div>
+
+    <div class="discussion-pagination">
+      <%= paginate readable_items, nav_class: 'pagination' %>
+    </div>
+
+  <% end %>
+</div>