ui: support pinnedFilter metadata (#650)

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

@@ -13,6 +13,7 @@ import {
 } from 'vj/utils';
 
 const list = [];
+const filterTags = {};
 const pinned: Record<string, string[]> = { category: [], difficulty: [] };
 const selections = { category: {}, difficulty: {} };
 const selectedTags: Record<string, string[]> = { category: [], difficulty: [] };
@@ -90,10 +91,13 @@ function handleTagSelected(ev) {
   let [type, selection] = ['category', $(ev.currentTarget).text()];
   if ($(ev.currentTarget).attr('data-selection')) [type, selection] = $(ev.currentTarget).attr('data-selection').split(':');
   const category = $(ev.currentTarget).attr('data-category');
+  const filterType = $(ev.currentTarget).attr('data-filter');
   const treeItem = category ? selections[type][category].children[selection] : selections[type][selection];
   const shouldSelect = !(treeItem.$tag || treeItem.$legacy).hasClass('selected');
-  if (shouldSelect) selectedTags[type].push(selection);
-  else selectedTags[type] = _.without(selectedTags[type], selection, ...(category ? [] : Object.keys(treeItem.children)));
+  if (shouldSelect) {
+    if (filterType) selectedTags[type] = _.without(selectedTags[type], ...filterTags[filterType]);
+    selectedTags[type].push(selection);
+  } else selectedTags[type] = _.without(selectedTags[type], selection, ...(category ? [] : Object.keys(treeItem.children)));
   updateSelection();
   writeSelectionToInput();
   loadQuery();
@@ -248,7 +252,12 @@ categoryDialog.clear = function () {
 function buildSearchContainer() {
   $('[data-pinned-container] [data-selection]').each((_index, _element) => {
     const [type, selection] = $(_element).attr('data-selection').split(':');
+    const filterType = $(_element).attr('data-filter');
     pinned[type].push(selection);
+    if (filterType) {
+      filterTags[filterType] ||= [];
+      filterTags[filterType].push(selection);
+    }
     selections[type][selection] = {
       $tag: $(_element),
       children: {},

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

@@ -1,16 +1,18 @@
-<div class="section__body search-container">
 {% set pinnedFilter = handler.domain.pinnedFilter|parseYaml %}
 {% set categories = (handler.domain.problemCategories or model.system.get('problem.categories'))|parseYaml %}
-{% for k, v in pinnedFilter %}
+<div class="section__body search-container">
+  {% for k, v in pinnedFilter %}
   <div class="flex-row flex-cross-center">
     <b class="title">{{ k }}: &nbsp;&nbsp;</b>
     <div class="chip-list flex-wrap flex-row" data-pinned-container>
       {%- for name, t in v -%}
-      <a class="chip-list__item search-tag__item" data-selection="{{ t }}">{{ name }}</a>
+        {% if name !== '__metadata__' %}
+        <a class="chip-list__item search-tag__item" data-selection="{{ t }}" {% if pinnedFilter[k]['__metadata__']['single'] %}data-filter="{{ k }}"{% endif %}>{{ name }}</a>
+        {% endif %}
       {%- endfor -%}
     </div>
   </div>
-{% endfor %} 
+  {% endfor %} 
   <div class="flex-row flex-cross-center">
     <b class="title">{{ _('Problem Category') }}: &nbsp;&nbsp;</b>
     <div class="chip-list flex-wrap flex-row">