ui: re-impl #1094

packages/ui-default/backendlib/misc.ts

@@ -47,3 +47,8 @@ export function* paginate(page: number, numPages: number) {
     if (page < numPages - 1) yield ['last', numPages];
   }
 }
+
+export function buildQueryString(obj: Record<string, any>) {
+  return Object.entries(obj).filter(([key, value]) => value && !key.startsWith('__'))
+    .map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&');
+}

packages/ui-default/backendlib/template.ts

@@ -130,7 +130,7 @@ class Nunjucks extends nunjucks.Environment {
     this.addGlobal('instanceof', (a, b) => a instanceof b);
     this.addGlobal('paginate', misc.paginate);
     this.addGlobal('size', misc.size);
-    this.addGlobal('utils', { status, getAlphabeticId });
+    this.addGlobal('utils', { status, getAlphabeticId, buildQueryString: misc.buildQueryString });
     this.addGlobal('avatarUrl', avatar);
     this.addGlobal('formatSeconds', misc.formatSeconds);
     this.addGlobal('model', global.Hydro.model);

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

@@ -6,7 +6,7 @@
 {% if not pdocs.length %}
   {{ nothing.render('Sorry, there are no problems in the problem set.') }}
 {% else %}
-  {{ paginator.render(page, ppcount, position='top', add_qs=('q=' + qs if qs else '')) }}
+  {{ paginator.render(page, ppcount, position='top', add_qs=utils.buildQueryString(q=qs, sort='' if sort == 'default' else sort)) }}
   <table class="data-table hide-problem-tag">
     <colgroup>
       <col class="col--checkbox display-mode-hide">
@@ -63,6 +63,6 @@
     {%- endfor -%}
     </tbody>
   </table>
-  {{ paginator.render(page, ppcount, add_qs=('q=' + qs if qs else '')) }}
+  {{ paginator.render(page, ppcount, add_qs=utils.buildQueryString(q=qs, sort='' if sort == 'default' else sort)) }}
 {% endif %}
 </div>