add pagination + fix filtering (#169)

* add pagination + fix filtering

* fix tableToCSV only use one page data

* move pagination to the next line

* add search bar (name+email)

* fix search full name

* add search + pagination to outreach page

* add quarter to table and quarter filter

* add induction class to table

* fix search bug

* fix searching bug in pagination when page number > 0

frontend/src/Components/Icon.svelte

@@ -0,0 +1,34 @@
+<script context="module">
+    import pathsByName from "./icon-paths";
+    export const iconOptions = Object.keys(pathsByName);
+    export const directions = ["n", "ne", "e", "se", "s", "sw", "w", "nw"];
+  </script>
+
+  <script>
+    export let name = "arrow";
+    export let direction = "n";
+
+    let paths = pathsByName[name] || [];
+    let rotation = directions.indexOf(direction) * 45;
+  </script>
+
+  <style>
+    .c {
+      width: 1em;
+      height: 1em;
+      fill: currentColor;
+      transition: all 0.3s ease-out;
+      overflow: visible;
+    }
+  </style>
+
+  <svg
+    class="c"
+    viewBox="0 0 25 25"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    style={`transform: rotate(${rotation}deg)`}>
+    {#each paths as path}
+      <path d={path} />
+    {/each}
+  </svg>

frontend/src/Components/Pagination.svelte

@@ -0,0 +1,77 @@
+<script>
+	import Icon from './Icon.svelte';
+
+    export let rows;
+    export let perPage;
+	export let trimmedRows;
+
+    $: totalRows = rows.length
+    $: currentPage = 0
+    $: totalPages = Math.ceil(totalRows / perPage)
+    $: start =  currentPage * perPage
+    $: end = currentPage === totalPages - 1 ? totalRows - 1 : start + perPage - 1  ;
+	$: trimmedRows = rows.slice(start, end + 1);
+
+    $: {
+        totalRows;
+        currentPage = 0;
+    }
+
+
+</script>
+
+    {#if totalRows && totalRows > perPage}
+        <div class='pagination'>
+            <button on:click={() => currentPage -= 1}
+                disabled={currentPage === 0 ? true : false}
+                aria-label="left arrow icon"
+                aria-describedby="prev">
+                    <Icon name = 'arrow' direction="s" />
+            </button>
+            <span id='prev' class='sr-only'>Load previous {perPage} rows</span>
+            <p>{start + 1} - {end + 1} of {totalRows}</p>
+            <button on:click={() => currentPage += 1}
+                disabled={currentPage === totalPages - 1 ? true : false}
+                aria-label="right arrow icon"
+                aria-describedby="next">
+                <Icon name = 'arrow' direction='n' />
+            </button>
+            <span id='next' class='sr-only'>Load next {perPage} rows</span>
+        </div>
+    {/if}
+
+
+<style>
+    .sr-only {
+      position: absolute;
+      clip: rect(1px, 1px, 1px, 1px);
+      padding: 0;
+      border: 0;
+      height: 1px;
+      width: 1px;
+      overflow: hidden;
+    }
+
+    .pagination {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: all;
+        width: 100%;
+        padding-top: 1rem;
+
+
+
+    }
+
+    .pagination p {
+        margin: 0 1rem;
+    }
+
+
+
+	button {
+		display: flex;
+        margin: 0;
+	}
+</style>

frontend/src/Components/SearchBar.svelte

@@ -0,0 +1,20 @@
+<script>
+    export let searchText;
+</script>
+
+<style>
+    .search-bar {
+        display: flex;
+        padding: 10px;
+    }
+
+    input {
+        padding: 0.5rem;
+        margin-right: 0.5rem;
+    }
+
+</style>
+
+<div class="search-bar">
+    <input type="text" bind:value={searchText} placeholder="Search..." />
+</div>