core&ui: problem_star builder

packages/hydrooj/src/handler/home.ts

@@ -121,14 +121,12 @@ export class HomeHandler extends Handler {
         if (!this.user.hasPerm(PERM.PERM_VIEW_PROBLEM)) return [[], {}];
         const psdocs = await ProblemModel.getMultiStatus(domainId, { uid: this.user._id, star: true })
             .sort('_id', 1).limit(limit).toArray();
-        const psdict = {};
-        for (const psdoc of psdocs) psdict[psdoc.docId] = psdoc;
         const pdict = await ProblemModel.getList(
             domainId, psdocs.map((pdoc) => pdoc.docId),
             this.user.hasPerm(PERM.PERM_VIEW_PROBLEM_HIDDEN) || this.user._id, false,
         );
         const pdocs = Object.keys(pdict).filter((i) => +i).map((i) => pdict[i]);
-        return [pdocs, psdict];
+        return [pdocs];
     }
 
     async getRecentProblems(domainId: string, limit = 10) {

packages/hydrooj/src/handler/problem.ts

@@ -187,18 +187,6 @@ export class ProblemMainHandler extends Handler {
         }
     }
 
-    @param('pid', Types.UnsignedInt)
-    async postStar(domainId: string, pid: number) {
-        await problem.setStar(domainId, pid, this.user._id, true);
-        this.back({ star: true });
-    }
-
-    @param('pid', Types.UnsignedInt)
-    async postUnstar(domainId: string, pid: number) {
-        await problem.setStar(domainId, pid, this.user._id, false);
-        this.back({ star: false });
-    }
-
     @param('pids', Types.NumericArray)
     @param('target', Types.String)
     async postCopy(domainId: string, pids: number[], target: string) {
@@ -439,6 +427,12 @@ export class ProblemDetailHandler extends ContestDetailBaseHandler {
         await problem.del(this.pdoc.domainId, this.pdoc.docId);
         this.response.redirect = this.url('problem_main');
     }
+
+    @param('star', Types.Boolean)
+    async postStar(domainId: string, star: boolean) {
+        await problem.setStar(domainId, this.pdoc.docId, this.user._id, star);
+        this.back({ star });
+    }
 }
 
 export class ProblemSubmitHandler extends ProblemDetailHandler {

packages/ui-default/components/star/star.page.ts

@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import { AutoloadPage } from 'vj/misc/Page';
-import { request } from 'vj/utils';
+import { request, tpl } from 'vj/utils';
 
 function setStarButtonState($starButton: JQuery<any>, star: boolean) {
   if (star) {
@@ -11,6 +11,29 @@ function setStarButtonState($starButton: JQuery<any>, star: boolean) {
 }
 
 const starPage = new AutoloadPage('starPage', () => {
+  function render(container) {
+    const eles = $(container).find('[data-star]');
+    for (const el of eles) {
+      if ($(el).find('.star-form')) continue;
+      const pid = $(el).closest('[data-pid]').data('pid');
+      const star = $(el).data('star') === 'true' ? 1 : 0;
+      if (!pid) continue;
+      $(tpl`<form class="form--inline" action="/d/${UiContext.domain._id}/p/${pid}" method="post">
+        <input type="hidden" name="operation" value="star">
+        <input type="hidden" name="star" value="${star ? 'false' : 'true'}">
+        <button class="star${star ? ' activated' : ''}" type="submit">
+          <span class="starred--hide"><span class="icon icon-star--outline" data-tooltip="{{ _('Star') }}"></span></span>
+          <span class="starred--show"><span class="icon icon-star" data-tooltip="{{ _('Unstar') }}"></span></span>
+        </button>
+      </form>`);
+    }
+  }
+
+  render(document);
+  $(document).on('vjContentNew', (ev) => {
+    render(ev.target);
+  });
+
   $(document).on('click', '.star', (ev) => {
     const $button = $(ev.currentTarget);
     const currentState = $button.hasClass('activated');

packages/ui-default/templates/partials/homepage/starred_problems.html

@@ -1,5 +1,4 @@
 {% set pdocs = payload[0] %}
-{% set psdict = payload[1] %}
 {% if pdocs.length %}
   <div class="section side nojs--hide">
     <div class="section__header">
@@ -7,15 +6,9 @@
     </div>
     <div class="section__body typo no-media col--problem-name">
       {%- for pdoc in pdocs -%}
-        <form class="form--inline" action="{{ url('problem_main') }}" method="post">
+        <p data-pid="{{ pdoc.docId }}" data-star="true">
-          <input type="hidden" name="pid" value="{{ pdoc.docId }}">
+          {{ problem.render_problem_title(pdoc, show_tags=false, show_invisible_flag=false) }}
-          <input type="hidden" name="operation" value="unstar">
+        </p>
-          <button class="star activated" type="submit">
-            <span class="starred--hide"><span class="icon icon-star--outline" data-tooltip="{{ _('Star') }}"></span></span>
-            <span class="starred--show"><span class="icon icon-star" data-tooltip="{{ _('Unstar') }}"></span></span>
-          </button>
-        </form>
-        {{ problem.render_problem_title(pdoc, show_tags=false, show_invisible_flag=false) }}<br/>
       {%- endfor -%}
     </div>
   </div>

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

@@ -54,17 +54,7 @@
             <td class="col--status record-status--border edit-mode-hide"></td>
           {% endif %}
         {% endif %}
-        <td class="col--name col--problem-name">
+        <td class="col--name col--problem-name" {% if handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) %} data-star="{{ psdoc.star }}"{% endif %}>
-          {% if handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) %}
-            <form class="form--inline" action="{{ url('problem_main', domainId = pdoc.domainId) }}" method="post">
-              <input type="hidden" name="pid" value="{{ pdoc.docId }}">
-              <input type="hidden" name="operation" value="{{ "star" if not psdoc.star else "unstar" }}">
-              <button class="star{% if psdoc.star %} activated{% endif %}" type="submit">
-                <span class="starred--hide"><span class="icon icon-star--outline" data-tooltip="{{ _('Star') }}"></span></span>
-                <span class="starred--show"><span class="icon icon-star" data-tooltip="{{ _('Unstar') }}"></span></span>
-              </button>
-            </form>
-          {% endif %}
           {{ problem.render_problem_title(pdoc) }}
         </td>
         <td class="col--ac-tried">{{ pdoc.nAccept }} / {{ pdoc.nSubmit }}</td>

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

@@ -103,7 +103,7 @@
                   {% set pdoc=pdict[pid] %}
                   {% set psdoc=psdict[pid] %}
                   {% set self_psdoc=selfPsdict[pid] %}
-                  <tr>
+                  <tr data-pid="{{ pid }}">
                     {% if handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) %}
                       {% if psdoc['rid'] %}
                         {{ record.render_status_td(psdoc, rid_key='rid', short=should_compare) }}
@@ -118,17 +118,7 @@
                         {% endif %}
                       {% endif %}
                     {% endif %}
-                    <td class="col--name col--problem-name">
+                    <td class="col--name col--problem-name"{% if handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) %} data-star="{{ psdoc.star }}"{% endif %}>
-                      {% if handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) %}
-                        <form class="form--inline" action="{{ url('problem_main') }}" method="post">
-                          <input type="hidden" name="pid" value="{{ pdoc.docId }}">
-                          <input type="hidden" name="operation" value="{% if not psdoc['star'] %}star{% else %}unstar{% endif %}">
-                          <button class="star{% if psdoc['star'] %} activated{% endif %}" type="submit">
-                            <span class="starred--hide"><span class="icon icon-star--outline" data-tooltip="{{ _('Star') }}"></span></span>
-                            <span class="starred--show"><span class="icon icon-star" data-tooltip="{{ _('Unstar') }}"></span></span>
-                          </button>
-                        </form>
-                      {% endif %}
                       {{ problem.render_problem_title(
                         pdoc,
                         invalid=not tsdoc['enroll'] or nsdict[node['_id']]['isInvalid'],

packages/ui-default/templates/problem_detail.html

@@ -36,9 +36,8 @@
             </a>
           {% endif %}
           {% if handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) and not tdoc %}
-            <form class="form--inline" action="{{ url('problem_main') }}" method="post">
+            <form class="form--inline" action="" method="post">
-              <input type="hidden" name="pid" value="{{ pdoc.docId }}">
+              <input type="hidden" name="star" value="{{ 'true' if not psdoc.star else 'false' }}">
-              <input type="hidden" name="operation" value="{{ "star" if not psdoc.star else "unstar" }}">
               <button class="star{% if psdoc.star %} activated{% endif %}" type="submit">
                 <span class="starred--hide"><span class="icon icon-star--outline" data-tooltip="{{ _('Star') }}"></span></span>
                 <span class="starred--show"><span class="icon icon-star" data-tooltip="{{ _('Unstar') }}"></span></span>