core&ui: enhanced category selector

packages/ui-default/package.json

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

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

@@ -7,7 +7,6 @@ import Dropdown from 'vj/components/dropdown/Dropdown';
 import createHint from 'vj/components/hint';
 import { downloadProblemSet } from 'vj/components/zipDownloader';
 import pjax from 'vj/utils/pjax';
-import substitute from 'vj/utils/substitute';
 import request from 'vj/utils/request';
 import tpl from 'vj/utils/tpl';
 import delay from 'vj/utils/delay';
@@ -52,19 +51,13 @@ async function updateSelection(sendRequest = true) {
       .map((s) => s.split(',')[0]));
     // drop the category if its subcategory is selected
     const requestTags = _.uniq(_.pullAll(selections, requestCategoryTags));
-    let url;
-    if (requestTags.length === 0) {
-      url = UiContext.getProblemUrlWithoutCategory;
-    } else {
-      url = substitute(decodeURIComponent(UiContext.getProblemUrlWithCategory), {
-        category: requestTags
-          .map((tag) => tag.split(',').map(encodeURIComponent).join(','))
-          .join(','), // build a beautiful URL
-      });
-    }
-    const q = $('[name="q"]').val();
-    if (q) url += `?q=${q}`;
-    pjax.request({ url });
+    let q = $('[name="q"]').val().split(' ').filter((i) => !i.startsWith('category:')).join(' ');
+    if (requestTags.length) q = requestTags.map((i) => `category:${i}`).join(' ') + (q ? ` ${q}` : '');
+    const url = new URL(window.location.href);
+    if (!q) url.searchParams.delete('q');
+    else url.searchParams.set('q', q);
+    pjax.request({ url: url.toString() });
+    $('[name="q"]').val(q);
   }
 }
 
@@ -230,7 +223,7 @@ function processElement(ele) {
   createHint('Hint::icon::difficulty', $(ele).find('th.col--difficulty'));
 }
 
-const page = new NamedPage(['problem_main', 'problem_category'], () => {
+const page = new NamedPage(['problem_main'], () => {
   const doc = document.body;
   doc.className += ' display-mode';
   $('.section.display-mode').removeClass('display-mode');

packages/ui-default/templates/components/problem.html

@@ -21,7 +21,7 @@
 {%- if pdoc.tag|length > 0 %}
   {%- if not inline %}<ul class="problem__tags">{% endif -%}
   {%- for tag in pdoc['tag'] %}
-    <li class="problem__tag"><a class="problem__tag-link" href="{{ url('problem_category', category=tag) }}">{{ tag }}</a></li>
+    <li class="problem__tag"><a class="problem__tag-link" href="{{ url('problem_main', query={q:'category:'+tag}) }}">{{ tag }}</a></li>
   {%- endfor -%}
   {%- if not inline %}</ul>{% endif -%}
 {%- else -%}

packages/ui-default/templates/partials/category.html

@@ -2,13 +2,13 @@
   {%- for category, sub_categories in model.system.get('problem.categories')|parseYaml -%}
     <li class="group-list__item">
       <h2 class="section__title">
-        <a href="{{ url('problem_category', category=category) }}" data-category="{{ category }}">{{ category }}</a>
+        <a href="{{ url('problem_main', query={q:'category:'+category}) }}" data-category="{{ category }}">{{ category }}</a>
       </h2>
       {% if sub_categories | length > 0 %}
         <ol class="chip-list">
           {%- for sub_category in sub_categories -%}
             <li class="chip-list__item">
-              <a class="typo-a" href="{{ url('problem_category', category=(category + ',' + sub_category)) }}">{{ sub_category }}</a>
+              <a class="typo-a" href="{{ url('problem_main', query={q:'category:'+sub_category}) }}">{{ sub_category }}</a>
             </li>
           {%- endfor -%}
         </ol>

packages/ui-default/templates/partials/problem-sidebar-information.html

@@ -11,24 +11,6 @@
     <dd>{{ pdoc.config.memoryMax if pdoc.config.memoryMax == pdoc.config.memoryMin else pdoc.config.memoryMin+'~'+pdoc.config.memoryMax }}MiB</dd>
     <dt>{{ _('Difficulty') }}</dt>
     <dd>{{ pdoc['difficulty'] or lib.difficulty(pdoc.nSubmit, pdoc.nAccept) or _('(None)') }}</dd>
-    <dt>{{ _('Category') }}</dt>
-    <dd>
-      {% if pdoc['category'] %}
-        <span class="hasjs--hide" name="problem-sidebar__categories">
-        {%- for category in pdoc['category'] -%}
-          <a href="{{ url('problem_category', category=category) }}">{{ category }}</a>
-          {% if loop.index < pdoc['category']|length %}
-            {{ _('problem-subcategory-delim') }}
-          {% endif %}
-        {%- endfor -%}
-        </span>
-        <span class="nojs--hide">
-          <a href="javascript:;" name="problem-sidebar__show-category">{{ _('page.problem_detail.sidebar.show_category') }}</a>
-        </span>
-      {% else %}
-        {{ _('(None)') }}
-      {% endif %}
-    </dd>
     <dt>{{ _('Tags') }}</dt>
     <dd>
       {{ problem.render_problem_tags(pdoc, true) }}

packages/ui-default/templates/partials/problem_lucky.html

@@ -1,6 +1,6 @@
 <div data-fragment-id="problem_lucky">
   <p>
-    <a href="{{ url('problem_random', query={category:category}) if category else url('problem_random') }}" class="expanded button" target="_blank">
+    <a href="{{ url('problem_random', query={q:qs}) if qs else url('problem_random') }}" class="expanded button" target="_blank">
       <span class="icon icon-feeling-lucky"></span> {{ _('Lucky') }}
     </a>
   </p>

packages/ui-default/templates/problem_main.html

@@ -3,8 +3,6 @@
 {% extends "layout/basic.html" %}
 {% block content %}
   {{ set(UiContext, {
-      getProblemUrlWithCategory: url('problem_category', category='{category}'),
-      getProblemUrlWithoutCategory: url('problem_main'),
       currentCategory: category
   }) }}
   <div class="row">
@@ -13,7 +11,7 @@
         <div class="section__body no-padding">
           <form method="get" id="searchForm" action="{{ url('problem_main') }}">
             <div class="search">
-              <input name="q" type="text" value="{{ category }}" placeholder="{{ _('Search') }}">
+              <input name="q" type="text" value="{{ qs }}" placeholder="{{ _('Search') }}">
               {% include "partials/problem_stat.html" %}
               <button type="submit">
                 <span class="icon icon-search"></span>