From 095b40624ce4a9ff0cd63d05bbf11afc32b8d0f9 Mon Sep 17 00:00:00 2001
From: Martin Stamm <martin.stamm@camunda.com>
Date: Fri, 17 Jun 2022 13:53:39 +0200
Subject: [PATCH 1/2] feat(board): add option to add quick-filters

---
 packages/board/src/CreateQuickFilter.svelte   |  31 +++++
 .../board/src/CreateQuickFilterDialog.svelte  | 131 ++++++++++++++++++
 packages/board/src/QuickFilters.svelte        |  77 ++++++++++
 packages/board/src/Taskboard.svelte           |   9 ++
 4 files changed, 248 insertions(+)
 create mode 100644 packages/board/src/CreateQuickFilter.svelte
 create mode 100644 packages/board/src/CreateQuickFilterDialog.svelte
 create mode 100644 packages/board/src/QuickFilters.svelte

diff --git a/packages/board/src/CreateQuickFilter.svelte b/packages/board/src/CreateQuickFilter.svelte
new file mode 100644
index 00000000..22b68630
--- /dev/null
+++ b/packages/board/src/CreateQuickFilter.svelte
@@ -0,0 +1,31 @@
+<script>
+  import CreateFilterDialog from './CreateQuickFilterDialog.svelte';
+
+  export let onSubmit= () => {};
+  export let onClose = () => {};
+
+  let open;
+
+  const handleClose = (e) => {
+    onClose(e);
+    open = false;
+  };
+
+  const handleSubmit = (e) => {
+    onSubmit(e);
+    open = false;
+  };
+</script>
+
+<button class="btn btn-outline-primary ml-1" on:click={() => {open = true}}>🖫</button>
+
+{#if open}
+  <CreateFilterDialog
+    onClose={ handleClose }
+    onSubmit={ handleSubmit }
+  >
+    <h4 slot="header" class="chooser-header my-3">
+      Create new Quickfilter
+    </h4>
+  </CreateFilterDialog>
+{/if}
\ No newline at end of file
diff --git a/packages/board/src/CreateQuickFilterDialog.svelte b/packages/board/src/CreateQuickFilterDialog.svelte
new file mode 100644
index 00000000..7a7b0f80
--- /dev/null
+++ b/packages/board/src/CreateQuickFilterDialog.svelte
@@ -0,0 +1,131 @@
+<script>
+
+  import { onMount } from 'svelte';
+
+  import { Id } from './util';
+
+  const inputId = Id();
+
+  export let onClose;
+
+  export let onSubmit;
+
+  let value = '';
+
+  let input;
+
+  function handleInput(event) {
+    value = event.target.value;
+  }
+
+  function handleInputKey(event) {
+
+    const key = event.key;
+
+    if (key === 'Enter') {
+      checkSubmit(event);
+    }
+
+    if (key === 'Escape' && !value) {
+      input.blur();
+
+      event.preventDefault();
+    }
+  }
+
+  onMount(() => {
+    input.focus();
+  });
+
+  function checkClose(event) {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+
+      onClose();
+    }
+  }
+
+  function checkSubmit(event) {
+    event.preventDefault();
+
+    if (!value) {
+      return;
+    }
+
+    return onSubmit(value);
+  }
+</script>
+
+<style lang="scss">
+
+  .filter-create {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    z-index: 10;
+  }
+
+  .overlay {
+    width: 100%;
+    height: 100%;
+
+    background: rgba(30, 30, 30, .30);
+  }
+
+  .filter-creator {
+    position: absolute;
+    z-index: 2;
+    width: 500px;
+    max-width: 100%;
+
+    background: white;
+    top: 30%;
+    left: 50%;
+    transform: translate(-50%);
+
+    line-height: 1.5;
+
+    border-radius: 5px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  .form-container {
+    margin-bottom: 1rem;
+    display: flex;
+  }
+
+  .form-container > input {
+    flex-grow: 1;
+  }
+</style>
+
+<svelte:window on:keydown={ checkClose } />
+
+<div class="filter-create">
+  <div class="overlay" on:click={ onClose }></div>
+
+  <form class="filter-creator px-4 py-2" on:submit={ checkSubmit }>
+
+    <slot name="header"></slot>
+    <div class="form-container">
+      <input
+        id={ inputId }
+        bind:this={ input }
+        value={ value }
+        on:input={ handleInput }
+        on:keydown={ handleInputKey }
+        placeholder="Filter Name"
+        autocomplete="off"
+        spellcheck="false"
+        aria-label="Qucikfilter name input"
+        class="form-control form-control-lg"
+        type="text"
+      />
+      <button type="submit" class="btn btn-primary btn-lg mx-1">Create</button>
+    </div>
+  </form>
+
+</div>
\ No newline at end of file
diff --git a/packages/board/src/QuickFilters.svelte b/packages/board/src/QuickFilters.svelte
new file mode 100644
index 00000000..0ecff02e
--- /dev/null
+++ b/packages/board/src/QuickFilters.svelte
@@ -0,0 +1,77 @@
+
+<script>
+import CreateFilter from "./CreateQuickFilter.svelte";
+
+  import { createLocalStore } from "./util";
+
+  export let setFilter;
+  export let currentFilter;
+   
+  const defaultFilter = [
+    {
+      name: "Assigned to me",
+      value: "assignee:@me"
+    }
+  ];
+
+  const localStorage = createLocalStore();
+
+  let filters = localStorage.get("quickFilters", defaultFilter);
+  const removeFilter = (filter) => {
+    filters = filters.filter(f => f !== filter);
+    localStorage.set("quickFilters", filters);
+  };
+  
+
+  const createFilter = name => {
+    const filter = {
+      name,
+      value: currentFilter
+    };
+    filters = [...filters, filter];
+    localStorage.set("quickFilters", filters);
+  }
+
+</script>
+
+<div class="quickFilters navbar-collapse">
+  <CreateFilter onSubmit={createFilter} />
+  
+  {#each filters as filter}
+    <button
+      class="btn btn-outline-primary ml-1 {filter.value === currentFilter ? 'active' : ''}"
+        on:click={() => {
+          if(filter.value !== currentFilter) {
+            setFilter(filter.value);
+          }
+          else {
+            setFilter('');
+          }
+        }}
+    >
+      <span>{filter.name}</span>
+      <button class="btn removeButton" on:click={
+        (e) => {
+          removeFilter(filter);
+          e.stopPropagation();
+        }
+        }>x</button>
+    </button>
+  {/each}
+
+</div>
+
+<style>
+  .btn:hover .removeButton {
+    display: inline;
+  }
+
+  .removeButton {
+    display: none;
+    line-height: normal;
+    padding: 0;
+    vertical-align: baseline;
+    color: inherit;
+    transition: none;
+  }
+</style>
\ No newline at end of file
diff --git a/packages/board/src/Taskboard.svelte b/packages/board/src/Taskboard.svelte
index 8a7519b6..5cf026f1 100644
--- a/packages/board/src/Taskboard.svelte
+++ b/packages/board/src/Taskboard.svelte
@@ -1,5 +1,6 @@
 <script>
   import BoardFilter from './BoardFilter.svelte';
+  import QuickFilters from './QuickFilters.svelte';
 
   import Avatar from './components/Avatar.svelte';
   import Loader from './components/Loader.svelte';
@@ -787,6 +788,10 @@
   .taskboard {
     position: relative;
   }
+
+  .navbar-collapse {
+    justify-content: space-between;
+  }
 </style>
 
 <svelte:head>
@@ -863,6 +868,10 @@
           onChange={ filterChanged }
           placeholder={ 'Filter board...' }
         />
+        <QuickFilters
+          setFilter={ filterChanged }
+          currentFilter={ filter }
+        />
       </form>
 
       <form class="form-inline mx-3 my-2 my-sm-0" on:submit|preventDefault={ openCreateIssue }>

From ac2d3744958ba7c6c91f9d83055f978ef5deeafb Mon Sep 17 00:00:00 2001
From: Martin Stamm <martin.stamm@camunda.com>
Date: Tue, 5 Jul 2022 08:52:05 +0200
Subject: [PATCH 2/2] chore(board): fix LINT errors

---
 packages/board/src/CreateQuickFilter.svelte |  4 +-
 packages/board/src/QuickFilters.svelte      | 54 ++++++++++-----------
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/packages/board/src/CreateQuickFilter.svelte b/packages/board/src/CreateQuickFilter.svelte
index 22b68630..682366bd 100644
--- a/packages/board/src/CreateQuickFilter.svelte
+++ b/packages/board/src/CreateQuickFilter.svelte
@@ -1,7 +1,7 @@
 <script>
   import CreateFilterDialog from './CreateQuickFilterDialog.svelte';
 
-  export let onSubmit= () => {};
+  export let onSubmit = () => {};
   export let onClose = () => {};
 
   let open;
@@ -17,7 +17,7 @@
   };
 </script>
 
-<button class="btn btn-outline-primary ml-1" on:click={() => {open = true}}>🖫</button>
+<button class="btn btn-outline-primary ml-1" on:click={() => {open = true;}}>🖫</button>
 
 {#if open}
   <CreateFilterDialog
diff --git a/packages/board/src/QuickFilters.svelte b/packages/board/src/QuickFilters.svelte
index 0ecff02e..95407151 100644
--- a/packages/board/src/QuickFilters.svelte
+++ b/packages/board/src/QuickFilters.svelte
@@ -1,36 +1,36 @@
 
 <script>
-import CreateFilter from "./CreateQuickFilter.svelte";
+import CreateFilter from './CreateQuickFilter.svelte';
 
-  import { createLocalStore } from "./util";
+import { createLocalStore } from './util';
 
-  export let setFilter;
-  export let currentFilter;
-   
-  const defaultFilter = [
-    {
-      name: "Assigned to me",
-      value: "assignee:@me"
-    }
-  ];
+export let setFilter;
+export let currentFilter;
 
-  const localStorage = createLocalStore();
+const defaultFilter = [
+  {
+    name: 'Assigned to me',
+    value: 'assignee:@me'
+  }
+];
 
-  let filters = localStorage.get("quickFilters", defaultFilter);
-  const removeFilter = (filter) => {
-    filters = filters.filter(f => f !== filter);
-    localStorage.set("quickFilters", filters);
-  };
-  
+const localStorage = createLocalStore();
 
-  const createFilter = name => {
-    const filter = {
-      name,
-      value: currentFilter
-    };
-    filters = [...filters, filter];
-    localStorage.set("quickFilters", filters);
-  }
+let filters = localStorage.get('quickFilters', defaultFilter);
+const removeFilter = (filter) => {
+  filters = filters.filter(f => f !== filter);
+  localStorage.set('quickFilters', filters);
+};
+
+
+const createFilter = name => {
+  const filter = {
+    name,
+    value: currentFilter
+  };
+  filters = [ ...filters, filter ];
+  localStorage.set('quickFilters', filters);
+};
 
 </script>
 
@@ -41,7 +41,7 @@ import CreateFilter from "./CreateQuickFilter.svelte";
     <button
       class="btn btn-outline-primary ml-1 {filter.value === currentFilter ? 'active' : ''}"
         on:click={() => {
-          if(filter.value !== currentFilter) {
+          if (filter.value !== currentFilter) {
             setFilter(filter.value);
           }
           else {