core&ui: fix star

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

@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import { AutoloadPage } from 'vj/misc/Page';
-import { request, tpl } from 'vj/utils';
+import { i18n, request, tpl } from 'vj/utils';
 
 function setStarButtonState($starButton: JQuery<any>, star: boolean) {
   if (star) {
@@ -14,18 +14,17 @@ 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">
+      if ($(el).find('.star-form').length) continue;
+      const action = $(el).closest('[data-star-action]').data('star-action');
+      const star = ['true', true].includes($(el).data('star')) ? 1 : 0;
+      $(tpl`<form class="star-form form--inline" action="${action}" 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>
+          <span class="starred--hide"><span class="icon icon-star--outline" data-tooltip="${i18n('Star')}"></span></span>
+          <span class="starred--show"><span class="icon icon-star" data-tooltip="${i18n('Unstar')}"></span></span>
         </button>
-      </form>`);
+      </form>`).prependTo($(el));
     }
   }
 
@@ -39,9 +38,10 @@ const starPage = new AutoloadPage('starPage', () => {
     const currentState = $button.hasClass('activated');
     const $form = $button.closest('form');
     const $op = $form.find('[name="operation"]');
-    if (!['star', 'unstar'].includes($op.val() as any)) return;
+    const $star = $form.find('[name="star"]');
+    if ($op.val() !== 'star') return;
     ev.preventDefault();
-    $op.val(currentState ? 'unstar' : 'star');
+    $star.val(currentState ? 'false' : 'true');
     setStarButtonState($button, !currentState);
     request
       .post($form.attr('action'), $form)

packages/ui-default/templates/home_domain.html

@@ -32,16 +32,8 @@
           <td class="col--icon">
             <img src="{{ avatarUrl(ddoc.avatar, 32) }}" width="32" height="32">
           </td>
-          <td class="col--name">
-            <form class="form--inline" method="post">
-              <input type="hidden" name="id" value="{{ ddoc['_id'] }}">
               {% set _show = handler.user.pinnedDomains.includes(ddoc._id) %}
-              <input type="hidden" name="operation" value="{{ "unstar" if _show else "star" }}">
-              <button class="star{% if _show %} 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>
+          <td class="col--name" data-action="?id={{ ddoc['_id'] }}" data-star="{{ _show }}">
             {{ ddoc['name'] }} ({{ ddoc['_id'] }})
           </td>
           <td class="col--role">

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

@@ -6,7 +6,7 @@
     </div>
     <div class="section__body typo no-media col--problem-name">
       {%- for pdoc in pdocs -%}
-        <p data-pid="{{ pdoc.docId }}" data-star="true">
+        <p data-action="{{ url('problem_detail', pid=pdoc.docId) }}" data-star="true">
           {{ problem.render_problem_title(pdoc, show_tags=false, show_invisible_flag=false) }}
         </p>
       {%- endfor -%}

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

@@ -54,7 +54,7 @@
             <td class="col--status record-status--border edit-mode-hide"></td>
           {% endif %}
         {% endif %}
-        <td class="col--name col--problem-name" {% if handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) %} data-star="{{ psdoc.star }}"{% endif %}>
+        <td class="col--name col--problem-name" data-action="{{ url('problem_detail', docId=pdoc.docId) }}" {% if handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) %} data-star="{{ psdoc.star }}"{% endif %}>
           {{ problem.render_problem_title(pdoc) }}
         </td>
         <td class="col--ac-tried">{{ pdoc.nAccept }} / {{ pdoc.nSubmit }}</td>