Add dynamic counts to search filters

app/assets/javascripts/components/search/dropdown_filter.ts

@@ -1,6 +1,11 @@
 import { html, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { FilterCollection, Label, FilterCollectionElement } from "components/search/filter_collection_element";
+import {
+    FilterCollection,
+    Label,
+    FilterCollectionElement,
+    AccentColor
+} from "components/search/filter_collection_element";
 import { i18n } from "i18n/i18n";
 import { DodonaElement } from "components/meta/dodona_element";
 
@@ -10,17 +15,16 @@
  *
  * @element d-dropdown-filter
  *
- * @prop {(s: Label) => string} color - a function that fetches the color associated with each label
+ * @prop {AccentColor} color - the color associated with the filter
  * @prop {string} type - The type of the filter collection, used to determine the dropdown button text
  * @prop {string} param - the searchQuery param to be used for this filter
  * @prop {boolean} multi - whether one or more labels can be selected at the same time
- * @prop {(l: Label) => string} paramVal - a function that extracts the value that should be used in a searchQuery for a selected label
  * @prop {[Label]} labels - all labels that could potentially be selected
  */
 @customElement("d-dropdown-filter")
 export class DropdownFilter extends FilterCollectionElement {
-    @property()
-    color: (s: Label) => string;
+    @property({ type: String })
+    color: AccentColor;
     @property()
     type: string;
 
@@ -43,7 +47,7 @@
         return html`
             <div class="dropdown dropdown-filter">
                 <a class="token token-bordered" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
-                    ${this.getSelectedLabels().map( s => html`<i class="mdi mdi-circle mdi-12 mdi-colored-accent accent-${this.color(s)} left-icon"></i>`)}
+                    ${this.getSelectedLabels().map( () => html`<i class="mdi mdi-circle mdi-12 mdi-colored-accent accent-${this.color} left-icon"></i>`)}
                     ${i18n.t(`js.dropdown.${this.multi?"multi":"single"}.${this.type}`)}
                     <i class="mdi mdi-chevron-down mdi-18 right-icon"></i>
                 </a>
@@ -92,7 +96,6 @@
                 <d-dropdown-filter
                     .labels=${c.data}
                     .color=${c.color}
-                    .paramVal=${c.paramVal}
                     .param=${c.param}
                     .multi=${c.multi}
                     .type=${type}

app/assets/javascripts/components/search/filter_collection_element.ts

@@ -3,11 +3,11 @@
 import { DodonaElement } from "components/meta/dodona_element";
 
 export type Label = {id: string, name: string};
+export type AccentColor = "red" | "pink" | "purple" | "deep-purple" | "indigo" | "teal" | "orange" | "brown" | "blue-gray";
 export type FilterCollection = {
     data: Label[],
     multi: boolean,
-    color: (l: Label) => string,
-    paramVal: (l: Label) => string,
+    color: AccentColor,
     param: string
 };
 
@@ -26,8 +26,6 @@
     param: string;
     @property({ type: Boolean })
     multi: boolean;
-    @property()
-    paramVal: (l: Label) => string;
     @property({ type: Array })
     labels: Array<Label> = [];
 
@@ -47,36 +45,32 @@
         super.update(changedProperties);
     }
 
-    private str(label: Label): string {
-        return this.paramVal(label).toString();
-    }
-
     private get multiSelected(): string[] {
         return searchQueryState.arrayQueryParams.get(this.param) || [];
     }
 
     private multiUnSelect(label: Label): void {
-        searchQueryState.arrayQueryParams.set(this.param, this.multiSelected.filter(s => s !== this.str(label)));
+        searchQueryState.arrayQueryParams.set(this.param, this.multiSelected.filter(s => s !== label.id));
     }
 
     private multiIsSelected(label: Label): boolean {
-        return this.multiSelected.includes(this.str(label));
+        return this.multiSelected.includes(label.id);
     }
 
     private multiSelect(label: Label): void {
-        searchQueryState.arrayQueryParams.set(this.param, [...this.multiSelected, this.str(label)]);
+        searchQueryState.arrayQueryParams.set(this.param, [...this.multiSelected, label.id]);
     }
 
     private singleUnSelect(label: Label): void {
         searchQueryState.queryParams.set(this.param, undefined);
     }
 
     private singleSelect(label: Label): void {
-        searchQueryState.queryParams.set(this.param, this.str(label));
+        searchQueryState.queryParams.set(this.param, label.id);
     }
 
     private singleIsSelected(label: Label): boolean {
-        return searchQueryState.queryParams.get(this.param) === this.str(label);
+        return searchQueryState.queryParams.get(this.param) === label.id;
     }
 
     isSelected = this.singleIsSelected;

app/assets/javascripts/components/search/filter_tabs.ts

@@ -19,8 +19,6 @@ export class FilterTabs extends watchMixin(FilterCollectionElement) {
     multi = false;
     @property()
     param = "tab";
-    @property()
-    paramVal = (label: Label): string => label.id.toString();
     @property({ type: Array })
     labels: TabInfo[];
 

app/assets/javascripts/components/search/search_field.ts

@@ -3,7 +3,7 @@ import { html, TemplateResult } from "lit";
 import { createDelayer } from "utilities";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { ref } from "lit/directives/ref.js";
-import { FilterCollectionElement, Label } from "components/search/filter_collection_element";
+import { FilterCollection, FilterCollectionElement, Label } from "components/search/filter_collection_element";
 import { searchQueryState } from "state/SearchQuery";
 import { search } from "search";
 import { DodonaElement } from "components/meta/dodona_element";
@@ -83,7 +83,7 @@ export class SearchField extends DodonaElement {
     @property({ type: Boolean })
     eager: boolean;
     @property( { type: Array })
-    filterCollections: Record<string, { data: Label[], multi: boolean, paramVal: (l: Label) => string, param: string }>;
+    filterCollections: Record<string, FilterCollection>;
 
     @property({ state: true })
     filter?: string = "";
@@ -171,7 +171,6 @@ export class SearchField extends DodonaElement {
                         .labels=${c.data}
                         .type=${type}
                         .filter=${this.filter}
-                        .paramVal=${c.paramVal}
                         .param=${c.param}
                         .multi=${c.multi}
                         .index=${i}

app/assets/javascripts/components/search/search_token.ts

@@ -1,6 +1,11 @@
 import { html, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { FilterCollection, FilterCollectionElement, Label } from "components/search/filter_collection_element";
+import {
+    AccentColor,
+    FilterCollection,
+    FilterCollectionElement,
+    Label
+} from "components/search/filter_collection_element";
 import { DodonaElement } from "components/meta/dodona_element";
 
 /**
@@ -9,16 +14,16 @@ import { DodonaElement } from "components/meta/dodona_element";
  *
  * @element d-search-token
  *
- * @prop {(s: Label) => string} color - a function that fetches the color associated with each label
+ * @prop {AccentColor} color - the color associated with the filter
  * @prop {string} param - the searchQuery param to be used for this filter
  * @prop {boolean} multi - whether one or more labels can be selected at the same time
  * @prop {(l: Label) => string} paramVal - a function that extracts the value that should be used in a searchQuery for a selected label
  * @prop {[Label]} labels - all labels that could potentially be selected
  */
 @customElement("d-search-token")
 export class SearchToken extends FilterCollectionElement {
-    @property()
-    color: (l: Label) => string;
+    @property({ type: String })
+    color: AccentColor;
 
     processClick(e: Event, label: Label): void {
         this.unSelect(label);
@@ -28,7 +33,7 @@ export class SearchToken extends FilterCollectionElement {
     render(): TemplateResult {
         return html`
             ${ this.getSelectedLabels().map( label => html`
-                <div class="token accent-${this.color(label)}">
+                <div class="token accent-${this.color}">
                     <span class="token-label">${label.name}</span>
                     <a href="#" class="close" tabindex="-1"  @click=${e => this.processClick(e, label)}>
                         <i class="mdi mdi-close mdi-18"></i>
@@ -61,7 +66,6 @@ export class SearchTokens extends DodonaElement {
                 <d-search-token
                     .labels=${c.data}
                     .color=${c.color}
-                    .paramVal=${c.paramVal}
                     .param=${c.param}
                     .multi=${c.multi}
                 >

app/assets/javascripts/components/search/standalone-dropdown-filter.ts

@@ -17,15 +17,13 @@
 export class StandaloneDropdownFilter extends watchMixin(FilterCollectionElement) {
     @property()
     multi = false;
-    @property()
-    paramVal = (label: Label): string => label.id.toString();
     @property({ type: String })
     default;
 
     watch = {
         default: () => {
             if (this.getSelectedLabels().length === 0) {
-                this.select(this.labels.find(label => this.paramVal(label) === this.default));
+                this.select(this.labels.find(label => label.id === this.default));
             }
         }
     };

app/controllers/activities_controller.rb

@@ -2,6 +2,7 @@ class ActivitiesController < ApplicationController
   include SeriesHelper
   include SetLtiMessage
   include Sortable
+  include HasFilter
 
   INPUT_SERVICE_WORKER = 'inputServiceWorker.js'.freeze
 
@@ -19,13 +20,13 @@ class ActivitiesController < ApplicationController
 
   has_scope :by_filter, as: 'filter'
   has_scope :by_labels, as: 'labels', type: :array, if: ->(this) { this.params[:labels].is_a?(Array) }
-  has_scope :by_programming_language, as: 'programming_language'
-  has_scope :by_type, as: 'type'
   has_scope :in_repository, as: 'repository_id'
   has_scope :by_description_languages, as: 'description_languages', type: :array
-  has_scope :by_judge, as: 'judge_id'
   has_scope :by_popularities, as: 'popularity', type: :array
   has_scope :is_draft, as: 'draft'
+  has_filter :programming_language, 'red'
+  has_filter :type, 'deep-purple'
+  has_filter :judge, 'red'
 
   has_scope :repository_scope, as: 'tab' do |controller, scope, value|
     course = Series.find(controller.params[:id]).course if controller.params[:id]
@@ -74,6 +75,7 @@ def index
     end
 
     unless @activities.empty?
+      @filters = filters(@activities)
       @activities = apply_scopes(@activities)
       @activities = @activities.paginate(page: parse_pagination_param(params[:page]))
     end

app/controllers/concerns/has_filter.rb

@@ -0,0 +1,27 @@
+module HasFilter
+  extend ActiveSupport::Concern
+
+  class_methods do
+    def has_filter(name, color, multi: false)
+      if multi
+        has_scope "by_#{name}", as: name, type: :array
+      else
+        has_scope "by_#{name}", as: name
+      end
+
+      @@filters ||= []
+      @@filters << [name, multi, color]
+    end
+  end
+  def filters(target)
+    @@filters.map do |filter, multi, color|
+      params_without_current = params.except(:controller, :action, :page, filter)
+      {
+        param: filter,
+        data: apply_scopes(target, params_without_current).send("#{filter}_filter_options"),
+        multi: multi,
+        color: color
+      }
+    end
+  end
+end

app/models/activity.rb

@@ -76,12 +76,13 @@ class Activity < ApplicationRecord
   scope :in_repository, ->(repository) { where repository: repository }
 
   scope :by_name, ->(name) { where('name_nl LIKE ? OR name_en LIKE ? OR path LIKE ?', "%#{name}%", "%#{name}%", "%#{name}%") }
-  scope :by_status, ->(status) { where(status: status.in?(statuses) ? status : -1) }
-  scope :by_access, ->(access) { where(access: access.in?(accesses) ? access : -1) }
+  search_by :name_nl, :name_en, :path
+  filterable_by :status, value_check: ->(value) { value.in? statuses }
+  filterable_by :access, value_check: ->(value) { value.in? accesses }
+  filterable_by :programming_language, column: 'programming_languages.name', associations: :programming_language
+  filterable_by :type, name_hash: ->(value) { { Exercise.name => Exercise.model_name.human, ContentPage.name => ContentPage.model_name.human } }
+  filterable_by :judge, column: 'judge_id', name_hash: ->(values) { Judge.where(id: values).to_h { |j| [j.id, j.name] } }
   scope :by_labels, ->(labels) { includes(:labels).where(labels: { name: labels }).group(:id).having('COUNT(DISTINCT(activity_labels.label_id)) = ?', labels.uniq.length) }
-  scope :by_programming_language, ->(programming_language) { includes(:programming_language).where(programming_languages: { name: programming_language }) }
-  scope :by_type, ->(type) { where(type: type) }
-  scope :by_judge, ->(judge) { where(judge_id: judge) }
   scope :is_draft, ->(value = true) { where(draft: value) }
   scope :by_description_languages, lambda { |languages|
     by_language = all # allow chaining of scopes
@@ -424,10 +425,6 @@ def safe_destroy
     destroy
   end
 
-  def set_search
-    self.search = "#{Activity.human_enum_name(:status, status, locale: :nl)} #{Activity.human_enum_name(:status, status, locale: :en)} #{Activity.human_enum_name(:access, access, locale: :en)} #{Activity.human_enum_name(:access, access, locale: :nl)} #{name_nl} #{name_en} #{path}"
-  end
-
   def self.parse_type(type)
     return Exercise.name unless type
     return type if types.include?(type)

app/models/concerns/filterable.rb

@@ -1,8 +1,40 @@
 module Filterable
   extend ActiveSupport::Concern
 
-  included do
-    before_save :set_search
-    scope :by_filter, ->(filter) { filter.split.map(&:strip).select(&:present?).inject(self) { |query, part| query.where("#{table_name}.search LIKE ?", "%#{part}%") } }
+  class_methods do
+    def search_by(*columns)
+      define_method(:set_search) do
+        self.search = columns.map { |column| send(column) || '' }.join(' ')
+      end
+
+      before_save :set_search
+      scope :by_filter, ->(filter) { filter.split.map(&:strip).select(&:present?).inject(self) { |query, part| query.where("#{table_name}.search LIKE ?", "%#{part}%") } }
+    end
+
+    # Creates a scope for the column, with the name `by_#{column}`
+    # It also creates a method `#{column}_filter_options` that returns the possible values for the column, with the count of each value
+    # params:
+    # +name+:: The name of the scope
+    # +column+:: The column to create the scope for
+    # +associations+:: The associations to include in the scope
+    # +value_check+:: A lambda that must return true for a value, otherwise the scope will return an empty relation
+    # +name_hash+:: a lambda that takes a list af column values and returns a hash with the human readable name for each column value
+    def filterable_by(name, column: name, associations: [], value_check: ->(value) { true }, name_hash: ->(values) { values.to_h { |value| [value, value] } })
+      scope "by_#{name}", lambda { |value|
+        if value_check.call(value)
+          includes(associations).where(column => value)
+        else
+          none
+        end
+      }
+
+      define_singleton_method("#{name}_filter_options") do
+        count = joins(associations).group(column).count
+        names = name_hash.call(count.keys)
+
+        count.map { |key, value| { id: key.to_s, name: names[key], count: value } }
+      end
+
+    end
   end
 end

app/models/course.rb

@@ -161,6 +161,7 @@ class Course < ApplicationRecord
   validate :should_have_institution_when_visible_for_institution
   validate :should_have_institution_when_open_for_institution
 
+  search_by :name, :teacher, :year
   scope :by_name, ->(name) { where('name LIKE ?', "%#{name}%") }
   scope :by_teacher, ->(teacher) { where('teacher LIKE ?', "%#{teacher}%") }
   scope :by_institution, ->(institution) { where(institution: institution) }
@@ -413,10 +414,6 @@ def self.format_year(year)
     year.sub(/ ?- ?/, '–')
   end
 
-  def set_search
-    self.search = "#{teacher || ''} #{name || ''} #{year || ''}"
-  end
-
   def color
     colors = %w[blue-gray orange cyan purple teal pink indigo brown deep-purple]
     colors[year.to_i % colors.size]

app/models/user.rb

@@ -136,6 +136,8 @@ class User < ApplicationRecord
 
   accepts_nested_attributes_for :identities, limit: 1
 
+  search_by :username, :first_name, :last_name
+
   scope :by_permission, ->(permission) { where(permission: permission) }
   scope :by_institution, ->(institution) { where(institution: institution) }
 
@@ -384,10 +386,6 @@ def self.from_username_and_institution(username, institution_id)
     find_by(username: username, institution_id: institution_id)
   end
 
-  def set_search
-    self.search = "#{username || ''} #{first_name || ''} #{last_name || ''}"
-  end
-
   # Be careful when using force institution. This expects the providers to be updated externally
   def merge_into(other, force: false, force_institution: false)
     errors.add(:merge, 'User belongs to different institution') if !force_institution && other.institution_id != institution_id && other.institution_id.present? && institution_id.present?