Remove color function

dodona-edu · Apr 4, 2024 · cc610d6 · cc610d6
1 parent b25015c
commit cc610d6
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 56 deletions.
diff --git a/app/assets/javascripts/components/search/dropdown_filter.ts b/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,7 +15,7 @@ import { DodonaElement } from "components/meta/dodona_element";
  *
  * @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
@@ -19,8 +24,8 @@ import { DodonaElement } from "components/meta/dodona_element";
  */
 @customElement("d-dropdown-filter")
 export class DropdownFilter extends FilterCollectionElement {
-    @property()
-    color: (s: Label) => string;
+    @property({ type: String })
+    color: AccentColor;
     @property()
     type: string;
 
@@ -43,7 +48,7 @@ export class DropdownFilter extends FilterCollectionElement {
         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>

diff --git a/app/assets/javascripts/components/search/filter_collection_element.ts b/app/assets/javascripts/components/search/filter_collection_element.ts
@@ -3,10 +3,11 @@ import { searchQueryState } from "state/SearchQuery";
 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,
+    color: AccentColor,
     paramVal: (l: Label) => string,
     param: string
 };

diff --git a/app/assets/javascripts/components/search/search_token.ts b/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>

diff --git a/app/views/layouts/_searchbar.html.erb b/app/views/layouts/_searchbar.html.erb
@@ -36,9 +36,7 @@
             paramVal: function(l) { return l.name.toString(); },
             multi: true,
             data: <%= raw render template: 'labels/index', formats: :json %>,
-            color: function (label) {
-                return label.color;
-            },
+            color: "purple"
         };
         <% end %>
         <% if local_assigns.fetch :programming_languages, false %>
@@ -47,9 +45,7 @@
             paramVal: function(p) { return p.name.toString(); },
             multi: false,
             data: <%= raw render template: 'programming_languages/index', formats: :json %>,
-            color: function () {
-                return "red";
-            },
+            color: "red",
         };
         <% end %>
         <% if local_assigns.fetch :repositories, false %>
@@ -58,9 +54,7 @@
             paramVal: function(r) { return r.id.toString(); },
             multi: false,
             data: <%= raw render template: 'repositories/index', formats: :json %>,
-            color: function () {
-                return "blue-gray";
-            },
+            color: "blue-gray",
         };
         <% end %>
         <% if local_assigns.fetch(:institutions, []).length > 1 %>
@@ -69,9 +63,7 @@
             paramVal: function(i) { return i.id.toString(); },
             multi: false,
             data: <%= raw local_assigns.fetch(:institutions, []).map{|i| {id: i.id, name: i.name}}.to_json %>,
-            color: function () {
-                return "pink";
-            },
+            color: "pink",
         };
         <% end %>
         <% if local_assigns.fetch :course_labels, false %>
@@ -82,9 +74,7 @@
             },
             multi: true,
             data: <%= raw local_assigns.fetch(:course_labels, []).map{|cl| {id: cl.id, name: cl.name}}.to_json %>,
-            color: function () {
-                return "orange";
-            },
+            color: "orange",
         };
         <% end %>
         <% if local_assigns.fetch :statuses, false %>
@@ -95,9 +85,7 @@
             },
             multi: false,
             data: <%= raw local_assigns.fetch(:statuses, []).map{|s| {id: s, name: Submission.human_enum_name(:status, s)}}.to_json %>,
-            color: function () {
-                return "indigo";
-            },
+            color: "indigo",
         };
         <% end %>
         <% if local_assigns.fetch :question_states, false %>
@@ -108,9 +96,7 @@
             },
             multi: false,
             data: <%= raw local_assigns.fetch(:question_states, []).map{|s| {id: s, name: Question.human_enum_name(:question_state, s)}}.to_json %>,
-            color: function () {
-                return "indigo";
-            },
+            color: "indigo",
         };
         <% end %>
         <% if local_assigns.fetch :event_types, false %>
@@ -121,9 +107,7 @@
             },
             multi: false,
             data: <%= raw local_assigns.fetch(:event_types, []).map{|s| {id: s, name: Event.human_enum_name(:event_type, s)}}.to_json %>,
-            color: function () {
-                return "deep-purple";
-            },
+            color: "deep-purple",
         };
         <% end %>
         <% if local_assigns.fetch :activity_types, false %>
@@ -134,9 +118,7 @@
             },
             multi: false,
             data: <%= raw local_assigns.fetch(:activity_types, []).map{|s| {id: s.name, name: s.model_name.human}}.to_json %>,
-            color: function () {
-                return "deep-purple";
-            },
+            color: "deep-purple",
         };
         <% end %>
         <% if local_assigns.fetch :description_languages, false %>
@@ -147,9 +129,7 @@
             },
             multi: true,
             data: <%= raw local_assigns.fetch(:description_languages, []).map{|l| {id: l, name: t("js.#{l}")}}.to_json %>,
-            color: function () {
-                return "orange";
-            },
+            color: "orange",
         };
         <% end %>
         <% if local_assigns.fetch :judges, false %>
@@ -160,9 +140,7 @@
             },
             multi: false,
             data: <%= raw local_assigns.fetch(:judges, []).map{|judge| {id: judge.id, name: "#{judge.name}-judge"}}.to_json %>,
-            color: function () {
-                return "red";
-            }
+            color: "red",
         }
         <% end %>
         <% if local_assigns.fetch :courses, false %>
@@ -173,9 +151,7 @@
             },
             multi: false,
             data: <%= raw local_assigns.fetch(:courses, []).map{|course| {id: course.id, name: "#{course.name} (#{course.formatted_year})"}}.to_json %>,
-            color: function () {
-                return "orange";
-            }
+            color: "orange"
         };
         <% end %>
         <% if local_assigns.fetch :exercises, false %>
@@ -186,9 +162,7 @@
           },
           multi: false,
           data: <%= raw local_assigns.fetch(:exercises, []).map{|exercise| {id: exercise.id, name: exercise.name}}.to_json %>,
-          color: function () {
-            return "blue-gray";
-          }
+          color: "blue-gray"
         };
         <% end %>
         <% if local_assigns.fetch :popularity, false %>
@@ -199,9 +173,7 @@
               },
               multi: true,
               data: <%= raw local_assigns.fetch(:popularity, []).map{|s| {id: s, name: Activity.human_enum_name(:popularity, s)}}.to_json %>,
-              color: function () {
-                return "pink";
-              },
+              color: "pink",
             };
         <% end %>
       <% if local_assigns.fetch :draft, false %>
@@ -215,9 +187,7 @@
             {id: true, name: "<%= t("activities.index.filters.draft") %>"},
             {id: false, name: "<%= t("activities.index.filters.not_draft") %>"}
           ],
-          color: function () {
-            return "indigo";
-          },
+          color: "indigo",
         };
       <% end %>