ui: (#143)

packages/hydrooj/package.json

@@ -1,6 +1,6 @@
 {
     "name": "hydrooj",
-    "version": "2.26.13",
+    "version": "2.26.14",
     "bin": "bin/hydrooj.js",
     "main": "dist/loader.js",
     "typings": "dist/loader.d.ts",

packages/hydrooj/src/handler/problem.ts

@@ -388,11 +388,12 @@ export class ProblemFilesHandler extends ProblemDetailHandler {
         this.response.body.additional_file = getAdditionalFile ? sortFiles(this.pdoc.additional_file || []) : [];
         if (pjax) {
             const { testdata, additional_file } = this.response.body;
+            const owner_udoc = await user.getById(domainId, this.pdoc.owner);
             this.response.body = {
                 fragments: (await Promise.all([
                     this.renderHTML('partials/problem_files-testdata.html', { testdata, pdoc: this.pdoc }),
                     this.renderHTML('partials/problem_files-additional_file.html', { additional_file, pdoc: this.pdoc }),
-                    this.renderHTML('partials/problem-sidebar-information.html', { pdoc: this.pdoc }),
+                    this.renderHTML('partials/problem-sidebar-information.html', { pdoc: this.pdoc, owner_udoc }),
                 ])).map((i) => ({ html: i })),
             };
             this.response.template = '';

packages/ui-default/pages/problem_files.page.js

@@ -84,20 +84,24 @@ const page = new NamedPage('problem_files', () => {
       await new Promise((resolve) => { input.onchange = resolve; });
       files = input.files;
     }
+    if (!files.length) {
+      Notification.warn(i18n('No file selected.'));
+      return;
+    }
+    const dialog = new Dialog({
+      $body: `
+        <div class="file-label" style="text-align: center; margin-bottom: 5px; color: gray; font-size: small;"></div>
+        <div class="bp3-progress-bar bp3-intent-primary bp3-no-stripes">
+          <div class="file-progress bp3-progress-meter" style="width: 0"></div>
+        </div>
+        <div class="upload-label" style="text-align: center; margin: 5px 0; color: gray; font-size: small;"></div>
+        <div class="bp3-progress-bar bp3-intent-primary bp3-no-stripes">
+          <div class="upload-progress bp3-progress-meter" style="width: 0"></div>
+        </div>`,
+    });
     try {
       Notification.info(i18n('Uploading files...'));
       window.addEventListener('beforeunload', onBeforeUnload);
-      const dialog = new Dialog({
-        $body: `
-          <div class="file-label" style="text-align: center; margin-bottom: 5px; color: gray; font-size: small;"></div>
-          <div class="bp3-progress-bar bp3-intent-primary bp3-no-stripes">
-            <div class="file-progress bp3-progress-meter" style="width: 0"></div>
-          </div>
-          <div class="upload-label" style="text-align: center; margin: 5px 0; color: gray; font-size: small;"></div>
-          <div class="bp3-progress-bar bp3-intent-primary bp3-no-stripes">
-            <div class="upload-progress bp3-progress-meter" style="width: 0"></div>
-          </div>`,
-      });
       dialog.open();
       const $uploadLabel = dialog.$dom.find('.dialog__body .upload-label');
       const $uploadProgress = dialog.$dom.find('.dialog__body .upload-progress');
@@ -132,13 +136,14 @@ const page = new NamedPage('problem_files', () => {
           },
         });
       }
-      dialog.close();
       window.removeEventListener('beforeunload', onBeforeUnload);
       Notification.success(i18n('File uploaded successfully.'));
       await pjax.request({ push: false });
     } catch (e) {
       console.error(e);
       Notification.error(i18n('File upload failed: {0}', e.toString()));
+    } finally {
+      dialog.close();
     }
   }
 

packages/ui-default/templates/problem_files.html

@@ -15,14 +15,12 @@
       {{ noscript_note.render() }}
       {% include "partials/problem_files-testdata.html" %}
       {% if handler.user.own(pdoc) or handler.user.hasPerm(perm.PERM_READ_PROBLEM_DATA) or handler.user.hasPriv(PRIV.PRIV_READ_PROBLEM_DATA) %}
-        {% if testdata.length %}
+        <div class="section__body">
-          <div class="section__body">
+          <button class="rounded button" name="download_selected_testdata">{{ _('Download Selected') }}</button>
-            <button class="rounded button" name="download_selected_testdata">{{ _('Download Selected') }}</button>
+          {% if handler.user.own(pdoc, perm.PERM_EDIT_PROBLEM_SELF) or handler.user.hasPerm(perm.PERM_EDIT_PROBLEM) %}
-            {% if handler.user.own(pdoc, perm.PERM_EDIT_PROBLEM_SELF) or handler.user.hasPerm(perm.PERM_EDIT_PROBLEM) %}
+            <button class="rounded button" name="remove_selected_testdata">{{ _('Remove Selected') }}</button>
-              <button class="rounded button" name="remove_selected_testdata">{{ _('Remove Selected') }}</button>
+          {% endif %}
-            {% endif %}
+        </div>
-          </div>
-        {% endif %}
       {% endif %}
     </div>
   </div>
@@ -38,14 +36,12 @@
         </div>
       </div>
       {% include "partials/problem_files-additional_file.html" %}
-      {% if additional_file.length %}
+      <div class="section__body">
-        <div class="section__body">
+        <button class="rounded button" name="download_selected_file">{{ _('Download Selected') }}</button>
-          <button class="rounded button" name="download_selected_file">{{ _('Download Selected') }}</button>
+        {% if handler.user.own(pdoc, perm.PERM_EDIT_PROBLEM_SELF) or handler.user.hasPerm(perm.PERM_EDIT_PROBLEM) %}
-          {% if handler.user.own(pdoc, perm.PERM_EDIT_PROBLEM_SELF) or handler.user.hasPerm(perm.PERM_EDIT_PROBLEM) %}
+          <button class="rounded button" name="remove_selected_file">{{ _('Remove Selected') }}</button>
-            <button class="rounded button" name="remove_selected_file">{{ _('Remove Selected') }}</button>
+        {% endif %}
-          {% endif %}
+      </div>
-        </div>
-      {% endif %}
     </div>
   </div>
   <div class="medium-3 columns">