core&ui: fix sidebar preview (#491)

Co-authored-by: panda <panda_dtdyy@outlook.com>

packages/ui-default/pages/problem_config.page.styl

@@ -1,8 +1,7 @@
 .page--problem_config
-  .section--problem-sidebar-testdata
-    .problem-sidebar-testdata__detail
-      max-height: 270px
-      overflow-y: auto
+  .problem-sidebar-testdata
+    max-height: 270px
+    overflow-y: auto
 
   .col--size
     width: 80px

packages/ui-default/pages/problem_config.page.tsx

@@ -1,4 +1,4 @@
-import { normalizeSubtasks, readSubtasksFromFiles, size } from '@hydrooj/utils/lib/common';
+import { normalizeSubtasks, readSubtasksFromFiles } from '@hydrooj/utils/lib/common';
 import type { SubtaskType } from 'hydrooj/src/interface';
 import $ from 'jquery';
 import yaml from 'js-yaml';
@@ -11,7 +11,7 @@ import uploadFiles from 'vj/components/upload';
 import download from 'vj/components/zipDownloader';
 import { NamedPage } from 'vj/misc/Page';
 import {
-  i18n, loadReactRedux, request, tpl,
+  i18n, loadReactRedux, pjax, request, tpl,
 } from 'vj/utils';
 
 const page = new NamedPage('problem_config', () => {
@@ -25,6 +25,8 @@ const page = new NamedPage('problem_config', () => {
     await new Promise((resolve) => { input.onchange = resolve; });
     await uploadFiles('./files', input.files, {
       type: 'testdata',
+      sidebar: true,
+      pjax: true,
       singleFileUploadCallback: (file) => {
         reduxStore.dispatch({
           type: 'CONFIG_ADD_TESTDATA',
@@ -34,13 +36,6 @@ const page = new NamedPage('problem_config', () => {
             size: file.size,
           },
         });
-        $('.testdata-table tbody').append(
-          $(tpl`<tr data-filename="${file.name}" data-size="${file.size.toString()}">
-            <td class="col--name" title="${file.name}"><a href="./file/${file.name}?type=testdata">${file.name}</a></td>
-            <td class="col--size">${size(file.size)}</td>
-            <td class="col--operation"><a href="javascript:;" name="testdata__delete"><span class="icon icon-delete"></span></a></td>
-          </tr>`),
-        );
       },
     });
   }
@@ -62,7 +57,7 @@ const page = new NamedPage('problem_config', () => {
         type: 'CONFIG_DELETE_TESTDATA',
         value: file,
       });
-      $(ev.currentTarget).parent().parent().remove();
+      await pjax.request({ url: './files?testdata=false&sidebar=true', push: false });
     } catch (error) {
       Notification.error(error.message);
     }

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

@@ -1,4 +1,3 @@
-import { size } from '@hydrooj/utils/lib/common';
 import $ from 'jquery';
 import _ from 'lodash';
 import { ConfirmDialog } from 'vj/components/dialog';
@@ -9,7 +8,7 @@ import uploadFiles from 'vj/components/upload';
 import download from 'vj/components/zipDownloader';
 import { NamedPage } from 'vj/misc/Page';
 import {
-  i18n, request, slideDown, slideUp, tpl,
+  i18n, pjax, request, slideDown, slideUp, tpl,
 } from 'vj/utils';
 
 const categories = {};
@@ -197,15 +196,8 @@ export default new NamedPage(['problem_create', 'problem_edit'], (pagename) => {
     await new Promise((resolve) => { input.onchange = resolve; });
     await uploadFiles('./files', input.files, {
       type: 'additional_file',
-      singleFileUploadCallback: (file) => {
-        $('.additionalfile-table tbody').append(
-          $(tpl`<tr data-filename="${file.name}" data-size="${file.size.toString()}">
-            <td class="col--name" title="${file.name}"><a href="./file/${file.name}?type=testdata">${file.name}</a></td>
-            <td class="col--size">${size(file.size)}</td>
-            <td class="col--operation"><a href="javascript:;" name="testdata__delete"><span class="icon icon-delete"></span></a></td>
-          </tr>`),
-        );
-      },
+      sidebar: true,
+      pjax: true,
     });
   }
 
@@ -222,7 +214,7 @@ export default new NamedPage(['problem_create', 'problem_edit'], (pagename) => {
         type: 'additional_file',
       });
       Notification.success(i18n('File have been deleted.'));
-      $(ev.currentTarget).parent().parent().remove();
+      await pjax.request({ url: './files?testdata=false&sidebar=true', push: false });
     } catch (error) {
       Notification.error(error.message);
     }

packages/ui-default/pages/problem_edit.page.styl

@@ -12,10 +12,9 @@
     &.tab--active
       border-color: #ed5f82;
 
-  .section--problem-sidebar-additional_file
-    .problem-sidebar-additional_file__detail
-      height: 270px
-      overflow-y: auto
+  .problem-sidebar-additional_file
+    height: 270px
+    overflow-y: auto
 
     .col--size
       width: 80px