ui: fix #74 (multi-lang edit for problem)

packages/ui-default/backendlib/template.js

@@ -142,8 +142,11 @@ class Nunjucks extends nunjucks.Environment {
         s = content;
       }
       if (typeof s === 'object' && !(s instanceof Array)) {
+        const langs = Object.keys(s);
+        const f = langs.filter(i => i.startsWith(language));
         if (s[language]) s = s[language];
-        else s = s[Object.keys(s)[0]];
+        else if (f.length) s = s[f[0]];
+        else s = s[langs[0]];
       }
       if (s instanceof Array) s = buildContent(s, html ? 'html' : 'markdown', (str) => str.translate(language));
       return html ? xss.process(s) : markdown.render(s);

packages/ui-default/components/cmeditor/index.js

@@ -40,12 +40,17 @@ export default class CmEditor extends DOMAttachedObject {
     const origin = $dom.get(0);
     const ele = document.createElement('div');
     const value = $dom.val();
+    const onChange = this.options.onChange;
     await new Promise((resolve) => {
       this.editor = new Vditor(ele, {
         ...config,
         ...this.options,
         after: resolve,
-        input(v) { $dom.val(v); $dom.text(v); },
+        input(v) {
+          $dom.val(v);
+          $dom.text(v);
+          if (onChange) onChange(v);
+        },
         value,
         cache: { id: Math.random().toString() },
       });

packages/ui-default/components/tab/Tab.js

@@ -28,12 +28,8 @@ export default class Tab extends DOMAttachedObject {
   }
 
   async switchToTab(idx) {
-    if (idx === this.currentIndex) {
-      return;
-    }
-    if (this.isAnimating) {
-      return;
-    }
+    if (idx === this.currentIndex) return;
+    if (this.isAnimating) return;
 
     const $tabs = this.$content.children();
     const $currentTab = $tabs.eq(this.currentIndex);

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.6.17",
+  "version": "4.6.18",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",

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

@@ -177,50 +177,78 @@ export default new NamedPage(['problem_create', 'problem_edit'], (pagename) => {
     });
   }, 50);
 
-  CmEditor.getOrConstruct($('textarea[data-markdown-upload]'), {
-    upload: {
-      accept: 'image/*,.mp3, .wav, .zip',
-      url: './files',
-      extraData: {
-        type: 'additional_file',
-        operation: 'upload_file',
-      },
-      multiple: false,
-      fieldName: 'file',
-      setHeaders() {
-        return { accept: 'application/json' };
-      },
-      format(files, resp) {
-        const res = JSON.parse(resp);
-        if (res.error) {
-          return JSON.stringify({
-            msg: res.error.message,
-            code: -1,
-            data: {
-              errFiles: [files[0].name],
-              succMap: {},
-            },
-          });
-        }
+  const $main = $('textarea[data-markdown-upload]');
+  let content = $main.val();
+  let isObject = false;
+  try {
+    content = JSON.parse(content);
+    isObject = !(content instanceof Array);
+    if (!isObject) content = JSON.stringify(content);
+  } catch (e) { }
+  const upload = {
+    accept: 'image/*,.mp3, .wav, .zip',
+    url: './files',
+    extraData: {
+      type: 'additional_file',
+      operation: 'upload_file',
+    },
+    multiple: false,
+    fieldName: 'file',
+    setHeaders() {
+      return { accept: 'application/json' };
+    },
+    format(files, resp) {
+      const res = JSON.parse(resp);
+      if (res.error) {
         return JSON.stringify({
-          msg: '',
-          code: 0,
+          msg: res.error.message,
+          code: -1,
           data: {
-            errFiles: [],
-            succMap: {
-              [files[0].name]: `file://${files[0].name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5.)]/g, '')
-                .replace(/[?\\/:|<>*[\]()$%{}@~]/g, '')
-                .replace('/\\s/g', '')}`,
-            },
+            errFiles: [files[0].name],
+            succMap: {},
           },
         });
-      },
-      filename(name) {
-        return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5.)]/g, '')
-          .replace(/[?\\/:|<>*[\]()$%{}@~]/g, '')
-          .replace('/\\s/g', '');
-      },
-      validate: () => (pagename === 'problem_create' ? i18n('Cannot upload file before problem is created.') : true),
+      }
+      return JSON.stringify({
+        msg: '',
+        code: 0,
+        data: {
+          errFiles: [],
+          succMap: {
+            [files[0].name]: `file://${files[0].name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5.)]/g, '')
+              .replace(/[?\\/:|<>*[\]()$%{}@~]/g, '')
+              .replace(/\s/g, '')}`,
+          },
+        },
+      });
     },
-  });
+    filename(name) {
+      return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5.)]/g, '')
+        .replace(/[?\\/:|<>*[\]()$%{}@~]/g, '')
+        .replace(/\s/g, '');
+    },
+    validate: () => (pagename === 'problem_create' ? i18n('Cannot upload file before problem is created.') : true),
+  };
+  $('textarea[data-content]').each(function () {
+    const $dom = $(this);
+    let i = $dom.attr('data-content');
+    let c = '';
+    if (isObject) {
+      if (content[i]) c = content[i];
+      else {
+        const list = Object.keys(content).filter(l => l.startsWith(i));
+        if (list.length) c = content[list[0]];
+        i = list[0];
+      }
+    } else c = content;
+    if (typeof c !== 'string') c = JSON.stringify(c);
+    $dom.val(c);
+    function onChange(val) {
+      const empty = /^\s*$/g.test(val);
+      if (empty) delete content[i];
+      else content[i] = val;
+      $main.val(JSON.stringify(content));
+    }
+    CmEditor.getOrConstruct($dom, { upload, onChange });
+  })
 });

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

@@ -1,6 +0,0 @@
-import { NamedPage } from 'vj/misc/Page';
-
-const page = new NamedPage('problem_import', async () => {
-});
-
-export default page;

packages/ui-default/templates/fs_upload.html

@@ -1,21 +0,0 @@
-{% extends 'layout/simple.html' %}
-{% block body %}
-{% if fdoc %}
-<p>{{ _('Uploaded file info') }}:</p>
-<p>{{ _('ID') }}: {{ fdoc['_id'] }}</p>
-<p>{{ _('Userfile doc_id') }}: {{ ufid }}</p>
-<p>{{ _('MD5') }}: {{ fdoc['md5'] }}</p>
-<p>{{ _('URL') }}: {{ model.file.url(fdoc) }}</p>
-{% endif %}
-<form method="post" enctype="multipart/form-data">
-<input type="hidden" name="csrfToken" value="{{ handler.csrfToken }}">
-<p>
-{{ _('New file') }}:
-<input type="text" name="title" placeholder="{{ _('Description') }}">
-<input type="file" name="file">
-<input type="submit" value="{{ _('Upload') }}" class="rounded primary button">
-</p>
-<p>{{ _('Note: file size should be less than or equal to {0}, and file type should be in {1}. Empty files are not allowed.').format(size(FILE_MAX_LENGTH), ALLOWED_MIMETYPE_PREFIX) }}</p>
-<p>{{ _('Usage: {0}, Quota: {1}').format(size(usage), size(quota)) }}</p>
-</form>
-{% endblock %}

packages/ui-default/templates/problem_edit.html

@@ -37,12 +37,31 @@
                name:'tag',
                value:pdoc['tag']|default([])|join(', ')
              }) }}
-          <div class="row"><div class="columns">
-            <label>
-              {{ _('Content') }}
-              <textarea name="content" class="textbox" data-markdown-upload style="height: 500px">{% if pdoc %}{{ pdoc['content']|toString }}{% else %}{% include 'partials/problem_default.md' %}{% endif %}</textarea>
-            </label>
-          </div></div>
+          <div class="section__tab-container nojs--hide">
+            <ul class="section__tabs immersive">
+              <li class="section__tab-item">
+                <h1 class="section__tab-title">{{ _('__langname') }}</h1>
+                <div class="section__tab-main">
+                  <div class="section__body">
+                    <textarea data-content="{{ _('__id') }}" class="textbox" style="height: 500px"></textarea>
+                  </div>
+                </div>
+              </li>
+              {% for k, v in model.setting.SETTINGS_BY_KEY['viewLang'].range %}
+                {% if k != handler.user.viewLang %}
+                  <li class="section__tab-item">
+                    <h1 class="section__tab-title">{{ v }}</h1>
+                    <div class="section__tab-main">
+                      <div class="section__body">
+                        <textarea data-content="{{ k }}" class="textbox" style="height: 500px"></textarea>
+                      </div>
+                    </div>
+                  </li>
+                {% endif %}
+              {% endfor %}
+            </ul>
+          </div>
+          <textarea name="content" class="textbox hasjs--hide" data-markdown-upload style="height: 500px">{% if pdoc %}{{ pdoc['content']|toString }}{% else %}{% include 'partials/problem_default.md' %}{% endif %}</textarea>
           <div class="row"><div class="columns">
             <input type="hidden" name="csrfToken" value="{{ handler.csrfToken }}">
           {% if page_name == 'problem_edit' %}

packages/ui-default/templates/user_detail.html

@@ -78,7 +78,7 @@
       <div class="profile-content">
         <div class="section__tab-container immersive">
           <ul class="section__tabs">
-          <li class="section__tab-item">
+            <li class="section__tab-item">
               <h1 class="section__tab-title">{{ _('Bio') }}</h1>
               <div class="section__tab-main">
               {% if not udoc.bio %}

packages/ui-default/utils/request.js

@@ -1,4 +1,5 @@
 import i18n from './i18n';
+import substitute from './substitute';
 
 const request = {
   /**
@@ -21,7 +22,14 @@ const request = {
           } else if (errorThrown instanceof Error) {
             reject(errorThrown);
           } else if (typeof jqXHR.responseJSON === 'object' && jqXHR.responseJSON.error) {
-            reject(new Error(jqXHR.responseJSON.error.message));
+            const error = jqXHR.responseJSON.error;
+            if (error.params) {
+              const message = substitute(error.message, ...error.params);
+              const err = new Error(message);
+              err.rawMessage = error.message;
+              err.params = error.params;
+              reject(err);
+            } else reject(new Error(jqXHR.responseJSON.error.message));
           } else {
             reject(new Error(textStatus));
           }