implement search, fixes #40

assets/script.js

@@ -73,6 +73,7 @@
                 createApp({
                     data () {
                         return {
+                            needle: '',
                             issues,
                             qmLabels,
                             filters
@@ -81,6 +82,13 @@
                     methods: {
                         getStateForIssueAndQmLabel(issue, qm) {
                             return issue.qm_states[qm];
+                        },
+                        valueMatchesNeedle(what) {
+                            if (this.needle.length === 0) {
+                                return false;
+                            }
+
+                            return what.toLowerCase().includes(this.needle.toLowerCase());
                         }
                     },
                     computed: {
@@ -88,7 +96,7 @@
                             return 8 + Object.values(qmLabels).length;
                         },
                         filteredIssues() {
-                            return this.issues.filter(issue => {
+                            let filtered = this.issues.filter(issue => {
                                 for (const [key, value] of Object.entries(this.filters)) {
                                     if (value === null) {
                                         continue;
@@ -99,6 +107,19 @@
                                 }
                                 return true;
                             });
+
+                            if (this.needle.length > 0) {
+                                filtered = filtered.filter(issue => {
+                                    const ciNeedle = this.needle.toLowerCase();
+                                    return issue.iid.toString().includes(this.needle)
+                                        || issue.title.toLowerCase().includes(ciNeedle)
+                                        || (issue.assignee ?? '').toLowerCase().includes(ciNeedle)
+                                        || (issue.author ?? '').toLowerCase().includes(ciNeedle)
+                                        || issue.reviewers.some(reviewer => reviewer.toLowerCase().includes(ciNeedle));
+                                });
+                            }
+
+                            return filtered;
                         }
                     },
                     watch: {

assets/style.scss

@@ -23,3 +23,7 @@
         padding: 0 0.5em;
     }
 }
+
+td.filter-match {
+    background-color: var(--yellow-20);
+}

views/dashboard/index.php

@@ -48,7 +48,7 @@ $attributes = [
                 </td>
             </tr>
             <tr v-for="issue in filteredIssues">
-                <td>
+                <td :class="{'filter-match': valueMatchesNeedle(issue.iid.toString())}">
                     <a :href="issue.web_url" target="_blank">
                         #{{ issue.iid }}
                     </a>
@@ -70,14 +70,18 @@ $attributes = [
                         <?= Icon::create('date', Icon::ROLE_STATUS_YELLOW) ?>
                     </abbr>
                 </td>
-                <td>
+                <td :class="{'filter-match': valueMatchesNeedle(issue.title)}">
                     <a :href="issue.web_url" target="_blank">
                         {{ issue.title }}
                     </a>
                 </td>
-                <td>{{ issue.author }}</td>
-                <td>{{ issue.assignee }}</td>
-                <td>
+                <td :class="{'filter-match': valueMatchesNeedle(issue.author)}">
+                    {{ issue.author }}
+                </td>
+                <td :class="{'filter-match': valueMatchesNeedle(issue.assignee)}">
+                    {{ issue.assignee }}
+                </td>
+                <td :class="{'filter-match': valueMatchesNeedle(issue.reviewers.join('||'))}">
                     <ul v-if="issue.reviewers.length > 0" class="list-csv">
                         <li v-for="username in issue.reviewers" :key="`reviewer-${issue.iid}-${username}`">{{ username }}</li>
                     </ul>
@@ -92,8 +96,26 @@ $attributes = [
     </table>
 
     <mounting-portal mount-to="#layout-sidebar .sidebar" name="sidebar-filter" append>
+        <div class="sidebar-widget sidebar-search">
+            <div class="sidebar-widget-header"><?= _('Suche') ?></div>
+            <div class="sidebar-widget-content">
+                <form action="#" @submit="event => event.preventDefault()">
+                    <ul class="needles">
+                        <li>
+                            <div class="input-group files-search">
+                                <input type="text" v-model.trim="needle" placeholder="<?= _('Suchwort') ?>">
+                                <button class="submit-search" type="submit" title="<?= _('Suche auführen') ?>">
+                                    <?= Icon::create('search')->asImg(20) ?>
+                                </button>
+                            </div>
+                        </li>
+                    </ul>
+                </form>
+            </div>
+        </div>
+
         <div class="sidebar-widget">
-            <div class="sidebar-widget-header">Filter</div>
+            <div class="sidebar-widget-header"><?= _('Filter') ?></div>
             <div class="sidebar-widget-content">
                 <label v-for="(abbr, label) in qmLabels" style="display: block;">
                     {{ label }}