core&ui: problem_main: support sort

packages/ui-default/components/autocomplete/components/ProblemSelectAutoComplete.tsx

@@ -9,7 +9,7 @@ const ProblemSelectAutoComplete = forwardRef<AutoCompleteHandle<ProblemDoc>, Aut
     ref={ref as any}
     cacheKey={`problem-${UiContext.domainId}`}
     queryItems={async (query) => {
-      const { pdocs } = await request.get(`/d/${UiContext.domainId}/p`, { q: query, quick: true });
+      const { pdocs } = await request.get(`/d/${UiContext.domainId}/p`, { q: query, quick: true, sort: query ? 'default' : 'recent' });
       return pdocs;
     }}
     fetchItems={(ids) => api('problems', { ids: ids.map((i) => +i) }, ['docId', 'pid', 'title'])}
@@ -29,7 +29,7 @@ const ProblemSelectAutoComplete = forwardRef<AutoCompleteHandle<ProblemDoc>, Aut
       listStyle: {},
       multi: false,
       selectedKeys: [],
-      allowEmptyQuery: false,
+      allowEmptyQuery: true,
       freeSolo: false,
       freeSoloConverter: (input) => input,
       ...props,

packages/ui-default/locales/en.yaml

@@ -27,9 +27,9 @@ problem_import: Import Problem
 problem_main: Problem Set
 problem_solution: Problem Solution
 problem_submit: Problem Submit
+problem_type.communication: 'Type: Communication'
 problem_type.default: 'Type: Default'
 problem_type.interactive: 'Type: Interactive'
-problem_type.communication: 'Type: Communication'
 problem_type.objective: 'Type: Objective'
 problem_type.remote_judge: 'Type: RemoteJudge'
 problem_type.submit_answer: 'Type: SubmitAnswer'
@@ -54,6 +54,8 @@ setting_info: Personal Info
 setting_preference: Preference
 setting_privacy: Privacy
 setting_usage: Usage Preference
+sort::default: Default
+sort::recent: Recent
 tasks_list: Task list
 timeago_locale: en_US
 training_create: Training Create

packages/ui-default/locales/zh.yaml

@@ -877,6 +877,8 @@ Sorry, there are no training plans.: 目前没有训练计划。
 Sorry, there are no users in this domain.: 对不起，此域中没有用户。
 Sorry: 对不起
 Sort by: 排序
+sort::default: 默认排序
+sort::recent: 最新题目
 Source type: 来源类型
 Source: 来源
 Standard mode: 标准模式

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

@@ -204,7 +204,7 @@
   color: #000000
 
 .search > button
-  width: 40px
+  width: 37px
   height: 36px
   border: 1px solid #00B4CC
   background: #00B4CC
@@ -215,6 +215,16 @@
 
 .search > div
   position: absolute
-  right: 50px
-  top: 8px
-  font-size: rem(17px)
+  right: 170px
+  top: 10px
+  font-size: rem(17px)
+
+.search-sort
+  position: absolute
+  border: none
+  top: 1px
+  height: 34px
+  right: 37px
+  color: #000000
+  cursor: pointer
+  width: 120px

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

@@ -85,9 +85,12 @@ function updateSelection() {
 
 function loadQuery() {
   const q = $('[name="q"]').val().toString();
+  const sort = $('[name="sort"]').val().toString();
   const url = new URL(window.location.href);
   if (!q) url.searchParams.delete('q');
   else url.searchParams.set('q', q);
+  if (sort && sort !== 'default') url.searchParams.set('sort', sort);
+  else url.searchParams.delete('sort');
   url.searchParams.delete('page');
   pjax.request({ url: url.toString() });
 }
@@ -443,6 +446,7 @@ const page = new NamedPage(['problem_main'], () => {
   });
   $('#searchForm').on('submit', inputChanged);
   $('#searchForm').find('input').on('input', _.debounce(inputChanged, 500));
+  $('#searchForm').find('select[name="sort"]').on('change', inputChanged);
   $('.dialog-button').on('click', (ev) => {
     categoryDialog.clear().open();
     ev.preventDefault();

packages/ui-default/templates/problem_main.html

@@ -10,6 +10,11 @@
             <div class="search">
               <input name="q" type="text" value="{{ qs }}" placeholder="{{ _('Search') }}">
               {% include "partials/problem_stat.html" %}
+              <select name="sort" class="search-sort">
+                {%- for sortType in ["default", "recent"] -%}
+                  <option value="{{ sortType }}" {{ "selected" if sort == sortType else "" }}>{{ _('sort::' + sortType) }}</option>
+                {%- endfor -%}
+              </select>
               <button type="submit">
                 <span class="icon icon-search"></span>
               </button>