[vue] Search for runs
<template>
- <div>
+ <v-card>
+ <v-card-title>
+ <v-text-field
+ v-model="runNameSearch"
+ append-icon="mdi-magnify"
+ label="Search for runs..."
+ single-line
+ hide-details
+ />
+ </v-card-title>
<v-data-table
:headers="headers"
:items="runs"
</v-chip>
</template>
</v-data-table>
- </div>
+ </v-card>
</template>
<script>
@@ -56,16 +65,19 @@ import VDataTable from "Vuetify/VDataTable/VDataTable";
import VChip from "Vuetify/VChip/VChip";
import VAvatar from "Vuetify/VAvatar/VAvatar";
import VIcon from "Vuetify/VIcon/VIcon";
+import { VCard, VCardTitle } from "Vuetify/VCard";
+import VTextField from "Vuetify/VTextField/VTextField";
import { DetectionStatusMixin } from "@/mixins";
import { DetectionStatusIcon } from "@/components/icons";
import { ccService } from '@cc-api';
+import { RunFilter } from '@cc/report-server-types';
export default {
name: 'RunList',
components: {
- VDataTable, VChip, VAvatar, VIcon,
+ VDataTable, VChip, VAvatar, VIcon, VCard, VCardTitle, VTextField,
DetectionStatusIcon
},
@@ -73,6 +85,7 @@ export default {
data() {
return {
+ runNameSearch: null,
headers: [
{
text: "Name",
@@ -117,13 +130,22 @@ export default {
};
},
+ watch: {
+ runNameSearch: function() {
+ this.fetchRuns();
+ }
+ },
+
created() {
this.fetchRuns();
},
methods: {
fetchRuns() {
- const runFilter = null;
+ const runFilter = this.runNameSearch
+ ? new RunFilter({ names: [`*${this.runNameSearch}*`]})
+ : null;
+
const limit = null;
const offset = null;
const sortMode = null;
