Automatically trigger download of exported files

app/assets/javascripts/components/download_button.ts

@@ -0,0 +1,80 @@
+import { DodonaElement } from "components/meta/dodona_element";
+import { html, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "components/search/loading_bar";
+import { i18n } from "i18n/i18n";
+
+/**
+ * This component represents a download button.
+ * It should be used within a form.
+ *
+ * @element d-download-button
+ */
+@customElement("d-download-button")
+export class DownloadButton extends DodonaElement {
+    @property({ state: true })
+    ready = false;
+    @property({ state: true })
+    url: string | undefined = undefined;
+
+    private get form(): HTMLFormElement {
+        return document.querySelector("#download_submissions") as HTMLFormElement;
+    }
+
+    private get started(): boolean {
+        return this.url !== undefined;
+    }
+
+    private async prepareDownload(): Promise<void> {
+        const data = new FormData(this.form);
+        // disable the form
+        this.form.querySelectorAll("input, button")
+            .forEach(e => e.setAttribute("disabled", "true"));
+        const response = await fetch(this.form.action, {
+            method: this.form.method,
+            body: data,
+            headers: {
+                "Accept": "application/json"
+            }
+        });
+        const json = await response.json();
+        this.url = json.url;
+        this.tryDownload();
+    }
+
+    private async tryDownload(): Promise<void> {
+        if (!this.started || this.ready) {
+            return;
+        }
+
+        const response = await fetch(this.url);
+        const data = await response.json();
+        if (data.ready) {
+            window.location.href = data.url;
+            this.ready = true;
+        } else {
+            setTimeout(() => this.tryDownload(), 1000);
+        }
+    }
+
+    render(): TemplateResult {
+        if (!this.started) {
+            return html`
+                <button @click=${() => this.prepareDownload()} class="btn btn-filled">
+                    ${i18n.t("js.download_button.download")}
+                </button>
+            `;
+        } else if (this.ready) {
+            return html`
+                <button class="btn btn-filled" @click=${() => window.history.back()}>
+                    ${i18n.t("js.download_button.done")}
+                </button>
+            `;
+        } else {
+            return html`
+                <d-loading-bar loading="true"></d-loading-bar>
+                <p class="help-block">${i18n.t("js.download_button.downloading")}</p>
+            `;
+        }
+    }
+}

app/assets/javascripts/components/search/loading_bar.ts

@@ -11,12 +11,17 @@
  */
 @customElement("d-loading-bar")
 export class LoadingBar extends DodonaElement {
-    @property({ type: Boolean, state: true })
+    @property({ type: Boolean, attribute: "search-based" })
+    searchBased = false;
+
+    @property({ type: Boolean })
     loading = false;
 
     constructor() {
         super();
-        search.loadingBars.push(this);
+        if (this.searchBased) {
+            search.loadingBars.push(this);
+        }
     }
 
     show(): void {

app/assets/javascripts/i18n/translations.json

@@ -187,6 +187,11 @@
       "date_before": "before",
       "date_on": "on",
       "description_languages": "Language of the description",
+      "download_button": {
+        "done": "Downloaded, go back",
+        "download": "Download",
+        "downloading": "Preparing submissions for download, this might take a couple of minutes. Do not close this page."
+      },
       "dropdown": {
         "multi": {
           "activity_types": "Activity types",
@@ -712,6 +717,11 @@
       "date_before": "voor",
       "date_on": "op",
       "description_languages": "Taal van de beschrijving",
+      "download_button": {
+        "done": "Gedownload, ga terug",
+        "download": "Downloaden",
+        "downloading": "Bezig met het voorbereiden van de download, dit kan enkele minuten duren. Sluit dit deze pagina niet."
+      },
       "dropdown": {
         "multi": {
           "activity_types": "Activiteitstypes",

app/controllers/exports_controller.rb

@@ -4,11 +4,19 @@
   before_action :set_user,
                 only: %i[new_series_export new_course_export create_series_export create_course_export]
 
-  def index
-    authorize Export
-    @title = I18n.t('exports.index.title')
-    @highlighted_id = (params[:highlighted] || 0).to_i
-    @exports = policy_scope(Export)
+  def show
+    @export = Export.find(params[:id])
+    authorize @export
+    respond_to do |format|
+      format.json
+      format.any(:zip, :html) do
+        if @export.finished? && @export.archive.attached?
+          redirect_to rails_blob_path(@export.archive, disposition: 'attachment')
+        else
+          head :not_found
+        end
+      end
+    end
   end
 
   def new_series_export
@@ -89,13 +97,10 @@
     # Only retain supported options from the received function parameters
     options = params.permit(Export::Zipper::SUPPORTED_OPTIONS)
 
-    Export.create(user: current_user).delay(queue: 'exports').start(item, list, ([@user] if @user), options)
+    export = Export.create(user: current_user)
+    export.delay(queue: 'exports').start(item, list, ([@user] if @user), options)
     respond_to do |format|
-      format.html do
-        flash[:notice] = I18n.t('exports.index.export_started')
-        redirect_to action: 'index'
-      end
-      format.json { head :accepted }
+      format.json { render json: { url: export_path(export) } }
     end
   end
 end

app/helpers/notifications_helper.rb

@@ -1,20 +1,17 @@
 module NotificationsHelper
   def base_notifiable_url_params(notification)
-    return { controller: 'exports', action: 'index' } if notification.notifiable_type == 'Export'
     return { controller: 'submissions', action: 'show', id: notification.notifiable_id } if notification.notifiable_type == 'Submission'
 
     { controller: 'evaluations', action: 'overview', id: notification.notifiable_id } if notification.notifiable_type == 'Evaluation'
   end
 
   def notifiable_url(notification)
-    return exports_path(highlighted: notification.notifiable_id) if notification.notifiable_type == 'Export'
     return submission_path(notification.notifiable_id, anchor: 'code') if notification.notifiable_type == 'Submission'
 
     overview_evaluation_path(notification.notifiable_id) if notification.notifiable_type == 'Evaluation'
   end
 
   def notifiable_icon(notification)
-    return 'mdi-file-download-outline' if notification.notifiable_type == 'Export'
     return 'mdi-comment-account-outline' if notification.notifiable_type == 'Submission'
 
     'mdi-comment-multiple-outline' if notification.notifiable_type == 'Evaluation'

app/javascript/packs/export.js

@@ -1,3 +1,4 @@
 import { initSelection } from "export.ts";
+import "components/download_button";
 
 window.dodona.initSelection = initSelection;

app/models/export.rb

@@ -12,10 +12,9 @@
 class Export < ApplicationRecord
   include ExportHelper
 
-  AUTOMATICALLY_DELETE_AFTER = 30.days
+  AUTOMATICALLY_DELETE_AFTER = 1.day
 
   belongs_to :user
-  has_one :notification, as: :notifiable, dependent: :destroy
   has_one_attached :archive
   enum status: { started: 0, finished: 1, failed: 2 }
 
@@ -38,7 +37,6 @@ def start(item, list, users, params)
     )
 
     delay(queue: 'cleaning', run_at: AUTOMATICALLY_DELETE_AFTER.from_now).destroy
-    notification = Notification.new(user: user, message: 'exports.index.ready_for_download')
-    update(status: :finished, notification: notification)
+    update(status: :finished)
   end
 end

app/views/exports/download_submissions.html.erb

@@ -139,7 +139,7 @@
               <% end %>
             </div>
             <div class="stepper-actions stepper-border">
-              <button type="submit" form="download_submissions" class="btn btn-filled"><%= t('.start_download') %></button>
+              <d-download-button></d-download-button>
             </div>
           </div>
         </div>

app/views/exports/show.json.jbuilder

@@ -0,0 +1,2 @@
+json.ready @export.finished?
+json.url rails_blob_path(@export.archive, disposition: 'attachment') if @export.finished? && @export.archive.attached?

app/views/layouts/_searchbar.html.erb

@@ -7,7 +7,7 @@
     <i class="mdi mdi-magnify"></i>
     <form class='search' onsubmit="return false;">
       <d-search-field placeholder="<%= t("layout.search.search") %>"></d-search-field>
-      <d-loading-bar></d-loading-bar>
+      <d-loading-bar search-based></d-loading-bar>
     </form>
     <% if local_assigns[:actions]&.any? %>
       <d-search-actions actions='<%= raw (local_assigns.fetch :actions, false).to_json %>'></d-search-actions>

app/views/pages/home.html.erb

@@ -28,7 +28,7 @@
                                         default="<%= @year %>">
           </d-standalone-dropdown-filter>
         </div>
-        <d-loading-bar style="margin-top: -24px;"></d-loading-bar>
+        <d-loading-bar search-based style="margin-top: -24px;"></d-loading-bar>
       </div>
       <div class="row" id="course-for-year-row">
         <%= render partial: "course_cards", locals: {courses: @courses} %>

config/locales/js/en.yml

@@ -327,3 +327,8 @@ en:
     feedbacks:
       submission:
         submit: Submit this solution
+    download_button:
+      download: Download
+      done: Downloaded, go back
+      downloading: Preparing submissions for download, this might take a couple of minutes. Do not close this page.
+

config/locales/js/nl.yml

@@ -327,3 +327,7 @@ nl:
     feedbacks:
       submission:
         submit: Deze oplossing indienen
+    download_button:
+      download: Downloaden
+      done: Gedownload, ga terug
+      downloading: Bezig met het voorbereiden van de download, dit kan enkele minuten duren. Sluit dit deze pagina niet.

config/routes.rb

@@ -79,7 +79,7 @@
       end
     end
 
-    resources :exports, except: %i[show edit update new destroy create] do
+    resources :exports, except: %i[edit update new destroy create] do
       get 'users/:id', on: :collection, to: 'exports#new_user_export', as: 'users'
       post 'users/:id', on: :collection, to: 'exports#create_user_export'
       get 'courses/:id', on: :collection, to: 'exports#new_course_export', as: 'courses'

db/migrate/20240305141148_remove_export_notifications.rb

@@ -0,0 +1,5 @@
+class RemoveExportNotifications < ActiveRecord::Migration[7.1]
+  def change
+    Notification.where(notifiable_type: 'Export').destroy_all
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.1].define(version: 2024_02_26_090515) do
+ActiveRecord::Schema[7.1].define(version: 2024_03_05_141148) do
   create_table "active_storage_attachments", charset: "utf8mb4", collation: "utf8mb4_unicode_ci", force: :cascade do |t|
     t.string "name", null: false
     t.string "record_type", null: false