feat(board): rework card selection

* Standard click on links opens them on GitHub * SHIFT + click adds to filter or removes it * CTRL + click sets filter to selected element Closes #35
nikku · Jul 30, 2019 · 7c62a00 · 7c62a00
1 parent 5ec83f5
commit 7c62a00
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 11 deletions.
diff --git a/packages/board/src/Card.svelte b/packages/board/src/Card.svelte
@@ -4,6 +4,7 @@
     isOpenOrMerged,
     isPull,
     hasModifier,
+    hasShiftModifier,
     noDuplicates
   } from './util';
 
@@ -64,17 +65,17 @@
 
   $: cardUrl = `https://github.com/${ repositoryName }/issues/${ number }`;
 
-  function handleSelection(qualifier, value) {
+  function handleSelection(qualifier, value, clickThrough=true) {
 
     return function(event) {
 
-      if (hasModifier(event)) {
+      if (clickThrough && !hasModifier(event)) {
         return;
       }
 
       event.preventDefault();
 
-      onSelect(qualifier, value);
+      onSelect(qualifier, value, hasShiftModifier(event));
     };
   }
 </script>
@@ -209,7 +210,7 @@
         <Tag
           class="tag milestone"
           name={ milestone.title }
-          onClick={ onSelect && handleSelection('milestone', milestone.title) }
+          onClick={ onSelect && handleSelection('milestone', milestone.title, false) }
         />
       {/if}
 
@@ -218,7 +219,7 @@
           class="tag label"
           color="#{ color }"
           name={ name }
-          onClick={ onSelect && handleSelection('label', name) }
+          onClick={ onSelect && handleSelection('label', name, false) }
         />
       {/each}
 

diff --git a/packages/board/src/CardLink.svelte b/packages/board/src/CardLink.svelte
@@ -3,7 +3,8 @@
   import LinkIcon from './components/LinkIcon.svelte';
 
   import {
-    hasModifier
+    hasModifier,
+    hasShiftModifier
   } from './util';
 
   export let item;
@@ -32,13 +33,13 @@
 
     return function(event) {
 
-      if (hasModifier(event)) {
+      if (!hasModifier(event)) {
         return;
       }
 
       event.preventDefault();
 
-      onSelect(qualifier, value);
+      onSelect(qualifier, value, hasShiftModifier(event));
     };
   }
 </script>

diff --git a/packages/board/src/Taskboard.svelte b/packages/board/src/Taskboard.svelte
@@ -117,15 +117,35 @@
     return () => teardownHooks.forEach(fn => fn && fn());
   });
 
-  function applyFilter(qualifier, value) {
+  function applyFilter(qualifier, value, add) {
 
     if (/[\s:]+/.test(value)) {
       value = '"' + value + '"';
     }
 
-    if (value) {
-      return filterChanged(`${qualifier}:${value}`);
+    const criteria = value && `${qualifier}:${value}`;
+
+    if (!criteria) {
+      return;
+    }
+
+    let newFilter;
+
+    const criteriaIndex = filter.indexOf(criteria);
+
+    if (criteriaIndex === 0) {
+      newFilter = filter.substring(criteria.length + 1);
+    } else if (criteriaIndex > 0) {
+      newFilter = filter.substring(0, criteriaIndex - 1) + filter.substring(criteriaIndex + criteria.length);
+    } else {
+      if (add && filter.trim()) {
+        newFilter = `${filter} ${qualifier}:${value}`;
+      } else {
+        newFilter = criteria;
+      }
     }
+
+    return filterChanged(newFilter);
   }
 
   function filterChanged(value, pushHistory=true) {

diff --git a/packages/board/src/util/index.js b/packages/board/src/util/index.js
@@ -54,6 +54,10 @@ export function hasModifier(event) {
   return event.ctrlKey || event.shiftKey || event.altKey || event.metaKey;
 }
 
+export function hasShiftModifier(event) {
+  return event.shiftKey;
+}
+
 export function noDuplicates(keyFn) {
 
   const found = {};