controllers/search: Show warning when using multiple category: filters

Author: Turbo87

app/controllers/search.js

@@ -7,7 +7,7 @@ import { restartableTask } from 'ember-concurrency';
 import { bool, reads } from 'macro-decorators';
 
 import { pagination } from '../utils/pagination';
-import { processSearchQuery } from '../utils/search';
+import { CATEGORY_PREFIX, processSearchQuery } from '../utils/search';
 
 export default class SearchController extends Controller {
   @service store;
@@ -49,6 +49,11 @@ export default class SearchController extends Controller {
 
   @bool('totalItems') hasItems;
 
+  get hasMultiCategoryFilter() {
+    let tokens = this.q.trim().split(/\s+/);
+    return tokens.filter(token => token.startsWith(CATEGORY_PREFIX)).length > 1;
+  }
+
   @action fetchData() {
     this.dataTask.perform().catch(() => {
       // we ignore errors here because they are handled in the template already

app/styles/application.module.css

@@ -6,6 +6,18 @@
     --grey200: hsl(200, 17%, 96%);
     --green800: hsl(115, 31%, 31%);
     --green900: hsl(115, 31%, 21%);
+
+    --orange-50: #fff7ed;
+    --orange-100: #ffedd5;
+    --orange-200: #fed7aa;
+    --orange-300: #fdba74;
+    --orange-400: #fb923c;
+    --orange-500: #f97316;
+    --orange-600: #ea580c;
+    --orange-700: #c2410c;
+    --orange-800: #9a3412;
+    --orange-900: #7c2d12;
+
     --yellow500: hsl(44, 100%, 60%);
     --yellow700: hsl(44, 67%, 50%);
 

app/styles/search.module.css

@@ -5,6 +5,15 @@
     margin-bottom: 25px;
 }
 
+.warning {
+    margin: 0 0 16px;
+    padding: 8px;
+    color: var(--orange-700);
+    background: var(--orange-100);
+    border-left: solid var(--orange-400) 4px;
+    border-radius: 2px;
+}
+
 .sort-by-label {
     composes: small from './shared/typography.module.css';
 }

app/templates/search.hbs

@@ -8,6 +8,12 @@
   data-test-header
 />
 
+{{#if this.hasMultiCategoryFilter}}
+  <div local-class="warning">
+    Support for using multiple <code>category:</code> filters is not yet implemented.
+  </div>
+{{/if}}
+
 {{#if this.firstResultPending}}
   <h2>Loading search results...</h2>
 {{else if this.dataTask.lastComplete.error}}

app/utils/search.js

@@ -1,4 +1,4 @@
-const CATEGORY_PREFIX = 'category:';
+export const CATEGORY_PREFIX = 'category:';
 const KEYWORD_PREFIX = 'keyword:';
 
 /**