ui: UI&UX enhance, bug fixes

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

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

@@ -40,12 +40,12 @@ async function handleClickUpload(files) {
   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 class="bp4-progress-bar bp4-intent-primary bp4-no-stripes">
+        <div class="file-progress bp4-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 class="bp4-progress-bar bp4-intent-primary bp4-no-stripes">
+        <div class="upload-progress bp4-progress-meter" style="width: 0"></div>
       </div>`,
   });
   try {

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

@@ -19,16 +19,16 @@ const page = new NamedPage('homework_main', () => {
     calendar.getDom().appendTo('[name="calendar_entry"]');
     $('[name="homework_display"]').change((ev) => {
       switch (ev.currentTarget.value) {
-      case 'calendar':
-        $('.homework__list').hide();
-        $('[name="calendar_entry"]').show();
-        break;
-      case 'list':
-        $('.homework__list').show();
-        $('[name="calendar_entry"]').hide();
-        break;
-      default:
-        throw new Error('Unexpected display parameter');
+        case 'calendar':
+          $('.homework__list').hide();
+          $('[name="calendar_entry"]').show();
+          break;
+        case 'list':
+          $('.homework__list').show();
+          $('[name="calendar_entry"]').hide();
+          break;
+        default:
+          throw new Error('Unexpected display parameter');
       }
     });
   }

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

@@ -15,9 +15,57 @@
     width: 80px
   .col--operation
     width: 40px
+    text-align: center
 
   .textbox,.select
     margin: 0
   
-  .bp3-tab-panel
-    margin-top: 5px
+  .bp4-tab-panel
+    margin-top: 5px
+
+  .problem-config-form
+    font-family: var(--code-font-family)
+  
+    input::-webkit-outer-spin-button, input::-webkit-inner-spin-button
+      -webkit-appearance: none !important
+    input[type="number"]
+      -moz-appearance: textfield
+
+    .bp4-tag.bp4-minimal
+      background: transparent
+    .bp4-input-action
+      pointer-events: none
+    .bp4-input-group
+      input
+        appearance: none
+        display: block
+        width: 100%
+        font-size: 0.875rem
+        height: 2.1875rem
+        line-height: 1.2
+        padding: 0.3125rem;
+        border: 1px solid #ddd
+        color: inherit
+        border-radius: 0
+        background-color: transparent
+        outline: 2px solid transparent
+        transition: outline-color 0.2s, border-color 0.2s
+        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
+        box-shadow: none
+      input::placeholder
+        color: inherit
+
+    .data-table
+      tr
+        border-top: 0
+        border-bottom: 0
+        height: auto
+      td
+        padding: 0
+      .thead td
+        text-align: center
+      td input, td div
+        background: transparent
+
+  .hover-row.status-bar
+    display: none

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

@@ -7,7 +7,9 @@ import yaml from 'js-yaml';
 import Notification from 'vj/components/notification';
 import Dialog, { ConfirmDialog } from 'vj/components/dialog/index';
 import download from 'vj/components/zipDownloader';
-import { size, readCasesFromFiles, readSubtasksFromFiles } from '@hydrooj/utils/lib/common';
+import {
+  size, readSubtasksFromFiles, parseTimeMS, parseMemoryMB,
+} from '@hydrooj/utils/lib/common';
 import tpl from 'vj/utils/tpl';
 
 async function handleSection(ev: JQuery.ClickEvent<Document, undefined, any, any>, type: string) {
@@ -29,10 +31,6 @@ function onBeforeUnload(e) {
   e.returnValue = '';
 }
 
-function ensureFile(testdata) {
-  return (file: string) => testdata.filter((i) => i === file)[0];
-}
-
 const page = new NamedPage('problem_config', () => {
   let reduxStore;
 
@@ -46,12 +44,12 @@ const page = new NamedPage('problem_config', () => {
     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 class="bp4-progress-bar bp4-intent-primary bp4-no-stripes">
+          <div class="file-progress bp4-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 class="bp4-progress-bar bp4-intent-primary bp4-no-stripes">
+          <div class="upload-progress bp4-progress-meter" style="width: 0"></div>
         </div>`,
     });
     try {
@@ -147,7 +145,7 @@ const page = new NamedPage('problem_config', () => {
     await download(`${pdoc.docId} ${pdoc.title}.zip`, targets);
   }
 
-  async function uploadConfig(config:object) {
+  async function uploadConfig(config: object) {
     const configYaml = yaml.dump(config);
     Notification.info(i18n('Saving file...'));
     const data = new FormData();
@@ -161,9 +159,11 @@ const page = new NamedPage('problem_config', () => {
   }
 
   async function mountComponent() {
-    const { default: ProblemConfigEditor } = await import('vj/components/problemconfig/ProblemConfigEditor');
-    const { default: ProblemConfigForm } = await import('vj/components/problemconfig/ProblemConfigForm');
-    const { default: ProblemConfigReducer } = await import('vj/components/problemconfig/reducer');
+    const [{ default: ProblemConfigEditor }, { default: ProblemConfigForm }, { default: ProblemConfigReducer }] = await Promise.all([
+      import('vj/components/problemconfig/ProblemConfigEditor'),
+      import('vj/components/problemconfig/ProblemConfigForm'),
+      import('vj/components/problemconfig/reducer'),
+    ]);
 
     const {
       React, render, Provider, store,
@@ -175,6 +175,26 @@ const page = new NamedPage('problem_config', () => {
       type: 'CONFIG_LOAD',
       payload: request.get(),
     });
+    const unsubscribe = store.subscribe(() => {
+      // TODO set yaml schema
+      const state = store.getState();
+      if (!state.config.__loaded) return;
+      if (state.config.subtasks || state.config.cases) return;
+      const testdata = (state.testdata || []).map((i) => i.name);
+      const checkFile = (file: string) => (testdata.includes(file) ? file : null);
+      unsubscribe();
+      const value = readSubtasksFromFiles(testdata, checkFile, state.config, {});
+      for (const subtask of value.subtasks) {
+        if (subtask.time === parseTimeMS(state.config.time || '1s')) delete subtask.time;
+        if (subtask.memory === parseMemoryMB(state.config.memory || '256m')) delete subtask.memory;
+        if (subtask.time) subtask.time += 'ms';
+        if (subtask.memory) subtask.memory += 'MB';
+      }
+      store.dispatch({
+        type: 'CONFIG_AUTOCASES_UPDATE',
+        value,
+      });
+    });
     render(
       <Provider store={store}>
         <div className="row">
@@ -182,20 +202,7 @@ const page = new NamedPage('problem_config', () => {
             <ProblemConfigEditor />
           </div>
           <div className="medium-7 columns">
-            <ProblemConfigForm
-              onAutoLoad={async () => {
-                const testdata = (reduxStore.getState().testdata || []).map((i) => i.name);
-                const checkFile = ensureFile(testdata);
-                let autocases = await readCasesFromFiles(testdata, checkFile, {});
-                if (!autocases.count) {
-                  autocases = await readSubtasksFromFiles(testdata, checkFile, {}, { subtasks: [] });
-                }
-                reduxStore.dispatch({
-                  type: 'CONFIG_AUTOCASES_UPDATE',
-                  value: autocases,
-                });
-              }}
-            />
+            <ProblemConfigForm />
           </div>
         </div>
         <button className="rounded primary button" onClick={() => uploadConfig(store.getState().config)}>{i18n('Submit')}</button>

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

@@ -202,12 +202,12 @@ export default new NamedPage(['problem_create', 'problem_edit'], (pagename) => {
     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 class="bp4-progress-bar bp4-intent-primary bp4-no-stripes">
+          <div class="file-progress bp4-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 class="bp4-progress-bar bp4-intent-primary bp4-no-stripes">
+          <div class="upload-progress bp4-progress-meter" style="width: 0"></div>
         </div>`,
     });
     try {

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

@@ -51,12 +51,12 @@ const page = new NamedPage('problem_files', () => {
     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 class="bp4-progress-bar bp4-intent-primary bp4-no-stripes">
+          <div class="file-progress bp4-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 class="bp4-progress-bar bp4-intent-primary bp4-no-stripes">
+          <div class="upload-progress bp4-progress-meter" style="width: 0"></div>
         </div>`,
     });
     try {