ui: add complex descriptors selection in problem search (#636)

Co-authored-by: undefined <i@undefined.moe>
Co-authored-by: panda <panda_dtdyy@outlook.com>

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

@@ -1,8 +1,9 @@
 <ul class="group-list" data-widget-cf-container>
-  {%- for category, sub_categories in model.system.get('problem.categories')|parseYaml -%}
+  {% set _categories = (handler.domain.problemCategories or model.system.get('problem.categories'))|parseYaml %}
+  {%- for category, sub_categories in _categories -%}
     <li class="group-list__item">
       <h2 class="section__title">
-        <a href="{{ url('problem_main', query={q:'category:'+category}) }}" data-category="{{ category }}">{{ category }}</a>
+        <a href="{{ url('problem_main', query={q:'category:'+category}) }}">{{ category }}</a>
       </h2>
       {% if sub_categories | length > 0 %}
         <ol class="chip-list">

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

@@ -0,0 +1,41 @@
+{% set _categories = (handler.domain.problemCategories or model.system.get('problem.categories'))|parseYaml %}
+<div class="dialog--category-filter">
+  <div class="category-filter__header">      
+    <div class="list flex-row flex-cross-center" data-category-container>
+      {%- for category, sub_categories in _categories -%}
+        <div class="list__item" data-category="{{category}}">{{ category }}</div>
+      {%- endfor -%}
+    </div>
+  </div>
+  <div class="category-filter__body">
+    {%- for category, sub_categories in _categories -%}
+    <div class="section__body subcategory-container hide" data-subcategory-container="{{ category }}">
+      <div class="subcategory__selected">
+        <h2>{{ _('Selected categories') }}: </h2>
+        <div class="list flex-row flex-wrap">
+          <div class="chip-list__item search-tag__item hide selected" data-selection="category:{{ category }}">
+            {{ category }}
+            <span class="icon icon-close"></span>            
+          </div>            
+          {%- for sub_category in sub_categories -%}
+          <div class="chip-list__item search-tag__item hide selected" data-selection="category:{{ sub_category }}">
+            {{ sub_category }}
+            <span class="icon icon-close"></span>
+          </div>
+          {%- endfor -%}            
+        </div>
+      </div>
+      <div class="divider"></div>
+      <div class="subcategory__all">
+        <h2>{{ category }}: </h2>
+        <div class="list flex-row flex-wrap">
+          <div class="chip-list__item search-tag__item" data-selection="category:{{ category }}">{{ category }}</div>          
+          {%- for sub_category in sub_categories -%}
+          <div class="chip-list__item search-tag__item" data-selection="category:{{ sub_category }}">{{ sub_category }}</div>
+          {%- endfor -%}
+        </div>  
+      </div>
+    </div>
+    {%- endfor -%}
+  </div>
+</div>

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

@@ -0,0 +1,37 @@
+<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="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>
+      {%- endfor -%}
+    </div>
+  </div>
+{% endfor %} 
+  <div class="flex-row flex-cross-center">
+    <b class="title">{{ _('Problem Category') }}: &nbsp;&nbsp;</b>
+    <div class="chip-list flex-wrap flex-row">
+      <a class="chip-list__item typo-a dialog-button">{{ _('Select Category') }}</a>   
+    </div>
+  </div>
+  <div class="flex-row flex-cross-center">
+    <div class="subcategory-container__selected flex-row flex-wrap chip-list">
+      {%- for category, sub_categories in categories -%}
+        <div class="chip-list__item search-tag__item search-category__item hide selected" data-selection="category:{{ category }}">
+          {{ category }}
+          <span class="icon icon-close"></span>
+        </div>
+        {%- for sub_category in sub_categories -%}
+        <div class="chip-list__item search-tag__item search-category__item hide selected" data-selection="category:{{ sub_category }}">
+          {{ sub_category }}
+          <span class="icon icon-close"></span>
+        </div>
+        {%- endfor -%}
+      {%- endfor -%}
+    </div>
+  </div>
+</div>
+{% include "partials/problem_category_dialog.html" %}

packages/ui-default/templates/problem_main.html

@@ -15,6 +15,11 @@
               </button>
             </div>
           </form>
+        </div>
+        {% if handler.domain.pinnedFilter %}
+          {% include "partials/problem_search.html" %}
+        {% endif %}
+        <div class="section__body no-padding">
           {% include "partials/problem_list.html" %}
         </div>
       </div>